添加图标 & 样式修改

blog/src/assets/scss/element.scss

@@ -7,8 +7,8 @@
 }
 
 .el-card {
-  border-radius: 10px;
+  border-radius: 11px;
-  margin: 20px 0;
+  margin-bottom: 20px;
 }
 
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {

blog/src/assets/scss/index.scss

@@ -1,17 +1,44 @@
 @import './element.scss';
 @import './mine.scss';
 
+@font-face {
+  font-family: 'SourceHanSansCN';
+  src: url('../fonts/SourceHanSansCN-Normal.otf')
+}
+
+@font-face {
+  font-family: '优设标题黑';
+  src: url('../fonts/YouSheBiaoTiHei.ttf')
+}
+
 * {
   margin: 0;
   padding: 0;
+  list-style: none;
+  text-decoration: none;
+  letter-spacing: 1px;
 }
 
 body {
-  font-family: 'Times New Roman', '仿宋', Times, serif;
+  font-family: 'Times New Roman', 'SourceHanSansCN', Times, serif;
   font-size: 17px !important;
 }
 
+#app {
+  background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1));
+}
+
 a {
   text-decoration: none;
   color: #000;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  background: rgb(239, 239, 239);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #0003;
+  border-radius: 10px;
+}

blog/src/assets/scss/mine.scss

@@ -1,8 +1,22 @@
+@media screen and (max-width:768px) {
   .m-content {
-  margin: 20px auto;
+    margin: 30px auto;
-  width: 65%;
+    width: 95%;
+  }
+}
+
+@media screen and (min-width:960px) {
+  .m-content {
+    margin: 30px auto;
+    width: 80%;
+  }
 }
 
 .m-banner {
   height: 400px;
 }
+
+.m-icon {
+  margin-right: 0.3em;
+  vertical-align: -0.13em;
+}

blog/src/assets/svg/icons/dir.svg

@@ -0,0 +1,23 @@
+<svg t="1671369220134" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="1414" width="256" height="256">
+  <path
+    d="M164.601586 234.551828m-61.942554 61.942554a87.6 87.6 0 1 0 123.885108-123.885108 87.6 87.6 0 1 0-123.885108 123.885108Z"
+    fill="#F9DB91" p-id="1415"></path>
+  <path
+    d="M358.81 173.43m17 0l554.19 0q17 0 17 17l0 88.25q0 17-17 17l-554.19 0q-17 0-17-17l0-88.25q0-17 17-17Z"
+    fill="#F9DB91" p-id="1416"></path>
+  <path
+    d="M164.580021 512.008379m-85.257498 20.122598a87.6 87.6 0 1 0 170.514997-40.245196 87.6 87.6 0 1 0-170.514997 40.245196Z"
+    fill="#AEF0FF" p-id="1417"></path>
+  <path
+    d="M358.81 450.87m17 0l554.19 0q17 0 17 17l0 88.25q0 17-17 17l-554.19 0q-17 0-17-17l0-88.25q0-17 17-17Z"
+    fill="#AEF0FF" p-id="1418"></path>
+  <path d="MNaN NaNmNaN NaNaNaN NaN NaN 1 0 NaN NaN NaN NaN NaN 1 0 NaN NaNZ" fill="#EF6A6A"
+    p-id="1419"></path>
+  <path
+    d="M358.81 728.32m17 0l554.19 0q17 0 17 17l0 88.25q0 17-17 17l-554.19 0q-17 0-17-17l0-88.25q0-17 17-17Z"
+    fill="#EF6A6A" p-id="1420"></path>
+  <path
+    d="M164.6 134a100.6 100.6 0 1 0 100.6 100.6A100.6 100.6 0 0 0 164.6 134z m0 175.2a74.6 74.6 0 1 1 74.6-74.6 74.68 74.68 0 0 1-74.6 74.55zM930 160.43H375.81a30.09 30.09 0 0 0-30 30v88.25a30.09 30.09 0 0 0 30 30H930a30.09 30.09 0 0 0 30-30v-88.25a30.09 30.09 0 0 0-30-30z m4 118.25a4.11 4.11 0 0 1-4 4H375.81a4.1 4.1 0 0 1-4-4v-88.25a4.1 4.1 0 0 1 4-4H930a4.11 4.11 0 0 1 4 4zM164.6 411.4A100.6 100.6 0 1 0 265.2 512a100.6 100.6 0 0 0-100.6-100.6z m0 175.2a74.6 74.6 0 1 1 74.6-74.6 74.68 74.68 0 0 1-74.6 74.6zM930 437.87H375.81a30.09 30.09 0 0 0-30 30v88.26a30.09 30.09 0 0 0 30 30H930a30.09 30.09 0 0 0 30-30v-88.26a30.09 30.09 0 0 0-30-30z m4 118.26a4.11 4.11 0 0 1-4 4H375.81a4.1 4.1 0 0 1-4-4v-88.26a4.1 4.1 0 0 1 4-4H930a4.11 4.11 0 0 1 4 4zM164.6 688.85a100.6 100.6 0 1 0 100.6 100.6 100.6 100.6 0 0 0-100.6-100.6z m0 175.2a74.6 74.6 0 1 1 74.6-74.6 74.69 74.69 0 0 1-74.6 74.6zM930 715.32H375.81a30.09 30.09 0 0 0-30 30v88.25a30.09 30.09 0 0 0 30 30H930a30.09 30.09 0 0 0 30-30v-88.25a30.09 30.09 0 0 0-30-30z m4 118.25a4.11 4.11 0 0 1-4 4H375.81a4.1 4.1 0 0 1-4-4v-88.25a4.1 4.1 0 0 1 4-4H930a4.11 4.11 0 0 1 4 4z"
+    fill="#512C56" p-id="1421"></path>
+</svg>

