177 lines
5.0 KiB
Vue
177 lines
5.0 KiB
Vue
<template>
|
|
<view class="content" style="background-image: url('/static/bags_bg.png');">
|
|
|
|
<view class="" style="width: 100%; overflow: auto;">
|
|
|
|
<view class=""
|
|
style="width: 689.58rpx; margin: 201.39rpx auto 114.58rpx; display: flex; flex-direction: column;">
|
|
<view class="" v-for="(item,index) in dataList"
|
|
style="width: 100%; height: 161.81rpx; background-color: #FFFBF0; border-radius: 30rpx; margin-bottom: 29.17rpx; display: flex; align-items: center; position: relative;">
|
|
|
|
<image :src="item.isCheck?'/static/ic_check_s.png':'/static/ic_check.png'"
|
|
style="width: 29.17rpx; height: 29.17rpx; margin-left: 20.83rpx;" mode=""></image>
|
|
|
|
<image :src="item.imgurl"
|
|
style="width: 125rpx; height: 125rpx; background-color: #9B9285; border-radius: 30rpx; margin-left: 19.44rpx;"
|
|
mode="">
|
|
</image>
|
|
|
|
<text
|
|
style="position: absolute; left: 210.42rpx; top: 24.31rpx; font-size: 23.58rpx; color: #6E5B51;">{{item.title}}</text>
|
|
|
|
<text
|
|
style="position: absolute; left: 210.42rpx; top: 60.42rpx; font-size: 19.42rpx; color: #6E5B51;">{{item.name}}</text>
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; position: absolute; left: 205.81rpx; bottom: 26.39rpx;">
|
|
<text style="font-size: 29.13rpx; color: #6E5B51;">￥{{item.price}}</text>
|
|
<text
|
|
style="font-size: 19.42rpx; color: #6E5B51; margin-left: 17.36rpx; margin-top: 10rpx;">库存紧张</text>
|
|
</view>
|
|
|
|
<view class=""
|
|
style="display: flex; flex-direction: row; position: absolute; bottom: 23.61rpx; right: 23.61rpx; align-items: center;">
|
|
<image src="/static/ic_minus.png" style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
|
<text
|
|
style="width: 70.83rpx; font-size: 29.17rpx; color: #6E5B51; text-align: center;">{{item.num}}</text>
|
|
<image src="/static/ic_add.png" style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class=""
|
|
style="width: 100%; height: 114.58rpx; background-color: #FFFDF1; position: fixed; bottom: 0; display: flex; flex-direction: row-reverse; align-items: center;">
|
|
|
|
<view class=""
|
|
style="width: 164.58rpx; height: 68.75rpx; position: relative; margin-right: 19.44rpx; display: flex; align-items: center; justify-content: center;">
|
|
<image src="/static/pay_bg.png" style="width: 100%; height: 100%;position: absolute;" mode=""></image>
|
|
<text style="position: absolute; font-size: 20.83rpx; color: #66594E;">结算 ({{checkNum}})</text>
|
|
</view>
|
|
|
|
<text style="font-size: 29.13rpx; color: #6E5B51; margin-right: 30.56rpx;">￥{{sumPrice}}</text>
|
|
<text style="font-size: 19.42rpx; color: #8C8574;">共</text>
|
|
<text style="font-size: 19.42rpx; color: #8C8574; margin-right: 30rpx;">合计： {{checkNum}}件</text>
|
|
|
|
|
|
<view class="" style="display: flex; flex-direction: row; align-items: center; position: fixed; left: 46rpx;">
|
|
<image src="/static/ic_check.png" style="width: 29.17rpx; height: 29.17rpx;" mode=""></image>
|
|
<text style="font-size: 19.42rpx; color: #8C8574; margin-left: 13rpx; margin-bottom: 2rpx;">全选</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
checkNum: 1,
|
|
sumPrice: 20,
|
|
dataList: [{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
},
|
|
{
|
|
imgurl: "",
|
|
title: "坂本日常 吧唧",
|
|
name: "坂本",
|
|
price: "20",
|
|
num: "1",
|
|
isCheck: false,
|
|
type: "库存紧张"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
</style> |