静态排版+对接

about/index.html

@@ -46,7 +46,7 @@
                                 <ul v-if="columnList" >
                                     <li  v-for="item in columnList" :key="item.id"  :class="
                                     currentPath==item.sname? 'active':''" >
-                                        <a :href="item.sname">{{item.categoryName}}</a>
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
                                         <ul class="submenu" >
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
@@ -55,7 +55,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>
@@ -73,8 +73,17 @@
 
 
         <!--====== ABOUT INTRODUCE START======-->
-        <section class="about-introduce-section pt-40 pb-60">
+        <section class="about-introduce-section pt-40 pb-60 about-sec">
+            
             <div class="container">
+                <!-- <ul  class="aboutTyes" >
+                    <li class="active">公司介绍</li>
+                    <li>企业文化</li>
+                    <li>公司介绍</li>
+                    <li>企业文化</li>
+                    <li>公司介绍</li>
+                    <li>企业文化</li>
+                </ul> -->
                 <div class="section-title text-center both-border pb-20">
                     <span class="title-tag">企业简介</span>
                 </div>
@@ -87,7 +96,7 @@
         <!--====== ABOUT INTRODUCE END======-->
 
         <!--====== HISTORY START======-->
-        <section class="history-section pt-60 pb-60">
+        <section class="history-section pt-60 pb-60 about-sec">
             <div class="section-title text-center both-border pb-20">
                 <span class="title-tag">企业优势</span>
             </div>
@@ -110,7 +119,7 @@
         <!--====== HISTORY END======-->
 
         <!--====== COURSE START======-->
-        <section class="course-section pt-60 pb-80">
+        <section class="course-section pt-60 pb-80 about-sec">
             <div class="container">
                 <div class="section-title text-center both-border pb-30">
                     <span class="title-tag">发展历程</span>
@@ -125,7 +134,7 @@
         <!--====== COURSE END======-->
 
         <!--====== credential START======-->
-        <section class="history-section pt-60 pb-60">
+        <section class="history-section pt-60 pb-60 about-sec">
 
             <div class="container">
                 <div class="section-title text-center both-border pb-20">
@@ -186,13 +195,13 @@
         <!--====== credential END======-->
 
         <!--====== SUB COMPANY START======-->
-        <section class="about-sub-company-section pt-60 pb-60">
+        <section class="about-sub-company-section pt-60 pb-60 about-sec">
             <div class="container">
                 <div class="section-title text-center both-border pb-40">
                     <span class="title-tag">联系我们</span>
                 </div>
                 <div class="row bg-white about-shadow aboutContent">
-                    <div class="col-md-7 pr-40 aboutImg">
+                    <div class="col-md-7 pr-40 aboutImg " id="allmap">
                         <img src="../assets/img/about/baidu.jpg" alt="">
                     </div>
                     <div class="col-md-5 aboutcotn">
@@ -266,6 +275,8 @@
     <!--====== Vue js======-->
     <script src="../assets/js/vue.min.js"></script>
     <script src="../assets/js/commonVue.js"></script>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iXlsFGT8ySqgKzSZtjzSvLMpF0OxuCXS&servic
+es=true"></script>
 
     <script language="javascript">
         $(function() {
@@ -320,6 +331,71 @@
             };
         }, 1000)
     </script>
+
+
+<script type="text/javascript">
+    //百度地图api
+    $(function () {
+    // 百度地图API功能
+    var map = new BMap.Map("allmap", { enableMapClick: false });
+    var point = new BMap.Point("121.25186","31.179117");
+    var point2 = new BMap.Point("121.25186","31.179917");  //???
+    map.centerAndZoom(point2, 15);
+    var marker = new BMap.Marker(point);  // 创建标注
+    map.addOverlay(marker);               // 将标注添加到地图中
+    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
+
+    //map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
+    map.disableScrollWheelZoom();     //禁止鼠标滚轮缩放
+
+    map.setZoom(20);
+
+    
+
+
+   
+
+
+
+  
+    
+    // 添加带有定位的导航控件
+    var navigationControl = new BMap.NavigationControl({
+    // 靠左上角位置
+    anchor: BMAP_ANCHOR_TOP_RIGHT,
+    // LARGE类型
+    type: BMAP_NAVIGATION_CONTROL_LARGE,
+    // 启用显示定位
+    enableGeolocation: true
+    
+    });
+    map.addControl(navigationControl);
+    // 添加定位控件
+    var geolocationControl = new BMap.GeolocationControl();
+    geolocationControl.addEventListener("locationSuccess", function (e) {
+    // 定位成功事件
+    var address = '';
+    address += e.addressComponent.province;
+    address += e.addressComponent.city;
+    address += e.addressComponent.district;
+    address += e.addressComponent.street;
+    address += e.addressComponent.streetNumber;
+    //alert("当前定位地址为：" + address);
+    });
+    geolocationControl.addEventListener("locationError", function (e) {
+    // 定位失败事件
+    alert(e.message);
+    });
+    map.addControl(geolocationControl);
+    
+    if ($(window).width() < 750) {
+    map.disableDragging();     //禁止拖拽
+    }
+    
+    
+    })
+    </script>
+
   
 
 </body>

assets/css/style.css

@@ -4047,7 +4047,7 @@
                 margin-left: 0;
             }
             
