首页对接

assets/js/commonVue.js

@@ -4,7 +4,7 @@ import dialogCom from '/assets/js/component/dialogCom.js'
 import loadingCom from '/assets/js/component/loadingCom.js'
 import headerCom from '/assets/js/component/headerCom.js'
 
-var AboutKeyWrds='';
+var AboutKeyWrds = '';
 
 var app = new Vue({
   el: '#app',
@@ -20,22 +20,21 @@ var app = new Vue({
 
     //公共
     id: null,
-    columnList: [
-    ],
+    columnList: [],
     requestParams: { //内容接口请求参数
       categoryid: 0,
       pageNum: 1,
       pageSize: 9,
       title: '',
-      order:'sortindex',
-      articleid:0,
+      order: 'sortindex',
+      articleid: 0,
     },
     currentPath: '',
     articalArray: [], //详情数组
     articalArrayRelated: [], //相关推荐
     columnTypes: [], //栏目类型
-    colL:0,
-    modelType:1,
+    colL: 0,
+    modelType: 1,
     columnImage: '', //栏目图片
 
     // 公共弹框
@@ -96,85 +95,106 @@ var app = new Vue({
     this.requestParams.articleid = this.getQuery('articleid') ? this.getQuery('articleid') : ''
   },
   mounted: function () {
-     
+
     this.getColumnData()
   },
   methods: {
 
     //获取栏目数据
     getColumnData() {
-      var  _this = this;
-      if(!localStorage.getItem('storeColumnList')||window.location.pathname == '/index.html'||window.location.pathname == '/'){
+      var _this = this;
+      if (!localStorage.getItem('storeColumnList') || window.location.pathname == '/index.html' || window.location.pathname == '/') {
         $.ajax({
           type: 'get',
           dataType: 'json',
           url: window.FQDN2 + 'siteCategory/siteCategoryList',
         }).done(function (res) {
           _this.columnList = res.data;
-          let expires = Date.now() + 1000 * 60* 30 ;  //半小时过期时间
-          localStorage.setItem('storeColumnList', JSON.stringify({data:  _this.columnList, expires}));
-          _this.loading=false
+          let expires = Date.now() + 1000 * 60 * 30; //半小时过期时间
+          localStorage.setItem('storeColumnList', JSON.stringify({
+            data: _this.columnList,
+            expires
+          }));
+          _this.loading = false
           _this.currentPath = window.location.pathname;
           _this.handleColumnData()
         })
-      }else{
+      } else {
         console.log(JSON.parse(localStorage.getItem('storeColumnList')))
         this.loading = false;
-        this.handleColumnData()  
+        this.handleColumnData()
       }
     },
 
 
-    handleColumnData(){
+    handleColumnData() {
       this.currentPath = window.location.pathname;
-      this.columnList=JSON.parse(localStorage.getItem('storeColumnList')).data;
-      console.log( JSON.parse(localStorage.getItem('storeColumnList')))
-      console.log( Date.now())
+      this.columnList = JSON.parse(localStorage.getItem('storeColumnList')).data;
+      this.requestParams.categoryid = this.columnList[0].id
+      console.log(JSON.parse(localStorage.getItem('storeColumnList')))
+      console.log(Date.now())
 
       // 读取并检查是否过期
-     if ( JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
-          localStorage.removeItem('storeColumnList');
+      if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
+        localStorage.removeItem('storeColumnList');
       } else {
-          console.log( this.columnList);
+        console.log(this.columnList);
       }
-     
 
-      var _this=this;
+
+      var _this = this;
+
       for (let i = 0; i < _this.columnList.length; i++) {
 
-        //栏目处理        
-        if (_this.columnList[i].sname == window.location.pathname) { 
+        //栏目处理  
 
-          //进入当前栏目页
+        //进入首页
+        if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/'||window.location.pathname == '')) {
+          getSeoCommon()
 
+          _this.modelType = _this.columnList[0].modelType;
+          _this.columnImage = _this.columnList[0].imagePath;
+          setTimeout(() => {
+            if (_this.modelType == 2) {
+              document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
+              document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
+            }
+          }, 100)
+          _this.getArticalData(_this.requestParams)
+        }
 
+        //进入其他栏目页
+        if ((_this.columnList[i].sname == window.location.pathname)) {
           getSeoCommon()
-         
-          _this.columnTypes = _this.columnList[i].children 
-          _this.colL= _this.columnTypes.childten;
+
+          _this.columnTypes = _this.columnList[i].children
+          _this.colL = _this.columnTypes.childten;
           if (_this.columnList[i].children.length > 0) {
             _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('id') : _this.columnTypes[0].id;
           } else {
             var objData = _this.columnList.filter(obj => obj.sname == window.location.pathname);
-            _this.requestParams.categoryid=objData[0].id
+            _this.requestParams.categoryid = objData[0].id
+
           }
-          _this.getArticalData(_this.requestParams) 
-          _this.modelType = _this.columnList[i].modelType; 
-          _this.columnImage = _this.columnList[i].imagePath; 
-          setTimeout(()=>{
-            if(_this.modelType==2){
+          _this.getArticalData(_this.requestParams)
+          _this.modelType = _this.columnList[i].modelType;
+          _this.columnImage = _this.columnList[i].imagePath;
+          setTimeout(() => {
+            if (_this.modelType == 2) {
               document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
               document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
             }
-          },100)
-         
-          
-          
-        } else { 
+          }, 100)
+
+
+
+        } else {
+
+
 
           // 进入详情页
           if (_this.columnList[i].sname == '/product/index.html' && window.location.pathname == '/product/read.html') {
-            
+
             getDetailCommon()
             getSeoCommon()
           }
@@ -187,7 +207,7 @@ var app = new Vue({
             getSeoCommon()
           }
 
-          function getDetailCommon(){
+          function getDetailCommon() {
             //获取内容详情
             _this.getArticalData(_this.requestParams)
             //获取详情相关数据
@@ -199,33 +219,22 @@ var app = new Vue({
             _this.currentPath = _this.columnList[i].sname //产品详情时栏目高亮
             _this.modelType = _this.columnList[i].modelType; //栏目图片获取
             _this.columnImage = _this.columnList[i].imagePath; //栏目图片获取
-            setTimeout(()=>{
-              if(_this.modelType==2){
+            setTimeout(() => {
+              if (_this.modelType == 2) {
                 document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
                 document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
               }
-            },100)
+            }, 100)
           }
         }
-        function getSeoCommon(){
+
+        function getSeoCommon() {
           $('title').text(_this.columnList[i].categoryName);
           $('meta[name="description"]').attr('content', _this.columnList[i].metadescription);
-          $('meta[name="keywords"]').attr('content',_this.columnList[i].metakeywords);
+          $('meta[name="keywords"]').attr('content', _this.columnList[i].metakeywords);
         }
 
-        //首页旧
-
-        if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/index.html'||window.location.pathname == '/')) {
-          jQuery.ajax({
-            type: 'POST',
-            dataType: 'json',
-            url: window.FQDN + 'Index/index',
-          }).done(function (res) {
-            // _this.loading = false;
-            _this.homeList = res
-            _this.status = true
-          }).fail(function (err) {});
-        }
+
 
         // 获取反馈弹框类型数据
         if (_this.columnList[i].sname == '/solution/index.html') {
@@ -237,8 +246,8 @@ var app = new Vue({
 
     //获取内容
     getArticalData(requestParams, type) {
-      var _this=this
-      if( window.location.pathname == '/news/index.html'){
+      var _this = this
+      if (window.location.pathname == '/news/index.html') {
         _this.requestParams.order = ''
       }
 
@@ -250,11 +259,11 @@ var app = new Vue({
       }).done(function (res) {
         var aa
         var bb
-        
-        if(type==1){
-         bb=res.data.records
-        }else{
-          aa= res.data.records;
+
+        if (type == 1) {
+          bb = res.data.records
+        } else {
+          aa = res.data.records;
           // aa.sort(_this.compare("sortindex"))
           _this.articalArray = aa;
         }
@@ -298,18 +307,18 @@ var app = new Vue({
     },
 
     //申请试用
-    goApply:function(){
-     this.centerDialogVisible=true
+    goApply: function () {
+      this.centerDialogVisible = true
 
     },
 
     //弹框显示隐藏（子组件向父组件传值）
-    handleChildEvent:function(value) {
+    handleChildEvent: function (value) {
       this.centerDialogVisible = value; // 处理从子组件接收到的数据
     },
 
-   
-    
+
+
 
     // 排序
     compare(property) {

index.html

@@ -57,8 +57,6 @@
 
         <div class="video-section" >
             
-            
-
             <div v-if="modelType==1" style="width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;" v-bind:style="{backgroundImage:'url('+columnImage+')'}"></div>
             
             <video  v-else id="videoPlay"  autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
@@ -89,140 +87,40 @@
             <span class="go_down"></span>
         </div>
        
-        <section v-for="(list,ind) in homeList">
+        <section >
 
-            <!--====== WHYUS SECTION START ======-->
-            <div class="whyUs-section pt-60 pb-60" v-if="list.title === '物联网行业垂直应用'">
-                <div class="container">
-                    <div class="section-title text-center both-border pb-90">
-                        <span class="title-tag">{{list.title}}</span>
-                        <div v-for="one in list.content_one">
-                            {{one.content}}
-                        </div>
-                    </div>
-                    <div class="row align-items-center justify-content-center">
-                        <div class="col-md-12">
-                            <div class="row" id="hexGrid">
-                                <div :class="
-                                indx == 0 ? 'col-md-4 offset-2 col-sm-6' 
-                                : indx == 1 ? 'col-md-4 col-sm-6' 
-                                : indx == 2 ? 'hex hex3 col-md-4 col-sm-6' 
-                                : indx >= 3 ? 'hex col-md-4 col-sm-6' 
-                                : '' " v-for="(con,indx) in list.content">
-                                    <!-- <a class="hexIn" href="#"> -->
-                                    <img :src="con.picture" alt="" />
-                                    <!-- </a> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--====== WHYUS SECTION END ======-->
 
-            <!--====== ABOUT SECTION START ======-->
-            <div class="about-section pt-60 pb-60 " v-if="list.title === '数字化管理平台'">
-                <div class="container ">
-                    <div class="section-title text-center both-border pb-80">
-                        <span class="title-tag ">{{list.title}}</span>
-                        <div v-for="one in list.content_one">
-                            {{one.content}}
-                        </div>
-                    </div>
-                    <div class="row align-items-center justify-content-center about-background"
-                        v-for="con in list.content">
-                        <div class="imgCenter col-md-6 about-img-box" v-if="con.picture != null && con.picture != ''">
-                            <img :src="con.picture" alt=" ">
-                        </div>
-                        <div class="col-md-6 about-text-box">
-                            <div class="">
-                                <span class="title-tag" v-if="con.title != null && con.title != ''">{{con.title}}</span>
-                                <div>
-                                    <br><br>
-                                    <span v-for="cont in con.content">
-                                        <span style="margin-right: 35px;"></span>{{cont.content}}
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--====== ABOUT SECTION END ======-->
+         
 
             <!--====== WHYUS SECTION START ======-->
-            <div class="whyUs-section pt-60 pb-60" v-if="list.title === '核心优势'">
+            <div class="whyUs-section pt-60 pb-60" v-for="(arr,index) in articalArray" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
                 <div class="container">
-                    <div class="section-title text-center both-border pb-90">
-                        <span class="title-tag">{{list.title}}</span>
+                    <div class="section-title text-center both-border pb-20">
+                        <span class="title-tag">{{arr.title}}</span>
+                        <span class="mb-30">{{arr.zhaiyao}}</span>
                     </div>
-                    <div class="row align-items-center justify-content-center">
-                        <div class="col-md-12">
-                            <div class="row ys-text-align">
-                                <div class="maxWidth col-md-4 col-sm-6" v-for="(con,ind) in list.content">
-                                    <div class="about-img-box">
-                                        <img :src="con.picture" alt="">
-                                        <div>
-                                            <span :class="
-                                            ind == 0 ? 'span1 title-tag'
-                                            :ind == 1 ? 'span2 title-tag'
-                                            :ind == 2 ? 'span3 title-tag':''">{{con.title}}</span>
-                                        </div>
-                                        <div>
-                                            <span v-for="cont in con.content">{{cont.content}}<br></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                     <!-- 图文混排 -->
+                     <div class="row" v-if="arr.image" class="aboutOnlyText  " 
+                        :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
+                        style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); align-items:center">
+                        <div class="col-md-6  pr-40 aboutImg text-center ">
+                            <img :src="arr.image" alt="">
                         </div>
-                    </div>
-                </div>
-            </div>
-            <!--====== WHYUS SECTION END ======-->
-
-
-            <!--====== Trademark SECTION START ======-->
-            <div class="about-section pt-60 pb-60 " v-if="list.title === '合作伙伴'">
-                <div class="container ">
-                    <div class="section-title text-center both-border pb-80">
-                        <span class="title-tag ">{{list.title}}</span>
-                    </div>
-                    <div class="row align-items-center justify-content-center trademark-background">
-                        <div class="col-md-12">
-                            <div class="row">
-                                <div class="col-md-2" v-for="con in list.content">
-                                    <img :src="con.picture" alt="">
-                                </div>
-                            </div>
-
+                        <div class="col-md-6" v-html="arr.content">
                         </div>
                     </div>
-                </div>
-
-            </div>
-            <!--====== Trademark SECTION END ======-->
-
-            <!--====== NEWS SECTION START ======-->
-            <div class="news-section pt-60 pb-60" v-if="list.title === '友情链接'">
-                <div class="container">
-                    <div class="section-title text-center both-border">
-                        <span class="title-tag ">{{list.title}}</span>
-                        <br><br><br>
-                    </div>
-                    <div class="row">
-                        <div class="newsBack col-md-12">
-                            <div class="row">
-                                <div class="newsImg col-md-3" v-for="con in list.content">
-                                    <a :href="con.catenate" target="_blank">
-                                        <img :src="con.picture" alt="">
-                                    </a>
-                                </div>
-                            </div>
+                    <!-- 只有富文本 -->
+                    <div class="aboutOnlyText row text-center" v-else :style="{padding:(index % 2 == 1?'':'0 ')}"
+                        style="background-color: #ffff;">
+                        <div class=" about-text-image" v-html="arr.content">
                         </div>
                     </div>
+                    
                 </div>
             </div>
-            <!--====== NEWS SECTION END ======-->
+            <!--====== WHYUS SECTION END ======-->
+
+           
         </section>
 
         <!--====== FOOTER PART START ======-->