vue3升级

assets/css/style.css

@@ -6579,6 +6579,11 @@
                 }
             }
             /* newBox end  */
+
+
+            .appInner{
+                display:none
+            }
             
             
 

assets/js/commonVue copy.js

@@ -0,0 +1,354 @@
+import footerCom from '/assets/js/component/footerCom.js'
+ import feedFix from '/assets/js/component/feedFix.js'
+ import dialogCom from '/assets/js/component/dialogCom.js'
+ import loadingCom from '/assets/js/component/loadingCom.js'
+ import headerCom from '/assets/js/component/headerCom.js'
+ 
+ 
+ app = new Vue({
+  el: '#app',
+  components: {
+    footerCom,
+    feedFix,
+    dialogCom,
+    loadingCom,
+    headerCom
+
+  },
+  data: {
+
+    //公共
+    id: null,
+    columnList: [],
+    requestParams: { //内容接口请求参数
+      categoryid: 0, //栏目id
+      pageNum: 1,
+      pageSize: 9,
+      order: 'sortindex',
+      articleid: 0,  //访问量统计
+      id: 0, //内容详情id
+    },
+    currentPath: '',
+    articalArray: [], //详情数组
+    articalArrayRelated: [], //相关推荐
+    columnTypes: [], //栏目类型
+    colL: 0,
+    modelType: 1,
+    columnImage: '', //栏目图片
+    footerBoolean:false, //底部延时加载（解决页面闪烁）
+
+    // 公共弹框
+    centerDialogVisible: false,
+    dialogDataArray: [],
+    ruleForm: {
+      platName: '智慧安防',
+      consultName: '',
+      consultPhone: '',
+      mail: '',
+      company: '',
+      consultContent: "",
+    },
+    rules: {
+      platName: [{
+        required: true,
+        message: '请选择类型',
+        trigger: 'change'
+      }, ],
+      consultName: [{
+        required: true,
+        message: '请输入姓名',
+        trigger: 'blur'
+      }, ],
+      consultPhone: [{
+        required: true,
+        message: '请输入正确的电话号码',
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        trigger: 'change'
+      }],
+      mail: [{
+        required: false,
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: 'blur'
+      }],
+    },
+
+
+    //首页
+    homeList: [],
+    status: false,
+
+    // 新闻
+    goPage: 1,
+    totalPageNum: 1,
+    totalPageSzie: 1,
+    loading: true,
+    categoryid: 0,
+  },
+
+  computed: {
+
+  },
+  created: function () {
+    this.requestParams.categoryid = this.getQuery('categoryid') ? this.getQuery('categoryid') : ''
+    this.requestParams.id = this.getQuery('id') ? this.getQuery('id') : ''
+    this.requestParams.articleid = this.getQuery('id') ? this.getQuery('id') : ''
+  },
+  mounted: function () {
+
+    this.getColumnData()
+  },
+  methods: {
+
+    //获取栏目数据
+    getColumnData() {
+      var _this = this;
+      if (!localStorage.getItem('storeColumnList') || 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
+          _this.currentPath = window.location.pathname;
+          _this.handleColumnData()
+        })
+      } else {
+        this.loading = false;
+        this.handleColumnData()
+      }
+      setTimeout(function(){
+        _this.footerBoolean=true
+      },1000)
+    },
+
+
+    handleColumnData() {
+      this.currentPath = window.location.pathname;
+      this.columnList = JSON.parse(localStorage.getItem('storeColumnList')).data;
+
+      // 读取并检查是否过期
+      if (JSON.parse(localStorage.getItem('storeColumnList')).expires < Date.now()) {
+        localStorage.removeItem('storeColumnList');
+      } else {
+      }
+
+
+      var _this = this;
+
+      for (let i = 0; i < _this.columnList.length; i++) {
+
+        //栏目处理  
+
+        //进入首页
+        if (_this.columnList[i].sname == '/index.html' && (window.location.pathname == '/'||window.location.pathname == '')) {
+          getSeoCommon()
+
+          this.requestParams.categoryid = this.columnList[0].id
+          _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;
+          if (_this.columnList[i].children.length > 0) {
+            _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('categoryid') : _this.columnTypes[0].id;
+          } else {
+                        var objData = _this.columnList.filter(obj => obj.sname == window.location.pathname);
+            _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) {
+              document.getElementById("videoPlay").src = _this.columnImage; //url为你需要播放的视频地址
+              document.getElementById("videoPlay").setAttribute('poster', '/assets/img/banner/111.png');
+            }
+          }, 100)
+
+
+
+        } else {
+
+
+
+          // 进入详情页
+          if (_this.columnList[i].sname == '/product/' && window.location.pathname == '/product/read.html') {
+
+            getDetailCommon()
+            getSeoCommon()
+          }
+          if (_this.columnList[i].sname == '/solution/' && window.location.pathname == '/solution/read.html') {
+            getDetailCommon()
+            getSeoCommon()
+          }
+          if (_this.columnList[i].sname == '/news/' && window.location.pathname == '/news/read.html') {
+            getDetailCommon()
+            getSeoCommon()
+          }
+
+          function getDetailCommon() {
+            //获取内容详情
+            _this.getArticalData(_this.requestParams)
+            //获取详情相关数据
+            setTimeout(() => {
+              _this.requestParams.id = ''
+              _this.requestParams.articleid = ''
+              _this.getArticalData(_this.requestParams, 1)
+            }, 100)
+            _this.currentPath = _this.columnList[i].sname //产品详情时栏目高亮
+            _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)
+          }
+        }
+
+        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);
+        }
+
+
+
+        // 获取反馈弹框类型数据
+        if (_this.columnList[i].sname == '/solution/') {
+          _this.dialogDataArray = (_this.columnList[i].children)
+          _this.ruleForm.platName = _this.dialogDataArray[0].categoryName;
+        }
+      }
+    },
+
+    //获取内容
+    getArticalData(requestParams, type) {
+      var _this = this
+      if (window.location.pathname == '/news/') {
+        _this.requestParams.order = ''
+      }
+
+      $.ajax({
+        type: 'GET',
+        dataType: 'json',
+        url: window.FQDN2 + 'siteArticle/siteArticleList',
+        data: requestParams
+      }).done(function (res) {
+        var aa
+        var bb
+
+        if (type == 1) {
+          bb = res.data.records
+        } else {
+          aa = res.data.records;
+          _this.articalArray = aa;
+        }
+        if (bb) {
+          _this.articalArrayRelated = bb.filter(obj => obj.title != _this.articalArray[0].title);
+          // _this.articalArrayRelated = bb
+        }
+        // _this.loading = false;
+        _this.totalPageSzie = res.data.total
+        _this.totalPageNum = Math.ceil(res.data.total / res.data.size);
+      }).fail(function (err) {});
+    },
+
+    //类型点击
+    facilityClick(e, item) {
+      this.requestParams.categoryid = item.id
+      this.requestParams.pageNum = 1
+      this.getArticalData(this.requestParams)
+    },
+
+    //  分页
+    oneInnerBox: function (param) {
+      
+      window.location = "./read.html?categoryid=" + param.categoryid + "&id=" + param.id + "&isUrlId=1";
+    },
+    enterPage: function (res) {
+      if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
+        this.requestParams.pageNum = this.goPage
+        this.getArticalData(this.requestParams)
+      } else {
+        this.goPage = 1
+        alert('输入页数有误！')
+      }
+    },
+    currentChange: function (res) {
+      this.requestParams.pageNum = res
+      this.getArticalData(this.requestParams)
+    },
+
+    //申请试用
+    goApply: function () {
+      this.centerDialogVisible = true
+
+    },
+
+    //弹框显示隐藏（子组件向父组件传值）
+    handleChildEvent: function (value) {
+      this.centerDialogVisible = value; // 处理从子组件接收到的数据
+    },
+
+
+
+
+    // 排序
+    compare(property) {
+      return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value1 - value2;
+      }
+    },
+
+    // 获取路由参数
+    getQuery(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) return decodeURI(r[2]);
+      return null;
+    },
+
+    //获得年月日时分秒  //传入日期//例：2020-10-27T14:36:23
+    timeFormatSeconds(time) {
+      var d = time ? new Date(time) : new Date();
+      var year = d.getFullYear();
+      var month = d.getMonth() + 1;
+      var day = d.getDate();
+      var hours = d.getHours();
+      var min = d.getMinutes();
+      var seconds = d.getSeconds();
+
+      if (month < 10) month = '0' + month;
+      if (day < 10) day = '0' + day;
+      if (hours < 0) hours = '0' + hours;
+      if (min < 10) min = '0' + min;
+      if (seconds < 10) seconds = '0' + seconds;
+
+      return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
+    }
+  }
+});

