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

项目详情样式细调

Browse Source
This commit is contained in:
liu.xiaofeng@ebiz-digits.com
2024-02-23 16:34:03 +08:00
parent fbe59da7fa
commit 07dc5fa96e
1 changed files with 100 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/GBC/projectDetail.vue
View File

@@ -5,102 +5,103 @@
<van-tab title="数据看板" name="dataBoard"></van-tab>
<van-tab title="产品列表" name="productList"></van-tab>
</van-tabs>
<div v-if="tabActive == 'customerList'">
<div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
<div style="width: 30%;">
<van-dropdown-menu :overlay="dropdownmenuoverlay">
<van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
</van-dropdown-menu>
</div>
<van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
<div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
<div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
<van-icon name="notes-o" />
<span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
<span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
<div style="height: calc(100vh - 50px);overflow: auto;">
<div v-if="tabActive == 'customerList'">
<div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
<div style="width: 30%;">
<van-dropdown-menu :overlay="dropdownmenuoverlay">
<van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
</van-dropdown-menu>
</div>
<span style="margin: 0px 5px;font-size: 14px;">至</span>
<div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
<van-icon name="notes-o" />
<span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
<span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
</div>
</div>
</div>
<div style="padding: 0px 10px 10px;">
<div v-for="(item,index) in customerList" :key="index">
<div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
<div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
<div style="width: 55%;overflow: hidden;white-space: nowrap;">
<p>客户姓名：{{item.appntName}}</p>
<p>手机号码：{{item.mobile}}</p>
<p>服务组长：{{item.teamLeader}}</p>
</div>
<div style="width: 45%;overflow: hidden;white-space: nowrap;">
<p>部门/科室：{{item.departmentName}}</p>
<p>承保保单：{{item.contSize}}份</p>
<p>服务组员：{{item.teamMember}}</p>
</div>
<van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
<div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
<div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
<van-icon name="notes-o" />
<span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
<span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
</div>
<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
<van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
<span style="margin: 0px 5px;font-size: 14px;">至</span>
<div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
<van-icon name="notes-o" />
<span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
<span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
</div>
</div>
</div>
<div style="padding: 0px 10px 10px;">
<div v-for="(item,index) in customerList" :key="index">
<div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
<div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
<div style="width: 55%;overflow: hidden;white-space: nowrap;">
<p>客户姓名：{{item.appntName}}</p>
<p>手机号码：{{item.mobile}}</p>
<p>服务组长：{{item.teamLeader}}</p>
</div>
<div style="width: 45%;overflow: hidden;white-space: nowrap;">
<p>部门/科室：{{item.departmentName}}</p>
<p>承保保单：{{item.contSize}}份</p>
<p>服务组员：{{item.teamMember}}</p>
</div>
</div>
<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
<van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="tabActive == 'dataBoard'">
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目名称：国富人寿北京协和医院AA项目</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
<div style="display: flex;justify-content: center;margin-top: 20px;">
<van-circle v-model="currentRate" color="#E9332E" :stroke-width="60" size="80px" :rate="85" :speed="100" :text="text" />
</div>
<p style="display: flex;justify-content: center;font-weight: bold;font-size: 14px;margin: 10px;">面谈转化率</p>
<div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
<div v-for="(item,index) in dataList1" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
<div>
<div style="font-size: 12px;line-height: 22px;margin: 7px 0px;">
<p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
<p style="display: flex;justify-content: center;align-items: center;">
<span class="colorBlock" :style="{background:colorList[index]}"></span>
{{item.name}}
</p>
</div>
</div>
<!-- <div v-if="(index + 1) % 3 != 0 || index < 2" style="width: 1px;background: #FFC9AF;height: 60%;"></div>-->
</div>
</div>
</div>
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
<div v-if="tabActive == 'dataBoard'">
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目名称：国富人寿北京协和医院AA项目</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 18%;display: flex;justify-content: center;">成员</span>
<span style="width: 22%;display: flex;justify-content: center;">角色</span>
<span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
<span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
</div>
<div>
<div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
<div style="display: flex;justify-content: center;margin-top: 20px;">
<van-circle v-model="currentRate" color="#E9332E" :stroke-width="60" size="80px" :rate="85" :speed="100" :text="text" />
</div>
<p style="display: flex;justify-content: center;font-weight: bold;font-size: 14px;margin: 10px;">面谈转化率</p>
<div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
<div v-for="(item,index) in dataList1" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
<div>
<div style="font-size: 12px;line-height: 22px;margin: 7px 0px;">
<p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
<p style="display: flex;justify-content: center;align-items: center;">
<span class="colorBlock" :style="{background:colorList[index]}"></span>
{{item.name}}
</p>
</div>
</div>
<!-- <div v-if="(index + 1) % 3 != 0 || index < 2" style="width: 1px;background: #FFC9AF;height: 60%;"></div>-->
</div>
</div>
</div>
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 18%;display: flex;justify-content: center;">成员</span>
<span style="width: 22%;display: flex;justify-content: center;">角色</span>
<span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
<span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
</div>
<div>
<div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
</div>
</div>
</div>
</div>
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="overflow: auto;">
<table cellspacing=0 style="margin-top: 10px;">
<thead style="background: rgba(255, 87, 83, 0.7);color: #fff;">
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="overflow: auto;">
<table cellspacing=0 style="margin-top: 10px;">
<thead style="background: rgba(255, 87, 83, 0.7);color: #fff;">
<tr class="theadClass">
<th>小组</th>
<th>组长</th>
@@ -120,8 +121,8 @@
<th>重疾标保(元)</th>
<th>重疾件均(元)</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr class="tbodyClass">
<td colspan="2">项目合并</td>
<td>.00</td>
@@ -159,17 +160,18 @@
<td>{{item.name}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div v-if="tabActive == 'productList'">
<div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
<img :src="item.productImageUrl" style="display: inline-block;width: 35%;border-radius: 5px;"/>
<div style="display: inline-block;width: 65%;padding-left: 10px;">
<p style="font-size: 16px;">{{item.productName}}</p>
<p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
<div v-if="tabActive == 'productList'">
<div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
<img :src="item.productImageUrl" style="display: inline-block;width: 35%;border-radius: 5px;"/>
<div style="display: inline-block;width: 65%;padding-left: 10px;">
<p style="font-size: 16px;">{{item.productName}}</p>
<p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
</div>
</div>
</div>
</div>
@@ -434,6 +436,7 @@ export default {
/*color: #fff;*/
td{
text-align: center;
border-bottom:1px solid #fff;
}
}
</style>