feat(solution): 优化解决方案页面并添加新功能

- 更新页面结构和样式，增加更多视觉元素- 添加全域旅游和智慧景区解决方案的详细信息
- 增加经典案例和新闻资讯的展示- 优化导航栏和底部栏，增加交互功能
- 重构部分代码以提高可维护性

src/views/components/v-bottom/index.vue

@@ -10,9 +10,21 @@
         <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="nav-item">
-          <div class="item-title">{{ item.title }}</div>
+          <div class="item-title">全域旅游</div>
-          <div class="item-children" v-for="(cell,i) in item.child" :key="i">
+          <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>
@@ -33,7 +45,7 @@
 
 <script>
   import * as Api from '@/api/cjy/company';
-
+  import * as Apis from "@/api/cjy/columninfo"
   export default {
     name: "index",
     data() {
@@ -41,12 +53,19 @@ export default {
         copy_date: null,
         nav_list: [],
         company_data: [],//企业信息
+        solvePlan:[],
+        scensePlan:[],
+        classicCase:[]
       }
     },
     mounted() {
       this.copy_date = new Date().getFullYear()
       this.getCompany()
       this.getNavList()
+
+      this.getCompanyAllArea()
+      this.getCompanySolvePlan()
+      this.getClassicCase()
     },
     methods: {
       /** 提交按钮 */
@@ -54,6 +73,35 @@ this.copy_date=new Date().getFullYear()
         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 = [
           {
@@ -86,8 +134,8 @@ this.copy_date=new Date().getFullYear()
         ]
       },
       // 跳转页面 函数
-    gotoPages(val) {
+      gotoPages(val,type) {
-      this.$router.push(val)
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
       }
     }
   }

src/views/components/v-header/index.vue

@@ -7,8 +7,11 @@
           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)">{{
+        <div class="nav-item" :class="{ 'active': activeIndex == index }" v-for="(item, index) in nav_list" :key="index"
-          item.title}}</div>
+          @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,7 +265,8 @@
     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;
     }
 
@@ -148,4 +275,114 @@
     }
 
   }
+
+
+  .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>

src/views/pages/case-detail.vue

@@ -5,35 +5,48 @@
     <!-- 页面 广告条 -->
     <div class="cjy-banner">
       <div class="cjy-banner-text">
-        <div class="title">{{ banner_data.title }}</div>
+        <div class="title">{{ banner_data.title || '--' }}</div>
-        <div class="subtitle">{{ banner_data.subtitle }}</div>
+        <div class="subtitle">{{ banner_data.subtitle || '--' }}</div>
       </div>
       <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 :to="{ path: '/home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>经典案例</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)">
+            <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)">
+            <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>
         <div class="detail-right col">
           <div class="detail-title">{{ case_data.title }}</div>
           <div class="detail-content" v-html="case_data.content"></div>
@@ -51,48 +64,109 @@ export default {
     name: "case-list",
     data() {
       return {
-      banner_data: null,//广告图
+        banner_data: {
+          title: null,
+          subtitle: null
+        },//广告图
         case_id: null,
         case_data: {},//案例数据
-      menu_list: [],// 菜单数据
         active_menu: 'type-1-0',
+        type: 2,
+        case_list: [],
+        solvePlan: [],
+        scensePlan: [],
       }
     },
     mounted() {
       this.case_id = this.$route.query.id;
-    // 获取 左侧菜单
+      this.type = this.$route.query.type ? this.$route.query.type : 2;
-    this.getMenuData()
+      if (this.type == 1) {
-    // 获取 案例详情
+
-    this.infoPages()
+        this.getCompanyAllArea();
-    // 获取 轮播图
+        this.getCompanySolvePlan();
-    this.getBanner()
+        this.getBanner1();
+        this.infoPages(this.case_id, this.type);
+
+      } else {
+        this.getBanner();
+        this.getPlanList();
+        this.infoPages(this.case_id, this.type);
+      }
+    },
+    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();
+        }
+      }
     },
     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() {
-    getMenuData(){
+        let res = await Api.getColumnInfoList({ type: 15 });
-      this.menu_list=this.getDictDatas(DICT_TYPE.COLUMN_TYPE)
+        this.banner_data = res.data.list[0]
       },
+      // 左侧菜单 函数
       // 案例详情 函数
       async infoPages(id, active) {
-      if(active){
+        if (active == 1) {
-        this.active_menu = active
+          this.active_menu = 'type-1-' + id;
         }
-      let res = await Api.getDetail(this.case_id)
+        let res = await Api.getDetail(id);
-      this.case_data = res.data
+        console.log(res.data); // 检查返回的数据结构
+        this.case_data = res.data; // 确保数据赋值正确
       },
       // 跳转页面 函数
-    gotoPages(val) {
+      gotoPages(val, type) {
-      this.$router.push("/case-detail?id" + val)
+        this.$router.push("/case-detail?id=" + val + "&type=" + type)
       }
     }
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-
+  .list-item {
+    cursor: pointer;
+  }
 </style>

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,

src/views/pages/index.vue

@@ -32,7 +32,7 @@
         <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">
@@ -44,7 +44,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 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)
       }
     }
   }