blog/src/assets/svg/icons/menu.svg

@@ -0,0 +1,12 @@
+<svg t="1671353117265" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="2991" width="128" height="128">
+  <path
+    d="M867.995 459.647h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
+    p-id="2992" fill="#dbdbdb"></path>
+  <path
+    d="M867.995 763.291h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
+    p-id="2993" fill="#dbdbdb"></path>
+  <path
+    d="M156.005 260.709h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353z"
+    p-id="2994" fill="#dbdbdb"></path>
+</svg>

blog/src/assets/svg/icons/notice.svg

@@ -0,0 +1,6 @@
+<svg t="1671361065669" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="851" width="256" height="256">
+  <path
+    d="M668.34944 118.88128a73.34912 73.34912 0 0 0-71.168-4.06016L287.17056 263.5008a4.608 4.608 0 0 1-2.01216 0.4608H130.048A73.728 73.728 0 0 0 56.32 337.59744v349.63968a73.728 73.728 0 0 0 73.728 73.63584h156.55424a4.67968 4.67968 0 0 1 1.94048 0.43008l309.59104 143.19616a73.7024 73.7024 0 0 0 104.66816-66.82112V181.20704a73.216 73.216 0 0 0-34.45248-62.32576zM125.40416 687.23712V337.59744a4.608 4.608 0 0 1 4.608-4.608h122.0352v358.88128H130.048a4.608 4.608 0 0 1-4.64384-4.6336z m508.31872 150.44096a4.608 4.608 0 0 1-6.56384 4.19328l-306.02752-141.55264V323.77344l305.9712-146.72384a4.608 4.608 0 0 1 6.62016 4.15744v656.47104z m304.5376-358.95808h-150.25152a34.5088 34.5088 0 1 0 0 69.0176h150.25152a34.5088 34.5088 0 1 0 0-69.0176z m-128.25088-117.76a34.44736 34.44736 0 0 0 24.41728-10.10176L940.672 244.736a34.52416 34.52416 0 0 0-48.83968-48.80896L785.5872 302.08a34.5088 34.5088 0 0 0 24.4224 58.88z m24.41728 314.60864a34.52416 34.52416 0 1 0-48.83968 48.81408l106.24512 106.1376a34.52416 34.52416 0 0 0 48.83968-48.80896z"
+    fill="#1296db" p-id="852"></path>
+</svg>