<template>
|
<div id="my-popup" class="weui-popup__container popup-bottom">
|
<div class="weui-popup__overlay"></div>
|
<div class="weui-popup__modal">
|
<span class="close"><i class="icon-close"></i></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>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
export default {
|
name: 'tabbutton',
|
props: {
|
// swiperSource: {
|
// type: Array,
|
// required: true
|
// }
|
},
|
data () {
|
return {
|
dict: dict
|
}
|
},
|
methods: {
|
jumpmenu (item) {
|
if (item.view) {
|
this.$emit('swiperjump', {
|
view: item.view,
|
value: item.type ? item.type : null
|
})
|
}
|
}
|
},
|
mounted: function () {
|
// eslint-disable-next-line
|
new Swiper('.swiper-container', this.swiperConfig)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.weui-popup__container {
|
z-index: 1000;
|
}
|
.weui-popup__modal {
|
box-sizing: border-box;
|
padding: 10px;
|
}
|
.close {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
position: absolute;
|
top: 10px;
|
right: 8px;
|
transform:rotate(60deg);
|
-moz-transform:rotate(45deg);
|
-webkit-transform:rotate(45deg);
|
-o-transform:rotate(45deg);
|
}
|
.close .icon-close:before {
|
content: " ";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
height: 1px;
|
width: 16px;
|
background-color: #000000;
|
margin-left: -7px;
|
}
|
.close .icon-close:after {
|
content: " ";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
height: 16px;
|
width: 1px;
|
background-color: #000000;
|
margin-top: -7px;
|
}
|
.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;
|
}
|
</style>
|
