修改样式

src/main.js

@@ -28,7 +28,9 @@ import {
   List,
   Cell,
   Swipe,
-  SwipeItem
+  SwipeItem,
+  DropdownMenu,
+  DropdownItem
 } from "vant";
 
 window.$_http = axios;
@@ -53,6 +55,8 @@ Vue.component("VanList", List);
 Vue.component("VanCell", Cell);
 Vue.component("VanSwipe", Swipe);
 Vue.component("VanSwipeItem", SwipeItem);
+Vue.component("VanDropdownMenu", DropdownMenu);
+Vue.component("VanDropdownItem", DropdownItem);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/store/index.js

@@ -5,6 +5,7 @@ import createPersistedState from "vuex-persistedstate"; // 持久化存储插件
 import exam from "./modules/exam";
 import answer from "./modules/answer";
 import user from "./modules/user";
+import favorite from "./modules/favorite";
 
 Vue.use(Vuex);
 
@@ -50,6 +51,7 @@ export default new Vuex.Store({
   modules: {
     exam,
     answer,
-    user
+    user,
+    favorite
   }
 });

src/store/modules/favorite.js

@@ -14,4 +14,4 @@ const favorite = {
   actions: {}
 };
 
-export default favorite;
+export default favorite;

src/views/home/index.vue

@@ -6,7 +6,22 @@
       right-text=""
       bind:click-left=""
       bind:click-right=""
-    />
+    >
+    </van-nav-bar>
+    <div class="dropdown-div">
+      <van-dropdown-menu active-color="#1989fa">
+        <van-dropdown-item
+          v-model="engineeringWorkChooseValue"
+          :options="engineeringWorkList"
+          :title="
+            engineeringWorkChooseValue
+              ? engineeringWorkChooseValue.text
+              : '工种选择'
+          "
+          @change="handleChangeEngneeringWorkFun"
+        />
+      </van-dropdown-menu>
+    </div>
     <transition name="tab" mode="out-in">
       <component :is="currentComponents" class="page" />
     </transition>
@@ -14,7 +29,7 @@
       v-model="activeTabName"
       active-color="#0088e9"
       inactive-color="#808080"
-      @change="onChange"
+      @change="onChangeTabFun"
     >
       <van-tabbar-item v-for="(item, index) in tabbars" :key="index">
         <span>{{ item.title }}</span>
@@ -64,7 +79,9 @@ export default {
           iconInactive: require("@/assets/image/homeTab/person.png"),
           iconActive: require("@/assets/image/homeTab/personActive.png")
         }
