Commit 3542a17f9c23827561100ff247620d57292d6eaf
1 parent
51608ae5
1、商城（旗舰店）店铺默认头图替换
2、优选——热销排行3D轮播效果UI优化~
Showing
3 changed files
with
16 additions
and
14 deletions
src/components/swiper3dCom/swiper3dCom.less
| @@ -13,15 +13,16 @@ | @@ -13,15 +13,16 @@ | ||
| 13 | } | 13 | } |
| 14 | .carousel-3d-box { | 14 | .carousel-3d-box { |
| 15 | position: absolute; | 15 | position: absolute; |
| 16 | - top: 138px; | 16 | + top: 130px; |
| 17 | z-index: 1; | 17 | z-index: 1; |
| 18 | width: 100%; | 18 | width: 100%; |
| 19 | height: 100%; | 19 | height: 100%; |
| 20 | /deep/ .carousel-3d-container { | 20 | /deep/ .carousel-3d-container { |
| 21 | width: 100% !important; | 21 | width: 100% !important; |
| 22 | - height: auto !important; | 22 | + height: 300px !important; |
| 23 | .carousel-3d-slider { | 23 | .carousel-3d-slider { |
| 24 | - width: 310px !important; | 24 | + width: 380px !important; |
| 25 | + height: 100% !important; | ||
| 25 | .carousel-3d-slide { | 26 | .carousel-3d-slide { |
| 26 | background-color: transparent !important; | 27 | background-color: transparent !important; |
| 27 | width: 100% !important; | 28 | width: 100% !important; |
| @@ -47,8 +48,9 @@ | @@ -47,8 +48,9 @@ | ||
| 47 | .base-box { | 48 | .base-box { |
| 48 | position: absolute; | 49 | position: absolute; |
| 49 | top: 130px; | 50 | top: 130px; |
| 50 | - left: 0; | 51 | + left: 33px; |
| 51 | z-index: -1; | 52 | z-index: -1; |
| 53 | + margin: 0 auto; | ||
| 52 | width: 314px; | 54 | width: 314px; |
| 53 | height: 119px; | 55 | height: 119px; |
| 54 | .base-img { | 56 | .base-img { |
| @@ -70,9 +72,10 @@ | @@ -70,9 +72,10 @@ | ||
| 70 | font-size: 22px; | 72 | font-size: 22px; |
| 71 | font-weight: 400; | 73 | font-weight: 400; |
| 72 | text-align: center; | 74 | text-align: center; |
| 73 | - -webkit-transform: scale(0.7); | 75 | + // -webkit-transform: scale(0.9); |
| 74 | } | 76 | } |
| 75 | .title { | 77 | .title { |
| 78 | + margin-top: 10px; | ||
| 76 | color: #542B06; | 79 | color: #542B06; |
| 77 | font-size: 24px; | 80 | font-size: 24px; |
| 78 | font-weight: 400; | 81 | font-weight: 400; |
src/components/swiper3dCom/swiper3dCom.vue
| @@ -18,9 +18,7 @@ | @@ -18,9 +18,7 @@ | ||
| 18 | <img src="static/img/hot-sales-base.png" class="base-img" /> | 18 | <img src="static/img/hot-sales-base.png" class="base-img" /> |
| 19 | </div> | 19 | </div> |
| 20 | <div class="title-box" :style="{'backgroundImage': 'url(static/img/hot-sales-title.png)'}"> | 20 | <div class="title-box" :style="{'backgroundImage': 'url(static/img/hot-sales-title.png)'}"> |
| 21 | - <div class="index" v-if="index === 0">月销量第一名</div> | ||
| 22 | - <div class="index" v-if="index === 1">月销量第二名</div> | ||
| 23 | - <div class="index" v-if="index === 2">月销量第三名</div> | 21 | + <div class="index">月销量第{{setOptions.sortArr[index]}}名</div> |
| 24 | <div class="title"> | 22 | <div class="title"> |
| 25 | <div class="title-sub"> | 23 | <div class="title-sub"> |
| 26 | {{item.title}} | 24 | {{item.title}} |
| @@ -43,12 +41,13 @@ | @@ -43,12 +41,13 @@ | ||
| 43 | data: function () { | 41 | data: function () { |
| 44 | return { | 42 | return { |
| 45 | setOptions: { | 43 | setOptions: { |
| 46 | - bg: null, // 背景图片 | ||
| 47 | - display: 3, // 展示数量 | ||
| 48 | - autoplay: true, // 自动切换 | ||
| 49 | - autoplayTimeout: 5000, // 自动切换时长 | ||
| 50 | - autoplayHoverPause: true, // 悬停自动暂停 | ||
| 51 | - inverseScaling: 1000 // 反向缩放大小，数字越大缩放比例越大（暂时不使用这个参数，要配合width/height参数共同使用） | 44 | + bg: null, // 背景图片 |
| 45 | + sortArr: ['一', '二', '三'], // 排名排序汉字字符串 | ||
| 46 | + display: 3, // 展示数量 | ||
| 47 | + autoplay: true, // 自动切换 | ||
| 48 | + autoplayTimeout: 5000, // 自动切换时长 | ||
| 49 | + autoplayHoverPause: true, // 悬停自动暂停 | ||
| 50 | + inverseScaling: 1000 // 反向缩放大小，数字越大缩放比例越大（暂时不使用这个参数，要配合width/height参数共同使用） | ||
| 52 | } | 51 | } |
| 53 | } | 52 | } |
| 54 | }, | 53 | }, |
static/img/header_img_default.png
