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 | 13 | } |
| 14 | 14 | .carousel-3d-box { |
| 15 | 15 | position: absolute; |
| 16 | - top: 138px; | |
| 16 | + top: 130px; | |
| 17 | 17 | z-index: 1; |
| 18 | 18 | width: 100%; |
| 19 | 19 | height: 100%; |
| 20 | 20 | /deep/ .carousel-3d-container { |
| 21 | 21 | width: 100% !important; |
| 22 | - height: auto !important; | |
| 22 | + height: 300px !important; | |
| 23 | 23 | .carousel-3d-slider { |
| 24 | - width: 310px !important; | |
| 24 | + width: 380px !important; | |
| 25 | + height: 100% !important; | |
| 25 | 26 | .carousel-3d-slide { |
| 26 | 27 | background-color: transparent !important; |
| 27 | 28 | width: 100% !important; |
| ... | ... | @@ -47,8 +48,9 @@ |
| 47 | 48 | .base-box { |
| 48 | 49 | position: absolute; |
| 49 | 50 | top: 130px; |
| 50 | - left: 0; | |
| 51 | + left: 33px; | |
| 51 | 52 | z-index: -1; |
| 53 | + margin: 0 auto; | |
| 52 | 54 | width: 314px; |
| 53 | 55 | height: 119px; |
| 54 | 56 | .base-img { |
| ... | ... | @@ -70,9 +72,10 @@ |
| 70 | 72 | font-size: 22px; |
| 71 | 73 | font-weight: 400; |
| 72 | 74 | text-align: center; |
| 73 | - -webkit-transform: scale(0.7); | |
| 75 | + // -webkit-transform: scale(0.9); | |
| 74 | 76 | } |
| 75 | 77 | .title { |
| 78 | + margin-top: 10px; | |
| 76 | 79 | color: #542B06; |
| 77 | 80 | font-size: 24px; |
| 78 | 81 | font-weight: 400; | ... | ... |
src/components/swiper3dCom/swiper3dCom.vue
| ... | ... | @@ -18,9 +18,7 @@ |
| 18 | 18 | <img src="static/img/hot-sales-base.png" class="base-img" /> |
| 19 | 19 | </div> |
| 20 | 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 | 22 | <div class="title"> |
| 25 | 23 | <div class="title-sub"> |
| 26 | 24 | {{item.title}} |
| ... | ... | @@ -43,12 +41,13 @@ |
| 43 | 41 | data: function () { |
| 44 | 42 | return { |
| 45 | 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