-            .product-grid-section .grid-filter ul a {
+            .product-grid-section ul a {
                 display: inline-block;
                 height: 60px;
                 position: relative;
@@ -4061,17 +4061,17 @@
                 padding-bottom: 0px;
             }
             
-            .product-grid-section .grid-filter ul a {
+            .product-grid-section ul a {
                 padding-left: 0;
                 padding-right: 10px;
             }
             
-            .product-grid-section .grid-filter ul a {
+            .product-grid-section ul a {
                 padding-right: 0px;
                 padding-left: 10px;
             }
             
-            .product-grid-section .grid-filter ul a {
+            .product-grid-section ul a {
                 width: 10%;
                 height: 100%;
                 display: -ms-flexbox;
@@ -4089,58 +4089,58 @@
                 margin: 0 10px;
             }
             
-            .product-grid-section .grid-filter ul a.active,
-            .product-grid-section .grid-filter ul a:hover {
+            .product-grid-section ul a.active,
+            .product-grid-section ul a:hover {
                 background-color: rgba(99, 155, 255, 1);
                 color: white;
                 cursor: pointer;
             }
             
-            .product-grid-section .grid-filter ul a.active {
+            .product-grid-section ul a.active {
                 color: #fff;
             }
             
-            .product-grid-section .grid-filter ul a:hover {
+            .product-grid-section ul a:hover {
                 background-color: rgba(99, 155, 255, 1);
                 color: white !important;
                 cursor: pointer;
             }
             
             @media (min-width: 1200px) {
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     padding: 0px 18.3px;
                 }
             }
             
             @media (max-width: 1200px) {
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     width: 14.28571428571429%;
                 }
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     padding: 0px 0px;
                 }
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     text-align: center;
                 }
             }
             
             @media (max-width: 999px) {
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     width: 24.999999%;
                     margin-top: 2px;
                 }
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     padding-left: 10px;
                     padding-right: 10px;
                 }
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     padding-left: 10px;
                     padding-right: 10px;
                 }
             }
             
             @media (max-width: 575px) {
-                .product-grid-section .grid-filter ul a {
+                .product-grid-section ul a {
                     width: 49.99999%;
                     margin-top: 2px;
                 }
@@ -4982,9 +4982,35 @@
                 background-color: #f6f6fe;
             }
             /*===========================
-	About Page 
-===========================*/
-            
+                About Page 
+            ===========================*/
+            /* .about-sec .container{
+                position: relative;
+                left: 150px;
+                max-width: 1270px;
+                
+
+
+            }     
+            .about-sec .container .aboutTyes{
+                position:absolute;
+                left:-180px;
+                box-shadow: 0px 2px 17px 4px rgba(126, 126, 126, 0.3);
+            }
+            .about-sec .container .aboutTyes li{
+                padding:17px 50px;
+                border-bottom:1px solid rgba(0,0,0,.05);
+                cursor:pointer;
+                
+            }
+            .about-sec .container .aboutTyes li.active,.about-sec .container .aboutTyes li:hover{
+                background:#409EFF;
+                color:#fff
+
+            } */
+
+
+
             .about-introduce-section {
                 position: relative;
             }
@@ -5489,7 +5515,16 @@
                 text-overflow: ellipsis;
                 max-width: 380px;
                 display: block;
+                
+
+                
+            }
+
+            .line-clamp-4 {
+               
             }
