footer.vue
3.87 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
<template>
<div class="footer">
<div class="banxin">
<div class="top">
<div class="leftBox">
<p class="title">客服电话</p>
<p class="number">158 2848 4010</p>
<p class="time">09:00-23:00</p>
<div class="consult">咨询客服</div>
</div>
<div class="centerBox">
<p class="title">关注锦江公园</p>
<p>专注于客单价，转化率提升！</p>
<p>便捷高效，助力各大商家提升客单价，</p>
<p>客户引导，提高复购，</p>
<p>只为更好的服务每一位用户。</p>
</div>
<div class="rightBox">
<div class="aboutUs">
<p class="title">关于我们</p>
<p class="cur-poi">了解我们</p>
<p class="cur-poi">合作咨询</p>
<p class="cur-poi">联系我们</p>
</div>
<div class="qrCode">
<p class="title">下载锦江公园</p>
<img src="../../../static/image/qrcode.png" alt="">
</div>
</div>
</div>
<p class="bottom">©2013-2024 锦江公园版权所有，并保留所有权利 蜀ICP备 000000</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang = "scss" scoped>
.footer{
width: 100%;
height: 384px;
background-color: #3f9b6a;
opacity: 0.82;
color: #FFFFFF;
overflow: hidden;
.banxin{
width: 1252px;
height: 100%;
margin: 0 auto;
.top{
margin-top: 100px;
display: flex;
margin-bottom: 38px;
text-align: center;
.leftBox{
flex: 1;
display: flex;
flex-direction: column;
.title{
font-size: 16px;
margin-bottom: 33px;
}
.number{
font-size: 40px;
margin-bottom: 12px;
font-weight: 500;
}
.time{
font-size: 18px;
margin-bottom: 33px;
}
.consult{
cursor: pointer;
margin: 0 auto;
width: 220px;
height: 36px;
line-height: 36px;
border: 1px solid #FFFFFF;
box-sizing: border-box;
opacity: 0.6;
}
}
.centerBox{
flex: 1;
border-left: 2px solid rgba($color: #FFFFFF, $alpha: 0.15);
border-right: 2px solid rgba($color: #FFFFFF, $alpha: 0.15);
p{
font-size: 16px;
line-height: 25px;
}
.title{
margin-bottom: 33px;
}
}
.rightBox{
flex: 1;
display: flex;
.aboutUs{
flex: 1;
p{
margin-bottom: 20px;
}
.title{
margin-bottom: 33px;
}
}
.qrCode{
flex: 1;
.title{
margin-bottom: 33px;
}
img{
width: 106px;
height: 106px;
}
}
}
}
.bottom{
text-align: center;
font-size: 12px;
line-height: 24px;
color: #fff;
}
}
}
</style>