新增核心业务模块

src/api/index.js

@@ -69,7 +69,7 @@ export function getNewsDetail(id) {
   })
 }
 
-/* 获取新闻动态列表 */
+/* 获取应用方案/核心业务列表 */
 export function getCaseList(params) {
   return request({
     url: '/cniyv/cniyvcase/page',
@@ -78,7 +78,7 @@ export function getCaseList(params) {
   })
 }
 
-/* 获取对应新闻动态详情 */
+/* 获取对应应用方案/核心业务详情 */
 export function getCaseDetail(id) {
   return request({
     url: `/cniyv/cniyvcase/info/${id}`,

src/assets/css/main.css

@@ -232,7 +232,7 @@ header nav .logo {
 
 .carousel-inner>.item>img, .carousel-inner>.item>a>img {
     line-height: 1;
-    height: 532px;
+    height: auto;
 }
 
 .profuile {
@@ -684,7 +684,7 @@ footer .footer-button {
 @media (max-width: 1200px) {
     .carousel-inner>.item>img, .carousel-inner>.item>a>img {
         line-height: 1;
-        height: 432px;
+        /* height: 432px; */
     }
     .about_form form {
         height: 455px;
@@ -988,7 +988,7 @@ footer .footer-button {
 }
 
 .content-news img {
-    width: auto;
+    width: 100%;
     height: auto;
   }
 
@@ -1330,7 +1330,7 @@ footer .footer-button {
 @media (max-width: 970px) {
     .carousel-inner>.item>img, .carousel-inner>.item>a>img {
         line-height: 1;
-        height: 370px;
+        /* height: 370px; */
     }
     .news div img {
         height: 300px;
@@ -1378,7 +1378,7 @@ footer .footer-button {
         padding: 0;
     }
     .carousel-inner>.item>img, .carousel-inner>.item>a>img {
-        height: 375px;
+        /* height: 375px; */
     }
     .about ul li {
         padding-bottom: 5px;
@@ -1485,7 +1485,7 @@ footer .footer-button {
 @media (max-width: 750px) {
     .carousel-inner>.item>img, .carousel-inner>.item>a>img {
         line-height: 1;
-        height: 188px;
+        /* height: 188px; */
     }
     .about .aboutwh img {
         height: 220px;

src/components/layout/ComponentBanner.vue

@@ -48,6 +48,7 @@ export default {
   },
 
   created() {
+    /* 获取轮播图，最多显示5张 */
     this.getBanners({
       limit: 5,
       orderField: 'sort'

src/components/layout/NavHeader.vue

@@ -42,6 +42,7 @@
               <el-menu-item index="/home">首页</el-menu-item>
               <el-menu-item index="/profuiles">关于天云</el-menu-item>
               <el-menu-item index="/products">产品中心</el-menu-item>
+              <el-menu-item index="/business">核心业务</el-menu-item>
               <el-menu-item index="/applications">应用方案</el-menu-item>
               <el-menu-item index="/news">新闻动态</el-menu-item>
               <!-- <el-menu-item index="/join">品牌招商</el-menu-item> -->
@@ -89,7 +90,9 @@ export default {
       setNavPath: 'app/setNavPath'
     }),
     handleToogleMenu() {
-
+      console.log('//////')
+      console.log(localStorage.getItem('lastChecked'))
+      // localStorage.setItem('lastChecked', '')
     }
   },
 

src/router/index.js

@@ -11,6 +11,7 @@ const Products = () => import('@/views/Products')
 const About = () => import('@/views/About')
 const News = () => import('@/views/News')
 const Applications = () => import('@/views/Applications')
+const Business = () => import('@/views/Business')
 // const Join = () => import('@/views/Join')
 const ProductDetail = () => import('@/views/ProductDetail')
 const NewsDetail = () => import('@/views/NewsDetail')
@@ -100,6 +101,23 @@ const routes = [
           },
         ]
       },
+      {
+        path: '/business',
+        meta: {
+          title: '核心业务'
+        },
+        component: Business,
+        children: [
+          {
+            path: '/business/detail/:id',
+            name: 'business-detail',
+            meta: {
+              isDetail: true
+            },
+            component: ApplicationDetail,
+          },
+        ]
+      },
       
       // {
       //   path: '/join',

src/views/Applications/index.vue

@@ -20,8 +20,8 @@
               <el-breadcrumb-item v-for="item in breadList" :key="item.path">
                 <router-link :to="item.path" @click.native="handleClick" :data-title="item.meta.title">{{ item.meta.title }}</router-link>
               </el-breadcrumb-item>
-              <el-breadcrumb-item v-if="newsTitle && !$route.meta.isDetail">
-                <span class="nav-title">{{newsTitle}}</span>
+              <el-breadcrumb-item v-if="planTitle && !$route.meta.isDetail">
+                <span class="nav-title">{{planTitle}}</span>
               </el-breadcrumb-item>
             </el-breadcrumb>
           </div>
@@ -75,7 +75,7 @@ import { mapGetters, mapActions } from 'vuex'
 export default {
   data() {
     return {
-      newsTitle: '',
+      planTitle: '',
       curPage: 1
     }
   },
@@ -91,15 +91,15 @@ export default {
       const length = matche.length
       if (length > 2) {
         matche[length-1].path = ''
-        matche[length-1].meta.title = this.newsTitle
+        matche[length-1].meta.title = this.planTitle
       }
       return matche
     }
   },
 
   created() {
-    const newsTitle = localStorage.getItem('newsTitle')
-    if (newsTitle) this.newsTitle = newsTitle
+    const planTitle = localStorage.getItem('planTitle')
+    if (planTitle) this.planTitle = planTitle
   },
 
   mounted() {
@@ -110,6 +110,7 @@ export default {
     // })
     this.getCaseList({
       limit: 9,
+      type: 'case'
       // orderField: 'sort'
     })
   },
@@ -120,32 +121,29 @@ export default {
     }),
 
     handleNews(e) {
-      this.newsTitle = e.target.dataset.title
+      this.planTitle = e.target.dataset.title
       // console.log('newsId', newsId)
-      // this.newsTitle = this.productsType.filter(item => item.id == productTypeId).map(item => item.name)[0]
-      localStorage.setItem('newsTitle', this.newsTitle)
+      // this.planTitle = this.productsType.filter(item => item.id == productTypeId).map(item => item.name)[0]
+      localStorage.setItem('planTitle', this.planTitle)
     },
 
     handleClick(e) {
       const title = e.target.dataset.title
       if (title == '应用方案') {
-        this.newsTitle = ''
-        localStorage.removeItem('newsTitle')
+        this.planTitle = ''
+        localStorage.removeItem('planTitle')
       }
     },
 
     handleToDetail(e) {
-      this.newsTitle = e.target.dataset.title
-      localStorage.setItem('newsTitle', this.newsTitle)
-    },
-
-    getCaseDataList(options) {
-      this.getCaseList(options)
+      this.planTitle = e.target.dataset.title
+      localStorage.setItem('planTitle', this.planTitle)
     },
 
     handleChangePage(curPage) {
       this.curPage = curPage
-      this.getCaseDataList({
+      this.getCaseList({
+        type: 'case',
         limit: 9,
         page: curPage,
         // orderField: 'sort'
@@ -154,11 +152,11 @@ export default {
   },
 
   beforeDestroy() {
-    localStorage.removeItem('newsTitle')
+    localStorage.removeItem('planTitle')
   },
   beforeRouteUpdate(to, from, next) {
     if (to.meta.isDetail) {
-      to.meta.title = this.newsTitle
+      to.meta.title = this.planTitle
     }
     next()
   }

src/views/Business/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="products-yemian">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="bread-container">
+            <b>您当前的位置：</b>
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item v-for="item in breadList" :key="item.path">
+                <router-link :to="item.path" @click.native="handleClick" :data-title="item.meta.title">{{ item.meta.title }}</router-link>
+              </el-breadcrumb-item>
+              <el-breadcrumb-item v-if="businessTitle && !$route.meta.isDetail">
+                <span class="nav-title">{{businessTitle}}</span>
+              </el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+          <div class="row" v-if="!$route.meta.isDetail" style="margin-top: 10px;">
+            <div v-if="caseList.total==0"><el-empty :image-size="200"></el-empty></div>
+            <div v-else>
+              <div class="col-md-4 col-sm-6 col-xs-12" v-for="item in caseList.list" :key="item.ptsid" style="margin-bottom: 20px;">
+                <el-card :body-style="{ padding: '0px' }" shadow="never">
+                  <router-link :to="`/business/detail/${item.ptsid}`" class="products-border">
+                    <img :src="item.thumbnail" loading="lazy" :data-src="item.thumbnail" alt="" @click="handleToDetail" :data-title="item.title">
+                  </router-link>
+                  <div style="padding: 14px;">
+                    <strong class="public-title">{{item.title}}</strong>
+                    <div class="bottom clearfix">
+                      <p class="public-time"></p>
+                      <p>
+                        <router-link :to="`/business/detail/${item.ptsid}`">
+                          <span @click="handleToDetail" :data-title="item.title" class="products-aniu">查看详情 <i class="fa fa-angle-right"></i></span>
+                        </router-link>
+                      </p>
+                    </div>
+                  </div>
+                </el-card>
+              </div>
+            </div>
+          </div>
+          <div class="row" v-else style="margin-top: 10px;">
+            <router-view :key="$route.fullPath"></router-view>
+          </div>
+          <div class="footer-pagination" v-if="!$route.meta.isDetail">
+            <el-pagination
+              background
+              hide-on-single-page
+              layout="total, prev, pager, next"
+              :page-size="9"
+              :total="caseList.total"
+              :current-page="curPage"
+              @current-change="handleChangePage"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  data() {
+    return {
+      businessTitle: '',
+      curPage: 1
+    }
+  },
+
+  computed: {
+    ...mapGetters([
+      'caseList',
+    ]),
+
+    breadList() {
+      const matche = this.$route.matched
+      matche[0].path = '/'
+      const length = matche.length
+      if (length > 2) {
+        matche[length-1].path = ''
+        matche[length-1].meta.title = this.businessTitle
+      }
+      return matche
+    }
+  },
+
+  created() {
+    const businessTitle = localStorage.getItem('bizTitle')
+    if (businessTitle) this.businessTitle = businessTitle
+  },
+
+  mounted() {
+    this.getCaseList({
+      limit: 9,
+      type: 'biz'
+    })
+  },
+
+  methods: {
+    ...mapActions({
+      getCaseList: 'cases/getCaseLists',
+    }),
+
+    handleNews(e) {
+      this.businessTitle = e.target.dataset.title
+      // console.log('newsId', newsId)
+      // this.businessTitle = this.productsType.filter(item => item.id == productTypeId).map(item => item.name)[0]
+      localStorage.setItem('bizTitle', this.businessTitle)
+    },
+
+    handleClick(e) {
+      const title = e.target.dataset.title
+      if (title == '核心业务') {
+        this.businessTitle = ''
+        localStorage.removeItem('bizTitle')
+      }
+    },
+
+    handleToDetail(e) {
+      this.businessTitle = e.target.dataset.title
+      localStorage.setItem('bizTitle', this.businessTitle)
+    },
+
+    handleChangePage(curPage) {
+      this.curPage = curPage
+      this.getCaseList({
+        type: 'biz',
+        limit: 9,
+        page: curPage
+      })
+    }
+  },
+
+  beforeDestroy() {
+    localStorage.removeItem('bizTitle')
+  },
+  beforeRouteUpdate(to, from, next) {
+    if (to.meta.isDetail) {
+      to.meta.title = this.businessTitle
+    }
+    next()
+  }
+}
+</script>
+
+<style scoped>
+.news-left li {
+  display: flex;
+}
+
+.news-left li a {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
+  padding-left: 5px !important;
+}
+
+.bread-container {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  border-bottom: 1px solid #dadada;
+}
+
+.bread-container .nav-title {
+  font-weight: 600;
+  color: #3884c0;
+}
+
+.bread-container .nav-title:hover {
+  color: #333;
+  /* border-bottom: 1px solid #084587; */
+}
+
+.el-breadcrumb__item {
+  display: flex;
+}
+
+.el-breadcrumb__item:last-child a {
+  font-weight: 600;
+  color: #3884c0;
+}
+
+a {
+  outline: none;
+}
+
+.footer-pagination {
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
+  background-color: #3884c0;
+}
+
+.bottom .public-time {
+  color: #666;
+  margin-bottom: 5px;
+  /* font-size: 12px; */
+}
+</style>

src/views/Home/ComponentCustom.vue

@@ -104,29 +104,29 @@
     <!--核心业务，合作伙伴，招商加盟-->
     <div class="join">
       <div class="container">
-        <div class="row">
-          <div class="col-md-6 col-xs-12">
-            <div class="row">
-              <h5>
-                <a>合作伙伴</a>
-              </h5>
-              <div class="col-md-6 col-sm-6 col-xs-12">
-                <span><a>北斗天云</a></span>
-                <img src="@/assets/images/logo-small.png" alt="" />
-                <time>
-                  北斗天云是一家集研发生产、数据集成、运营服务于一体的高端北斗企业。
-                </time>
-                <p> <a class="joina">更多</a></p>
-              </div>
-              <div class="col-md-6  col-sm-6 col-xs-12">
-                <span><a>北斗天云</a></span>
-                <img src="@/assets/images/logo-small.png" alt="" />
-                <time>
-                  北斗天云是一家集研发生产、数据集成、运营服务于一体的高端北斗企业。
-                </time>
-                <p> <a class="joina">更多</a></p>
-              </div>
-            </div>
+        <h2 class="text-center centera">
+          <router-link to="/business">核心业务</router-link>
+        </h2>
+        <div class="row" @click.capture="handleSetBusinessTitle">
+          <div class="col-md-3" v-for="item in caseList.list" :key="item.ptsid">
+            <router-link :to="{name: 'business-detail', params: {id: item.ptsid}}">
+              <img class="img-xz" :src="item.thumbnail" :data-src="item.thumbnail" alt="" :data-title="item.title" />
+            </router-link>
+            <h4 class="text-left">
+              <router-link :to="{name: 'business-detail', params: {id: item.ptsid}}">
+                <el-tooltip class="item" effect="dark" :content="item.title" placement="top" :open-delay="500" :enterable="false">
+                  <p class="title-ell biza" :data-title="item.title">{{item.title}}</p>
+                </el-tooltip>
+              </router-link>
+            </h4>
+            <p class="cen">
+              <router-link class="joina" :to="{name: 'business-detail', params: {id: item.ptsid}}" :data-title="item.title">
+                了解详情
+              </router-link>
+            </p>
+          </div>
+        </div>
+        <!-- <div class="row">
           </div>
           <div class="col-md-6 col-xs-12">
             <div class="row">
@@ -161,7 +161,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="news"><!--公司新闻动态介绍-->
@@ -181,9 +181,6 @@
                 </el-tooltip>
               </router-link>
             </h4>
-            <!-- <p>
-              小空间也能增大一倍变身大空间？10个方法告诉你怎么做，看下面装修设计师们的实用设计技巧吧。又是一年春节时期，相亲结婚也是集中在了这几天，但是没有车没有房怎么可以呢？所以，就算手头不宽裕的单身男青年，也都会考虑一套小户型。这种迫于无奈的选择是没有办法...
-            </p> -->
             <p class="cen">
               <router-link class="tanniu newsa" :to="{name: 'news-detail', params: {id: item.ptsid}}" :data-title="item.title">
                 了解详情
@@ -242,7 +239,8 @@ export default {
   computed: {
     ...mapGetters([
       'homeTypeList',
-      'newsList'
+      'newsList',
+      'caseList'
     ])
   },
 
@@ -252,9 +250,15 @@ export default {
       orderField: 'sort'
     })
 
+    this.getCaseList({
+      limit: 4,
+      type: 'biz'
+    })
+
     this.getNewsList({
       limit: 4
     })
+
     $(".products #productsTab div a").hover(
       function () {
         $(this).find("img").stop().animate({ "opacity": "1" }, 700)
@@ -276,6 +280,7 @@ export default {
       setNavPath: 'app/setNavPath',
       getHomeCniyvTypeList: 'cniyv/getHomeCniyvTypeList',
       getNewsList: 'news/getNewsLists',
+      getCaseList: 'cases/getCaseLists'
     }),
 
     handleToProducts(e) {
@@ -292,7 +297,14 @@ export default {
       localStorage.setItem('menuPath', '/news')
       localStorage.setItem('newsTitle', activeTitle)
       this.setNavPath('/news')
-    }
+    },
+
+    handleSetBusinessTitle(e) {
+      const activeTitle = e.target.dataset.title
+      localStorage.setItem('menuPath', '/business')
+      localStorage.setItem('bizTitle', activeTitle)
+      this.setNavPath('/business')
+    },
   }
 }
 </script>
@@ -352,6 +364,20 @@ export default {
   color: #fff;
 }
 
+h2 {
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.centera a {
+  color: #e6e6e6;
+}
+
+.joina {
+  margin: 0;
+}
+
 .text-left a {
   overflow: hidden;
   white-space: nowrap;
@@ -359,6 +385,7 @@ export default {
   display: inline-block;
   width: 100%;
   padding-left: 5px !important;
+  font-size: 14px;
 }
 
 .video-top {
@@ -402,6 +429,10 @@ export default {
   }
 }
 
+.biza {
+  color: #e6e6e6;
+}
+
 .title-ell {
   overflow: hidden;
   white-space: nowrap;

src/views/ProductDetail/index.vue

@@ -128,8 +128,13 @@ export default {
 
 <style scoped>
 .swiperTop img {
-  height: auto;
+  /* height: auto; */
   width: auto;
+  object-fit: contain;
+}
+
+.swiperTop .swiper-slide {
+  text-align: center;
 }
 
 .swiperThumbs-container {

src/views/Products/index.vue

@@ -235,6 +235,10 @@ export default {
   display: flex;
 }
 
+.products-border img {
+  object-fit: contain;
+}
+
 .el-breadcrumb__item:last-child a {
   font-weight: 600;
   color: #3884c0;

src/views/PublicDetail/index.vue

@@ -27,7 +27,7 @@
       </div>
     </div>
   </div> -->
-  <div class="row" style="margin-top: 10px;">
+  <div class="row" style="margin: 10px 0 0;">
     <div class="col-md-24 content">
       <div class="content-news" v-html="toHtml(bannerDetail.content)"></div>
       <div class="content-news" v-html="toHtml(bannerDetail.content1)"></div>