修改 首页样式

blog/src/App.vue

@@ -2,15 +2,7 @@
   <Header />
   <main class="main-wrap">
     <div class="content">
-      <el-row :gutter="20">
-        <el-col :span="17">
       <router-view></router-view>
-        </el-col>
-        <el-col :span="7"
-          ><div class="grid-content ep-bg-purple" />
-          <UserInfo />
-        </el-col>
-      </el-row>
     </div>
   </main>
   <Footer />
@@ -20,7 +12,6 @@
 <script setup>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
-import UserInfo from './components/UserInfo.vue'
 </script>
 
 <style lang="scss" scoped>
@@ -30,7 +21,7 @@ import UserInfo from './components/UserInfo.vue'
   align-items: center;
   margin: 10px 0;
   .content {
-    width: 75%;
+    width: 65%;
   }
 }
 </style>

blog/src/assets/scss/element.scss

@@ -1,3 +1,11 @@
 .el-menu--horizontal {
   border: none;
 }
+
+.card-box .el-card__body {
+  padding: 0;
+}
+
+.el-card {
+  border-radius: 10px;
+}

blog/src/assets/scss/index.scss

@@ -9,3 +9,8 @@ body {
   font-family: 'Times New Roman', '仿宋', Times, serif;
   font-size: 17px !important;
 }
+
+a {
+  text-decoration: none;
+  color: #000;
+}

blog/src/assets/svg/SvgIcon.vue

@@ -29,5 +29,6 @@ export default {
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  cursor: pointer;
 }
 </style>

blog/src/assets/svg/icons/gitee.svg

@@ -1,3 +1,3 @@
-<svg t="1668133640826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="200" height="200">
+<svg t="1668139718755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="845" width="200" height="200">
-  <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="1215"></path>
+  <path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#888888" p-id="846"></path>
 </svg>

blog/src/assets/svg/icons/github.svg

@@ -1,3 +1,3 @@
-<svg t="1668133820349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1353" width="200" height="200">
+<svg t="1668139756069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="875" width="200" height="200">
-  <path d="M512.465 98.744c-236.05-2.401-429.41 187.034-431.998 423.242 0.894 183.912 120.176 346.283 295.332 402.018 21.6 3.93 29.451-9.04 29.451-20.436v-71.916c-120.17 25.545-145.7-56.59-145.7-56.59a112.364 112.364 0 0 0-47.914-62.089c-39.272-25.937 3.141-25.545 3.141-25.545a90.702 90.702 0 0 1 65.978 43.624c25.358 43.993 81.26 59.548 125.678 34.976a91.569 91.569 0 0 1 27.487-56.59c-95.825-10.615-196.36-46.768-196.36-209.067a163.13 163.13 0 0 1 43.591-114.358 148.652 148.652 0 0 1 4.32-111.609c15.896-35.223 36.525-11.397 117.815 43.229a419.24 419.24 0 0 1 216.002 0c82.471-54.626 117.82-43.229 117.82-43.229a148.657 148.657 0 0 1 4.32 111.61 163.145 163.145 0 0 1 45.945 113.57c0 162.695-101.321 198.458-196.36 209.067a98.273 98.273 0 0 1 29.452 78.594v115.933c0 13.752 7.856 24.756 29.457 20.43 174.63-56.071 293.466-218.106 294.545-401.622C941.878 285.778 748.52 96.343 512.465 98.744" fill="#231F20" p-id="1354"></path>
+  <path d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48a491.296 491.296 0 0 1 128.16-17.248c43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576C877.472 942.624 1024 750.784 1024 524.64c0-282.784-229.248-512-512-512z" p-id="876"></path>
 </svg>

blog/src/components/BlogList.vue

@@ -1,13 +1,75 @@
 <template>
-  <el-card class="box-card" v-for="o in 10" :key="o" shadow="hover">
+  <el-card class="card-box" v-for="item in blogList" :key="item" shadow="hover">
-    <div>{{ 'Blog ' + o }}</div>
+    <div class="blog-item">
+      <el-row>
+        <!-- 文章图片 -->
+        <el-col :span="10">
+          <img :src="item.firstPicture" alt="" class="first-picture" />
+        </el-col>
+        <!-- 文章标题和简述 -->
+        <el-col :span="14">
+          <div class="blog-container">
+            <h3>{{ item.title }}</h3>
+            <div class="description">{{ item.description }}</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </el-card>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+
+const blogList = ref([
+  {
+    firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
+    title: '测试',
+    description: '这是一篇测试文章'
+  },
+  {
+    firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
+    title: '测试',
+    description: '这是一篇测试文章'
+  },
+  {
+    firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
+    title: '测试',
+    description: '这是一篇测试文章'
+  },
+  {
+    firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
+    title: '测试',
+    description: '这是一篇测试文章'
+  },
+  {
+    firstPicture: 'https://w.wallhaven.cc/full/zy/wallhaven-zyxvqy.jpg',
+    title: '测试',
+    description: '这是一篇测试文章'
+  }
+])
+</script>
 
 <style lang="scss" scoped>
