371 lines
7.1 KiB
Vue
371 lines
7.1 KiB
Vue
<template>
|
||
<view class="app">
|
||
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" @clickItem='clickItem'
|
||
style='background-color: #fff;height:750rpx'>
|
||
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height:100%">
|
||
<!-- <swiper-item v-for="(item ,index) in info" :key="index">
|
||
</swiper-item> -->
|
||
<swiper-item>
|
||
<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
<view class="Commodity common">
|
||
<view class="name">
|
||
酒精棉片
|
||
</view>
|
||
<view class="number">
|
||
200片
|
||
</view>
|
||
<view class="price">
|
||
￥36.0
|
||
</view>
|
||
</view>
|
||
<view class="choice common">
|
||
<view class="selected">
|
||
已选
|
||
</view>
|
||
<view class="content">
|
||
酒精棉片 8盒×1
|
||
</view>
|
||
<image src="../../static/jiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="Discount common">
|
||
<view class="selected">
|
||
优惠
|
||
</view>
|
||
<view class="content">
|
||
购买最多可获得3积分
|
||
</view>
|
||
<image src="../../static/jiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="service common">
|
||
<view class="selected">
|
||
服务
|
||
</view>
|
||
<view class="content">
|
||
· 7天无理由退货
|
||
</view>
|
||
<view class="content" style="display: block;">
|
||
· 仅工作日发货
|
||
</view>
|
||
<image src="../../static/jiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="picture">
|
||
<view class="selected">
|
||
图文服务
|
||
</view>
|
||
<image src="../../static/tpcs.png" mode=""></image>
|
||
</view>
|
||
<view class="Purchasecolumn">
|
||
<view class="buy" @tap="buyshow=true">
|
||
立即购买
|
||
</view>
|
||
</view>
|
||
|
||
<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
|
||
<view class="PurchasePage" @click.stop=''>
|
||
<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
|
||
<view class="topcontent">
|
||
<view class="image">
|
||
<image src="../../static/tpcs.png" mode=""></image>
|
||
</view>
|
||
<view class="title">
|
||
<span>酒精棉片</span> <span style='margin-left: 30rpx;'>200片</span>
|
||
</view>
|
||
<view class="price">
|
||
￥36.0
|
||
</view>
|
||
</view>
|
||
<view class="centercontent topcontent">
|
||
<view class="header">
|
||
型号
|
||
</view>
|
||
<view class="Productmodel">
|
||
酒精棉片 8盒
|
||
</view>
|
||
</view>
|
||
<view class="bottomcontent topcontent">
|
||
<view class="header">
|
||
数量
|
||
</view>
|
||
<view class="number">
|
||
<u-number-box :min="1" :max="999"></u-number-box>
|
||
</view>
|
||
</view>
|
||
<view class="buy">
|
||
立即购买
|
||
</view>
|
||
</view>
|
||
</u-mask>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
buyshow: false, //立即购买遮罩层开关
|
||
//轮播内容
|
||
info: [{
|
||
content: '内容 A'
|
||
}, {
|
||
content: '内容 B'
|
||
}, {
|
||
content: '内容 C'
|
||
}],
|
||
current: 0, //轮播初始下标
|
||
mode: 'dot', //轮播点样式
|
||
swiperDotIndex: 0, //轮播可视图
|
||
number: 1, //数量
|
||
};
|
||
},
|
||
methods: {
|
||
//滑动轮播切换
|
||
change(e) {
|
||
this.current = e.detail.current;
|
||
},
|
||
//点击轮播点切换
|
||
clickItem(e) {
|
||
this.swiperDotIndex = e
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
background-color: #F4F5F7;
|
||
width: 100%;
|
||
position: relative;
|
||
color: #000000;
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
background-color: #000000;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
|
||
.PurchasePage {
|
||
position: fixed;
|
||
top: 40%;
|
||
width: 100%;
|
||
height: 60%;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 0px 0px;
|
||
font-size: 36rpx;
|
||
|
||
.close {
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
position: absolute;
|
||
top: 5%;
|
||
right: 5%;
|
||
}
|
||
|
||
.topcontent {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1rpx solid #D8D4D4;
|
||
|
||
.price {
|
||
color: #D43953;
|
||
position: absolute;
|
||
top: 23%;
|
||
left: 40%;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
top: 13%;
|
||
left: 40%;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.image {
|
||
width: 215rpx;
|
||
height: 215rpx;
|
||
background: rgba(150, 147, 148, 0.21);
|
||
margin: 60rpx 0 0 0;
|
||
|
||
image {
|
||
width: 201rpx;
|
||
height: 201rpx;
|
||
margin: 7rpx 0 0 7rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.buy {
|
||
width: 60%;
|
||
height: 71rpx;
|
||
background: #4C7BC9;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 71rpx;
|
||
border-radius: 26rpx;
|
||
margin: 40rpx 0 0 20%;
|
||
}
|
||
|
||
.bottomcontent {
|
||
margin-top: 34rpx;
|
||
padding-bottom: 35rpx;
|
||
|
||
.header {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.number {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 10%;
|
||
}
|
||
}
|
||
|
||
.centercontent {
|
||
margin-top: 34rpx;
|
||
padding-bottom: 35rpx;
|
||
|
||
.Productmodel {
|
||
width: 344rpx;
|
||
height: 80rpx;
|
||
background: #ECF1FA;
|
||
border: 1rpx solid #4C7BC9;
|
||
line-height: 80rpx;
|
||
border-radius: 25rpx;
|
||
color: #4C7BC9;
|
||
text-align: center;
|
||
margin-top: 27rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Purchasecolumn {
|
||
width: 100%;
|
||
height: 110rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 0;
|
||
|
||
.buy {
|
||
width: 263rpx;
|
||
height: 80rpx;
|
||
background: #4C7BC9;
|
||
border-radius: 25rpx;
|
||
font-size: 38rpx;
|
||
color: #FFFFFF;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 5%;
|
||
top: 15rpx;
|
||
}
|
||
}
|
||
|
||
.common {
|
||
padding-left: 5%;
|
||
}
|
||
|
||
.choice,
|
||
.Discount,
|
||
.service {
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||
font-size: 34rpx;
|
||
line-height: 80rpx;
|
||
margin-bottom: 15rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 17rpx;
|
||
height: 26rpx;
|
||
position: absolute;
|
||
right: 5%;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.content {
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 25%;
|
||
}
|
||
|
||
.selected {
|
||
color: #969394;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.picture {
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
|
||
position: relative;
|
||
padding-bottom: 110rpx;
|
||
|
||
.selected {
|
||
padding: 20rpx 0 0 5%;
|
||
color: #969394;
|
||
display: inline-block;
|
||
}
|
||
|
||
image {
|
||
margin-top: 20rpx;
|
||
height: 850rpx;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.service {
|
||
height: 130rpx;
|
||
line-height: 65rpx;
|
||
|
||
.content {
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 25%;
|
||
}
|
||
|
||
.selected {
|
||
color: #969394;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.Commodity {
|
||
height: 160rpx;
|
||
background: #FFFFFF;
|
||
margin: 15rpx 0 15rpx 0;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
font-size: 36rpx;
|
||
line-height: 75rpx;
|
||
|
||
.name,
|
||
.number {
|
||
display: inline-block;
|
||
}
|
||
|
||
.price {
|
||
color: #D43953;
|
||
}
|
||
|
||
.number {
|
||
padding-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|