邃芒智像(Uniapp : WX、TT、H5)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

90 lines
1.7 KiB

  1. <template>
  2. <view class="page">
  3. <text class="tips">金币可以用来生成写真和制作视频</text>
  4. <view
  5. v-for="item in orderList"
  6. class="orderListItem"
  7. :class="active == item.num ? 'border' : ''"
  8. @click="select(item)"
  9. >
  10. <image src="../../assets/icon/coin.png" mode="scaleToFill" />
  11. <text class="num">金币{{ item.num }}枚</text>
  12. <text class="price">¥{{ item.money }}</text>
  13. </view>
  14. <view class="buyBtn">立刻购买</view>
  15. </view>
  16. </template>
  17. <script setup>
  18. //#region 导入
  19. import { ref, reactive } from "vue";
  20. //#endregion --------------
  21. //#region 列表数据
  22. const active = ref(5);
  23. const orderList = ref([
  24. { num: 5, money: 4.9 },
  25. { num: 20, money: 18.9 },
  26. { num: 30, money: 28.9 },
  27. ]);
  28. function select(item) {
  29. active.value = item.num;
  30. }
  31. //#endregion --------------
  32. //#region
  33. //#endregion --------------
  34. </script>
  35. <style lang="scss">
  36. .tips {
  37. margin-top: 70rpx;
  38. margin-bottom: 90rpx;
  39. }
  40. .orderListItem {
  41. position: relative;
  42. margin-bottom: 40rpx;
  43. padding: 0 70rpx 0 30rpx;
  44. width: 690rpx;
  45. display: flex;
  46. justify-content: space-between;
  47. align-items: center;
  48. height: 140rpx;
  49. line-height: 120rpx;
  50. font-size: 40rpx;
  51. background-color: #484848;
  52. border-radius: 36rpx;
  53. font-size: 30rpx;
  54. font-weight: 900;
  55. border: 6px solid #484848;
  56. image {
  57. width: 53rpx;
  58. height: 53rpx;
  59. margin-right: 25rpx;
  60. }
  61. .num {
  62. font-size: 36rpx;
  63. flex: 1;
  64. }
  65. }
  66. .border {
  67. border: 6px solid #ff4f00;
  68. }
  69. .buyBtn {
  70. position: absolute;
  71. bottom: 80rpx;
  72. width: 520rpx;
  73. height: 100rpx;
  74. background: #ff4f00;
  75. border-radius: 50rpx;
  76. text-align: center;
  77. line-height: 100rpx;
  78. font-size: 30rpx;
  79. font-weight: bold;
  80. }
  81. </style>