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

Merge branch 'feature/开门红首页业绩表格' into dev

Browse Source
This commit is contained in:
mengxiaolong
2020-11-18 17:23:12 +08:00
parent 6f20d75ef8 3f0bfdb140
commit a4080b832d
1 changed files with 121 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/views/ebiz/product/HomeProduct.vue
View File

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