assets/js/commonVue.js

@@ -5,8 +5,8 @@ import loadingCom from '/assets/js/component/loadingCom.js'
 import headerCom from '/assets/js/component/headerCom.js'
 
 
-var app = new Vue({
-  el: '#app',
+const App = {
+
   components: {
     footerCom,
     feedFix,
@@ -15,77 +15,81 @@ var app = new Vue({
     headerCom
 
   },
-  data: {
-
-    //公共
-    id: null,
-    columnList: [],
-    requestParams: { //内容接口请求参数
-      categoryid: 0, //栏目id
-      pageNum: 1,
-      pageSize: 9,
-      order: 'sortindex',
-      articleid: 0,  //访问量统计
-      id: 0, //内容详情id
-    },
-    currentPath: '',
-    articalArray: [], //详情数组
-    articalArrayRelated: [], //相关推荐
-    columnTypes: [], //栏目类型
-    colL: 0,
-    modelType: 1,
-    columnImage: '', //栏目图片
-    footerBoolean:false, //底部延时加载（解决页面闪烁）
-
-    // 公共弹框
-    centerDialogVisible: false,
-    dialogDataArray: [],
-    ruleForm: {
-      platName: '智慧安防',
-      consultName: '',
-      consultPhone: '',
-      mail: '',
-      company: '',
-      consultContent: "",
-    },
-    rules: {
-      platName: [{
-        required: true,
-        message: '请选择类型',
-        trigger: 'change'
-      }, ],
-      consultName: [{
-        required: true,
-        message: '请输入姓名',
-        trigger: 'blur'
-      }, ],
-      consultPhone: [{
-        required: true,
-        message: '请输入正确的电话号码',
-        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-        trigger: 'change'
-      }],
-      mail: [{
-        required: false,
-        type: "email",
-        message: "请输入正确的邮箱地址",
-        trigger: 'blur'
-      }],
-    },
-
-
-    //首页
-    homeList: [],
-    status: false,
-
-    // 新闻
-    goPage: 1,
-    totalPageNum: 1,
-    totalPageSzie: 1,
-    loading: true,
-    categoryid: 0,
+  data() {
+      return {
+          title: 'Hello Vue',
+          count: 0,
+          articalArray: [], //详情数组
+          //公共
+          id: null,
+          columnList: [],
+          requestParams: { //内容接口请求参数
+            categoryid: 0, //栏目id
+            pageNum: 1,
+            pageSize: 9,
+            order: 'sortindex',
+            articleid: 0,  //访问量统计
+            id: 0, //内容详情id
+          },
+          currentPath: '',
+          articalArray: [], //详情数组
+          articalArrayRelated: [], //相关推荐
+          columnTypes: [], //栏目类型
+          colL: 0,
+          modelType: 1,
+          columnImage: '', //栏目图片
+          footerBoolean:false, //底部延时加载（解决页面闪烁）
+
+          // 公共弹框
+          centerDialogVisible: false,
+          dialogDataArray: [],
+          ruleForm: {
+            platName: '智慧安防',
+            consultName: '',
+            consultPhone: '',
+            mail: '',
+            company: '',
+            consultContent: "",
+          },
+          rules: {
+            platName: [{
+              required: true,
+              message: '请选择类型',
+              trigger: 'change'
+            }, ],
+            consultName: [{
+              required: true,
+              message: '请输入姓名',
+              trigger: 'blur'
+            }, ],
+            consultPhone: [{
+              required: true,
+              message: '请输入正确的电话号码',
+              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+              trigger: 'change'
+            }],
+            mail: [{
+              required: false,
+              type: "email",
+              message: "请输入正确的邮箱地址",
+              trigger: 'blur'
+            }],
+          },
+
+
+          //首页
+          homeList: [],
+          status: false,
+
+          // 新闻
+          goPage: 1,
+          totalPageNum: 1,
+          totalPageSzie: 1,
+          loading: true,
+          categoryid: 0,
+      }
   },
-
+ 
   computed: {
 
   },
@@ -351,4 +355,9 @@ var app = new Vue({
       return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
     }
   }
-});
+}
+Vue.createApp(App).use(ElementPlus).mount("#app");
+
+
+
+

assets/js/component/dialogCom.js

@@ -6,8 +6,8 @@ export default {
     fatherdialoga:Object,
   },
   template: `
-  <el-dialog title="项目咨询" style="display:none" :style="{display:(fatherdialogv?'block':'none')}" @close="closeDialog('ruleform')"
-                :visible.sync="fatherdialogv" width="700px" center class="feedBackDialog" :lock-scroll="false">
+            <el-dialog title="项目咨询"   @close="closeDialog('ruleform')"
+                 v-model="fatherdialogv" width="700px" center class="feedBackDialog" :lock-scroll="false">
                 <el-form :model="ruleform" :rules="fatherrules" ref="ruleform" label-width="80px" class="demo-ruleform">
                     <el-form-item label="" prop="platName" style="" class="dialogTypeLabel">
                         <el-radio-group v-model="ruleform.platName">
@@ -43,7 +43,7 @@ export default {
                 </el-form>
 
                 <!-- <span>需要注意的是内容是默认不居中的</span> -->
-                <span slot="footer" class="dialog-footer">
+                <span slot="footer" class="dialog-footer" style="width:100%;text-align:center">
                     <el-button @click="resetForm('ruleform')">取 消</el-button>
                     <el-button type="primary" @click="submitForm('ruleform')">提 交</el-button>
                 </span>
@@ -74,7 +74,7 @@ export default {
                 message: '提交成功',
                 type: 'success'
               });
-              _this.fatherdialogv = false;
+              _this.$emit('data-event', false); 
               _this.$refs[formName].resetFields(); //重置from校验
             }
           }).fail(function (err) {});
@@ -94,7 +94,7 @@ export default {
     // 重置表单
     resetForm(formName) {
       this.$refs[formName].resetFields();
-      this.fatherdialogv = false
+      this.$emit('data-event', false); 
     },
   }
 }

assets/js/component/footerCom.js

@@ -40,7 +40,7 @@ export default {
                               <p>增值电信业务经营许可证（IDC、ISP）编号B2-20080010</p>
                               <p style="margin-top:10px">
                                 <a target="_blank" href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020180517151815000002552816-SAIC_SHOW_310000-C5DE2EFE9AD14E94923F7AC487AA7077105&signData=MEYCIQDqmcH8RWjPwf4id/UFCbng+HLdnF21HDjoUikAjkdiKQIhAOrQRYz74d3T5P03DL6OW10HBRktOYPenEbcmn1gCweV">
-                                    <img src="/assets/img/spc.png"" alt="1" width="20"></img>
+                                    <img src="/assets/img/spc.png" alt="1" width="20"></img>
                                     沪公网安备 31010802001185号
                                 </a>
                               </p>
@@ -52,4 +52,4 @@ export default {
     `,
    
   }
-  
+  

index.html

@@ -5,14 +5,14 @@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <meta name="description" content="" />
-    <meta  name="keywords" content="" />
+    <meta name="keywords" 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>
     <!--====== bootstrap css ====== -->
     <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
-    <!--====== element css ====== -->
-    <link rel="stylesheet" href="assets/css/element.css">
+    <!--====== element css  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css====== -->
+    <link rel="stylesheet" href="assets/css/element.css" rel="stylesheet">
     <!--====== Mean Menu ======-->
     <link rel="stylesheet" href="assets/css/meanmenu.min.css" />
     <!--====== Default css ======-->
@@ -25,7 +25,35 @@
     <link rel="stylesheet" href="assets/css/style.css" />
     <!--====== home css ====== -->
     <link rel="stylesheet" href="assets/css/home.css" />
-    
+
+     <!--====== jquery js ======-->
+     <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
+     <!--====== Bootstrap js ======-->
+     <script src="assets/js/bootstrap.min.js "></script>
+     <!--====== Vue js https://unpkg.com/vue@3 ======-->
+     <script src="assets/js/vue.min.js"></script>
+     <!--====== Element js  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js ======-->
+     <script src="assets/js/element/index.js"></script>
+     <!--====== Mean Menu ======-->
+     <script src="assets/js/jquery.meanmenu.min.js "></script>
+ 
+     <!--====== Setting Info js ======-->
+     <script src="assets/js/settinginfo.js"></script>
+     <!--====== Main js ======-->
+     <script src="assets/js/main.js "></script>
+     <!--====== commonVue js ======-->
+     <script type="module" src="assets/js/commonVue.js "></script>
+ 
+ 
+     <!-- //引入微信的js，以及写入以下js  (IOS解决方案)-->
+     <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+     <script>
+         document.addEventListener("WeixinJSBridgeReady", function () {
+             document.getElementById("videoPlay").play();
+         }, false);
+     </script>
+ 
+
 </head>
 
 <body>
@@ -33,129 +61,108 @@
 		<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
   <![endif]-->
 
-    <div id="app" :style="{'display':'block'}" style="display:none">
-
-        <div>
-            <!-- LOADING START -->
-            <div v-if="loading" class="loadingBox">
-                <loading-com></loading-com>
-            </div>
-            <!-- LOADING END -->
-
-            <!-- FEEDBACK START -->
-            <feed-fix></feed-fix>
-            <!-- FEEDBACK END -->
+    <div id="app" >
+        <div class="appInner" :style="{'display':'block'}">
 
-            <!-- DIALOG START-->
-            <dialog-com  @data-event="handleChildEvent" :fatherdialogv="centerDialogVisible" :ruleform="ruleForm" :fatherrules="rules" :fatherdialoga="dialogDataArray"></dialog-com>
-            <!-- DIALOG END -->
-        </div>
-
-        <!--====== HEADER START ======-->
-        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-        <!--====== HEADER END ======-->
-
-        <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 webkit-playsinline="webkit-playsinline" playsinline  v-else id="videoPlay"  autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
-                poster="assets/img/banner/poster.jpg">
-                <source  type="video/mp4">
-            </video>
-            
-            <div class="video-des">
-                <div class="des1">
-                                        <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>，围绕行业细分，累计服务超过
-                        <span class="num1">5000</span> 家企业，近<span class="num1"> 10万 </span>个用户</p>
-                </div>
-                <div class="des2 desCom animate__animated  animate__flipInX"
-                    style="top:43%; left:0;width:100%;text-align:center">
-                    <p>核心价值观</p>
-                    <span>一起梦想，一起成长，一起分享</span>
-
-                </div>
-                <div class="des3 desCom animate__animated  animate__lightSpeedInLeft" style="top:65%; left:20%;">
-                    <p>企业使命</p>
-                    <span>用数字化手段助力客户融入数智时代</span>
-                </div>
-                <div class="des4 desCom animate__animated  animate__lightSpeedInRight" style="top:65%; right:25%;">
-                    <p>企业愿景</p>
-                    <span>成为智慧数字产业的领跑者</span>
+            <div>
+                <!-- LOADING START -->
+                <div v-if="loading" class="loadingBox">
+                    <loading-com></loading-com>
                 </div>
+                <!-- LOADING END -->
+    
+                <!-- FEEDBACK START -->
+                <feed-fix></feed-fix>
+                <!-- FEEDBACK END -->
+    
+                <!-- DIALOG START-->
+                <dialog-com @data-event="handleChildEvent" :fatherdialogv="centerDialogVisible" :ruleform="ruleForm"
+                    :fatherrules="rules" :fatherdialoga="dialogDataArray"></dialog-com>
+                <!-- DIALOG END -->
             </div>
-            <span class="go_down"></span>
-        </div>
-       
-        <section >
-
-
-         
-
-            <!--====== WHYUS SECTION START ======-->
-            <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-20">
-                        <span class="title-tag">{{arr.title}}</span>
-                        <span class="mb-30">{{arr.zhaiyao}}</span>
+    
+            <!--====== HEADER START ======-->
+            <header-com @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
+            <!--====== HEADER END ======-->
+    
+            <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 webkit-playsinline="webkit-playsinline" playsinline v-else id="videoPlay" autoplay loop muted
+                    style="width:100%;height:100%;object-fit:fill;" poster="assets/img/banner/poster.jpg">
+                    <source type="video/mp4">
+                </video>
+    
+                <div class="video-des">
+                    <div class="des1">
+                        <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>，围绕行业细分，累计服务超过
+                            <span class="num1">5000</span> 家企业，近<span class="num1"> 10万 </span>个用户</p>
                     </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 class="des2 desCom animate__animated  animate__flipInX"
+                        style="top:43%; left:0;width:100%;text-align:center">
+                        <p>核心价值观</p>
+                        <span>一起梦想，一起成长，一起分享</span>
+    
+                    </div>
+                    <div class="des3 desCom animate__animated  animate__lightSpeedInLeft" style="top:65%; left:20%;">
+                        <p>企业使命</p>
+                        <span>用数字化手段助力客户融入数智时代</span>
+                    </div>
+                    <div class="des4 desCom animate__animated  animate__lightSpeedInRight" style="top:65%; right:25%;">
+                        <p>企业愿景</p>
+                        <span>成为智慧数字产业的领跑者</span>
+                    </div>
+                </div>
+                <span class="go_down"></span>
+            </div>
+    
+            <section>
+    
+    
+    
+    
+                <!--====== WHYUS SECTION START ======-->
+                <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-20">
+                            <span class="title-tag">{{arr.title}}</span>
+                            <span class="mb-30">{{arr.zhaiyao}}</span>
                         </div>
-                        <div class="col-md-6" v-html="arr.content">
+                        <!-- 图文混排 -->
+                        <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 class="col-md-6" v-html="arr.content">
+                            </div>
                         </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 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>
-            </div>
-            <!--====== WHYUS SECTION END ======-->
-
-           
-        </section>
-
-        <!--====== FOOTER PART START ======-->
-        <footer-com v-if="columnList.length>1&&footerBoolean" :todo="columnList"></footer-com>
-        <!--====== FOOTER PART END ======-->
+                <!--====== WHYUS SECTION END ======-->
+    
+            </section>
+    
+            <!--====== FOOTER PART START ======-->
+            <footer-com v-if="columnList.length>1&&footerBoolean" :todo="columnList"></footer-com>
+            <!--====== FOOTER PART END ======-->
+        </div>
     </div>
 
-    <!--====== jquery js ======-->
-    <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
-    <!--====== Bootstrap js ======-->
-    <script src="assets/js/bootstrap.min.js "></script>
-    <!--====== Vue js ======-->
-    <script src="assets/js/vue.min.js "></script>
-    <!--====== Element js ======--> 
-    <script src="assets/js/element/index.js"></script>
-    <!--====== Mean Menu ======-->
-    <script src="assets/js/jquery.meanmenu.min.js "></script>
-
-    <!--====== Setting Info js ======-->
-    <script src="assets/js/settinginfo.js"></script>
-    <!--====== Main js ======-->
-    <script src="assets/js/main.js "></script>
-    <!--====== commonVue js ======-->
-    <script type="module" src="assets/js/commonVue.js "></script>
+   
 
-
-    <!-- //引入微信的js，以及写入以下js  (IOS解决方案)-->
-    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
-    <script>
-        document.addEventListener("WeixinJSBridgeReady", function () {
-            document.getElementById("videoPlay").play();
-        }, false);
-    </script>
-
-    
-    </body>
+</body>
 
 </html>

product/index.html

@@ -15,8 +15,8 @@
 
     <!--====== bootstrap css ====== -->
     <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
-    <!--====== element css ====== -->
-    <link rel="stylesheet" href="../assets/css/element.css">
+    <!--====== element css  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css====== -->
+    <link rel="stylesheet" href="../assets/css/element.css" rel="stylesheet">
     <!--====== Mean Menu ======-->
     <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
     <!--====== Default css ======-->
@@ -25,113 +25,126 @@
     <link rel="stylesheet" href="../assets/css/animation.css" />
     <!--====== Style css ======-->
     <link rel="stylesheet" href="../assets/css/style.css" />
+
+    <!--====== jquery js ======-->
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js "></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js "></script>
+    <!--====== Vue js https://unpkg.com/vue@3 ======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <!--====== Element js  https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js ======-->
+    <script src="../assets/js/element/index.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js "></script>
+
+    <!--====== Setting Info js ======-->
+    <script src="../assets/js/settinginfo.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js "></script>
+    <!--====== commonVue js ======-->
+    <script type="module" src="../assets/js/commonVue.js "></script>
+    
+</body>
+
 </head>
 
 <body>
     <!--[if lte IE 9]>
 	  <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
   <![endif]-->
-    <div id="app" :style="{'display':'block'}" style="display:none">
-        
-        <div>
-            <!-- LOADING START -->
-            <div v-if="loading" class="loadingBox">
-                <loading-com></loading-com>
+    <div id="app">
+        <div class="appInner" :style="{'display':'block'}">
+            <div>
+                <!-- LOADING START -->
+                <div v-if="loading" class="loadingBox">
+                    <loading-com></loading-com>
+                </div>
+                <!-- LOADING END -->
+    
+                <!-- FEEDBACK START -->
+                <feed-fix></feed-fix>
+                <!-- FEEDBACK END -->
+                
+                <!-- DIALOG START-->
+                <dialog-com  @data-event="handleChildEvent" :fatherdialogv="centerDialogVisible" :ruleform="ruleForm" :fatherrules="rules" :fatherdialoga="dialogDataArray"></dialog-com>
+    
+                <!-- DIALOG END -->
             </div>
-            <!-- LOADING END -->
-
-            <!-- FEEDBACK START -->
-            <feed-fix></feed-fix>
-            <!-- FEEDBACK END -->
             
-            <!-- DIALOG START-->
-            <dialog-com  @data-event="handleChildEvent" :fatherdialogv="centerDialogVisible" :ruleform="ruleForm" :fatherrules="rules" :fatherdialoga="dialogDataArray"></dialog-com>
-
-            <!-- DIALOG END -->
-        </div>
-        
-        <!--====== HEADER START ======-->
-        <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
-        <!--====== HEADER END ======-->
-
-        <!--====== COMMON BREADCRUMB START ======-->
-        <section class="common-bradcrumb-section" style="background-color:#aaa" v-if="columnTypes.length>1"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
-            <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
-                <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
-                    <source  type="video/mp4">
-                </video>
-                <ul class="cannot_selected tabs_selected" >
-                    <a v-for="(item,i) in columnTypes" :class="item.id == requestParams.categoryid ? 'active' : ''"
-                    v-on:mouseover="facilityClick(i, item)" :style="{'width':(1/columnTypes.length*100)+'%' }">{{item.categoryName}}</a>
-                </ul>
+            <!--====== HEADER START ======-->
+            <header-com  @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
+            <!--====== HEADER END ======-->
+    
+            <!--====== COMMON BREADCRUMB START ======-->
+            <section class="common-bradcrumb-section" style="background-color:#aaa" v-if="columnTypes.length>1"  v-bind:style="{backgroundImage:'url('+columnImage+')'}">
+                <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
+                    <video id="videoPlay" v-if="modelType==2" autoplay loop muted style="width:100%;height:100%;object-fit:fill;" >
+                        <source  type="video/mp4">
+                    </video>
+                    <ul class="cannot_selected tabs_selected" >
+                        <a v-for="(item,i) in columnTypes" :class="item.id == requestParams.categoryid ? 'active' : ''"
+                        v-on:mouseover="facilityClick(i, item)" :style="{'width':(1/columnTypes.length*100)+'%' }">{{item.categoryName}}</a>
+                    </ul>
+                </section>
+               
             </section>
-           
-        </section>
-        <!--====== COMMON BREADCRUMB END ======-->
-
-        <!--====== PRODUCT GRID START======-->
-        <section class="product-grid-section  container pt-20 pb-60" >
-
-
-                <div class="row pt-80 content"  >
-                    <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+')'}">
-                                <!-- <img :src="item.image" alt=""> -->
+            <!--====== COMMON BREADCRUMB END ======-->
+    
+            <!--====== PRODUCT GRID START======-->
+            <section class="product-grid-section  container pt-20 pb-60" >
+    
+    
+                    <div class="row pt-80 content"  >
+                        <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+')'}">
+                                    <!-- <img :src="item.image" alt=""> -->
+                                </div>
+    
+                        
+                                <a class="line-two">{{item.title}}</a>
+                                <span class="line-two">{{item.zhaiyao}}</span>
                             </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">
