9 changed files with 511 additions and 12 deletions
-
120src/subpackage/mall/components/goods_item.vue
-
16src/subpackage/mall/components/index_classify_bar.vue
-
38src/subpackage/mall/components/line_button.vue
-
61src/subpackage/mall/components/modal_box.vue
-
55src/subpackage/mall/components/number_operate.vue
-
184src/subpackage/mall/components/specification_modal.vue
-
49src/subpackage/mall/pages/index.vue
-
BINsrc/subpackage/mall/static/images/classify.png
-
BINsrc/subpackage/mall/static/images/close_c97.png
@ -0,0 +1,120 @@ |
|||
<template> |
|||
<view class="goods-item"> |
|||
<image class="gi-img" mode="aspeceFill" :src="poster"></image> |
|||
<view class="gi-tit">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛成人进攻型羽毛…</view> |
|||
<view class="gi-tag">特价</view> |
|||
<view class="gi-bot-line"> |
|||
<view class="gbl-price"> |
|||
<view class="gp-num"> |
|||
<text class="gn-symbol">¥</text> |
|||
59.9 |
|||
</view> |
|||
<view class="gp-unit">/2支</view> |
|||
</view> |
|||
<view class="gbl-del-price">¥69.9</view> |
|||
<view class="gbl-add" @click="$emit('click:add')"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
poster: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.goods-item{ |
|||
padding-bottom: 16upx; |
|||
width: 340upx; |
|||
height: 560upx; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: 0; |
|||
background: #fff; |
|||
.gi-img{ |
|||
display: block; |
|||
height: 340upx; |
|||
} |
|||
.gi-tit{ |
|||
margin-top: 20upx; |
|||
padding: 0 20upx; |
|||
@include flcw(24upx, 36upx, #333); |
|||
@include tHide(2); |
|||
} |
|||
.gi-tag{ |
|||
position: relative; |
|||
left: 20upx; |
|||
margin-top: 4upx; |
|||
text-align: center; |
|||
width: 58upx; |
|||
border-radius: 6upx; |
|||
border: 1px solid rgba($color: #E60213, $alpha: .5); |
|||
@include flcw(20upx, 28upx, #E60213); |
|||
} |
|||
.gi-bot-line{ |
|||
margin-top: auto; |
|||
margin-bottom: 0; |
|||
padding: 0 20upx; |
|||
@include ctf; |
|||
.gbl-price{ |
|||
display: flex; |
|||
.gp-num{ |
|||
@include flcw(36upx, 50upx, #F6843E, 500); |
|||
@include tHide; |
|||
.gn-symbol{ |
|||
font-size: 28upx; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
.gp-unit{ |
|||
max-width: 80upx; |
|||
min-width: 40upx; |
|||
@include flcw(26upx, 50upx, #333333); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.gbl-del-price{ |
|||
flex-shrink: 0; |
|||
max-width: 100upx; |
|||
margin-left: 20upx; |
|||
text-decoration: line-through; |
|||
@include flcw(24upx, 34upx, #9A9A9D); |
|||
@include tHide; |
|||
} |
|||
.gbl-add{ |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
margin-left: auto; |
|||
margin-right: 0; |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50%; |
|||
background: $mColor; |
|||
&::before,&::after{ |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background-color: #fff; |
|||
border-radius: 2upx; |
|||
width: 20upx; |
|||
height: 4upx; |
|||
} |
|||
&::after{ |
|||
transform: translate(-50%, -50%) rotate(90deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,38 @@ |
|||
<template> |
|||
<view class="line-button" hover-class="lb-hover"> |
|||
<slot>confirm</slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.line-button{ |
|||
border-radius: 44rpx; |
|||
text-align: center; |
|||
background: linear-gradient(90deg, #44D7B6 0%, #009874 100%); |
|||
@include flcw(32upx, 88upx, #fff, 500); |
|||
&.lb-hover{ |
|||
position: relative; |
|||
overflow: hidden; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
z-index: 2; |
|||
background-color: rgba(0,0,0,.1); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,61 @@ |
|||
<template> |
|||
<view class="modal-box" @touchmove.stop.prevent="_=>false" v-show="isShow"> |
|||
<view class="mb-container"> |
|||
<image |
|||
class="mc-close" |
|||
mode="aspectFit" |
|||
src="/subpackage/mall/static/images/close_c97.png" |
|||
@click="$emit('click:close')" |
|||
></image> |
|||
<view class="mc-tit">标题</view> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.modal-box{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
width: 100%; |
|||
background-color: rgba(0,0,0,0.4); |
|||
.mb-container{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding-top: 60upx; |
|||
background: #fff; |
|||
@include isPd(0upx); |
|||
.mc-tit{ |
|||
padding: 0 24upx; |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
@include tHide; |
|||
} |
|||
.mc-close{ |
|||
position: absolute; |
|||
right: 20upx; |
|||
top: 20upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,55 @@ |
|||
|
|||
<template> |
|||
<view class="number-operate"> |
|||
<view class="no-opt" @click="iptVal--"></view> |
|||
<input type="digit" class="no-ipt" v-model="iptVal" > |
|||
<view class="no-opt" @click="iptVal++"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
iptVal: '1' |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.number-operate{ |
|||
@include ctf(center); |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
.no-opt{ |
|||
position: relative; |
|||
width: 60upx; |
|||
height: 56upx; |
|||
background: #F2F2F7; |
|||
&::before, &::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: block; |
|||
width: 24upx; |
|||
height: 4upx; |
|||
border-radius: 2upx; |
|||
background: #9A9A9D; |
|||
} |
|||
} |
|||
.no-ipt{ |
|||
margin: 0 2upx; |
|||
width: 72upx; |
|||
height: 56upx; |
|||
text-align: center; |
|||
background: #F2F2F7; |
|||
@include flcw(28upx, 40upx, #333, 500); |
|||
&+.no-opt::after{ |
|||
transform: translate(-50%, -50%) rotate(-90deg); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<modal-box :is-show="isShow" @click:close="hide"> |
|||
<view class="specification-modal"> |
|||
<view class="sm-goods"> |
|||
<image class="sg-img"></image> |
|||
<view class="sg-right"> |
|||
<view class="sr-name">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球</view> |
|||
<view class="sr-bottom"> |
|||
<view class="sb-price"> |
|||
<view class="sp-amount">¥59.9</view> |
|||
<view class="sp-unit">/2支</view> |
|||
</view> |
|||
<view class="sb-stock">库存：6</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<scroll-view class="sm-scroll" scroll-y> |
|||
<view class="ss-ls"> |
|||
<view class="sl-item" v-for="i in 3" :key="i"> |
|||
<view class="si-tit">规格</view> |
|||
<view class="si-tags"> |
|||
<view class="st-item" v-for="k in 10" :key="k">比赛专用</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="num-bar"> |
|||
<view class="nb-txt">购买数量</view> |
|||
<number-operate></number-operate> |
|||
</view> |
|||
<line-button>加入购物车</line-button> |
|||
</view> |
|||
</modal-box> |
|||
</template> |
|||
|
|||
<script> |
|||
import modalBox from "./modal_box.vue"; |
|||
import lineButton from "./line_button.vue"; |
|||
import numberOperate from "./number_operate.vue"; |
|||
export default { |
|||
components: { |
|||
modalBox, |
|||
lineButton, |
|||
numberOperate |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
alert(){ |
|||
this.isShow = true; |
|||
}, |
|||
hide(){ |
|||
this.isShow = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.specification-modal{ |
|||
padding: 20upx 20upx 10upx; |
|||
.sm-goods{ |
|||
padding-bottom: 46upx; |
|||
border-bottom: 1px solid #F2F2F7; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
.sg-img{ |
|||
flex-shrink: 0; |
|||
margin-right: 20upx; |
|||
width: 172upx; |
|||
height: 172upx; |
|||
background: skyblue; |
|||
} |
|||
.sg-right{ |
|||
flex-grow: 1; |
|||
align-self: stretch; |
|||
.sr-name{ |
|||
@include flcw(28upx, 40upx, #333); |
|||
@include tHide(2); |
|||
} |
|||
.sr-bottom{ |
|||
margin-top: 40upx; |
|||
display: flex; |
|||
align-items: baseline; |
|||
.sb-stock{ |
|||
flex-shrink: 0; |
|||
margin-left: 30upx; |
|||
max-width: 160upx; |
|||
@include flcw(24upx, 34upx, #9A9A9D); |
|||
@include tHide; |
|||
} |
|||
.sb-price{ |
|||
display: flex; |
|||
align-items: baseline; |
|||
.sp-amount{ |
|||
@include flcw(36upx, 50upx, #FF873D); |
|||
@include tHide; |
|||
} |
|||
.sp-unit{ |
|||
flex-shrink: 0; |
|||
max-width: 60upx; |
|||
@include flcw(28upx, 50upx, #333); |
|||
@include tHide; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sm-scroll{ |
|||
height: 380upx; |
|||
.ss-ls{ |
|||
padding: 36upx 0upx; |
|||
.sl-item{ |
|||
&+.sl-item{ |
|||
margin-top: 40upx; |
|||
} |
|||
.si-tit{ |
|||
padding: 0 10upx; |
|||
@include flcw(28upx, 40upx, #333333); |
|||
|
|||
} |
|||
.si-tags{ |
|||
display: flex; |
|||
align-content: flex-start; |
|||
flex-wrap: wrap; |
|||
.st-item{ |
|||
margin: 20upx 10upx 0; |
|||
padding: 12upx 22upx; |
|||
border-radius: 10upx; |
|||
background: #F2F2F7; |
|||
@include flcw(24upx, 34upx, #333333); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.num-bar{ |
|||
padding: 44upx 0; |
|||
border-top: 1px solid #F2F2F7; |
|||
@include ctf(space-between); |
|||
.nb-txt{ |
|||
@include flcw(24upx, 34upx, #333); |
|||
} |
|||
.number-operate{ |
|||
@include ctf(center); |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
.no-opt{ |
|||
position: relative; |
|||
width: 60upx; |
|||
height: 56upx; |
|||
background: #F2F2F7; |
|||
&::before, &::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: block; |
|||
width: 24upx; |
|||
height: 4upx; |
|||
border-radius: 2upx; |
|||
background: #9A9A9D; |
|||
} |
|||
} |
|||
.no-ipt{ |
|||
margin: 0 2upx; |
|||
width: 72upx; |
|||
height: 56upx; |
|||
text-align: center; |
|||
background: #F2F2F7; |
|||
@include flcw(28upx, 40upx, #333, 500); |
|||
&+.no-opt::after{ |
|||
transform: translate(-50%, -50%) rotate(-90deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 36 | Height: 36 | Size: 218 B |
|
After Width: 40 | Height: 40 | Size: 519 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue