From c25002c67252a521624af3f352bc1c5378775c21 Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期四, 13 七月 2023 12:52:24 +0800
Subject: [PATCH] 修改了我的信息模块的样式和布局
---
src/views/personal/myInformation/index.vue | 148 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 130 insertions(+), 18 deletions(-)
diff --git a/src/views/personal/myInformation/index.vue b/src/views/personal/myInformation/index.vue
index a55172f..ba2945f 100644
--- a/src/views/personal/myInformation/index.vue
+++ b/src/views/personal/myInformation/index.vue
@@ -1,11 +1,33 @@
<template>
<div class="my-main content-main">
<div class="my-info">
- <div class="tips">
- <span />
- <div>鍩烘湰淇℃伅</div>
+ <div class="tips-main">
+ <div class="tips">
+ <span />
+ <div>鍩烘湰淇℃伅</div>
+ </div>
+ <div class="tips-btn">
+ <span><i class="el-icon-edit" />鎿嶄綔锛�</span>
+ <el-button type="text">缂栬緫</el-button>
+ </div>
</div>
- <el-table
+ <div class="message">
+ <div class="message-item"><span><i class="el-icon-edit" />鐢ㄦ埛鍚嶏細</span>121212121212</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />濮撳悕锛�</span>
+ <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
+ </div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鐢佃瘽鍙风爜锛�</span>
+ 19825217196</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />閭锛�</span>
+ 1212112</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />绛惧悕锛�</span>
+ 2121212121212121</div>
+ </div>
+ <!-- <el-table
ref="infoTable"
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
:data="infoTable"
@@ -49,17 +71,23 @@
>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
- <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+ <el-button type="text" size="small">缂栬緫</el-button>
</template>
</el-table-column>
- </el-table>
+ </el-table> -->
</div>
<div class="my-business">
- <div class="tips">
- <span />
- <div>浼佷笟淇℃伅</div>
+ <div class="tips-main">
+ <div class="tips">
+ <span />
+ <div>浼佷笟淇℃伅</div>
+ </div>
+ <div class="tips-btn">
+ <span><i class="el-icon-edit" />鎿嶄綔锛�</span>
+ <el-button type="text">缂栬緫</el-button>
+ </div>
</div>
- <el-table
+ <!-- <el-table
ref="businessTable"
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
:data="businessTable"
@@ -109,10 +137,30 @@
>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">閫�鍑�</el-button>
- <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+ <el-button type="text" size="small">缂栬緫</el-button>
</template>
</el-table-column>
- </el-table>
+ </el-table> -->
+ <div class="message">
+ <div class="message-item"><span><i class="el-icon-edit" />鐢ㄦ埛鍚嶏細</span>121212121212</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />濮撳悕锛�</span>
+ <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
+ </div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鐢佃瘽鍙风爜锛�</span>
+ 19825217196</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />閭锛�</span>
+ 1212112</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />绛惧悕锛�</span>
+ 2121212121212121</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鎿嶄綔锛�</span>
+ <el-button type="text">缂栬緫</el-button>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -161,34 +209,98 @@
.my-main{
.my-info,.my-business{
background: #fff;
- padding: 20px 20px 10px 20px;
+ // padding: 10px 20px 10px 20px;
margin: 0;
margin-bottom: 12px;
- .tips{
+ border-radius: 6px;
+ overflow: hidden;
+ .tips-main{
+ // margin: ;
+ padding: 10px 20px 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ // height: ;
+ &:hover{
+ background: #85bff810;
+ .tips-btn{
+ display: block;
+ left: 0;
+ opacity:1;
+ }
+ }
+ .tips-btn{
+ height: 100%;
+ // display: none;
+ position: relative;
+ opacity:0;
+ left: 100px;
+ transition: all 0.3s ease-in-out;
+ }
+ .tips{
+ height: 100%;
display: flex;
height: 24px;
align-items: center;
font-size: 16px;
- margin-bottom: 12px;
- span{
+ // margin-bottom: 12px;
+ >span{
display: inline-block;
margin-right: 10px;
width: 4px;
height: 16px;
background: #0077DB;
}
- div{
+ >div{
height: 100%;
line-height: 26px;
}
+ .el-button{
+ padding: 0;
+ }
+ }
+ }
+ // 鍩烘湰淇℃伅鍜屼紒涓氫俊鎭殑姣忎竴涓俊鎭」鏍峰紡
+ .message{
+ padding: 0px 20px 10px 20px;
+
+ display: flex;
+ flex-wrap: wrap;
+ border-top: 1px solid #F2F6FC;
+ // border-top: 1px solid #F2F6FC;
+ >div{
+ flex: 30%;
+ max-width: 30%;
+ padding: 8px;
+ color: #606266;
+ align-items: center;
+ // height: 65px;
+ font-size: 12px;
+ height: 52px;
+ display: flex;
+ align-items: center;
+ >span{
+ color: #303133;
+ font-size: 16px;
+ //
+ >i{
+ margin-right: 8px;
+ }
+ }
+ }
+ // >div:nth-child(5){
+ // flex: 60%;
+ // max-width: 60%;
+ // }
}
}
.my-info{
}
.my-business{
-
+ margin-top: 28px;
}
}
</style>
--
Gitblit v1.9.3