Commit 9ebfc717e6aba84165822672cf2ae3aade80e7d7
1 parent
9a756854
优选库——优选、商城（旗舰店）对接完成
除了“折扣专区”相关以外~
Showing
4 changed files
with
76 additions
and
2 deletions
src/components/swiper3dCom/swiper3dCom.less
| @@ -25,12 +25,69 @@ | @@ -25,12 +25,69 @@ | ||
| 25 | .carousel-3d-slide { | 25 | .carousel-3d-slide { |
| 26 | background-color: transparent !important; | 26 | background-color: transparent !important; |
| 27 | width: 100% !important; | 27 | width: 100% !important; |
| 28 | - height: auto !important; | 28 | + height: 100% !important; |
| 29 | opacity: 0.2 !important; | 29 | opacity: 0.2 !important; |
| 30 | border: none; | 30 | border: none; |
| 31 | &.current { | 31 | &.current { |
| 32 | opacity: 1 !important; | 32 | opacity: 1 !important; |
| 33 | } | 33 | } |
| 34 | + .item { | ||
| 35 | + position: relative; | ||
| 36 | + height: 100%; | ||
| 37 | + .img-box { | ||
| 38 | + margin: 0 auto; | ||
| 39 | + width: 160px; | ||
| 40 | + height: 160px; | ||
| 41 | + .img { | ||
| 42 | + display: block; | ||
| 43 | + width: 160px; | ||
| 44 | + height: 160px; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + .base-box { | ||
| 48 | + position: absolute; | ||
| 49 | + top: 130px; | ||
| 50 | + left: 0; | ||
| 51 | + z-index: -1; | ||
| 52 | + width: 314px; | ||
| 53 | + height: 119px; | ||
| 54 | + .base-img { | ||
| 55 | + display: block; | ||
| 56 | + width: 314px; | ||
| 57 | + height: 119px; | ||
| 58 | + } | ||
| 59 | + } | ||
| 60 | + .title-box { | ||
| 61 | + position: absolute; | ||
| 62 | + top: 186px; | ||
| 63 | + z-index: 1; | ||
| 64 | + background-repeat: no-repeat; | ||
| 65 | + background-size: contain; | ||
| 66 | + width: 100%; | ||
| 67 | + height: 93px; | ||
| 68 | + .index { | ||
| 69 | + color: #FFFFFF; | ||
| 70 | + font-size: 22px; | ||
| 71 | + font-weight: 400; | ||
| 72 | + text-align: center; | ||
| 73 | + -webkit-transform: scale(0.7); | ||
| 74 | + } | ||
| 75 | + .title { | ||
| 76 | + color: #542B06; | ||
| 77 | + font-size: 24px; | ||
| 78 | + font-weight: 400; | ||
| 79 | + width: 100%; | ||
| 80 | + .title-sub { | ||
| 81 | + margin: 0 auto; | ||
| 82 | + width: 85%; | ||
| 83 | + text-align: center; | ||
| 84 | + white-space: nowrap; | ||
| 85 | + text-overflow: ellipsis; | ||
| 86 | + overflow: hidden; | ||
| 87 | + } | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + } | ||
| 34 | } | 91 | } |
| 35 | } | 92 | } |
| 36 | } | 93 | } |
src/components/swiper3dCom/swiper3dCom.vue
| @@ -10,7 +10,24 @@ | @@ -10,7 +10,24 @@ | ||
| 10 | <div class="carousel-3d-box"> | 10 | <div class="carousel-3d-box"> |
| 11 | <carousel-3d :autoplay="setOptions.autoplay" :autoplayTimeout="setOptions.autoplayTimeout" :autoplayHoverPause="setOptions.autoplayHoverPause" :display="setOptions.display" :width="getWidth()" :height="getHeight()" :inverseScaling="1000" :onMainSlideClick="onMainSlideClick"> | 11 | <carousel-3d :autoplay="setOptions.autoplay" :autoplayTimeout="setOptions.autoplayTimeout" :autoplayHoverPause="setOptions.autoplayHoverPause" :display="setOptions.display" :width="getWidth()" :height="getHeight()" :inverseScaling="1000" :onMainSlideClick="onMainSlideClick"> |
| 12 | <slide :index="index" v-for="(item, index) in items" :key="index"> | 12 | <slide :index="index" v-for="(item, index) in items" :key="index"> |
| 13 | - <img :src="item.simg" class="img" /> | 13 | + <div class="item"> |
| 14 | + <div class="img-box"> | ||
| 15 | + <img :src="item.simg" class="img" /> | ||
| 16 | + </div> | ||
| 17 | + <div class="base-box"> | ||
| 18 | + <img src="static/img/hot-sales-base.png" class="base-img" /> | ||
| 19 | + </div> | ||
| 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> | ||
| 24 | + <div class="title"> | ||
| 25 | + <div class="title-sub"> | ||
| 26 | + {{item.title}} | ||
| 27 | + </div> | ||
| 28 | + </div> | ||
| 29 | + </div> | ||
| 30 | + </div> | ||
| 14 | </slide> | 31 | </slide> |
| 15 | </carousel-3d> | 32 | </carousel-3d> |
| 16 | </div> | 33 | </div> |
static/img/hot-sales-base.png
0 → 100644
11 KB
static/img/hot-sales-title.png
0 → 100644
14.2 KB