add-optional.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="optional-box">
  3. <view class="optional" v-for="item in 20">
  4. <view class="optional-item" v-for="item in optionalList" @click.stop="item.status = !item.status">
  5. <text class="item-text">{{ item.title }}</text>
  6. <text :class="['item-icon', 'iconfont' , item.status ? 'active-item-icon' : '']">&#xe627;</text>
  7. </view>
  8. </view>
  9. <view class="optional-btn">添加自选</view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name: "add-optional",
  15. data() {
  16. return {
  17. optionalList: [{
  18. title: 'ETH/USDT',
  19. status: true
  20. },
  21. {
  22. title: 'FIL/USDT',
  23. status: true
  24. },
  25. {
  26. title: 'BTC/USDT',
  27. status: true
  28. },
  29. {
  30. title: 'LTC/USDT',
  31. status: true
  32. },
  33. {
  34. title: 'DOGE/USDT',
  35. status: true
  36. },
  37. {
  38. title: 'DOT/USDT',
  39. status: true
  40. }
  41. ]
  42. };
  43. }
  44. }
  45. </script>
  46. <style lang="scss" scoped>
  47. .optional-box {
  48. width: 100%;
  49. background-color: #fff;
  50. padding: 0 $pages-padding ;
  51. .optional {
  52. width: 100%;
  53. display: flex;
  54. flex-wrap: wrap;
  55. .optional-item {
  56. width: 50%;
  57. flex-shrink: 0;
  58. padding: 10rpx 0 40rpx;
  59. display: flex;
  60. justify-content: space-between;
  61. align-items: center;
  62. font-size: 28rpx;
  63. .item-text {
  64. font-family: PingFang SC, PingFang SC-Bold;
  65. font-weight: 700;
  66. }
  67. .item-icon {
  68. color: #ccc;
  69. }
  70. .active-item-icon {
  71. color: $Theme-Color;
  72. }
  73. &:nth-child(2n - 1) {
  74. padding-right: 30rpx;
  75. }
  76. &:nth-child(2n) {
  77. padding-left: 30rpx;
  78. }
  79. }
  80. }
  81. .optional-btn {
  82. width: 300rpx;
  83. height: 90rpx;
  84. background-color: $Theme-Color;
  85. color: #fff;
  86. font-size: 28rpx;
  87. text-align: center;
  88. line-height: 90rpx;
  89. margin: 20rpx auto 0;
  90. border-radius: 10rpx;
  91. }
  92. }
  93. </style>