【银保app】新增上头条页面 首页轮播图跳转修改
@@ -33,3 +33,18 @@ export function timelyContYB(data) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getPersonPremYB(data) {
|
||||||
|
return request({
|
||||||
|
url: getUrl('/data/congratulationTopYB/getPersonPremYB', 1,3),
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDeptPremYB(data) {
|
||||||
|
return request({
|
||||||
|
url: getUrl('/data/congratulationTopYB/getDeptPremYB', 1,3),
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
BIN
src/assets/YB_APP/images/11.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/YB_APP/images/17.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/YB_APP/images/18.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/YB_APP/images/19.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/YB_APP/images/22.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/YB_APP/images/23.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/YB_APP/images/24.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/YB_APP/images/32.png
Normal file
|
After Width: | Height: | Size: 299 KiB |
BIN
src/assets/YB_APP/images/9.png
Normal file
|
After Width: | Height: | Size: 439 KiB |
@@ -5,6 +5,7 @@ const YB_APP_mine = () => import('@/views/YB_APP/mine')
|
|||||||
const YB_APP_performanceQuery = () => import('@/views/YB_APP/performanceQuery')
|
const YB_APP_performanceQuery = () => import('@/views/YB_APP/performanceQuery')
|
||||||
const YB_APP_policyList = () => import('@/views/YB_APP/policyList')
|
const YB_APP_policyList = () => import('@/views/YB_APP/policyList')
|
||||||
const YB_APP_policyDetail = () => import('@/views/YB_APP/policyDetail')
|
const YB_APP_policyDetail = () => import('@/views/YB_APP/policyDetail')
|
||||||
|
const YB_APP_hitTheHeadlines = () => import('@/views/YB_APP/hitTheHeadlines')
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
@@ -61,4 +62,13 @@ export default [
|
|||||||
index: 1
|
index: 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/YB_APP/hitTheHeadlines',
|
||||||
|
name: 'YB_APP_hitTheHeadlines',
|
||||||
|
component: YB_APP_hitTheHeadlines,
|
||||||
|
meta: {
|
||||||
|
title: '上头条',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
425
src/views/YB_APP/hitTheHeadlines.vue
Normal file
@@ -0,0 +1,425 @@
|
|||||||
|
<template>
|
||||||
|
<div class="public_container">
|
||||||
|
<div class="myhead">
|
||||||
|
<div>
|
||||||
|
<span class="QJactive" v-if="premType == 'QJ'" @click="changePremType('QJ')">期交保费</span>
|
||||||
|
<span class="GMunActice" v-if="premType == 'GM'" @click="changePremType('QJ')">期交保费</span>
|
||||||
|
<span class="QJunActice" v-if="premType == 'QJ'" @click="changePremType('GM')">总规模保费</span>
|
||||||
|
<span class="GMactive" v-if="premType == 'GM'" @click="changePremType('GM')">总规模保费</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="headDate">2022-09 ▼</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mainContainer">
|
||||||
|
<div class="mainContainer_content">
|
||||||
|
<span class="dataType1Active" v-if="dataType == 1" @click="changeDataType('1')">个人</span>
|
||||||
|
<span class="dataType1UnActive" v-if="dataType == 2" @click="changeDataType('1')">个人</span>
|
||||||
|
<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%;">
|
||||||
|
<div class="imgContainer1_main_second_top_div">
|
||||||
|
<img src="@/assets/YB_APP/images/25.png" style="width:100%;">
|
||||||
|
</div>
|
||||||
|
<div class="personal_second">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="imgContainer1_main_first">
|
||||||
|
<div class="imgContainer1_main_part_top">
|
||||||
|
<img src="@/assets/YB_APP/images/18.png" style="width:65%;">
|
||||||
|
<div class="imgContainer1_main_first_top_div">
|
||||||
|
<img src="@/assets/YB_APP/images/25.png" style="width:100%;">
|
||||||
|
</div>
|
||||||
|
<div class="personal_first">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="imgContainer1_main_third">
|
||||||
|
<div class="imgContainer1_main_part_top">
|
||||||
|
<img src="@/assets/YB_APP/images/19.png" style="width:40%;">
|
||||||
|
<div class="imgContainer1_main_third_top_div">
|
||||||
|
<img src="@/assets/YB_APP/images/25.png" style="width:100%;">
|
||||||
|
</div>
|
||||||
|
<div class="personal_third">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="dataType == 1" class="tableContent">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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.prem}}万</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Button } from 'vant'
|
||||||
|
import { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
|
||||||
|
export default {
|
||||||
|
name: 'hitTheHeadlines',
|
||||||
|
components: {
|
||||||
|
[Button.name]: Button,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
premType:'QJ',
|
||||||
|
dataType:1,
|
||||||
|
top3Data:[],
|
||||||
|
tableData:[
|
||||||
|
{acceptTime:'TOP1',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP2',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'王豆豆',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP3',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'赵倩',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP4',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP5',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP6',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP7',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP8',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP9',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP10',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP11',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP12',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP13',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP14',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP15',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP16',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP17',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP18',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP19',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
{acceptTime:'TOP20',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
if(this.dataType == 1){
|
||||||
|
this.getPersonPremYB()
|
||||||
|
}else{
|
||||||
|
this.getDeptPremYB()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getPersonPremYB(){
|
||||||
|
let params = {
|
||||||
|
currentMonth:'2022-10',
|
||||||
|
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:'2022-10',
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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% - 19px);left:calc(50% - 25px);
|
||||||
|
}
|
||||||
|
.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% - 28px);left:calc(50% - 35px);
|
||||||
|
}
|
||||||
|
.imgContainer1_main_third_top_div{
|
||||||
|
width:40%;position:absolute;top:calc(50% - 19px);left:calc(50% - 25px);
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -34,7 +34,6 @@
|
|||||||
<span @click="clickCalendar" style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
|
<span @click="clickCalendar" style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
|
||||||
{{calendarValue}}
|
{{calendarValue}}
|
||||||
</span>
|
</span>
|
||||||
<!-- <van-calendar v-model:show="calendarShow" @confirm="calendarOnConfirm" :min-date="minDate"/> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin:15px 0px;">
|
<div style="margin:15px 0px;">
|
||||||
@@ -136,6 +135,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activePersonalType == '1' && ebizPremRankGMList.length == 0">
|
||||||
|
<img style="width:100%;" src="@/assets/YB_APP/images/7.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="activePersonalType == '2' && ebizPremRankQJList.length != 0">
|
<div v-if="activePersonalType == '2' && ebizPremRankQJList.length != 0">
|
||||||
<div style="display: flex;align-items: center;font-size:12px;">
|
<div style="display: flex;align-items: center;font-size:12px;">
|
||||||
<div style="width: 100px;">
|
<div style="width: 100px;">
|
||||||
@@ -227,6 +230,10 @@
|
|||||||
<div v-bind:class="{ 'colorThree': ebizPremRankQJList[4].prem <= 5, 'colorTwo': ebizPremRankQJList[4].prem > 5, 'colorOne': ebizPremRankQJList[4].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[4].prem}}万</div>
|
<div v-bind:class="{ 'colorThree': ebizPremRankQJList[4].prem <= 5, 'colorTwo': ebizPremRankQJList[4].prem > 5, 'colorOne': ebizPremRankQJList[4].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[4].prem}}万</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="activePersonalType == '2' && ebizPremRankQJList.length == 0">
|
||||||
|
<img style="width:100%;" src="@/assets/YB_APP/images/7.png">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;margin-bottom: 20px;">
|
<div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;margin-bottom: 20px;">
|
||||||
@@ -264,15 +271,26 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<van-popup v-model="calendarShow" position="bottom">
|
||||||
|
<van-datetime-picker
|
||||||
|
v-model="currentDate"
|
||||||
|
type="month-day"
|
||||||
|
title="选择月日"
|
||||||
|
:min-date="minDate"
|
||||||
|
:max-date="maxDate"
|
||||||
|
:formatter="formatter"
|
||||||
|
/>
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { homeConfigYB, getPremRankList, timelyContYB } from '@/api/YB_APP/index'
|
import { homeConfigYB, getPremRankList, timelyContYB } from '@/api/YB_APP/index'
|
||||||
import { Swipe, SwipeItem, NoticeBar, Icon } from 'vant'
|
import { Swipe, SwipeItem, NoticeBar, Icon, Popup, DatetimePicker } from 'vant'
|
||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
import png8 from '@/assets/YB_APP/images/8.png';
|
import png8 from '@/assets/YB_APP/images/8.png';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
components: {
|
components: {
|
||||||
@@ -280,11 +298,22 @@ export default {
|
|||||||
[SwipeItem.name]: SwipeItem,
|
[SwipeItem.name]: SwipeItem,
|
||||||
[NoticeBar.name]: NoticeBar,
|
[NoticeBar.name]: NoticeBar,
|
||||||
[Icon.name]: Icon,
|
[Icon.name]: Icon,
|
||||||
// [Calendar.name]: Calendar,
|
[Popup.name]: Popup,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
const formatter = (type, val) => {
|
||||||
|
if (type === 'year') {
|
||||||
|
return `${val}年`;
|
||||||
|
}
|
||||||
|
if (type === 'month') {
|
||||||
|
return `${val}月`;
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
config,
|
config,
|
||||||
|
currentDate:'',
|
||||||
|
formatter,
|
||||||
marginTop:'80',
|
marginTop:'80',
|
||||||
getCodeValue:'',
|
getCodeValue:'',
|
||||||
png8,
|
png8,
|
||||||
@@ -295,7 +324,8 @@ export default {
|
|||||||
tableData:[],
|
tableData:[],
|
||||||
activePersonalType:'1',
|
activePersonalType:'1',
|
||||||
calendarShow:false,
|
calendarShow:false,
|
||||||
minDate: new Date(2010, 0, 1),
|
minDate: new Date(2019, 1, 1),
|
||||||
|
maxDate: new Date(2030, 12, 31),
|
||||||
calendarValue:'9月27日',
|
calendarValue:'9月27日',
|
||||||
colorOne:false,
|
colorOne:false,
|
||||||
colorTwo:false,
|
colorTwo:false,
|
||||||
@@ -427,6 +457,18 @@ export default {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(data.title == '上头条'){
|
||||||
|
this.$jump({
|
||||||
|
flag: 'h5',
|
||||||
|
extra: {
|
||||||
|
url: location.origin + '/#/YB_APP/hitTheHeadlines',
|
||||||
|
},
|
||||||
|
routerInfo: {
|
||||||
|
path: '/YB_APP/hitTheHeadlines',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
touchstart(){
|
touchstart(){
|
||||||
this.clickFlag = true
|
this.clickFlag = true
|
||||||
@@ -435,15 +477,18 @@ export default {
|
|||||||
this.clickFlag = false
|
this.clickFlag = false
|
||||||
},
|
},
|
||||||
touchend(data){
|
touchend(data){
|
||||||
if(this.clickFlag){
|
let dataURL = JSON.parse(data.route).extra.url
|
||||||
window.location.href = JSON.parse(data.route).extra.url
|
if(dataURL){
|
||||||
}else{
|
let thisRoute = dataURL.slice(dataURL.lastIndexOf("/#")+2)
|
||||||
|
this.$jump({
|
||||||
}
|
flag: 'h5',
|
||||||
|
extra: {
|
||||||
|
url: location.origin + '/#'+ thisRoute,
|
||||||
},
|
},
|
||||||
swiperJump(data){
|
routerInfo: {
|
||||||
if(JSON.parse(data.route).extra.url){
|
path: thisRoute,
|
||||||
window.location.href = JSON.parse(data.route).extra.url
|
},
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||