123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <view class="market-box">
- <view class="market-tab">
- <view v-for="(item , index) in marketTab"
- :class="['market-tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
- @click.stop="marketTabIndex = index">
- {{ item }}
- </view>
- </view>
- <swiper :duration="150" class="market-content" :current="marketTabIndex">
- <swiper-item>
- <scroll-view class="market-scroll" scroll-y>
- <add-optional ref="addOptionalRef" />
- </scroll-view>
- </swiper-item>
- <swiper-item>
- <scroll-view class="market-scroll" scroll-y>
- <marketplace ref="marketplaceRef" :marketplaceList="market"/>
- </scroll-view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- export default {
- name: "marketModules",
- props:{
- market:{
- type:Array,
- default:() => []
- }
- },
- data() {
- return {
- marketTabIndex: 1,
- marketTab: [
- '自选',
- '市场'
- ]
- };
- }
- }
- </script>
- <style lang="scss" scoped>
- .market-box {
- width: 100%;
- height: 90vh;
- background-color: $modules-box-bg;
- .market-tab {
- padding: 0 $pages-padding ;
- width: 100%;
- height: 114rpx;
- display: flex;
- align-items: center;
- .market-tab-item {
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #1a1a1a;
- line-height: 40rpx;
- letter-spacing: 0.6rpx;
- +.market-tab-item {
- margin-left: 50rpx;
- }
- }
- .active-tab-item {
- font-size: 30rpx;
- color: #20B482;
- position: relative;
- &::before {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: -20rpx;
- content: '';
- width: 80%;
- height: 3px;
- border-radius: 2px;
- background-color: #20B482;
- }
- }
- }
- .market-content {
- width: 100%;
- height: calc(100% - 104rpx);
- .market-scroll {
- width: 100%;
- height: 100%;
- }
- }
- }
- </style>
|