Commit 9cff8f783298fb0e9ccff977f2cf11b5e41b9c3a
1 parent
5bb12812
关于我们 资质认证
Showing
2 changed files
with
108 additions
and
63 deletions
src/assets/images/about/honour.png
0 → 100644
229 KB
src/views/about/index.vue
| @@ -18,58 +18,72 @@ | @@ -18,58 +18,72 @@ | ||
| 18 | </div> | 18 | </div> |
| 19 | </div> | 19 | </div> |
| 20 | 20 | ||
| 21 | + <div v-show="flag"> | ||
| 22 | + <div class="widthCommon anchor" style="text-align: center;margin-bottom: 53px"> | ||
| 23 | + <p style="font-size: 18px">公司简介</p> | ||
| 24 | + <p style="font-size: 18px;padding: 22px 0 41px">COMPANY INTRODUCTION</p> | ||
| 25 | + <p style="font-size: 14px;line-height: 24px;"> | ||
| 21 | 26 | ||
| 22 | - <div class="widthCommon anchor" style="text-align: center;margin-bottom: 53px"> | ||
| 23 | - <p style="font-size: 18px">公司简介</p> | ||
| 24 | - <p style="font-size: 18px;padding: 22px 0 41px">COMPANY INTRODUCTION</p> | ||
| 25 | - <p style="font-size: 14px;line-height: 24px;"> | 27 | + 中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（ |
| 28 | + 公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供 | ||
| 26 | 29 | ||
| 27 | - 中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（ | ||
| 28 | - 公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供 | 30 | + " |
| 31 | + 互联网+智慧停车 | ||
| 32 | + "的"O2O"运营服务。公司着力于整合动态交通和静态交通的信息数据资源，通过云计算技术和物联网技术，为客户提供全方位的交通管理与综合交通信息服务。 | ||
| 29 | 33 | ||
| 30 | - " | ||
| 31 | - 互联网+智慧停车 | ||
| 32 | - "的"O2O"运营服务。公司着力于整合动态交通和静态交通的信息数据资源，通过云计算技术和物联网技术，为客户提供全方位的交通管理与综合交通信息服务。 | 34 | + 公司秉承 |
| 33 | 35 | ||
| 34 | - 公司秉承 | 36 | + 构建绿色交通，享受安全便利出行 |
| 35 | 37 | ||
| 36 | - 构建绿色交通，享受安全便利出行 | 38 | + 的使命，致力于为客户创造更大价值，矢志成为 |
| 37 | 39 | ||
| 38 | - 的使命，致力于为客户创造更大价值，矢志成为 | 40 | + 智能交通领域的领跑者 |
| 39 | 41 | ||
| 40 | - 智能交通领域的领跑者 | ||
| 41 | - | ||
| 42 | - </p> | ||
| 43 | - </div> | ||
| 44 | - <div class="widthCommon anchor" style="height: 400px;">2</div> | ||
| 45 | - <div class="cultrue-bg"> | ||
| 46 | - <div class="widthCommon anchor cultrue-con" style="height: 590px;"> | 42 | + </p> |
| 43 | + </div> | ||
| 44 | + <div class="widthCommon anchor" style="height: 400px;">2</div> | ||
| 45 | + <div class="cultrue-bg"> | ||
| 46 | + <div class="widthCommon anchor cultrue-con" style="height: 590px;"> | ||
| 47 | 47 | ||
| 48 | + </div> | ||
| 48 | </div> | 49 | </div> |
| 50 | + <div class=" anchor" style="padding: 67px 0;text-align: center;font-size: 18px;"> | ||
| 51 | + <p>资质认证</p> | ||
| 52 | + <p style="padding: 22px 92px">COMPANY INTRODUCTION</p> | ||
| 53 | + <ul class="natural-list"> | ||
| 54 | + <li> | ||
| 55 | + <img src="../../assets/images/about/natural1.png" alt=""> | ||
| 56 | + <p>高新技术企业</p> | ||
| 57 | + </li> | ||
| 58 | + <li> | ||
| 59 | + <img src="../../assets/images/about/natural2.png" alt=""> | ||
| 60 | + <p>安防工程企业资质一级</p> | ||
| 61 | + </li> | ||
| 62 | + <li> | ||
| 63 | + <img src="../../assets/images/about/natural3.png" alt=""> | ||
| 64 | + <p>安全生产许可证</p> | ||
| 65 | + </li> | ||
| 66 | + <li> | ||
| 67 | + <img src="../../assets/images/about/natural4.png" alt=""> | ||
| 68 | + <p>质量管理体系认证（ISO9001）</p> | ||
| 69 | + </li> | ||
| 70 | + </ul> | ||
| 71 | + </div> | ||
| 72 | + | ||
| 49 | </div> | 73 | </div> |
| 50 | - <div class=" anchor" style="padding: 67px 0;text-align: center;font-size: 18px;"> | ||
| 51 | - <p>资质认证</p> | ||
| 52 | - <p style="padding: 22px 92px">COMPANY INTRODUCTION</p> | ||
| 53 | - <ul class="natural-list"> | ||
| 54 | - <li> | ||
| 55 | - <img src="../../assets/images/about/natural1.png" alt=""> | ||
| 56 | - <p>高新技术企业</p> | ||
| 57 | - </li> | ||
| 58 | - <li> | ||
| 59 | - <img src="../../assets/images/about/natural2.png" alt=""> | ||
| 60 | - <p>安防工程企业资质一级</p> | ||
| 61 | - </li> | ||
| 62 | - <li> | ||
| 63 | - <img src="../../assets/images/about/natural3.png" alt=""> | ||
| 64 | - <p>安全生产许可证</p> | ||
| 65 | - </li> | ||
| 66 | - <li> | ||
| 67 | - <img src="../../assets/images/about/natural4.png" alt=""> | ||
| 68 | - <p>质量管理体系认证（ISO9001）</p> | 74 | + |
| 75 | + <div v-show="!flag" class="widthCommon"> | ||
| 76 | + <p style="font-size: 18px;text-align: center">荣誉证书</p> | ||
| 77 | + <p style="font-size: 18px;margin: 22px 0 49px;text-align: center">COMPANY INTRODUCTION</p> | ||
| 78 | + <ul class=" honour-wrapper"> | ||
| 79 | + <li v-for="i in 15" :key="i"> | ||
| 80 | + <img src="../../assets/images/about/honour.png" alt=""> | ||
| 81 | + <p>2018中国城市无人化停车十大创新方案</p> | ||
| 69 | </li> | 82 | </li> |
| 70 | </ul> | 83 | </ul> |
| 84 | + | ||
| 71 | </div> | 85 | </div> |
| 72 | - <div class="widthCommon anchor" style="height: 300px;">5</div> | 86 | + |
| 73 | 87 | ||
| 74 | </div> | 88 | </div> |
| 75 | </template> | 89 | </template> |
| @@ -90,7 +104,8 @@ export default { | @@ -90,7 +104,8 @@ export default { | ||
| 90 | currentIndex: 0, | 104 | currentIndex: 0, |
| 91 | tabView: 'selectTab0', | 105 | tabView: 'selectTab0', |
| 92 | name: '', | 106 | name: '', |
| 93 | - scroll: '' | 107 | + scroll: '', |
| 108 | + flag: true | ||
| 94 | } | 109 | } |
| 95 | }, | 110 | }, |
| 96 | mounted() { | 111 | mounted() { |
| @@ -98,20 +113,28 @@ export default { | @@ -98,20 +113,28 @@ export default { | ||
| 98 | }, | 113 | }, |
| 99 | methods: { | 114 | methods: { |
| 100 | dataScroll: function () { | 115 | dataScroll: function () { |
| 101 | - this.scroll = document.documentElement.scrollTop || document.body.scrollTop | 116 | + this.scroll = document.documentElement.scrollTop || document.body.scrollTop |
| 102 | }, | 117 | }, |
| 103 | changeTab: function (index, item) { | 118 | changeTab: function (index, item) { |
| 104 | console.log(index) | 119 | console.log(index) |
| 105 | this.currentIndex = index | 120 | this.currentIndex = index |
| 106 | this.tabView = 'selectTab' + index | 121 | this.tabView = 'selectTab' + index |
| 107 | this.name = item | 122 | this.name = item |
| 108 | - | ||
| 109 | - // 对应锚点 | ||
| 110 | - let jump = document.getElementsByClassName('anchor') | ||
| 111 | - let total = jump[index].offsetTop | ||
| 112 | - document.documentElement.scrollTop = total //firefox | ||
| 113 | - document.body.scrollTop = total //chrome | ||
| 114 | - window.pageYOffset = total | 123 | + if (index == 4) { |
| 124 | + this.flag = false | ||
| 125 | + return | ||
| 126 | + } else { | ||
| 127 | + this.flag = true | ||
| 128 | + // 对应锚点 | ||
| 129 | + this.$nextTick(function () { | ||
| 130 | + let jump = document.getElementsByClassName('anchor') | ||
| 131 | + let total = jump[index].offsetTop | ||
| 132 | + document.documentElement.scrollTop = total //firefox | ||
| 133 | + document.body.scrollTop = total //chrome | ||
| 134 | + window.pageYOffset = total | ||
| 135 | + }) | ||
| 136 | + | ||
| 137 | + } | ||
| 115 | 138 | ||
| 116 | }, | 139 | }, |
| 117 | 140 | ||
| @@ -121,29 +144,51 @@ export default { | @@ -121,29 +144,51 @@ export default { | ||
| 121 | </script> | 144 | </script> |
| 122 | 145 | ||
| 123 | <style scoped lang="scss"> | 146 | <style scoped lang="scss"> |
| 124 | -.cultrue-bg{ | ||
| 125 | - padding-top: 200px; | ||
| 126 | - background: url("../../assets/images/about/culture.png") no-repeat; | ||
| 127 | - background-size: 100% 100%; | ||
| 128 | -} | ||
| 129 | - .cultrue-con{ | 147 | + .cultrue-bg { |
| 148 | + padding-top: 200px; | ||
| 149 | + background: url("../../assets/images/about/culture.png") no-repeat; | ||
| 150 | + background-size: 100% 100%; | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + .cultrue-con { | ||
| 130 | width: 1360px; | 154 | width: 1360px; |
| 131 | - margin: 0 auto ; | 155 | + margin: 0 auto; |
| 132 | height: 369px; | 156 | height: 369px; |
| 133 | background: url("../../assets/images/about/cultrue-con.png") no-repeat; | 157 | background: url("../../assets/images/about/cultrue-con.png") no-repeat; |
| 134 | background-size: 1360px 369px; | 158 | background-size: 1360px 369px; |
| 135 | } | 159 | } |
| 136 | - .natural-list{ | 160 | + |
| 161 | + .natural-list { | ||
| 137 | display: flex; | 162 | display: flex; |
| 138 | justify-content: center; | 163 | justify-content: center; |
| 139 | } | 164 | } |
| 140 | -.natural-list li{ | ||
| 141 | - margin-right: 64px; | ||
| 142 | - img{ | ||
| 143 | - width: 272px; | ||
| 144 | - height: 172px; | ||
| 145 | - margin-bottom: 38px; | 165 | + |
| 166 | + .natural-list li { | ||
| 167 | + margin-right: 64px; | ||
| 168 | + img { | ||
| 169 | + width: 272px; | ||
| 170 | + height: 172px; | ||
| 171 | + margin-bottom: 38px; | ||
| 172 | + } | ||
| 173 | + } | ||
| 174 | + | ||
| 175 | + .honour-wrapper { | ||
| 176 | + overflow: hidden; | ||
| 177 | + font-size: 12px; | ||
| 178 | + text-align: center; | ||
| 179 | + margin-bottom: 20px; | ||
| 180 | + li{ | ||
| 181 | + float: left; | ||
| 182 | + margin: 0 72px 20px 0 ; | ||
| 183 | + img{ | ||
| 184 | + width: 282px; | ||
| 185 | + height: 178px; | ||
| 186 | + margin-bottom: 20px; | ||
| 187 | + } | ||
| 188 | + &:nth-of-type(4n+0){ | ||
| 189 | + margin-right: 0; | ||
| 190 | + } | ||
| 191 | + } | ||
| 146 | } | 192 | } |
| 147 | -} | ||
| 148 | 193 | ||
| 149 | </style> | 194 | </style> |