【修改】邮件模块-图标替换

src/components/Email/components/home.vue

@@ -2,7 +2,7 @@
   <div class="home-page">
     <div class="title"> 您好，demo。 </div>
     <div class="unread">
-      <img src="../img/logo.png" alt="" />
+      <img src="../img/email_logo__small.png" alt="" />
       <p>邮件： 0 封未读邮件</p>
     </div>
     <div class="line">
@@ -16,19 +16,21 @@
         <p>邮箱推荐</p>
       </div>
       <div class="banner">
-        <div class="banner-image"></div>
+        <div class="banner-image">
+          <img src="../img/home_banner.png" style="width: 100%; height: 100%;" />
+        </div>
       </div>
       <div class="list">
         <div class="item">
           <div>
-            <div class="icon"></div>
+            <div class="icon iphone"></div>
             iPhone版
           </div>
-          <div><div class="icon"></div>明信片 - 贺卡</div>
+          <div><div class="icon postcard"></div>明信片 - 贺卡</div>
-          <div><div class="icon"></div>iPad版</div>
+          <div><div class="icon ipad"></div>iPad版</div>
-          <div><div class="icon"></div>记事本 - 日历</div>
+          <div><div class="icon note"></div>记事本 - 日历</div>
-          <div><div class="icon"></div>Android版</div>
+          <div><div class="icon android"></div>Android版</div>
-          <div><div class="icon"></div>文件中转站</div>
+          <div><div class="icon document"></div>文件中转站</div>
         </div>
       </div>
     </div>
@@ -99,7 +101,6 @@
       .banner-image {
         width: 100%;
         height: 100%;
-        background: pink;
       }
     }
     .list {
@@ -117,11 +118,28 @@
             width: 16px;
             height: 16px;
             margin-right: 7px;
-            background-image: url('../img/logo.png');
             background-size: 100% 100%;
             background-position: center;
             background-repeat: no-repeat;
           }
+          .iphone {
+            background-image: url('../img/iPhone_logo.png');
+          }
+          .postcard {
+            background-image: url('../img/heart_logo.png');
+          }
+          .ipad {
+            background-image: url('../img/iPad_logo.png');
+          }
+          .note {
+            background-image: url('../img/calendar_logo.png');
+          }
+          .android {
+            background-image: url('../img/Android_logo.png');
+          }
+          .document {
+            background-image: url('../img/transit_logo.png');
+          }
         }
         > div:nth-child(1),
         > div:nth-child(2) {

src/components/Email/index.vue

@@ -91,15 +91,15 @@ const searchVal = ref('')
 const bigList = [
   {
     name: '写信',
-    icon: new URL('./img/logo.png', import.meta.url).href
+    icon: new URL('./img/write_logo.png', import.meta.url).href
   },
   {
     name: '收信',
-    icon: new URL('./img/logo.png', import.meta.url).href
+    icon: new URL('./img/receive_logo.png', import.meta.url).href
   },
   {
     name: '通讯录',
-    icon: new URL('./img/logo.png', import.meta.url).href
+    icon: new URL('./img/address_logo.png', import.meta.url).href
   }
 ]
 const smallList = [
@@ -108,7 +108,7 @@ const smallList = [
   },
   {
     name: '星标邮件',
-    icon: new URL('./img/logo.png', import.meta.url).href
+    icon: new URL('./img/star_logo.png', import.meta.url).href
   },
   {
     name: '群邮件'