-.box-card {
+.card-box {
   margin: 20px 0;
 }
+.blog-item {
+  display: flex;
+  align-items: center;
+  .first-picture {
+    width: 100%;
+    height: 100%;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+  .blog-container {
+    padding: 20px 20px 20px 40px;
+    height: 100%;
+    box-sizing: border-box;
+    .description {
+      margin-top: 15px;
+    }
+  }
+}
 </style>

blog/src/components/Header.vue

@@ -1,9 +1,9 @@
 <template>
   <header class="header">
     <el-menu
-      default-active="/"
+      :default-active="navActive"
       mode="horizontal"
-      background-color="#FFF"
+      background-color="rgba(0, 0, 0, 0)"
       text-color="#000"
       active-text-color="#5698c3"
       @select="handleSelect"
@@ -25,6 +25,17 @@
 
 <script setup>
 import { Search } from '@element-plus/icons-vue'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const navActive = ref('/')
+const router = useRouter()
+
+// 监听路由的变化，使得el-menu可以同步选中激活位置
+watch(router.currentRoute, () => {
+  navActive.value = router.currentRoute.value.path
+  console.log(navActive.value)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -34,7 +45,8 @@ import { Search } from '@element-plus/icons-vue'
   align-items: center;
   width: 100%;
   box-shadow: 0px 2px #eee;
-  padding: 0 20px;
+  background-color: #fff;
+  padding: 0 30px;
   box-sizing: border-box;
 }
 .right-header {

blog/src/components/UserInfo.vue

@@ -1,9 +1,38 @@
 <template>
-  <el-card shadow="hover">
+  <el-card shadow="hover" class="user-info">
+    <!-- 头像 -->
     <div class="avatar">
-      <el-avatar :size="100" :src="avatar" />
+      <el-avatar :size="100" :src="userInfo.avatar" />
-      <svg-icon name="gitee"></svg-icon>
+    </div>
-      <svg-icon name="github"></svg-icon>
+    <!-- 名称 -->
+    <h2>{{ userInfo.name }}</h2>
+    <!-- 简述 -->
+    <p>{{ userInfo.description }}</p>
+    <!-- 分类统计 -->
+    <div class="classification">
+      <div class="class-item">
+        <router-link to="/tags">
+          <div>标签</div>
+          <div class="class-item-nums">{{ userInfo.tags }}</div>
+        </router-link>
+      </div>
+      <div class="class-item">
+        <router-link to="/categories">
+          <div>分类</div>
+          <div class="class-item-nums">{{ userInfo.categories }}</div>
+        </router-link>
+      </div>
+      <div class="class-item">
+        <router-link to="/archives">
+          <div>归档</div>
+          <div class="class-item-nums">{{ userInfo.archives }}</div>
+        </router-link>
+      </div>
+    </div>
+    <!-- 一些图标 -->
+    <div class="icons">
+      <a :href="userInfo.github"><svg-icon name="github"></svg-icon></a>&nbsp;
+      <a :href="userInfo.gitee"><svg-icon name="gitee"></svg-icon></a>
     </div>
   </el-card>
 </template>
@@ -11,11 +40,43 @@
 <script setup>
 import { ref } from 'vue'
 
-const avatar = ref('https://liuyxcc.github.io/img/avatar.png')
+const userInfo = ref({
+  name: 'Liuyx',
+  avatar: 'https://liuyxcc.github.io/img/avatar.png',
+  description: '抓住现在，做好自己',
+  tags: 0,
+  categories: 0,
+  archives: 0,
+  github: 'https://github.com/liuyxcc',
+  gitee: 'https://gitee.com/liuyxcc'
+})
 </script>
 
 <style lang="scss" scoped>
 .el-card {
   margin: 20px 0;
 }
+.user-info {
+  padding: 10px;
+  text-align: center;
+  position: sticky;
+  top: 10px;
+  .avatar {
+  }
+  .classification {
+    display: flex;
+    padding: 20px 10px;
+    box-sizing: border-box;
+    .class-item {
+      width: 33.3%;
+      .class-item-nums {
+        line-height: 40px;
+        height: 40px;
+      }
+    }
+  }
+  .icons {
+    margin-top: 10px;
+  }
+}
 </style>

blog/src/views/home/Home.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="home-container">
+  <el-row :gutter="20">
+    <el-col :span="18">
       <BlogList />
-  </div>
+    </el-col>
+    <el-col :span="6"
+      ><div class="grid-content ep-bg-purple" />
+      <UserInfo />
+    </el-col>
+  </el-row>
 </template>
 
 <script setup>
 import BlogList from '../../components/BlogList.vue'
+import UserInfo from '../../components/UserInfo.vue'
 </script>
 
 <style lang="scss" scoped>