feat(home): add the home page information module

public/serverConfig.json

@@ -1,6 +1,6 @@
 {
   "Version": "4.5.0",
-  "Title": "PureAdmin",
+  "Title": "Pic-hin",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

src/style/element-plus.scss

@@ -169,3 +169,10 @@
     box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
   }
 }
+
+.box-card .el-card__header {
+  // 里面的div上下居中
+  display: flex;
+  height: 45px;
+  background-color: #eaf4f788;
+}

src/views/welcome/AnnouncementCard/index.vue

@@ -0,0 +1,24 @@
+<script setup>
+defineOptions({
+  name: "AnnouncementCard"
+});
+</script>
+<template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <strong>公告</strong>
+      </div>
+    </template>
+    <div class="text item flex">
+      <div class="icon-text">
+        <IconifyIconOnline
+          icon="openmoji:megaphone"
+          width="20px"
+          height="20px"
+        />
+        <span>:用户公告</span>
+      </div>
+    </div>
+  </el-card>
+</template>

src/views/welcome/InfoCard/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({
+  name: "InfoCard"
+});
+defineProps({
+  icon: String,
+  width: String,
+  height: String,
+  text: String
+});
+</script>
+
+<template>
+  <el-card shadow="always" class="card-style">
+    <div class="icon-text">
+      <IconifyIconOnline :icon="icon" :width="width" :height="height" />
+      <span class="span-style">{{ text }}</span>
+    </div>
+  </el-card>
+</template>

src/views/welcome/PolicyCard/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineOptions({
+  name: "PolicyCard"
+});
+</script>
+<template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <span>可使用策略</span>
+      </div>
+    </template>
+    <div class="text item flex" style="height: auto">
+      <div class="icon-text">
+        <div>
+          <strong>默认策略</strong>
+          <p>系统默认的策略</p>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>

src/views/welcome/UserInformationCard/index.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineOptions({
+  name: "UserInformationCard"
+});
+</script>
+<template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <span>我的信息</span>
+      </div>
+    </template>
+    <div style="background-color: red">12</div>
+  </el-card>
+</template>

src/views/welcome/index.vue

@@ -1,9 +1,114 @@
 <script setup lang="ts">
+import AnnouncementCard from "./AnnouncementCard/index.vue";
+import InfoCard from "./InfoCard/index.vue";
+import PolicyCard from "./PolicyCard/index.vue";
+import UserInformationCard from "./UserInformationCard/index.vue";
 defineOptions({
-  name: "Welcome"
+  name: "welcome"
 });
 </script>
 
 <template>
-  <h1>Pure-Admin-Thin（非国际化版本）</h1>
+  <div class="home">
+    <el-row>
+      <el-col :span="24">
+        <AnnouncementCard />
+      </el-col>
+    </el-row>
+    <el-row :gutter="48" class="el-line flex" align="middle">
+      <el-col :xs="24" :sm="6">
+        <InfoCard
+          icon="logos:google-photos"
+          width="54px"
+          height="48px"
+          text="相册数量:0"
+        />
+      </el-col>
+      <el-col :xs="24" :sm="6">
+        <InfoCard
+          icon="icon-park-twotone:hard-disk"
+          width="54px"
+          height="48px"
+          text="已用存储:10MB"
+        />
+      </el-col>
+      <el-col :xs="24" :sm="6">
+        <InfoCard
+          icon="icon-park:hard-disk"
+          width="54px"
+          height="48px"
+          text="可用存储:300MB"
+        />
+      </el-col>
+      <el-col :xs="24" :sm="6">
+        <InfoCard
+          icon="icon-park:solid-state-disk"
+          width="54px"
+          height="48px"
+          text="总储存:3000MB"
+        />
+      </el-col>
+    </el-row>
+    <!-- 第三行 -->
+    <el-row class="policy-box" style="margin-top: 18px" :gutter="12">
+      <el-col :xs="24" :sm="16">
+        <PolicyCard />
+      </el-col>
+      <el-col :xs="24" :sm="8">
+        <UserInformationCard />
+      </el-col>
+    </el-row>
+  </div>
 </template>
+
+<style scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.text {
+  align-items: center;
+  height: 5px;
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 5px;
+}
+
+.el-line {
+  /* 元素 居中 */
+  align-items: center;
+  margin-top: 10px;
+}
+
+.icon-text {
+  display: flex;
+  align-items: center;
+}
+
+.card-style {
+  display: flex;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 5px;
+}
+
+.span-style {
+  margin-left: 10px;
+  font-size: 16px;
+}
+
+@media screen and (width <= 768px) {
+  .card-style {
+    margin-bottom: 10px;
+  }
+}
+</style>