107 lines
2.1 KiB
Vue
107 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="commodityDetails">
|
|||
|
|
<div class="img_info">
|
|||
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="commodity_title">
|
|||
|
|
<div class="title">天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水…</div>
|
|||
|
|
<div class="commodity_integral">
|
|||
|
|
<p class="integral"><span>10</span><span>分</span></p>
|
|||
|
|
<h5 class="repertory">库存：100</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="exchange">
|
|||
|
|
<div class="owner_integral">积分余额:438</div>
|
|||
|
|
<!-- 积分不足、缺货 -->
|
|||
|
|
<div class="exchange_btn">立即兑换</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'commodityDetails',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
document.title = '商品详情'
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.commodityDetails {
|
|||
|
|
background: #FFF;
|
|||
|
|
.img_info {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 750px;
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.commodity_title {
|
|||
|
|
padding: 32px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.title {
|
|||
|
|
font-size: 32px;
|
|||
|
|
color: #333333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.commodity_integral {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 32px;
|
|||
|
|
|
|||
|
|
.integral {
|
|||
|
|
color: #FF6900;
|
|||
|
|
font-size: 500;
|
|||
|
|
span:first-child {
|
|||
|
|
font-size: 34px;
|
|||
|
|
}
|
|||
|
|
span:last-child {
|
|||
|
|
font-size: 26px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.repertory {
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 26px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.exchange {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 112px;
|
|||
|
|
padding: 0 32px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #FFF;
|
|||
|
|
|
|||
|
|
.owner_integral {
|
|||
|
|
color: #CA906A;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exchange_btn {
|
|||
|
|
width: 224px;
|
|||
|
|
text-align: center;
|
|||
|
|
height: 80px;
|
|||
|
|
line-height: 80px;
|
|||
|
|
// background: #DDDDDD;
|
|||
|
|
border-radius: 52px;
|
|||
|
|
background-image: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
|
|||
|
|
color: #FFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|