外部框架修改

wujingjing

2025-02-12 30768127d259e6675aa26dbe21c61197e637a678

外部框架修改

 src/assets/logo/header_logo.png

 src/components/AppHeader.vue

@@ -1,17 +1,17 @@
<template>
    <header class="bg-white shadow-sm flex items-center">
        <div class="container  mx-80">
            <div class="flex items-center justify-between h-20">
        <div class=" flex w-full">
            <div class="flex items-center  h-20 mx-auto">
                <!-- Logo -->
                <div class="flex items-center cursor-pointer">
                    <router-link to="/">
                        <img src="/logo.svg" alt="Logo" class="h-8 w-auto" />
                        <img :src="headerLogo" alt="Logo" class="h-20 w-auto" />
                    </router-link>
                    <span class="text-extra-large font-bold">工业大数据平台</span>
                    <!-- <span class="text-extra-large font-bold">工业大数据平台</span> -->
                </div>

                <!-- Navigation Menu -->
                <nav class="flex-1 ml-8">
                <nav class="flex ml-8">
                    <el-menu mode="horizontal" :ellipsis="false" class="border-none" router :default-active="activeRoute">
                        <el-menu-item index="/" class="!px-4">首页</el-menu-item>
                        <el-menu-item index="/industrial-software" class="!px-4">工业软件|工业APP</el-menu-item>
@@ -22,14 +22,14 @@
                </nav>

                <!-- Search and User Actions -->
                <div class="flex items-center space-x-4">
                    <el-input v-model="searchQuery" placeholder="找工业/找大数据" class="w-48">
                <div class="flex items-center space-x-8 ml-[65px]">
                    <el-input v-model="searchQuery" placeholder="找工业/找大数据" class="w-48 ">
                        <template #suffix>
                            <el-icon><Search /></el-icon>
                        </template>
                    </el-input>

                    <div class="flex items-center text-gray-600 text-sm text-nowrap">
                    <div class="flex items-center text-gray-600 text-sm text-nowrap ">
                        <a href="#" class="hover:text-blue-500">注册</a>
                        <span class="mx-2">·</span>
                        <a href="#" class="hover:text-blue-500">登录</a>
@@ -44,7 +44,7 @@
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Search } from '@element-plus/icons-vue';

import headerLogo from '@/assets/logo/header_logo.png';
const route = useRoute();
const searchQuery = ref('');


 src/views/Home.vue

@@ -1,5 +1,5 @@
<template>
    <div class="h-full ">
    <div class="h-full">
        <!-- 轮播图部分 -->
        <div class="banner-carousel">
            <el-carousel height="400px" :interval="5000" arrow="always">
