|
@@ -1,64 +0,0 @@
|
|
-<template>
|
|
|
|
- <view>
|
|
|
|
- <view class="tabs">
|
|
|
|
- <view class="tab" :class="{ active: currentIndex === index }" v-for="(item, index) in navList" :key="index"
|
|
|
|
- @tap="onClickNav(index)">
|
|
|
|
- <view class="name-item">{{ item.name }}</view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <slot :name="navList[currentIndex].name"></slot>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-export default {
|
|
|
|
- props: {
|
|
|
|
- navList: {
|
|
|
|
- type: Array,
|
|
|
|
- default() {
|
|
|
|
- return [];
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- currentIndex: 0,
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- onClickNav(index) {
|
|
|
|
- this.currentIndex = index;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
-.tabs {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-around;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- color: #ffffff;
|
|
|
|
- background-color: #347caf;
|
|
|
|
-
|
|
|
|
- .name-item {
|
|
|
|
- padding: 20rpx 0;
|
|
|
|
- color: #ffffff;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.active {
|
|
|
|
- font-weight: bold;
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- .name-item::after {
|
|
|
|
- content: '';
|
|
|
|
- height: 2px;
|
|
|
|
- width: 100%;
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 0;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|