unlogin empty status components

src/components/layouts/UnloginContent.vue

@@ -0,0 +1,37 @@
+
+<template>
+  <div class="unlogin-content flex-col flex-aic">
+    <h3>没有任何内容</h3>
+    <div class="tips"><span>需登录后才可显示内容</span></div>
+    <el-button type="primary" size="langer">
+      登录忆象
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.unlogin-content {
+  width: 100%;
+  background-color: #fff;
+  padding: 60px 0 120px;
+
+  h3 {
+    height: 48px;
+    font-size: 34px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    color: #BCBCBC;
+    line-height: 48px;
+  }
+
+  .tips {
+    height: 25px;
+    font-size: 18px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #888888;
+    line-height: 25px;
+    margin-bottom: 20px;
+  }
+}
+</style>

src/router/index.js

@@ -15,9 +15,16 @@ const routes = [
         path: '',
         name: "Home",
         meta: {
-          permiss: '1'
         },
-        component: () => import('~/views/index-content.vue')
+        component: () => import('~/views/index/content.vue')
+      },
+      {
+        path: 'follow',
+        name: "Follow",
+        meta: {
+          title: '我的关注'
+        },
+        component: () => import('~/views/index/follow.vue')
       }
     ]
   }

src/views/index-content.vue → src/views/index/content.vue

@@ -53,7 +53,7 @@ const chartsList = ref([
         <IndexNews />
       </template>
     </div>
-    <IndexTitle title="精选咨询" />
+    <IndexTitle title="精选文章" />
     <div class="content-list content-list--c2 flex-row flex-jc-sb">
       <template v-for="(item, idx) in 9" :key="idx">
         <IndexSection :type="idx === 2 ? 'article' : 'common'" />

src/views/index/follow.vue

@@ -0,0 +1,36 @@
+<script setup>
+import UnloginContent from '~/components/layouts/UnloginContent.vue';
+
+</script>
+
+<template>
+  <div class="index-follow-container flex-row flex-jc-sb">
+    <div class="context">
+      <!-- 尚未登录组件 -->
+      <UnloginContent />
+      1
+    </div>
+    <div class="right-aside">
+      <!-- 日历签到 -->
+      <!-- 签到领福利 -->
+      <!-- 忆象推荐 -->
+      <!-- 文章精选 -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-follow-container {
+  padding: 0 76px;
+  column-gap: 24px;
+
+  .context {
+    width: 0;
+    flex: 1;
+  }
+
+  .right-aside {
+    width: 334px;
+  }
+}
+</style>