market.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <view class="market-box">
  3. <view class="market-tab">
  4. <view v-for="(item , index) in marketTab"
  5. :class="['market-tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
  6. @click.stop="marketTabIndex = index">
  7. {{ item }}
  8. </view>
  9. </view>
  10. <swiper :duration="150" class="market-content" :current="marketTabIndex">
  11. <swiper-item>
  12. <scroll-view class="market-scroll" scroll-y>
  13. <add-optional ref="addOptionalRef" />
  14. </scroll-view>
  15. </swiper-item>
  16. <swiper-item>
  17. <scroll-view class="market-scroll" scroll-y>
  18. <marketplace ref="marketplaceRef" :marketplaceList="market"/>
  19. </scroll-view>
  20. </swiper-item>
  21. </swiper>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. name: "marketModules",
  27. props:{
  28. market:{
  29. type:Array,
  30. default:() => []
  31. }
  32. },
  33. data() {
  34. return {
  35. marketTabIndex: 1,
  36. marketTab: [
  37. '自选',
  38. '市场'
  39. ]
  40. };
  41. }
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .market-box {
  46. width: 100%;
  47. height: 90vh;
  48. background-color: $modules-box-bg;
  49. .market-tab {
  50. padding: 0 $pages-padding ;
  51. width: 100%;
  52. height: 114rpx;
  53. display: flex;
  54. align-items: center;
  55. .market-tab-item {
  56. font-size: 28rpx;
  57. font-family: PingFang SC, PingFang SC-Bold;
  58. font-weight: 700;
  59. color: #1a1a1a;
  60. line-height: 40rpx;
  61. letter-spacing: 0.6rpx;
  62. +.market-tab-item {
  63. margin-left: 50rpx;
  64. }
  65. }
  66. .active-tab-item {
  67. font-size: 30rpx;
  68. color: #20B482;
  69. position: relative;
  70. &::before {
  71. position: absolute;
  72. left: 50%;
  73. transform: translateX(-50%);
  74. bottom: -20rpx;
  75. content: '';
  76. width: 80%;
  77. height: 3px;
  78. border-radius: 2px;
  79. background-color: #20B482;
  80. }
  81. }
  82. }
  83. .market-content {
  84. width: 100%;
  85. height: calc(100% - 104rpx);
  86. .market-scroll {
  87. width: 100%;
  88. height: 100%;
  89. }
  90. }
  91. }
  92. </style>