| | |
| | | v-for="(item, index) in titleList" |
| | | :key="index" |
| | | :class="{active: selectedTitleIndex === item.index, 'title-item': true}" |
| | | :style="{color: textColor}" |
| | | @click="changeTab(item)" |
| | | > |
| | | <text>{{item.title}}</text> |
| | | <view class="underline" v-if="selectedTitleIndex === item.index"></view> |
| | | <view class="underline" :style="{backgroundColor: textColor}" v-if="selectedTitleIndex === item.index"></view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | |
| | | selectedTitleIndex: { |
| | | type: String, |
| | | default: 'home' |
| | | }, |
| | | textColor: { |
| | | type: String, |
| | | default: 'white' |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | |
| | | .top-bar .title-scroll { |
| | | width: 100%; |
| | | height: 80rpx; |
| | | height: 40px; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | |
| | | position: relative; |
| | | padding: 0 24rpx; |
| | | font-size: 32rpx; |
| | | color: white; |
| | | /* color: white; */ |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | transform: translateX(-50%); |
| | | width: calc(100% - 76rpx); |
| | | height: 4rpx; |
| | | background-color: white; |
| | | /* background-color: white; */ |
| | | border-radius: 4rpx; |
| | | } |
| | | </style> |