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> |