index.vue
5.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<template>
<div>
<commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner>
<div class="tab-wrapper">
<ul class="tab-main widthCommon">
<li
v-for="(item, index) in tabData"
:key="item"
@click="changeTab(index,item)"
:class="{tabActive:currentIndex==index}"
>{{item}}
</li>
</ul>
</div>
<div class="bread">
<div class=" widthCommon">
您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 产品中心 -> {{name}}
</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;">
中兴智能交通股份有限公司成立于2000年4月，是致力于智能交通领域的专业公司，是中国首批从事智能交通（
公司的主营业务面向城市交通（公安交通、公共交通、智慧停车），城际交通（高速公路和铁路）和综合交通信息服务领域，为城市公安交通、公共交通、智慧停车、高速公路和轨道交通五大综合交通运输领域提供交通规划、方案设计、系统建设、运营和服务，构建以智能交通核心技术的产品研发、生产、系统建设和维护为一体的动静态交通业务生态服务体系。为客户提供个性化的智能交通解决方案和技术服务。同时公司在以智慧停车产品的研发、生产、销售和服务为基础的静态交通服务的基础上，为用户提供
"
互联网+智慧停车
"的"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;">
</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 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>
</template>
<script>
import commonBanner from '@/components/commonBanner'
export default {
name: 'index',
components: {
commonBanner
},
data() {
return {
tabData: [
'公司简介', '发展历程', '企业文化', '资质认证', '荣誉证书'
],
currentIndex: 0,
tabView: 'selectTab0',
name: '',
scroll: '',
flag: true
}
},
mounted() {
this.name = this.tabData[0]
},
methods: {
dataScroll: function () {
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
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
})
}
},
}
}
</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 {
width: 1360px;
margin: 0 auto;
height: 369px;
background: url("../../assets/images/about/cultrue-con.png") no-repeat;
background-size: 1360px 369px;
}
.natural-list {
display: flex;
justify-content: center;
}
.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>