hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-10 04:36:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

[银保app] 上头条前三名头像判断,后端有则显示后端返回的地址.后端没有显示本地图片.图片改为圆形.

Browse Source
This commit is contained in:
DESKTOP-AFPHKHF\PC
2023-01-01 19:31:57 +08:00
committed by liu.xiaofeng@ebiz-digits.com
parent dcd43b2f64
commit cb7c6dac54
1 changed files with 504 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

839
src/views/YB_APP/hitTheHeadlines.vue
View File

@@ -8,7 +8,7 @@
<span class="GMactive" v-if="premType == 'GM'" @click="changePremType('GM')">总规模保费</span>
</div>
<div>
<span @click="clickCalendar" class="headDate">{{calendarValue}} ▼</span>
<span @click="clickCalendar" class="headDate">{{ calendarValue }} ▼</span>
</div>
</div>
@@ -19,134 +19,137 @@
<span class="dataType2Active" v-if="dataType == 1" @click="changeDataType('2')">营业部</span>
<span class="dataType2UnActive" v-if="dataType == 2" @click="changeDataType('2')">营业部</span>
</div>
<div v-if="dataType == 1 && top3Data.length != 0" class="imgContainer1">
<div class="imgContainer1_main">
<div class="imgContainer1_main_second">
<div class="imgContainer1_main_part_top">
<img src="@/assets/YB_APP/images/17.png" style="width:40%;">
<img src="@/assets/YB_APP/images/17.png" style="width: 40%" />
<div class="imgContainer1_main_second_top_div">
<img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
<!-- <img src="@/assets/YB_APP/images/logo.png" style="width:75%;"> -->
<img :src="this.top3Data[1].agentHeadImgUrl == null ? url1 : this.top3Data[1].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
</div>
<div class="personal_second">
<p class="personal_second_p">{{top3Data[1].agentName}}</p>
<p class="personal_second_p">{{ top3Data[1].agentName }}</p>
</div>
</div>
<div class="imgContainer1_main_second_bottom">
<p class="imgContainer1_main_part_bottom_p">{{top3Data[1].managecom2}}{{top3Data[1].managecom3}}</p>
<p class="imgContainer1_main_part_bottom_p">{{top3Data[1].prem}}万元</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[1].managecom2 }}{{ top3Data[1].managecom3 }}</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[1].prem }}万元</p>
</div>
</div>
<div class="imgContainer1_main_first">
<div class="imgContainer1_main_part_top">
<img src="@/assets/YB_APP/images/18.png" style="width:65%;">
<img src="@/assets/YB_APP/images/18.png" style="width: 65%" />
<div class="imgContainer1_main_first_top_div">
<img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
<!-- <img src="https://iagentsales-test2.e-guofu.com:443/opt/ebiz/static/images/2022/12/26/7c5fe5b7e14e4682a802516210f4aa83.jpeg" style="width: 85%;border-radius: 50%" /> -->
<img :src="this.top3Data[0].agentHeadImgUrl == null ? url1 : this.top3Data[0].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
</div>
<div class="personal_first">
<p class="personal_first_p">{{top3Data[0].agentName}}</p>
<p class="personal_first_p">{{ top3Data[0].agentName }}</p>
</div>
</div>
<div class="imgContainer1_main_first_bottom">
<p class="imgContainer1_main_part_bottom_p">{{top3Data[0].managecom2}}{{top3Data[0].managecom3}}</p>
<p class="imgContainer1_main_part_bottom_p">{{top3Data[0].prem}}万元</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[0].managecom2 }}{{ top3Data[0].managecom3 }}</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[0].prem }}万元</p>
</div>
</div>
<div class="imgContainer1_main_third">
<div class="imgContainer1_main_part_top">
<img src="@/assets/YB_APP/images/19.png" style="width:40%;">
<img src="@/assets/YB_APP/images/19.png" style="width: 40%" />
<div class="imgContainer1_main_third_top_div">
<img src="@/assets/YB_APP/images/logo.png" style="width:75%;">
<!-- <img src="@/assets/YB_APP/images/logo.png" style="width: 75%" /> -->
<img :src="this.top3Data[2].agentHeadImgUrl == null ? url1 : this.top3Data[2].agentHeadImgUrl" style="width: 85%; border-radius: 50%" />
</div>
<div class="personal_third">
<p class="personal_third_p">{{top3Data[2].agentName}}</p>
<p class="personal_third_p">{{ top3Data[2].agentName }}</p>
</div>
</div>
<div class="imgContainer1_main_third_bottom">
<p class="imgContainer1_main_part_bottom_p">{{top3Data[2].managecom2}}{{top3Data[2].managecom3}}</p>
<p class="imgContainer1_main_part_bottom_p">{{top3Data[2].prem}}万元</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[2].managecom2 }}{{ top3Data[2].managecom3 }}</p>
<p class="imgContainer1_main_part_bottom_p">{{ top3Data[2].prem }}万元</p>
</div>
</div>
</div>
</div>
<div style="height:48vw;" v-if="dataType == 1 && top3Data.length == 0"></div>
<div style="height: 48vw" v-if="dataType == 1 && top3Data.length == 0"></div>
<div v-if="dataType == 2 && top3Data.length != 0" class="imgContainer2">
<div class="imgContainer2_main">
<div class="imgContainer2_main_second">
<div class="imgContainer2_main_second_content">
<p class="imgContainer2_main_part_bottom_p">{{top3Data[1].managecom2}}{{top3Data[1].managecom3}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[1].managecom4}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[1].prem}}万元</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].managecom2 }}{{ top3Data[1].managecom3 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].managecom4 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[1].prem }}万元</p>
</div>
</div>
<div class="imgContainer2_main_first">
<div class="imgContainer2_main_first_content">
<p class="imgContainer2_main_part_bottom_p">{{top3Data[0].managecom2}}{{top3Data[0].managecom3}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[0].managecom4}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[0].prem}}万元</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].managecom2 }}{{ top3Data[0].managecom3 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].managecom4 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[0].prem }}万元</p>
</div>
</div>
<div class="imgContainer2_main_third">
<div class="imgContainer2_main_third_content">
<p class="imgContainer2_main_part_bottom_p">{{top3Data[2].managecom2}}{{top3Data[2].managecom3}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[2].managecom4}}</p>
<p class="imgContainer2_main_part_bottom_p">{{top3Data[2].prem}}万元</p>
<div class="imgContainer2_main_third_content">
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].managecom2 }}{{ top3Data[2].managecom3 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].managecom4 }}</p>
<p class="imgContainer2_main_part_bottom_p">{{ top3Data[2].prem }}万元</p>
</div>
</div>
</div>
</div>
<div style="height:48vw;" v-if="dataType == 2 && top3Data.length == 0"></div>
<div style="height: 48vw" v-if="dataType == 2 && top3Data.length == 0"></div>
<div v-if="dataType == 1" class="tableContent">
<div class="tableContent_main" >
<div class="tableContent_main">
<table class="issueTable">
<tr class="issueTable_tr">
<th style="width: 16%;">排名</th>
<th style="width: 16%;">分公司</th>
<th style="width: 16%;">机构</th>
<th style="width: 20%;">营业部</th>
<th style="width: 16%;">姓名</th>
<th style="width: 16%;">保费</th>
<th style="width: 16%">排名</th>
<th style="width: 16%">分公司</th>
<th style="width: 16%">机构</th>
<th style="width: 20%">营业部</th>
<th style="width: 16%">姓名</th>
<th style="width: 16%">保费</th>
</tr>
<tbody>
<tr v-for="item in tableData">
<td>TOP{{item.bfpm}}</td>
<td>{{item.managecom2}}</td>
<td>{{item.managecom3}}</td>
<td>{{item.managecom4}}</td>
<td>{{item.agentName}}</td>
<td>{{item.prem}}万</td>
<td>TOP{{ item.bfpm }}</td>
<td>{{ item.managecom2 }}</td>
<td>{{ item.managecom3 }}</td>
<td>{{ item.managecom4 }}</td>
<td>{{ item.agentName }}</td>
<td>{{ item.prem }}万</td>
</tr>
</tbody>
</table>
<div v-if="tableData.length == 0" class="noneDataDiv">
<img style="width:60%" src="@/assets/YB_APP/images/43.png">
<img style="width: 60%" src="@/assets/YB_APP/images/43.png" />
<span class="noneDataDiv_span">暂无业绩</span>
</div>
</div>
</div>
<div v-if="dataType == 2" class="tableContent">
<div v-if="dataType == 2" class="tableContent">
<div class="tableContent_main">
<table class="issueTable">
<tr class="issueTable_tr">
<th style="width: 19%;">排名</th>
<th style="width: 19%;">分公司</th>
<th style="width: 19%;">机构</th>
<th style="width: 24%;">营业部</th>
<th style="width: 19%;">保费</th>
<tr class="issueTable_tr">
<th style="width: 19%">排名</th>
<th style="width: 19%">分公司</th>
<th style="width: 19%">机构</th>
<th style="width: 24%">营业部</th>
<th style="width: 19%">保费</th>
</tr>
<tbody>
<tr v-if="tableData.length!=0" v-for="item in tableData">
<td>TOP{{item.bfpm}}</td>
<td>{{item.managecom2}}</td>
<td>{{item.managecom3}}</td>
<td>{{item.managecom4}}</td>
<td>{{item.prem}}万</td>
<tr v-if="tableData.length != 0" v-for="item in tableData">
<td>TOP{{ item.bfpm }}</td>
<td>{{ item.managecom2 }}</td>
<td>{{ item.managecom3 }}</td>
<td>{{ item.managecom4 }}</td>
<td>{{ item.prem }}万</td>
</tr>
</tbody>
</table>
<div v-if="tableData.length == 0" class="noneDataDiv">
<img style="width:60%" src="@/assets/YB_APP/images/43.png">
<img style="width: 60%" src="@/assets/YB_APP/images/43.png" />
<span class="noneDataDiv_span">暂无业绩</span>
</div>
</div>
@@ -167,296 +170,462 @@
</template>
<script>
import { Button } from 'vant'
import { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
import utils from '@/assets/js/utils/date-utils'
export default {
name: 'hitTheHeadlines',
components: {
[Button.name]: Button,
},
data() {
return {
premType:'QJ',
dataType:1,
calendarValue:'',
calendarShow:false,
currentDate:new Date(),
minDate: new Date(2019, 1, 1),
maxDate: new Date(2030, 12, 31),
top3Data:[],
tableData:[],
}
},
mounted(){
let yearNum = new Date().getFullYear()
let monthNum = new Date().getMonth()+1
if(monthNum < 10){
monthNum = '0' + monthNum
import { Button } from 'vant'
import { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
import utils from '@/assets/js/utils/date-utils'
export default {
name: 'hitTheHeadlines',
components: {
[Button.name]: Button
},
data() {
return {
premType: 'QJ',
dataType: 1,
calendarValue: '',
calendarShow: false,
currentDate: new Date(),
minDate: new Date(2019, 1, 1),
maxDate: new Date(2030, 12, 31),
top3Data: [],
tableData: [],
url1: require('@/assets/YB_APP/images/logo.png')
}
this.calendarValue = yearNum+'-'+monthNum
},
mounted() {
let yearNum = new Date().getFullYear()
let monthNum = new Date().getMonth() + 1
if (monthNum < 10) {
monthNum = '0' + monthNum
}
this.calendarValue = yearNum + '-' + monthNum
if(this.dataType == 1){
if (this.dataType == 1) {
this.getPersonPremYB()
} else {
this.getDeptPremYB()
}
},
methods: {
clickCalendar() {
this.calendarShow = true
},
handleCurrentDateCancel() {
this.calendarShow = false
},
handleCurrentDateConfirm(e) {
this.calendarShow = false
// let titleTime = utils.formatDate(e, 'yyyy-MM')
// this.calendarValue = utils.formatDate(e, 'MM-dd')
let yearNum = utils.formatDate(e, 'yyyy')
let monthNum = utils.formatDate(e, 'MM')
this.calendarValue = yearNum + '-' + monthNum
if (this.dataType == 1) {
this.getPersonPremYB()
}else{
} else {
this.getDeptPremYB()
}
},
methods:{
clickCalendar(){
this.calendarShow = true
},
handleCurrentDateCancel() {
this.calendarShow = false
},
handleCurrentDateConfirm(e) {
this.calendarShow = false
// let titleTime = utils.formatDate(e, 'yyyy-MM')
// this.calendarValue = utils.formatDate(e, 'MM-dd')
let yearNum = utils.formatDate(e, 'yyyy')
let monthNum = utils.formatDate(e, 'MM')
this.calendarValue = yearNum+'-'+monthNum
if(this.dataType == 1){
getPersonPremYB() {
let params = {
currentMonth: this.calendarValue,
premType: this.premType
}
getPersonPremYB(params).then((res) => {
if (res.result == 0) {
if (res.content && res.content.length != 0) {
this.top3Data = []
this.tableData = []
res.content.forEach((item, index) => {
if (index < 3) {
this.top3Data.push(item)
} else {
this.tableData.push(item)
}
})
}
} else {
this.$toast(res.resultMessage)
}
})
},
getDeptPremYB() {
let params = {
currentMonth: this.calendarValue,
premType: this.premType
}
getDeptPremYB(params).then((res) => {
if (res.result == 0) {
if (res.content && res.content.length != 0) {
this.top3Data = []
this.tableData = []
res.content.forEach((item, index) => {
if (index < 3) {
this.top3Data.push(item)
} else {
this.tableData.push(item)
}
})
}
} else {
this.$toast(res.resultMessage)
}
})
},
changePremType(type) {
console.log(this.top3Data, 'this.tableData')
if (this.premType != type) {
this.premType = type
if (this.dataType == 1) {
this.getPersonPremYB()
}else{
} else {
this.getDeptPremYB()
}
},
getPersonPremYB(){
let params = {
currentMonth:this.calendarValue,
premType:this.premType,
}
getPersonPremYB(params).then(res=>{
if(res.result == 0){
if(res.content && res.content.length != 0){
this.top3Data = []
this.tableData = []
res.content.forEach((item,index)=>{
if(index < 3){
this.top3Data.push(item)
}else{
this.tableData.push(item)
}
})
}
}else{
this.$toast(res.resultMessage)
}
})
},
getDeptPremYB(){
let params = {
currentMonth:this.calendarValue,
premType:this.premType,
}
getDeptPremYB(params).then(res=>{
if(res.result == 0){
if(res.content && res.content.length != 0){
this.top3Data = []
this.tableData = []
res.content.forEach((item,index)=>{
if(index < 3){
this.top3Data.push(item)
}else{
this.tableData.push(item)
}
})
}
}else{
this.$toast(res.resultMessage)
}
})
},
changePremType(type){
if(this.premType != type){
this.premType = type
if(this.dataType == 1){
this.getPersonPremYB()
}else{
this.getDeptPremYB()
}
}
},
changeDataType(type){
if(this.dataType != type){
this.dataType = type
if(this.dataType == 1){
this.getPersonPremYB()
}else{
this.getDeptPremYB()
}
}
},
}
},
changeDataType(type) {
if (this.dataType != type) {
this.dataType = type
if (this.dataType == 1) {
this.getPersonPremYB()
} else {
this.getDeptPremYB()
}
}
}
}
}
</script>
<style lang="scss" scoped>
.mainContainer{
background-image: url("../../assets/YB_APP/images/9.png");
background-repeat: no-repeat;
background-size: contain;
margin: 10px;width: calc(100% - 20px);background-color:#fff;
}
.imgContainer1{
background-image: url("../../assets/YB_APP/images/11.png");
background-repeat: no-repeat;
background-size: contain;
height:48vw;width: 100%;margin-top: 10.7vw;display: flex;align-items: flex-end;
}
.imgContainer2{
background-image: url("../../assets/YB_APP/images/32.png");
background-repeat: no-repeat;
background-size: contain;
height:48vw;width: 100%;margin-top: 10.7vw;display: flex;align-items: flex-end;
}
.personal_second{
background-image: url("../../assets/YB_APP/images/22.png");
background-repeat: no-repeat;
background-size: cover;
position:absolute;bottom: -5px;height: 19px;width: 60%;left: 20%;display: flex;justify-content: center;align-items: center;
}
.personal_first{
background-image: url("../../assets/YB_APP/images/23.png");
background-repeat: no-repeat;
background-size: cover;
position:absolute;bottom: -5px;height: 19px;width: 70%;left: 15%;display: flex;justify-content: center;align-items: center;
}
.personal_third{
background-image: url("../../assets/YB_APP/images/24.png");
background-repeat: no-repeat;
background-size: cover;
position:absolute;bottom: -5px;height: 19px;width: 60%;left: 20%;display: flex;justify-content: center;align-items: center;
}
th{
height: 45px;
color: #fff;
}
.mainContainer {
background-image: url('../../assets/YB_APP/images/9.png');
background-repeat: no-repeat;
background-size: contain;
margin: 10px;
width: calc(100% - 20px);
background-color: #fff;
}
.imgContainer1 {
background-image: url('../../assets/YB_APP/images/11.png');
background-repeat: no-repeat;
background-size: contain;
height: 48vw;
width: 100%;
margin-top: 10.7vw;
display: flex;
align-items: flex-end;
}
.imgContainer2 {
background-image: url('../../assets/YB_APP/images/32.png');
background-repeat: no-repeat;
background-size: contain;
height: 48vw;
width: 100%;
margin-top: 10.7vw;
display: flex;
align-items: flex-end;
}
.personal_second {
background-image: url('../../assets/YB_APP/images/22.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: -5px;
height: 19px;
width: 60%;
left: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.personal_first {
background-image: url('../../assets/YB_APP/images/23.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: -5px;
height: 19px;
width: 70%;
left: 15%;
display: flex;
justify-content: center;
align-items: center;
}
.personal_third {
background-image: url('../../assets/YB_APP/images/24.png');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: -5px;
height: 19px;
width: 60%;
left: 20%;
display: flex;
justify-content: center;
align-items: center;
}
th {
height: 45px;
color: #fff;
}
table tbody tr:nth-child(odd){
background: #fff;
}
table tbody tr:nth-child(even){
background: #f9faff;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
.issueTable{
border: 1px solid #ebedff;
border-collapse:collapse;
width:100%;
}
td{
text-align: center;
padding: 5px 0px;
line-height: 25px;
color: #7183b3;
border-collapse:collapse;
}
.myhead{
display:flex;justify-content: space-between;padding: 25px 15px;background: #fff;
}
.QJactive{
background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;
}
.GMunActice{
background:#fff;color: #c1bfce;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;border-left: 1px solid #3949ac;
}
.QJunActice{
background:#fff;color: #c1bfce;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;border-right: 1px solid #3949ac;
}
.GMactive{
background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;
}
.headDate{
background:#f2f2f2;font-weight: bold;padding: 8px 15px;border-radius: 15px;font-size: 12px;
}
.mainContainer_content{
padding-top:100px;margin-left: 10px;
}
.dataType1Active{
background:#fff;color: #3949ac;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: none;letter-spacing: 1px;
}
.dataType1UnActive{
background:#6990d0;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: none;letter-spacing: 1px;
}
.dataType2Active{
background:#6990d0;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-left: none;letter-spacing: 1px;
}
.dataType2UnActive{
background:#fff;color: #3949ac;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-left: none;letter-spacing: 1px;
}
.imgContainer1_main,.imgContainer2_main{
display:flex;justify-content: center;align-items: flex-end;height:100%;padding-bottom:20px;width:100%;
}
.imgContainer1_main_second,.imgContainer2_main_second{
width:35%;text-align: center;
}
.imgContainer1_main_first,.imgContainer2_main_first{
width:30%;text-align: center;
}
.imgContainer1_main_third,.imgContainer2_main_third{
width:35%;text-align: center;
}
.imgContainer1_main_part_top{
width:100%;position: relative;
}
.imgContainer1_main_second_bottom{
margin:10px;font-size: 12px;margin-bottom: 5px;color:#777ca4;
}
.imgContainer1_main_first_bottom{
margin:10px;font-size: 14px;margin-bottom: 5px;color:#9a4904;
}
.imgContainer1_main_third_bottom{
margin:10px;font-size: 12px;margin-bottom: 5px;color:#aa7853;
}
.imgContainer1_main_part_bottom_p{
line-height:18px;
}
.imgContainer2_main_second_content{
margin:10px 0px 0px;font-size: 12px;color:#777ca4;
}
.imgContainer2_main_first_content{
margin:10px 0px 0px;font-size: 14px;color:#9a4904;
}
.imgContainer2_main_third_content{
margin:10px 0px 0px;font-size: 12px;color:#aa7853;
}
.imgContainer2_main_part_bottom_p{
line-height:16px;
}
.imgContainer1_main_second_top_div{
width:40%;position:absolute;top:calc(50% - 15px);left:calc(50% - 24px);
}
.personal_second_p{
font-size:12px;color:#4a5688;font-weight:bold;
}
.personal_first_p{
font-size:14px;color:#8e5528;font-weight:bold;
}
.personal_third_p{
font-size:12px;color:#58320b;font-weight:bold;
}
.imgContainer1_main_first_top_div{
width:65%;position:absolute;top:calc(50% - 23px);left:calc(50% - 35px);
}
.imgContainer1_main_third_top_div{
width:40%;position:absolute;top:calc(50% - 15px);left:calc(50% - 24px);
}
.tableContent{
border-radius: 5px;font-size:14px;padding-bottom:20px;
}
.tableContent_main{
margin-top: 15px;border-radius: 10px;overflow: hidden;width: 100%;
}
.issueTable_tr{
background:#4d6cc4;width: 100%;
}
.noneDataDiv{
display:flex;justify-content:center;align-items:center;height:300px;position:relative;width:100%;
}
.noneDataDiv_span{
position:absolute;bottom:80px;left:calc(50% - 33px);
}
table tbody tr:nth-child(odd) {
background: #fff;
}
table tbody tr:nth-child(even) {
background: #f9faff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.issueTable {
border: 1px solid #ebedff;
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
padding: 5px 0px;
line-height: 25px;
color: #7183b3;
border-collapse: collapse;
}
.myhead {
display: flex;
justify-content: space-between;
padding: 25px 15px;
background: #fff;
}
.QJactive {
background: #3949ac;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #3949ac;
border-right: none;
letter-spacing: 1px;
}
.GMunActice {
background: #fff;
color: #c1bfce;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #3949ac;
border-right: none;
letter-spacing: 1px;
border-left: 1px solid #3949ac;
}
.QJunActice {
background: #fff;
color: #c1bfce;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #3949ac;
border-left: none;
letter-spacing: 1px;
border-right: 1px solid #3949ac;
}
.GMactive {
background: #3949ac;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #3949ac;
border-left: none;
letter-spacing: 1px;
}
.headDate {
background: #f2f2f2;
font-weight: bold;
padding: 8px 15px;
border-radius: 15px;
font-size: 12px;
}
.mainContainer_content {
padding-top: 100px;
margin-left: 10px;
}
.dataType1Active {
background: #fff;
color: #3949ac;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: none;
letter-spacing: 1px;
}
.dataType1UnActive {
background: #6990d0;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: none;
letter-spacing: 1px;
}
.dataType2Active {
background: #6990d0;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: none;
letter-spacing: 1px;
}
.dataType2UnActive {
background: #fff;
color: #3949ac;
font-weight: bold;
font-size: 12px;
padding: 10px 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: none;
letter-spacing: 1px;
}
.imgContainer1_main,
.imgContainer2_main {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
padding-bottom: 20px;
width: 100%;
}
.imgContainer1_main_second,
.imgContainer2_main_second {
width: 35%;
text-align: center;
}
.imgContainer1_main_first,
.imgContainer2_main_first {
width: 30%;
text-align: center;
}
.imgContainer1_main_third,
.imgContainer2_main_third {
width: 35%;
text-align: center;
}
.imgContainer1_main_part_top {
width: 100%;
position: relative;
}
.imgContainer1_main_second_bottom {
margin: 10px;
font-size: 12px;
margin-bottom: 5px;
color: #777ca4;
}
.imgContainer1_main_first_bottom {
margin: 10px;
font-size: 14px;
margin-bottom: 5px;
color: #9a4904;
}
.imgContainer1_main_third_bottom {
margin: 10px;
font-size: 12px;
margin-bottom: 5px;
color: #aa7853;
}
.imgContainer1_main_part_bottom_p {
line-height: 18px;
}
.imgContainer2_main_second_content {
margin: 10px 0px 0px;
font-size: 12px;
color: #777ca4;
}
.imgContainer2_main_first_content {
margin: 10px 0px 0px;
font-size: 14px;
color: #9a4904;
}
.imgContainer2_main_third_content {
margin: 10px 0px 0px;
font-size: 12px;
color: #aa7853;
}
.imgContainer2_main_part_bottom_p {
line-height: 16px;
}
.imgContainer1_main_second_top_div {
width: 40%;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 24px);
}
.personal_second_p {
font-size: 12px;
color: #4a5688;
font-weight: bold;
}
.personal_first_p {
font-size: 14px;
color: #8e5528;
font-weight: bold;
}
.personal_third_p {
font-size: 12px;
color: #58320b;
font-weight: bold;
}
.imgContainer1_main_first_top_div {
width: 65%;
position: absolute;
top: calc(50% - 23px);
left: calc(50% - 35px);
}
.imgContainer1_main_third_top_div {
width: 40%;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 24px);
}
.tableContent {
border-radius: 5px;
font-size: 14px;
padding-bottom: 20px;
}
.tableContent_main {
margin-top: 15px;
border-radius: 10px;
overflow: hidden;
width: 100%;
}
.issueTable_tr {
background: #4d6cc4;
width: 100%;
}
.noneDataDiv {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
position: relative;
width: 100%;
}
.noneDataDiv_span {
position: absolute;
bottom: 80px;
left: calc(50% - 33px);
}
</style>