11/4

src/main/pc-space/src/components/FansInfo.vue

@@ -3,15 +3,22 @@
         <div class="top"></div>
         <!-- <img class="top" :src="userInfo.avatar" alt="" /> -->
         <div class="top1">
-            <div class="title" @click="followers">
-                <div class="title1">{{ userInfo.followers }}</div>
-                <div class="title2">粉丝</div>
+            <div class="title">
+                <div class="text">
+                    <div
+                        class="text2"
+                        @click="tab(item)"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        :class="{ active: active === item }"
+                    >
+                        <div v-if="item === '粉丝'" class="text3">{{ userInfo.followers }}</div>
+                        <div v-if="item === '关注'" class="text3">{{ userInfo.follows }}</div>
+                        {{ item }}
+                    </div>
+                </div>
             </div>
             <img class="img2" :src="userInfo.avatar" alt="" />
-            <div class="title" @click="follows">
-                <div class="title1">{{ userInfo.follows }}</div>
-                <div class="title2">关注</div>
-            </div>
         </div>
     </div>
 </template>
@@ -20,17 +27,22 @@ import { mapState } from 'vuex';
 export default {
     data() {
         return {
-            tabs: ['粉丝', '关注']
+            tabs: ['粉丝', '关注'],
+            active: ''
         };
     },
     methods: {
-        follows() {
-            this.$router.push('/fans');
-            this.$emit('init');
-        },
-        followers() {
-            this.$router.push('/fans');
-            this.$emit('init2');
+        tab(e) {
+            this.active = e;
+            if (e === '关注') {
+                this.$router.push('/fans');
+                this.$emit('init');
+                this.$forceUpdate();
+            } else {
+                this.$router.push('/fans');
+                this.$emit('init2');
+                this.$forceUpdate();
+            }
         }
     },
     computed: {
@@ -52,20 +64,24 @@ export default {
         .title {
             text-align: center;
             cursor: pointer;
-            padding: 8px 100px 0;
-            .title1 {
+            .text3 {
                 font-size: 22px;
                 font-weight: normal;
                 color: #ffffff;
                 line-height: 24px;
             }
-            .title2 {
-                font-size: 14px;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
-                &.active {
-                    color: red;
+            .text {
+                display: flex;
+                .text2 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    padding: 0 100px;
+                    color: #939599;
+                    line-height: 24px;
+                    margin-top: 6px;
+                    &.active {
+                        color: @prim;
+                    }
                 }
             }
         }

src/main/pc-space/src/views/user/Fans.vue

@@ -98,6 +98,10 @@ export default {
         color: #ccc;
         margin: 10px 0 0 2px;
     }
+    .followed {
+        border-color: #939599;
+        color: #939599 !important;
+    }
     .content {
         padding: 0 16px;
         .box {

src/main/pc-space/src/views/user/Give.vue

@@ -71,7 +71,6 @@ export default {
             search: '',
             type: '',
             empty: false
-            // url: '/collection/myLikes'
         };
     },
     mixins: [pageableTable],
@@ -109,7 +108,6 @@ export default {
     // },
     mounted() {
         this.init();
-        console.log(this.showList);
     },
     methods: {
         init() {