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