From af5986dddde3330663c051299c998ab10bcdf2f3 Mon Sep 17 00:00:00 2001
From: Tuzki <1720599558@qq.com>
Date: Tue, 21 Jan 2025 09:02:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(solution):=20=E4=BC=98=E5=8C=96=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E6=96=B9=E6=A1=88=E9=A1=B5=E9=9D=A2=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新页面结构和样式，增加更多视觉元素- 添加全域旅游和智慧景区解决方案的详细信息
- 增加经典案例和新闻资讯的展示- 优化导航栏和底部栏，增加交互功能
- 重构部分代码以提高可维护性
---
 src/views/components/v-bottom/index.vue | 376 +++++++++++++-----------
 src/views/components/v-header/index.vue | 255 +++++++++++++++-
 src/views/pages/case-detail.vue         | 178 +++++++----
 src/views/pages/case-list.vue           |   5 +-
 src/views/pages/index.vue               |  38 ++-
 5 files changed, 614 insertions(+), 238 deletions(-)

diff --git a/src/views/components/v-bottom/index.vue b/src/views/components/v-bottom/index.vue
index 27098f4..95753b1 100644
--- a/src/views/components/v-bottom/index.vue
+++ b/src/views/components/v-bottom/index.vue
@@ -10,16 +10,28 @@
         <div class="left-content">{{ company_data.url }}</div>
       </div>
       <div class="cjy-bottom-nav row">
-        <div class="nav-item" v-for="(item,index) in nav_list" :key="index"  @click="gotoPages(item.url)">
-          <div class="item-title">{{ item.title }}</div>
-          <div class="item-children" v-for="(cell,i) in item.child" :key="i">
+        <div class="nav-item">
+          <div class="item-title">全域旅游</div>
+          <div class="item-children" v-for="(cell, i) in solvePlan" :key="i" @click="gotoPages(cell.id,1)">
+            <div class="children-title">{{ cell.title }}</div>
+          </div>
+        </div>
+        <div class="nav-item">
+          <div class="item-title">智慧景区</div>
+          <div class="item-children" v-for="(cell, i) in scensePlan" :key="i" @click="gotoPages(cell.id,1)">
+            <div class="children-title">{{ cell.title }}</div>
+          </div>
+        </div>
+        <div class="nav-item">
+          <div class="item-title">经典案例</div>
+          <div class="item-children" v-for="(cell, i) in classicCase" :key="i" @click="gotoPages(cell.id,2)">
             <div class="children-title">{{ cell.title }}</div>
           </div>
         </div>
       </div>
       <div class="cjy-bottom-right">
         <img :src="company_data.qrCode">
-        <div class="text">关注公众号<br/>
+        <div class="text">关注公众号<br />
           了解更多最新动态
         </div>
       </div>
@@ -32,201 +44,237 @@
 </template>
 
 <script>
