From 8aaf0180a50a92c1876c35ff53336a1a46532baa Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 16 四月 2024 18:10:04 +0800
Subject: [PATCH] 优化页面
---
src/components/view/index-index.vue | 118 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 77 insertions(+), 41 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index 26c81c0..bff6116 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -6,32 +6,10 @@
padding: 25px 0;
}
- .no {
- width: 100%;
- display: flex;
- margin-bottom: 10px;
- }
-
- .card {
- border-radius: 6px;
- background-color: #fff;
- padding: 10px 20px;
- }
-
- .no1 {
- display: flex;
- justify-content: space-between;
- }
-
- .no1 .left {
- width: 65%;
- }
-
.left-1 {
background-image: url("../../../static/img/棣栭〉鍥剧墖1.png");
background-size: 100% 100%;
- width: calc(100% - 40px);
- height: 7.2vw;
+ height: 118px;
margin-bottom: 10px;
}
@@ -56,13 +34,6 @@
font-size: 17px;
}
- .right {
- width: 32%;
- height: calc(7.2vw + 10px + 120px);
- display: flex;
- flex-wrap: wrap;
- }
-
::-webkit-scrollbar {
width: 0px;
}
@@ -72,17 +43,39 @@
border-radius: 3px;
}
+ .card{
+ background: #FFFFFF;
+ border-radius: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .right-1{
+ padding: 14px 10px 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .right-1-item{
+ width: 25%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .right-1-item .mun{
+ margin-left: 6px;
+ color: #0166E2;
+ }
+
</style>
<template>
<div class="index">
- <el-row :gutter="10">
- <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
- <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
- </el-row>
- <div class="no no1">
- <div class="left">
- <div class="left-1 card">
+ <el-row :gutter="25">
+ <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
+ <div class="left-1">
<div class="say">
<div style="display: flex;align-items: center;flex-wrap: wrap;">
<div class="say-1">{{user.name}} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</div>
@@ -90,10 +83,53 @@
</div>
</div>
</div>
- </div>
- <div class="right card">
- </div>
- </div>
+ <div class="left-2 card"></div>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
+ <div class="right-1 card">
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-0.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鎴戠殑浠ｅ姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-1.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">宸插姙浜嬪疁</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-2.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鍓╀綑寰呭姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-3.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">杩戞湡浜嬪疁</p>
+ </div>
+ </div>
+ </div>
+ <div class="right-2 card">
+ </div>
+ <div class="right-3 card">
+ </div>
+ </el-col>
+ </el-row>
</div>
</template>
--
Gitblit v1.9.3