fix(创新示范): 导航栏增加年度切换

src/layout/head.vue

@@ -41,14 +41,15 @@
       </el-row>
 
       <!-- 行动轨迹记录 -->
-      <div v-if="curRouteHistoy.length > 0" class="proceed-record">
+      <el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
+        <el-col class="nav-history" :span="18">
           <el-row class="pointer" @click="$router.go(-1)" align="middle">
             <el-icon><ArrowLeftBold /></el-icon>
             返回
             <el-divider direction="vertical"></el-divider>
           </el-row>
 
-        <el-row>
+          <el-col class="nav-history-item" :span="18">
             <div
               v-for="(item, index) in curRouteHistoy"
               :key="item"
@@ -65,8 +66,24 @@
               /></el-icon>
               {{ item.label }}
             </div>
-        </el-row>
+          </el-col>
+        </el-col>
+
+        <!-- 年度 -->
+        <el-col class="year-items">
+          <div class="years" align="middle">
+            <span
+              v-for="(item, index) in years"
+              :key="item"
+              :class="{
+                active: index === curYearIndex,
+              }"
+              @click="yearHandle(index)"
+              >{{ item }}年</span
+            >
           </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -90,6 +107,8 @@ export default defineComponent({
       activeIndex: 0,
       secondIndex: 0,
       curRouteHistoy: [],
+      years: [2019, 2020, "2021上半"],
+      curYearIndex: 2,
     };
   },
   created() {},
@@ -125,6 +144,9 @@ export default defineComponent({
     },
   },
   methods: {
+    yearHandle(index: number) {
+      this.curYearIndex = index;
+    },
     navClick(item: {}, index: number) {
       // const { link, children = [] } = item;
       // this.activeIndex = index;
@@ -145,10 +167,10 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.pointer{
+.pointer {
   cursor: pointer;
-  &:hover{
-    color: #4198ff
+  &:hover {
+    color: #4198ff;
   }
 }
 .app-head-warpper {
@@ -213,15 +235,28 @@ export default defineComponent({
   // 行动轨迹记录
   .proceed-record {
     margin-bottom: 20px;
-    padding: 0 20px;
-    background: #fff;
+    // padding: 0 20px;
     border-radius: 5px;
-    height: 40px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     box-sizing: border-box;
     font-size: 14px;
+    height: 40px;
     color: #999;
+    .nav-history {
+      padding-left: 10px;
+      width: 100%;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      height: 40px;
+      border-radius: 5px;
+      overflow: hidden;
+      box-shadow: 2px 2px 10px #eee;
+      .nav-history-item {
+        display: flex;
+        height: 100%;
         .proceed-item {
           color: #999;
           display: flex;
@@ -236,6 +271,42 @@ export default defineComponent({
             margin-right: 2px;
           }
         }
+      }
+    }
+    .year-items {
+      display: flex;
+      width: 100%;
+      margin-left: 16px;
+      border-radius: 5px;
+      overflow: hidden;
+      flex: 1;
+      height: 40px;
+      background: #fff;
+      box-shadow: 2px 2px 10px #eee;
+      .years {
+        display: flex;
+        align-items: center;
+
+        height: 40px;
+        flex: 1;
+        overflow: hidden;
+        span {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          padding: 0 12px;
+          font-size: 12px;
+          height: inherit;
+          color: #949494;
+          justify-content: center;
+          cursor: pointer;
+        }
+        .active {
+          background-color: #4198ff;
+          color: #fff;
+        }
+      }
+    }
 
     .lignht-color {
       color: #4198ff;

src/views/dataCenter/army/model/StrongArmy/index.vue

@@ -15,16 +15,6 @@
           >{{ item }}年</span
         >
       </div>
-
-      <!-- <el-select v-model="value" size="small" placeholder="Select">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select> -->
     </el-row>
   </div>