|
|
|
@ -6,7 +6,7 @@ |
|
|
|
<header-nav |
|
|
|
:slefBack="true" |
|
|
|
@goBack="goBack" |
|
|
|
:titelText="`企业详情查看`" |
|
|
|
:titelText="`企业详情`" |
|
|
|
> |
|
|
|
</header-nav> |
|
|
|
</div> |
|
|
|
@ -14,23 +14,6 @@ |
|
|
|
<!-- 中间 --> |
|
|
|
<div class="warp_body"> |
|
|
|
<div class="white-body"> |
|
|
|
<div class="carousel_box"> |
|
|
|
<div class="box-scan-one"> |
|
|
|
|
|
|
|
<span class="box-scan-text" @click="toEnterpriseBaseInfo">企业画像</span> |
|
|
|
</div> |
|
|
|
<div class="box-scan-two"> |
|
|
|
<span class="box-scan-text" @click="toEnterpriseWarningInfo"> |
|
|
|
<div class="card_box_span" style="padding-left: 1%;"> |
|
|
|
<van-icon v-if="data.warningInfo.warningLevel==1" name="warning" color="red" size="30" style="margin-top: 2%;" /> |
|
|
|
<van-icon v-else-if="data.warningInfo.warningLevel==2" name="warning" color="orange" size="30" style="margin-top: 2%;" /> |
|
|
|
<van-icon v-else-if="data.warningInfo.warningLevel==3" name="warning" color="#fed200" size="30" style="margin-top: 2%;" /> |
|
|
|
<van-icon v-else name="info" size="30" color="#fed200" />企业预警 |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="tab-nav"> |
|
|
|
<van-tabs v-model:active="active"> |
|
|
|
<van-tab title="企业画像"> |
|
|
|
<enterpriseBaseInfo></enterpriseBaseInfo> |
|
|
|
@ -39,44 +22,12 @@ |
|
|
|
<enterpriseWarningInfo></enterpriseWarningInfo> |
|
|
|
</van-tab> |
|
|
|
</van-tabs> |
|
|
|
<!-- <ul>--> |
|
|
|
<!-- <!– data-id对li元素添加自定义id属性 –>--> |
|
|
|
<!-- <li class="active" data-id="0">企业画像</li>--> |
|
|
|
<!-- <li data-id="1">企业预警</li>--> |
|
|
|
<!-- </ul>--> |
|
|
|
</div> |
|
|
|
<!-- <div class="tab-content">--> |
|
|
|
<!-- <div class="item active">1</div>--> |
|
|
|
<!-- <div class="item">2</div>--> |
|
|
|
|
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
//利用css样式进行变换 |
|
|
|
//#region |
|
|
|
const Nav = document.querySelectorAll(".tab-nav li") |
|
|
|
for (let i = 0; i < Nav.length; i++) { |
|
|
|
Nav[i].addEventListener('click',function(){ |
|
|
|
//寻找class='.active'的结构，并将结构中的该类名取消 |
|
|
|
document.querySelector('.tab-nav .active').classList.remove('active') |
|
|
|
//在对点击对象的li中添加active类名，实现字体变色等css样式 |
|
|
|
this.classList.add('active') |
|
|
|
//同样移除tab-content结构中的active类名 |
|
|
|
document.querySelector('.tab-content .active').classList.remove('active') |
|
|
|
//再对tab-content结构中item的第几个div添加active类名，实现图片的出现和消失 |
|
|
|
//注意nth-child（）中的值必须从1开始（不要了解可以去看css的伪类选择器），i是从0开始，故要+1 |
|
|
|
document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active') |
|
|
|
}) |
|
|
|
} |
|
|
|
//#endregion |
|
|
|
</script> |
|
|
|
|
|
|
|
<script setup name="Home"> |
|
|
|
import {getEnterpriseMerchantAuthorization} from '@/api/Home'; |
|
|
|
import {queryEarlyWarning} from '../../api/enforce'; |
|
|
|
@ -188,56 +139,6 @@ const goBack = () => { |
|
|
|
background-image: linear-gradient(to bottom, #ebf3fb, transparent); |
|
|
|
background-size: cover; |
|
|
|
position: relative; |
|
|
|
.carousel_box { |
|
|
|
position: relative; |
|
|
|
top: 2%; |
|
|
|
height: 150px; |
|
|
|
width: 100%; |
|
|
|
background: url("/src/assets/images/scan-mean.jpg") no-repeat center center; |
|
|
|
background-size: 60%; |
|
|
|
opacity: 0.75; |
|
|
|
|
|
|
|
.box-scan-one , .box-scan-two{ |
|
|
|
position: absolute; |
|
|
|
top: 30%; |
|
|
|
left: 15%; |
|
|
|
height: 100px; |
|
|
|
width: 30%; |
|
|
|
font-size: 0.4rem; |
|
|
|
color: #999; |
|
|
|
.box-scan-text{ |
|
|
|
margin-top: 70%; |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
text-align: center |
|
|
|
} |
|
|
|
} |
|
|
|
.box-scan-two{ |
|
|
|
left: auto; |
|
|
|
right: 12.5%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.boutique_box { |
|
|
|
position: relative; |
|
|
|
top: 10%; |
|
|
|
z-index: 100; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.boutique_body { |
|
|
|
padding: 0px 0px 10px 0px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
.recommend_box { |
|
|
|
.recommend_body { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.white-body { |
|
|
|
@ -247,62 +148,37 @@ const goBack = () => { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 0.25rem; |
|
|
|
} |
|
|
|
|
|
|
|
.nocode { |
|
|
|
width: 100%; |
|
|
|
color: #fb7905; |
|
|
|
font-size: 0.45rem; |
|
|
|
text-align: center; |
|
|
|
line-height: 3; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab-nav { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin: 5% 2%; |
|
|
|
width: 96%; |
|
|
|
height: 1.25rem; |
|
|
|
/deep/ .van-tabs__wrap { |
|
|
|
padding: 2% 3%; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-nav ul { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
.tab-nav ul li { |
|
|
|
display: inline-block; |
|
|
|
margin: 0 2%; |
|
|
|
padding: 0; |
|
|
|
width: 47%; |
|
|
|
height: 100%; |
|
|
|
color: #1367fe; |
|
|
|
font-size: 0.45rem; |
|
|
|
line-height: 1.25rem; |
|
|
|
border-radius: 0.2rem; |
|
|
|
text-align: center; |
|
|
|
background-color: #e7efff; |
|
|
|
color: #1367fe; |
|
|
|
/deep/ .van-tab:nth-child(1) { |
|
|
|
color: #4aa1f9; |
|
|
|
background: url("../../assets/images/tab_bg1_1.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-nav ul li.active { |
|
|
|
/deep/ .van-tab:nth-child(1).van-tab--active { |
|
|
|
color: #fff; |
|
|
|
background: #1367fe; |
|
|
|
background: url("../../assets/images/tab_bg1.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-content { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 50vh; |
|
|
|
background-color: aquamarine; |
|
|
|
margin: 2%; |
|
|
|
/deep/ .van-tab:nth-child(2) { |
|
|
|
color: #4aa1f9; |
|
|
|
background: url("../../assets/images/tab_bg.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.item { |
|
|
|
display: none; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
/deep/ .van-tab:nth-child(2).van-tab--active { |
|
|
|
color: #fff; |
|
|
|
background: url("../../assets/images/tab_bg_1.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
/deep/ .van-tabs__line { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
