style: other tabs

src/assets/css/common/toolbar.less

@@ -2,6 +2,7 @@
     .flex;
     .r(10px);
     gap: 10px;
+    background-color: #fff;
     min-height: 60px;
     align-items: center;
     box-sizing: border-box;

src/assets/css/exam/index.less

@@ -6,6 +6,9 @@
             .search-item {
                 &.type-list {
                     .type-item {
+                        &:last-child {
+                            margin: 0;
+                        }
                         &:hover,
                         &.is-active {
                             background-color: @examColor;
@@ -17,6 +20,7 @@
                     }
                 }
                 &.filter-wrap {
+                    margin: 0;
                     .filter-img {
                         &.active {
                             svg {
@@ -147,12 +151,18 @@
                 flex-wrap: wrap;
             }
             .search-group {
-                gap: 0;
-                .search-item {
+                flex-direction: row;
+                flex-wrap: wrap;
+                .type-list {
+                    .w(100%);
+                    box-sizing: border-box;
                     flex-direction: column;
                     align-items: flex-start;
-                    gap: 10px;
+                    .el-radio-group {
+                        gap: 0;
+                    }
                     .type-item {
+                        width: calc(33%);
                         margin: 0;
                     }
                 }

src/assets/css/reputation/home.less

@@ -1,21 +1,21 @@
 .reputation-container {
     .pt(40px);
-    .m-common-tabs {
+    .m-reputation-tabs {
         .u-select {
             .flex;
             width: 260px;
             input {
                 .r(30px);
             }
         }
-
-        .m-group {
+        .u-item {
+            background-color: #d16400;
+            color: #fff;
+        }
+        .m-toolbar-item {
             .flex;
             gap: 10px;
             align-items: center;
-            &.m-group-search {
-                .w(100%);
-            }
             .el-select .el-input .el-input__inner {
                 border: 2px solid #f3f4f5;
                 background: #f3f4f5;

src/views/book/Index.vue

@@ -1,31 +1,9 @@
 <template>
     <div class="p-book">
-        <div class="m-share-tabs m-common-tabs">
-            <div class="m-common-card">
-                <div
-                    v-for="item in professions"
-                    :key="item.id"
-                    class="u-tab"
-                    @click="clickTabs(item.id)"
-                    :class="{ active: item.id == active }"
-                >
-                    {{ item.name }}
-                </div>
-            </div>
-
-            <div class="u-search m-common-card">
-                <el-input
-                    placeholder="输入关键词搜索"
-                    v-model="keyword"
-                    clearable
-                    suffix-icon="el-icon-search"
-                    class="u-search-input"
-                />
-            </div>
-        </div>
+        <CommonToolbar class="m-reputation-tabs" color="#d16400" search :types="professions" @update="updateToolbar" />
         <div class="m-content" ref="listRef" v-loading="loading">
             <template v-if="active === 0">
-                <div v-for="(item, i) in list" :key="i" class="m-book-list">
+                <div v-for="(item, i) in list" :key="item.label + i" class="m-book-list">
                     <template v-if="item.list.length">
                         <div class="u-type" :class="{ reading: item.id === 8 }">
                             <div class="u-title">
@@ -46,7 +24,7 @@
                                 <BookCard
                                     :style="!isPhone ? `width: calc(100% / ${count} - 20px)` : ''"
                                     v-for="(item, index) in item.list"
-                                    :key="index"
+                                    :key="index + Math.random()"
                                     :item="item"
                                     :reporter="{ aggregate: listId(item.list) }"
                                     @click="setItem(item)"
@@ -68,7 +46,7 @@
                         <div
                             class="m-item"
                             :class="showType === item.value && 'active'"
-                            :key="item.value"
+                            :key="item.value + Math.random()"
                             v-for="item in showTypes"
                             @click="showType = item.value"
                         >
@@ -80,7 +58,7 @@
                     <div class="m-book-list--card" v-if="showType === 'card'">
                         <BookCard
                             v-for="item in subList"
-                            :key="item.ID"
+                            :key="item.ID + Math.random()"
                             :item="item"
                             :reporter="{ aggregate: listId(subList) }"
                         />
@@ -89,7 +67,7 @@
                         <ListHead></ListHead>
                         <BookItem
                             v-for="item in subList"
-                            :key="item.ID"
+                            :key="item.ID + Math.random()"
                             :item="item"
                             :reporter="{ aggregate: listId(subList) }"
                         />
@@ -123,6 +101,7 @@
 <script>
 import ListCross from "@/components/ListCross.vue";
 import CommonList from "@/components/common/list.vue";
+import CommonToolbar from "@/components/common/toolbar.vue";
 import professions from "@/assets/data/book_profession.json";
 import { isPhone } from "@/utils/index";
 import { omit, cloneDeep, concat } from "lodash";
@@ -134,7 +113,7 @@ import { getList } from "@/service/book";
 
 export default {
     name: "Index",
-    components: { CommonList, BookCard, BookItem, ListHead, ListCross },
+    components: { CommonList, CommonToolbar, BookCard, BookItem, ListHead, ListCross },
     data() {
         return {
             loading: false,
@@ -203,8 +182,14 @@ export default {
     },
     computed: {
         professions() {
-            const _list = professions.filter((item) => item.id !== 8);
-            return [{ id: 0, name: "全部" }, ..._list];
+            const _list = professions
+                .filter((item) => item.id !== 8)
+                .map((item) => {
+                    item.label = item.name;
+                    item.value = item.id;
+                    return item;
+                });
+            return [{ id: 0, value: -1, name: "全部", label: "全部" }, ..._list];
         },
         ...mapState(["recentReadList"]),
         client() {
@@ -249,8 +234,13 @@ export default {
         },
     },
     methods: {
+        updateToolbar(data) {
+            const { type, search } = data;
+            this.keyword = search;
+            this.clickTabs(type);
+        },
         clickTabs(id) {
-            this.active = id;
+            this.active = id == -1 ? 0 : id;
             this.list = this.list.map((e) => {
                 e.page = 1;
                 return e;

src/views/pvg/Gonggao.vue

@@ -1,44 +1,31 @@
 <template>
     <div class="p-gonggao">
-        <div class="m-gonggao-tabs m-common-tabs">
-            <template v-for="tab in tabs">
-                <div :key="tab.key" class="u-tab" @click="go(tab)" :class="active === tab.key && 'active'">
-                    {{ tab.label }}
-                </div>
-            </template>
-        </div>
+        <CommonToolbar class="m-gonggao-tabs" color="#53b27f" :types="tabs" @update="updateToolbar" />
         <div class="m-content">
-            <!-- <component :is="tab"></component> -->
             <router-view></router-view>
         </div>
     </div>
 </template>
 
 <script>
 import { getMyFocusServers, getAllServers } from "@/service/server.js";
-// import Daily from "@/components/gonggao/Daily.vue";
-// import Calendar from "@/components/gonggao/Calendar.vue";
-// import Server from "@/components/gonggao/Server.vue";
+import CommonToolbar from "@/components/common/toolbar.vue";
 export default {
     name: "Gonggao",
-    // components: {
-    //     Daily,
-    //     Calendar,
-    //     Server,
-    // },
+    components: { CommonToolbar },
     data() {
         return {
             tabs: [
                 {
-                    key: "daily",
+                    value: "daily",
                     label: "速览",
                 },
                 {
-                    key: "calendar",
+                    value: "calendar",
                     label: "日历",
                 },
                 {
-                    key: "server",
+                    value: "server",
                     label: "开服状态",
                 },
             ],
@@ -79,11 +66,6 @@ export default {
         },
     },
     methods: {
-        go(tab) {
-            this.$router.push({
-                path: `/gonggao/${tab.key}`,
-            });
-        },
         // 获取服务器列表
         loadAllServers() {
             getAllServers().then((res) => {
@@ -116,6 +98,12 @@ export default {
             });
             this.$store.commit("setFavList", favList);
         },
+        updateToolbar(data) {
+            const { type } = data;
+            this.$router.push({
+                path: `/gonggao/${type}`,
+            });
+        },
     },
     created() {
         this.loadAllServers();
@@ -124,31 +112,10 @@ export default {
 </script>
 
 <style lang="less">
-@import "~@/assets/css/common/tabs.less";
-.m-gonggao-tabs {
-    .u-tab {
-        &.active,
-        &:hover {
-            background-color: @priceColor;
-        }
-    }
-}
 .p-gonggao {
-    .pt(40px);
-    background-color: #f5f5f5;
+    .pt(20px);
     .m-content {
-        .pt(40px);
-    }
-}
-@media screen and (max-width: @phone) {
-    .p-gonggao {
-        .m-gonggao-tabs {
-            flex-direction: row;
-            gap:10px;
-        }
-        .m-content {
-            .pt(64px);
-        }
+        .pt(20px);
     }
 }
 </style>