官网代码

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "prettier/prettier": "off",
     "vue/multi-word-component-names": "off",
+    '@typescript-eslint/no-var-requires': 'off',
     "@typescript-eslint/no-explicit-any": ["off"]
   },
 };

package.json

@@ -11,6 +11,8 @@
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "element-plus": "^2.6.2",
+    "node-sass": "^6.0.1",
+    "sass-loader": "^10.2.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"

src/components/home/home-meun copy.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <div class="flex-grow"></div>
+          <template v-for="(item, index) in menus"  v-bind:key="index">
+            <el-menu-item  v-if="item.meta.title !== '产品介绍'">{{ item.meta.title }}</el-menu-item>
+            <!-- <el-sub-menu v-else index="2">
+              <template #title>产品介绍</template>
+              
+              <el-menu-item v-for="(item, index) in productData"  v-bind:key="index" index="index">{{item.name}}</el-menu-item>
+
+            </el-sub-menu> -->
+          </template>
+        </el-menu>
+      </el-header>
+      <el-main>
+        <el-scrollbar style="margin-top: 20px;">
+          <router-view />
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref,onMounted } from 'vue'
+import request from '../../utils/request'
+import routers from "../../router";
+import { useRouter } from "vue-router";
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const apiUrl = ref('http://39.164.159.226:8100/')
+const productData = ref([])
+const menus = routers.options.routes.find((o) => { return o.name === 'home'; }).children;
+const router = useRouter();
+const index = menus.findIndex((o) => { return o.path === router.currentRoute.value.path });
+const activeIndex = ref(index)
+onMounted(()=>{
+    getList()
+})
+function getList() {
+    request.get('/Product/product').then((res)=>{
+        res.data.length>0 ? (productData.value = res.data) : (productData.value = [])
+    })
+}
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+  activeIndex.value = Number(key);
+  router.push(menus[key])
+}
+</script>
+<style lang="scss" scoped>
+  :deep(.el-menu ){
+    background:none;
+    border: none !important;
+
+  }
+  :deep(.el-menu--horizontal>.el-menu-item.is-active ) {
+    color: #fff !important;
+      border: none;
+  }
+  :deep(.el-menu-item:not(.is-disabled):hover){
+    background: none !important;
+  }
+  :deep(.el-menu-item:not(.is-disabled):focus){
+    background-color:rgba(220,38,38,0) !important;
+  }
+  :deep(.el-sub-menu__title){
+    font-size: 26px;
+    font-weight: bold;
+  }
+  :deep(.el-sub-menu__title:hover){
+    background: none !important;
+  }
+  :deep(.el-menu-item){
+    font-size: 26px;
+    font-weight: bold;
+  }
+  :deep(.el-dropdown-link){
+    font-size: 22px;
+    color: inherit;
+  }
+  .flex-grow {
+    flex-grow: 0.8;
+  }
+</style>

