fix

src/assets/svg/icon1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><defs><style>.a{fill:#ffe5d2;}.b{fill:#ac1f1d;}.c{fill:#ef716f;}</style></defs><g transform="translate(73 -473)"><circle class="a" cx="12.5" cy="12.5" r="12.5" transform="translate(-73 473)"/><g transform="translate(-68.997 476.997)"><g transform="translate(-0.003 0.002)"><path class="b" d="M16.073,3.869,8.6.087a.769.769,0,0,0-.7,0L.428,3.869a.773.773,0,0,0,0,1.386L7.9,9.038a.769.769,0,0,0,.7,0l7.473-3.783A.773.773,0,0,0,16.073,3.869ZM8.213,7.388,2.788,4.638a.085.085,0,0,1,0-.151L8.213,1.736a.087.087,0,0,1,.077,0l5.424,2.751a.085.085,0,0,1,0,.151L8.289,7.388A.087.087,0,0,1,8.213,7.388Z" transform="translate(0.003 -0.002)"/></g><g transform="translate(-0.003 10.563)"><path class="c" d="M16.073,16.687,14.72,16l-1.8.9.786.4a.078.078,0,0,1,0,.145L8.29,20.205a.084.084,0,0,1-.079,0l-5.42-2.753a.078.078,0,0,1,0-.145l.786-.4-1.8-.9-1.353.687a.773.773,0,0,0,0,1.386L7.9,21.855a.769.769,0,0,0,.7,0l7.473-3.783A.773.773,0,0,0,16.073,16.687Z" transform="translate(0.003 -16)"/></g><g transform="translate(-0.003 6.738)"><path class="c" d="M16.073,10.893l-1.353-.687-1.8.9.786.4a.078.078,0,0,1,0,.145L8.29,14.411a.084.084,0,0,1-.079,0l-5.42-2.753a.078.078,0,0,1,0-.145l.786-.4-1.8-.9-1.353.687a.773.773,0,0,0,0,1.386L7.9,16.061a.769.769,0,0,0,.7,0l7.473-3.783A.773.773,0,0,0,16.073,10.893Z" transform="translate(0.003 -10.206)"/></g></g></g></svg>

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class='full-screen flex flex-justify-start'>
-    <el-aside width="300px" >
+    <el-aside width="240px" >
       <left/>
     </el-aside>
     <el-container>

src/layout/letf.vue

@@ -1,29 +1,51 @@
 <template>
-  <div class='box-shadow-blue full-height'>
-    <div class='padding'>
-      <div class='flex flex-center logo'>
-        <img src='/public/vite.svg'/>
-        <span class='font-16 bold ml-20'>项目管理平台</span>
+  <div class='box-shadow-blue full-height' style="background-color: #F4F3EE">
+    <div class='padding mt-20'>
+      <div class='flex flex-center mt-10' style="margin-bottom: 80px">
+        <img src='@/assets/svg/logo.svg'/>
       </div>
     </div>
     <div>
-      <div v-for='(item,index) in data' :key='item.id' @click='navClick(index)'>
-        <div class='item flex flex-center bold font-14 ' :style=' item.checked ? "background-color: #7AB4F9;color:white":"" '>{{item.name}}</div>
+      <div class="flex flex-center flex-col bold font-18 item-bg"  v-for="(item,index) in data" :key="item.name">
+        <div class="flex flex-center" :class="active === 0 ? 'item-s' : 'item'" @click="navClick(index)">
+          <img :src='getImageUrl(item.img)'>
+          <span class="ml-10">项目库</span>
+        </div>
       </div>
-
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  setup () {
+    const getImageUrl = (name) => {
+      return new URL(`@/assets/svg/${name}`, import.meta.url).href
+    }
+    return {
+      getImageUrl
+    }
+  },
   data () {
     return {
-      data: []
+      active: 0,
+      data: [
+        {
+          name: '项目库',
+          img: 'icon1.svg'
+        },
+        {
+          name: '资料库',
+          img: 'icon1.svg'
+        },
+        {
+          name: '回收站',
+          img: 'icon1.svg'
+        }
+      ]
     }
   },
   created () {
-    this.init()
   },
   methods: {
     init () {
@@ -43,11 +65,7 @@ export default {
       })
     },
     navClick (index) {
-      this.data.forEach(item => {
-        item.checked = false
-      })
-      this.data[index].checked = true
-      // this.$router.push(this.data[index].path)
+      this.active = index
     }
   }
 }
@@ -56,17 +74,32 @@ export default {
 <style scoped>
 .box-shadow-blue {
   position: fixed;
-  width: 300px;
+  width: 240px;
   left: 0;
   z-index: 2;
   background-color: white;
   box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
 }
+
+.item-bg{
+  margin: 0 20px;border-top:1px solid #D1D1D1;border-bottom:1px solid #D1D1D1;padding-bottom: 40px
+}
+
+.item-s {
+  height: 58px;
+  width: 200px;
+  border-radius: 14px;
+  margin-top: 40px;
+  color: white;
+  background-color: #BC002D;
+}
+
 .item {
-  background-color: #efefef;
-  height: 40px;
-  margin: 10px;
-  border-radius: 10px;
+  height: 58px;
+  width: 200px;
+  border-radius: 14px;
+  margin-top: 40px;
+  color: #707070;
 }
 
 </style>

src/layout/top.vue

@@ -70,7 +70,7 @@ export default {
   z-index: 1;
   background-color: white;
   top: 0;
-  left: 300px;
+  left: 240px;
   right: 0;
   position: fixed;
   border-bottom: whitesmoke solid 1px;