<template>
|
<div class="goods">
|
<div class="weui-flex">
|
<div class="weui-flex__item"><div class="placeholder active">全部</div></div>
|
<div class="weui-flex__item"><div class="placeholder">好评</div></div>
|
<div class="weui-flex__item"><div class="placeholder">中评</div></div>
|
<div class="weui-flex__item"><div class="placeholder bad">差评</div></div>
|
<div class="weui-flex__item"><div class="placeholder">有图</div></div>
|
</div>
|
<div class="comment">
|
<p><img src="@/assets/images/profile.png" alt="">郭**1</p>
|
<p class="date">2018年9月12号 颜色：白色 尺码：x码</p>
|
<p>服务特别好，我要的比较急，卖家很快就给我了，而且效果我很满意，给大家看看</p>
|
<div class="picture"></div>
|
</div>
|
<div class="comment">
|
<p><img src="@/assets/images/profile.png" alt="">郭**1</p>
|
<p class="date">2018年9月12号 颜色：白色 尺码：x码</p>
|
<p>服务特别好，我要的比较急，卖家很快就给我了，而且效果我很满意，给大家看看</p>
|
<div class="picture">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="seller-reply">
|
<span class="arrow"></span>
|
<span>弹性效果：衣服很好，在实体店试过，等网上有活动才购入，果然没叫我失望，包装的也很好，很喜欢，妈妈看过后也很喜欢，陪妈妈去实体店买了蓝色波点的那件，妥妥的母女装 温柔知性，颜色略深点，面料柔软但垂感好，没有想象中那么易皱，很喜欢，搭配起来很女人 宽松的，如果喜欢瘦一点M就可以的，料子很舒服，觉得值得购买，衣服袖子够长，款式特别大方！总体是特别满意</span>
|
</div>
|
</div>
|
<div class="comment">
|
<p><img src="@/assets/images/profile.png" alt="">郭**1</p>
|
<p class="date">2018年9月12号 颜色：白色 尺码：x码</p>
|
<p>服务特别好，我要的比较急，卖家很快就给我了，而且效果我很满意，给大家看看</p>
|
<div class="picture">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
</div>
|
<div class="comment">
|
<p><img src="@/assets/images/profile.png" alt="">郭**1</p>
|
<p class="date">2018年9月12号 颜色：白色 尺码：x码</p>
|
<p>服务特别好，我要的比较急，卖家很快就给我了，而且效果我很满意，给大家看看</p>
|
<div class="picture">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
</div><div class="weui-tabbar">
|
<a href="javascript:;" class="tabbar-item">
|
<div class="weui-tabbar__icon">
|
<img src="@/assets/images/home/home1.png" alt="">
|
</div>
|
<p class="weui-tabbar__label">客服</p>
|
</a>
|
<a href="javascript:;" class="tabbar-item">
|
<div class="weui-tabbar__icon">
|
<img src="@/assets/images/home/class1.png" alt="">
|
</div>
|
<p class="weui-tabbar__label">收藏</p>
|
</a>
|
<a href="javascript:;" class="tabbar-large-item">
|
<p class="tabbar-label-left">加入购物车</p>
|
</a>
|
<a href="javascript:;" class="tabbar-large-item" @click="openpopup()">
|
<p class="tabbar-label-right">立即购买</p>
|
</a>
|
</div>
|
<div id="my-popup" class="weui-popup__container popup-bottom">
|
<div class="weui-popup__overlay"></div>
|
<div class="weui-popup__modal">
|
<span class="close-btn">X</span>
|
<div class="popup-header">
|
<div class="popup-img">
|
<img src="@/assets/images/detail.png" alt="">
|
</div>
|
<div class="popup-detail">
|
<p class="money">￥ 299</p>
|
<p class="store">库存123件</p>
|
<p class="select">已选 L码 红色</p>
|
</div>
|
</div>
|
<div class="popup-color">
|
<p>颜色分类</p>
|
<div class="operation">
|
<div class="placeholder">黑色</div>
|
<div class="placeholder active">红色</div>
|
</div>
|
</div>
|
<div class="popup-size">
|
<p>尺码</p>
|
<div class="operation">
|
<div class="placeholder">M</div>
|
<div class="placeholder active">L</div>
|
</div>
|
</div>
|
<div class="clear"></div>
|
<div class="weui-cell">
|
<div class="weui-cell__bd">
|
<p>购买数量</p>
|
</div>
|
<div class="weui-cell__ft">
|
<div class="weui-count">
|
<a class="weui-count__btn weui-count__decrease"></a>
|
<input class="weui-count__number" type="number" value="1">
|
<a class="weui-count__btn weui-count__increase"></a>
|
</div>
|
</div>
|
</div>
|
<a href="javascript:;" class="weui-btn weui-btn_primary" @click="jumptopayment()">确定</a>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'goods',
|
components: {},
|
data () {
|
return {
|
dict: dict
|
}
|
},
|
methods: {
|
jumpBack () {
|
this.$router.back(-1)
|
},
|
jumpSearch () {
|
this.$router.push({name: 'login', params: {view: 'home'}})
|
},
|
jumptopayment () {
|
this.$router.push({name: 'payment'})
|
},
|
openpopup () {
|
$('#my-popup').popup()
|
}
|
},
|
mounted: function () {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.weui-flex {
|
height: 50px;
|
text-align: center;
|
border-bottom: 1px solid #eeeeee;
|
}
|
.placeholder {
|
width: 50px;
|
height: 25px;
|
margin: 10px;
|
border-radius: 25px;
|
background: #FBC9CB;
|
}
|
.placeholder.active {
|
color: #ffffff;
|
background: #ee0000;
|
}
|
.placeholder.bad {
|
background: #C9C9C9;
|
}
|
.comment {
|
padding: 10px 10px 15px;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.comment p {
|
font-size: 14px;
|
}
|
.comment .date {
|
height: 30px;
|
line-height: 30px;
|
font-size: 12px;
|
color: #cccccc;
|
}
|
.comment p img {
|
vertical-align: bottom;
|
}
|
.comment .picture img {
|
vertical-align: top;
|
width: 24%;
|
margin-bottom: 5px;
|
}
|
.weui-tabbar {
|
position: fixed;
|
}
|
.tabbar-item {
|
width: 18%;
|
text-align: center;
|
}
|
.tabbar-large-item {
|
width: 32%;
|
font-size: 16px;
|
text-align: center;
|
padding-top: 4px;
|
}
|
.tabbar-large-item p {
|
padding: 5px 0px;
|
}
|
.weui-tabbar__icon{
|
width: 20px;
|
height: 20px;
|
}
|
.weui-tabbar__icon img{
|
width: 20px;
|
height: 20px;
|
vertical-align: bottom;
|
}
|
.tabbar-label-left {
|
color: #ffffff;
|
border-radius: 20px 0px 0px 20px;
|
background: -webkit-linear-gradient(left,#FF9305, #FFCA03); /* Safari 5.1 - 6.0 */
|
background: -o-linear-gradient(right, #FF9305, #FFCA03); /* Opera 11.1 - 12.0 */
|
background: -moz-linear-gradient(right, #FF9305, #FFCA03); /* Firefox 3.6 - 15 */
|
background: linear-gradient(right, #FF9305, #FFCA03); /* 标准的语法 */
|
}
|
.tabbar-label-right {
|
color: #ffffff;
|
border-radius: 0px 20px 20px 0px;
|
background: -webkit-linear-gradient(left,#FF0F3E, #FF592E); /* Safari 5.1 - 6.0 */
|
background: -o-linear-gradient(right, #FF0F3E, #FF592E); /* Opera 11.1 - 12.0 */
|
background: -moz-linear-gradient(right, #FF0F3E, #FF592E); /* Firefox 3.6 - 15 */
|
background: linear-gradient(right, #FF0F3E, #FF592E); /* 标准的语法 */
|
}
|
.weui-popup__container {
|
z-index: 1000;
|
}
|
.weui-popup__modal {
|
box-sizing: border-box;
|
padding: 10px;
|
border-radius: 10px 10px 0px 0px;
|
}
|
.close-btn {
|
position: absolute;
|
display: inline-block;
|
text-align: center;
|
width: 16px;
|
height: 16px;
|
font-size: 13px;
|
line-height: 17px;
|
right: 12px;
|
top: 8px;
|
border: 1px solid #777777;
|
border-radius: 30px;
|
}
|
.popup-header .popup-img {
|
display: inline-block;
|
width: 35%;
|
}
|
.popup-header .popup-img img {
|
width: 100%;
|
display: table-cell;
|
}
|
.popup-header .popup-detail {
|
position: absolute;
|
left: 40%;
|
top: 20px;
|
}
|
.popup-header .popup-detail p {
|
line-height: 30px;
|
}
|
.popup-header .popup-detail .money {
|
color: red;
|
}
|
.popup-header .popup-detail .store {
|
color: #757575;
|
font-size: 12px;
|
}
|
.popup-header .popup-detail .select {
|
font-size: 12px;
|
}
|
.popup-color {
|
border-bottom: 1px solid #eeeeee;
|
}
|
.weui-cell {
|
padding-left: 0px;
|
}
|
.operation {
|
margin-bottom: 30px;
|
}
|
.operation .placeholder {
|
width: 70px;
|
height: 25px;
|
line-height: 25px;
|
margin: 2px;
|
text-align: center;
|
border-radius: 25px;
|
float: left;
|
background: transparent;
|
border: 1px solid #bbbbbb;
|
}
|
.operation .placeholder.active {
|
color: #ee0000;
|
border-color: #ee0000;
|
}
|
.seller-reply {
|
position: relative;
|
font-size: 14px;
|
padding: 5px;
|
background: #efeff4;
|
border-radius: 10px;
|
}
|
.seller-reply .arrow {
|
display: block;
|
border-width: 10px;
|
position: absolute;
|
top: -17px;
|
left: 50px;
|
border-style: solid dashed dashed;
|
border-color: transparent transparent #efeff4;
|
line-height: 0;
|
}
|
</style>
|