src/components/home/home-meun.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <div class="flex-grow"></div>
+          <template v-for="(item, index) in menus"  v-bind:key="index">
+            <el-menu-item  v-if="item.meta.title !== '产品介绍'" :index="index">{{ item.meta.title }}</el-menu-item>
+            <el-sub-menu v-else :index="index">
+              <template #title>产品介绍</template>
+              <el-menu-item v-for="(item, index) in productData" v-bind:key="index" index="1" @click="trunHandle(item.id)">{{item.name}}</el-menu-item>
+            </el-sub-menu>
+          </template>
+        </el-menu>
+      </el-header>
+      <el-main>
+        <el-scrollbar style="margin-top: 20px;">
+          <router-view />
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref,onMounted } from 'vue'
+import request from '../../utils/request'
+import routers from "../../router";
+import { useRouter } from "vue-router";
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const apiUrl = ref('http://39.164.159.226:8100/')
+const productData = ref([])
+const menus = routers.options.routes.find((o) => { return o.name === 'home'; }).children;
+const router = useRouter();
+const index = menus.findIndex((o) => { return o.path === router.currentRoute.value.path });
+const activeIndex = ref(index)
+onMounted(()=>{
+    getList()
+})
+function getList() {
+    request.get('/Product/product').then((res)=>{
+        res.data.length>0 ? (productData.value = res.data) : (productData.value = [])
+    })
+}
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+  activeIndex.value = Number(key);
+  if (Number(key)!==1) {
+    router.push(menus[key])
+  }
+}
+function trunHandle(id) {
+  router.push({ name: 'HomeProduct', query: { id }})
+}
+</script>
+<style lang="scss" scoped>
+  :deep(.el-menu ){
+    background:none;
+    border: none !important;
+
+  }
+  :deep(.el-menu--horizontal>.el-menu-item.is-active ) {
+    color: #fff !important;
+      border: none;
+  }
+  :deep(.el-menu-item:not(.is-disabled):hover){
+    background: none !important;
+  }
+  :deep(.el-menu-item:not(.is-disabled):focus){
+    background-color:rgba(220,38,38,0) !important;
+  }
+  :deep(.el-sub-menu__title){
+    font-size: 26px;
+    font-weight: bold;
+  }
+  :deep(.el-sub-menu__title:hover){
+    background: none !important;
+  }
+  :deep(.el-menu-item){
+    font-size: 26px;
+    font-weight: bold;
+  }
+  :deep(.el-dropdown-link){
+    font-size: 22px;
+    color: inherit;
+  }
+  .flex-grow {
+    flex-grow: 0.8;
+  }
+</style>

src/components/home/home-meun1.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+          <div class="flex-grow"></div>
+          <!-- <template v-for="(item, index) in menus">
+            <el-menu-item>{{ item.meta.title }}</el-menu-item>
+          </template> -->
+          <el-menu-item v-bind:key="index" :index="index" v-for="(item, index) in menus">
+            {{ item.meta.title }}
+            <!-- <template v-if="item.meta.title === '产品介绍'">
+              {{ item.meta.title }}
+              <el-dropdown>
+                <span class="el-dropdown-link">
+                  产品介绍
+                  <el-icon class="el-icon--right">
+                    <arrow-down />
+                  </el-icon>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>Action 1</el-dropdown-item>
+                    <el-dropdown-item>Action 2</el-dropdown-item>
+                    <el-dropdown-item>Action 3</el-dropdown-item>
+                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+                    <el-dropdown-item divided>Action 5</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+            <template v-else>
+              {{ item.meta.title }}
+            </template> -->
+          </el-menu-item>
+        </el-menu>
+      </el-header>
+      <el-main>
+        <el-scrollbar style="margin-top: 20px;">
+          <router-view />
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import routers from "../../router";
+import { useRouter } from "vue-router";
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const menus = routers.options.routes.find((o) => { return o.name === 'home'; }).children;
+const router = useRouter();
+console.log(router.currentRoute.value.path, 'router');
+const index = menus.findIndex((o) => { return o.path === router.currentRoute.value.path });
+const activeIndex = ref(index)
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+  activeIndex.value = Number(key);
+  console.log(menus[key])
+  router.push(menus[key])
+}
+</script>
+<style lang="scss" scoped>
+  :deep(.el-menu ){
+    background:none;
+    border: none !important;
+
+  }
+  :deep(.el-menu--horizontal>.el-menu-item.is-active ) {
+    color: #fff !important;
+      border: none;
+  }
+  :deep(.el-menu-item:not(.is-disabled):hover){
+    background: none !important;
+  }
+  :deep(.el-menu-item:not(.is-disabled):focus){
+    background-color:rgba(220,38,38,0) !important;
+  }
+  
+  :deep(.el-menu-item){
+    font-size: 26px;
+    font-weight: bold;
+  }
+  :deep(.el-dropdown-link){
+    font-size: 22px;
+    color: inherit;
+  }
+  .flex-grow {
+    flex-grow: 0.8;
+  }
+</style>

