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