From 5d3cafca01c6ad878d51533b955b530e12f9d99a Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 11:38:44 +0800
Subject: [PATCH] 风险源弹框UI优化
---
src/components/base-page/RiskSource/RiskSourceIndex.vue | 2
src/components/base-page/RiskSource/PublicTabs.vue | 36 +++++++++++------
src/components/base-page/RiskSource/PublicTable.vue | 37 ++++++++++++------
3 files changed, 48 insertions(+), 27 deletions(-)
diff --git a/src/components/base-page/RiskSource/PublicTable.vue b/src/components/base-page/RiskSource/PublicTable.vue
index b71482e..0486b44 100644
--- a/src/components/base-page/RiskSource/PublicTable.vue
+++ b/src/components/base-page/RiskSource/PublicTable.vue
@@ -6,13 +6,13 @@
<span></span>
<div class="main-table">
<div class="">
- <ul>
- <li>椋庨櫓璇勪及杩囩▼</li>
- <li>鍒濆璇勪环缁撴灉:{{ riskSourceAssess }}</li>
+ <ul style="margin-bottom: .02rem">
+ <li><h3>椋庨櫓璇勪及杩囩▼</h3></li>
+ <li>鍒濆璇勪环缁撴灉锛歿{ riskSourceAssess }}</li>
</ul>
</div>
- <div>
- <table border="1">
+ <div class="EvaluationTable">
+ <table border="1" style="border-color: rgba(118,132,189,0.77)" >
<tr>
<th colspan="2">椋庨櫓鎺у埗</th>
<th>璇勪及鎸囨爣</th>
@@ -95,10 +95,13 @@
</tr>
</table>
</div>
- <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
- <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
- :label="item.label" :show-overflow-tooltip="true"></el-table-column>
- </el-table>
+ <h3>鐜椋庨櫓璇勪及缁撴灉</h3>
+ <div class="pTable">
+ <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
+ <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
+ :label="item.label" :show-overflow-tooltip="true"></el-table-column>
+ </el-table>
+ </div>
</div>
</div>
</template>
@@ -199,13 +202,21 @@
/deep/ .el-table tbody tr:hover > td {
background: none !important
}
-
+.pTable{
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ padding: 0.04rem;
+ margin-top: .06rem;
+}
.slotChildTable {
position: relative;
- background: rgba(33, 41, 69, 0.9);
-
+ background: rgba(0, 16, 30, 0.7);
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ color: #00fff6;
+ padding: 0.04rem;
+ border: 1px solid #396d83;
.main-table {
- border: 1px #396d83 solid;
+ max-height: 2rem;
+ overflow: hidden auto;
}
}
diff --git a/src/components/base-page/RiskSource/PublicTabs.vue b/src/components/base-page/RiskSource/PublicTabs.vue
index b1beb91..b1ed89b 100644
--- a/src/components/base-page/RiskSource/PublicTabs.vue
+++ b/src/components/base-page/RiskSource/PublicTabs.vue
@@ -6,10 +6,9 @@
<span></span>
<div class="tabs-content">
<ul>
- <li>椋庨櫓鍚嶇О:{{ riskSourceBaseInfo.riskname }}</li>
- <li>椋庨櫓绾у埆:{{ riskSourceBaseInfo.riskLevel }}</li>
- <li>椋庨櫓鎻忚堪:{{ riskSourceBaseInfo.depiction }}</li>
- <li class="lastli"></li>
+ <li>椋庨櫓鍚嶇О锛歿{ riskSourceBaseInfo.riskname }}</li>
+ <li :style="{boxShadow: riskLevel[riskSourceBaseInfo.riskLevel]}">椋庨櫓绾у埆锛歿{ riskSourceBaseInfo.riskLevel }}</li>
+ <li>椋庨櫓鎻忚堪锛歿{ riskSourceBaseInfo.depiction }}</li>
</ul>
</div>
</div>
@@ -22,7 +21,13 @@
name: 'PublicTabs',
data () {
return {
- riskSourceBaseInfo: []
+ riskSourceBaseInfo: [],
+ riskLevel: {
+ 1: '0 0 10px rgba(246,16,43,.7) inset',
+ 2: '0 0 10px rgba(244,142,88,.7) inset',
+ 3: '0 0 10px rgba(253,238,13,.7) inset',
+ 4: '0 0 10px rgba(38,144,2,.7) inset'
+ }
}
},
mounted () {
@@ -44,7 +49,7 @@
.slotChildTabs {
position: relative;
- margin-bottom: 0.1rem;
+ margin-bottom: 0.06rem;
background-color: @background-color;
.tabs-content {
@@ -56,21 +61,26 @@
ul {
display: flex;
align-items: center;
- justify-content: space-around;
flex-wrap: wrap;
-
+ padding: 0 .03rem;
li {
margin-bottom: 0.04rem;
- text-align: center;
min-width: 30%;
- background-color: #243a55;
- color: #00d0f9;
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ color: #00fff6;
border-radius: 0.02rem;
font-size: 0.08rem;
line-height: 0.09rem;
- padding: 0.03rem .5%;
+ padding: 0.05rem .8%;
}
-
+ li:nth-child(2){
+ margin-left: .03rem;
+ }
+ li:last-child {
+ text-align: left;
+ line-height: .12rem;
+ margin-bottom: 0;
+ }
.lastli {
visibility: hidden
}
diff --git a/src/components/base-page/RiskSource/RiskSourceIndex.vue b/src/components/base-page/RiskSource/RiskSourceIndex.vue
index 11b0a01..0303409 100644
--- a/src/components/base-page/RiskSource/RiskSourceIndex.vue
+++ b/src/components/base-page/RiskSource/RiskSourceIndex.vue
@@ -83,7 +83,7 @@
.public-bounced-content {
//padding: 0.1rem;
- display: flex;
+
//align-items: center;
//justify-content: space-around;
--
Gitblit v1.8.0