上服务器看效果

server.js

@@ -7,34 +7,6 @@ import { createServer as createViteServer } from 'vite'
 import ssrManifest from './dist/client/.vite/ssr-manifest.json' assert { type: "json" }
 import *  as PRODserver from './dist/server/entry-server.js'
 const isProd = process.env.NODE_ENV  === 'production'
-// if(isProd){
-    // import ssrManifest from './dist/client/.vite/ssr-manifest.json' assert { type: "json" }
-    // import *  as PRODserver from './dist/server/entry-server.js'
-    // const manifest =  ssrManifest
-// }
-
-// function importBasedOnCondition(condition) {
-//     console.log(condition)
-//     if (condition) {
-//         const PRODserver = async(moduleName) =>{
-//             const A = await  import  `./dist/server/${moduleName}`
-//             return A
-//         }
-//         const ssrManifest = async(moduleName) =>{
-//             const B = await  import  `./dist/client/.vite/${ssr-manifest}` assert { type: "json" }
-//             return B
-//         }
-//         return { PRODserver("entry-server.js"), ssrManifest("ssr-manifest.json")}
-//     //   return { import ssrManifest from './dist/client/.vite/ssr-manifest.json' assert { type: "json" }, import *  as PRODserver from './dist/server/entry-server.js'}
-//     }
-//   }
-   
-  // 使用函数
-//   importBasedOnCondition(isProd); // 根据条件动态导入moduleA
-
-
-
-// const isProd = true
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 async function createServer() {
     const app = express()
@@ -43,7 +15,7 @@ async function createServer() {
     // 并让上级服务器接管控制
     const vite = await createViteServer({
         server: { middlewareMode: 'ssr' },
-        // appType: 'custom'
+        appType: 'custom'
     })
     if(!isProd){
         // 使用 vite 的 Connect 实例作为中间件
@@ -56,14 +28,16 @@ async function createServer() {
     }else{
         app.use(serverStatic(path.resolve(__dirname,'dist/client')))
     }
-    app.use('*', async(req, res, next) => {
+    // 参考https://cn.vitejs.dev/guide/ssr.html
+    app.use('*', async(req, res) => {
+        
         const url = req.originalUrl
         let template
         let render
         let html
         try {
             if(!isProd){
-                console.log("ssr:dev")
+                console.log("开启开发服务端渲染（路径=>源码）")
                  // 1. 读取 index.html
                 template = fs.readFileSync(
                     path.resolve(__dirname, 'index.html'),
@@ -86,7 +60,7 @@ async function createServer() {
                 // const runtime = await vite.createViteRuntime(server)
                 // const { render } = await runtime.executeEntrypoint('/src/entry-server.ts')
             }else{
-                console.log("ssr:prod")
+                console.log("开启生产服务端渲染（路径=>dist）")
                 template = fs.readFileSync(
                     path.resolve(__dirname, 'dist/client/index.html'),
                     'utf-8',
@@ -98,10 +72,15 @@ async function createServer() {
             //    例如 ReactDOMServer.renderToString()
             if(!isProd){
                 const { appHtml, state } = await render(url)
+                let a = state.pageContent
+                if(state.pageContent.length>0){
+                    a= state.pageContent[0]
+                }
                 // 5. 注入渲染后的应用程序 HTML 到模板中。
                 html = template
                 .replace(`<!--ssr-outlet-->`, appHtml)
                 .replace('\'<!--vuex-state-->\'', JSON.stringify(state))
+               
             }else{
                 const manifest =  ssrManifest
                 const { appHtml, state,preloadLinks } = await render(url,manifest)
@@ -116,6 +95,7 @@ async function createServer() {
             // 如果捕获到了一个错误，让 Vite 来修复该堆栈，这样它就可以映射回
             // 你的实际源码中。
             vite.ssrFixStacktrace(e)
+            console.log(e)
             next(e)
         }
     })
@@ -123,5 +103,4 @@ async function createServer() {
         console.log("node server.js",isProd ? `运行 生产环境` : `运行 开发环境`)
     })
 }
-
 createServer()

src/App.vue

@@ -2,25 +2,26 @@
 import headerCommon  from '@/components/layout/header.vue'
 import footerCommon  from '@/components/layout/footer.vue'
 import feedFix from '@/components/layout/feedFix.vue'
-// import dialogCom from '@/components/layout/dialogCom.vue'
-// globalThis.scrollTo({
-//     top: globalThis.innerHeight,
-//     behavior: "smooth"
-// })
+import dialogPersonal from '@/components/layout/dialogPersonal.vue'
+import { useStore  } from 'vuex'
+const store = useStore()
+function setDialogPersonalStatus(){
+  store.commit("setDialogPersonalStatus",false)
+}
 </script>
-<template >
-  <headerCommon />
-  <router-view  />
-  <feedFix />
-  <footerCommon />
-</template>
 <style >
 @import "@/assets/styles/common/bootstrap.min.css";
 @import "@/assets/styles/common/element.css";
+@import "@/assets/styles/common/home.css";
 @import "@/assets/styles/common/meanmenu.min.css";
-@import "@/assets/styles/common/default.css";
-@import "@/assets/styles/common/animation.css";
-@import "@/assets/styles/common/animate.min.css";
 @import "@/assets/styles/common/style.css";
-@import "@/assets/styles/common/home.css";
+@import "@/assets/styles/common/animate.min.css";
+@import "@/assets/styles/common/default.css";
 </style>
+<template >
+  <headerCommon />
+  <router-view  />
+  <feedFix />
+  <footerCommon />
+  <dialogPersonal  :data="store.state.dialogPersonalStatus" @setDialogPersonalStatus="setDialogPersonalStatus" />
+</template>

src/api/index.ts

@@ -1,30 +1,27 @@
 import request from '@/utils/request.ts'
-// import indexedDb from '../utils/indexedDb'
-// let airbnbDB = new indexedDb('airbnb')
-// //mock接口
-// export async function fetchElephant() {
-//     await airbnbDB.openStore("elephant", "id", ['nose', 'ear'])
-//     let result: any = await airbnbDB.getList("elephant")
-//     return result.target.result
-// }
-
+var api = "http://172.16.120.165:13200/prod-api/"
+// var api = "https://gateWay.usky.cn/prod-api/"
 
 //获取菜单列表
-export function getMenu(params:any) {
+export function getMenu() {
     return request({
-        // url: 'https://gateWay.usky.cn/prod-api/service-website/siteCategory/siteCategoryList',
-        url: 'http://172.16.120.165:13200/prod-api/service-website/siteCategory/siteCategoryList',
-        method: 'get',
-        data: params,
+        url: `${api}service-website/siteCategory/siteCategoryList`,
+        method: 'get'
     })
 }
-
 //获取页面内容
 export function getPageContent(params:any) {
     return request({
-        // url: 'http://gateway.usky.cn/prod-api/service-website/siteArticle/siteArticleList',
-        url: 'http://172.16.120.165:13200/prod-api/service-website/siteArticle/siteArticleList',
+        url: `${api}service-website/siteArticle/siteArticleList`,
         method: 'get',
         data: params,
     })
-}
+}
+export function siteReview(data:any) {
+    return request({
+        url: `${api}service-website/siteReview`,
+        method: 'post',
+        data
+    })
+}
+

src/assets/js/common.js

@@ -1,58 +0,0 @@
-import { ref } from "vue";
-import { useStore  } from 'vuex'
-import { useRoute } from "vue-router"
-const store = useStore()
-const route = useRoute()
-console.log(111,useStore())
-//返回顶部
-function scrollToTop(data,type) {
-  console.log(3434)
-  globalThis.scrollTo({
-      top: data,
-      behavior: type
-  })
-}
-
-function getPageData(){
-    // const route = useRoute()
-    // const data = ref([])
-    // data.value = store.state.menuList
-    //   console.log(data.value)
-      // const data = store.state.menuList
-      // const paramsData = {}//页面主题内容请求参数
-      // let str 
-      // if(route.path.indexOf("_")){
-      //     str = route.path.split("_")[0]
-      // }
-      // for(let i=0;i<data.length;i++){
-      //     if(route.path == data[i].path || str == data[i].path){
-      //         //模板 主页
-      //         if(!data[i].sname && !route.query?.categoryid){
-      //             paramsData = {
-      //                 params:{
-      //                     categoryid: data[i].id,
-      //                     pageNum:1,
-      //                     pageSize:100,
-      //                     order:"sortindex",
-      //                 },
-      //                 index:route.path,
-      //                 sub:i
-      //             }
-      //             if(data[i].path == "/cases"){
-      //                 paramsData.params.categoryid = data[i].children[0].id
-      //             }
-      //         }
-      //     }
-      // }
-      // if(route.path.indexOf("_") < 0){
-      //   store.dispatch('getPageData',paramsData)
-      // }
- 
-}
-
-
-
-export {
-  scrollToTop,
-  getPageData
-}

src/assets/styles/common/headerCommon.scss

@@ -1,883 +0,0 @@
-.header-absolute {
-    z-index: 2;
-    /* background-color: #fff; */
-}
-
-header {
-    /*===== Header transparent =====*/
-    /*===== Header to area =====*/
-    /*===== Main Menu =====*/
-    /*===== Mobile Menu =====*/
-    /*===== Header two =====*/
-    /*===== Header three =====*/
-    /*===== Sticky Header =====*/
-    /* off canvas menu */
-}
-
-header.header-absolute {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 99;
-}
-
-header .header-top-area {
-    padding: 0px 0;
-    background: rgba(0, 0, 0, 0.1)
-}
-
-@media (max-width: 575px) {
-    header .header-top-area {
-        display: none;
-    }
-}
-
-header .header-top-area .contact-list li,
-header .header-top-area .social-link li {
-    display: inline-block;
-    font-weight: 700;
-    font-size: 16px;
-    /* text-transform: uppercase; */
-    margin-right: 25px;
-    /* font-family: "Oswald", sans-serif; */
-}
-
-header .header-top-area .contact-list li:last-child,
-header .header-top-area .social-link li:last-child {
-    margin-right: 0;
-}
-
-header .header-top-area .contact-list li,
-header .header-top-area .contact-list li a,
-header .header-top-area .social-link li,
-header .header-top-area .social-link li a {
-    color: #fff;
-}
-
-header .header-top-area .contact-list li a:hover,
-header .header-top-area .social-link li a:hover {
-    color: #409eff;
-}
-
-header .header-top-area .social-link {
-    text-align: right;
-}
-
-header .header-top-area .social-link li {
-    margin-right: 0;
-    margin-left: 25px;
-}
-
-header .header-top-area .social-link li:first-child {
-    margin-left: 0;
-}
-
-header .mainmenu-area {
-    /* border: 1px solid red; */
-    /* background-color: #fff; */
-    position: relative;
-    padding: 0px 50px;
-    margin-top: 30px
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header .mainmenu-area {
-        padding: 0 40px;
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header .mainmenu-area {
-        padding: 0 30px;
-    }
-}
-
-header .mainmenu-area .main-menu {
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-    -ms-flex-align: center !important;
-    align-items: center !important;
-}
-
-.mainmenu-area .logo {
-    position: absolute;
-    left: 10%;
-}
-
-.mainmenu-area .logo img {
-    max-width: 125px;
-}
-
-@media (max-width: 1700px) {
-    .mainmenu-area .logo {
-        position: absolute;
-        left: 100px;
-    }
-}
-
-@media (max-width: 1440px) {
-    .mainmenu-area .logo {
-        position: absolute;
-        left: 60px;
-    }
-}
-
-@media (max-width: 399px) {
-    header .mainmenu-area .main-menu .logo img {
-        max-width: 120px;
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items {
-    /* margin-left: 60px; */
-}
-
-header .mainmenu-area {
-    height: 77px;
-}
-
-@media (max-width: 992px) {
-    header .mainmenu-area .main-menu .menu-items {
-        display: none !important
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items ul:nth-child(1) {
-    display: flex;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li {
-    display: inline-block;
-    margin: 0px 40px 0 0;
-    position: static;
-    cursor: pointer;
-    border-bottom: 4px solid rgba(0, 0, 0, 0)
-}
-
-header.header-two .mainmenu-area .main-menu {
-    grid-column-gap: 90px;
-}
-
-header .mainmenu-area .apply-expre {
-    margin: 0 0px 0 70px;
-    color: #409EFF;
-    border: 1px solid #409EFF;
-    border-radius: 17px;
-    padding: 1px 20px;
-    font-size: 18px;
-    cursor: pointer
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1599px) {
-    header .mainmenu-area .main-menu .menu-items ul li {
-        margin-right: 15px;
-    }
-
-    header .mainmenu-area .apply-expre {
-        margin-left: 30px
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header .mainmenu-area .main-menu .menu-items ul li {
-        margin-right: 0;
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items ul li:last-child {
-    margin-right: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li a {
-    /* line-height: 74px; */
-    padding: 10px 10px 8px;
-    color: #fff;
-    font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;
-    /* font-weight: 500; */
-    text-transform: uppercase;
-    font-size: 18px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-    header .mainmenu-area .main-menu .menu-items ul li .submenu {
-        left: -34px;
-    }
-
-    .mainmenu-area .logo {
-        left: 5%
-    }
-}
-
-header .mainmenu-area .main-menu .menu-items>ul>li:hover,
-header .mainmenu-area .main-menu .menu-items>ul>li.active {
-    border-bottom: 4px solid #409eff
-}
-
-header .mainmenu-area .main-menu .menu-items ul li:hover .submenu {
-    opacity: 1;
-    visibility: visible
-}
-
-
-/* header .mainmenu-area .main-menu .menu-items ul li:hover a , header .mainmenu-area .main-menu .menu-items ul li.active>a{
-    color: #409eff;
-} */
-
-
-/* 
-
-{
-    color: #409eff;
-    font-size: 18px;
-    font-weight: bold;
-} */
-
-
-/* header .mainmenu-area .main-menu .menu-items ul li.active>a:before {
-    content: '';
-    width: 30px;
-    height: 2px;
-    display: inline-block;
-    background-color: #409eff;
-    position: absolute;
-    bottom: 18px;
-    left: 50%;
-    margin-left: -15px;
-} */
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu {
-    position: absolute;
-    left: 0;
-    text-align: center;
-    top: 120%;
-    width: 100%;
-    /* margin-left:10%; */
-    /* background-color: #fff; */
-    opacity: 0;
-    visibility: hidden;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    z-index: 99;
-    /* box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
-    -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1);
-    -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); */
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li {
-    position: relative;
-    display: inline-block;
-    margin: 0;
-    text-align: center;
-    /* width:12%; */
-    margin: 0 10px
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li a {
-    display: block;
-    padding: 0 15px;
-    margin: 20px 0;
-    position: relative;
-    color: #fff;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-    border-radius: 0;
-    line-height: 40px;
-    font-size: 16px
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover {
-    /* background-color: #409eff; */
-    color: #fff;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover>a {
-    color: #fff;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li .submenu {
-    position: absolute;
-    left: 100%;
-    top: 30%;
-    width: 200px;
-    /* background-color: #fff; */
-    visibility: hidden;
-    opacity: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover .submenu {
-    opacity: 1;
-    visibility: visible;
-    top: 0;
-}
-
-header .mainmenu-area .main-menu .menu-items ul li:hover .submenu {
-    /* visibility: visible; */
-    opacity: 1;
-    top: 100%;
-}
-
-header .mainmenu-area .main-right {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: right;
-    -ms-flex-pack: right;
-    justify-content: right;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-@media (max-width: 575px) {
-    header .mainmenu-area .main-right {
-        display: none;
-    }
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger {
-    margin-left: 20px;
-    height: 60px;
-    width: 60px;
-    line-height: 60px;
-    background-color: #409eff;
-    border: 2px solid #409eff;
-    color: #fff;
-    text-align: center;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-
-@media (max-width: 767px) {
-    header .mainmenu-area .main-right .offcanvas-trigger {
-        display: none;
-    }
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger:hover {
-    background-color: #041d38;
-    border-color: #041d38;
-}
-
-header .mainmenu-area .main-right .offcanvas-trigger i {
-    font-size: 30px;
-    position: relative;
-    top: 5px;
-}
-
-header .mobile-menu.mean-container .mean-bar {
-    background-color: transparent;
-    padding: 0;
-    min-height: 0;
-}
-
-header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    margin-right: 15px;
-    margin-top: -62px;
-    border: 2px solid rgba(255, 255, 255, 0.8);
-    padding: 10px 10px;
-    width: 26px;
-    z-index: 222;
-}
-
-@media (max-width: 399px) {
-    header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-        padding: 12px 10px;
-    }
-}
-
-@media (max-width: 991px) {
-    .mainmenu-area .logo {
-        left: 12px
-    }
-}
-
-@media (max-width: 575px) {
-    header .mainmenu-area {
-        background: #000;
-        margin-top: 0;
-        padding: 45px;
-    }
-
-    header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-        margin-top: -68px
-    }
-
-    .mainmenu-area .logo img {
-        width: 95px
-    }
-}
-
-header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal span {
-    background-color: rgba(255, 255, 255, 0.8);
-}
-
-header .mobile-menu.mean-container .mean-nav {
-    margin-top: 0;
-    background-color: #041d38;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 99;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li:last-child {
-    border: none;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a {
-    border: none;
-    padding: 0;
-    padding: 15px 18px;
-    font-size: 14px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li:first-child {
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li a {
-    padding: 15px 40px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li li {
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-header .mobile-menu.mean-container .mean-nav ul li li li a {
-    padding: 15px 60px;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
-    border: none !important;
-    width: 50px;
-    height: 53px;
-    padding: 0 !important;
-    line-height: 53px;
-    margin-top: 0;
-}
-
-header .mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
-    background: transparent;
-}
-
-header.header-two .header-top-area {
-    padding: 15px 0;
-    background-color: #041d38;
-}
-
-header.header-two .mainmenu-area {
-    border-bottom: 1px solid #f1f1f1;
-    padding: 0;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header.header-two .mainmenu-area {
-        padding: 0;
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-two .mainmenu-area {
-        padding: 0;
-    }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.header-two .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-@media (max-width: 767px) {
-    header.header-two .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-@media (max-width: 575px) {
-    header.header-two .mainmenu-area {
-        margin-top: 0;
-    }
-
-    header .mainmenu-area .apply-expre {
-        display: none
-    }
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header.header-two .mainmenu-area .main-menu {
-        grid-column-gap: 60px;
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-two .mainmenu-area .main-menu {
-        grid-column-gap: 30px;
-    }
-}
-
-header.header-two .mainmenu-area .main-right {
-    text-align: right;
-}
-
-header.header-two .mainmenu-area .main-right .offcanvas-trigger {
-    margin-left: 50px;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon {
-    text-align: left;
-    padding-left: 80px;
-    position: relative;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon .icon {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon span {
-    font-weight: 700;
-    font-size: 14px;
-    color: #041d38;
-    font-family: "Oswald", sans-serif;
-    line-height: 24px;
-    text-transform: uppercase;
-}
-
-header.header-two .mainmenu-area .main-right .quote-icon span span {
-    display: block;
-    font-size: 20px;
-    color: #409eff;
-}
-
-@media (max-width: 767px) {
-    header.header-two .mainmenu-area .main-right .quote-icon span span {
-        font-size: 18px;
-    }
-}
-
-header.header-three .mainmenu-area {
-    background-color: transparent;
-    padding: 15px 0;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-@media (max-width: 767px) {
-    header.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-header.header-three .mainmenu-area .main-menu {
-    grid-column-gap: 75px;
-}
-
-@media only screen and (min-width: 1200px) and (max-width: 1599px) {
-    header.header-three .mainmenu-area .main-menu {
-        grid-column-gap: 40px;
-    }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-three .mainmenu-area .main-menu {
-        grid-column-gap: 30px;
-    }
-}
-
-header.header-three .mainmenu-area .main-menu .logo img.sticky-logo {
-    display: none;
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li {
-    margin-right: 30px;
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1200px) {
-    header.header-three .mainmenu-area .main-menu .menu-items ul li {
-        margin-right: 0;
-    }
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li a {
-    color: #fff;
-    line-height: 90px;
-}
-
-header.header-three .mainmenu-area .main-menu .menu-items ul li.active>a {
-    color: #409eff;
-}
-
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover {
-    background-color: #fff;
-}
-
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::after,
-header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::before {
-    background-color: #041d38;
-}
-
-header.header-three .mainmenu-area .main-right .offcanvas-trigger {
-    background-color: #fff;
-    border-color: #fff;
-    color: #041d38;
-}
-
-header.header-three .mainmenu-area .main-right .offcanvas-trigger:hover {
-    background-color: #409eff;
-    border-color: #409eff;
-}
-
-header.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    border-color: #fff;
-    background-color: #fff;
-}
-
-header.header-three.sticky .mainmenu-area .main-menu .logo img.sticky-logo {
-    display: block;
-}
-
-header.header-three.sticky .mainmenu-area .main-menu .logo img.normal-logo {
-    display: none;
-}
-
-header.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: rgba(43, 47, 66, .9);
-    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
-    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
-    z-index: 99;
-    -webkit-animation: sticky 1.2s;
-    animation: sticky 1.2s;
-}
-
-header.sticky .mainmenu-area {
-    margin-top: 0;
-}
-
-header.sticky .mainmenu-area .main-menu .menu-items>ul>li:hover .submenu {
-    background: rgba(43, 47, 66, .5);
-}
-
-header.sticky .mainmenu-area .main-menu .menu-items>ul>li:hover .submenu>li a {
-    color: #000;
-    color: #fff
-        /* background:#fff */
-}
-
-header.sticky .mainmenu-area .main-menu .menu-items ul li a {
-    /* line-height: 90px; */
-}
-
-header.sticky .header-top-area {
-    display: none;
-}
-
-header.sticky.header-three .mainmenu-area {
-    padding: 0;
-}
-
-header.sticky .mainmenu-area .logo img {
-    width: 100px
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-    header.sticky.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-@media (max-width: 767px) {
-    header.sticky.header-three .mainmenu-area {
-        padding: 15px 95px 15px 0;
-    }
-}
-
-header.sticky.header-three .mainmenu-area .main-menu .menu-items ul li a {
-    color: #1d2088;
-}
-
-header.sticky.header-three .mainmenu-area .offcanvas-trigger {
-    background-color: #1d2088;
-    border-color: #1d2088;
-    color: #1d2088;
-}
-
-header.sticky.header-three .mainmenu-area .offcanvas-trigger:hover {
-    background: transparent;
-    border-color: rgba(4, 29, 56, 0.1);
-}
-
-header.sticky.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal {
-    border-color: rgba(4, 29, 56, 0.1);
-    background-color: transparent;
-}
-
-header .off-canvas-wrap {
-    position: fixed;
-    width: 450px;
-    top: 0;
-    min-height: 100vh;
-    right: 0;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-    z-index: 9999999;
-    margin-right: -450px;
-    -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
-    box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08);
-    text-align: left;
-}
-
-header .off-canvas-wrap.show-off-canvas {
-    margin-right: 0;
-}
-
-header .off-canvas-wrap .overly {
-    position: fixed;
-    height: 100vh;
-    width: 100%;
-    z-index: 998;
-    background-color: #000;
-    left: 0;
-    top: 0;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-    opacity: 0;
-    visibility: hidden;
-    cursor: pointer;
-}
-
-header .off-canvas-wrap .overly.show-overly {
-    visibility: visible;
-    opacity: 0.6;
-}
-
-header .off-canvas-wrap .off-canvas-widget {
-    padding: 90px 50px;
-    background-color: #fff;
-    height: 100vh;
-    /* height: 860px; */
-    position: relative;
-    z-index: 999;
-}
-
-header .off-canvas-wrap .off-canvas-widget a.off-canvas-close {
-    position: absolute;
-    right: 50px;
-    top: 40px;
-    font-size: 30px;
-    color: #041d38;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget {
-    margin-bottom: 50px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget:last-child {
-    margin-bottom: 0;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget .widget-title {
-    font-size: 20px;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-rows: auto;
-    grid-template-rows: auto;
-    -ms-grid-columns: 120px 1fr;
-    grid-template-columns: 120px 1fr;
-    margin-bottom: 30px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li:last-child {
-    margin-bottom: 0;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-img {
-    background-size: cover;
-    background-position: center;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content {
-    padding-left: 20px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content h6 {
-    margin-bottom: 15px;
-    font-size: 18px;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    line-height: 1.3;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time {
-    font-size: 15px;
-    font-weight: 500;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time i {
-    margin-right: 10px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li {
-    font-size: 18px;
-    color: #041d38;
-    font-weight: 600;
-    margin-bottom: 10px;
-    padding-left: 25px;
-    position: relative;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li i {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-    font-size: 15px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li a {
-    color: #041d38;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a {
-    height: 40px;
-    width: 40px;
-    line-height: 40px;
-    border: 1px solid #041d38;
-    color: #041d38;
-    border-radius: 50%;
-    text-align: center;
-    font-size: 15px;
-    margin-right: 10px;
-}
-
-header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a:hover {
-    background-color: #409eff;
-    color: #fff;
-    border-color: #409eff;
-}

src/assets/styles/common/meanmenu.min.css

@@ -6,7 +6,6 @@
 	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
 
 ####################################################################### */
-
 a.meanmenu-reveal {
     display: none
 }

src/assets/styles/common/style.css

@@ -6505,7 +6505,8 @@
                 font-size: 16px;
                 font-weight: bold;
                 margin-top: 26px;
-                color: #333
+                color: #333;
+                width:100%;
             }
             
             .newItemOne .oneInnerBox .img {
@@ -6817,4 +6818,51 @@
             }
             .common-bradcrumb-section{
                 
-            }
+            }
+
+
+            /* 移动端导航样式 start */
+            .el-menu-item-group__title{
+                display:none
+            }
+            .mobileIcon{
+                display:none;
+            }
+            
+            .mobileMenuBox{
+                top: 0px;
+                left:0;
+                overflow:scroll;
+                position: absolute;
+                width: 100vw;
+                z-index: 2;
+                opacity:none;
+                transition: .5s;
+                /* display: none; */
+
+            }
+            .mobileMenuBox ul{
+                position: relative;
+            }
+            .mobileMenuBox.active{
+                /* height:calc(100vh - 80px); */
+                transition: 1s;
+            }
+            .el-sub-menu__title a,.el-menu-item a{
+                color:#fff
+            }
+            @media(max-width:575px) {
+                .mobileMenuBox{
+                    /* top: 85px */
+    
+                }
+            }
+            @media(max-width:992px) {
+                .mobileIcon{
+                    display:block
+                }
+                .mobileMenuBox{
+                    opacity:1
+                }
+            }
+            /* 移动端导航样式 end */

src/assets/styles/home/index.scss

@@ -1,8 +0,0 @@
-button {
-    color: $red;
-}
-
-.text {
-    @include line-text-overflow;
-    width: 50px;
-}

src/assets/styles/variable.scss

@@ -1,7 +0,0 @@
-$red:red;
-
-@mixin line-text-overflow {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}

src/components/layout/banner.vue

@@ -1,33 +1,23 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useStore  } from 'vuex'
 import poster from '@/assets/img/banner/poster.jpg'
 const store = useStore()
-const modelType = ref(1)
-const columnImage  = ref("")
+const modelType = ref(1)//图片或视频类型
+const columnImage  = ref("")//图片或视频地址
 const posterImg = ref(poster)//视频封面图
-console.log(222,store.state)
-watch(
-    () => store.state.currentPagePath || store.state.sub || !store.state.currentPagePath && !store.state.sub || store.state.recomMendation,
-    () => {
-        console.log(3333333,store.state)
-        modelType.value = store.state.menuList[store.state.sub]?.modelType //图片或视频类型
-        columnImage.value =store.state.menuList[store.state.sub]?.imagePath//图片或视频地址
-        console.log(modelType.value)
-    },
-    { deep:true }
-);
+modelType.value = store.state.menuList[store.state.sub]?.modelType
+columnImage.value =store.state.menuList[store.state.sub]?.imagePath
 </script>
 <template>
-        <div v-if="modelType==1" style="width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat; "
-        :style="{backgroundImage:`url(${columnImage})`}">
-        </div>
+    <div v-if="modelType==1" style="width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat; "
+    :style="{backgroundImage:`url(${columnImage})`}">
+    </div>
 
-        <video v-if="modelType ==2" webkit-playsinline="webkit-playsinline" playsinline  id="videoPlay" autoplay loop muted preload="auto" :poster="posterImg"
-            style="width:100%;height:100%;object-fit:fill;" :src="columnImage">
-            <source type="video/mp4">
-        </video>
-    
+    <video v-if="modelType ==2" webkit-playsinline="webkit-playsinline" playsinline  id="videoPlay" autoplay loop muted preload="auto" :poster="posterImg"
+        style="width:100%;height:100%;object-fit:fill;" :src="columnImage">
+        <source type="video/mp4">
+    </video>
 </template>
 <style lang="scss">
 .common-bradcrumb-section{

src/components/layout/dialogPersonal.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { useStore  } from 'vuex'
+import { ElMessage } from 'element-plus'
+import { siteReview } from '@/api/index'
+const { proxy } = getCurrentInstance();
+const store = useStore()
+const platName = ref("智慧安防")//选取类型值
+let consultationType:any = ref([])//咨询类型
+store.state.menuList.map((item:any)=>{
+    if(item.path == "/cases"){
+        platName.value = item.children[0].categoryName
+        return consultationType.value = item.children
+    }
+})
+//表单数据
+let ruleform:any =ref({
+    platName: platName.value,
+    consultName: '',
+    consultPhone: '',
+    mail: '',
+    company: '',
+    consultContent: "",
+})
+// 规则
+let rules:any = ref({
+    platName: [{
+        required: true,
+        message: '请选择类型',
+        trigger: 'change'
+    }, ],
+    consultName: [{
+        required: true,
+        message: '请输入姓名',
+        trigger: 'blur'
+    }, ],
+    consultPhone: [{
+        required: true,
+        message: '请输入正确的电话号码',
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        trigger: 'change'
+    }],
+    mail: [{
+        required: false,
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: 'blur'
+    }],
+})
+function ruleformNull(){
+    ruleform.value = {
+        platName: platName.value,
+        consultName: '',
+        consultPhone: '',
+        mail: '',
+        company: '',
+        consultContent: "",
+    }
+    platName.value = consultationType.value[0]
+}
+function handle(type:string,e:any){
+    if(type == "close"){
+        store.commit("setDialogPersonalStatus",false)
+        ruleformNull()
+    }
+    if(type == "submit"){
+        platName.value = consultationType.value[0]
+        proxy.$refs["form"].validate((valid:any) => {
+            if (valid) {
+                siteReview(ruleform.value).then((res:any)=>{
+                    if(res?.status == "SUCCESS"){
+                        ElMessage({
+                            message: '提交成功',
+                            type: 'success'
+                        })
+                        handle("close",null)
+                        ruleformNull()
+                    }else{
+                        ElMessage.error(res.msg)
+                    }
+                })
+            }
+        })
+    }
+}
+</script>
+<template>
+    <el-dialog title="项目咨询"   @close="handle('close')" v-model="store.state.dialogPersonalStatus" width="700px" center class="feedBackDialog" :lock-scroll="false">
+        <el-form :model="ruleform" :rules="rules" ref="form" label-width="80px" class="demo-ruleform">
+            <el-form-item label="" prop="ruleform.platName" style="" class="dialogTypeLabel">
+                <el-radio-group v-model="platName">
+                    <el-radio-button :label="item.categoryName" :value="item.categoryName" v-for="(item,index) in consultationType" :key="index"></el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="姓名" prop="consultName">
+                        <el-input v-model="ruleform.consultName"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系电话" prop="consultPhone">
+                        <el-input v-model="ruleform.consultPhone"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="邮箱" prop="mail">
+                        <el-input v-model="ruleform.mail"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="公司" prop="company">
+                        <el-input v-model="ruleform.company"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item label="需求描述" prop="consultContent">
+                <el-input type="textarea" v-model="ruleform.consultContent"></el-input>
+            </el-form-item>
+        </el-form>
+        <!-- <span>需要注意的是内容是默认不居中的</span> -->
+        <span slot="footer" class="dialog-footer" style="width:100%;text-align:center">
+            <el-button @click="handle('close')">取 消</el-button>
+            <el-button type="primary" @click="handle('submit')">提 交</el-button>
+        </span>
+    </el-dialog>
+</template>
+<style lang="scss" scoped>
+</style>

src/components/layout/feedFix.vue

@@ -1,31 +1,24 @@
 <script setup lang="ts">
-import { watch } from 'vue'
 // console.log(process.env.NODE_ENV)
 // // （客户端）监听返回顶部状态
 // if(process.env.NODE_ENV == "development"){
-//     globalThis.addEventListener('scroll', function() {
-//         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-//         var element:any = document.getElementById("scroll-up")
-//         if(scrollTop > 770){
-//             element.style.opacity = 1
-//         }else{
-//             element.style.opacity = 0
-//         }
-//     });
+    // globalThis.addEventListener('scroll', function() {
+    //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    //     var element:any = document.getElementById("scroll-up")
+    //     if(scrollTop > 770){
+    //         element.style.opacity = 1
+    //     }else{
+    //         element.style.opacity = 0
+    //     }
+    // });
 // }
 //返回顶部
 function scrollToTop() {
-    // globalThis.scrollTo({
-    //     top: 0,
-    //     behavior: "smooth"
-    // })
+    globalThis.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    })
 }
-
-// watch(()=>store.state.scrollUp.scrollTo,
-//     ()=>{
-        
-//     }
-// )
 </script>
 <template>
 <div class="feedBackBox">

src/components/layout/header.vue

@@ -5,6 +5,7 @@ import { useRoute } from "vue-router"
 const store = useStore()
 const route = useRoute()
 const currentPagePath = ref(route.path)//当前页面路径
+const mobilelistboolean = ref(false)
 if(route.path.indexOf("_")){
     currentPagePath.value = route.path.split("_")[0]
 }
@@ -12,19 +13,19 @@ const pathTemplateQuery = ref()//页面模版复用参数
 if(route.query && route.query.dup){
     pathTemplateQuery.value = route.query.dup
 }
-//获取菜单列表
-store.dispatch('getMenuList').then(()=>{
-    let data = store.state.menuList
-    for(let i=0;i<data.length;i++){
-        if(!data[i].sname && data[i].path == route.path){
-            console.log(data[i])
-            // document.getElementsByName('keywords')[0].content = data[i].metakeywords
-            // document.getElementsByName('description')[0].content = data[i].metadescription
-            // document.getElementsByTagName("title")[0].innerHTML = data[i].categoryName
-        }
-    }
- 
-})
+
+function mobileIconClick(){
+    mobilelistboolean.value = !mobilelistboolean.value
+}
+function handleOpen(){
+
+}
+function handleClose(){
+
+}
+function dialogPersona(){
+    store.commit("setDialogPersonalStatus",true)
+}
 </script>
 <template>
         <header class="header-absolute sticky-header">
@@ -44,7 +45,7 @@ store.dispatch('getMenuList').then(()=>{
                                             ">{{item.categoryName}}</a>
                                             <ul class="submenu">
                                                 <li v-if="item.children" v-for="children in item.children" :key="children.id">
-                                                    <a  :href="item.sname ?   `${item.path}?dup=${item.sname}&categoryid=${children.id}&isUrlId=1` : `${item.path}?categoryid=${children.id}&isUrlId=1` "> 
+                                                    <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${children.id}&isUrlId=1` : `${item.path}?categoryid=${children.id}&isUrlId=1` "> 
                                                         <span style="font-weight:bold;margin-right:10px">·</span>
                                                         {{children.categoryName}}
                                                     </a>
@@ -54,12 +55,52 @@ store.dispatch('getMenuList').then(()=>{
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" v-if="store.state.menuList.length>0" @click="gogo()">申请体验</div>
+                        <div class="apply-expre" v-if="store.state.menuList.length>0" @click="dialogPersona()">申请体验</div>
                     </div>
                 </div>
-                <div>
-                    <div class="mobile-menu"></div>
+                <!-- <div class="mobile-menu mean-container mobileIcon">
+                    <div class="mean-bar">
+                        <a href="#nav"  @click="mobileIconClick" class="meanmenu-reveal"
+                            style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;">
+                            <span></span><span></span><span></span>
+                        </a>
+                    </div>
                 </div>
+                <el-row class="tac mobileMenuBox"  :class="[mobilelistboolean?'active':'']" v-if="mobilelistboolean">
+                    <el-col :span="24">
+                        <el-menu active-text-color="#ffd04b" background-color="#0c1923" class="el-menu-vertical-demo"
+                            default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
+                            <template v-for="item in store.state.menuList" :key="item.id">
+                                <el-sub-menu :index="item.id" v-if="item.children.length>0">
+                                    <template #title>
+                                        <location />
+                                        <span> 
+                                            <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${item.id}&isUrlId=1` : `${item.path}?categoryid=${item.id}&isUrlId=1` "> 
+                                                {{item.categoryName}}
+                                            </a>
+                                        </span>
+                                    </template>
+                                    <el-menu-item-group title=""  v-for="aa in item.children" :key="aa.id">
+                                        <el-menu-item :index="item.id+'-'+aa.id">
+                                            <a  :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${aa.id}&isUrlId=1` : `${item.path}?categoryid=${aa.id}&isUrlId=1` "> 
+                                                <span style="font-weight:bold;margin-right:10px">·</span>{{aa.categoryName}}
+                                            </a>
+                                        </el-menu-item>
+                                    </el-menu-item-group>
+                                </el-sub-menu>
+
+                                <el-menu-item v-else :index="item.index" >
+                                    <icon-menu />
+                                    <span>
+                                        <a style="color:#fff" :href="item.sname ? `${item.path}?dup=${item.sname}&categoryid=${item.id}&isUrlId=1` : `${item.path}?categoryid=${item.id}&isUrlId=1` "> 
+                                            {{item.categoryName}}
+                                        </a>
+                                    </span>
+                                </el-menu-item>
+                            </template>
+                        </el-menu>
+                    </el-col>
+                </el-row> -->
             </div>
         </header>
 </template>

src/entry-client.ts

@@ -12,12 +12,10 @@ if(window.__INITIAL_STATE__){
 router.isReady().then(() => {
     //比较to、from不同时执行数据预取
     router.beforeResolve((to,from,next)=>{
-        console.log("跳转")
-
-        let toComponent = router.resolve(to).matched.flatMap(record=>Object.values(record.components))
-        let fromComponent = router.resolve(from).matched.flatMap(record=>Object.values(record.components))
-        let actived = toComponent.filter((c,i)=>{
-            return fromComponent[i] !==c
+        let toComponents = router.resolve(to).matched.flatMap(record=>Object.values(record.components))
+        let fromComponents = router.resolve(from).matched.flatMap(record=>Object.values(record.components))
+        let actived = toComponents.filter((c,i)=>{
+            return fromComponents[i] !==c
         })
         if(!actived.length){
             return next()
@@ -38,7 +36,6 @@ router.isReady().then(() => {
     const matchedComponents = router.currentRoute.value.matched.flatMap(record =>Object.values(record.components))
     //对所有匹配的路由组件调用`asyncData()
     Promise.all(matchedComponents.map((Component:any) =>{
-        console.log("刷新")
         if(Component.asyncData){
             return Component.asyncData({
                 store,

src/main.ts

@@ -1,10 +1,11 @@
 import { createSSRApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import { store } from './store'
 import { createSSRRouter } from './router'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
-import { store } from './store'
 import lazyPlugin from 'vue3-lazy'
 // import { scrollToTop } from './assets/js/common.js'
 // import { sync } from 'vuex-router-sync'
@@ -17,6 +18,9 @@ export function createApp() {
     // sync(store,router)
     app.use(router)
     app.use(store)
+    // for(const [key,component] of Object.entries(ElementPlusIconsVue)){
+    //     app.component(key,component)
+    // }
     app.use(ElementPlus)
     app.use(lazyPlugin, {
         loading: 'loading.gif',

src/store/index.ts

@@ -1,11 +1,5 @@
 import { createStore } from 'vuex'
 import { getMenu, getPageContent } from '@/api/index'
-// import { InjectionKey } from 'vue'
-
-// export interface AllStateTypes {
-//     count:number,
-// }
-// export const key :IN
 export const store = createStore({
     state:{
         menuList:[],//菜单列表
@@ -14,52 +8,20 @@ export const store = createStore({
         currentPagePath:'',//当前页名称
         acitveId:0,//客户案例类型切换活动id
         sub:0,//当前页下标
+        columnTypes:[],//页面下属类型
         scrollUp:{ //返回顶部
             opacity:0,
             visibility:"hidden",
             scrollTo:0
         },
+        route:{},//跳转数据
         //分页数据
         pagination:{
             total:0,
             size:10,
             count:1
         },
-        // 公共弹框
-        centerDialogVisible: false,
-        dialogDataArray: [],
-        ruleForm: {
-        platName: '智慧安防',
-        consultName: '',
-        consultPhone: '',
-        mail: '',
-        company: '',
-        consultContent: "",
-        },
-        rules: {
-        platName: [{
-            required: true,
-            message: '请选择类型',
-            trigger: 'change'
-        }, ],
-        consultName: [{
-            required: true,
-            message: '请输入姓名',
-            trigger: 'blur'
-        }, ],
-        consultPhone: [{
-            required: true,
-            message: '请输入正确的电话号码',
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            trigger: 'change'
-        }],
-        mail: [{
-            required: false,
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: 'blur'
-        }],
-        },
+        dialogPersonalStatus:false//弹框状态
     },
     mutations:{
         //菜单列表
@@ -82,18 +44,31 @@ export const store = createStore({
         //子页面活动状态
         setAcitveId(state:any,data:object){
             state.acitveId = data
-            return  state.acitveId
+            return state.acitveId
         },
         //推荐内容
         setRecomMendation(state:any,data:object){
             state.recomMendation = data
-            return  state.recomMendation
+            return state.recomMendation
+        },
+        //设置弹框状态
+        setDialogPersonalStatus(state:any,data:string){
+            state.dialogPersonalStatus = data
+            return state.dialogPersonalStatus
+        },
+        //设置页面下属类型
+        setColumnTypes(state:any,data:string){
+            state.columnTypes = data
+            return state.columnTypes
+        },
+        //设置跳转路由参数
+        setRoute(state:any,data:string){
+            state.route = data
+            return state.route
         },
-
         
     },
     actions:{
-
         getMenuList({ commit } :any){
             return new Promise(resolve=>{
                 getMenu().then((res:any)=>{
@@ -135,7 +110,12 @@ export const store = createStore({
                     commit('setCurrentPagePathOrSub',{index:data.index,sub:data.sub})
                 }
                 //cases页类型活动id
-                if(data.params?.categoryid && (data.index == "/cases"  || data.index == "/services") || data.index == "/news"){
+                if(
+                    data.params?.categoryid && (data.index == "/cases"  || 
+                    data.index == "/services") || data.index == "/news" || 
+                    data.index == "/news_Read" && data.params.acitve ||
+                    data.index == "/services_Read" && data.params.acitve
+                    ){
                     commit('setAcitveId',data.params.categoryid)
                 }
                 getPageContent(data.params).then((res:any)=>{

src/views/about/index.vue

@@ -1,141 +1,103 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue'
 import { useStore  } from 'vuex'
-import { useRouter, useRoute } from "vue-router";
 import banner from '@/components/layout/banner.vue'
-import pagination from '@/components/layout/pagination.vue'
-
-    const store = useStore()
-    const router = useRouter()
-    const route = useRoute()
-    const columnTypes = ref([]) //类型
-    const requestParams = ref({})//active类型
-    const articalArray = ref([])
-    setTimeout(()=>{
-        columnTypes.value = store.state.menuList[store.state.sub].children
-    },500)
-    const paramsData = ref({})
-    let oldCategoryId= ref()
-    //类型切换
-    function facilityClick(item:Object){
-        //防抖
-        if(item.id != oldCategoryId.value){
-            requestParams.value = item
-            paramsData.value = {
-                params:{
-                    categoryid: item.id,
-                    pageNum:1,
-                    pageSize:10,
-                    order:"sortindex",
-                },
-                index:store.state.currentPagePath,
-                sub:store.state.sub
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        const requestParams = ref({})//active类型
+        let paramsData = reactive({})
+        let oldCategoryId= ref()
+        //类型切换
+        function facilityClick(item:any){
+            //防抖
+            if(item.id != oldCategoryId.value){
+                requestParams.value = item
+                paramsData = {
+                    params:{
+                        categoryid: item.id,
+                        pageNum:1,
+                        pageSize:10,
+                        order:"sortindex",
+                    },
+                    index:store.state.currentPagePath,
+                    sub:store.state.sub
+                }
+                oldCategoryId.value = item.id
+                store.dispatch('getPageData',paramsData).then(()=>{
+                    store.commit("setColumnTypes",store.state.pageContent)
+                })
             }
-            oldCategoryId.value = item.id
-            store.dispatch('getPageData',paramsData.value).then(()=>{
-                articalArray.value = store.state.pageContent
-            })
         }
-    }
-    //详情页
-    function details(item:Object){
-        router.push(
-            { 
-                path: `services_Read` , 
-                query: { 
-                    categoryid: item.categoryid,
-                    id:item.id,
-                    isUrlId:1
-                } 
+        return { store, facilityClick }
+    },
+    components:{
+        banner
+    },
+    asyncData({ store, route } :any){
+        let params = reactive(route.value) //路由参数
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = store.state.menuList
+            let paramsData:any = reactive({})//页面主题内容请求参数
+            for(let i=0;i<data.length;i++){
+                if(!data[i].sname && params.path == data[i].path){
+                    paramsData = {
+                        params:{
+                            categoryid: data[i].id,
+                            pageNum:1,
+                            pageSize:100,
+                            order:"sortindex",
+                        },
+                        index:params.path,
+                        sub:i
+                    }
+                    return store.dispatch('getPageData',paramsData).then(()=>{
+                        store.commit("setColumnTypes",store.state.pageContent)
+                    })
+                }
             }
-        )
-
-    }
-    //数据初始化
-    function init(){
-      const data = store.state.menuList
-      const paramsData = ref({})//页面主题内容请求参数
-      for(let i=0;i<data.length;i++){
-              //模板 主页
-              if(!data[i].sname && route.path == data[i].path){
-                  paramsData.value = {
-                      params:{
-                          categoryid: data[i].id,
-                          pageNum:1,
-                          pageSize:100,
-                          order:"sortindex",
-                      },
-                      index:route.path,
-                      sub:i
-                  }
-                  if(!route.query?.categoryid){
-                    paramsData.value.params.categoryid = data[i].id
-                  }else{
-                    paramsData.value.params.categoryid = route.query.categoryid
-                  }
-                  store.dispatch('getPageData',paramsData.value).then(()=>{
-                    articalArray.value = store.state.pageContent
-                  })
-              }
-      }
-    }
-    //分页
-    function handleCurrentChange(val:number){
-        paramsData.value.params.pageNum = val
-        store.dispatch('getPageData',paramsData.value).then(()=>{
-            articalArray.value = store.state.pageContent
-            // globalThis.scrollTo({
-            //     top: 0,
-            //     behavior: "smooth"
-            // })
         })
     }
-    onMounted(() => {
-        setTimeout(()=>{
-            init()
-        },300)
-    });
+}) 
 </script>
 <template>
     <div class="pageContain">
         <div class="common-bradcrumb-section">
             <banner />
         </div>
-        <section class="about-introduce-section course-section pt-40 pb-60 about-sec"
-                    v-for="(arr,index) in articalArray" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
-                    <div :id="arr.id" class="pointOffset">0</div>
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-md-2 col-sm-12 text-center">
-                                <ul class="aboutTyes" v-if="index==0">
-                                    <li v-for="item in articalArray" :key="item.id"><a
-                                            :href="`#${item.id}`">{{item.title}}</a></li>
-                                </ul>
+        <section class="about-introduce-section course-section pt-40 pb-60 about-sec" v-for="(arr,index) in store.state.columnTypes" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
+            <div :id="arr.id" class="pointOffset">0</div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-2 col-sm-12 text-center">
+                        <ul class="aboutTyes" v-if="index==0">
+                            <li v-for="(item,i) in store.state.columnTypes" :key="i"><a :href="`#${item.id}`">{{item.title}}</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-md-10 col-sm-12">
+                        <div class="section-title text-center both-border pb-20">
+                            <span class="title-tag">{{arr.title}}</span>
+                        </div>
+                        <!-- 图文混排 -->
+                        <div class="row aboutOnlyText text-left" v-if="arr.image" 
+                            :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
+                            style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%)">
+                            <div class="col-md-7  pr-40 aboutImg ">
+                                <img v-lazy="arr.image" alt="" >
                             </div>
-                            <div class="col-md-10 col-sm-12">
-                                <div class="section-title text-center both-border pb-20">
-                                    <span class="title-tag">{{arr.title}}</span>
-                                </div>
-                                <!-- 图文混排 -->
-                                <div class="row aboutOnlyText text-left" v-if="arr.image" 
-                                    :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
-                                    style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%)">
-                                    <div class="col-md-7  pr-40 aboutImg ">
-                                        <img :src="arr.image" alt="" >
-                                    </div>
-                                    <div class="col-md-5  " v-html="arr.content">
-                                    </div>
-                                </div>
-                                <!-- 只有富文本 -->
-                                <div class="aboutOnlyText row text-left" v-else :style="{padding:(index % 2 == 1?'40px':'0 ')}"
-                                    style="background-color: #ffff;">
-                                    <div class=" about-text-image" v-html="arr.content">
-                                    </div>
-                                </div>
+                            <div class="col-md-5  " v-html="arr.content">
                             </div>
                         </div>
+                        <!-- 只有富文本 -->
+                        <div class="aboutOnlyText row text-left" v-else :style="{padding:(index % 2 == 1?'40px':'0 ')}"
+                            style="background-color: #ffff;">
+                            <div class=" about-text-image" v-html="arr.content"></div>
+                        </div>
                     </div>
-                </section>
+                </div>
+            </div>
+        </section>
     </div>
 </template>
 <style lang="scss" scoped>

src/views/cases/index.vue

@@ -1,84 +1,95 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter, useRoute } from "vue-router";
 import banner from '@/components/layout/banner.vue'
-const store = useStore()
-const router = useRouter()
-const route = useRoute()
-const columnTypes = ref([]) //类型
-const requestParams = ref({})//active类型
-const paramsData = ref({})
-let oldCategoryId = ref()
-//类型切换
-function facilityClick(item: Object) {
-    //防抖
-    if (item.id != oldCategoryId.value) {
-        requestParams.value = item
-        paramsData.value = {
-            params: {
-                categoryid: item.id,
-                pageNum: 1,
-                pageSize: 100,
-                order: "sortindex",
-            },
-            index: store.state.currentPagePath,
-            sub: store.state.sub
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        const router = useRouter()
+        const route = useRoute()
+        const requestParams = ref({})//active类型
+        let paramsData = reactive({})
+        let oldCategoryId = ref()
+        //类型切换
+        function facilityClick(item: any) {
+            //防抖
+            if (item.id != oldCategoryId.value) {
+                requestParams.value = item
+                paramsData = {
+                    params: {
+                        categoryid: item.id,
+                        pageNum: 1,
+                        pageSize: 100,
+                        order: "sortindex",
+                    },
+                    index: store.state.currentPagePath,
+                    sub: store.state.sub
+                }
+                oldCategoryId.value = item.id
+                store.dispatch('getPageData', paramsData)
+            }
         }
-        oldCategoryId.value = item.id
-        store.dispatch('getPageData', paramsData.value)
-    }
-}
-//详情页
-function details(item: Object) {
-    router.push(
-        {
-            path: `cases_Read`,
-            query: {
-                categoryid: item.categoryid,
-                id: item.id,
-                isUrlId: 1
+        //详情页
+        function details(item: any) {
+            let params = {
+                path: `/cases_Read`,
+                query: {
+                    categoryid: item.categoryid,
+                    id: item.id,
+                    isUrlId: 1
+                }
             }
+            store.commit("setRoute",params)
+            router.push(params)
+            // globalThis.scrollTo(0, 0)
         }
-    )
-    // globalThis.scrollTo(0, 0)
-}
-//数据初始化
-function init() {
-    const data = store.state.menuList
-    const paramsData = ref({})//页面主题内容请求参数
-    for (let i = 0; i < data.length; i++) {
-        if (!data[i].sname && route.path == data[i].path) {
-            paramsData.value = {
-                params: {
-                    categoryid: data[i].id,
-                    pageNum: 1,
-                    pageSize: 100,
-                    order: "sortindex",
+        return { store,  facilityClick, details }
+    },
+    components:{
+        banner
+    },
+    asyncData({ store, route } :any){
+        let params = reactive(route.value) //路由参数
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            //主页数据初始化
+            const data = reactive(store.state.menuList)
+            let paramsData:any = reactive({
+                params:{
+                    categoryid: 0,
+                    pageNum:1,
+                    pageSize:100,
+                    order:"sortindex",
                 },
-                index: route.path,
-                sub: i
+                index:"",
+                sub:0
+            })//页面主题内容请求参数
+            for (let i = 0; i < data.length; i++) {
+                if (!data[i].sname && params.path == data[i].path) {
+                    paramsData = {
+                        params: {
+                            categoryid: data[i].id,
+                            pageNum: 1,
+                            pageSize: 100,
+                            order: "sortindex",
+                        },
+                        index: params.path,
+                        sub: i
+                    }
+                    if (!params.query?.categoryid) {
+                        paramsData.params.categoryid = data[i].children[0].id
+                    } else {
+                        paramsData.params.categoryid = params.query.categoryid
+                    }
+                    return store.dispatch('getPageData', paramsData).then(()=>{
+                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
+                    })
+                }
             }
-            if (!route.query?.categoryid) {
-                paramsData.value.params.categoryid = data[i].children[0].id
-            } else {
-                paramsData.value.params.categoryid = route.query.categoryid
-            }
-            store.dispatch('getPageData', paramsData.value)
-        }
+        })
     }
-}
-watch(() => store.state.menuList.length > 0,
-    () => {
-        init()
-    }
-)
-watch(
-    () => store.state.currentPagePath || store.state.sub || !store.state.currentPagePath && !store.state.sub,
-    () => {
-        columnTypes.value = store.state.menuList[store.state.sub].children
-    }
-);
+})
 </script>
 <template>
     <div class="pageContain">
@@ -87,19 +98,19 @@ watch(
         </section>
         <section style="background:#F4F8FD" class="solutionType">
             <div class="container pc" style="text-align:center">
-                <div class="solutionTypeOne" v-for="(item, i) in columnTypes"
+                <div class="solutionTypeOne" v-for="(item, index) in store.state.columnTypes"
                     :class="item.id == store.state.acitveId ? 'active' : ''" @mouseover="facilityClick(item)"
-                    :style="{ 'width': (1 / columnTypes.length * 100) + '%' }">
+                    :style="{ 'width': (1 / store.state.columnTypes.length * 100) + '%' }" :key="index">
                     <div style="width:40px;height:40px;;overflow:hidden;margin:0 auto">
-                        <img class="img" v-lazy="item.imagePath" alt="">
+                        <img class="img" :src="item.imagePath" alt="">
                     </div>
                     <p>{{ item.categoryName }}</p>
                 </div>
             </div>
             <div class="container mobile" style="text-align:center">
-                <div class=" solutionTypeOne" v-for="(item, i) in columnTypes"
+                <div class="solutionTypeOne" v-for="(item, index) in store.state.columnTypes"
                     :class="item.id == store.state.acitveId ? 'active' : ''" v-on:mouseover="facilityClick(item)"
-                    :style="{ 'width': (1.5 / columnTypes.length * 100) + '%' }">
+                    :style="{ 'width': (1.5 / store.state.columnTypes.length * 100) + '%' }" :key="index">
                     <div style="width:40px;height:40px;;overflow:hidden;margin:0 auto">
                         <img class="img" v-lazy="item.imagePath" alt="">
                     </div>
@@ -111,8 +122,8 @@ watch(
             <div v-for="(item, index) in store.state.pageContent" :key="item.id"
                 :style="{ background: (index % 2 == 1 ? '#F4F8FD' : '#fff') }" style="padding:40px 0">
                 <div class="container">
-                    <a :href="`cases_Read?categoryid=${item.categoryid}&id=${item.id}&=isUrlId=1`" style="color:#000">
-                        <div class="solutionItem">
+                    <!-- <a :href="`cases_Read?categoryid=${item.categoryid}&id=${item.id}&=isUrlId=1`" style="color:#000"> -->
+                        <div class="solutionItem" @click="details(item)">
                             <div class="solutionTitle text-left">
                                 {{ item.title }}
                             </div>
@@ -126,7 +137,7 @@ watch(
                                 </div>
                             </div>
                         </div>
-                    </a>
+                    <!-- </a> -->
                 </div>
             </div>
         </section>

src/views/cases/read.vue

@@ -1,92 +1,99 @@
-<script setup lang="ts">
-    import { ref, watch } from 'vue'
+<script lang="ts">
+    import { ref, reactive, defineComponent } from 'vue'
     import { useStore  } from 'vuex'
     import { useRoute } from "vue-router"
     import banner from '@/components/layout/banner.vue'
     import recomMendation from '@/components/layout/recomMendation.vue'
-    const store = useStore()
-    const route = useRoute()
-    const recomMendationList:any = ref([]) //推荐内容
-    //推荐内容过滤
-    function recomMendationFilter(data:any){
-        let array = []
-        for(let i =0;i<data.length;i++){
-            if(data[i].id != route.query?.id){
-                array.push(data[i])
-            }
-        }
-        return array
-    }
-    //页面内容初始化
-    function init(){
-        const data = ref(store.state.menuList)
-        let str =ref("")
-        let sub = ref()
-        const paramsData = ref({})
-        if(route.path.indexOf("_")){
-            str.value = route.path.split("_")[0]
-        }
-        for(let i=0;i<data.value.length;i++){
-            if(route.path == data.value[i].path || str.value == data.value[i].path){
-                if(route.query?.categoryid  && !data.value[i].sname){
-                    sub.value = i
+    export default defineComponent({
+        setup(){
+            const store = useStore()
+            const route = useRoute()
+            const recomMendationList:any = ref(recomMendationFilter(store.state.recomMendation)) //推荐内容
+            //推荐内容过滤
+            function recomMendationFilter(data:any){
+                let array = []
+                for(let i =0;i<data.length;i++){
+                    if(data[i].id != route.query?.id){
+                        array.push(data[i])
+                    }
                 }
+                return array
             }
-        }
-        if(route.query?.categoryid  && !route.query.dup){
-            paramsData.value = {
-                params:{
-                    categoryid: route.query?.categoryid,
-                    pageNum:1,
-                    pageSize:1,
-                    order:"sortindex",
-                    articleid: route.query?.id,
-                    id: route.query?.id,
-                    details:true
-                },
-                index:route.path,
-                sub:sub.value
+            return { store, recomMendationList }
+        },
+        components:{
+            banner,
+            recomMendation
+        },
+        asyncData({ store, route } :any){
+            //获取菜单列表
+            let params:any = reactive({}) //路由参数
+            if(route.value.query?.categoryid){
+                params = route.value
+            }else{
+                params = store.state.route
             }
+            return store.dispatch('getMenuList').then(()=>{
+                const data = reactive(store.state.menuList)
+                let str = ref("")
+                let sub = ref()
+                let paramsData = reactive({})
+                if(params.path.indexOf("_")>-1){
+                    str.value = params.path.split("_")[0]
+                }
+                for(let i=0;i<data.length;i++){
+                    if(params.path == data[i].path || str.value == data[i].path){
+                        if(params.query?.categoryid  && !data[i].sname){
+                            sub.value = i
+                        }
+                    }
+                }
+                if(params.query?.categoryid  && !params.query.dup){
+                    paramsData = {
+                        params:{
+                            categoryid: params.query.categoryid,
+                            pageNum:1,
+                            pageSize:1,
+                            order:"sortindex",
+                            articleid: params.query.id,
+                            id: params.query.id,
+                            details:true
+                        },
+                        index:params.path,
+                        sub:sub.value
+                    }
+                    return store.dispatch('getPageData',paramsData)
+                }
+                
+            })
         }
-        store.dispatch('getPageData',paramsData.value)
-    }
-    watch(() => store.state.menuList || route.path,
-        () => {
-            init()
-        }
-    )
-    watch(
-        () => store.state.recomMendation,
-        () => {
-            recomMendationList.value = recomMendationFilter(store.state.recomMendation)
-        },
-        { deep:true  }
-    );
-    </script>
-    <template>
-            <div class="pageContain">
-                <section class="common-bradcrumb-section" >
-                    <banner />
-                </section>
-                <section class="product-content-section pt-60">
-                    <div class="container" v-if="store.state.pageContent.length>0">
-                        <div class="row">
-                            <div class="col-lg-12 col-md-12 content">
-                                <div  class="read_content mb-60">
-                                    <div class="section-title text-center both-border mb-60 d-flex justify-content-between">
-                                        <span class="title-tag2 text-left" >{{store.state.pageContent[0].title}}</span>
-                                        <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
-                                    </div>
-                                    <div class="row">
-                                        <div class=" col-lg-12 col-md-12  " >
-                                            <div  v-html="store.state.pageContent[0].content" class="text-left"></div>
-                                        </div>
-                                    </div>
+
+    })
+</script>
+<template>
+    <div class="pageContain">
+        <section class="common-bradcrumb-section" >
+            <banner />
+        </section>
+        <section class="product-content-section pt-60">
+            <div class="container" v-if="store.state.pageContent.length>0">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12 content">
+                        <div  class="read_content mb-60">
+                            <div class="section-title text-center both-border mb-60 d-flex justify-content-between">
+                                <span class="title-tag2 text-left" >{{store.state.pageContent[0].title}}</span>
+                                <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
+                            </div>
+                            <div class="row">
+                                <div class=" col-lg-12 col-md-12  " >
+                                    <div  v-html="store.state.pageContent[0].content" class="text-left"></div>
                                 </div>
-                                <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
                             </div>
                         </div>
+                        <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0" />
                     </div>
-                </section>
+                </div>
             </div>
+        </section>
+    </div>
 </template>

src/views/index/index.vue

@@ -1,61 +1,61 @@
 
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+<script lang="ts">
+import { defineComponent, reactive} from 'vue'
 import { useStore  } from 'vuex'
-import { useRoute } from "vue-router";
 import banner from '@/components/layout/banner.vue'
-const store = useStore()
-const route = useRoute()
-// 首页箭头下拉
-function go_down(){
-    // globalThis.scrollTo({
-    //     top: globalThis.innerHeight,
-    //     behavior: "smooth"
-    // })
-}
- //数据初始化
- function init(){
-    const data = store.state.menuList
-    const paramsData = ref({
-    params:{
-        categoryid: 0,
-        pageNum:1,
-        pageSize:100,
-        order:"sortindex",
-    },
-    index:"",
-    sub:0
-    })//页面主题内容请求参数
-    for(let i=0;i<data.length;i++){
-    //主页
-    if(!data[i].sname && route.path == data[i].path || !data[i].sname && data[i].path =="/index"){
-        paramsData.value = {
-            params:{
-                categoryid: data[i].id,
-                pageNum:1,
-                pageSize:100,
-                order:"sortindex",
-            },
-            index:route.path,
-            sub:i
-        }
-        if(route.path == "/index" || route.path == "/"){
-        paramsData.value.params.categoryid = data[i].id
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        // 首页箭头下拉
+        function go_down(){
+            globalThis.scrollTo({
+                top: globalThis.innerHeight,
+                behavior: "smooth"
+            })
         }
-        store.dispatch('getPageData',paramsData.value)
-    }
-    }
-}
-watch(()=>store.state.menuList.length>0,
-    ()=>{
-    init()
+        return { store, go_down }
+    },
+    components:{
+        banner
+    },
+    asyncData({ store, route } :any){
+        let params = reactive(route.value) //路由参数
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = reactive(store.state.menuList)
+            let paramsData:any = reactive({
+                params:{
+                    categoryid: 0,
+                    pageNum:1,
+                    pageSize:100,
+                    order:"sortindex",
+                },
+                index:"",
+                sub:0
+            })//页面主题内容请求参数
+            for(let i=0;i<data.length;i++){
+                //主页内容
+                if(!data[i].sname && route.value.path == data[i].path || !data[i].sname && data[i].path =="/index"){
+                    paramsData = {
+                        params:{
+                            categoryid: data[i].id,
+                            pageNum:1,
+                            pageSize:100,
+                            order:"sortindex",
+                        },
+                        index:params.path,
+                        sub:i
+                    }
+                    if(params.path == "/index" || params.path == "/"){
+                        paramsData.params.categoryid = data[i].id
+                    }
+                    return store.dispatch('getPageData',paramsData)
+                }
+            }
+        })
     }
-)
-onMounted(()=>{
-    setTimeout(()=>{
-        init()
-    },1000)
 })
+
 </script>
 <template>
     <div class="pageContain">
@@ -98,7 +98,7 @@ onMounted(()=>{
                         :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
                         style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); align-items:center">
                         <div class="col-md-6  pr-40 aboutImg text-center ">
-                            <img v-lazy="arr.image + 1111" alt="">
+                            <img v-lazy="arr.image" alt="">
                         </div>
                         <div class="col-md-6" v-html="arr.content">
                         </div>

src/views/news/index.vue

@@ -1,103 +1,106 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue'
 import { useStore  } from 'vuex'
 import { useRouter, useRoute } from "vue-router";
 import banner from '@/components/layout/banner.vue'
 import pagination from '@/components/layout/pagination.vue'
-
-    const store = useStore()
-    const router = useRouter()
-    const route = useRoute()
-    const columnTypes = ref([]) //类型
-    const requestParams = ref({})//active类型
-    const articalArray = ref([])
-    const paramsData = ref({})
-    let oldCategoryId= ref()
-    //类型切换
-    function facilityClick(item:any){
-        //防抖
-        if(item.id != oldCategoryId.value){
-            requestParams.value = item
-            paramsData.value = {
-                params:{
-                    categoryid: item.id,
-                    pageNum:1,
-                    pageSize:10,
-                    order:"sortindex",
-                },
-                index:store.state.currentPagePath,
-                sub:store.state.sub
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        const router = useRouter()
+        const route = useRoute()
+        let requestParams = reactive({})//active类型
+        let paramsData = reactive({
+            params:{
+                categoryid: 0,
+                pageNum:1,
+                pageSize:10,
+                order:"sortindex",
+                acitve:true
+            },
+            index:"",
+            sub:0
+        })
+        let oldCategoryId= ref(store.state.columnTypes[0].id)
+        //类型切换
+        function facilityClick(item:any){
+            //防抖
+            if(item.id != oldCategoryId.value){
+                requestParams = item
+                paramsData = {
+                    params:{
+                        categoryid: item.id,
+                        pageNum:1,
+                        pageSize:10,
+                        order:"sortindex",
+                        acitve:true,
+                    },
+                    index:store.state.currentPagePath,
+                    sub:store.state.sub
+                }
+                oldCategoryId.value = item.id
+                store.dispatch('getPageData',paramsData)
             }
-            oldCategoryId.value = item.id
-            store.dispatch('getPageData',paramsData.value).then(()=>{
-                articalArray.value = store.state.pageContent
-            })
         }
-    }
-    //详情页
-    function details(item:any){
-        router.push(
-            { 
-                path: `news_Read` , 
-                query: { 
+        //详情页
+        function details(item:any){
+            let params = {
+                path: `/news_Read`,
+                query: {
                     categoryid: item.categoryid,
-                    id:item.id,
-                    isUrlId:1
-                } 
+                    id: item.id,
+                    isUrlId: 1
+                }
             }
-        )
-
-    }
-    //数据初始化
-    function init(){
-      const data = store.state.menuList
-      const paramsData = ref({})//页面主题内容请求参数
-      for(let i=0;i<data.length;i++){
-        if(!data[i].sname && route.path == data[i].path){
-            console.log(111,data[i])
-            paramsData.value = {
-                params:{
-                    categoryid: data[i].id,
-                    pageNum:1,
-                    pageSize:100,
-                //   order:"sortindex",
-                },
-                index:route.path,
-                sub:i
+            store.commit("setRoute",params)
+            router.push(params)
+        }
+        //分页
+        function handleCurrentChange(val:number){
+            paramsData.params.pageNum = val
+            store.dispatch('getPageData',paramsData)
+        }
+        return { store, facilityClick, handleCurrentChange, details }
+    },
+    components:{
+        banner,
+        pagination
+    },
+    asyncData({ store,route } :any){
+        let params = reactive(route.value) //路由参数
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = reactive(store.state.menuList)
+            let paramsData:any = reactive({})//页面主题内容请求参数
+            let str = ref("")
+            if(params.path.indexOf("_")>-1){
+                str.value = params.path.split("_")[0]
             }
-            if(!route.query?.categoryid){
-            paramsData.value.params.categoryid = data[i].children[0].id
-            }else{
-            paramsData.value.params.categoryid = route.query.categoryid
+            for(let i=0;i<data.length;i++){
+                if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
+                    paramsData = {
+                        params:{
+                            categoryid: data[i].id,
+                            pageNum:1,
+                            pageSize:100,
+                        //   order:"sortindex",
+                        },
+                        index:params.path,
+                        sub:i
+                    }
+                    if(!params.query?.categoryid){
+                        paramsData.params.categoryid = data[i].children[0].id
+                    }else{
+                        paramsData.params.categoryid = params.query.categoryid
+                    }
+                    return store.dispatch('getPageData',paramsData).then(()=>{
+                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
+                    })
+                }
             }
-            store.dispatch('getPageData',paramsData.value).then(()=>{
-            articalArray.value = store.state.pageContent
-            })
-        }
-      }
-    }
-    //分页
-    function handleCurrentChange(val:number){
-        paramsData.value.params.pageNum = val
-        store.dispatch('getPageData',paramsData.value).then(()=>{
-            articalArray.value = store.state.pageContent
-            // globalThis.scrollTo({
-            //     top: 0,
-            //     behavior: "smooth"
-            // })
         })
     }
-    watch(() => store.state.menuList.length > 0,
-        () => {
-            init()
-        }
-    )
-    watch(
-        () => store.state.currentPagePath || store.state.sub || !store.state.currentPagePath && !store.state.sub,
-        () => {
-            columnTypes.value = store.state.menuList[store.state.sub].children
-        }
-    );
+})
 </script>
 <template>
     <div class="pageContain">
@@ -107,8 +110,8 @@ import pagination from '@/components/layout/pagination.vue'
         <section style=" background:#F7F7F7">
             <div class="container">
                 <div class="row newTypeBox">
-                    <div class="col-lg-6 col-md-6"  v-for="(item,i) in columnTypes">
-                        <div class="titleOne" :class="item.id == (store.state.acitveId ? store.state.acitveId : columnTypes[0].id) ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
+                    <div class="col-lg-6 col-md-6"  v-for="(item,index) in store.state.columnTypes" :key="index">
+                        <div class="titleOne" :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
                     </div>
                 </div>
             </div>
@@ -120,15 +123,13 @@ import pagination from '@/components/layout/pagination.vue'
                             <ul>
                                 <!-- 新闻列表主题start -->
                                 <div class="row">
-                                    <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in articalArray" :key="index" >
-                                        <div class="oneInnerBox">
-                                            <a :href="`news_Read?categoryid=${item.categoryid}&id=${item.id}&=isUrlId=1`" style="color:#000">
-                                                <div class="img" style="overflow:hidden">
-                                                        <el-image  :src="item.image" alt="" :data-src="item.image" fit="contain"  style="display:block"  />   
-                                                </div>
-                                                <a class="line-two">{{item.title}}</a>
-                                                <span>{{ item.createdate }}</span>
-                                            </a>
+                                    <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in store.state.pageContent" :key="index" >
+                                        <div class="oneInnerBox" @click="details(item)">
+                                            <div class="img" style="overflow:hidden">
+                                                    <el-image  :src="item.image" alt="" :data-src="item.image" fit="contain"  style="display:block"  />   
+                                            </div>
+                                            <a class="line-two">{{item.title}}</a>
+                                            <span>{{ item.createdate }}</span>
                                         </div>
                                     </div>
                                 </div>

src/views/news/read.vue

@@ -1,96 +1,101 @@
-<script setup lang="ts">
-    import { ref, watch } from 'vue'
+<script lang="ts">
+    import { ref, reactive, defineComponent } from 'vue'
     import { useStore  } from 'vuex'
     import { useRoute } from "vue-router"
     import banner from '@/components/layout/banner.vue'
     import recomMendation from '@/components/layout/recomMendation.vue'
-    const store = useStore()
-    const route = useRoute()
-    const recomMendationList:any = ref([]) //推荐内容
-    //推荐内容过滤
-    function recomMendationFilter(data:any){
-        let array = []
-        for(let i =0;i<data.length;i++){
-            if(data[i].id != route.query?.id){
-                array.push(data[i])
+    export default defineComponent({
+    setup(){
+        const store = useStore()
+        const route = useRoute()
+        const recomMendationList:any = reactive(recomMendationFilter(store.state.recomMendation)) //推荐内容
+        //推荐内容过滤
+        function recomMendationFilter(data:any){
+            let array = []
+            for(let i =0;i<data.length;i++){
+                if(data[i].id != route.query?.id){
+                    array.push(data[i])
+                }
             }
+            return array
         }
-        return array
-    }
-    //页面内容初始化
-    function init(){
-        const data = ref(store.state.menuList)
-        let str =ref("")
-        let sub = ref()
-        const paramsData = ref({})
-        if(route.path.indexOf("_")){
-            str.value = route.path.split("_")[0]
+        return { store, recomMendationList }
+    },
+    components:{
+        banner,
+        recomMendation
+    },
+    asyncData({ store,route }:any){
+        //获取菜单列表
+        let params:any = reactive({}) //路由参数
+        if(route.value.query?.id){
+            params = route.value
+        }else{
+            params = store.state.route
         }
-        for(let i=0;i<data.value.length;i++){
-            if(route.path == data.value[i].path || str.value == data.value[i].path){
-                if(route.query?.categoryid  && !data.value[i].sname){
-                    sub.value = i
-                }
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = reactive(store.state.menuList)
+            let str = ref("")
+            let sub = ref()
+            let paramsData = reactive({})
+            if(params.path.indexOf("_")){
+                str.value = params.path.split("_")[0]
             }
-        }
-        if(route.query?.categoryid  && !route.query.dup){
-            paramsData.value = {
-                params:{
-                    categoryid: route.query?.categoryid,
-                    pageNum:1,
-                    pageSize:1,
-                    order:"sortindex",
-                    articleid: route.query?.id,
-                    id: route.query?.id,
-                    details:true
-                },
-                index:route.path,
-                sub:sub.value
+            for(let i=0;i<data.length;i++){
+                if(params.path == data[i].path || str.value == data[i].path){
+                    if(params.query?.categoryid  && !data[i].sname){
+                        sub.value = i
+                        if(params.query?.id  && !params.query.dup){
+                            paramsData = {
+                                params:{
+                                    categoryid: params.query?.categoryid,
+                                    pageNum:1,
+                                    pageSize:1,
+                                    order:"sortindex",
+                                    articleid: params.query?.id,
+                                    id: params.query?.id,
+                                    details:true
+                                },
+                                index:params.path,
+                                sub:sub.value
+                            }
+                            return store.dispatch('getPageData',paramsData)
+                        }
+                    }
+                }
             }
-        }
-        store.dispatch('getPageData',paramsData.value)
+           
+        })
     }
-    watch(() => store.state.menuList || route.path,
-        () => {
-            init()
-        }
-    )
-    watch(
-        () => store.state.recomMendation,
-        () => {
-            recomMendationList.value = recomMendationFilter(store.state.recomMendation)
-        },
-        { deep:true  }
-    );
-    </script>
-    <template>
-            <div class="pageContain">
-                <section class="common-bradcrumb-section" >
-                    <banner />
-                </section>
-                <section class="product-content-section pt-60">
-                    <div class="container" v-if="store.state.pageContent.length>0">
-                        <div class="row">
-                            <div class="col-lg-12 col-md-12 content">
-                                <div  class="read_content mb-60">
-                                    <div class="section-title text-left both-border mb-60 d-flex justify-content-between">
-                                        <div >
-                                            <span class="title-tag2">{{store.state.pageContent[0].title}}</span>
-                                            <div class="new-read-title2">
-                                                    <span >{{ store.state.pageContent[0].createdate }}</span>
-                                                    <!-- <span >作者：{{articalArray[0].author}}</span> -->
-                                                    <span >点击量：{{store.state.pageContent[0].hits}}</span>
-                                            </div>
-                                        </div>
-                                        <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
-                                    </div>                            
-                                    <div v-html="store.state.pageContent[0].content" class="new-read-body">
+})
+</script>
+<template>
+    <div class="pageContain">
+        <section class="common-bradcrumb-section" >
+            <banner />
+        </section>
+        <section class="product-content-section pt-60">
+            <div class="container" v-if="store.state.pageContent.length>0">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12 content">
+                        <div  class="read_content mb-60">
+                            <div class="section-title text-left both-border mb-60 d-flex justify-content-between">
+                                <div >
+                                    <span class="title-tag2">{{store.state.pageContent[0].title}}</span>
+                                    <div class="new-read-title2">
+                                            <span >{{ store.state.pageContent[0].createdate }}</span>
+                                            <span >点击量：{{store.state.pageContent[0].hits}}</span>
                                     </div>
                                 </div>
-                                <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
-                            </div>
+                                <a href="javascript:history.back(-1)"><img src="@/assets/img/product/close.png" alt=""></a>
+                            </div>                            
+                            <div v-html="store.state.pageContent[0].content" class="new-read-body"></div>
                         </div>
+                        <recomMendation :data="recomMendationList"  v-if="recomMendationList.length>0"/>
                     </div>
-                </section>
+                </div>
             </div>
+        </section>
+    </div>
 </template>

src/views/services/index.vue

@@ -1,133 +1,148 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue'
 import { useStore  } from 'vuex'
 import { useRouter, useRoute } from "vue-router";
 import banner from '@/components/layout/banner.vue'
 import pagination from '@/components/layout/pagination.vue'
-
-    const store = useStore()
-    const router = useRouter()
-    const route = useRoute()
-    const columnTypes = ref([]) //类型
-    const requestParams = ref({})//active类型
-    const articalArray = ref([])
-    const paramsData = ref({})
-    let oldCategoryId= ref()
-    //类型切换
-    function facilityClick(item:Object){
-        //防抖
-        if(item.id != oldCategoryId.value){
-            requestParams.value = item
-            paramsData.value = {
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        const router = useRouter()
+        const route = useRoute()
+        const requestParams = ref({})//active类型
+        let paramsData = reactive({
+            params:{
+                categoryid: 0,
+                pageNum:1,
+                pageSize:100,
+                order:"sortindex",
+                active:true
+            },
+            index:"",
+            sub:0
+        })
+        let oldCategoryId= ref()
+        //类型切换
+        function facilityClick(item:any){
+            //防抖
+            if(item.id != oldCategoryId.value){
+                requestParams.value = item
+                paramsData = {
+                    params:{
+                        categoryid: item.id,
+                        pageNum:1,
+                        pageSize:10,
+                        order:"sortindex",
+                        active:true
+                    },
+                    index:store.state.currentPagePath,
+                    sub:store.state.sub
+                }
+                oldCategoryId.value = item.id
+                store.dispatch('getPageData',paramsData)
+            }
+        }
+        //详情页
+        function details(item:any){
+            let params = {
+                path: `/services_Read`,
+                query: {
+                    categoryid: item.categoryid,
+                    id: item.id,
+                    isUrlId: 1
+                }
+            }
+            store.commit("setRoute",params)
+            router.push(params)
+        }
+        //分页
+        function handleCurrentChange(val:number){
+            paramsData.params.pageNum = val
+            store.dispatch('getPageData',paramsData).then(()=>{
+                // globalThis.scrollTo({
+                //     top: 0,
+                //     behavior: "smooth"
+                // })
+            })
+        }
+        return { store, facilityClick, handleCurrentChange, details }
+    },
+    components:{
+        banner,
+        pagination
+    },
+    asyncData({ store,route } :any){
+        let params = reactive(route.value) //路由参数
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = store.state.menuList
+            let paramsData = reactive({
                 params:{
-                    categoryid: item.id,
+                    categoryid: 0,
                     pageNum:1,
-                    pageSize:10,
+                    pageSize:100,
                     order:"sortindex",
                 },
-                index:store.state.currentPagePath,
-                sub:store.state.sub
+                index:"",
+                sub:0
+            })//页面主题内容请求参数
+            let str = ref("")
+            if(params.path.indexOf("_")>-1){
+                str.value = params.path.split("_")[0]
+            }
+            for(let i=0;i<data.length;i++){
+                //主页数据初始化
+                if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
+                    paramsData = {
+                        params:{
+                            categoryid: data[i].id,
+                            pageNum:1,
+                            pageSize:100,
+                            order:"sortindex",
+                        },
+                        index:params.path,
+                        sub:i
+                    }
+                    if(!params.query?.categoryid){
+                        paramsData.params.categoryid = data[i].children[0].id
+                    }else{
+                        paramsData.params.categoryid = params.query.categoryid
+                    }
+                    return store.dispatch('getPageData',paramsData).then(()=>{
+                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
+                    })
+                }
             }
-            oldCategoryId.value = item.id
-            store.dispatch('getPageData',paramsData.value).then(()=>{
-                articalArray.value = store.state.pageContent
-            })
-        }
-    }
-    //详情页
-    // function details(item:Object){
-    //     router.push(
-    //         { 
-    //             path: `services_Read` , 
-    //             query: { 
-    //                 categoryid: item.categoryid,
-    //                 id:item.id,
-    //                 isUrlId:1
-    //             } 
-    //         }
-    //     )
-
-    // }
-    //数据初始化
-    function init(){
-      const data = store.state.menuList
-      const paramsData = ref({})//页面主题内容请求参数
-      for(let i=0;i<data.length;i++){
-              //模板 主页
-              if(!data[i].sname && route.path == data[i].path){
-                  paramsData.value = {
-                      params:{
-                          categoryid: data[i].id,
-                          pageNum:1,
-                          pageSize:100,
-                          order:"sortindex",
-                      },
-                      index:route.path,
-                      sub:i
-                  }
-                  if(!route.query?.categoryid){
-                    paramsData.value.params.categoryid = data[i].children[0].id
-                  }else{
-                    paramsData.value.params.categoryid = route.query.categoryid
-                  }
-                  store.dispatch('getPageData',paramsData.value).then(()=>{
-                    articalArray.value = store.state.pageContent
-                  })
-              }
-      }
-    }
-    //分页
-    function handleCurrentChange(val:number){
-        paramsData.value.params.pageNum = val
-        store.dispatch('getPageData',paramsData.value).then(()=>{
-            articalArray.value = store.state.pageContent
-            // globalThis.scrollTo({
-            //     top: 0,
-            //     behavior: "smooth"
-            // })
         })
     }
-    watch(() => store.state.menuList.length > 0,
-        () => {
-            init()
-        }
-    )
-    watch(
-        () => store.state.currentPagePath || store.state.sub || !store.state.currentPagePath && !store.state.sub,
-        () => {
-            columnTypes.value = store.state.menuList[store.state.sub].children
-        }
-    );
+})
 </script>
 <template>
     <div class="pageContain">
         <section class="common-bradcrumb-section">
-                <banner />
-                <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
-                    <ul class="cannot_selected tabs_selected" >
-                        <a v-for="(item,i) in columnTypes"  :class="item.id == store.state.acitveId ? 'active' : ''"
-                        v-on:mouseover="facilityClick(item)" :style="{'width':(1/columnTypes.length*100)+'%' }">{{item.categoryName}}</a>
-                    </ul>
-                </section>
+            <banner />
+            <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
+                <ul class="cannot_selected tabs_selected" >
+                    <a v-for="(item,index) in store.state.columnTypes"  :class="item.id == store.state.acitveId ? 'active' : ''"
+                    v-on:mouseover="facilityClick(item)" :style="{'width':(1/store.state.columnTypes.length*100)+'%' }" :key="index">{{item.categoryName}}</a>
+                </ul>
             </section>
-            <section class="product-grid-section  container pt-20 pb-60 lazyContainer" >
-                    <div class="row pt-80 content"  >
-                        <div class="col-md-4 newItemOne "  v-for="item in articalArray" :key="item.id">
-                            <div class="oneInnerBox">
-                                <a :href="`services_Read?categoryid=${item.categoryid}&id=${item.id}&=isUrlId=1`" style="color:#000">
-                                    <div class="img">
-                                        <img :src="item.image" alt="" :data-src="item.image">
-                                    </div>
-                                    <a class="line-two">{{item.title}}</a>
-                                    <span class="line-two">{{item.zhaiyao}}</span>
-                                </a>
+        </section>
+        <section class="product-grid-section  container pt-20 pb-60 lazyContainer" >
+            <div class="row pt-80 content"  >
+                <div class="col-md-4 newItemOne "  v-for="item in store.state.pageContent" :key="item.id">
+                    <div class="oneInnerBox" @click="details(item)">
+                            <div class="img">
+                                <img v-lazy="item.image" alt="" :data-src="item.image">
                             </div>
-                        </div>
+                            <a class="line-two">{{item.title}}</a>
+                            <span class="line-two">{{item.zhaiyao}}</span>
                     </div>
-                    <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
-            </section>
+                </div>
+            </div>
+            <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
+        </section>
     </div>
-            
 </template>
 <style lang="scss" scoped>
 

src/views/services/read.vue

@@ -1,69 +1,72 @@
-<script setup lang="ts">
-    import { ref, watch } from 'vue'
-    import { useStore  } from 'vuex'
-    import { useRoute } from "vue-router"
-    import banner from '@/components/layout/banner.vue'
-    import recomMendation from '@/components/layout/recomMendation.vue'
-    
-    const store = useStore()
-    const route = useRoute()
-    const recomMendationList:any = ref([]) //推荐内容
-    //推荐内容过滤
-    function recomMendationFilter(data:any){
-        let array = []
-        for(let i =0;i<data.length;i++){
-            if(data[i].id != route.query?.id){
-                array.push(data[i])
+<script lang="ts">
+import { ref, reactive, defineComponent } from 'vue'
+import { useStore  } from 'vuex'
+import { useRoute } from "vue-router"
+import banner from '@/components/layout/banner.vue'
+import recomMendation from '@/components/layout/recomMendation.vue'
+export default defineComponent({
+    setup(){
+        const store = useStore()
+        const route = useRoute()
+        const recomMendationList:any = ref(recomMendationFilter(store.state.recomMendation)) //推荐内容
+        //推荐内容过滤
+        function recomMendationFilter(data:any){
+            let array = []
+            for(let i =0;i<data.length;i++){
+                if(data[i].id != route.query?.id){
+                    array.push(data[i])
+                }
             }
+            return array
         }
-        return array
-    }
-    //页面内容初始化
-    function init(){
-        const data = ref(store.state.menuList)
-        let str =ref("")
-        let sub = ref()
-        const paramsData = ref({})
-        if(route.path.indexOf("_")){
-            str.value = route.path.split("_")[0]
+        return { store, recomMendationList }
+    },
+    components:{
+        banner,
+        recomMendation
+    },
+    asyncData({ store, route } :any){
+        let params:any = reactive({}) //路由参数
+        if(route.value.query?.categoryid){
+            params = route.value
+        }else{
+            params = store.state.route
         }
-        for(let i=0;i<data.value.length;i++){
-            if( route.path == data.value[i].path || str.value == data.value[i].path){
-                if(route.query?.categoryid  && !data.value[i].sname){
-                    sub.value = i
-                    console.log(1111,sub.value)
+        //获取菜单列表
+        return store.dispatch('getMenuList').then(()=>{
+            const data = reactive(store.state.menuList)
+            let str =ref("")
+            let sub = ref()
+            let paramsData:any = reactive({})
+            if(params.path.indexOf("_")){
+                str.value = params.path.split("_")[0]
+            }
+            for(let i=0;i<data.length;i++){
+                if( params.path == data[i].path || str.value == data[i].path){
+                    if(params.query?.categoryid  && !data[i].sname){
+                        sub.value = i
+                    }
                 }
             }
-        }
-        if(route.query?.categoryid  && !route.query.dup){
-            paramsData.value = {
-                params:{
-                    categoryid: route.query?.categoryid,
-                    pageNum:1,
-                    pageSize:1,
-                    order:"sortindex",
-                    articleid: route.query?.id,
-                    id: route.query?.id,
-                    details:true
-                },
-                index:route.path,
-                sub:sub.value
+            if(params.query?.categoryid  && !params.query.dup){
+                paramsData = {
+                    params:{
+                        categoryid: params.query?.categoryid,
+                        pageNum:1,
+                        pageSize:1,
+                        order:"sortindex",
+                        articleid: params.query?.id,
+                        id: params.query?.id,
+                        details:true
+                    },
+                    index:params.path,
+                    sub:sub.value
+                }
             }
-        }
-        store.dispatch('getPageData',paramsData.value)
+            return store.dispatch('getPageData',paramsData)
+        })
     }
-    watch(() => store.state.menuList || route.path,
-        () => {
-            init()
-        }
-    )
-    watch(
-        () => store.state.recomMendation,
-        () => {
-            recomMendationList.value = recomMendationFilter(store.state.recomMendation)
-        },
-        { deep:true  }
-    );
+})
     </script>
     <template>
             <div class="pageContain">

vite.config.ts

@@ -23,7 +23,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: '@import "@/assets/styles/variable.scss";'
+        // additionalData: '@import "@/assets/styles/variable.scss";'
       }
     }
   }