56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="score-title">积分</view>
|
|||
|
|
<view class="score-content">
|
|||
|
|
<view class="score-item">
|
|||
|
|
<text class="score-label">我的积分：</text>
|
|||
|
|
<text class="score-value">1234</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="score-item">
|
|||
|
|
<text class="score-label">可用积分：</text>
|
|||
|
|
<text class="score-value">100</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="score-item">
|
|||
|
|
<text class="score-label">积分使用规则：</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 更多积分规则和说明 -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 数据部分可以根据实际需求添加，比如用户积分、可用积分等
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// 方法部分可以根据需要添加，比如用户积分可用于兑换商品等
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.container {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
.score-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.score-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.score-label {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.score-value {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #5677fc;
|
|||
|
|
}
|
|||
|
|
</style>
|