关于我们资质认证

liuqimichale
1 parent 5bb12812
Showing 2 changed files with 108 additions and 63 deletions
src/assets/images/about/honour.png
src/views/about/index.vue
@@ -18,58 +18,72 @@
       </div>
     </div>
  
+    <div v-show="flag">
+      <div class="widthCommon anchor" style="text-align: center;margin-bottom: 53px">
+        <p style="font-size: 18px">公司简介</p>
+        <p style="font-size: 18px;padding: 22px 0 41px">COMPANY INTRODUCTION</p>
+        <p style="font-size: 14px;line-height: 24px;">
  
-    <div class="widthCommon anchor" style="text-align: center;margin-bottom: 53px">
-      <p style="font-size: 18px">公司简介</p>
-      <p style="font-size: 18px;padding: 22px 0 41px">COMPANY INTRODUCTION</p>
-      <p style="font-size: 14px;line-height: 24px;">
+          中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（
+          公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供
  
-        中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（
-        公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供
+          "
+          互联网+智慧停车
+          "的"O2O"运营服务。公司着力于整合动态交通和静态交通的信息数据资源，通过云计算技术和物联网技术，为客户提供全方位的交通管理与综合交通信息服务。
  
-        "
-        互联网+智慧停车
-        "的"O2O"运营服务。公司着力于整合动态交通和静态交通的信息数据资源，通过云计算技术和物联网技术，为客户提供全方位的交通管理与综合交通信息服务。
+          公司秉承
  
-        公司秉承
+          构建绿色交通，享受安全便利出行
  
-        构建绿色交通，享受安全便利出行
+          的使命，致力于为客户创造更大价值，矢志成为
  
-        的使命，致力于为客户创造更大价值，矢志成为
+          智能交通领域的领跑者
  
-        智能交通领域的领跑者
-
-      </p>
-    </div>
-    <div class="widthCommon anchor" style="height: 400px;">2</div>
-    <div class="cultrue-bg">
-      <div class="widthCommon anchor cultrue-con" style="height: 590px;">
+        </p>
+      </div>
+      <div class="widthCommon anchor" style="height: 400px;">2</div>
+      <div class="cultrue-bg">
+        <div class="widthCommon anchor cultrue-con" style="height: 590px;">
  
+        </div>
       </div>
+      <div class=" anchor" style="padding: 67px 0;text-align: center;font-size: 18px;">
+        <p>资质认证</p>
+        <p style="padding: 22px 92px">COMPANY INTRODUCTION</p>
+        <ul class="natural-list">
+          <li>
+            <img src="../../assets/images/about/natural1.png" alt="">
+            <p>高新技术企业</p>
+          </li>
+          <li>
+            <img src="../../assets/images/about/natural2.png" alt="">
+            <p>安防工程企业资质一级</p>
+          </li>
+          <li>
+            <img src="../../assets/images/about/natural3.png" alt="">
+            <p>安全生产许可证</p>
+          </li>
+          <li>
+            <img src="../../assets/images/about/natural4.png" alt="">
+            <p>质量管理体系认证（ISO9001）</p>
+          </li>
+        </ul>
+      </div>
+
     </div>
-    <div class=" anchor" style="padding: 67px 0;text-align: center;font-size: 18px;">
-      <p>资质认证</p>
-      <p style="padding: 22px 92px">COMPANY INTRODUCTION</p>
-      <ul class="natural-list">
-        <li>
-          <img src="../../assets/images/about/natural1.png" alt="">
-          <p>高新技术企业</p>
-        </li>
-        <li>
-          <img src="../../assets/images/about/natural2.png" alt="">
-          <p>安防工程企业资质一级</p>
-        </li>
-        <li>
-          <img src="../../assets/images/about/natural3.png" alt="">
-          <p>安全生产许可证</p>
-        </li>
-        <li>
-          <img src="../../assets/images/about/natural4.png" alt="">
-          <p>质量管理体系认证（ISO9001）</p>
+
+    <div v-show="!flag" class="widthCommon">
+      <p style="font-size: 18px;text-align: center">荣誉证书</p>
+      <p style="font-size: 18px;margin: 22px 0 49px;text-align: center">COMPANY INTRODUCTION</p>
+      <ul class=" honour-wrapper">
+        <li v-for="i in 15" :key="i">
+          <img src="../../assets/images/about/honour.png" alt="">
+          <p>2018中国城市无人化停车十大创新方案</p>
         </li>
       </ul>
+
     </div>
-    <div class="widthCommon anchor" style="height: 300px;">5</div>
+
  
   </div>
 </template>
@@ -90,7 +104,8 @@ export default {
       currentIndex: 0,
       tabView: 'selectTab0',
       name: '',
-      scroll: ''
+      scroll: '',
+      flag: true
     }
   },
   mounted() {
@@ -98,20 +113,28 @@ export default {
   },
   methods: {
     dataScroll: function () {
-      this.scroll =  document.documentElement.scrollTop || document.body.scrollTop
+      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
     },
     changeTab: function (index, item) {
       console.log(index)
       this.currentIndex = index
       this.tabView = 'selectTab' + index
       this.name = item
-
-      // 对应锚点
-      let jump = document.getElementsByClassName('anchor')
-      let total = jump[index].offsetTop
-      document.documentElement.scrollTop = total //firefox
-      document.body.scrollTop = total //chrome
-      window.pageYOffset = total
+      if (index == 4) {
+        this.flag = false
+        return
+      } else {
+        this.flag = true
+        // 对应锚点
+        this.$nextTick(function () {
+          let jump = document.getElementsByClassName('anchor')
+          let total = jump[index].offsetTop
+          document.documentElement.scrollTop = total //firefox
+          document.body.scrollTop = total //chrome
+          window.pageYOffset = total
+        })
+
+      }
  
     },
  
@@ -121,29 +144,51 @@ export default {
 </script>
  
 <style scoped lang="scss">
-.cultrue-bg{
-  padding-top: 200px;
-  background: url("../../assets/images/about/culture.png") no-repeat;
-  background-size: 100% 100%;
-}
-  .cultrue-con{
+  .cultrue-bg {
+    padding-top: 200px;
+    background: url("../../assets/images/about/culture.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .cultrue-con {
     width: 1360px;
-    margin: 0 auto ;
+    margin: 0 auto;
     height: 369px;
     background: url("../../assets/images/about/cultrue-con.png") no-repeat;
     background-size: 1360px 369px;
   }
-  .natural-list{
+
+  .natural-list {
     display: flex;
     justify-content: center;
   }
-.natural-list li{
-  margin-right: 64px;
-  img{
-    width: 272px;
-    height: 172px;
-    margin-bottom: 38px;
+
+  .natural-list li {
+    margin-right: 64px;
+    img {
+      width: 272px;
+      height: 172px;
+      margin-bottom: 38px;
+    }
+  }
+
+  .honour-wrapper {
+    overflow: hidden;
+    font-size: 12px;
+    text-align: center;
+    margin-bottom: 20px;
+    li{
+      float: left;
+      margin: 0 72px 20px 0 ;
+      img{
+        width: 282px;
+        height: 178px;
+        margin-bottom: 20px;
+      }
+      &:nth-of-type(4n+0){
+        margin-right: 0;
+      }
+    }
   }
-}
  
 </style>