+
+            
             /* 面包屑 */
             
             .crumbs li {
@@ -6250,12 +6285,24 @@
             .newItemOne .oneInnerBox .img {
                 height: 200px
             }
+
             
             .oneInnerBox span {
                 color: #666;
                 margin-top: 30px;
                 font-size: 14px;
             }
+            .productItemOne {
+                text-align:center
+             }
+            .productItemOne  .img{
+                width: 76%;
+                margin:0 auto
+            }
+            .productItemOne  .oneInnerBox{
+                padding:40px
+            }
+
             
             .page-des2 {
                 position: absolute;

assets/js/commonVue.js

@@ -38,10 +38,10 @@ var app = new Vue({
     array: [], 
 
 
-    // 新聞
+    // 新闻
     news: [],
     goPage: 1,
-    one_page_size: 3,
+    one_page_size: 9,
     currentPageNum: 1,
     totalPageNum: 1,
     totalPageSzie: 4,
@@ -55,23 +55,6 @@ var app = new Vue({
     ariticle_id: 0,
 
 
-    // 产品服务旧
-    viweState: false,
-
-    getProductType: [],
-    getProductList: [],
-    details: {},
-
-    tabs: 0,
-    tabsId: '',
-    banner: undefined,
-    item: undefined
-
-
-    
-    
-
-
 
   },
   computed: {
@@ -99,23 +82,6 @@ var app = new Vue({
 
     this.getColumnData()
 
-    this.getProductTypeAjax()
-    if (JSON.stringify(JSON.parse(localStorage.getItem("item")).children) != "[]") {
-        this.banner = JSON.parse(localStorage.getItem("item")).imagePath
-        console.log('this.banner')
-        console.log(this.banner)
-        if (window.location.search) {
-            if (window.location.search.indexOf("detailId") > -1) {
-                this.detailsData(this.getString('detailId')[2])
-            }
-            if (window.location.search.indexOf("id") > -1) {
-                this.getList(this.getString('id')[2])
-            }
-        } else {
-            this.getList()
-                                  }
-                        }
-
 
 
   },
@@ -123,6 +89,7 @@ var app = new Vue({
 
     //获取栏目
     getColumnData() {
+      this.columnTypes= []
       $.ajax({
         type: 'get',
         dataType: 'json',
@@ -149,12 +116,17 @@ var app = new Vue({
 
                 }).fail(function (err) {});
           }
+          if (res.data[i].categoryName == '产品服务'&& window.location.pathname=='/product/read.html') {
+
+            _this.currentPath='/product/index.html'  //新闻详情时栏目高亮
+          }
 
           if (res.data[i].categoryName == '新闻动态'&& window.location.pathname=='/news/read.html') {
 
             _this.currentPath='/news/index.html'  //新闻详情时栏目高亮
 
             console.log(res.data[i].categoryName)
+
             //新闻详情旧
               jQuery.ajax({
                 type: 'POST',
@@ -182,6 +154,12 @@ var app = new Vue({
               }).fail(function(err) {});
           }
           if (res.data[i].categoryName == '关于永天'&& window.location.pathname.indexOf('about')>-1) {
+
+            _this.columnTypes = res.data[i].children
+            // _this.id =  _this.columnTypes[0].id;
+            _this.getArticalData( _this.getQuery('id'))
+
+
             //关于永天旧
               $.ajax({
                 type: 'POST',
@@ -198,8 +176,8 @@ var app = new Vue({
           if (res.data[i].children.length > 0) {
             if (res.data[i].categoryName == '解决方案'&& window.location.pathname.indexOf('solution')>-1) {
               _this.columnTypes = res.data[i].children
-              _this.id = _this.getQuery('id') ? _this.getQuery('id') : _this.columnTypes[0].id;
-              _this.getArticalData(_this.id ? _this.id : _this.columnTypes[0].id)
+              _this.id =  _this.columnTypes[0].id;
+              _this.getArticalData(_this.id)
 
               //解决方案旧
               $.ajax({
@@ -216,8 +194,13 @@ var app = new Vue({
             }
             if (res.data[i].categoryName == '新闻动态'&& window.location.pathname.indexOf('news')>-1) {
               _this.columnTypes = res.data[i].children
-              _this.id = _this.getQuery('id') ? _this.getQuery('id') : _this.columnTypes[0].id;
-              _this.getArticalData(_this.id ? _this.id : _this.columnTypes[0].id)
+              _this.id = _this.columnTypes[0].id;
+              _this.getArticalData(_this.id)
+            }
+            if (res.data[i].categoryName == '产品服务'&& window.location.pathname.indexOf('product')>-1) {
+              _this.columnTypes = res.data[i].children
+              _this.id = _this.columnTypes[0].id;
+              _this.getArticalData(_this.id)
             }
           }
         }
@@ -259,118 +242,6 @@ var app = new Vue({
     },
 
 
-    // 产品服务旧
-    getString(key) {
-          //  获取地址栏的参数
-          var url = window.location.search;
-          //正则表达式筛选
-          var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
-          //匹配参数
-          var result = url.substr(1).match(reg);
-          return result
-      },
-      /** 获取分类 */
-      getList(id) {
-          let _this = this
-          _this.tabs = id
-          _this.tabsId = id
-          let path = JSON.parse(localStorage.getItem("item")).sname
-          let data = JSON.parse(localStorage.getItem("item")).children
-
-          for (let i = 0; i < data.length; i++) {
-              if (id == data[i].id) {
-                  var li = $(`
-                          <a class="active" href=?id=${data[i].id}>
-                              ${data[i].categoryName}
-                          </a>
-                      
-                  `)
-                  $('.tabs_selected a').siblings().removeClass('active')
-                  $('#' + id).addClass('active')
-              } else {
-                  var li = $(`
-                      <a href=?id=${data[i].id}>${data[i].categoryName}</a>
-                  `)
-              }
-              // $(".grid-filter>ul").append(li)
-          }
-          if (!id) {
-              let li = $(`<a class="active" href="index.html">全部</a>`)
-              $(".grid-filter>ul").prepend(li)
-              _this.getListData(_this.tabsId, 1, _this.one_page_size)
-          } else {
-              let li = $(`<a href="index.html">全部</a>`)
-              _this.getListData(id, 1, _this.one_page_size)
-              $(".grid-filter>ul").prepend(li)
-          }
-      },
-      /** 获取分类下数据 */
-      getListData(id = undefined, page, size) {
-          let _this = this
-          jQuery.ajax({
-              type: 'get',
-              dataType: 'json',
-              url: window.FQDN2 + 'siteArticle/siteArticleList',
-              data: {
-                  categoryid: id,
-                  pageNum: page,
-                  pageSize: size,
-
-              }
-          }).done(function(res) {
-              _this.getProductList = res.data.records
-              _this.totalPageNum = Math.ceil((res.data.total / res.data.size))
-              _this.totalPageSzie = res.data.total
-              _this.currentPageNum = res.data.current
-              if (res.data.records.length > 0) {
-                  _this.loading = false
-              } else {
-                  _this.loading = true
-              }
-
-          }).fail(function(err) {});
-      },
-      /** 获取数据详情 */
-      productDetails(data) {
-          if (data) {
-              localStorage.setItem("productDetail", JSON.stringify(data))
-              window.location = `?detailId=${data.id}`
-          } else {
-              window.history.go(-1)
-              setTimeout(() => {
-                  localStorage.removeItem("productDetail")
-              }, 1000)
-          }
-
-      },
-      detailsData(id) {
-          let data = JSON.parse(localStorage.getItem("productDetail"))
-          if (data.id == id) {
-              this.details = data
-              this.viweState = true
-          }
-
-      },
-      CloseDetail(){
-          this.viweState=false;
-          window.history.replace(-1)
-          location.replace(location.href);
-      },
-      getProductTypeAjax() {
-          var _this = this;
-          jQuery.ajax({
-              type: 'POST',
-              dataType: 'json',
-              url: window.FQDN2 + 'Product/getProductType',
-          }).done(function(res) {
-                                          _this.getProductType = res
-
-          }).fail(function(err) {});
-      },
-
-    //end
-
-
   //  分页
     oneInnerBox: function(param) {
         window.location = "./read.html?id=" + param.categoryid+'&title='+param.title;
@@ -380,7 +251,7 @@ var app = new Vue({
     enterPage: function(res) {
         if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
             this.currentPageNum = this.goPage
-            this.getArticalData(this.id ? this.id : this.columnTypes[0].id)
+            this.getArticalData(this.id )
         } else {
             this.goPage = 1
             alert('输入页数有误！')
@@ -388,7 +259,7 @@ var app = new Vue({
     },
     currentChange: function(res) {
         this.currentPageNum = res
-        this.getArticalData(this.id ? this.id : this.columnTypes[0].id)
+        this.getArticalData(this.id)
     },
 
 
@@ -411,7 +282,7 @@ var app = new Vue({
 
      //获得年月日时分秒
         //传入日期//例：2020-10-27T14:36:23
-         timeFormatSeconds(time) {
+      timeFormatSeconds(time) {
           var d = time ? new Date(time) : new Date();
           var year = d.getFullYear();
           var month = d.getMonth() + 1;
@@ -427,7 +298,7 @@ var app = new Vue({
           if (seconds < 10) seconds = '0' + seconds;
 
           return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
-  }
+      }
 
 
 

index.html

@@ -62,7 +62,7 @@
             <img src="assets/img/home/f_top.png" alt="">
         </div>
     </div>
-    <el-dialog title="项目咨询" :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
+    <el-dialog title="项目咨询" style="display:none" :style="{display:(centerDialogVisible?'block':'none')}"  :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
             <el-form-item label="" prop="platName">
                 <el-radio-group v-model="ruleForm.platName">
@@ -102,7 +102,7 @@
         </el-form>
 
         <!-- <span>需要注意的是内容是默认不居中的</span> -->
-        <span slot="footer" class="dialog-footer">
+        <span slot="footer" class="dialog-footer" >
             <el-button @click="resetForm('ruleForm')">取 消</el-button>
             <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
         </span>
@@ -126,7 +126,7 @@
                                 <ul v-if="columnList" >
                                     <li  v-for="item in columnList" :key="item.id"  :class="
                                     currentPath==item.sname? 'active':''" >
-                                        <a :href="item.sname">{{item.categoryName}}</a>
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
                                         <ul class="submenu" >
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
@@ -135,7 +135,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>

news/index.html

@@ -40,24 +40,21 @@
                     </div>
                     <div class="d-flex align-items-center ">
                         <nav class="main-menu">
-
+                           
                             <div class="menu-items">
-                                <ul v-if="columnList">
-                                    <li v-for="item in columnList" :key="item.id" :class="
-                                    currentPath==item.sname? 'active':''">
-                                        <a :href="item.sname">{{item.categoryName}}</a>
-                                        <ul class="submenu">
-                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a
-                                                    :href="`${item.sname}?id=${aa.id}`"> <span
-                                                        style="font-weight:bold;margin-right:10px">·</span>
-                                                    {{aa.sname}}</a></li>
+                                <ul v-if="columnList" >
+                                    <li  v-for="item in columnList" :key="item.id"  :class="
+                                    currentPath==item.sname? 'active':''" >
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
+                                        <ul class="submenu" >
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
                                     </li>
-
+                                  
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre">申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>

news/read.html

@@ -47,7 +47,7 @@
                                 <ul v-if="columnList" >
                                     <li  v-for="item in columnList" :key="item.id"  :class="
                                     currentPath==item.sname? 'active':''" >
-                                        <a :href="item.sname">{{item.categoryName}}</a>
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
                                         <ul class="submenu" >
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
@@ -56,7 +56,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>

product/index-202202101606.html

@@ -1,833 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <meta name=renderer content=webkit>
-    <meta name=renderer content=ie-comp>
-    <meta name=renderer content=ie-stand>
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <link rel="icon" href="../assets/img/favicon.ico">
-    <title>核心产品</title>
-
-    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
-    <!--====== Mean Menu ======-->
-    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
-    <!--====== Default css ======-->
-    <link rel="stylesheet" href="../assets/css/default.css" />
-    <!--====== Style css ======-->
-    <link rel="stylesheet" href="../assets/css/style.css" />
-    <!--====== Animation css =======-->
-    <link rel="stylesheet" href="../assets/css/animation.css" />
-    <!--====== home css ====== -->
-    <link rel="stylesheet" href="../assets/css/home.css" />
-    <!--====== index css ====== -->
-    <link rel="stylesheet" href="./css/index.css" />
-</head>
-
-<body>
-    <!--[if lte IE 9]>
-	  <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
-  <![endif]-->
-    <div id="app">
-        <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
-            <div class="custom-container-one">
-                <div class="header-top-area">
-                    <div class="container align-items-center">
-                        <!-- <div class="col-md-6 col-sm-7">
-                                <ul class="contact-list">
-                                    <li>
-                                        <a href="javascipt:void();">www.chinausky.com</a>
-                                    </li>
-                                    <li>
-                                        <a href="javascipt:void();">400 633 8668</a>
-                                    </li>
-                                </ul>
-                            </div> -->
-                    </div>
-                </div>
-                <div class="mainmenu-area container">
-                    <div class="d-flex align-items-center justify-content-between">
-                        <nav class="main-menu">
-                            <div class="logo">
-                                <a href="../index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
-                            </div>
-                            <div class="menu-items">
-                                <ul>
-                                    <li>
-                                        <a href="../index.html">首页</a>
-                                    </li>
-                                    <li>
-                                        <a href="../solution/index.html?solution_type=1">解决方案</a>
-                                        <ul class="submenu">
-                                            <li><a href="../solution/index.html?solution_type=1">智慧安防</a></li>
-                                            <li><a href="../solution/index.html?solution_type=2">智慧消防</a></li>
-                                            <li><a href="../solution/index.html?solution_type=3">智慧建筑能源管理</a></li>
-                                            <li><a href="../solution/index.html?solution_type=4">智慧电力综合管理</a></li>
-                                            <li><a href="../solution/index.html?solution_type=5">智慧园区无人机综合管理</a></li>
-                                            <li><a href="../solution/index.html?solution_type=6">智慧楼宇综合运营</a></li>
-                                        </ul>
-                                    </li>
-                                    <li class="active">
-                                        <a href="#">产品服务</a>
-                                    </li>
-                                    <li>
-                                        <a href="../technology/index.html">技术支撑</a>
-                                    </li>
-                                    <li>
-                                        <a href="../news">新闻动态</a>
-                                        <!-- <ul class="submenu">
-                                            <li><a href="../news">公司新闻</a></li>
-                                            <li><a href="../news/trade/index.html">行业动态</a></li>
-                                        </ul> -->
-                                    </li>
-                                    <li>
-                                        <a href="../about">关于我们</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </nav>
-                    </div>
-                </div>
-                <div>
-                    <div class="mobile-menu"></div>
-                </div>
-            </div>
-        </header>
-        <!--====== HEADER END ======-->
-
-        <!--====== COMMON BREADCRUMB START ======-->
-        <section class="common-bradcrumb-section">
-            <img src="../assets/img/product/bg.png" alt="">
-        </section>
-        <!--====== COMMON BREADCRUMB END ======-->
-
-        <!--====== PRODUCT GRID START======-->
-        <section class="product-grid-section pt-20 pb-60" v-show="!viweState">
-            <div class="container">
-                <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
-                    <span class="title-tag2">产品类别</span>
-                </div>
-                <div class="row row-tabs" style="padding: 0px 20px;">
-                    <div class="col-lg-12">
-                        <div class="grid-filter">
-                            <ul class="row cannot_selected">
-                                <li data-filter="*" class="active">
-                                    <div><span>全部</span></div>
-                                </li>
-                                <li data-filter=".software">
-                                    <div><span>智慧安防</span></div>
-                                </li>
-                                <li data-filter=".hardware">
-                                    <div><span>智慧消防</span></div>
-                                </li>
-                                <li data-filter=".water-system">
-                                    <div><span>智慧建筑能源管理</span></div>
-                                </li>
-                                <li data-filter=".securiy-system">
-                                    <div><span>智慧电力综合管理</span></div>
-                                </li>
-                                <li data-filter=".electricity-system">
-                                    <div><span>智慧园区无人机综合服务</span></div>
-                                </li>
-                                <li data-filter=".fire-system">
-                                    <div><span>智慧楼宇综合运营</span></div>
-                                </li>
-                                <!-- <li data-filter=".others-system">
-                                    <div><span>其它</span></div>
-                                </li> -->
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div class="row row-tabs grid-isotope pt-30">
-                    <!-- 1 -->
-                    <!-- <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>智慧消防综合管理软件</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>智慧消防综合管理软件</p>
-                                <p>v 1.0</p>
-                            </a>
-                        </div>
-                    </div> -->
-                    <!-- 2 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <!-- <a @click="productDetails(`${cont}`)"> -->
-                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title">
-                                <span>智慧安防综合管理系统软件</span>
-                                <div>
-                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                    通过什么是系统采用蓝牙定位技术，通过什么是
-                                </div>
-                            </div>
-                        </div>
-                        <!-- </a> -->
-                    </div>
-                    <!-- 3 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title">
-                                <span>智慧园区综合管理系统软件</span>
-                                <div>
-                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                    通过什么是系统采用蓝牙定位技术，通过什么是
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- 4 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title">
-                                <span>永天智慧宝APP</span>
-                                <div>
-                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                    通过什么是系统采用蓝牙定位技术，通过什么是
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- 5 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>智慧用电综合处理单元</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>智慧用电综合处理单元</p>
-                                <p>v 1.0</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 6 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>用水数据采集单元</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>用水数据采集单元</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 7 -->
-                    <div class="col-lg-4 col-sm-6 software hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p01.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>用水数据采集装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>用水数据采集装置</p>
-                                <p>UUWC07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 8 -->
-                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p02.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>紧急（求助）按钮</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>紧急（求助）按钮</p>
-                                <p>UUEH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 9 -->
-                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p03.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>电气火灾探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>电气火灾探测器</p>
-                                <p>UUEF08-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 10 -->
-                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p04.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>智慧用电探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>智慧用电探测器</p>
-                                <p>UUiE08-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 11 -->
-                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p05.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>可燃气体探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>可燃气体探测器</p>
-                                <p>UUGD07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 12 -->
-                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p06.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>火灾探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>火灾探测器</p>
-                                <p>UUFD07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 13 -->
-                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p07.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>门体开启状态探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>门体开启状态探测装置</p>
-                                <p>UUGS07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 14 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p08.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>二次供水探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>二次供水探测装置</p>
-                                <p>UUWT07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 15 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p09.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>二次供水探测装置（含水位告警）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>二次供水探测装置（含水位告警）</p>
-                                <p>UUWTL07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 16 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p10.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>窨井盖探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>窨井盖探测装置</p>
-                                <p>UUIW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 17 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p11.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>窨井盖探测装置（含溢水告警）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>窨井盖探测装置（含溢水告警）</p>
-                                <p>UUIWL07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 18 -->
-                    <div class="col-lg-4 col-sm-6 hardware others-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p12.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防占道探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防占道探测装置</p>
-                                <p>UUFP07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 19 -->
-                    <div class="col-lg-4 col-sm-6 hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p13.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>电梯运行采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>电梯运行采集探测装置</p>
-                                <p>UULC08-0400</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 20 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p14.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 21 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p15.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（室内消火栓）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（室内消火栓）</p>
-                                <p>UUIH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 22 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p16.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（室外消火栓）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（室外消火栓）</p>
-                                <p>UUOH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 23 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p17.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（喷淋水压探测器）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（喷淋水压探测器）</p>
-                                <p>UUPH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 24 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p18.jpg" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（水泵探测装置）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（水泵探测装置）</p>
-                                <p>UUFW07-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 25 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p19.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 26 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p20.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 27 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p21.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质浊度传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质浊度传感器</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 28 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p22.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质电导率测量</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质电导率测量</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 29 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p23.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质PH传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质PH传感器</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 30 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p24.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质余氯传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质余氯传感器</p>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="news-content-section pt-60">
-                    <div class="container">
-                        <div class="row newBox">
-                            <div class="col-lg-12 col-md-12 content" id="app">
-                                <div v-if="!loading" class="page mt-30 mb-30">
-                                    <div class="d-flex justify-content-center align-items-end cannot_selected"
-                                        style="position:relative">
-                                        <div class="page-des align-items-start cannot_selected">共<span> {{
-                                                totalPageNum}}</span>页，共<span> {{ totalPageSzie}}</span>条信息</div>
-
-                                        <a :class="[hasPageTop ? '' : 'disable']" class="previous"
-                                            @click="toPrevious">上一页</a>
-                                        <a v-if="needOmit" :class="[currentPageNum == 1 ? 'active' : '']"
-                                            @click="switchPage(1)">1</a>
-                                        <span v-if="hasLeftOmit">...</span>
-                                        <a v-for="item in middlePageNums" :key="item"
-                                            :class="[item == currentPageNum ? 'active': '']"
-                                            @click="switchPage(item)">{{item}}</a>
-                                        <span v-if="hasRightOmit">...</span>
-                                        <a v-if="needOmit" :class="[currentPageNum == totalPageNum? 'active' : '']"
-                                            @click="switchPage(totalPageNum)">{{totalPageNum}}</a>
-                                        <a :class="[hasPageNext ? '' : 'disable']" @click="toNext" class="next">下一页</a>
-
-                                        <div class="page-des2 align-items-end cannot_selected pc">前往第
-                                            <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
-                                        </div>
-
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-        </section>
-        <!--====== PRODUCT GRID START======-->
-
-        <!--====== PRODUCT GRID START======-->
-        <section id="product-details-section" class="product-details-section pt-20 pb-60" v-if="viweState">
-            <div class="container">
-                <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
-                    <div class="close" @click="productDetails(0)">
-                        <a>
-                            <img src="../assets/img/product/close.png" alt="">
-                        </a>
-                    </div>
-                    <span class="title-tag2">产品详情</span>
-                </div>
-                <div role="tabpanel" class="tab-pane tab-pane-tow active">
-                    <div>
-                        <!-- <div class="close">
-                            <a @click="productDetails(0)">
-                                <img src="../assets/img/product/close.png" alt="">
-                            </a>
-                        </div> -->
-                        <div class="productText">光电感烟火灾探测报警器</div>
-                    </div>
-                    <div class="productContent">
-                        <div>
-                            <img src="../assets/img/product/图层11.png" alt="">
-                        </div>
-                        <div>
-                            <div class="paneConText">
-                                <div class="title">产品特点</div>
-                                <div class="content">
-                                    本产品为独立式光电感烟火灾探测报警器，拥有高可靠性。当报警器感应到烟雾浓度达到报警设定值时，探测器将在现场发出声光报警信号，提醒相关人员立即采取有效措施；基于永天云平台，可启动联动装置，并在永天智慧消防平台上弹出警报详情，辅助消防应急指挥排除险情，可有效避免火灾、爆炸、中毒等恶性事故的发生。
-                                </div>
-                            </div>
-                            <div class="paneConText">
-                                <div class="title">产品参数</div>
-                                <div class="content">
-                                    可用于住宅、酒店、商场、学校、医院、办公楼、厂房、仓库等场所； 传感器：长寿命光电感应器 电源：DC9V 报警方式：声、光报警 报警音量：＞85dB@3m
-                                    无线模块：LoRa/NB-IoT/RPMA/Sigfox/ZigBee 工作温度：0℃~40℃ 工作湿度：≤95% 载波频段：470/850/900MHz等多频段可选
-                                    无线距离：≥100m@空旷环境
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!--====== FOOTER PART START ======-->
-        <div id="footer"></div>
-        <!--====== FOOTER PART END ======-->
-    </div>
-
-
-    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
-    <!--====== Bootstrap js ======-->
-    <script src="../assets/js/bootstrap.min.js"></script>
-    <script src="../assets/js/popper.min.js"></script>
-    <!--====== Isotope js ======-->
-    <script src="../assets/js/isotope.pkgd.min.js"></script>
-    <!--====== Mean Menu ======-->
-    <script src="../assets/js/jquery.meanmenu.min.js"></script>
-    <!--====== Main js ======-->
-    <script src="../assets/js/main.js"></script>
-    <script>
-        $(function () {
-            $('#footer').load("../footer.html");
-        })
-    </script>
-    <!--====== Setting Info js=======-->
-    <script src="../assets/js/settinginfo.js"></script>
-    <!--====== Vue  js ======-->
-    <script src="../assets/js/vue.min.js"></script>
-    <script>
-        var news_list = [];
-        var one_page_num = 4;
-        var app = new Vue({
-            el: '#app',
-            data: {
-                cont: 3,
-                viweState: false,
-                message: 'hello',
-                news: [],
-                goPage: 1,
-                currentPageNum: 1,
-                totalPageNum: 1,
-                totalPageSzie: 4,
-                middlePageNums: [2, 3, 4, 5, 6],
-                needOmit: true,
-                loading: true,
-            },
-            computed: {
-                hasNews: function () {
-                    return this.news.length > 0;
-                },
-                hasLeftOmit: function () {
-                    return (this.currentPageNum > 4 && this.needOmit);
-                },
-                hasRightOmit: function () {
-                    return ((this.middlePageNums[4] + 1) < this.totalPageNum && this.needOmit);
-                },
-                hasPageTop: function () {
-                    return this.currentPageNum > 1;
-                },
-                hasPageNext: function () {
-                    return this.currentPageNum < this.totalPageNum;
-                }
-            },
-            mounted: function () {
-                var self = this;
-                jQuery.ajax({
-                    type: 'POST',
-                    dataType: 'json',
-                    url: window.FQDN + 'agw/journalism_display',
-                    data: {
-                        type: '1'
-                    }
-                }).done(function (res) {
-                    if (!res.msg) {
-                        return;
-                    }
-
-                    res.data.forEach(function (item) {
-                        news_list.push(item);
-                        if (self.news.length < one_page_num) {
-                            self.news.push(item);
-                        }
-                    });
-
-                    self.totalPageNum = Math.ceil(news_list.length / one_page_num);
-                    self.totalPageSzie = news_list.length;
-                    if (self.totalPageNum < 8) {
-                        self.needOmit = false;
-                        self.middlePageNums = [];
-                        for (var i = 1; i <= self.totalPageNum; i++) {
-                            self.middlePageNums.push(i);
-                        }
-                    }
-                    self.loading = false;
-                }).fail(function (err) { });
-            },
-            methods: {
-                productDetails: function (val) {
-                    console.log(val)
-                    this.viweState = !this.viweState
-                    if (val != 0) {
-                        setTimeout(() => {
-                            var dom = document.getElementById('product-details-section');
-                            window.scrollTo(0, dom.offsetTop - 200);
-                        }, 0)
-                        console.log(1)
-                    }
-                },
-                switchPage: function (page_num) {
-                    if (page_num == this.currentPageNum) {
-                        return;
-                    }
-
-                    var start_index = (page_num - 1) * one_page_num;
-                    var limit = start_index + (one_page_num - 1);
-                    var tmp_new = [];
-                    for (var i = start_index; i <= limit; i++) {
-                        if (i < news_list.length) {
-                            tmp_new.push(news_list[i]);
-                        }
-                    }
-                    this.news = tmp_new;
-
-                    if (!this.needOmit) {
-                        this.currentPageNum = page_num;
-                        return;
-                    }
-
-                    if (page_num >= 5 && (page_num + 2) < this.totalPageNum) {
-                        this.middlePageNums = [page_num - 2, page_num - 1, page_num, page_num + 1, page_num + 2];
-                    } else if (page_num < 5) {
-                        this.middlePageNums = [2, 3, 4, 5, 6];
-                    } else if ((page_num + 2) >= this.totalPageNum) {
-                        this.middlePageNums = [this.totalPageNum - 5, this.totalPageNum - 4, this.totalPageNum - 3, this.totalPageNum - 2, this.totalPageNum - 1];
-                    }
-
-                    this.currentPageNum = page_num;
-                },
-                toPrevious: function () {
-                    if (this.currentPageNum == 1) {
-                        return;
-                    }
-                    this.switchPage(this.currentPageNum - 1);
-                },
-                toNext: function () {
-                    if (this.currentPageNum == this.totalPageNum) {
-                        return;
-                    }
-                    this.switchPage(this.currentPageNum + 1);
-                }
-            }
-        })
-    </script>
-</body>
-
-</html>

product/index.html

@@ -10,7 +10,7 @@
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="icon" href="../assets/img/favicon.ico">
-    <title>核心产品</title>
+    <title>产品服务</title>
 
     <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
     <!--====== Mean Menu ======-->
@@ -60,13 +60,9 @@
 	  <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
   <![endif]-->
     <div id="app">
-        <div class="erMenu">
-            <div>
-
-            </div>
-        </div>
-        <!--====== HEADER START ======-->
-        <header class="header-absolute sticky-header">
+        
+         <!--====== HEADER START ======-->
+         <header class="header-absolute sticky-header">
             <div class="custom-container-one">
                 <div class="mainmenu-area container d-flex align-items-center justify-content-center">
                     <div class="logo">
@@ -79,7 +75,7 @@
                                 <ul v-if="columnList" >
                                     <li  v-for="item in columnList" :key="item.id"  :class="
                                     currentPath==item.sname? 'active':''" >
-                                        <a :href="item.sname">{{item.categoryName}}</a>
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
                                         <ul class="submenu" >
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
@@ -88,7 +84,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>
@@ -106,25 +102,34 @@
         <!--====== COMMON BREADCRUMB END ======-->
 
         <!--====== PRODUCT GRID START======-->
-        <section class="product-grid-section pt-20 pb-60" v-show="!viweState">
+        <section class="product-grid-section pt-20 pb-60" >
             <div class="container">
                 <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
                     <span class="title-tag2">产品类别</span>
                 </div>
                 <div class="row row-tabs" style="padding: 0px 20px;">
                     <div class="col-lg-12">
-                        <div class="grid-filter">
+                        <div class="">
                             <ul class="cannot_selected tabs_selected" style="text-align: center;">
-                                <li v-for="(item,ind) in getProductType" :key="ind" @click="getList(item.id)">
+
+
+                          
+                                <a v-for="(item,i) in columnTypes" :class="item.id == id ? 'active' : ''"
+                                @click="facilityClick(i, item)">{{item.categoryName}}</a>
+
+                               
+
+
+                                <!-- <li v-for="(item,ind) in getProductType" :key="ind" @click="getList(item.id)">
                                     <div><span>{{item.categoryName}}</span></div>
-                                </li>
+                                </li> -->
                             </ul>
                         </div>
                     </div>
                 </div>
-                <div class="row row-tabs grid-isotope pt-30" style="min-height:400px">
+                <!-- <div class="row row-tabs grid-isotope pt-30" style="min-height:400px">
                     <div class="col-lg-4 col-sm-6 software" v-for="(list,index) in getProductList" :key="index">
-                        <!-- <div class="product-grid-box" @click="productDetails(list)"> -->
+                        <div class="product-grid-box" @click="productDetails(list)">
                             <div class="product-grid-box">
                             <div class="product-img">
                                 <img :src="list.htmlfilepath" />
@@ -139,7 +144,33 @@
                             </div>
                         </div>
                     </div>
+                </div> -->
+
+                <!-- <div class="row">
+                    <div class="col-md-4 newItemOne" v-for="item in articalArray" :key="item.id">
+                        <div class="oneInnerBox" @click="oneInnerBox(item)">
+                            <div class="img" v-bind:style="{backgroundImage:'url('+item.image+')'}">
+                            </div>
+                            <a class="line-two">{{item.title}}</a>
+                            <span>{{timeFormatSeconds(item.modifydate?item.modifydate:'')}}</span>
+                        </div>
+                    </div>
+                </div> -->
+
+
+                <div class="row pt-80"  >
+                    <div class="col-md-4 newItemOne productItemOne"  v-for="item in articalArray" :key="item.id">
+                        <div class="oneInnerBox" @click="oneInnerBox(item)">
+                            <div class="img" v-bind:style="{backgroundImage:'url('+item.image+')'}" style="background-size: cover;
+                            background-position: center center;">
+                            </div>
+                            <a class="line-two">{{item.title}}</a>
+                            <span class="line-two">{{item.zhaiyao}}</span>
+                        </div>
+                    </div>
                 </div>
+
+
                 <div class="news-content-section pt-60">
                     <div class="container">
                         <div class="row newBox">
@@ -164,24 +195,7 @@
         </section>
         <!--====== PRODUCT GRID START======-->
 
-        <!--====== PRODUCT GRID START======-->
-        <section id="product-details-section" class="product-details-section pt-20 pb-60" v-if="viweState">
-            <div class="container">
-                <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
-                    <div class="close" @click="CloseDetail()">
-                        <a>
-                            <img src="../assets/img/product/close.png" alt="">
-                        </a>
-                    </div>
-                    <span class="title-tag2">产品详情</span>
-                </div>
-                <div role="tabpanel" class="tab-pane tab-pane-tow active">
-                    <div class="productContent" v-html="details.content">
-
-                    </div>
-                </div>
-            </div>
-        </section>
+ 
 
         <!--====== FOOTER PART START ======-->
         <footer>

product/read.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="../assets/img/favicon.ico">
+
+    <title>产品详情</title>
+
+    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="../assets/css/default.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="../assets/css/style.css" />
+    <!--====== Animation css =======-->
+    <link rel="stylesheet" href="../assets/css/animation.css" />
+    <!--====== home css ====== -->
+    <link rel="stylesheet" href="../assets/css/home.css" />
+</head>
+
+<body>
+    <!--[if lte IE 9]>
+	<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+  <![endif]-->
+    <div id="app">
+     
+        <!--====== HEADER START ======-->
+        <header class="header-absolute sticky-header">
+            <div class="custom-container-one">
+                <div class="mainmenu-area container d-flex align-items-center justify-content-center">
+                    <div class="logo">
+                        <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
+                    </div>
+                    <div class="d-flex align-items-center ">
+                        <nav class="main-menu">
+                           
+                            <div class="menu-items">
+                                <ul v-if="columnList" >
+                                    <li  v-for="item in columnList" :key="item.id"  :class="
+                                    currentPath==item.sname? 'active':''" >
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
+                                        <ul class="submenu" >
+                                            <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
+                                        </ul>
+                                    </li>
+                                  
+                                </ul>
+                            </div>
+                        </nav>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </header>
+        <!--====== HEADER END ======-->
+
+        <!--====== PRODUCT BREADCRUMB START ======-->
+        <section class="common-bradcrumb-section">
+            <img src="../assets/img/product/bg.jpg" alt="">
+        </section>
+        
+
+        <!--====== PRODUCT CONTENT START ======-->
+        <section class="product-content-section pt-60">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12 content">
+                        <div v-if="loading" class="pt-60 pb-60">
+                            <div class="loadEffect">
+                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+                            </div>
+                        </div>
+                        <div v-if="!loading" class="read_content pb-100">
+                            <div class="section-title text-left both-border mb-80 d-flex justify-content-between">
+                                <span class="title-tag2" >产品详情</span>
+                                <a href="./index.html"><img src="../assets/img/product/close.png" alt=""></a>
+                            </div>
+                
+                            <div class="row">
+                                 <div class="col-lg-5 col-md-6 ">
+                                    <img :src="articalArray[0].image" alt="" style="width:90%">
+                                 </div>
+                                 <div class=" col-lg-7 col-md-6 " >
+                                    <div class="title-tag2 mb-40" style="font-size:20px">{{articalArray[0].title}}</div>
+                                    <div  v-html="articalArray[0].content"></div>
+                                 </div>
+                            </div>
+                       
+                           
+                        </div>
+                     
+
+                        <!--  -->
+                        <div v-if="!loading" class="read-page d-flex justify-content-between">
+                            
+                           
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!--====== PRODUCT CONTENT END ======-->
+
+        <!--====== FOOTER PART START ======-->
+        <footer>
+            <!-- widgets -->
+            <div class="footer-widget-area">
+                <div class="container">
+                    <div class="row footerOne">
+                        <div class="col-lg-2 col-md-6 col-sm-6 footerWidth">
+                            <div class="copyrigt-or-code d-flex flex-column align-items-center ">
+                                <img width="130 " height="130 " src="https://aiot.usky.cn/uskyq/assets/img/qr_code.png">
+                                <span style="text-align: left;color:#fff;margin-top:10px ">微信公众号</span>
+                            </div>
+                        </div>
+                        <div class="footerNone" style="width:15% !important;" v-for="item in columnList" :key="item.id">
+                            <div class="widget nav-widget d-flex justify-content-center ">
+                                <div >
+                                    <h5 class="widget-title"><a href="/solution/index.html">{{item.categoryName}}</a></h5>
+                                    <ul>
+                                        <li  v-if="item.children"  v-for="r in item.children" :key="r.id">
+                                            <a :href="`${item.sname}?id=${r.id}`"> {{r.sname}}</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- copyright -->
+            <div class="copy-right-area ">
+                <div class="container ">
+                    <div class="row copyrigt-text ">
+                        <div class="col-lg-12 ">
+                            <p>Copyright © 2001- 2022 Usky. All Rights Reserved. 永天股份 版权所有</p>
+                            <p>增值电信业务经营许可证（IDC、ISP）编号B2-20080010</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+        <!--====== FOOTER PART END ======-->
+
+    </div>
+
+    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js"></script>
+    <script src="../assets/css/font_mun4q5ltrbp/iconfont.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js"></script>
+    <!--====== Setting Info js=======-->
+    <script src="../assets/js/settinginfo.js"></script>
+    <!--====== Vue Developer js ======-->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <!--====== Vue  js ======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script src="../assets/js/commonVue.js "></script>
+
+   
+</body>
+
+</html>

solution/index.html

@@ -51,7 +51,7 @@
                                 <ul v-if="columnList" >
                                     <li  v-for="item in columnList" :key="item.id"  :class="
                                     currentPath==item.sname? 'active':''" >
-                                        <a :href="item.sname">{{item.categoryName}}</a>
+                                        <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
                                         <ul class="submenu" >
                                             <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span>   {{aa.sname}}</a></li>
                                         </ul>
@@ -60,7 +60,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="apply-expre" >申请体验</div>
+                        <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
                     </div>
                 </div>
                 <div>