mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-23 04:06:45 +08:00
Merge branch 'feature/开门红首页业绩表格' into dev
This commit is contained in:
mengxiaolong
@@ -1,107 +1,138 @@
|
||||
<template>
|
||||
<div ref="product" class="home-product-container pb20">
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c" style="height: 30px;">
|
||||
<h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
|
||||
<span class="more fs13 c-gray-base" @click="checkZssqMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
||||
</div>
|
||||
<div class="home-product-pcenter">
|
||||
<div class="pcenter-list">
|
||||
<div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
|
||||
<div class="zssq zssq_1" @click="checkZssq">
|
||||
<p class="zssq_p1">人到中年</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
<!-- 非个险 -->
|
||||
<template v-if="!isGoodStart">
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c" style="height: 30px;">
|
||||
<h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
|
||||
<span class="more fs13 c-gray-base" @click="checkZssqMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
||||
</div>
|
||||
<div class="home-product-pcenter">
|
||||
<div class="pcenter-list">
|
||||
<div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
|
||||
<div class="zssq zssq_1" @click="checkZssq">
|
||||
<p class="zssq_p1">人到中年</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
<div class="zssq zssq_2" @click="checkZssq">
|
||||
<p class="zssq_p1">加班劳累</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zssq zssq_2" @click="checkZssq">
|
||||
<p class="zssq_p1">加班劳累</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
|
||||
<div class="zssq zssq_3" @click="checkZssq">
|
||||
<p class="zssq_p1">年金保障</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
<div class="zssq zssq_4" @click="checkZssq">
|
||||
<p class="zssq_p1">高危工种</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
<div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
|
||||
<div class="zssq zssq_3" @click="checkZssq">
|
||||
<p class="zssq_p1">年金保障</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
<div class="zssq zssq_4" @click="checkZssq">
|
||||
<p class="zssq_p1">高危工种</p>
|
||||
<p class="zssq_p2">是时候给自己填份保障了</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 10px;width: 100%;background-color: #f5f5f5;"></div>
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 30px;">
|
||||
<img class="title-img" :src="performance" />
|
||||
<div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
|
||||
<h3 class="center-title fs15 pl10 ml15" style="border-left: 4px solid red;">产品中心</h3>
|
||||
<span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
||||
</div>
|
||||
<div class="home-product-pcenter">
|
||||
<div class="pcenter-list mr20 mb10 ml15">
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_1.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0002')" />
|
||||
</div>
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_2.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0001')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-product-pcenter performance">
|
||||
<div class="pcenter-list">
|
||||
<table class="myTable" style="min-width: 140vw;" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<th>产品名称</th>
|
||||
<th>承保标保(万元)</th>
|
||||
<th>承保件数(件)</th>
|
||||
<th>保费占比(%)</th>
|
||||
</tr>
|
||||
<tr v-for="i in 5" :key="i * 100">
|
||||
<td>六六大顺营销 服务部门</td>
|
||||
<td>5000</td>
|
||||
<td>200</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<template v-for="i in 20">
|
||||
<tr v-if="idMoreDataShow" :key="i">
|
||||
</template>
|
||||
<!-- 个险 -->
|
||||
<template v-if="isGoodStart">
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 30px;">
|
||||
<img class="title-img" :src="performance" />
|
||||
</div>
|
||||
<div class="home-product-pcenter performance">
|
||||
<div class="pcenter-list">
|
||||
<table class="myTable" style="min-width: 140vw;" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<th>产品名称</th>
|
||||
<th>承保标保(万元)</th>
|
||||
<th>承保件数(件)</th>
|
||||
<th>保费占比(%)</th>
|
||||
</tr>
|
||||
<tr v-for="i in 5" :key="i * 100">
|
||||
<td>六六大顺营销 服务部门</td>
|
||||
<td>5000</td>
|
||||
<td>200</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<template v-for="i in 20">
|
||||
<tr v-if="idMoreDataShow" :key="i">
|
||||
<td>六六大顺营销 服务部门</td>
|
||||
<td>5000</td>
|
||||
<td>200</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
|
||||
<van-icon :class="{ arrowUp: idMoreDataShow }" color="#F65748" name="play" />
|
||||
<span>查看更多</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
|
||||
<van-icon :class="{ arrowUp: idMoreDataShow }" color="#F65748" name="play" />
|
||||
<span>查看更多</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 10px;width: 100%;background-color: #f5f5f5;"></div>
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
|
||||
<img class="title-img" :src="product" />
|
||||
<!-- <h3 class="center-title fs15 pl10 ml15" style="border-left: 4px solid red;">产品中心</h3> -->
|
||||
<span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
||||
</div>
|
||||
<div class="home-product-pcenter">
|
||||
<div class="pcenter-list mr20 mb10 ml15">
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_1.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0002')" />
|
||||
</div>
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_2.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0001')" />
|
||||
<div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
|
||||
<div class="home-product-content">
|
||||
<!-- 产品中心 -->
|
||||
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
|
||||
<img class="title-img" :src="product" />
|
||||
<span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
||||
</div>
|
||||
<div class="home-product-pcenter">
|
||||
<div class="pcenter-list mr20 mb10 ml15">
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_1.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0002')" />
|
||||
</div>
|
||||
<div class="pcenter-item text-center">
|
||||
<img src="../../../assets/images/home_cp_2.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0001')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import performance from '@/assets/images/goodStart/performanceIcon.png'
|
||||
import product from '@/assets/images/goodStart/product.png'
|
||||
import { getAgentInfo } from '@/api/ebiz/my/my'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
idMoreDataShow: false,
|
||||
performance,
|
||||
product
|
||||
product,
|
||||
isGoodStart: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAgentInfo()
|
||||
},
|
||||
methods: {
|
||||
async getAgentInfo() {
|
||||
const result = await getAgentInfo({})
|
||||
this.isGoodStart = result.showTemplate === 'KMH'
|
||||
},
|
||||
showMore() {
|
||||
this.idMoreDataShow = !this.idMoreDataShow
|
||||
this.$nextTick(() => {
|
||||
@@ -220,21 +251,25 @@ export default {
|
||||
.myTable {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.myTable td,
|
||||
.myTable th {
|
||||
padding: 10px 0;
|
||||
border-collapse: collapse;
|
||||
background-color: #fff3f1;
|
||||
color: #d84535;
|
||||
}
|
||||
|
||||
.myTable th {
|
||||
border: none;
|
||||
background: #ff8068;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
td,
|
||||
th {
|
||||
padding: 10px 0;
|
||||
background-color: #fff3f1;
|
||||
color: #d84535;
|
||||
}
|
||||
th {
|
||||
border: none;
|
||||
background: #ff8068;
|
||||
font-weight: normal;
|
||||
color: #ffffff;
|
||||
}
|
||||
tr {
|
||||
border-top: 2px solid #ffffff;
|
||||
}
|
||||
tr:first-child {
|
||||
border-bottom: 6px solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.performance {
|
||||
|
||||
Reference in New Issue
Block a user