chenrui
/
zdxtLawEnforcementCodeView
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改/美化企业详情页面

master
蟑螂恶霸 3 years ago
parent
ced2a61ca6
commit
81d9ba97b2
7 changed files with 115 additions and 225 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/tab_bg.png
  2. BIN
      src/assets/images/tab_bg1.png
  3. BIN
      src/assets/images/tab_bg1_1.png
  4. BIN
      src/assets/images/tab_bg_1.png
  5. 70
      src/views/enforce/enterpriseBaseInfo.vue
  6. 172
      src/views/enforce/enterpriseScanPreview.vue
  7. 10
      src/views/enforce/enterpriseWarningInfo.vue

BIN
src/assets/images/tab_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/tab_bg1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/tab_bg1_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/tab_bg_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

70
src/views/enforce/enterpriseBaseInfo.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="address_edit"> <div class="address_edit">
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="header_body"> <!-- <div class="header_body">-->
<header-nav :slefBack="true" @goBack="goBack" :titelText="`企业相关信息`"></header-nav> <!-- <header-nav :slefBack="true" @goBack="goBack" :titelText="`企业相关信息`"></header-nav>-->
</div> <!-- </div>-->
<!-- 中间 --> <!-- 中间 -->
<div class="warp_body"> <!-- <div class="warp_body">-->
<van-form @failed="onFailed" @submit="submit"> <van-form @failed="onFailed" @submit="submit">
<van-cell-group> <van-cell-group>
<div style="padding-top:10px; font-size:large" class="qy-name">企业信息</div> <div class="qy-name">企业信息</div>
<van-field <van-field
v-model="data.enterpriseInfo.enterpriseName" v-model="data.enterpriseInfo.enterpriseName"
label="企业名称:" label="企业名称:"
@ -53,11 +53,11 @@
<van-divider class="divdsty" /> <van-divider class="divdsty" />
<van-cell-group> <van-cell-group>
<div style="padding-top:10px; font-size:large" class="qy-name">案件信息</div> <div class="qy-name">案件信息</div>
<div class="search-button-list"> <div class="search-button-list">
<span v-for="(item, index) in data?.optionList" :key="index"> <span v-for="(item, index) in data?.optionList" :key="index">
<van-button plain hairline @click="searchDateType(item)" round type="primary" size="mini" <van-button plain hairline @click="searchDateType(item)" round type="primary" size="mini"
:style="item.selected == true ? 'background-color:yellow':'background-color:white'">{{item.name}}</van-button> :style="item.selected == true ? 'background-color:#1989fa;color:#fff':'background-color:white;color:#1989fa'">{{item.name}}</van-button>
</span> </span>
</div> </div>
<div class="refresh_content" v-if="data?.checkDataList.length && data?.show == 1"> <div class="refresh_content" v-if="data?.checkDataList.length && data?.show == 1">
@ -65,9 +65,9 @@
<van-swipe-cell class="swipe_cell"> <van-swipe-cell class="swipe_cell">
<div class="card_box" @click="toDetailView(item.id)"> <div class="card_box" @click="toDetailView(item.id)">
<div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline--bottom"></div> <!-- <div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline&#45;&#45;bottom"></div>-->
<div class="card_box_span"> <div class="card_box_span">
<p style="font-size: 16px;font-weight: bold;">{{ item.lawEnforcementItem }}</p> <p class="zf-name">{{ item.lawEnforcementItem }}</p>
</div> </div>
<div class="card_box_span"> <div class="card_box_span">
<p><span class="card_box_label">执法部门：</span> {{ item.lawEnforcement }}</p> <p><span class="card_box_label">执法部门：</span> {{ item.lawEnforcement }}</p>
@ -87,7 +87,7 @@
<van-swipe-cell class="swipe_cell"> <van-swipe-cell class="swipe_cell">
<!-- <div class="card_box" @click="toDetailView(item.id)"> --> <!-- <div class="card_box" @click="toDetailView(item.id)"> -->
<div class="card_box"> <div class="card_box">
<div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline--bottom"></div> <!-- <div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline&#45;&#45;bottom"></div>-->
<div class="card_box_span"> <div class="card_box_span">
<p style="font-size: 16px;font-weight: bold;">{{ item.lawEnforcementItem }}</p> <p style="font-size: 16px;font-weight: bold;">{{ item.lawEnforcementItem }}</p>
</div> </div>
@ -110,7 +110,7 @@
<!-- <div class="card_box" @click="toDetailView(item.id)"> --> <!-- <div class="card_box" @click="toDetailView(item.id)"> -->
<div class="card_box"> <div class="card_box">
<div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline--bottom"></div> <!-- <div style="background-color: aqua; border: 2px; height: .1px;" class="van-hairline&#45;&#45;bottom"></div>-->
<div class="card_box_span"> <div class="card_box_span">
<p style="font-size: 16px;font-weight: bold;">{{ item.lawEnforcementItem }}</p> <p style="font-size: 16px;font-weight: bold;">{{ item.lawEnforcementItem }}</p>
</div> </div>
@ -134,7 +134,7 @@
<Popup :visible="data.popupVisible" :content="data.popupContent" @close="closePopup" @reciveData="reciveData" /> <Popup :visible="data.popupVisible" :content="data.popupContent" @close="closePopup" @reciveData="reciveData" />
<Popup :visible="data.popupVisible2" :content="data.popupContent2" @close="closePopup" @reciveData="reciveData2" /> <Popup :visible="data.popupVisible2" :content="data.popupContent2" @close="closePopup" @reciveData="reciveData2" />
</div> <!-- </div>-->
</template> </template>
<script setup name="register"> <script setup name="register">
@ -296,19 +296,19 @@ const reciveData2 = (item) =>{
overflow-y: auto; overflow-y: auto;
} }
.qy-name{ .qy-name {
font-size: large; font-size: 0.4rem;
margin-left: 5%; margin: 0 4.25%;
height: 34px; height: 1.2rem;
margin-top: 0%; line-height: 3.5;
font-weight: 600; font-weight: 600;
color: #000;
border-bottom: 2px solid #f3f4f5;
} }
.zf-name{
font-size: 15px; .zf-name {
height: 33px; height: 1.2rem;
background-color: white; font-size: 0.35rem;
padding-left: 4%;
padding-top: 2%;
font-weight: 600; font-weight: 600;
} }
@ -365,7 +365,7 @@ const reciveData2 = (item) =>{
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
.goods_box { .goods_box {
display: flex; display: flex;
background-color: #fff; background-color: #fff;
margin: 6px; margin: 6px;
@ -378,14 +378,16 @@ const reciveData2 = (item) =>{
.card_box { .card_box {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 10px,0px; padding: 10px 0px;
flex-direction: column; flex-direction: column;
.card_body { .card_body {
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
flex: 1; flex: 1;
} }
.card_box_span{
.card_box_span {
font-size: 13px; font-size: 13px;
padding-left: 5%; padding-left: 5%;
height: 35px; height: 35px;
@ -393,10 +395,22 @@ const reciveData2 = (item) =>{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.card_box_action{
.card_box_action {
position: absolute; position: absolute;
right: 4%; right: 4%;
} }
} }
} }
.search-button-list {
margin-top: -2%;
}
/deep/ .van-button {
margin: 2% -2% 3% 4.5%;
padding: 2% 3%;
font-size: 0.3rem;
}
</style> </style>

172
src/views/enforce/enterpriseScanPreview.vue
View File

@ -6,7 +6,7 @@
<header-nav <header-nav
:slefBack="true" :slefBack="true"
@goBack="goBack" @goBack="goBack"
:titelText="`企业详情查看`" :titelText="`企业详情`"
> >
</header-nav> </header-nav>
</div> </div>
@ -14,23 +14,6 @@
<!-- 中间 --> <!-- 中间 -->
<div class="warp_body"> <div class="warp_body">
<div class="white-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-tabs v-model:active="active">
<van-tab title="企业画像"> <van-tab title="企业画像">
<enterpriseBaseInfo></enterpriseBaseInfo> <enterpriseBaseInfo></enterpriseBaseInfo>
@ -39,44 +22,12 @@
<enterpriseWarningInfo></enterpriseWarningInfo> <enterpriseWarningInfo></enterpriseWarningInfo>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
<!-- <ul>-->
<!-- &lt;!&ndash; data-id对li元素添加自定义id属性 &ndash;&gt;-->
<!-- <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> </div>
</div> </div>
</template> </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"> <script setup name="Home">
import {getEnterpriseMerchantAuthorization} from '@/api/Home'; import {getEnterpriseMerchantAuthorization} from '@/api/Home';
import {queryEarlyWarning} from '../../api/enforce'; import {queryEarlyWarning} from '../../api/enforce';
@ -188,121 +139,46 @@ const goBack = () => {
background-image: linear-gradient(to bottom, #ebf3fb, transparent); background-image: linear-gradient(to bottom, #ebf3fb, transparent);
background-size: cover; background-size: cover;
position: relative; 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 { .white-body {
padding: 0px 0px 10px 0px;
display: flex;
justify-content: center;
};
}
.recommend_box {
.recommend_body {
width: 100%;
}
}
}
.white-body {
margin: 0 4%; margin: 0 4%;
width: 92%; width: 92%;
height: 96%; height: 96%;
background-color: #fff; background-color: #fff;
border-radius: 0.25rem; border-radius: 0.25rem;
}
} }
.nocode { /deep/ .van-tabs__wrap {
width: 100%; padding: 2% 3%;
color: #fb7905;
font-size: 0.45rem;
text-align: center;
line-height: 3;
} }
/deep/ .van-tab:nth-child(1) {
.tab-nav { color: #4aa1f9;
display: flex; background: url("../../assets/images/tab_bg1_1.png") no-repeat;
justify-content: center; background-size: 100% 100%;
margin: 5% 2%;
width: 96%;
height: 1.25rem;
} }
.tab-nav ul { /deep/ .van-tab:nth-child(1).van-tab--active {
width: 100%; color: #fff;
height: 100%; background: url("../../assets/images/tab_bg1.png") no-repeat;
display: flex; background-size: 100% 100%;
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;
} }
.tab-nav ul li.active { /deep/ .van-tab:nth-child(2) {
color: #fff; color: #4aa1f9;
background: #1367fe; background: url("../../assets/images/tab_bg.png") no-repeat;
background-size: 100% 100%;
} }
.tab-content { /deep/ .van-tab:nth-child(2).van-tab--active {
position: relative; color: #fff;
width: 100%; background: url("../../assets/images/tab_bg_1.png") no-repeat;
height: 50vh; background-size: 100% 100%;
background-color: aquamarine;
margin: 2%;
} }
.item { /deep/ .van-tabs__line {
display: none; background-color: transparent;
width: 100%;
height: 100%;
} }
</style> </style>

10
src/views/enforce/enterpriseWarningInfo.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="shop app_content"> <!-- <div class="shop app_content">-->
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="header_body"> <!-- <div class="header_body">-->
<header-nav :leftArrow="false" titelText="企业预警信息" /> <!-- <header-nav :leftArrow="false" titelText="企业预警信息" />-->
</div> <!-- </div>-->
<div class="search-button-date"> <div class="search-button-date">
<div style="border-color: black;" class="van-hairline--bottom"></div> <div style="border-color: black;" class="van-hairline--bottom"></div>
@ -59,7 +59,7 @@
</refresh-list> </refresh-list>
</lodding-card> </lodding-card>
</div> </div>
</div> <!-- </div>-->
</template> </template>
<script setup name="registrationList"> <script setup name="registrationList">

Write Preview
Loading…
Cancel
Save