124 lines
2.6 KiB
Vue
124 lines
2.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="" style="width: 100%; height: 715.65rpx; background-color: #D8D8D8;">
|
|
|
|
</view>
|
|
|
|
<!-- 返回 -->
|
|
<image src="/static/ic_back.png"
|
|
style="width: 41.98rpx; height: 41.98rpx; position: fixed; left: 30rpx; top: 137rpx;" mode=""></image>
|
|
|
|
|
|
<view class="" style="width: 100%; height: 244.27rpx; background-color: white; position: relative;">
|
|
|
|
<view class="item-price">
|
|
<text class="price-symbol-small">￥</text>
|
|
<text class="price-value-small">69</text>
|
|
</view>
|
|
|
|
<view class="" style="position: absolute; left: 30.53rpx; top: 95.42rpx; font-size: 26.72rpx;">
|
|
英雄联盟K/DA系列
|
|
</view>
|
|
|
|
<view class="" style="position: absolute; left: 30.53rpx; bottom: 21rpx; font-size: 22.9rpx;">
|
|
商品详情
|
|
</view>
|
|
|
|
<view class="product-count">
|
|
<text class="count-text">item.num/1</text>
|
|
<image src="/static/ic_box.png" class="box-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 详情列表 -->
|
|
<view class="" v-for="(item,index) in detailList"
|
|
style="width: 100%; height: 666.03rpx; background-color: #D8D8D8;">
|
|
{{index}}
|
|
</view>
|
|
|
|
<view class="" style="width: 100%; height: 188.94rpx; position: fixed; bottom: 0; background-color: white;">
|
|
|
|
<view class="" @click="bayOpen()"
|
|
style="width: 654.58rpx; height: 80.15rpx; margin: 33rpx auto; background-color: #333333; display: flex; align-items: center; justify-content: center; border-radius: 15.27rpx;">
|
|
<text style="color: #CDEF27; font-size: 22.9rpx;">立即购买</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<uni-popup ref="bayPop" type="bottom" style="width: 100%; height: 965.65rpx; background-color: #F7F7F7;">
|
|
|
|
|
|
|
|
|
|
</uni-popup>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
|
|
export default {
|
|
components: { uniPopup },
|
|
data() {
|
|
return {
|
|
detailList: [1, 2, 3, 4, 5],
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
|
|
bayOpen() {
|
|
this.$refs.bayPop.open();
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.item-price {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 30.53rpx;
|
|
top: 26.72rpx;
|
|
}
|
|
|
|
.price-symbol-small {
|
|
font-size: 19.08rpx;
|
|
margin-top: 10rpx;
|
|
color: #FF6A6A;
|
|
}
|
|
|
|
.price-value-small {
|
|
font-size: 41.98rpx;
|
|
font-weight: bold;
|
|
color: #FF6A6A;
|
|
}
|
|
|
|
|
|
.product-count {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
right: 30.53rpx;
|
|
top: 40rpx;
|
|
align-items: center;
|
|
|
|
.count-text {
|
|
font-size: 15.27rpx;
|
|
color: #6C6C6C;
|
|
}
|
|
|
|
.box-icon {
|
|
width: 17.39rpx;
|
|
height: 17.39rpx;
|
|
margin-left: 7rpx;
|
|
}
|
|
}
|
|
</style> |