-                            <div class="col-lg-12 col-md-12 content" >
-                                <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>
-                                        <el-pagination prev-text="上一页" next-text='下一页' :page-size="requestParams.pageSize" :current-page="requestParams.pageNum" background layout="prev, pager, next" :total="totalPageSzie" @current-change="currentChange">
-                                        </el-pagination>
-                                        <div class="page-des2 align-items-end cannot_selected pc">前往第
-                                            <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
+    
+                    <div class="news-content-section pt-60">
+                        <div class="container">
+                            <div class="row newBox">
+                                <div class="col-lg-12 col-md-12 content" >
+                                    <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>
+                                            <el-pagination prev-text="上一页" next-text='下一页' :page-size="requestParams.pageSize" :current-page="requestParams.pageNum" background layout="prev, pager, next" :total="totalPageSzie" @current-change="currentChange">
+                                            </el-pagination>
+                                            <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>
-                </div>
-        </section>
-        <!--====== PRODUCT GRID START======-->
+            </section>
+            <!--====== PRODUCT GRID START======-->
+    
+            <!--====== FOOTER PART START ======-->
+            <footer-com v-if="columnList.length>1&&footerBoolean" :todo="columnList"></footer-com>
+            <!--====== FOOTER PART END ======-->
 
-        <!--====== FOOTER PART START ======-->
-        <footer-com v-if="columnList.length>1&&footerBoolean" :todo="columnList"></footer-com>
-        <!--====== FOOTER PART END ======-->
-        </div>
 
+        </div>
+        
+        
+    </div>
 
-        <!--====== jquery js ======-->
-        <script src="../assets/js/vendor/jquery-1.12.4.min.js "></script>
-        <!--====== Bootstrap js ======-->
-        <script src="../assets/js/bootstrap.min.js "></script>
-        <!--====== Vue js ======-->
-        <script src="../assets/js/vue.min.js "></script>
-        <!--====== Element js ======--> 
-        <script src="../assets/js/element/index.js"></script>
-        <!--====== Mean Menu ======-->
-        <script src="../assets/js/jquery.meanmenu.min.js "></script>
+    
 
-        <!--====== Setting Info js ======-->
-        <script src="../assets/js/settinginfo.js"></script>
-        <!--====== Main js ======-->
-        <script src="../assets/js/main.js "></script>
-        <!--====== commonVue js ======-->
-        <script type="module" src="../assets/js/commonVue.js "></script>
 </body>
 
+
+        
+
 </html>