fengchengzhi
7 years ago
20 changed files with 1579 additions and 122 deletions
Split View
Diff Options
-
106build/webpack.base.conf.js
-
1index.html
-
253package-lock.json
-
12package.json
-
19src/api/home.js
-
BINsrc/assets/images/home/coupon.png
-
BINsrc/assets/images/home/new-card.png
-
BINsrc/assets/images/home/new-card2.png
-
BINsrc/assets/images/icon/logo.png
-
BINsrc/assets/images/icon/position.png
-
618src/assets/styles/swiper.css
-
5src/assets/styles/weui.min.css
-
6src/common/weui.js
-
7src/main.js
-
28src/models/home-model.js
-
2src/models/utils-model.js
-
14src/router/index.js
-
137src/view/demo.vue
-
353src/view/home.vue
-
140src/view/poster.vue
@ -0,0 +1,19 @@ |
|||
|
|||
export default { |
|||
//获取商品列表
|
|||
getGoods: { |
|||
method: 'GET', |
|||
url: '/mall/web/goods/list', |
|||
}, |
|||
//获取地址数据
|
|||
getAddress:{ |
|||
method: 'GET', |
|||
url:'/web/address/openRegion' |
|||
}, |
|||
//获取默认地址
|
|||
getdefaultAddress: { |
|||
method: 'GET', |
|||
url: '/mall/web/defaultDistrict' |
|||
} |
|||
|
|||
} |
|||
| Before | After |
|---|---|
|
|
| Width: 1038 | Height: 191 | Size: 101 KiB |
| Before | After |
|---|---|
|
|
| Width: 1020 | Height: 59 | Size: 13 KiB |
| Before | After |
|---|---|
|
|
| Width: 1020 | Height: 59 | Size: 12 KiB |
| Before | After |
|---|---|
|
|
| Width: 266 | Height: 45 | Size: 4.7 KiB |
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 38 | Size: 1.6 KiB |
@ -0,0 +1,618 @@ |
|||
/** |
|||
* Swiper 4.3.5 |
|||
* Most modern mobile touch slider and framework with hardware accelerated transitions |
|||
* http://www.idangero.us/swiper/ |
|||
* |
|||
* Copyright 2014-2018 Vladimir Kharlampidi |
|||
* |
|||
* Released under the MIT License |
|||
* |
|||
* Released on: July 31, 2018 |
|||
*/ |
|||
.swiper-container { |
|||
margin: 0 auto; |
|||
position: relative; |
|||
overflow: hidden; |
|||
list-style: none; |
|||
padding: 0; |
|||
/* Fix of Webkit flickering */ |
|||
z-index: 1; |
|||
} |
|||
.swiper-container-no-flexbox .swiper-slide { |
|||
float: left; |
|||
} |
|||
.swiper-container-vertical > .swiper-wrapper { |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-webkit-flex-direction: column; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
} |
|||
.swiper-wrapper { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-transition-property: -webkit-transform; |
|||
transition-property: -webkit-transform; |
|||
-o-transition-property: transform; |
|||
transition-property: transform; |
|||
transition-property: transform, -webkit-transform; |
|||
-webkit-box-sizing: content-box; |
|||
box-sizing: content-box; |
|||
} |
|||
.swiper-container-android .swiper-slide, |
|||
.swiper-wrapper { |
|||
-webkit-transform: translate3d(0px, 0, 0); |
|||
transform: translate3d(0px, 0, 0); |
|||
} |
|||
.swiper-container-multirow > .swiper-wrapper { |
|||
-webkit-flex-wrap: wrap; |
|||
-ms-flex-wrap: wrap; |
|||
flex-wrap: wrap; |
|||
} |
|||
.swiper-container-free-mode > .swiper-wrapper { |
|||
-webkit-transition-timing-function: ease-out; |
|||
-o-transition-timing-function: ease-out; |
|||
transition-timing-function: ease-out; |
|||
margin: 0 auto; |
|||
} |
|||
.swiper-slide { |
|||
-webkit-flex-shrink: 0; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
-webkit-transition-property: -webkit-transform; |
|||
transition-property: -webkit-transform; |
|||
-o-transition-property: transform; |
|||
transition-property: transform; |
|||
transition-property: transform, -webkit-transform; |
|||
} |
|||
.swiper-invisible-blank-slide { |
|||
visibility: hidden; |
|||
} |
|||
/* Auto Height */ |
|||
.swiper-container-autoheight, |
|||
.swiper-container-autoheight .swiper-slide { |
|||
height: auto; |
|||
} |
|||
.swiper-container-autoheight .swiper-wrapper { |
|||
-webkit-box-align: start; |
|||
-webkit-align-items: flex-start; |
|||
-ms-flex-align: start; |
|||
align-items: flex-start; |
|||
-webkit-transition-property: height, -webkit-transform; |
|||
transition-property: height, -webkit-transform; |
|||
-o-transition-property: transform, height; |
|||
transition-property: transform, height; |
|||
transition-property: transform, height, -webkit-transform; |
|||
} |
|||
/* 3D Effects */ |
|||
.swiper-container-3d { |
|||
-webkit-perspective: 1200px; |
|||
perspective: 1200px; |
|||
} |
|||
.swiper-container-3d .swiper-wrapper, |
|||
.swiper-container-3d .swiper-slide, |
|||
.swiper-container-3d .swiper-slide-shadow-left, |
|||
.swiper-container-3d .swiper-slide-shadow-right, |
|||
.swiper-container-3d .swiper-slide-shadow-top, |
|||
.swiper-container-3d .swiper-slide-shadow-bottom, |
|||
.swiper-container-3d .swiper-cube-shadow { |
|||
-webkit-transform-style: preserve-3d; |
|||
transform-style: preserve-3d; |
|||
} |
|||
.swiper-container-3d .swiper-slide-shadow-left, |
|||
.swiper-container-3d .swiper-slide-shadow-right, |
|||
.swiper-container-3d .swiper-slide-shadow-top, |
|||
.swiper-container-3d .swiper-slide-shadow-bottom { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
pointer-events: none; |
|||
z-index: 10; |
|||
} |
|||
.swiper-container-3d .swiper-slide-shadow-left { |
|||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
|||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-container-3d .swiper-slide-shadow-right { |
|||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
|||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-container-3d .swiper-slide-shadow-top { |
|||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
|||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-container-3d .swiper-slide-shadow-bottom { |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); |
|||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
/* IE10 Windows Phone 8 Fixes */ |
|||
.swiper-container-wp8-horizontal, |
|||
.swiper-container-wp8-horizontal > .swiper-wrapper { |
|||
-ms-touch-action: pan-y; |
|||
touch-action: pan-y; |
|||
} |
|||
.swiper-container-wp8-vertical, |
|||
.swiper-container-wp8-vertical > .swiper-wrapper { |
|||
-ms-touch-action: pan-x; |
|||
touch-action: pan-x; |
|||
} |
|||
.swiper-button-prev, |
|||
.swiper-button-next { |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 27px; |
|||
height: 44px; |
|||
margin-top: -22px; |
|||
z-index: 10; |
|||
cursor: pointer; |
|||
background-size: 27px 44px; |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.swiper-button-prev.swiper-button-disabled, |
|||
.swiper-button-next.swiper-button-disabled { |
|||
opacity: 0.35; |
|||
cursor: auto; |
|||
pointer-events: none; |
|||
} |
|||
.swiper-button-prev, |
|||
.swiper-container-rtl .swiper-button-next { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); |
|||
left: 10px; |
|||
right: auto; |
|||
} |
|||
.swiper-button-next, |
|||
.swiper-container-rtl .swiper-button-prev { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); |
|||
right: 10px; |
|||
left: auto; |
|||
} |
|||
.swiper-button-prev.swiper-button-white, |
|||
.swiper-container-rtl .swiper-button-next.swiper-button-white { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); |
|||
} |
|||
.swiper-button-next.swiper-button-white, |
|||
.swiper-container-rtl .swiper-button-prev.swiper-button-white { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); |
|||
} |
|||
.swiper-button-prev.swiper-button-black, |
|||
.swiper-container-rtl .swiper-button-next.swiper-button-black { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); |
|||
} |
|||
.swiper-button-next.swiper-button-black, |
|||
.swiper-container-rtl .swiper-button-prev.swiper-button-black { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); |
|||
} |
|||
.swiper-button-lock { |
|||
display: none; |
|||
} |
|||
.swiper-pagination { |
|||
position: absolute; |
|||
text-align: center; |
|||
-webkit-transition: 300ms opacity; |
|||
-o-transition: 300ms opacity; |
|||
transition: 300ms opacity; |
|||
-webkit-transform: translate3d(0, 0, 0); |
|||
transform: translate3d(0, 0, 0); |
|||
z-index: 10; |
|||
} |
|||
.swiper-pagination.swiper-pagination-hidden { |
|||
opacity: 0; |
|||
} |
|||
/* Common Styles */ |
|||
.swiper-pagination-fraction, |
|||
.swiper-pagination-custom, |
|||
.swiper-container-horizontal > .swiper-pagination-bullets { |
|||
bottom: 10px; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
/* Bullets */ |
|||
.swiper-pagination-bullets-dynamic { |
|||
overflow: hidden; |
|||
font-size: 0; |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
-webkit-transform: scale(0.33); |
|||
-ms-transform: scale(0.33); |
|||
transform: scale(0.33); |
|||
position: relative; |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { |
|||
-webkit-transform: scale(1); |
|||
-ms-transform: scale(1); |
|||
transform: scale(1); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { |
|||
-webkit-transform: scale(1); |
|||
-ms-transform: scale(1); |
|||
transform: scale(1); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { |
|||
-webkit-transform: scale(0.66); |
|||
-ms-transform: scale(0.66); |
|||
transform: scale(0.66); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { |
|||
-webkit-transform: scale(0.33); |
|||
-ms-transform: scale(0.33); |
|||
transform: scale(0.33); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { |
|||
-webkit-transform: scale(0.66); |
|||
-ms-transform: scale(0.66); |
|||
transform: scale(0.66); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { |
|||
-webkit-transform: scale(0.33); |
|||
-ms-transform: scale(0.33); |
|||
transform: scale(0.33); |
|||
} |
|||
.swiper-pagination-bullet { |
|||
width: 8px; |
|||
height: 8px; |
|||
display: inline-block; |
|||
border-radius: 100%; |
|||
background: #000; |
|||
opacity: 0.2; |
|||
} |
|||
button.swiper-pagination-bullet { |
|||
border: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
.swiper-pagination-clickable .swiper-pagination-bullet { |
|||
cursor: pointer; |
|||
} |
|||
.swiper-pagination-bullet-active { |
|||
opacity: 1; |
|||
background: #007aff; |
|||
} |
|||
.swiper-container-vertical > .swiper-pagination-bullets { |
|||
right: 10px; |
|||
top: 50%; |
|||
-webkit-transform: translate3d(0px, -50%, 0); |
|||
transform: translate3d(0px, -50%, 0); |
|||
} |
|||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { |
|||
margin: 6px 0; |
|||
display: block; |
|||
} |
|||
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
|||
top: 50%; |
|||
-webkit-transform: translateY(-50%); |
|||
-ms-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
width: 8px; |
|||
} |
|||
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
display: inline-block; |
|||
-webkit-transition: 200ms top, 200ms -webkit-transform; |
|||
transition: 200ms top, 200ms -webkit-transform; |
|||
-o-transition: 200ms transform, 200ms top; |
|||
transition: 200ms transform, 200ms top; |
|||
transition: 200ms transform, 200ms top, 200ms -webkit-transform; |
|||
} |
|||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { |
|||
margin: 0 4px; |
|||
} |
|||
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
|||
left: 50%; |
|||
-webkit-transform: translateX(-50%); |
|||
-ms-transform: translateX(-50%); |
|||
transform: translateX(-50%); |
|||
white-space: nowrap; |
|||
} |
|||
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
-webkit-transition: 200ms left, 200ms -webkit-transform; |
|||
transition: 200ms left, 200ms -webkit-transform; |
|||
-o-transition: 200ms transform, 200ms left; |
|||
transition: 200ms transform, 200ms left; |
|||
transition: 200ms transform, 200ms left, 200ms -webkit-transform; |
|||
} |
|||
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
-webkit-transition: 200ms right, 200ms -webkit-transform; |
|||
transition: 200ms right, 200ms -webkit-transform; |
|||
-o-transition: 200ms transform, 200ms right; |
|||
transition: 200ms transform, 200ms right; |
|||
transition: 200ms transform, 200ms right, 200ms -webkit-transform; |
|||
} |
|||
/* Progress */ |
|||
.swiper-pagination-progressbar { |
|||
background: rgba(0, 0, 0, 0.25); |
|||
position: absolute; |
|||
} |
|||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
|||
background: #007aff; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
-webkit-transform: scale(0); |
|||
-ms-transform: scale(0); |
|||
transform: scale(0); |
|||
-webkit-transform-origin: left top; |
|||
-ms-transform-origin: left top; |
|||
transform-origin: left top; |
|||
} |
|||
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
|||
-webkit-transform-origin: right top; |
|||
-ms-transform-origin: right top; |
|||
transform-origin: right top; |
|||
} |
|||
.swiper-container-horizontal > .swiper-pagination-progressbar, |
|||
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { |
|||
width: 100%; |
|||
height: 4px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-container-vertical > .swiper-pagination-progressbar, |
|||
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { |
|||
width: 4px; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-pagination-white .swiper-pagination-bullet-active { |
|||
background: #ffffff; |
|||
} |
|||
.swiper-pagination-progressbar.swiper-pagination-white { |
|||
background: rgba(255, 255, 255, 0.25); |
|||
} |
|||
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { |
|||
background: #ffffff; |
|||
} |
|||
.swiper-pagination-black .swiper-pagination-bullet-active { |
|||
background: #000000; |
|||
} |
|||
.swiper-pagination-progressbar.swiper-pagination-black { |
|||
background: rgba(0, 0, 0, 0.25); |
|||
} |
|||
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { |
|||
background: #000000; |
|||
} |
|||
.swiper-pagination-lock { |
|||
display: none; |
|||
} |
|||
/* Scrollbar */ |
|||
.swiper-scrollbar { |
|||
border-radius: 10px; |
|||
position: relative; |
|||
-ms-touch-action: none; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.swiper-container-horizontal > .swiper-scrollbar { |
|||
position: absolute; |
|||
left: 1%; |
|||
bottom: 3px; |
|||
z-index: 50; |
|||
height: 5px; |
|||
width: 98%; |
|||
} |
|||
.swiper-container-vertical > .swiper-scrollbar { |
|||
position: absolute; |
|||
right: 3px; |
|||
top: 1%; |
|||
z-index: 50; |
|||
width: 5px; |
|||
height: 98%; |
|||
} |
|||
.swiper-scrollbar-drag { |
|||
height: 100%; |
|||
width: 100%; |
|||
position: relative; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 10px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-scrollbar-cursor-drag { |
|||
cursor: move; |
|||
} |
|||
.swiper-scrollbar-lock { |
|||
display: none; |
|||
} |
|||
.swiper-zoom-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-webkit-justify-content: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-webkit-align-items: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
.swiper-zoom-container > img, |
|||
.swiper-zoom-container > svg, |
|||
.swiper-zoom-container > canvas { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
-o-object-fit: contain; |
|||
object-fit: contain; |
|||
} |
|||
.swiper-slide-zoomed { |
|||
cursor: move; |
|||
} |
|||
/* Preloader */ |
|||
.swiper-lazy-preloader { |
|||
width: 42px; |
|||
height: 42px; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
margin-left: -21px; |
|||
margin-top: -21px; |
|||
z-index: 10; |
|||
-webkit-transform-origin: 50%; |
|||
-ms-transform-origin: 50%; |
|||
transform-origin: 50%; |
|||
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; |
|||
animation: swiper-preloader-spin 1s steps(12, end) infinite; |
|||
} |
|||
.swiper-lazy-preloader:after { |
|||
display: block; |
|||
content: ''; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
|||
background-position: 50%; |
|||
background-size: 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.swiper-lazy-preloader-white:after { |
|||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); |
|||
} |
|||
@-webkit-keyframes swiper-preloader-spin { |
|||
100% { |
|||
-webkit-transform: rotate(360deg); |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
@keyframes swiper-preloader-spin { |
|||
100% { |
|||
-webkit-transform: rotate(360deg); |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
/* a11y */ |
|||
.swiper-container .swiper-notification { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
pointer-events: none; |
|||
opacity: 0; |
|||
z-index: -1000; |
|||
} |
|||
.swiper-container-fade.swiper-container-free-mode .swiper-slide { |
|||
-webkit-transition-timing-function: ease-out; |
|||
-o-transition-timing-function: ease-out; |
|||
transition-timing-function: ease-out; |
|||
} |
|||
.swiper-container-fade .swiper-slide { |
|||
pointer-events: none; |
|||
-webkit-transition-property: opacity; |
|||
-o-transition-property: opacity; |
|||
transition-property: opacity; |
|||
} |
|||
.swiper-container-fade .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-container-fade .swiper-slide-active, |
|||
.swiper-container-fade .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-container-cube { |
|||
overflow: visible; |
|||
} |
|||
.swiper-container-cube .swiper-slide { |
|||
pointer-events: none; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
z-index: 1; |
|||
visibility: hidden; |
|||
-webkit-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.swiper-container-cube .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-container-cube.swiper-container-rtl .swiper-slide { |
|||
-webkit-transform-origin: 100% 0; |
|||
-ms-transform-origin: 100% 0; |
|||
transform-origin: 100% 0; |
|||
} |
|||
.swiper-container-cube .swiper-slide-active, |
|||
.swiper-container-cube .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-container-cube .swiper-slide-active, |
|||
.swiper-container-cube .swiper-slide-next, |
|||
.swiper-container-cube .swiper-slide-prev, |
|||
.swiper-container-cube .swiper-slide-next + .swiper-slide { |
|||
pointer-events: auto; |
|||
visibility: visible; |
|||
} |
|||
.swiper-container-cube .swiper-slide-shadow-top, |
|||
.swiper-container-cube .swiper-slide-shadow-bottom, |
|||
.swiper-container-cube .swiper-slide-shadow-left, |
|||
.swiper-container-cube .swiper-slide-shadow-right { |
|||
z-index: 0; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
.swiper-container-cube .swiper-cube-shadow { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #000; |
|||
opacity: 0.6; |
|||
-webkit-filter: blur(50px); |
|||
filter: blur(50px); |
|||
z-index: 0; |
|||
} |
|||
.swiper-container-flip { |
|||
overflow: visible; |
|||
} |
|||
.swiper-container-flip .swiper-slide { |
|||
pointer-events: none; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
z-index: 1; |
|||
} |
|||
.swiper-container-flip .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-container-flip .swiper-slide-active, |
|||
.swiper-container-flip .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-container-flip .swiper-slide-shadow-top, |
|||
.swiper-container-flip .swiper-slide-shadow-bottom, |
|||
.swiper-container-flip .swiper-slide-shadow-left, |
|||
.swiper-container-flip .swiper-slide-shadow-right { |
|||
z-index: 0; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
.swiper-container-coverflow .swiper-wrapper { |
|||
/* Windows 8 IE 10 fix */ |
|||
-ms-perspective: 1200px; |
|||
} |
|||
5
src/assets/styles/weui.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
6
src/common/weui.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,28 @@ |
|||
|
|||
import utilsModel from './utils-model' |
|||
import homeApi from '../api/home' |
|||
|
|||
export default { |
|||
getGoods : (params) => |
|||
utilsModel |
|||
.config(homeApi.getGoods) |
|||
.request({ |
|||
params : params, |
|||
}), |
|||
getAddress : () => |
|||
utilsModel |
|||
.config(homeApi.getAddress) |
|||
.request({ |
|||
headers: { |
|||
'version': '2.50' |
|||
} |
|||
}), |
|||
getdefaultAddress : () => |
|||
utilsModel |
|||
.config(homeApi.getdefaultAddress) |
|||
.request({ |
|||
headers: { |
|||
'version': '2.50' |
|||
} |
|||
}), |
|||
} |
|||
@ -1,45 +1,110 @@ |
|||
<template> |
|||
<div> |
|||
<group> |
|||
<x-switch :title="''" v-model="show"></x-switch> |
|||
|
|||
</group> |
|||
</div> |
|||
<div> |
|||
<group title="set position"> |
|||
<x-switch title="left(100% width)" v-model="show"></x-switch> |
|||
</group> |
|||
<div title="Default popup" @click=" show = true" >点击看看</div> |
|||
<popup v-model="show"> |
|||
<div class="popup0"> |
|||
<div><a>取消</a><a>完成</a></div> |
|||
<picker :data='year7' :columns=3 v-model='year7Value' @on-change='change' ref="picker1"></picker> |
|||
</div> |
|||
</popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { TransferDom, Actionsheet, Group, XSwitch, Toast } from 'vux' |
|||
import { Group,Picker,Popup,XSwitch} from 'vux' |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: true, |
|||
year7: [ |
|||
{ |
|||
name: '中国', |
|||
value: 'china', |
|||
parent: 0 |
|||
}, { |
|||
name: '美国', |
|||
value: 'USA', |
|||
parent: 0 |
|||
}, { |
|||
name: '广东', |
|||
value: 'china001', |
|||
parent: 'china' |
|||
}, { |
|||
name: '广西', |
|||
value: 'china002', |
|||
parent: 'china' |
|||
}, { |
|||
name: '美国001', |
|||
value: 'usa001', |
|||
parent: 'USA' |
|||
}, { |
|||
name: '美国002', |
|||
value: 'usa002', |
|||
parent: 'USA' |
|||
}, { |
|||
name: '广州', |
|||
value: 'gz', |
|||
parent: 'china001' |
|||
}, { |
|||
name: '深圳', |
|||
value: 'sz', |
|||
parent: 'china001' |
|||
}, { |
|||
name: '广西001', |
|||
value: 'gz', |
|||
parent: 'china002' |
|||
}, { |
|||
name: '广西002', |
|||
value: 'sz', |
|||
parent: 'china002' |
|||
}, { |
|||
name: '美国001_001', |
|||
value: '0003', |
|||
parent: 'usa001' |
|||
}, { |
|||
name: '美国001_002', |
|||
value: '0004', |
|||
parent: 'usa001' |
|||
}, { |
|||
name: '美国002_001', |
|||
value: '0005', |
|||
parent: 'usa002' |
|||
}, { |
|||
name: '美国002_002', |
|||
value: '0006', |
|||
parent: 'usa002' |
|||
}], |
|||
year7Value: ['USA','usa002','0006'], |
|||
goodsList: [] |
|||
}; |
|||
}, |
|||
components: { |
|||
Picker, |
|||
Group, |
|||
XSwitch, |
|||
Popup |
|||
}, |
|||
watch: { |
|||
|
|||
export default { |
|||
components: { |
|||
Actionsheet, |
|||
Group, |
|||
XSwitch, |
|||
Toast |
|||
}, |
|||
directives: { |
|||
TransferDom |
|||
}, |
|||
data () { |
|||
return { |
|||
show: '123' |
|||
} |
|||
}, |
|||
methods: { |
|||
log (str) { |
|||
console.log(str) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
change (name) { |
|||
console.log('new Value', name) |
|||
}, |
|||
getGoodsList (){ |
|||
|
|||
} |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.popup0 { |
|||
padding-bottom:15px; |
|||
height:200px; |
|||
} |
|||
.popup1 { |
|||
width:100%; |
|||
height:100%; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,353 @@ |
|||
|
|||
<template> |
|||
<div class="home"> |
|||
<input type="hidden" id="openedDistrict" th:value="${openedDistrict}"/> |
|||
<input type="hidden" id="merchantNo" th:value="${merchantNo}" value="2" /> <!--商户标号--> |
|||
<input type="hidden" id="districtId" th:value="${districtId}" value="" /> <!--选定区县id--> |
|||
<div class="page-top"> |
|||
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png"/>{{defaultCity}}</i> |
|||
<i class="logo"><img src="../assets/images/icon/logo.png" /></i> |
|||
<i class="text"><a href="tel:400-6080100">联系客服</a></i> |
|||
</div> |
|||
<div class="page-content"> |
|||
<div class="banner"> |
|||
<div class="swiper-container focus-box-swiper"> |
|||
<div class="swiper-wrapper"> |
|||
<div class="swiper-slide" v-for="item in bannerImgList"> |
|||
<img :src="item.imgUrl"/> |
|||
</div> |
|||
</div> |
|||
<div class="swiper-pagination"></div> |
|||
</div> |
|||
</div> |
|||
<div class="coupon"> |
|||
<a :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl"/></a> |
|||
</div> |
|||
<div class="new-card" v-for="item in goodsList"> |
|||
<div class="new-card-top"> |
|||
<img :src=" imghost + item.list[0].categoryImage"> |
|||
</div> |
|||
<ul class="card-list"> |
|||
<li v-for="item1 in item.list"> |
|||
<div class="left"> |
|||
<a :href="'http://test.1hjz.cn/mall/web/vgoods/detail/' + item1.goodsNo"> |
|||
<img :src=" imghost + item1.bannerImgs" /> |
|||
</a> |
|||
</div> |
|||
<div class="right"> |
|||
<h3>{{item1.name}}</h3> |
|||
<div class="text">{{item1.shortDesc}}</div> |
|||
<div class="card-name">{{toJSON(item1.smallLabel)}}</div> |
|||
<div class="btn-box"> |
|||
<span>￥ <em>{{item1.originalPrice > 0 ? item1.originalPrice/100 : item1.price/100}}</em></span> |
|||
<a :href="'http://test.1hjz.cn/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<popup v-model="show"> |
|||
<div class="picke-address"> |
|||
<div class="status-btn"> |
|||
<a class="cel-btn" @click="show = false">取消</a> |
|||
<a class="complete-btn" @click="getNameValues">完成</a> |
|||
</div> |
|||
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker> |
|||
</div> |
|||
</popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import homeApi from "../models/home-model.js"; |
|||
import Swiper from 'swiper'; |
|||
import { Alert, Toast,Popup,Picker } from "vux"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
defaultCity: '天河区', |
|||
addressData: [], |
|||
addressValue: [], |
|||
bannerImgList:[], //轮播图 |
|||
promotionImgList: {}, //优惠券， |
|||
goodsList:[], |
|||
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/", |
|||
|
|||
}; |
|||
}, |
|||
components: { |
|||
Toast, |
|||
Popup, |
|||
Picker |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
getNameValues (){ |
|||
console.log(this.addressValue) |
|||
return |
|||
var that = this; |
|||
console.log(this.addressValue[2]) |
|||
$("#merchantNo").val(this.addressValue[2]) |
|||
this.getGoodsList() |
|||
}, |
|||
change (name) { |
|||
this.addressValue = name |
|||
}, |
|||
getGoodsList (){ |
|||
var params = { |
|||
"merchantNo": $("#merchantNo").val(), |
|||
"selectedDistrictId": $("#districtId").val() |
|||
} |
|||
homeApi.getGoods(params).then(res => { |
|||
console.log(res) |
|||
if ( res.code == 0 ){ |
|||
this.bannerImgList = res.response.bannerImgList |
|||
this.promotionImgList = res.response.promotionImgList[0]; |
|||
let goodsList = res.response.goodsList |
|||
let arr = []; |
|||
for(let i=0;i<goodsList.length;i++){ |
|||
goodsList[i].categoryNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].categoryNo):""; |
|||
} |
|||
let set =new Set(arr); |
|||
let list=Array.from(set); |
|||
let lastList=[]; |
|||
for(let i=0;i<list.length;i++){ |
|||
lastList.push({ |
|||
type:list[i], |
|||
list:[], |
|||
|
|||
}) |
|||
for(let x=0;x<goodsList.length;x++){ |
|||
if(lastList[i].type==goodsList[x].categoryNo&&goodsList[x].isRelease==1){ |
|||
lastList[i].list.push(goodsList[x]); |
|||
} |
|||
} |
|||
} |
|||
this.goodsList = lastList.slice(); |
|||
|
|||
} else { |
|||
this.$vux.toast.text(res.msg,"middle"); |
|||
} |
|||
}); |
|||
}, |
|||
getAddress (){ |
|||
homeApi.getAddress().then(res => { |
|||
if ( res.code == 0 ){ |
|||
this.addressData = res.data |
|||
} else { |
|||
this.$vux.toast.text(res.msg,"middle"); |
|||
} |
|||
}); |
|||
}, |
|||
toJSON (data){ |
|||
return JSON.parse(data)[0].labelText |
|||
}, |
|||
//获取默认地址信息 |
|||
getdefaultAddress (){ |
|||
console.log(123) |
|||
homeApi.getdefaultAddress().then(res => { |
|||
console.log('默认地址信息',res) |
|||
if ( res.code == 0 ){ |
|||
if ( !res.data ){ |
|||
this.show = true |
|||
} else { |
|||
this.defaultCity = res.data.districtName |
|||
} |
|||
} else { |
|||
this.$vux.toast.text(res.msg,"middle"); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
}, |
|||
mounted() { |
|||
//异步加载 |
|||
setTimeout(() => { |
|||
var mySwiper = new Swiper('.swiper-container', { |
|||
autoplay:true, //自动播放 5s |
|||
loop : true, //无缝循环 |
|||
pagination: '.swiper-pagination', |
|||
paginationClickable: true, |
|||
autoplayDisableOnInteraction: false, |
|||
}) |
|||
}, 300); |
|||
this.getdefaultAddress() |
|||
this.getGoodsList() |
|||
this.getAddress() |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.home { |
|||
background:rgba(255,255,255,1); |
|||
} |
|||
.home .page-top { |
|||
background:rgba(255,255,255,1); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
.home .page-top i { |
|||
font-style: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.home .page-top .position { |
|||
font-size:0.26rem; |
|||
font-weight:500; |
|||
color:rgba(153,153,153,1); |
|||
} |
|||
.home .page-top .position img { |
|||
width:0.2rem; |
|||
height:0.25rem; |
|||
margin-right: 0.07rem; |
|||
} |
|||
.home .page-top .logo img { |
|||
width:1.77rem; |
|||
height:0.3rem; |
|||
} |
|||
.home .page-top .text { |
|||
height:0.28rem; |
|||
font-size:0.28rem; |
|||
font-weight:400; |
|||
color:rgba(36,158,108,1); |
|||
} |
|||
.home .page-top .text a { |
|||
position: relative; |
|||
color:rgba(36,158,108,1); |
|||
} |
|||
.home .page-content { |
|||
background:rgba(255,255,255,1); |
|||
} |
|||
.home .page-content .banner a { |
|||
display: block; |
|||
} |
|||
.home .page-content .banner img { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
.home .page-content .coupon { |
|||
margin-top: 0.3rem; |
|||
} |
|||
.home .page-content .coupon img { |
|||
width:6.8rem; |
|||
display: block; |
|||
margin: auto; |
|||
} |
|||
.home .page-content .new-card { |
|||
padding-bottom: 0.5rem; |
|||
} |
|||
.home .page-content .new-card .new-card-top { |
|||
padding: 0.4rem 0 0.3rem; |
|||
} |
|||
.home .page-content .new-card .new-card-top img { |
|||
width:7.1rem; |
|||
display: block; |
|||
margin: auto; |
|||
} |
|||
.home .page-content .new-card .card-list li { |
|||
width:7rem; |
|||
height:2.5rem; |
|||
border:1px solid rgba(238,238,238,1); |
|||
box-sizing: border-box; |
|||
padding: 0.2rem; |
|||
margin: auto; |
|||
margin-bottom: 0.3rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.home .page-content .new-card .card-list li .left { |
|||
width: 2rem; |
|||
height: 2rem; |
|||
} |
|||
.home .page-content .new-card .card-list li .left img { |
|||
width: 2rem; |
|||
height: 2rem; |
|||
display: block; |
|||
} |
|||
.home .page-content .new-card .card-list li .right { |
|||
width: 4.3rem; |
|||
height: 2rem; |
|||
position: relative; |
|||
} |
|||
.home .page-content .new-card .card-list li .right h3 { |
|||
font-size:0.32rem; |
|||
font-weight:400; |
|||
color:rgba(51,51,51,1); |
|||
margin-bottom: 0.1rem; |
|||
} |
|||
.home .page-content .new-card .card-list li .right .text { |
|||
font-size:0.24rem; |
|||
font-weight:400; |
|||
color:rgba(153,153,153,1); |
|||
margin-bottom: 0.1rem; |
|||
} |
|||
.home .page-content .new-card .card-list li .right .card-name { |
|||
height: 0.3rem; |
|||
font-size:0.2rem; |
|||
font-style: normal; |
|||
font-weight:400; |
|||
color:rgba(244,163,83,1); |
|||
} |
|||
.home .page-content .new-card .card-list li .right .btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
.home .page-content .new-card .card-list li .right .btn-box { |
|||
width: 4.3rem; |
|||
display: flex; |
|||
align-items: center; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
.home .page-content .new-card .card-list li .right .btn-box span { |
|||
font-size: 0.22rem; |
|||
font-weight:400; |
|||
color:rgba(153,153,153,1); |
|||
margin-right: auto; |
|||
} |
|||
.home .page-content .new-card .card-list li .right .btn-box span em { |
|||
font-size:0.38rem; |
|||
font-weight:600; |
|||
font-style: normal; |
|||
color:rgba(51,51,51,1); |
|||
} |
|||
.home .page-content .new-card .card-list li .right .btn-box a { |
|||
width:1.7rem; |
|||
height:0.56rem; |
|||
border-radius:0rem; |
|||
background-color: #2BB079; |
|||
border: none; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
font-size: 0.3rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.picke-address .status-btn { |
|||
display: flex; |
|||
height: 0.8rem; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 0.3rem; |
|||
} |
|||
.picke-address .status-btn a { |
|||
padding: 0.3rem; |
|||
color: #888; |
|||
} |
|||
.picke-address .status-btn a.complete-btn { |
|||
color: #1aad19; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
|
|||
<template> |
|||
<div class="poster"> |
|||
<div class="page-top"> |
|||
<a @click="goBack()"><img src="../assets/images/my-money/left.png" /></a> |
|||
<i class="name">分销海报</i> |
|||
<i class="text" @click="show = true">天河区</i> |
|||
</div> |
|||
<div class="page-content"> |
|||
<img class="poster-img" src="../assets/images/girl.jpg"> |
|||
<button class="create-poster">重新生成海报</button> |
|||
</div> |
|||
|
|||
<popup v-model="show"> |
|||
<div class="picke-address"> |
|||
<div class="status-btn"> |
|||
<a class="cel-btn" @click="show = false">取消</a> |
|||
<a class="complete-btn">完成</a> |
|||
</div> |
|||
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker> |
|||
</div> |
|||
</popup> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import homeApi from "../models/home-model.js"; |
|||
import Swiper from 'swiper'; |
|||
import { Alert, Toast,Popup,Picker } from "vux"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
addressData: [], |
|||
addressValue: [], |
|||
}; |
|||
}, |
|||
components: { |
|||
Toast, |
|||
Popup, |
|||
Picker |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
change (name) { |
|||
// console.log('new Value', name) |
|||
}, |
|||
getAddress (){ |
|||
homeApi.getAddress().then(res => { |
|||
if ( res.code == 0 ){ |
|||
this.addressData = res.data |
|||
} else { |
|||
this.$vux.toast.text(res.msg,"middle"); |
|||
} |
|||
}); |
|||
}, |
|||
//返回上一页 |
|||
goBack() { |
|||
history.go(-1); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getAddress() |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.poster { |
|||
background:rgba(255,255,255,1); |
|||
} |
|||
.poster .page-top { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 0.2rem; |
|||
box-sizing: border-box; |
|||
} |
|||
.poster .page-top i { |
|||
font-style: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 0.36rem; |
|||
color: rgba(255,255,255,1); |
|||
letter-spacing: 1px; |
|||
} |
|||
.poster .page-top a { |
|||
position: relative; |
|||
left: 0; |
|||
} |
|||
.poster .page-top .name { |
|||
margin-left: 1rem; |
|||
} |
|||
|
|||
.poster .page-top .text { |
|||
height:0.28rem; |
|||
font-size:0.28rem; |
|||
font-weight:400; |
|||
color: #fff; |
|||
} |
|||
|
|||
.page-content { |
|||
padding-bottom: 1.5rem; |
|||
} |
|||
|
|||
.picke-address .status-btn { |
|||
display: flex; |
|||
height: 0.8rem; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 0.3rem; |
|||
} |
|||
.picke-address .status-btn a { |
|||
padding: 0.3rem; |
|||
color: #888; |
|||
} |
|||
.picke-address .status-btn a.complete-btn { |
|||
color: #1aad19; |
|||
} |
|||
.poster-img { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
|
|||
.create-poster { |
|||
width: 4.68rem; |
|||
height: 0.76rem; |
|||
background: #19BC7F; |
|||
border-radius: 5px; |
|||
color: #fff; |
|||
font-size: 0.34rem; |
|||
border: none; |
|||
margin: auto; |
|||
display: block; |
|||
margin-top: 0.5rem; |
|||
} |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save