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

src/layout/head.vue

@@ -41,32 +41,49 @@
       </el-row>
 
       <!-- 行动轨迹记录 -->
-      <div v-if="curRouteHistoy.length > 0" class="proceed-record">
-        <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>
-          <div
-            v-for="(item, index) in curRouteHistoy"
-            :key="item"
-            class="proceed-item"
-            :class="{
-              'lignht-color': index === curRouteHistoy.length - 1,
-            }"
-            @click="toPage(item)"
-          >
-            <el-icon
-              v-if="index > 0"
-              :color="index === curRouteHistoy.length - 1 ? '#409EFC' : ''"
-              ><CaretRight
-            /></el-icon>
-            {{ item.label }}
+      <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-col class="nav-history-item" :span="18">
+            <div
+              v-for="(item, index) in curRouteHistoy"
+              :key="item"
+              class="proceed-item"
+              :class="{
+                'lignht-color': index === curRouteHistoy.length - 1,
+              }"
+              @click="toPage(item)"
+            >
+              <el-icon
+                v-if="index > 0"
+                :color="index === curRouteHistoy.length - 1 ? '#409EFC' : ''"
+                ><CaretRight
+              /></el-icon>
+              {{ item.label }}
+            </div>
+          </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-row>
-      </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,27 +235,76 @@ 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;
-    .proceed-item {
-      color: #999;
+    .nav-history {
+      padding-left: 10px;
+      width: 100%;
+      background: #fff;
       display: flex;
       align-items: center;
-      cursor: pointer;
-      margin-left: 5px;
-      cursor: pointer;
-      &:hover {
-        color: #4198ff;
+      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;
+          align-items: center;
+          cursor: pointer;
+          margin-left: 5px;
+          cursor: pointer;
+          &:hover {
+            color: #4198ff;
+          }
+          .el-icon {
+            margin-right: 2px;
+          }
+        }
       }
-      .el-icon {
-        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;
+        }
       }
     }
 

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>