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 | 25 | .carousel-3d-slide { |
| 26 | 26 | background-color: transparent !important; |
| 27 | 27 | width: 100% !important; |
| 28 | - height: auto !important; | |
| 28 | + height: 100% !important; | |
| 29 | 29 | opacity: 0.2 !important; |
| 30 | 30 | border: none; |
| 31 | 31 | &.current { |
| 32 | 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 | 10 | <div class="carousel-3d-box"> |
| 11 | 11 | <carousel-3d :autoplay="setOptions.autoplay" :autoplayTimeout="setOptions.autoplayTimeout" :autoplayHoverPause="setOptions.autoplayHoverPause" :display="setOptions.display" :width="getWidth()" :height="getHeight()" :inverseScaling="1000" :onMainSlideClick="onMainSlideClick"> |
| 12 | 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 | 31 | </slide> |
| 15 | 32 | </carousel-3d> |
| 16 | 33 | </div> | ... | ... |
static/img/hot-sales-base.png
0 → 100644
11 KB
static/img/hot-sales-title.png
0 → 100644
14.2 KB