style:修改左侧导航及头部导航栏,创建左侧导航相关页面

src/components/OpenPages.vue

@@ -1,14 +1,67 @@
 <template>
-  <div class="openPages">12345</div>
+  <div class="openPages">
+    <div
+      v-for="(value, index) in openList"
+      :key="index"
+      style="position: relative"
+    >
+      <router-link
+        :to="value.href"
+        class="openItems"
+        :style="{ background: value.active ? '#f5f7fa' : '' }"
+      >
+        <div
+          :style="{
+            color: value.active
+              ? 'rgba(64, 158, 255, 1)'
+              : 'rgba(135, 139, 146, 1)',
+          }"
+        >
+          {{ value.pagename }}
+        </div>
+      </router-link>
+      <div class="close" @click.stop="closePage(value)">
+        <img src="../assets/images/openPages/close.png" />
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import { reactive, toRefs } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
 export default {
   name: "OpenPages",
   setup() {
-    const state = reactive({});
+    const store = useStore();
+    const $router = useRouter();
+    const state = reactive({
+      openList: store.state.openpages,
+    });
+
+    const closePage = (value) => {
+      console.log("点击关闭页面", value, state.openList);
+      state.openList.map((item, key) => {
+        if (item.href === value.href) {
+          if (state.openList.length === 1) {
+            state.openList.splice(key, 1);
+            $router.push({ path: "/learningpath" });
+          } else {
+            if (key === state.openList.length - 1) {
+              $router.push({ path: state.openList[key - 1].href });
+              state.openList.splice(key, 1);
+            } else {
+              $router.push({ path: state.openList[key + 1].href });
+              state.openList.splice(key, 1);
+            }
+          }
+        }
+      });
+      store.commit("chengeOpenpages", state.openList);
+    };
     return {
       ...toRefs(state),
+      closePage,
     };
   },
 };
@@ -17,8 +70,38 @@ export default {
 .openPages {
   width: 100%;
   height: 50px;
-  // display: flex;
+  display: flex;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
+  overflow-x: auto;
+  .openItems {
+    width: 272px;
+    height: 50px;
+    border: 1px solid #edf2fa;
+    border-left: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 36px;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .close {
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 17px;
+    right: 27px;
+  }
+  .close:hover {
+    background: rgba(220, 220, 220, 1);
+  }
 }
 </style>