Commit deaad20f authored by beisir's avatar beisir

feat:修改样式

parent fa022b73
src/assets/images/share.png

545 Bytes | W: | H:

src/assets/images/share.png

1.63 KB | W: | H:

src/assets/images/share.png
src/assets/images/share.png
src/assets/images/share.png
src/assets/images/share.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
data() { data() {
const vm = this; const vm = this;
const isLoop = vm.avatorData.length < 7 ? false : true; const isLoop = vm.avatorData.length < 7 ? false : true;
const autoplay = isLoop ? { delay: 5000, reverseDirection: true } : false; const autoplay = isLoop ? { delay: 1500, reverseDirection: true } : false;
return { return {
isLoop, isLoop,
isAnimate: false, isAnimate: false,
...@@ -50,8 +50,8 @@ export default { ...@@ -50,8 +50,8 @@ export default {
loop: true, loop: true,
initialSlide: 0, initialSlide: 0,
slidesPerView: 7, slidesPerView: 7,
spaceBetween: 4, spaceBetween: 6,
speed: 1700, speed: 600,
centeredSlides: true, centeredSlides: true,
allowTouchMove: false, allowTouchMove: false,
autoplay, autoplay,
...@@ -72,7 +72,7 @@ export default { ...@@ -72,7 +72,7 @@ export default {
const timer = setTimeout(() => { const timer = setTimeout(() => {
vm.$emit('animation-event-end', vm.avatorItem); vm.$emit('animation-event-end', vm.avatorItem);
clearTimeout(timer); clearTimeout(timer);
}, 1200); }, 600);
}, },
transitionEnd: function() { transitionEnd: function() {
vm.isAnimate = false; vm.isAnimate = false;
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
} }
.anileft { .anileft {
transform-origin: right; transform-origin: right;
animation: leftToRight 1s linear; animation: leftToRight 0.6s linear;
} }
.ani-opt { .ani-opt {
...@@ -131,7 +131,7 @@ export default { ...@@ -131,7 +131,7 @@ export default {
top: 0px; top: 0px;
} }
.avator_right { .avator_right {
right: 1px; right: 2px;
} }
.avator_left { .avator_left {
left: 0px; left: 0px;
...@@ -144,13 +144,16 @@ export default { ...@@ -144,13 +144,16 @@ export default {
transition-timing-function: linear; transition-timing-function: linear;
} }
&_item { &_item {
transition: transform 0.2s linear; height: 24px;
padding-top: 2px; width: 24px;
box-sizing: border-box;
transition: transform 0 0.2s linear;
img { img {
height: 25px; height: 24px;
width: 25px; width: 24px;
border-radius: 50%; border-radius: 50%;
border: solid @white 1px; border: solid @white 1px;
box-sizing: border-box;
} }
} }
} }
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
/> />
<div class="group-item-already">已拼{{ goodsItem.groupBuySuccessCount }}</div> <div class="group-item-already">已拼{{ goodsItem.groupBuySuccessCount }}</div>
<div class="group-item-price">成团价 ¥ <sup class="group-item-sup">0</sup></div> <div class="group-item-price">成团价 ¥ <sup class="group-item-sup">0</sup></div>
<div class="group-item-delprice">售价 {{ goodsItem.activityPrice }}</div> <div class="group-item-delprice">售价¥{{ goodsItem.activityPrice }}</div>
<!-- 立即开团 --> <!-- 立即开团 -->
<!-- 已抢光 --> <!-- 已抢光 -->
<!-- 未开始 --> <!-- 未开始 -->
...@@ -220,6 +220,7 @@ export default { ...@@ -220,6 +220,7 @@ export default {
} }
&-sup { &-sup {
font-size: @font-size-18; font-size: @font-size-18;
font-weight: bold;
} }
&-delprice { &-delprice {
......
...@@ -9,34 +9,25 @@ ...@@ -9,34 +9,25 @@
right: 0; right: 0;
top: 10px; top: 10px;
z-index: 1; z-index: 1;
color: #e92615; // border-radius: 16px 0 0 16px;
background-image: linear-gradient(180deg, #ffd545 0%, #ffcc79 100%); // color: #e92615;
border-radius: 16px 0 0 16px; // background-image: linear-gradient(180deg, #ffd545 0%, #ffcc79 100%);
padding: 6px 12px 6px 16px; // padding: 6px 12px 6px 16px;
// padding: 12px 24px 12px 32px; // 线上使用背景遮罩层 padding: 24px; // 线上使用背景遮罩层
opacity: 0;
} }
&-share { &-share {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 44px; width: 44px;
height: 44px; height: 44px;
position: fixed; position: fixed;
right: 12px; right: 12px;
bottom: 60px; bottom: 60px;
z-index: 1; z-index: 1;
background-color: #ffffff; background: #fff url(~@/assets/images/share.png) no-repeat center;
border: #ebebeb 1px solid; background-size: 100%;
border-radius: 50%; border-radius: 50%;
&-icon { overflow: hidden;
width: 16px;
height: 16px;
}
&-text {
font-size: @font-size-12;
}
} }
&-bottom { &-bottom {
padding-left: 12px; padding-left: 12px;
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
/> />
</div> </div>
</div> </div>
<div class="group-portrait-num">已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼</div> <div class="group-portrait-num">已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼</div>
</div> </div>
<div class="group-list"> <div class="group-list">
<div class="list-title"> <div class="list-title">
...@@ -62,12 +62,12 @@ ...@@ -62,12 +62,12 @@
</div> </div>
<!-- 下方列表展示信息 end --> <!-- 下方列表展示信息 end -->
</div> </div>
<dl v-if="!isShowShare" class="group-share" @click="openShareEvent"> <div v-if="!isShowShare" class="group-share" @click="openShareEvent">
<dt class="group-share-icon"> <!-- <dt class="group-share-icon">
<cr-image src="@/assets/images/share.png" /> <cr-image src="@/assets/images/share.png" />
</dt> </dt>
<dd class="group-share-text">分享</dd> <dd class="group-share-text">分享</dd> -->
</dl> </div>
</div> </div>
</template> </template>
<script> <script>
......
...@@ -117,7 +117,7 @@ export default { ...@@ -117,7 +117,7 @@ export default {
}, },
showButtonMethod: { showButtonMethod: {
0: { 0: {
text: '重新', text: '重新',
click: 'goGroupBuyList' click: 'goGroupBuyList'
}, },
1: { 1: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment