默认提交
Showing
9 changed files
with
67 additions
and
10 deletions
| ... | @@ -407,5 +407,8 @@ textarea { | ... | @@ -407,5 +407,8 @@ textarea { |
| 407 | $fontSizeTitle: $fontSizeTitle-M; | 407 | $fontSizeTitle: $fontSizeTitle-M; |
| 408 | $fontSize: $fontSize-M; | 408 | $fontSize: $fontSize-M; |
| 409 | $fontSizeSmall: $fontSizeSmall-M; | 409 | $fontSizeSmall: $fontSizeSmall-M; |
| 410 | .main-container{ | ||
| 411 | margin-bottom: $marginMedium-M; | ||
| 412 | } | ||
| 410 | } | 413 | } |
| 411 | </style> | 414 | </style> | ... | ... |
| ... | @@ -79,11 +79,16 @@ export default { | ... | @@ -79,11 +79,16 @@ export default { |
| 79 | ) | 79 | ) |
| 80 | }); | 80 | }); |
| 81 | this.navList = navList; | 81 | this.navList = navList; |
| 82 | console.log("navList:", this.navList); | ||
| 83 | console.log("langList:", this.langList); | ||
| 84 | } | 82 | } |
| 85 | }, | 83 | }, |
| 86 | created() { | 84 | created() { |
| 87 | this.initData(); | 85 | this.initData(); |
| 88 | }, | 86 | }, |
| 87 | watch: { | ||
| 88 | visible(newVal, oldVal) { | ||
| 89 | this.$nextTick(() => { | ||
| 90 | this.$refs.panel.scrollTop = 0; | ||
| 91 | }); | ||
| 92 | } | ||
| 93 | }, | ||
| 89 | }; | 94 | }; | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <div class="panel" :class="{'hide':!visible}"> | 3 | <div ref="panel" class="panel" :class="{'hide':!visible}"> |
| 4 | <div class="mask" @click="showDropdownM(false)"></div> | 4 | <div class="mask" @click="showDropdownM(false)"></div> |
| 5 | <!-- 列表 --> | 5 | <!-- 列表 --> |
| 6 | <div class="list"> | 6 | <div class="list"> | ... | ... |
| ... | @@ -238,6 +238,21 @@ input { | ... | @@ -238,6 +238,21 @@ input { |
| 238 | 238 | ||
| 239 | @media (max-width: 768px) { | 239 | @media (max-width: 768px) { |
| 240 | .form { | 240 | .form { |
| 241 | display: block; | ||
| 242 | |||
| 243 | &-item { | ||
| 244 | .ipt-wrap { | ||
| 245 | .name-ipt { | ||
| 246 | width: 100%; | ||
| 247 | } | ||
| 248 | |||
| 249 | .phone-ipt { | ||
| 250 | width: 100%; | ||
| 251 | } | ||
| 252 | } | ||
| 253 | |||
| 254 | } | ||
| 255 | |||
| 241 | &-item3 { | 256 | &-item3 { |
| 242 | display: block; | 257 | display: block; |
| 243 | 258 | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | 5 | ||
| 6 | .border { | 6 | .border { |
| 7 | @extend .bb; | 7 | @extend .bb; |
| 8 | padding: 44px 4.0rem 0 55px; | 8 | padding: 3.5rem 4.0rem 2rem 4.5rem; |
| 9 | min-height: 490px; | 9 | min-height: 490px; |
| 10 | border-radius: $borderRadius; | 10 | border-radius: $borderRadius; |
| 11 | border: solid 1px #f2f2f2; | 11 | border: solid 1px #f2f2f2; |
| ... | @@ -15,10 +15,11 @@ | ... | @@ -15,10 +15,11 @@ |
| 15 | .info { | 15 | .info { |
| 16 | display: flex; | 16 | display: flex; |
| 17 | justify-content: space-between; | 17 | justify-content: space-between; |
| 18 | margin-bottom: 4.416667rem; | 18 | flex-wrap: wrap; |
| 19 | 19 | ||
| 20 | &-item { | 20 | &-item { |
| 21 | font-size: $fontSize; | 21 | font-size: $fontSize; |
| 22 | margin-bottom: 4.416667rem; | ||
| 22 | 23 | ||
| 23 | &-tit { | 24 | &-tit { |
| 24 | display: flex; | 25 | display: flex; |
| ... | @@ -62,5 +63,6 @@ | ... | @@ -62,5 +63,6 @@ |
| 62 | .info-item { | 63 | .info-item { |
| 63 | @extend .bb; | 64 | @extend .bb; |
| 64 | padding-right: 2rem; | 65 | padding-right: 2rem; |
| 66 | margin-bottom: 1rem; | ||
| 65 | } | 67 | } |
| 66 | } | 68 | } | ... | ... |
| ... | @@ -2,8 +2,8 @@ | ... | @@ -2,8 +2,8 @@ |
| 2 | <template> | 2 | <template> |
| 3 | <div class="contact-us-container"> | 3 | <div class="contact-us-container"> |
| 4 | <div class=" border"> | 4 | <div class=" border"> |
| 5 | <div class="info"> | 5 | <div class="info gird-g"> |
| 6 | <div class="info-item"> | 6 | <div class="info-item pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"> |
| 7 | <div class="info-item-tit"> | 7 | <div class="info-item-tit"> |
| 8 | <div class="icon-wrap"> | 8 | <div class="icon-wrap"> |
| 9 | <img class="icon" src="@/assets/images/contact-us/icon-cs-service.png"> | 9 | <img class="icon" src="@/assets/images/contact-us/icon-cs-service.png"> |
| ... | @@ -17,7 +17,7 @@ | ... | @@ -17,7 +17,7 @@ |
| 17 | </ul> | 17 | </ul> |
| 18 | </div> | 18 | </div> |
| 19 | </div> | 19 | </div> |
| 20 | <div class="info-item"> | 20 | <div class="info-item pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"> |
| 21 | <div class="info-item-tit"> | 21 | <div class="info-item-tit"> |
| 22 | <div class="icon-wrap"> | 22 | <div class="icon-wrap"> |
| 23 | <img class="icon" src="@/assets/images/contact-us/icon-cs-call.png"> | 23 | <img class="icon" src="@/assets/images/contact-us/icon-cs-call.png"> |
| ... | @@ -32,8 +32,7 @@ | ... | @@ -32,8 +32,7 @@ |
| 32 | </ul> | 32 | </ul> |
| 33 | </div> | 33 | </div> |
| 34 | </div> | 34 | </div> |
| 35 | 35 | <div class="info-item pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"> | |
| 36 | <div class="info-item"> | ||
| 37 | <div class="info-item-tit"> | 36 | <div class="info-item-tit"> |
| 38 | <div class="icon-wrap"> | 37 | <div class="icon-wrap"> |
| 39 | <img class="icon" src="@/assets/images/contact-us/icon-cs-email.png"> | 38 | <img class="icon" src="@/assets/images/contact-us/icon-cs-email.png"> | ... | ... |
| ... | @@ -77,3 +77,24 @@ | ... | @@ -77,3 +77,24 @@ |
| 77 | } | 77 | } |
| 78 | } | 78 | } |
| 79 | } | 79 | } |
| 80 | |||
| 81 | |||
| 82 | @media (max-width: 1200px) { | ||
| 83 | .payment { | ||
| 84 | &-nav { | ||
| 85 | display: -webkit-box; | ||
| 86 | overflow-x: scroll; | ||
| 87 | -webkit-overflow-scrolling: touch; | ||
| 88 | width: 92vw; | ||
| 89 | } | ||
| 90 | } | ||
| 91 | } | ||
| 92 | |||
| 93 | /* 隐藏下方的滚动条 */ | ||
| 94 | // .payment-nav::-webkit-scrollbar { | ||
| 95 | // background-color: transparent; | ||
| 96 | // } | ||
| 97 | |||
| 98 | .payment-nav::-webkit-scrollbar { | ||
| 99 | display: none; | ||
| 100 | } | ... | ... |
| ... | @@ -210,11 +210,20 @@ input { | ... | @@ -210,11 +210,20 @@ input { |
| 210 | 210 | ||
| 211 | @media (max-width: 768px) { | 211 | @media (max-width: 768px) { |
| 212 | .form { | 212 | .form { |
| 213 | &-item2 { | ||
| 214 | display: block; | ||
| 215 | |||
| 216 | .ipt-wrap { | ||
| 217 | margin: 0; | ||
| 218 | } | ||
| 219 | } | ||
| 220 | |||
| 213 | &-item3 { | 221 | &-item3 { |
| 214 | display: block; | 222 | display: block; |
| 215 | 223 | ||
| 216 | .ipt-wrap { | 224 | .ipt-wrap { |
| 217 | margin: 0; | 225 | margin: 0; |
| 226 | width: 100%; | ||
| 218 | } | 227 | } |
| 219 | } | 228 | } |
| 220 | } | 229 | } | ... | ... |
-
Please register or sign in to post a comment