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

src/components/NavTop.vue

@@ -7,11 +7,18 @@
       />
       <div class="navTopRight">
         <div class="role">
-          <div>管理员</div>
-          <img
-            style="width: 13px; height: 7px; margin-left: 8px"
-            src="../assets/images/navtop/down.png"
-          />
+          <div>{{ selectRole }}</div>
+          <div class="roleArrow"></div>
+          <div class="roleItems">
+            <div
+              v-for="(value, index) in roleList"
+              :key="index"
+              class="roleItem"
+              @click="changeRole(value)"
+            >
+              {{ value.name }}
+            </div>
+          </div>
         </div>
         <div class="user">
           <img
@@ -44,9 +51,29 @@ import { reactive, toRefs } from "vue";
 export default {
   name: "NavTop",
   setup() {
-    const state = reactive({});
+    const state = reactive({
+      selectRole: "管理员",
+      roleList: [
+        {
+          id: 1,
+          name: "管理员",
+        },
+        {
+          id: 2,
+          name: "学员",
+        },
+      ],
+    });
+    const changeRole = (value) => {
+      state.roleList.map((item) => {
+        if (value.name === item.name) {
+          state.selectRole = item.name;
+        }
+      });
+    };
     return {
       ...toRefs(state),
+      changeRole,
     };
   },
 };
@@ -75,6 +102,41 @@ export default {
       color: #333330;
       line-height: 36px;
       cursor: pointer;
+      position: relative;
+      .roleArrow {
+        width: 13px;
+        height: 7px;
+        margin-left: 8px;
+        background-image: url(../assets/images/navtop/down.png);
+        background-size: 100%;
+      }
+      .roleItems {
+        width: 109px;
+        height: 80px;
+        padding-top: 10px;
+        background: #ffffff;
+        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+        position: absolute;
+        top: 60px;
+        right: 0px;
+        text-align: center;
+        display: none;
+      }
+      .roleItem {
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(79, 81, 86, 1);
+        line-height: 36px;
+      }
+      .roleItem:hover {
+        color: #4ea6ff;
+      }
+    }
+    .role:hover .roleItems {
+      display: block;
+    }
+    .role:hover .roleArrow {
+      background-image: url(../assets/images/navtop/up.png);
     }
     .user {
       margin-left: 37px;