页首页脚
Showing
13 changed files
with
209 additions
and
143 deletions
src/assets/images/home/footer-icon-b-1.png
0 → 100644
1.01 KB
src/assets/images/home/footer-icon-b-2.png
0 → 100644
589 Bytes
src/assets/images/home/footer-icon-b-3.png
0 → 100644
544 Bytes
| ... | @@ -8,6 +8,7 @@ module.exports = { | ... | @@ -8,6 +8,7 @@ module.exports = { | 
| 8 | Age: "Age", | 8 | Age: "Age", | 
| 9 | Birthday: "Birthday", | 9 | Birthday: "Birthday", | 
| 10 | SubmitSuccess: "Successfully submitted", | 10 | SubmitSuccess: "Successfully submitted", | 
| 11 | Email: "Email", | ||
| 11 | }, | 12 | }, | 
| 12 | message: { | 13 | message: { | 
| 13 | login: 'Login', | 14 | login: 'Login', | 
| ... | @@ -172,6 +173,9 @@ module.exports = { | ... | @@ -172,6 +173,9 @@ module.exports = { | 
| 172 | } | 173 | } | 
| 173 | ] | 174 | ] | 
| 174 | }, | 175 | }, | 
| 176 | header:{ | ||
| 177 | quote: "Quote now", | ||
| 178 | }, | ||
| 175 | footer: { | 179 | footer: { | 
| 176 | hkPhone: "Hong Kong Phone No.", | 180 | hkPhone: "Hong Kong Phone No.", | 
| 177 | cnPhone: "Mainland Phone No.", | 181 | cnPhone: "Mainland Phone No.", | ... | ... | 
| ... | @@ -8,6 +8,7 @@ module.exports = { | ... | @@ -8,6 +8,7 @@ module.exports = { | 
| 8 | Age: "年齡", | 8 | Age: "年齡", | 
| 9 | Birthday: "生日", | 9 | Birthday: "生日", | 
| 10 | SubmitSuccess: "遞交申請成功", | 10 | SubmitSuccess: "遞交申請成功", | 
| 11 | Email: "電郵", | ||
| 11 | }, | 12 | }, | 
| 12 | message: { | 13 | message: { | 
| 13 | login: "Login", | 14 | login: "Login", | 
| ... | @@ -174,6 +175,9 @@ module.exports = { | ... | @@ -174,6 +175,9 @@ module.exports = { | 
| 174 | } | 175 | } | 
| 175 | ] | 176 | ] | 
| 176 | }, | 177 | }, | 
| 178 | header:{ | ||
| 179 | quote: "立即報價", | ||
| 180 | }, | ||
| 177 | footer: { | 181 | footer: { | 
| 178 | hkPhone: "香港號碼", | 182 | hkPhone: "香港號碼", | 
| 179 | cnPhone: "內地號碼", | 183 | cnPhone: "內地號碼", | ... | ... | 
| ... | @@ -8,6 +8,7 @@ module.exports = { | ... | @@ -8,6 +8,7 @@ module.exports = { | 
| 8 | Female: "女性", | 8 | Female: "女性", | 
| 9 | Birthday: "生日", | 9 | Birthday: "生日", | 
| 10 | SubmitSuccess: "递交申请成功", | 10 | SubmitSuccess: "递交申请成功", | 
| 11 | Email: "电邮", | ||
| 11 | }, | 12 | }, | 
| 12 | message: { | 13 | message: { | 
| 13 | login: "登入", | 14 | login: "登入", | 
| ... | @@ -174,6 +175,9 @@ module.exports = { | ... | @@ -174,6 +175,9 @@ module.exports = { | 
| 174 | } | 175 | } | 
| 175 | ] | 176 | ] | 
| 176 | }, | 177 | }, | 
| 178 | header:{ | ||
| 179 | quote: "立即报价", | ||
| 180 | }, | ||
| 177 | footer: { | 181 | footer: { | 
| 178 | hkPhone: "香港号码", | 182 | hkPhone: "香港号码", | 
| 179 | cnPhone: "内地号码", | 183 | cnPhone: "内地号码", | 
| ... | @@ -189,6 +193,10 @@ module.exports = { | ... | @@ -189,6 +193,10 @@ module.exports = { | 
| 189 | contactUs: "联系我们", | 193 | contactUs: "联系我们", | 
| 190 | contactInformation: "联系方式", | 194 | contactInformation: "联系方式", | 
| 191 | service: "服务网络", | 195 | service: "服务网络", | 
| 196 | |||
| 197 | // 新增 | ||
| 198 | |||
| 199 | |||
| 192 | qrcode: "社交媒体", | 200 | qrcode: "社交媒体", | 
| 193 | qrcodeBot: "官方公众号", | 201 | qrcodeBot: "官方公众号", | 
| 194 | copyright: "版权 © 中国平安人寿(香港)有限公司 版权所有" | 202 | copyright: "版权 © 中国平安人寿(香港)有限公司 版权所有" | ... | ... | 
| 1 | |||
| 2 | /** | 1 | /** | 
| 3 | * 组件描述:页脚 | 2 | * 组件描述:页脚 | 
| 4 | * 静态页面 | 3 | * 静态页面 | 
| ... | @@ -36,5 +35,10 @@ export default { | ... | @@ -36,5 +35,10 @@ export default { | 
| 36 | initData() {} | 35 | initData() {} | 
| 37 | }, | 36 | }, | 
| 38 | mounted() {}, | 37 | mounted() {}, | 
| 39 | created() {} | 38 | created() {}, | 
| 39 | // watch: { | ||
| 40 | // "$route": function (to,from) { | ||
| 41 | // console.log("to:",to.name); | ||
| 42 | // } | ||
| 43 | // } | ||
| 40 | } | 44 | } | ... | ... | 
| 1 | @import '@/styles/_support.scss'; | 1 | @import "@/styles/_support.scss"; | 
| 2 | 2 | ||
| 3 | .v-footer { | 3 | .v-footer { | 
| 4 | color: #ffffff; | 4 | color: $cFontGray2; | 
| 5 | background-color: #2e2b2a; | 5 | background-color: #d1d2d3; | 
| 6 | font-size: $fontSize; | 6 | font-size: $fontSize-M2; | 
| 7 | 7 | ||
| 8 | .footer-containter { | 8 | .footer-containter { | 
| 9 | margin: 0 auto; | 9 | margin: 0 auto; | 
| ... | @@ -21,62 +21,96 @@ | ... | @@ -21,62 +21,96 @@ | 
| 21 | .line { | 21 | .line { | 
| 22 | width: 100%; | 22 | width: 100%; | 
| 23 | height: 1px; | 23 | height: 1px; | 
| 24 | opacity: 0.2; | 24 | background-color: #c1c2c4; | 
| 25 | background-color: #ffffff; | ||
| 26 | } | 25 | } | 
| 27 | 26 | ||
| 28 | // 信息 | 27 | // 信息 | 
| 29 | .info { | 28 | .info { | 
| 30 | padding: 24px 0 24px; | 29 | padding: 100px 0 20px; | 
| 31 | display: flex; | 30 | display: flex; | 
| 31 | justify-content: space-between; | ||
| 32 | 32 | ||
| 33 | // 热线 | 33 | // 热线 左边菜单 | 
| 34 | .hotline { | 34 | .hotline { | 
| 35 | min-width: 294px; | 35 | @extend .bb; | 
| 36 | min-width: 360px; | ||
| 37 | padding-right: 24px; | ||
| 38 | |||
| 39 | &-tit { | ||
| 40 | font-weight: bold; | ||
| 41 | margin-bottom: 12px; | ||
| 42 | color: #000000; | ||
| 43 | } | ||
| 36 | 44 | ||
| 37 | .contact { | 45 | .contact { | 
| 46 | margin-bottom: 12px; | ||
| 38 | .n-item { | 47 | .n-item { | 
| 39 | margin-bottom: 7.2px; | ||
| 40 | } | 48 | } | 
| 41 | 49 | ||
| 42 | .phone { | 50 | .phone { | 
| 43 | color: $cOrange; | 51 | color: $cOrange2; | 
| 44 | font-size: $fontSizeTitle; | ||
| 45 | font-weight: bold; | 52 | font-weight: bold; | 
| 53 | font-size: 30px; | ||
| 46 | } | 54 | } | 
| 47 | 55 | ||
| 48 | &:first-child { | 56 | &:first-child { | 
| 49 | margin-bottom: 24px; | 57 | // margin-bottom: 24px; | 
| 50 | } | 58 | } | 
| 51 | } | 59 | } | 
| 60 | |||
| 61 | .server-time { | ||
| 62 | } | ||
| 63 | |||
| 64 | .contact-us { | ||
| 65 | margin-top: 36px; | ||
| 66 | .tit { | ||
| 67 | color: #000000; | ||
| 68 | } | ||
| 52 | } | 69 | } | 
| 53 | 70 | ||
| 54 | // 导航 | 71 | .email { | 
| 72 | margin-top: 36px; | ||
| 73 | } | ||
| 74 | } | ||
| 75 | |||
| 76 | // 导航 中间菜单 PC | ||
| 55 | .nav { | 77 | .nav { | 
| 56 | display: flex; | 78 | display: flex; | 
| 57 | 79 | ||
| 58 | .nav-v {} | 80 | .nav-v { | 
| 59 | |||
| 60 | .n-item { | 81 | .n-item { | 
| 61 | cursor: pointer; | 82 | cursor: pointer; | 
| 62 | min-width: 177px; | 83 | @extend .bb; | 
| 84 | width: 200px; | ||
| 85 | padding-right: 12px; | ||
| 86 | margin-bottom: 12px; | ||
| 87 | } | ||
| 63 | } | 88 | } | 
| 64 | } | 89 | } | 
| 65 | 90 | ||
| 91 | // 导航 中间菜单 mobile | ||
| 66 | .nav2 { | 92 | .nav2 { | 
| 67 | display: none; | 93 | display: none; | 
| 68 | } | 94 | } | 
| 69 | 95 | ||
| 70 | // 公众号 | 96 | // 公众号 右边菜单 | 
| 71 | .public { | 97 | .public { | 
| 72 | position: relative; | 98 | position: relative; | 
| 73 | text-align: left; | 99 | text-align: left; | 
| 74 | margin-left: 63.84px; | 100 | |
| 101 | .tit { | ||
| 102 | margin-bottom: 24px; | ||
| 103 | } | ||
| 104 | |||
| 105 | .icon-wrap { | ||
| 106 | position: relative; | ||
| 107 | } | ||
| 75 | 108 | ||
| 76 | .qrcode-wrap { | 109 | .qrcode-wrap { | 
| 110 | position: absolute; | ||
| 77 | text-align: center; | 111 | text-align: center; | 
| 78 | margin-top: 3.6px; | 112 | left: 0; | 
| 79 | 113 | top: 60px; | |
| 80 | 114 | ||
| 81 | .qrcode { | 115 | .qrcode { | 
| 82 | width: 100px; | 116 | width: 100px; | 
| ... | @@ -88,82 +122,70 @@ | ... | @@ -88,82 +122,70 @@ | 
| 88 | } | 122 | } | 
| 89 | 123 | ||
| 90 | .icon { | 124 | .icon { | 
| 91 | margin-top: 9px; | 125 | margin-right: 27px; | 
| 92 | margin-right: 12px; | ||
| 93 | display: inline-block; | 126 | display: inline-block; | 
| 127 | margin-bottom: 24px; | ||
| 128 | &:last-child { | ||
| 129 | margin-right: 0; | ||
| 130 | } | ||
| 94 | } | 131 | } | 
| 95 | } | 132 | } | 
| 96 | 133 | ||
| 97 | // 公共组件 | 134 | // 公共组件 | 
| 98 | .n-item { | 135 | .n-item { | 
| 99 | margin-bottom: 24px; | 136 | // &:last-child { | 
| 100 | padding-right: 36px; | 137 | // margin-bottom: 0; | 
| 101 | color: #dcdddd; | 138 | // } | 
| 102 | |||
| 103 | &:first-child { | ||
| 104 | margin-bottom: 32px; | ||
| 105 | } | ||
| 106 | |||
| 107 | &:last-child { | ||
| 108 | margin-bottom: 0; | ||
| 109 | } | 139 | } | 
| 140 | .n-item-tit { | ||
| 141 | color: #000000; | ||
| 142 | cursor: default !important; | ||
| 110 | } | 143 | } | 
| 111 | } | 144 | } | 
| 112 | 145 | ||
| 113 | // 版权 | 146 | // 版权 | 
| 114 | .copyright { | 147 | .copyright { | 
| 115 | color: rgba(179, 177, 168, 0.5); | 148 | padding: 52px 0 60px; | 
| 116 | padding: 18px 0; | ||
| 117 | line-height: 1.58; | 149 | line-height: 1.58; | 
| 118 | font-size: $fontSizeSmall; | ||
| 119 | } | 150 | } | 
| 120 | } | 151 | } | 
| 121 | |||
| 122 | } | 152 | } | 
| 123 | } | 153 | } | 
| 124 | 154 | ||
| 125 | |||
| 126 | @media (max-width: 1200px) { | 155 | @media (max-width: 1200px) { | 
| 127 | .v-footer { | 156 | .v-footer { | 
| 128 | @include content-percent(); | 157 | @include content-percent(); | 
| 158 | } | ||
| 159 | } | ||
| 160 | |||
| 161 | @media (max-width: 980px) { | ||
| 162 | .v-footer { | ||
| 163 | @include content-percent(); | ||
| 129 | 164 | ||
| 130 | .footer-containter { | 165 | .footer-containter { | 
| 131 | .cont { | 166 | .cont { | 
| 132 | .info { | 167 | .info { | 
| 133 | display: block; | 168 | // display: block; | 
| 134 | |||
| 135 | .hotline {} | ||
| 136 | |||
| 137 | .nav { | ||
| 138 | margin-top: 24px; | ||
| 139 | display: flex; | 169 | display: flex; | 
| 170 | flex-wrap: wrap; | ||
| 140 | 171 | ||
| 141 | .nav-v { | 172 | .hotline { | 
| 142 | width: 100%; | ||
| 143 | } | 173 | } | 
| 144 | 174 | ||
| 145 | .n-item { | 175 | .nav { | 
| 146 | min-width: 0; | 176 | margin-top: 24px; | 
| 147 | margin-right: 0; | ||
| 148 | padding-right: 10px; | ||
| 149 | } | ||
| 150 | } | 177 | } | 
| 151 | 178 | ||
| 152 | .nav2 { | 179 | .nav2 { | 
| 153 | display: none; | 180 | margin-top: 24px; | 
| 154 | } | 181 | } | 
| 155 | 182 | ||
| 156 | .public { | 183 | .public { | 
| 157 | margin: 0; | 184 | margin-top: 24px; | 
| 158 | margin-top: 36px; | ||
| 159 | text-align: left; | ||
| 160 | min-height: 144px; | ||
| 161 | } | 185 | } | 
| 162 | } | 186 | } | 
| 163 | 187 | ||
| 164 | .copyright { | 188 | .copyright { | 
| 165 | box-sizing: border-box; | ||
| 166 | padding-right: 24px; | ||
| 167 | } | 189 | } | 
| 168 | } | 190 | } | 
| 169 | } | 191 | } | 
| ... | @@ -172,41 +194,43 @@ | ... | @@ -172,41 +194,43 @@ | 
| 172 | 194 | ||
| 173 | @media (max-width: 768px) { | 195 | @media (max-width: 768px) { | 
| 174 | .v-footer { | 196 | .v-footer { | 
| 175 | font-size: $fontSizeSmall-M; | 197 | font-size: $fontSizeMb; | 
| 176 | 198 | ||
| 177 | .footer-containter { | 199 | .footer-containter { | 
| 178 | .cont { | 200 | .cont { | 
| 179 | .info { | 201 | .info { | 
| 180 | display: flex; | 202 | display: block; | 
| 181 | justify-content: space-between; | 203 | padding: 32px 0 12px; | 
| 182 | 204 | ||
| 183 | .hotline { | 205 | .hotline { | 
| 184 | min-width: 0; | 206 | min-width: 0; | 
| 185 | 207 | ||
| 208 | .contact { | ||
| 186 | .phone { | 209 | .phone { | 
| 187 | font-size: $fontSizeSmall-M !important; | 210 | font-size: $fontSizeTitleMb; | 
| 188 | font-weight: bold !important; | 211 | } | 
| 189 | } | 212 | } | 
| 190 | } | 213 | } | 
| 191 | 214 | ||
| 192 | .nav { | 215 | .nav { | 
| 193 | display: none; | 216 | display: none; | 
| 194 | margin-top: 0; | ||
| 195 | 217 | ||
| 196 | .nav-v {} | 218 | .nav-v { | 
| 219 | } | ||
| 197 | 220 | ||
| 198 | .n-item {} | 221 | .n-item { | 
| 222 | } | ||
| 199 | } | 223 | } | 
| 200 | 224 | ||
| 201 | .nav2 { | 225 | .nav2 { | 
| 202 | display: block; | 226 | // display: block; | 
| 227 | display: flex; | ||
| 203 | } | 228 | } | 
| 204 | 229 | ||
| 205 | .public { | 230 | .public { | 
| 206 | margin: 0; | ||
| 207 | min-width: 108px; | ||
| 208 | |||
| 209 | .qrcode-wrap { | 231 | .qrcode-wrap { | 
| 232 | top: 40px; | ||
| 233 | |||
| 210 | img { | 234 | img { | 
| 211 | width: 84px; | 235 | width: 84px; | 
| 212 | } | 236 | } | 
| ... | @@ -215,6 +239,10 @@ | ... | @@ -215,6 +239,10 @@ | 
| 215 | display: none; | 239 | display: none; | 
| 216 | } | 240 | } | 
| 217 | } | 241 | } | 
| 242 | |||
| 243 | .icon { | ||
| 244 | width: 32px; | ||
| 245 | } | ||
| 218 | } | 246 | } | 
| 219 | 247 | ||
| 220 | // 公共组件 | 248 | // 公共组件 | 
| ... | @@ -227,9 +255,10 @@ | ... | @@ -227,9 +255,10 @@ | 
| 227 | } | 255 | } | 
| 228 | } | 256 | } | 
| 229 | 257 | ||
| 230 | .copyright {} | 258 | .copyright { | 
| 259 | padding: 32px 0; | ||
| 260 | } | ||
| 231 | } | 261 | } | 
| 232 | } | 262 | } | 
| 233 | } | 263 | } | 
| 234 | |||
| 235 | } | 264 | } | ... | ... | 
| ... | @@ -3,13 +3,15 @@ | ... | @@ -3,13 +3,15 @@ | 
| 3 | <footer class="v-footer "> | 3 | <footer class="v-footer "> | 
| 4 | <div class="footer-containter "> | 4 | <div class="footer-containter "> | 
| 5 | <div class="cont"> | 5 | <div class="cont"> | 
| 6 | <div class="logo-wrap"> | 6 | <!-- <div class="logo-wrap"> | 
| 7 | <img class="logo-img" src="@/assets/images/home/footer-logo.png"> | 7 | <img class="logo-img" src="@/assets/images/home/footer-logo.png"> | 
| 8 | </div> | 8 | </div> --> | 
| 9 | <div class="line"></div> | 9 | <!-- <div class="line"></div> --> | 
| 10 | <!-- 信息 --> | 10 | <!-- 信息 --> | 
| 11 | <div class="info"> | 11 | <div class="info"> | 
| 12 | <!-- 左边菜单 --> | ||
| 12 | <div class="hotline"> | 13 | <div class="hotline"> | 
| 14 | <div class="hotline-tit">客戶服務熱線</div> | ||
| 13 | <div class="contact"> | 15 | <div class="contact"> | 
| 14 | <div class="n-item">{{$t('footer.hkPhone')}}</div> | 16 | <div class="n-item">{{$t('footer.hkPhone')}}</div> | 
| 15 | <div class="phone">(852)2983 8866</div> | 17 | <div class="phone">(852)2983 8866</div> | 
| ... | @@ -18,9 +20,35 @@ | ... | @@ -18,9 +20,35 @@ | 
| 18 | <div class="n-item">{{$t('footer.cnPhone')}}</div> | 20 | <div class="n-item">{{$t('footer.cnPhone')}}</div> | 
| 19 | <div class="phone">(86)40078 95511</div> | 21 | <div class="phone">(86)40078 95511</div> | 
| 20 | </div> | 22 | </div> | 
| 23 | <div class="server-time">服務時間:星期一至五 9:00-17:30</div> | ||
| 24 | |||
| 25 | <div class="contact-us"> | ||
| 26 | <div class="tit">{{$t('footer.contactUs')}}</div> | ||
| 27 | <div class="address">香港尖沙咀廣東道21號港威大廈第五座16樓A137</div> | ||
| 28 | <div class="time">服務時間:星期一至五 9:00-17:30</div> | ||
| 29 | </div> | ||
| 30 | <div class="email">{{$t('common.Email')}}:cs@pingan.com.hk</div> | ||
| 21 | </div> | 31 | </div> | 
| 32 | |||
| 33 | <!-- 中间菜单 PC --> | ||
| 22 | <div class="nav"> | 34 | <div class="nav"> | 
| 35 | |||
| 23 | <div class="nav-v"> | 36 | <div class="nav-v"> | 
| 37 | <div class="n-item n-item-tit">產品介紹</div> | ||
| 38 | <div @click="toPage('vhisDetail')" class="n-item">自願醫保</div> | ||
| 39 | <div @click="toPage('genRich')" class="n-item">投資成份保險</div> | ||
| 40 | <div class="n-item">推廣優惠</div> | ||
| 41 | </div> | ||
| 42 | |||
| 43 | <div class="nav-v"> | ||
| 44 | <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div> | ||
| 45 | <div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div> | ||
| 46 | <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div> | ||
| 47 | <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div> | ||
| 48 | <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div> | ||
| 49 | </div> | ||
| 50 | |||
| 51 | <!-- <div class="nav-v"> | ||
| 24 | <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div> | 52 | <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div> | 
| 25 | <div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div> | 53 | <div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div> | 
| 26 | <div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div> | 54 | <div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div> | 
| ... | @@ -37,28 +65,44 @@ | ... | @@ -37,28 +65,44 @@ | 
| 37 | <div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div> | 65 | <div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div> | 
| 38 | <div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div> | 66 | <div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div> | 
| 39 | <div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div> | 67 | <div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div> | 
| 40 | </div> | 68 | </div> --> | 
| 41 | </div> | 69 | </div> | 
| 42 | 70 | ||
| 71 | <!-- 菜单 移动端 --> | ||
| 43 | <div class="nav nav2"> | 72 | <div class="nav nav2"> | 
| 44 | <div class="nav-v"> | 73 | <div class="nav-v"> | 
| 74 | <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div> | ||
| 75 | <div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div> | ||
| 76 | <div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div> | ||
| 77 | |||
| 78 | </div> | ||
| 79 | <div class="nav-v"> | ||
| 80 | <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div> | ||
| 81 | <div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div> | ||
| 45 | <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div> | 82 | <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div> | 
| 46 | <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div> | 83 | <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div> | 
| 47 | <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div> | 84 | <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div> | 
| 48 | </div> | 85 | </div> | 
| 86 | <!-- <div class="nav-v"> | ||
| 87 | <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div> | ||
| 88 | <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div> | ||
| 89 | <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div> | ||
| 90 | </div> --> | ||
| 49 | </div> | 91 | </div> | 
| 50 | 92 | ||
| 93 | <!-- 右边菜单 --> | ||
| 51 | <div class="public"> | 94 | <div class="public"> | 
| 52 | <div class="tit">{{$t('footer.qrcode')}}</div> | 95 | <div class="tit">{{$t('footer.qrcode')}}</div> | 
| 96 | <div class="icon-wrap"> | ||
| 53 | <div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap"> | 97 | <div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap"> | 
| 54 | <img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt=""> | 98 | <img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt=""> | 
| 55 | <div class="c1">{{$t('footer.qrcodeBot')}}</div> | 99 | <div class="c1">{{$t('footer.qrcodeBot')}}</div> | 
| 56 | </div> | 100 | </div> | 
| 57 | <template v-else> | 101 | <img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-b-1.png" alt=""> | 
| 58 | <img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt=""> | 102 | <img class="icon pointer" src="@/assets/images/home/footer-icon-b-2.png" alt=""> | 
| 59 | <img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt=""> | 103 | <img class="icon pointer" src="@/assets/images/home/footer-icon-b-3.png" alt=""> | 
| 60 | <img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt=""> | 104 | </div> | 
| 61 | </template> | 105 | |
| 62 | </div> | 106 | </div> | 
| 63 | 107 | ||
| 64 | </div> | 108 | </div> | ... | ... | 
| ... | @@ -165,22 +165,6 @@ $navHeiM: 72px; | ... | @@ -165,22 +165,6 @@ $navHeiM: 72px; | 
| 165 | } | 165 | } | 
| 166 | 166 | ||
| 167 | @media (max-width: 1100px) { | 167 | @media (max-width: 1100px) { | 
| 168 | // .v-header { | ||
| 169 | // .logo-img { | ||
| 170 | // } | ||
| 171 | // } | ||
| 172 | |||
| 173 | // .pc { | ||
| 174 | // .auth { | ||
| 175 | // margin-right: 20px; | ||
| 176 | // } | ||
| 177 | |||
| 178 | // .nav-item.auth { | ||
| 179 | // .lang { | ||
| 180 | // min-width: auto; | ||
| 181 | // } | ||
| 182 | // } | ||
| 183 | // } | ||
| 184 | } | 168 | } | 
| 185 | 169 | ||
| 186 | @media (max-width: 1020px) { | 170 | @media (max-width: 1020px) { | 
| ... | @@ -190,11 +174,6 @@ $navHeiM: 72px; | ... | @@ -190,11 +174,6 @@ $navHeiM: 72px; | 
| 190 | .main-nav { | 174 | .main-nav { | 
| 191 | } | 175 | } | 
| 192 | 176 | ||
| 193 | // .logo-img { | ||
| 194 | // max-width: 213px; | ||
| 195 | // margin: 0; | ||
| 196 | // } | ||
| 197 | |||
| 198 | .pc { | 177 | .pc { | 
| 199 | display: none; | 178 | display: none; | 
| 200 | } | 179 | } | ... | ... | 
| ... | @@ -46,15 +46,10 @@ | ... | @@ -46,15 +46,10 @@ | 
| 46 | </div> | 46 | </div> | 
| 47 | 47 | ||
| 48 | <!-- 报价 --> | 48 | <!-- 报价 --> | 
| 49 | <div class="main-func-quote"> | 49 | <div class="main-func-quote" > | 
| 50 | 立即報價 | 50 | {{$t('header.quote')}} | 
| 51 | </div> | 51 | </div> | 
| 52 | </div> | 52 | </div> | 
| 53 | <!-- <div class="nav-item search"></div> | ||
| 54 | <div class="nav-item auth"> | ||
| 55 | <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown> | ||
| 56 | <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown> | ||
| 57 | </div> --> | ||
| 58 | </div> | 53 | </div> | 
| 59 | 54 | ||
| 60 | </div> | 55 | </div> | ... | ... | 
| ... | @@ -6,10 +6,10 @@ | ... | @@ -6,10 +6,10 @@ | 
| 6 | * | 6 | * | 
| 7 | */ | 7 | */ | 
| 8 | 8 | ||
| 9 | $contentWidth:1200px; | 9 | $contentWidth: 1200px; | 
| 10 | 10 | ||
| 11 | $borderRadiusSmall:5px; | 11 | $borderRadiusSmall: 5px; | 
| 12 | $borderRadius:8px; | 12 | $borderRadius: 8px; | 
| 13 | 13 | ||
| 14 | // Margin | 14 | // Margin | 
| 15 | $marginSmallHalf: 5px; // 小间距的一半 | 15 | $marginSmallHalf: 5px; // 小间距的一半 | 
| ... | @@ -22,41 +22,44 @@ $paddingSmall: 10px; | ... | @@ -22,41 +22,44 @@ $paddingSmall: 10px; | 
| 22 | $paddingMedium: 28px; | 22 | $paddingMedium: 28px; | 
| 23 | 23 | ||
| 24 | // Font | 24 | // Font | 
| 25 | $fontSizeTitle:16px; | 25 | $fontSizeTitle: 16px; | 
| 26 | $fontSize:14px; | 26 | $fontSize: 14px; | 
| 27 | $fontSizeSmall:12px; | 27 | $fontSizeSmall: 12px; | 
| 28 | |||
| 29 | |||
| 30 | $fontSizeTitle-M:17px; | ||
| 31 | $fontSize-M:14px; | ||
| 32 | $fontSizeSmall-M:12px; | ||
| 33 | 28 | ||
| 29 | $fontSizeTitle-M: 17px; | ||
| 30 | $fontSize-M: 14px; | ||
| 31 | $fontSizeSmall-M: 12px; | ||
| 34 | 32 | ||
| 35 | //新版PC字体 | 33 | //新版PC字体 | 
| 36 | $fontSizeTitle-M2:24px; | 34 | $fontSizeTitle-M2: 24px; | 
| 37 | $fontSize-M2:18px; | 35 | $fontSize-M2: 18px; | 
| 38 | $fontSizeSmall-M2:16px; | 36 | $fontSizeSmall-M2: 16px; | 
| 37 | |||
| 38 | // 暂定移动端字体 | ||
| 39 | $fontSizeTitleMb: 22px; | ||
| 40 | $fontSizeMb: 16px; | ||
| 41 | $fontSizeSmallMb: 14px; | ||
| 39 | 42 | ||
| 40 | // Color | 43 | // Color | 
| 41 | $cOrange:#f05a23; | 44 | $cOrange: #f05a23; | 
| 42 | $cFontGray: #4c4948; | 45 | $cFontGray: #4c4948; | 
| 43 | $cGreen:#006441; | 46 | $cGreen: #006441; | 
| 44 | $cGray:#bfbfbf; | 47 | $cGray: #bfbfbf; | 
| 45 | $cGray2:#494949; | 48 | $cGray2: #494949; | 
| 46 | $cDark:#dcdcdc; | 49 | $cDark: #dcdcdc; | 
| 47 | $cLightBlack:#606266; | 50 | $cLightBlack: #606266; | 
| 48 | $cDisabled:#888888; | 51 | $cDisabled: #888888; | 
| 49 | 52 | ||
| 50 | $cOrange2:#ff6839; | 53 | $cOrange2: #ff6839; | 
| 51 | $cFontGray2: #58595b; | 54 | $cFontGray2: #58595b; | 
| 52 | $cFontGray3: #666666; | 55 | $cFontGray3: #666666; | 
| 53 | 56 | ||
| 54 | // 文章宽度 | 57 | // 文章宽度 | 
| 55 | $articleWidth:1040px; | 58 | $articleWidth: 1040px; | 
| 56 | $articleTitleLarge:36px; | 59 | $articleTitleLarge: 36px; | 
| 57 | $articleStrong:22px; | 60 | $articleStrong: 22px; | 
| 58 | $articleNormal:18px; | 61 | $articleNormal: 18px; | 
| 59 | $articleSmall:16px; | 62 | $articleSmall: 16px; | 
| 60 | 63 | ||
| 61 | // 移动端 | 64 | // 移动端 | 
| 62 | $marginSmall-M: 10px; // 小间距 | 65 | $marginSmall-M: 10px; // 小间距 | 
| ... | @@ -64,4 +67,4 @@ $marginMedium-M: 20px; // 间距 | ... | @@ -64,4 +67,4 @@ $marginMedium-M: 20px; // 间距 | 
| 64 | // $marginLarge: 28px; | 67 | // $marginLarge: 28px; | 
| 65 | 68 | ||
| 66 | // $navHeight-M:90px; // 移动端顶栏高度 | 69 | // $navHeight-M:90px; // 移动端顶栏高度 | 
| 67 | $navHeight-M:72px; // 移动端顶栏高度 | 70 | $navHeight-M: 72px; // 移动端顶栏高度 | ... | ... | 
- 
Please register or sign in to post a comment