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/PublicTabs.vue | 36 +++++++++++++++++++++++-------------
1 files changed, 23 insertions(+), 13 deletions(-)
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
}
--
Gitblit v1.8.0