From ca6099d0e74026d71d2ae091b5541411ec254043 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 03 六月 2024 17:06:54 +0800
Subject: [PATCH] feat:概述

---
 src/views/home/index.vue                       |   17 ++++++--
 src/views/home/components/user-panel/index.vue |    2 
 src/style.css                                  |    1 
 src/views/home/components/info-panel/index.vue |   29 ++++++++++++++
 src/views/home/components/info-data/index.vue  |   70 +++++++++++++++++++++++++++++++++++
 5 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/src/style.css b/src/style.css
index 8a89425..40f37b4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -20,3 +20,4 @@
   width: 100%;
   display: block;
 }
+
diff --git a/src/views/home/components/info-data/index.vue b/src/views/home/components/info-data/index.vue
new file mode 100644
index 0000000..95a2a13
--- /dev/null
+++ b/src/views/home/components/info-data/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-card class="card">
+    <el-row class="mb-5">
+      <el-col>
+        <div class="title text-lg font-bold">姒傝</div>
+      </el-col>
+    </el-row>
+
+    <el-row class="mb-5" :gutter="20">
+
+      <el-col :span="6">
+        <div class="data-item flex flex-col items-center">
+          <div class="data-num">
+            <span class="text-num">123</span>
+            <span>灏忔椂</span>
+          </div>
+          <div class="data-label">宸插灏忔椂</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="data-item flex flex-col items-center">
+          <div class="data-num">
+            <span class="text-num">123</span>
+            <span>鑺�</span>
+          </div>
+          <div class="data-label">鏈懆璇剧▼</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="data-item flex flex-col items-center">
+          <div class="data-num">
+            <span class="text-num">123</span>
+            <span>鑺�</span>
+          </div>
+          <div class="data-label">鏈懆宸插璇剧▼</div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="data-item flex flex-col items-center">
+          <div class="data-num">
+            <span class="text-num">123</span>
+            <span>鍒�</span>
+          </div>
+          <div class="data-label">鑰冭瘯骞冲潎鍒�</div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row class="mb-5" :gutter="20">
+      <el-col>
+
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.data-num {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.text-num {
+  color: var(--el-color-primary);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/info-panel/index.vue b/src/views/home/components/info-panel/index.vue
new file mode 100644
index 0000000..4f360b5
--- /dev/null
+++ b/src/views/home/components/info-panel/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="info-container">
+    <div class="info-content">
+      <div class="info-wrapper">
+        <InfoData></InfoData>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import InfoData from '../info-data/index.vue';
+</script>
+
+<style lang="scss" scoped>
+
+.info-container {
+  position: relative;
+  .info-content {
+    top: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+  }
+  .info-wrapper {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/components/user-panel/index.vue b/src/views/home/components/user-panel/index.vue
index 22d1f13..6df38f4 100644
--- a/src/views/home/components/user-panel/index.vue
+++ b/src/views/home/components/user-panel/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user-panel sticky left-10 top-5 max-w-sm">
+  <div class="user-panel sticky max-w-sm min-w-96">
     <el-card class="card">
       <div class="panel-content flex flex-col items-center">
         <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a8cf7f0..62dfd02 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,15 +1,24 @@
 <template>
-  <UserPanel></UserPanel>
-  <div class="test"></div>
+  <div class="home-page container mx-auto flex justify-between py-6">
+    <UserPanel class="flex-shrink-0 mr-5"></UserPanel>
+    <InfoPanel class="flex-shrink-0 grow"></InfoPanel>
+  </div>
 </template>
 
 <script setup>
 import UserPanel from './components/user-panel/index.vue';
+import InfoPanel from './components/info-panel/index.vue';
 
 </script>
 
 <style lang="scss" scoped>
-.test {
-  height: 500px;
+::v-deep .card {
+  border-radius: 30px;
+}
+
+@media (min-width: 1836px) {
+  .container {
+    max-width: 1724px;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0