feat: 侧边栏UI

src/components/layouts/Aside.vue

@@ -0,0 +1,110 @@
+<script setup>
+
+let routers = [
+  [
+    {
+      title: '首页',
+      link: '',
+    },
+    {
+      title: '文章',
+      link: '',
+    },
+    {
+      title: '咨询',
+      link: '',
+    },
+    {
+      title: '视频',
+      link: '',
+    },
+  ],
+  [
+    {
+      title: '论坛',
+      link: ''
+    }
+  ],
+  [
+    {
+      title: '商店',
+      link: ''
+    },
+    {
+      title: '积分商城',
+      link: ''
+    }
+  ],
+  [
+    {
+      title: '预约拍摄',
+      link: ''
+    },
+    {
+      title: '设备租赁',
+      link: ''
+    }
+  ]
+]
+</script>
+
+<template>
+  <div class="aside-container">
+    <template v-for="(arr, index) in routers" :key="index">
+      <div class="item-container">
+        <!-- .active selected status -->
+        <div class="itembox" v-for="(row, rowIdx) in arr" :key="rowIdx">
+          <span class="icon">ico</span>
+          <span class="title">{{ row.title }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="less">
+.aside {
+  &-container {
+    height: calc(100vh - 66px);
+    padding: 0 8px;
+    background-color: #fff;
+
+    .item-container {
+      padding: 10px 0;
+      border-bottom: 1px solid #d4d4d4;
+
+      .itembox {
+        padding: 11px 20px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 22px;
+
+        &.active {
+          color: #00B0B0;
+          // width: 194px;
+          // height: 44px;
+          background: rgba(87, 195, 194, 0.14);
+          border-radius: 4px;
+        }
+
+        .icon {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+
+      &:first-child {
+        // padding-top: initial;
+      }
+
+      &:last-child {
+        padding-bottom: initial;
+        border-bottom: initial;
+      }
+    }
+  }
+}
+</style>

src/components/layouts/Header.vue

@@ -12,9 +12,6 @@ const keyword = ref('')
 
 <template>
   <div class="header-container flex-row flex-aic flex-jc-sb">
-    <svg aria-hidden="true">
-      <use href="../../assets/icons/people.svg" fill="#000000" />
-    </svg>
     <div class="logo">ny-logo</div>
     <div class="header__content flex-row flex-aic flex-jc-sb">
       <el-input v-model="keyword" class="searchbox" placeholder="VR拍摄" :suffix-icon="Search" />
@@ -101,6 +98,9 @@ const keyword = ref('')
     height: 66px;
     background: #FFFFFF;
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.06);
+    padding-right: 20px;
+    border-bottom: 1px solid rgba(240, 240, 240, 1);
+    box-sizing: border-box;
   }
 
   &__content {

src/views/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import vHeader from '~/components/layouts/Header.vue'
+import vAside from '~/components/layouts/Aside.vue'
 
 </script>
 
@@ -10,7 +11,9 @@ import vHeader from '~/components/layouts/Header.vue'
         <v-header />
       </el-header>
       <el-container>
-        <el-aside width="200px">aside</el-aside>
+        <el-aside width="200px">
+          <v-aside />
+        </el-aside>
         <el-main>
           <router-view v-slot="{ Component }">
             <transition name="move" mode="out-in">
@@ -27,6 +30,8 @@ import vHeader from '~/components/layouts/Header.vue'
 <style lang="scss" scoped>
 .container {
   .header {
+    padding-left: 0;
+    padding-right: 0;
     height: 66px;
     background-color: #fff;
   }