src/components/home/home.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="wrap">
+    <div class="page">
+      <div class="logo">
+        <img style="width: 300px; height: 35px" src="@/assets/logo.png" />
+      </div>
+      <div class="page-main">
+        <home-meun/>
+      </div>
+      <div class="page-footer">
+        <el-row :gutter="100">
+          <el-col :span="6">
+            <div class="footer-item">
+              <div class="item-title">
+                联系我们
+              </div>
+              <div class="item-info">
+                <el-icon color="#fff"><User /></el-icon>
+                {{companyData.contacts}}
+              </div>
+              <div class="item-info">
+                <el-icon><Phone /></el-icon>
+                {{companyData.tel}}
+              </div>
+              <div class="item-info">
+                <el-icon><Message /></el-icon>
+                {{companyData.mailbox}}
+              </div>
+              <div class="item-info">
+                <el-icon><LocationInformation /></el-icon>
+                {{companyData.address}}
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="footer-item">
+              <div class="item-title">售后服务</div>
+              <div class="item-text">
+                {{companyData.afterSalesContent}}
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="footer-item">
+              <div class="item-title">添加微信</div>
+              <div class="item-image">
+                <el-image 
+                style="width: 120px; height: 120px" 
+                :src="apiUrl+ qrCodeUrl" 
+                fit="fill" />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="chatPop">
+      <div class="hideChat" @click="chatHandle" v-if="!chatFlag">
+        联系我们
+        <br>
+        <el-icon color="#0FFF00"><ChatRound /></el-icon>
+      </div>
+      <div class="showChat" @click="chatHandle" v-if="chatFlag">
+        <el-image style="width: 120px; height: 120px" :src="apiUrl+ qrCodeUrl" fit="fill" />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup name="App">
+  
+  import { ref,onMounted } from "vue";
+  import request from '../../utils/request'
+  import { User,Phone,Message,LocationInformation,ChatRound } from '@element-plus/icons-vue'
+  import HomeMeun from './home-meun.vue'  //  首页
+
+  const activeName = ref('first')
+  const homeMainRef = ref(null)
+  const homeLonghairRef = ref(null)
+  const homeActivityRef = ref(null)
+  const chatFlag = ref(false)
+  const apiUrl = ref('http://39.164.159.226:8100/')
+  const qrCodeUrl = ref('')
+  const companyData = ref({})
+  onMounted(()=>{
+    const urlPah = require('../../assets/bg.png')
+    document.querySelector('body')
+      .setAttribute('style', 'background-repeat:no-repeat;background-size:100% 100%; background-image:url("' + urlPah + '") ')
+    document.querySelector('html')
+      .setAttribute('style', 'background:#000;')
+      getList()
+  })
+  function getList() {
+      request.get('/Company/company').then((res)=>{
+        if (res.data.length>0) {
+          companyData.value = res.data[0]
+          qrCodeUrl.value = Object.values(companyData.value.wxFileInfo)[0]
+        }
+      })
+  }
+  function chatHandle() {
+    chatFlag.value = !chatFlag.value
+  }
+  const handleClick = (tab) => {
+    if (tab.props.name === 'first') {
+      homeMainRef.value.detailFlag = false
+    } else if (tab.props.name === 'third') {
+      homeLonghairRef.value.detailFlag = false
+    } else if (tab.props.name === 'fourth') {
+      homeActivityRef.value.detailFlag = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #9d9d9d;
+    margin-top: 60px;
+
+  }
+  :deep(.root){
+    --el-color-primary: #000;  
+  }
+  :deep(.el-tabs__nav-wrap:after){
+    height: 0px !important;
+  }
+  :deep(.el-tabs__nav) {
+    float: right;
+    .el-tabs__item{
+      font-size: 22px;
+      color: #9d9d9d;
+    }
+    .el-tabs__item.is-active{
+      color: #fff;
+    }
+  }
+  .title{
+    line-height: 50px;
+    font-size: 26px;
+    font-weight: bold;
+  }
+  .content{
+    font-size: 16px;
+    line-height: 30px;
+  }
+  .wrap {
+    .chatPop{
+      cursor: pointer;
+      margin-top: -70px;
+      position: fixed;
+      top: 50%;
+      right: 0;
+      text-align: center;
+      background: #636363;
+      .hideChat{
+        width: 30px;
+        word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
+        word-break:break-all;
+        border-radius: 5px 0px 0px 5px;
+        line-height: 26px;
+        padding: 10px;
+        color: #fff;
+      }
+     
+    }
+    .page {
+      width: 80%;
+      height: 100%;
+      margin: 0 auto;
+
+      position: relative;
+      .logo{
+        position: absolute;
+        left: 0px;
+        top: 36px;
+        z-index: 1;
+      }
+      .page-main{
+        /* height: 550px; */
+        
+        scrollbar-width: none; /* firefox */
+        -ms-overflow-style: none; /* IE 10+ */
+        overflow-x: hidden;
+        overflow-y: hidden;
+      }
+      .page-footer{
+        text-align: left;
+        border-top: 2px solid #2c3e50;
+        padding:15px;
+        margin-top: 80px;
+        .footer-item{
+          .item-title{
+            color: #D0D0D0;
+            display: inline-block;
+            font-size: 18px;
+            line-height: 50px;
+            border-bottom: 4px solid;
+            border-image: linear-gradient(to right, #FE8700, #80490B) 1;
+          }
+          .item-info{
+            line-height: 36px;
+            color: #D0D0D0;
+          }
+          .item-text{
+            margin-top: 15px;
+            color: #9d9d9d;
+            line-height: 36px;
+            text-indent: 2em;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            display:-webkit-box;
+            -webkit-box-orient:vertical;
+            -webkit-line-clamp:4;
+          }
+          .item-image{
+            margin-top: 30px;
+          }
+        }
+      }
+    }
+    
+  }
+</style>

src/router/index.ts

@@ -1,21 +1,57 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import HomeView from "@/components/home/home.vue";
 import AdminLayout from "@/components/layout/admin.vue";
 
 const routes: Array<RouteRecordRaw> = [
+  // {
+  //   path: "/",
+  //   name: "homeDetail",
+  //   component: HomeView,
+  //   children: [
+  //     {
+  //       path: "/home/product",
+  //       component: () => import("@/views/home/home-product.vue"),
+  //       name: "HomeProduct",
+  //       meta: { title: "产品介绍", icon: "dashboard", affix: true },
+  //     },
+  //   ],
+  // },
   {
     path: "/",
     name: "home",
     component: HomeView,
-  },
-  {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+    children: [
+      {
+        path: "",
+        component: () => import("@/views/home/home-main.vue"),
+        name: "HomeMain",
+        meta: { title: "首页", icon: "dashboard", affix: true },
+      },
+      {
+        path: "/home/product",
+        component: () => import("@/views/home/home-product.vue"),
+        name: "HomeProduct",
+        meta: { title: "产品介绍", icon: "dashboard", affix: true },
+      },
+      {
+        path: "/home/longhair",
+        component: () => import("@/views/home/home-longhair.vue"),
+        name: "HomeLonghair",
+        meta: { title: "艺术家", icon: "dashboard", affix: true },
+      },
+      {
+        path: "/home/activity",
+        component: () => import("@/views/home/home-activity.vue"),
+        name: "HomeActivity",
+        meta: { title: "参与活动", icon: "dashboard", affix: true },
+      },
+      {
+        path: "/home/intro",
+        component: () => import("@/views/home/home-intro.vue"),
+        name: "HomeIntro",
+        meta: { title: "公司介绍", icon: "dashboard", affix: true },
+      },
+    ],
   },
   {
     path: "/admin",

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/home/home-activity.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="main" v-if="!detailFlag">
+        <el-row :gutter="30" class="home-item" v-for="(item, index) in activityData" :key="index">
+            <el-col :span="6" class="item-image">
+                <el-image style="width: 80%; margin: 10%;" :src="apiUrl+ Object.values(item.fileInfo)[0]" fit="fill" />
+            </el-col>
+            <el-col :span="18" class="item-content">
+                <div class="contetn-title">
+                    <div class="titel-text1">{{item.title}}</div>
+                    <div class="titel-text2">{{item.createTime.split(' ')[0]}}</div>
+                </div>
+                <div class="content-text">
+                    {{item.content}}
+                </div>
+                <div class="textView">
+                    <el-button size="large" type="warning" link @click="handleView(item)">查看更多</el-button>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+    <div class="main" v-if="detailFlag">
+        
+        <div class="main-title" >
+            {{activityDetails.title}}
+            <el-button @click="handleView" class="returnBtn" type="warning" link>返回首页</el-button>
+        </div>
+        <div class="main-time">{{activityDetails.createTime.split(' ')[0]}}</div>
+        <div class="main-content">
+            <img :src="apiUrl+ Object.values(activityDetails.fileInfo)[0]" align="right" width="300" hspace="30" vspace="30">
+            {{activityDetails.content}}
+        </div>
+    </div>
+</template>
+
+<script setup name="HomeActivity">
+    import { ref, onMounted } from 'vue'
+    import request from '../../utils/request'
+    const apiUrl = ref('http://39.164.159.226:8100/')
+    const detailFlag = ref(false)
+    const activityData = ref([])
+    const activityDetails = ref({})
+    onMounted(()=>{
+        getList()
+    })
+    function getList() {
+        request.get('/Activity/activity').then((res)=>{
+            res.data.length>0 ? (activityData.value = res.data) : (activityData.value = [])
+        })
+    }
+    function handleView(item) {
+        handleturn()
+        activityDetails.value = item
+    }
+    function handleturn() {
+        detailFlag.value = !detailFlag.value
+    }
+    // defineExpose({ detailFlag });
+</script>
+<style scoped lang="scss">
+    .main{
+        width: 99%;
+        text-align: left;
+        color: #5e5b57;
+        .home-item{
+            display: flex;
+            width: 100%;
+            .item-content{
+                font-size: 16px;
+                line-height: 30px;
+                .contetn-title{
+                    display: flex;
+                    
+                    .titel-text1{
+                        color: #9f9a93;
+                        width: 50%;
+                        text-align: left;
+                        line-height: 50px;
+                        font-size: 26px;
+                        font-weight: bold;
+                    }
+                    .titel-text2{
+                        width: 50%;
+                        line-height: 60px;
+                        text-align: right;
+                    }
+                }
+                .content-text{
+                    font-size: 16px;
+                    line-height: 36px;
+                    text-indent: 2em;
+                    overflow:hidden;
+                    text-overflow:ellipsis;
+                    display:-webkit-box;
+                    -webkit-box-orient:vertical;
+                    -webkit-line-clamp:4;
+                }
+                .textView{
+                    text-align: right;
+                }
+            }
+        }
+        .main-title{
+            text-align: center;
+            line-height: 60px;
+            font-size: 26px;
+            font-weight: bold;
+            color: #9f9a93;
+            .returnBtn{
+                position: absolute;
+                right: 8px;
+                top: 25px;
+            }
+        }
+        .main-time{
+            text-align: center;
+            font-size: 16px;
+            line-height: 30px;
+        }
+        .main-content{
+            width: 100%;
+            font-size: 16px;
+            line-height: 36px;
+        }
+    }
+</style>

src/views/home/home-intro.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="main">
+        <div class="home-item">
+            <div class="item-image">
+                <el-image 
+                style="width: 500px; margin: 15px;" 
+                :src="apiUrl+ resultUrl" 
+                fit="fill" />
+            </div>
+            <div class="item-content">
+                <div class="contetn-title">
+                    <div class="titel-text1">{{introData.name}}</div>
+                </div>
+                <div class="content-text">
+                    <p v-html="introData.content">
+                        
+                    </p>
+                    
+
+
+                </div>
+            </div>
+            
+        </div>
+      
+    </div>
+</template>
+
+<script setup name="HomeIntro">
+    import { ref,onMounted } from 'vue' 
+    import request from '../../utils/request'
+    const apiUrl = ref('http://39.164.159.226:8100/')
+    const resultUrl = ref('')
+    const introData = ref({})
+    onMounted(()=>{
+        getList()
+    })
+    function getList() {
+        request.get('/Company/company').then((res)=>{
+            res.data.length>0 ? (introData.value = res.data[0]) : (introData.value = {})
+            resultUrl.value = Object.values(introData.value.fileInfo)[0]
+        })
+    }
+</script>
+<style scoped lang="scss">
+    .main{
+        width: 99%;
+        color: #5e5b57;
+        text-align: left;
+        .home-item{
+            display: flex;
+            width: 100%;
+            .item-image{
+                margin: 100px 100px 0px 100px;
+            }
+            .item-content{
+                margin-top: 20px;
+                font-size: 16px;
+                line-height: 30px;
+                .contetn-title{
+                    .titel-text1{
+                        line-height: 50px;
+                        font-size: 26px;
+                        font-weight: bold;
+                        color: #9f9a93;
+                    }
+                }
+                .content-text{
+                    
+                    font-size: 18px;
+                    line-height: 36px;
+                    text-indent: 2em;
+                }
+            }
+        }
+    }
+</style>

src/views/home/home-longhair.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="main" v-if="!detailFlag">
+        <el-row :gutter="30">
+            <el-col :span="12" v-for="(item, index) in productData" :key="index" style="position: relative;">
+                <el-image 
+                    @click="handleView(item)"
+                    style="width: 100%; margin: 15px;" 
+                    :src="apiUrl+ Object.values(item.fileInfo)[0]" 
+                    fit="fill" />
+                <div class="posText">
+                    <div class="textTitle">
+                        {{item.name}}
+                    </div>
+                    <div class="textInfo">
+                        {{item.content}}
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row :gutter="30">
+            <el-col :span="6" v-for="(item, index) in productDataEnd" :key="index" style="position: relative;">
+                <el-image 
+                @click="handleView" 
+                style="width: 100%; margin: 15px;" 
+                :src="apiUrl+ Object.values(item.fileInfo)[0]" 
+                fit="fill" />
+                <div class="posText">
+                    <div class="textTitle">{{item.name}}</div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+    <div class="main" v-if="detailFlag">
+        <div class="home-item">
+            <el-button @click="handleturn" class="returnBtn" type="warning" link>返回首页</el-button>
+                <el-row :gutter="50" style="width: 100%;margin-top: 30px;">
+                    <el-col :span="16" class="item-content">
+                        <div class="contetn-title">
+                            <div class="titel-text1">{{productDetails.name}}</div>
+                            <div class="titel-text2">{{productDetails.dateOfBirth}} </div>
+                        </div>
+                        <div class="content-text">
+                            {{productDetails.content}}
+                        </div>
+                    </el-col>
+                    <el-col :span="8" class="item-image">
+                        <el-image style="width: 100%;" :src="apiUrl+ Object.values(productDetails.fileInfo)[0]"  fit="fill" />
+                    </el-col>
+                </el-row>
+        </div>
+    </div>
+</template>
+
+<script setup name="homeLonghair">
+    import { ref, onMounted } from 'vue'
+    import request from '../../utils/request'
+    const apiUrl = ref('http://39.164.159.226:8100/')
+    const detailFlag = ref(false)
+    const productData = ref([])
+    const productDataEnd = ref([])
+    const productDetails = ref({})
+    onMounted(()=>{
+        getList()
+    })
+    function getList() {
+        request.get('Artist/artist').then((res)=>{
+            res.data.length>0 ? (productData.value = res.data) : (productData.value = [])
+            productData.value = []
+            productDataEnd.value = []
+            if (res.data.length>0) {
+                res.data.forEach((ele,i) => {
+                    if (i<4) {
+                        productData.value.push(ele)
+                    }else{
+                        productDataEnd.value.push(ele)
+                    }
+                });
+            }
+        })
+    }
+    function handleView(item) {
+        handleturn()
+        productDetails.value = item
+    }
+    function handleturn() {
+        detailFlag.value = !detailFlag.value
+    }
+    // defineExpose({ detailFlag });
+</script>
+<style scoped lang="scss">
+    .main {
+        width: 99%;
+        text-align: left;
+        color: #5e5b57;
+        .posText {
+            position: absolute;
+            width: 100%;
+            bottom: 30px;
+            left: 50px;
+
+            .textTitle {
+                font-size: 18px;
+                margin-bottom: 15px;
+                color: #fff;
+            }
+
+            .textTitle2 {}
+        }
+        .home-item{
+            display: flex;
+            width: 100%;
+            margin-top: 50px;
+            position: relative;
+            .returnBtn{
+                position: absolute;
+                right: 30px;
+                top: -15px;
+            }
+            .item-image{
+                margin-top: 50px;
+            }
+            .item-content{
+                font-size: 16px;
+                line-height: 30px;
+                .contetn-title{
+                    .titel-text1{
+                        line-height: 50px;
+                        font-size: 26px;
+                        font-weight: bold;
+                    }
+                    .titel-text2{
+                        line-height: 50px;
+                        font-size: 18px;
+                        line-height: 60px;
+                    }
+                }
+                .content-text{
+                    font-size: 18px;
+                    line-height: 80px;
+                    text-indent: 2em;
+                }
+            }
+        }
+    }
+</style>

src/views/home/home-main.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="main" v-if="!detailFlag">
+        <el-row :gutter="50" style="margin-top: 30px;">
+            <el-col :span="8" v-for="(item, index) in mainData" :key="index" style="position: relative; margin-bottom: 15px;">
+                <el-card style="background-color: #000; border: 1px solid #5e5b57;">
+                    <el-image 
+                     style="width: 100%;" 
+                     :src="apiUrl+ Object.values(item.contentFileInfo)[0]" 
+                     fit="fill" />
+                    <div class="posText">
+                        <div class="textInfo">
+                            {{item.name}}
+                        </div>
+                        <div class="textView">
+                            <el-button size="large" type="warning" link @click="handleView(item)">查看更多</el-button>
+                        </div>
+                    </div>
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+    <div class="main" v-if="detailFlag">
+        <div class="main-title" >
+            {{mainDetails.name}}
+            <el-button @click="handleturn" class="returnBtn" type="warning" link>返回首页</el-button>
+        </div>
+        <div class="main-image">
+            <el-row :gutter="50">
+                <el-col :span="4" v-for="(val, key,index) in mainDetails.fileInfo" :key="index">
+                    <el-image style="width: 100%; margin: 15px;" :src="apiUrl+ val"  fit="fill" />
+                </el-col>
+            </el-row>
+        </div>
+        <div class="main-content">
+            <el-row :gutter="50" style="width: 100%;">
+                <el-col :span="16" class="item-content">
+                    <div class="content-text">
+                        {{mainDetails.content}}
+                    </div>
+                </el-col>
+                <el-col :span="8" class="item-image">
+                    <el-image  style="width: 90%; margin:10%;" :src="apiUrl+ Object.values(mainDetails.contentFileInfo)[0]"  fit="fill" />
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script setup name="HomeMain">
+    import { ref, onMounted } from 'vue'
+    import request from '../../utils/request'
+    const apiUrl = ref('http://39.164.159.226:8100/')
+    const detailFlag = ref(false)
+    const mainData = ref([])
+    const mainDetails = ref({})
+    onMounted(()=>{
+        getList()
+    })
+    function getList() {
+        request.get('GwHome/gwhome').then((res)=>{
+            res.data.length>0 ? (mainData.value = res.data) : (mainData.value = [])
+        })
+    }
+    function handleView(item) {
+        handleturn()
+        mainDetails.value = item
+    }
+    function handleturn() {
+        detailFlag.value = !detailFlag.value
+    }
+    // defineExpose({ detailFlag });
+</script>
+
+<style scoped lang="scss">
+    .main{
+        width: 98%;
+        text-align: left;
+        color: #5e5b57;
+        .posText{
+            .textInfo{
+                
+                color: #b7b7b7;
+                height: 110px;
+                text-indent: 2em;
+                line-height: 30px;
+                overflow:hidden;
+                text-overflow:ellipsis;
+                display:-webkit-box;
+                -webkit-box-orient:vertical;
+                -webkit-line-clamp:3;
+            }
+            .textView{
+                text-align: right;
+            }
+            
+        }
+        .main-title{
+            text-align: left;
+            line-height: 60px;
+            font-size: 26px;
+            font-weight: bold;
+            position: relative;
+            .returnBtn{
+                position: absolute;
+                right: 8px;
+                top: 25px;
+            }
+        }
+        .main-image{
+            border-bottom: 2px solid #2c3e50;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+        }
+        .main-time{
+            text-align: center;
+            font-size: 16px;
+            line-height: 30px;
+        }
+        .main-content{
+            width: 100%;
+            display: flex;
+            font-size: 16px;
+            line-height: 30px;
+
+            .item-content{
+                font-size: 16px;
+                line-height: 30px;
+                .content-text{
+                    font-size: 18px;
+                    line-height: 36px;
+                    text-indent: 2em;
+                }
+            }
+        }
+    }
+</style>

src/views/home/home-product.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="product">
+        <div class="product-item">
+                <div class="item-name">
+                    <div class="name-title">{{productData.name}}</div>
+                    <div class="name-image">
+                        <el-row :gutter="50">
+                            <el-col :span="4"  v-for="(val, key,index) in productData.nameFileInfo" :key="index">
+                                <el-image style="width: 100%; margin: 15px;" :src="apiUrl+val" fit="fill" />
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div class="name-content">
+                        {{productData.nameContent}}
+                    </div>
+                </div>
+                <div class="item-model">
+                    <div class="model-title">{{productData.type}}</div>
+                    <div class="model-content">
+                        {{productData.typeContent}}
+                    </div>
+                    <div class="model-image">
+                        <el-row :gutter="50">
+                            <el-col :span="12"  v-for="(val, key,index) in productData.typeFileInfo" :key="index">
+                                <el-image style="width: 100%; margin: 15px;" :src="apiUrl+val" fit="fill" />
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+        </div>
+      
+    </div>
+</template>
+
+<script setup name="HomeMain">
+    // import { ref } from 'vue'
+    import { ref, onMounted,watch,computed } from 'vue' 
+    import { useRoute,onBeforeRouteUpdate } from 'vue-router'
+    import request from '../../utils/request'
+    const route = useRoute()
+    const apiUrl = ref('http://39.164.159.226:8100/')
+    const productData = ref([])
+    const productId = ref('')
+    onBeforeRouteUpdate((res) => {
+        productId.value = res.query.id
+        getList()
+    });
+    onMounted(()=>{
+        console.log(route.query.id+"-----");
+        productId.value = route.query.id
+        getList()
+    })
+    function getList() {
+        request.get('/Product/product/'+productId.value).then((res)=>{
+            if (res.data) {
+                productData.value = res.data
+            }
+        })
+    }
+</script>
+<style scoped lang="scss">
+    .product{
+        color: #5e5b57;
+        .product-item{
+            text-align: left;
+            .item-name{
+                .name-title{
+                    
+                    margin-left: 15px;
+                    line-height: 50px;
+                    font-size: 26px;
+                    font-weight: bold;
+                    color: #9f9a93;
+                }
+                .name-image{}
+                .name-content{
+                    border-top: 2px solid #2c3e50;
+                    font-size: 16px;
+                    margin-top: 15px;
+                    padding-top: 15px;
+                    line-height: 30px;
+                    text-indent: 2em;
+                }
+            }
+            .item-model{
+                margin-top: 15px;
+                .model-title{
+                    line-height: 50px;
+                    font-size: 26px;
+                    font-weight: bold;
+                }
+                .model-content{
+                    font-size: 16px;
+                    line-height: 30px;
+                }
+                .model-image{}
+            }
+        }
+        
+    }
+</style>