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