-      ]
+      ],
+      engineeringWorkChooseValue: null, // 工种选择的值
+      engineeringWorkList: "" // 工种可选列表
     };
   },
   computed: {
@@ -77,6 +94,7 @@ export default {
     this.getCollection();
   },
   methods: {
+    // 初始化
     initFun() {
       this.$store.commit("updateUserItemStore", {
         field: "userInfo",
@@ -94,12 +112,30 @@ export default {
           group: "临时用户"
         }
       });
+      this.engineeringWorkList = [
+        { text: "桥隧工", value: 0 },
+        { text: "桥梁工", value: 1 },
+        { text: "线路工", value: 2 }
+      ];
       this.activeTabName = 0;
-      this.currentComponents = this.tabbars[this.activeTabName].pageName;
+      this.onChangeTabFun(this.activeTabName);
     },
-    onChange(index) {
+    // 操作：切换tab
+    onChangeTabFun(index) {
       this.currentComponents = this.tabbars[this.activeTabName].pageName;
     },
+    // 操作：选择了工种
+    handleChangeEngneeringWorkFun(value) {
+      let resultItem = null;
+      for (let i = 0; i < this.engineeringWorkList.length; i++) {
+        let item = this.engineeringWorkList[i];
+        if (value === item.value) {
+          resultItem = item;
+          break;
+        }
+      }
+      console.log("选择的工种信息：", resultItem);
+    },
     // 获取所有收藏
     getCollection() {
       let path = {
@@ -135,5 +171,24 @@ export default {
 .home-box {
   height: 100%; // 不要设置vh，手机浏览器计算问题
   padding-bottom: 2rem; // 多2em，避免tab栏挡住内容
+  .dropdown-div {
+    position: absolute;
+    top: 0;
+    right: 0.5rem;
+    width: 5rem;
+    height: 2.09091rem;
+    overflow: hidden;
+    z-index: 1000;
+  }
+}
+</style>
+<style lang="scss">
+.home-box {
+  .van-dropdown-menu__bar {
+    background-color: #7cc8ff;
+    .van-ellipsis {
+      font-size: 0.6rem;
+    }
+  }
 }
 </style>

src/views/home/learn/page-learn-child.vue

@@ -48,10 +48,10 @@
                 <div class="contentItemDescriptionTime">
                   {{
                     formateDateTimeFun(contentItem.createdTime) ||
-                    contentItem.createdTime
+                      contentItem.createdTime
                   }}
                 </div>
-                <div>
+                <div class="contentItemDescriptionStudyNeedTime">
                   所需学习时间：{{
                     getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                   }}
@@ -159,13 +159,20 @@ export default {
       font-size: 0.65rem;
     }
     .contentItemDescription {
-      margin-top: 0.25rem;
+      margin-top: 0.5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      color: #0088e9;
+      .contentItemTitle {
+        font-size: 0.65rem;
+      }
       .contentItemDescriptionTime {
         color: #696969;
+        font-size: 0.55rem;
+      }
+      .contentItemDescriptionStudyNeedTime {
+        color: #0088e9;
+        font-size: 0.55rem;
       }
     }
   }

src/views/home/learn/page-learn-content.vue

@@ -420,14 +420,14 @@ export default {
         justify-content: space-between;
         margin-bottom: 0.5rem;
         .learn-content-comment-item-userHead {
-          width: 1.75rem;
-          height: 1.75rem;
+          width: 2rem;
+          height: 2rem;
           border-radius: 100%;
           overflow: hidden;
           border: 1px dashed #e5e5e5;
         }
         .learn-content-comment-item-userInfo {
-          width: calc(100% - 2.25rem);
+          width: calc(100% - 2.5rem);
           padding-bottom: 0.25rem;
           border-bottom: 1px solid #e5e5e5;
           .learn-content-comment-item-name {
@@ -436,12 +436,12 @@ export default {
             overflow: hidden;
           }
           .learn-content-comment-item-content {
-            margin-top: 0.25rem;
+            margin-top: 0.5rem;
             word-break: break-all;
             word-wrap: break-word;
           }
           .learn-content-comment-item-createdtime {
-            margin-top: 0.25rem;
+            margin-top: 0.5rem;
             color: #696969;
           }
         }

src/views/home/person/collection.vue

@@ -118,7 +118,7 @@ export default {
       font-weight: bold;
     }
     .contentItemDescription {
-      margin-top: 0.25rem;
+      margin-top: 0.5rem;
       color: #696969;
       span {
         margin-left: 0.5rem;

src/views/home/person/exam-history.vue

@@ -123,7 +123,7 @@ export default {
       font-weight: bold;
     }
     .contentItemDescription {
-      margin-top: 0.25rem;
+      margin-top: 0.5rem;
       color: #696969;
       span {
         margin-left: 0.5rem;
@@ -132,7 +132,7 @@ export default {
     .exam-point {
       font-size: 1rem;
       font-weight: bold;
-      margin-top: 0.25rem;
+      margin-top: 0.5rem;
     }
     .exam-point-green {
       color: green;

src/views/home/person/page-person.vue

@@ -250,7 +250,7 @@ export default {
         margin-left: 0.5rem;
         margin-right: 0.5rem;
         font-size: 0.8rem;
-        color: #f6664f;
+        color: #0088e9;
         font-weight: bold;
       }
     }