-import * as Api from '@/api/cjy/company';
-
-export default {
-  name: "index",
-  data() {
-    return {
-      copy_date:null,
-      nav_list: [],
-      company_data: [],//企业信息
-    }
-  },
-  mounted() {
-this.copy_date=new Date().getFullYear()
-    this.getCompany()
-    this.getNavList()
-  },
-  methods: {
-    /** 提交按钮 */
-    async getCompany(){
-      let res=await Api.getColumnInfo();
-     this.company_data=res.data
+  import * as Api from '@/api/cjy/company';
+  import * as Apis from "@/api/cjy/columninfo"
+  export default {
+    name: "index",
+    data() {
+      return {
+        copy_date: null,
+        nav_list: [],
+        company_data: [],//企业信息
+        solvePlan:[],
+        scensePlan:[],
+        classicCase:[]
+      }
     },
-    getNavList() {
-      this.nav_list = [
-        {
-          title: "全域旅游", child: [
-            {title: "文旅大数据中心",url:""},
-            {title: "文旅产业监测平台",url:""},
-            {title: "大数据分析平台",url:""},
-            {title: "一部手机游平台",url:""},
-            {title: "智慧导游导览系统",url:""},
-          ]
-        },
-        {
-          title: "智慧景区", child: [
-            {title: "景区综合管控平台",url:""},
-            {title: "景区票务系统",url:""},
-            {title: "衡水老白干智慧景区",url:""},
-            {title: "一部手机游平台",url:""},
-            {title: "智慧导游导览系统",url:""},
-          ]
-        },
-        {
-          title: "经典案例", child: [
-            {title: "文旅厅全域旅游"},
-            {title: "老白干智慧景区"},
-            {title: "沽源全域旅游"},
-            {title: "沙河市农厕监管平台"},
-            {title: "一部手机游平台"},
-          ]
-        }
-      ]
+    mounted() {
+      this.copy_date = new Date().getFullYear()
+      this.getCompany()
+      this.getNavList()
+
+      this.getCompanyAllArea()
+      this.getCompanySolvePlan()
+      this.getClassicCase()
     },
-    // 跳转页面 函数
-    gotoPages(val) {
-      this.$router.push(val)
+    methods: {
+      /** 提交按钮 */
+      async getCompany() {
+        let res = await Api.getColumnInfo();
+        this.company_data = res.data
+      },
+      //全域旅游解决方案
+      async getCompanyAllArea() {
+        const params = {
+          type: 3,
+          infoType: 1
+        }
+        let res = await Apis.getColumnInfoList(params)
+        this.solvePlan = res.data.list.slice(0, 6);
+        console.log(res)
+      },
+      //智慧景区解决方案
+      async getCompanySolvePlan() {
+        const params = {
+          type: 3,
+          infoType: 2
+        }
+        let res = await Apis.getColumnInfoList(params)
+        this.scensePlan = res.data.list.slice(0, 6);
+        console.log(res)
+      },
+      //经典案例
+      async getClassicCase() {
+        const params = {
+          type: 5,
+        }
+        let res = await Apis.getColumnInfoList(params)
+        this.classicCase = res.data.list.slice(0, 6);
+        console.log(res)
+      },
+      getNavList() {
+        this.nav_list = [
+          {
+            title: "全域旅游", child: [
+              { title: "文旅大数据中心", url: "" },
+              { title: "文旅产业监测平台", url: "" },
+              { title: "大数据分析平台", url: "" },
+              { title: "一部手机游平台", url: "" },
+              { title: "智慧导游导览系统", url: "" },
+            ]
+          },
+          {
+            title: "智慧景区", child: [
+              { title: "景区综合管控平台", url: "" },
+              { title: "景区票务系统", url: "" },
+              { title: "衡水老白干智慧景区", url: "" },
+              { title: "一部手机游平台", url: "" },
+              { title: "智慧导游导览系统", url: "" },
+            ]
+          },
+          {
+            title: "经典案例", child: [
+              { title: "文旅厅全域旅游" },
+              { title: "老白干智慧景区" },
+              { title: "沽源全域旅游" },
+              { title: "沙河市农厕监管平台" },
+              { title: "一部手机游平台" },
+            ]
+          }
+        ]
+      },
+      // 跳转页面 函数
+      gotoPages(val,type) {
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
+      }
     }
   }
-}
 </script>
 
 <style scoped lang="scss">
-.cjy-bottom {
-  height: 480px;
-  padding-top: 80px;
-  background: url("~@/assets/images/v-bottom-bg.jpg");
-
-  .cjy-bottom-left {
-    position: relative;
-    width: 300px;
-    padding-right: 30px;
-    margin-right: 80px;
-
-
-    &:after {
-      content: "";
-      position: absolute;
-      right: 0;
-      top: 0px;
-      width: 1px;
-      height: 250px;
-      background-color: rgb(30, 56, 93)
-    }
-
-    .tel-number {
-      font-weight: 600;
-      font-size: 32px;
-      line-height: 150%;
-      color: #fff;
-    }
+  .cjy-bottom {
+    height: 480px;
+    padding-top: 80px;
+    background: url("~@/assets/images/v-bottom-bg.jpg");
 
-    .tel-text {
-      color: #fff;
-    }
+    .cjy-bottom-left {
+      position: relative;
+      width: 300px;
+      padding-right: 30px;
+      margin-right: 80px;
 
-    .left-title {
-      color: #fff;
-      font-weight: 700;
-      font-size: 16px;
-    }
 
-    .left-content {
-      color: #fff;
-    }
-  }
+      &:after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 0px;
+        width: 1px;
+        height: 250px;
+        background-color: rgb(30, 56, 93)
+      }
 
-  .cjy-bottom-nav {
-    .nav-item {
-      width: 200px;
+      .tel-number {
+        font-weight: 600;
+        font-size: 32px;
+        line-height: 150%;
+        color: #fff;
+      }
 
+      .tel-text {
+        color: #fff;
+      }
 
-      .item-title {
-        position: relative;
-        margin-bottom: 30px;
+      .left-title {
         color: #fff;
         font-weight: 700;
         font-size: 16px;
-
-        &:after {
-          content: "";
-          position: absolute;
-          left: 0;
-          bottom: -10px;
-          width: 30px;
-          height: 2px;
-          border-radius: 2px;
-          background-color: #fff
-        }
       }
 
-      .children-title {
-        margin-top: 15px;
-        color: rgba(255, 255, 255, .8);
-        cursor: pointer;
+      .left-content {
+        color: #fff;
       }
     }
-  }
 
-  .cjy-bottom-right {
-    margin-left: 60px;
+    .cjy-bottom-nav {
+      .nav-item {
+        width: 200px;
 
-    .text {
-      margin-top: 20px;
-      color: #fff;
-    }
-  }
 
-  .cjy-bottom-copy {
-    position: relative;
-    margin-top: 30px;
-    padding-top: 30px;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0px;
-      width: 100%;
-      height: 1px;
-      background-color: rgb(30, 56, 93)
+        .item-title {
+          position: relative;
+          margin-bottom: 30px;
+          color: #fff;
+          font-weight: 700;
+          font-size: 16px;
+
+          &:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: -10px;
+            width: 30px;
+            height: 2px;
+            border-radius: 2px;
+            background-color: #fff
+          }
+        }
+
+        .children-title {
+          margin-top: 15px;
+          color: rgba(255, 255, 255, .8);
+          cursor: pointer;
+        }
+      }
     }
 
-    .copy-text {
-      color: #fff;
+    .cjy-bottom-right {
+      margin-left: 60px;
+
+      .text {
+        margin-top: 20px;
+        color: #fff;
+      }
     }
 
-    .copy-text:first-child {
-      margin-right: 80px;
+    .cjy-bottom-copy {
+      position: relative;
+      margin-top: 30px;
+      padding-top: 30px;
+
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0px;
+        width: 100%;
+        height: 1px;
+        background-color: rgb(30, 56, 93)
+      }
+
+      .copy-text {
+        color: #fff;
+      }
+
+      .copy-text:first-child {
+        margin-right: 80px;
+      }
     }
   }
-}
 
-@media (max-width: 768px) {
-  .cjy-bottom {
-    padding: 20px 0;
-    height: auto;
+  @media (max-width: 768px) {
+    .cjy-bottom {
+      padding: 20px 0;
+      height: auto;
 
-    .cjy-bottom-left {
-      width: auto;
-      margin-right: 0;
-      padding-right: 0;
-      text-align: center;
+      .cjy-bottom-left {
+        width: auto;
+        margin-right: 0;
+        padding-right: 0;
+        text-align: center;
 
-      &:after {
-        display: none
+        &:after {
+          display: none
+        }
       }
-    }
 
-    .cjy-bottom-nav {
-      display: none
-    }
+      .cjy-bottom-nav {
+        display: none
+      }
 
-    .cjy-bottom-right {
-      display: none
+      .cjy-bottom-right {
+        display: none
+      }
     }
   }
-}
 </style>
diff --git a/src/views/components/v-header/index.vue b/src/views/components/v-header/index.vue
index 0db39e9..b62d12e 100644
--- a/src/views/components/v-header/index.vue
+++ b/src/views/components/v-header/index.vue
@@ -3,12 +3,15 @@
     <div class="v-container cjy-header-box row flex-align-center">
       <div class="cjy-header-logo">
         <img
-          :src="theme == 'header-light' ? require('@/assets/images/logo_red.svg') : theme == '' ?require('@/assets/images/logo_red.svg'): require('@/assets/images/logo_white.svg')"
+          :src="theme == 'header-light' ? require('@/assets/images/logo_red.svg') : theme == '' ? require('@/assets/images/logo_red.svg') : require('@/assets/images/logo_white.svg')"
           class="img" />
       </div>
       <div class="cjy-header-nav row">
-        <div class="nav-item" v-for="(item, index) in nav_list" :key="index" @click="gotoPages(item.url)">{{
-          item.title}}</div>
+        <div class="nav-item" :class="{ 'active': activeIndex == index }" v-for="(item, index) in nav_list" :key="index"
+          @click="gotoPages(item.url)" @mouseover="hoverItem(index)">
+          {{ item.title || '--' }}
+          <span class="rote-icon" v-if="index == 1 || index == 2"><i class="el-icon-arrow-down"></i></span>
+        </div>
       </div>
       <div class="call-box">
         <div class="call-icon-box">
@@ -19,10 +22,43 @@
         </div>
       </div>
     </div>
+    <div class="content-list" v-show="showContent" @mouseleave="closeContent">
+      <div class="list-box is-flex" v-if="activeIndex == 1">
+        <div class="list-box-left">
+          <div class="min-title">全域旅游</div>
+          <div class="nav-item-text-box">
+            <div class="nav-item-text" v-for="(item, index) in solvePlan" :key='index' @click="gotoPages1(item.id,1)">  
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+        <div class="list-box-right">
+          <div class="min-title">智慧景区</div>
+          <div class="nav-item-text-box">
+            <div class="nav-item-text" v-for="(item, index) in scensePlan" :key='index' @click="gotoPages1(item.id,1)">
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list-box" v-if="activeIndex == 2">
+        <div class="min-title">热门案例</div>
+        <div class="list-item-pic">
+          <div class="list-item-i" v-for="(item, index) in case_list" :key="index" @click="gotoPages1(item.id,2)">
+            <div class="img-boox">
+              <el-image class="img" :src="item.logo"></el-image>
+            </div>
+            <div class="image-title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+  import * as Api from "@/api/cjy/columninfo"
+
   export default {
     name: "index",
     props: {
@@ -32,17 +68,99 @@
     },
     data() {
       return {
-        nav_list: []
+        nav_list: [],
+        showContent: false,
+        activeIndex: null,
+        queryParams: {
+          pageNo: 1,
+          pageSize: 10,
+        },
+        case_list: [],
+        solvePlan: [],
+        scensePlan: [],
       }
     },
     mounted() {
       this.getNavList()
+      this.infoPages()
+      this.getCompanyAllArea()
+      this.getCompanySolvePlan()
     },
     methods: {
+      closeContent() {
+        this.$nextTick(() => {
+          if (document.querySelector('.content-list')) {
+            document.querySelector('.content-list').style.opacity = 0
+          }
+          setTimeout(() => {
+            this.showContent = false
+            this.activeIndex = null
+
+          }, 100)
+        })
+      },
+      //全域旅游解决方案
+      async getCompanyAllArea() {
+        const params = {
+          type: 3,
+          infoType: 1
+        }
+        let res = await Api.getColumnInfoList(params)
+        this.solvePlan = res.data.list.slice(0, 5);
+        this.solvePlan.push({
+          title: '更多方案',
+          id: this.solvePlan[0].id
+        })
+        console.log(res)
+      },
+      //智慧景区解决方案
+      async getCompanySolvePlan() {
+        const params = {
+          type: 3,
+          infoType: 2
+        }
+        let res = await Api.getColumnInfoList(params)
+        this.scensePlan = res.data.list.slice(0, 5);
+        this.scensePlan.push({
+          title: '更多方案',
+          id: this.scensePlan[0].id
+        })
+        console.log(res)
+      },
+      //案例
+      async infoPages() {
+        this.queryParams.type = 5
+        let res = await Api.getColumnInfoList(this.queryParams)
+        this.case_list = res.data.list.filter(item => item.recommend == 1)
+      },
+      hoverItem(val) {
+        this.activeIndex = val
+        console.log(val)
+        if (val == 1 || val == 2) {
+          this.$nextTick(() => {
+            this.showContent = true
+            setTimeout(() => {
+              if (document.querySelector('.content-list')) {
+                document.querySelector('.content-list').style.opacity = 1
+              }
+            }, 100)
+          })
+        } else {
+          this.$nextTick(() => {
+            if (document.querySelector('.content-list')) {
+              console.log(document.querySelector('.content-list'))
+              document.querySelector('.content-list').style.opacity = 0
+            }
+            setTimeout(() => {
+              this.showContent = false
+            }, 100)
+          })
+        }
+      },
       getNavList() {
         this.nav_list = [
           { title: "首页", url: "/home" },
-          { title: "解决方案", url: "" },
+          { title: "解决方案"},
           { title: "经典案例", url: "/case-list" },
           { title: "新闻资讯", url: "/news-list" },
           { title: "关于我们 ", url: "/about-us" }
@@ -51,6 +169,9 @@
       // 跳转页面 函数
       gotoPages(val) {
         this.$router.push(val)
+      },
+      gotoPages1(val, type) {
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
       }
     }
   }
@@ -58,12 +179,12 @@
 
 <style scoped lang="scss">
   .cjy-header {
-    height: 100px;
+    height: fit-content;
     background-color: #fff;
     transition: all 0.3s ease-in-out;
 
     .cjy-header-box {
-      height: 100%
+      height: 100px
     }
 
     .cjy-header-logo {
@@ -80,6 +201,11 @@
         color: #2A333D;
         font-size: 16px;
         cursor: pointer;
+
+        .rote-icon {
+          transition: all 0.3s ease-in-out;
+          display: inline-block;
+        }
       }
 
       .nav-item {
@@ -139,13 +265,124 @@
     backdrop-filter: blur(5px);
     box-shadow: rgba(0, 0, 0, 0.1) 2px 8px 8px;
 
-    .nav-item,.info-box{
+    .nav-item,
+    .info-box {
       color: #2A333D !important;
     }
 
     .nav-item::before {
       background-color: #0B59B3 !important;
     }
-    
+
+  }
+
+
+  .content-list {
+    position: fixed;
+    top: 100px;
+    z-index: 999;
+    width: 100%;
+    background-color: #fff;
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+
+    .list-box {
+      max-width: 1220px;
+      margin: 0 auto;
+      padding: 20px;
+
+      .min-title {
+        color: #333;
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        cursor: pointer;
+        transition: all ease-in-out 0.3s;
+
+        &:hover {
+          color: #0B59B3
+        }
+      }
+
+      .list-item-pic {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+        scrollbar-width: none;
+
+        .list-item-i {
+          width: 300px;
+          height: fit-content;
+          height: 250px;
+          cursor: pointer;
+          flex: none;
+          transition: all ease-in-out 0.3s;
+          scale: 0.98;
+
+          &:not(:first-child) {
+            margin-left: 15px;
+          }
+
+          &:hover {
+            scale: 1;
+          }
+
+          .img-boox {
+            width: 100%;
+            height: 200px;
+
+            .img {
+              width: 100%;
+            }
+          }
+
+          .image-title {
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .is-flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .list-box-left,
+      .list-box-right {
+        width: 50%;
+
+        .nav-item-text-box {
+
+          .nav-item-text {
+            line-height: 35px;
+            color: #333;
+            width: 45%;
+            margin-left: 5%;
+            margin-top: 14px;
+            padding-left: 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all ease-in-out 0.3s;
+            background: linear-gradient(to right, #33333328, #f6f6f600);
+
+            &:hover {
+              color: #0B59B3;
+              padding-left: 18px;
+              background: linear-gradient(to right, #0066be37, #f6f6f600);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .active {
+    .rote-icon {
+      transform: rotate(180deg);
+    }
   }
 </style>
diff --git a/src/views/pages/case-detail.vue b/src/views/pages/case-detail.vue
index 0e14c30..477058d 100644
--- a/src/views/pages/case-detail.vue
+++ b/src/views/pages/case-detail.vue
@@ -5,32 +5,45 @@
     <!-- 页面 广告条 -->
     <div class="cjy-banner">
       <div class="cjy-banner-text">
-        <div class="title">{{ banner_data.title }}</div>
-        <div class="subtitle">{{ banner_data.subtitle }}</div>
+        <div class="title">{{ banner_data.title || '--' }}</div>
+        <div class="subtitle">{{ banner_data.subtitle || '--' }}</div>
       </div>
-      <img :src="banner_data.logo" class="img"/>
+      <img :src="banner_data.logo" class="img" />
     </div>
     <!-- 页面 面包屑 -->
     <div class="v-container">
       <el-breadcrumb class="m-t-normal" separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>经典案例</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ type == 2 ? '经典案例' : '解决方案' }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <!-- 案例 详情 -->
     <div class="v-container">
       <div class="cjy-case-detail row">
-        <div class="detail-left">
+        <div class="detail-left" v-if="type == 1">
           <div class="title tourism">全域旅游</div>
           <div class="menu-list">
-            <div class="list-item" v-for="(item,index) in menu_list" :class="active_menu=='type-1-'+index?'active':''" :key="index" @click="getCaseData(item.id,'type-1-'+index)">
-              {{item.title}}
+            <div class="list-item" v-for="(item, index) in solvePlan" @click="infoPages(item.id, 1)"
+              :class="active_menu == 'type-1-' + item.id ? 'active' : ''" :key="index">
+              {{ item.title }}
             </div>
           </div>
           <div class="title scenic">智慧园区</div>
           <div class="menu-list">
-            <div class="list-item" v-for="(item,index) in menu_list" :class="active_menu=='type-2-'+index?'active':''" :key="index" @click="getCaseData(item.id,'type-2-'+index)">
-              {{item.title}}
+            <div class="list-item" v-for="(item, index) in scensePlan" @click="infoPages(item.id, 1)"
+              :class="active_menu == 'type-1-' + item.id ? 'active' : ''" :key="index">
+              {{ item.title }}
+            </div>
+          </div>
+        </div>
+        <div class="detail-left" v-if="type == 2">
+          <div class="title tourism">相关推荐</div>
+          <div class="list-item" v-for="(item, index) in case_list" :key="index" @click="gotoPages(item.id, 2)">
+            <div class="item-box row">
+              <div class="item-image"><img :src="item.logo" class="img"></div>
+              <div class="item-content">
+                <div class="title">{{ item.title }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -45,54 +58,115 @@
   </div>
 </template>
 <script>
-import * as Api from "@/api/cjy/columninfo"
-import { DICT_TYPE, getDictDatas } from "@/utils/dict";
-export default {
-  name: "case-list",
-  data() {
-    return {
-      banner_data: null,//广告图
-      case_id: null,
-      case_data: {},//案例数据
-      menu_list: [],// 菜单数据
-      active_menu:'type-1-0',
-    }
-  },
-  mounted() {
-    this.case_id = this.$route.query.id;
-    // 获取 左侧菜单
-    this.getMenuData()
-    // 获取 案例详情
-    this.infoPages()
-    // 获取 轮播图
-    this.getBanner()
-  },
-  methods: {
-    // 轮播图 函数
-    async getBanner() {
-      let res = await Api.getColumnInfoList({type: 13});
-      this.banner_data = res.data.list[0]
+  import * as Api from "@/api/cjy/columninfo"
+  import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+  export default {
+    name: "case-list",
+    data() {
+      return {
+        banner_data: {
+          title: null,
+          subtitle: null
+        },//广告图
+        case_id: null,
+        case_data: {},//案例数据
+        active_menu: 'type-1-0',
+        type: 2,
+        case_list: [],
+        solvePlan: [],
+        scensePlan: [],
+      }
     },
-    // 左侧菜单 函数
-    getMenuData(){
-      this.menu_list=this.getDictDatas(DICT_TYPE.COLUMN_TYPE)
+    mounted() {
+      this.case_id = this.$route.query.id;
+      this.type = this.$route.query.type ? this.$route.query.type : 2;
+      if (this.type == 1) {
+
+        this.getCompanyAllArea();
+        this.getCompanySolvePlan();
+        this.getBanner1();
+        this.infoPages(this.case_id, this.type);
+
+      } else {
+        this.getBanner();
+        this.getPlanList();
+        this.infoPages(this.case_id, this.type);
+      }
     },
-    // 案例详情 函数
-    async infoPages(id,active) {
-      if(active){
-        this.active_menu = active
+    watch: {
+      '$route'(to, from) {
+        console.log(to, from);
+        // 当路由变化时调用 infoPages 方法  
+        this.infoPages(to.query.id, to.query.type ? to.query.type : 2);
+        this.case_id = to.query.id;
+        this.type = to.query.type ? to.query.type : 2;
+        if (to.query.type && to.query.type == 2) {
+          this.getBanner();
+          this.getPlanList()
+        } else {
+          this.getBanner1()
+          this.getCompanyAllArea();
+          this.getCompanySolvePlan();
+        }
       }
-      let res = await Api.getDetail(this.case_id)
-      this.case_data = res.data
     },
-    // 跳转页面 函数
-    gotoPages(val) {
-      this.$router.push("/case-detail?id" + val)
+    methods: {
+      async getPlanList() {
+        const params = {
+          type: 5,
+        }
+        let res = await Api.getColumnInfoList(params)
+        this.case_list = res.data.list.filter(item => item.recommend == 1)
+      },
+      //全域旅游解决方案
+      async getCompanyAllArea() {
+        const params = {
+          type: 3,
+          infoType: 1
+        }
+        let res = await Api.getColumnInfoList(params)
+        this.solvePlan = res.data.list.slice(0, 6);
+        console.log(res)
+      },
+      //智慧景区解决方案
+      async getCompanySolvePlan() {
+        const params = {
+          type: 3,
+          infoType: 2
+        }
+        let res = await Api.getColumnInfoList(params)
+        this.scensePlan = res.data.list.slice(0, 6);
+        console.log(res)
+      },
+      // 轮播图 函数
+      async getBanner() {
+        let res = await Api.getColumnInfoList({ type: 13 });
+        this.banner_data = res.data.list[0]
+      },
+      async getBanner1() {
+        let res = await Api.getColumnInfoList({ type: 15 });
+        this.banner_data = res.data.list[0]
+      },
+      // 左侧菜单 函数
+      // 案例详情 函数
+      async infoPages(id, active) {
+        if (active == 1) {
+          this.active_menu = 'type-1-' + id;
+        }
+        let res = await Api.getDetail(id);
+        console.log(res.data); // 检查返回的数据结构
+        this.case_data = res.data; // 确保数据赋值正确
+      },
+      // 跳转页面 函数
+      gotoPages(val, type) {
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
+      }
     }
   }
-}
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+  .list-item {
+    cursor: pointer;
+  }
 </style>
diff --git a/src/views/pages/case-list.vue b/src/views/pages/case-list.vue
index 174d91c..2c96860 100644
--- a/src/views/pages/case-list.vue
+++ b/src/views/pages/case-list.vue
@@ -44,7 +44,10 @@ export default {
   name: "case-list",
   data() {
     return {
-      banner_data: null,//广告图
+      banner_data: {
+        title:null,
+        subtitle:null,
+      },//广告图
       queryParams: {
         pageNo: 1,
         pageSize: 10,
diff --git a/src/views/pages/index.vue b/src/views/pages/index.vue
index 41bfd9f..5931759 100644
--- a/src/views/pages/index.vue
+++ b/src/views/pages/index.vue
@@ -32,19 +32,19 @@
         <div class="content-title solve-plan-title">
           <span>全域旅游解决方案</span>
           <div class="saw-more-box">
-            <div class="saw-more">全部产品</div>
+            <div class="saw-more" @click="gotoDetail(solvePlan[0].id,1)">全部产品</div>
           </div>
         </div>
         <div class="ciontent-text solve-plan-text">
           <el-tabs class="pc-el-tabs" stretch v-model="activeName">
             <el-tab-pane v-for="(product, index) in solvePlan" :key="index" :label="product.title"
-              :name="'第' + index + '个'">
+              :name="'第' + index + '个'" >
               <div class="solve-plan-tabs-content">
                 <div class="solve-plan-tabs-content-left">
                   <div class="solve-plan-tabs-content-left-html"
                     v-html="product.introduction ? product.introduction : ''">
                   </div>
-                  <div class="saw-detail">查看详情&rarr;</div>
+                  <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
                 </div>
                 <div class="solve-plan-tabs-content-right">
                   <img :src="product.logo ? product.logo : ''" alt="">
@@ -61,7 +61,7 @@
         <div class="content-title scence-plan-title">
           <span>智慧景区解决方案</span>
           <div class="saw-more-box">
-            <div class="saw-more">全部产品</div>
+            <div class="saw-more"  @click="gotoDetail(scensePlan[0].id,1)">全部产品</div>
           </div>
         </div>
         <div class="ciontent-text solve-plan-text scence-plan-text">
@@ -76,7 +76,7 @@
                   <div class="solve-plan-tabs-content-left-html"
                     v-html="product.introduction ? product.introduction : ''">
                   </div>
-                  <div class="saw-detail">查看详情&rarr;</div>
+                  <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
                 </div>
               </div>
             </el-tab-pane>
@@ -89,7 +89,7 @@
         <div class="content-title scence-plan-title classic-case-title">
           <span>经典案例</span>
           <div class="saw-more-box">
-            <div class="saw-more">全部案例</div>
+            <div class="saw-more" @click="gotoClassicCaseList">全部案例</div>
           </div>
         </div>
         <div class="ciontent-text classic-case-text">
@@ -109,7 +109,7 @@
               </div>
             </div>
             <div class="classic-case-text-right-bottom">
-              <div class="saw-detail">
+              <div class="saw-detail" @click="gotoDetail(formattedClassicAse[ativeindex].id,2)">
                 查看详情<i class="el-icon-arrow-right"></i>
               </div>
             </div>
@@ -152,14 +152,14 @@
         <div class="content-title scence-plan-title classic-case-title news-title">
           <span>动态与资讯</span>
           <div class="saw-more-box">
-            <div class="saw-more">查看更多</div>
+            <div class="saw-more" @click="gotoNewsList">查看更多</div>
           </div>
         </div>
         <div class="ciontent-text news-text">
           <el-tabs class="pc-el-tabs-dark short-tabs" stretch v-model="activeName2" @tab-click="handleClick">
             <el-tab-pane label="公司动态" name="first">
               <el-row class="news-row" :gutter="40">
-                <el-col v-for="(item, index) in newsList" class="news-col" :span="12">
+                <el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)">
                   <div class="news-img-box">
                     <el-image class="news-img" :src="item.logo" />
                   </div>
@@ -180,7 +180,7 @@
             </el-tab-pane>
             <el-tab-pane label="行业资讯" name="second">
               <el-row class="news-row" :gutter="40">
-                <el-col v-for="(item, index) in newsList" class="news-col" :span="12">
+                <el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)">
                   <div class="news-img-box">
                     <el-image class="news-img" :src="item.logo" />
                   </div>
@@ -384,7 +384,7 @@
           type: 5,
         }
         let res = await Api.getColumnInfoList(params)
-        this.classicCase = res.data.list.slice(0, 7);
+        this.classicCase = res.data.list.slice(0, 6);
         console.log(res)
       },
       //合作伙伴
@@ -505,6 +505,20 @@
           learnMoreElement.classList.remove('animate__animated', 'animate__fadeInDown');
 
         }
+      },
+      gotoNewsList(){
+        this.$router.push("/news-list")
+      },
+      //资讯详情
+      gotoNews(val) {
+        this.$router.push("/news-detail?id=" + val)
+      },
+      gotoClassicCaseList(){
+        this.$router.push("/case-list")
+      },
+      //方案案例详情
+      gotoDetail(val,type){
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
       }
     }
   }
@@ -525,7 +539,7 @@
       background-color: #fff !important;
     }
 
-    .info-box{
+    .info-box {
       color: #fff !important;
     }
   }