@@ -38,87 +38,88 @@
                </el-carousel-item>
            </el-carousel>
        </div>
		
        <!-- 功能按钮区域 -->
        <div class="bg-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-4 gap-8">
                    <!-- 发APP -->
                    <div class="function-card">
                        <el-card shadow="hover" class="h-full cursor-pointer">
                            <div class="flex flex-col items-center space-y-2">
                                <div class="w-16 h-16 flex items-center justify-center bg-blue-100 rounded-full">
                                    <el-icon class="text-3xl text-blue-500"><Promotion /></el-icon>
        <div>
            <!-- 功能按钮区域 -->
            <div class="bg-white py-8">
                <div class="container mx-auto px-4">
                    <div class="grid grid-cols-4 gap-8">
                        <!-- 发APP -->
                        <div class="function-card">
                            <el-card shadow="hover" class="h-full cursor-pointer">
                                <div class="flex flex-col items-center space-y-2">
                                    <div class="w-16 h-16 flex items-center justify-center bg-blue-100 rounded-full">
                                        <el-icon class="text-3xl text-blue-500"><Promotion /></el-icon>
                                    </div>
                                    <div class="text-lg font-medium">发APP</div>
                                    <div class="text-gray-500 text-sm">Publish APP</div>
                                </div>
                                <div class="text-lg font-medium">发APP</div>
                                <div class="text-gray-500 text-sm">Publish APP</div>
                            </div>
                        </el-card>
                    </div>
                            </el-card>
                        </div>

                    <!-- 发需求 -->
                    <div class="function-card">
                        <el-card shadow="hover" class="h-full cursor-pointer">
                            <div class="flex flex-col items-center space-y-2">
                                <div class="w-16 h-16 flex items-center justify-center bg-green-100 rounded-full">
                                    <el-icon class="text-3xl text-green-500"><Document /></el-icon>
                        <!-- 发需求 -->
                        <div class="function-card">
                            <el-card shadow="hover" class="h-full cursor-pointer">
                                <div class="flex flex-col items-center space-y-2">
                                    <div class="w-16 h-16 flex items-center justify-center bg-green-100 rounded-full">
                                        <el-icon class="text-3xl text-green-500"><Document /></el-icon>
                                    </div>
                                    <div class="text-lg font-medium">发需求</div>
                                    <div class="text-gray-500 text-sm">Publish Demand</div>
                                </div>
                                <div class="text-lg font-medium">发需求</div>
                                <div class="text-gray-500 text-sm">Publish Demand</div>
                            </div>
                        </el-card>
                    </div>
                            </el-card>
                        </div>

                    <!-- 找APP -->
                    <div class="function-card">
                        <el-card shadow="hover" class="h-full cursor-pointer">
                            <div class="flex flex-col items-center space-y-2">
                                <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">
                                    <el-icon class="text-3xl text-purple-500"><Search /></el-icon>
                        <!-- 找APP -->
                        <div class="function-card">
                            <el-card shadow="hover" class="h-full cursor-pointer">
                                <div class="flex flex-col items-center space-y-2">
                                    <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">
                                        <el-icon class="text-3xl text-purple-500"><Search /></el-icon>
                                    </div>
                                    <div class="text-lg font-medium">找APP</div>
                                    <div class="text-gray-500 text-sm">Find APP</div>
                                </div>
                                <div class="text-lg font-medium">找APP</div>
                                <div class="text-gray-500 text-sm">Find APP</div>
                            </div>
                        </el-card>
                    </div>
                            </el-card>
                        </div>

                    <!-- 找需求 -->
                    <div class="function-card">
                        <el-card shadow="hover" class="h-full cursor-pointer">
                            <div class="flex flex-col items-center space-y-2">
                                <div class="w-16 h-16 flex items-center justify-center bg-orange-100 rounded-full">
                                    <el-icon class="text-3xl text-orange-500"><List /></el-icon>
                        <!-- 找需求 -->
                        <div class="function-card">
                            <el-card shadow="hover" class="h-full cursor-pointer">
                                <div class="flex flex-col items-center space-y-2">
                                    <div class="w-16 h-16 flex items-center justify-center bg-orange-100 rounded-full">
                                        <el-icon class="text-3xl text-orange-500"><List /></el-icon>
                                    </div>
                                    <div class="text-lg font-medium">找需求</div>
                                    <div class="text-gray-500 text-sm">Find Demand</div>
                                </div>
                                <div class="text-lg font-medium">找需求</div>
                                <div class="text-gray-500 text-sm">Find Demand</div>
                            </div>
                        </el-card>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新闻公告区域 -->
        <div class="container mx-auto px-4 py-8">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center space-x-2">
                    <el-icon class="text-blue-500"><Document /></el-icon>
                    <span class="text-lg font-medium">新闻政策</span>
            <!-- 新闻公告区域 -->
            <div class="container mx-auto px-4 py-8">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center space-x-2">
                        <el-icon class="text-blue-500"><Document /></el-icon>
                        <span class="text-lg font-medium">新闻政策</span>
                    </div>
                    <el-button text>更多</el-button>
                </div>
                <el-button text>更多</el-button>
                <el-card>
                    <el-table :data="newsList" style="width: 100%" :show-header="false">
                        <el-table-column>
                            <template #default="scope">
                                <div class="flex justify-between items-center py-2">
                                    <div class="text-gray-700 hover:text-blue-500 cursor-pointer">{{ scope.row.title }}</div>
                                    <div class="text-gray-400 text-sm">{{ scope.row.date }}</div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
            <el-card>
                <el-table :data="newsList" style="width: 100%" :show-header="false">
                    <el-table-column>
                        <template #default="scope">
                            <div class="flex justify-between items-center py-2">
                                <div class="text-gray-700 hover:text-blue-500 cursor-pointer">{{ scope.row.title }}</div>
                                <div class="text-gray-400 text-sm">{{ scope.row.date }}</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>