|
- <template>
- <view class="page">
- <text class="tips">金币可以用来生成写真和制作视频</text>
- <view
- v-for="item in orderList"
- class="orderListItem"
- :class="active == item.num ? 'border' : ''"
- @click="select(item)"
- >
- <image src="../../assets/icon/coin.png" mode="scaleToFill" />
- <text class="num">金币{{ item.num }}枚</text>
- <text class="price">¥{{ item.money }}</text>
- </view>
- <view class="buyBtn">立刻购买</view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- //#endregion --------------
-
- //#region 列表数据
- const active = ref(5);
- const orderList = ref([
- { num: 5, money: 4.9 },
- { num: 20, money: 18.9 },
- { num: 30, money: 28.9 },
- ]);
- function select(item) {
- active.value = item.num;
- }
- //#endregion --------------
-
- //#region
-
- //#endregion --------------
- </script>
-
- <style lang="scss">
- .tips {
- margin-top: 70rpx;
- margin-bottom: 90rpx;
- }
-
- .orderListItem {
- position: relative;
-
- margin-bottom: 40rpx;
- padding: 0 70rpx 0 30rpx;
- width: 690rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 140rpx;
- line-height: 120rpx;
- font-size: 40rpx;
- background-color: #484848;
- border-radius: 36rpx;
- font-size: 30rpx;
- font-weight: 900;
- border: 6px solid #484848;
- image {
- width: 53rpx;
- height: 53rpx;
- margin-right: 25rpx;
- }
- .num {
- font-size: 36rpx;
- flex: 1;
- }
- }
- .border {
- border: 6px solid #ff4f00;
- }
-
- .buyBtn {
- position: absolute;
- bottom: 80rpx;
- width: 520rpx;
- height: 100rpx;
- background: #ff4f00;
- border-radius: 50rpx;
- text-align: center;
- line-height: 100rpx;
- font-size: 30rpx;
- font-weight: bold;
- }
- </style>
|