feat: index-content & add components

src/components/IndexTitle/index.vue

@@ -0,0 +1,59 @@
+<script setup name="IndexTitle">
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const Props = defineProps({
+  title: {
+    type: String,
+    default: '默认标题'
+  }
+})
+
+const Emits = defineEmits(['seeMore'])
+
+</script>
+
+<template>
+  <div class="index-title-container flex-row flex-aic flex-jc-sb">
+    <div class="title">{{ title }}</div>
+    <div class="more flex-row flex-aic" @click="seeMore && seeMore()">
+      <span>查看更多</span>
+      <el-icon class="icon" :size="12">
+        <ArrowRight />
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
+.index-title-container {
+  padding-left: 18px;
+  border-left: 4px solid $color-primary;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 2em;
+  }
+
+  .more {
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 400;
+    color: #57C3C2;
+    color: $color-primary;
+
+    span {
+      display: inline-block;
+      margin-right: 6px;
+    }
+
+    .icon {
+      border-radius: 50%;
+      border: 1px solid $color-primary;
+    }
+  }
+}
+</style>

src/components/layouts/Header.vue

@@ -35,10 +35,11 @@ const momentList = ref([
     type: '', // 类型跳转发布时的type
   }
 ])
+
 const handleClickMoment = moment => {
   console.log('%c click moment item >>>', 'background: blue; color: #fff', moment);
-
 }
+
 </script>
 
 <template>
@@ -124,9 +125,11 @@ const handleClickMoment = moment => {
               </ul>
             </div>
           </el-popover>
+
           <el-button link>
             <SvgIcon name="ding" :size="24"></SvgIcon>
           </el-button>
+
           <!-- NOTE: User Avatar container -->
           <el-popover placement="bottom-start" :width="276" trigger="click">
             <template #reference>
@@ -531,10 +534,6 @@ const handleClickMoment = moment => {
           margin-bottom: 10px;
           text-align: center;
         }
-
-        // display: grid;
-        // grid-template-columns: repeat(3, 33%);
-        // text-align: center;
       }
     }
   }

src/router/index.js

@@ -1,25 +1,23 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import config from "~/configs"
 
-import Home from "~/views/index.vue"
+import Layout from "~/views/index.vue"
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
     meta: {
       title: '首页'
     },
-    component: Home,
+    component: Layout,
     children: [
       {
-        path: "/dashboard",
-        name: "dashboard",
+        path: '',
+        name: "Home",
         meta: {
-          title: '系统首页',
           permiss: '1'
         },
-        component: () => import('~/views/text.vue')
+        component: () => import('~/views/index-content.vue')
       }
     ]
   }

src/styles/index.scss

@@ -5,6 +5,12 @@ body {
   background-color: rgba(247, 247, 247, 1);
 }
 
+.layout {
+  &-container {
+    padding: 16px 24px !important;
+  }
+}
+
 .flex {
   &-row {
     display: flex;

src/styles/variable.scss

@@ -1 +1,3 @@
+$color-primary: rgba(0, 176, 176, 1);
+
 $orange: rgba(255, 123, 21, 1);

src/views/index-content.vue

@@ -0,0 +1,49 @@
+<script setup>
+import IndexTitle from "~/components/IndexTitle/index.vue";
+
+</script>
+
+
+<template>
+  <div class="index-container">
+    <div class="banner">
+      <el-carousel height="420px">
+        <el-carousel-item v-for="item in 4" :key="item">
+          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <IndexTitle title="精选咨询" />
+    test page.
+  </div>
+</template>
+
+<style lang="scss">
+.index {
+  &-container {
+
+    .banner {
+      .demonstration {
+        color: var(--el-text-color-secondary);
+      }
+
+      .el-carousel__item h3 {
+        color: #475669;
+        opacity: 0.75;
+        line-height: 420px;
+        margin: 0;
+        text-align: center;
+      }
+
+      .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
+      }
+
+      .el-carousel__item:nth-child(2n + 1) {
+        background-color: #d3dce6;
+      }
+    }
+
+  }
+}
+</style>

src/views/index.vue

@@ -14,7 +14,7 @@ import vAside from '~/components/layouts/Aside.vue'
         <el-aside width="200px">
           <v-aside />
         </el-aside>
-        <el-main>
+        <el-main class="layout-container">
           <router-view v-slot="{ Component }">
             <transition name="move" mode="out-in">
               <!-- NOTE: <keep-alive></keep-alive> -->

src/views/text.vue

@@ -1,6 +0,0 @@
-
-<template>
-  <div>
-    test page.
-  </div>
-</template>