Skip to content

Y
ydLife
Commit 95a02660 by Chao Sun
Options

首页样式修改

parent f09cefa9
Showing with 138 additions and 108 deletions
src/app/my/my-center-home/my-center-home.component.html
<div class="weui-panel">
<!--head-->
<div class="weui-panel__hd header">
<!--头部经纪人信息START-->
<div class="avatar" routerLink="setting">
......@@ -17,21 +18,20 @@
<p>{{lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName ?
lifeCustomerInfo?.practitionerBasicInfo?.insurerBranchName : '银盾保险'}}</p>
</div>
<div>·</div>
<div>|</div>
<div>{{lifeCustomerInfo?.practitionerBasicInfo?.subordinateName}}</div>
<div>·</div>
<div>|</div>
<div><span class="ydTitle">{{lifeCustomerInfo?.practitionerBasicInfo?.levelName}}</span></div>
</div>
</div>
<!--头部经纪人信息END-->
</div>
<div class="weui-panel__bd">
<div class="weui-panel__bd" style="padding: 0 8px;background: #fff;">
<div class="performance_wrapper">
<!-- <img class="bg" src="assets/images/sales__bg.png" > -->
<div class="content">
<span class="detail" (click)="jumpToDetail()">龙虎榜<i class="iconfont icon-ar-r"
style="font-size:12px;"></i></span>
<span class="detail" (click)="jumpToDetail()"><img style="max-width: 18%;margin-right: 2px;"
src="assets/images/icon_2.png">龙虎榜<i class="iconfont icon-ar-r" style="font-size:12px;"></i></span>
<ul class="tab">
<li *ngFor="let item of performanceList" (click)="rank(item.time,1,2);rank(item.time,2,2)"
[ngClass]="{selected:performanceSelectedFlag==item.time}">
......@@ -80,52 +80,46 @@
</ul>
</div>
</div>
</div>
<div class="performance_wrapper">
<div class="content">
<div class="activities_grade">
<span>销售活动量分值</span>
<span class="iconfont icon-ar-r" routerLink="scoreDeatil"></span>
<div class="part2">
<div class="part2_item activity_score" routerLink="scoreDeatil">
<div>销售活动量分值</div>
<div style="width: 100%;">
<ul class="activities">
<li class="markPrice">{{this.activities_grade?.scoreDay}}</li>
<li class="markPrice">{{this.activities_grade?.scoreWeek}}</li>
<li class="markPrice">{{this.activities_grade?.scoreMonth}}</li>
</ul>
<ul class="activities">
<li>今天</li>
<li>本周</li>
<li>本月</li>
</ul>
</div>
<ul class="activities">
<li class="markPrice">{{this.activities_grade?.scoreDay}}</li>
<li class="markPrice">{{this.activities_grade?.scoreWeek}}</li>
<li class="markPrice">{{this.activities_grade?.scoreMonth}}</li>
<li class="markPrice">
{{this.activities_grade?.achievementRateWeek!=null ? lifeCommonService.toPercent(this.activities_grade?.achievementRateWeek) :'-'}}
</li>
<li class="markPrice">
{{this.activities_grade?.achievementRateMonth!=null ? lifeCommonService.toPercent(this.activities_grade?.achievementRateMonth) :'-'}}
</li>
<li class="markPrice">{{this.activities_grade?.addOpportunityNum}}</li>
</ul>
<ul class="activities">
<li>今天</li>
<li>本周</li>
<li>本月</li>
<li>本周达成率</li>
<li>本月达成率</li>
<li>本周新增商机</li>
</ul>
</div>
</div>
<div class="performance_wrapper notice">
<div style="position: relative;">
<h3 style="font-size: 16px;color: #ff002a;">公告</h3><i class="iconfont" style="color: #ff002a;">&#xe645;</i>
<div #hide style="font-size: 14px;position: absolute;z-index:-100" [innerHtml]="firstAnnouncement"></div>
<div>{{this.firstAnnouncementTitle}}</div>
<span style="position:absolute;right:5px;font-size: 12px;color:#408dc9;"
routerLink="importantAnnouncement">更多</span>
<div class="part2_item todo">
<div>
<span>今日任务</span>
<img style="width: 50%;" src="assets/images/todo_icon.png">
</div>
<div>
<span>数量</span>
<div style="width: 100%;font-size: 20px;font-weight: bold;">3</div>
</div>
</div>
</div>
</div>
<!--body-->
<div class="weui-panel__bd">
<div class="tool_wrapper" *ngFor="let menuItem of menuLists;">
<div class="tool_item" *ngIf="menuItem.isShow">
<h3>{{menuItem.title}}</h3>
<div class="tool_content">
<div class="content_item" *ngFor="let menuItemContent of menuItem['content']" href="javascript:;"
(click)="menuNavigation(menuItemContent)">
<span class="iconfont" [ngClass]="menuItemContent.icon"></span>
<!-- <span class="iconfont" [ngClass]="menuItemContent.icon"></span> -->
<img [src]="getImgUrl(menuItemContent.icon)" alt="">
<div style="font-size: 13px;">{{menuItemContent.subtitle}}</div>
</div>
</div>
......@@ -187,17 +181,17 @@
<span i class="iconfont icon-ar-r" style="font-size:18px;float: right;" routerLink="setting"></span>
</h3>
</div>
<div class="health_wrapper" style="padding: 12px 10px 12px 10px;">
<div class="health_wrapper" style="padding: 12px 10px 12px 10px;margin-bottom: 0;">
<h3 style="margin-bottom: 0;">我的消息
<span i class="iconfont icon-ar-r" style="font-size:18px;float: right;" routerLink="news"></span></h3>
</div>
</div>
<div class="footer" style="font-size: 12px;padding-top: 10px;text-align: center;background: #f6f7f2;">
<!--footer-->
<div class="footer" style="font-size: 12px;padding-top: 10px;text-align: center;background: #f5f5f5;">
<p>上海银盾保险经纪有限公司</p>
<p>保险业务经营许可证：269615000000800</p>
<p>版权所有©2020银盾保险在线 &nbsp;沪ICP备18000565号</p>
</div>
</div>
......
src/app/my/my-center-home/my-center-home.component.scss
ul,ol{
list-style: none;
}
.weui-panel{
position: relative;
.weui-cell__hd {
......@@ -24,7 +27,7 @@
// color: #fff;
// background: linear-gradient(90deg, #494949, #393939);
color: #333;
background: #f6f7f2;
// background: #f6f7f2;
box-sizing: border-box;
img {
max-width: 100%;
......@@ -51,7 +54,8 @@
> div:first-child {
display: flex;
align-items: flex-end;
font-size: 17px;
font-size: 20px;
font-weight: 800;
}
}
.ydTitle, .brokerTag {
......@@ -88,21 +92,21 @@
// background: linear-gradient(to right, #696d90, #a1adc7);
}
.weui-panel__bd{
background: #f6f7f2;
background: #F5F5F5;;
height: auto;
padding: 0px 8px;
// padding: 0px 8px;
img{
width: 100%;
}
.performance_wrapper{
border-radius: 6px;
border-radius: 8px;
// margin: 5px auto 8px auto;
margin: 0 auto 8px auto;
box-shadow: 0 0px 2.5px #eceaea;
position: relative;
// background: url('../../../assets/images/top_bg.png') no-repeat ;
background: url('../../../assets/images/bg_02.jpg') no-repeat ;
background: url('../../../assets/images/bg.png') no-repeat ;
background-size: cover;
.bg{
height: 100%;
......@@ -112,6 +116,7 @@
.content{
position: relative;
padding: 0px 0px 5px 8px;
ul{
list-style: none;
}
......@@ -151,13 +156,13 @@
position: absolute;
right: 0px;
top: 5px;
width: 60px;
width: 80px;
height: 25px;
line-height: 25px;
background: rgba(0, 0, 0, 0.4);
// background: rgba(0, 0, 0, 0.4);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
font-size:12px;
font-size:14px;
}
.performance_list{
display: flex;
......@@ -165,7 +170,7 @@
li{
width: 15%;
text-align: center;
line-height: 25px;
line-height: 35px;
font-size: 12px;
color: #fff;
margin: 0 5px;
......@@ -189,37 +194,56 @@
width: 18%;
}
}
}
}
.part2{
display: flex;
margin-bottom: 20px;
.part2_item{
width: 48%;
display: flex;
background: #ECF6FF;
border-radius: 12px;
padding: 10px;
.activities{
display: flex;
font-size: 14px;
li{
width: 23%;
width: 33%;
text-align: center;
line-height: 25px;
font-size: 12px;
color: #fff;
overflow: hidden;
}
li:nth-child(1),li:nth-child(2),li:nth-child(3){
width: 12%;
}
li.markPrice{
color: #fff;
font-weight: bold;
font-size: 15px;
font-size: 20px;
}
}
.activities_grade{
color: #fff;
height: 38px;
line-height: 38px;
display: flex;
justify-content: space-between;
padding-right: 5px;
}
.part2_item:nth-child(1){
margin-right: 2%;
flex-wrap: wrap;
}
.part2_item:nth-child(2){
margin-left: 2%;
}
.todo{
display: flex;
background: #FFF5F5;
div{
width: 50%;
text-align: center;
span{
width: 100%;
display: inline-block;
margin-bottom: 10px;
}
}
}
}
}
.notice{
background: #FFF;
padding: 0px 0px 0px 10px;
......@@ -242,8 +266,8 @@
flex-direction: column;
flex-wrap: wrap;
background: #fff;
box-shadow:0 0px 2.5px #eceaea;
border-radius: 6px;
// box-shadow:0 0px 2.5px #eceaea;
// border-radius: 6px;
margin-bottom: 10px;
padding: 7px 0px 0px 10px;
h3{
......@@ -261,17 +285,24 @@
flex-direction: column;
align-items: center;
width: 25%;
height: 60px;
margin-bottom: 10px;
.iconfont{
color: #ff002a;
font-size: 26px;
img{
max-width: 44%;
}
// .iconfont{
// color: #ff002a;
// font-size: 26px;
// }
}
}
}
}
.tool_wrapper:nth-child(3),.tool_wrapper:nth-child(4){
.tool_content{
padding-bottom: 10px;
}
}
.hotProduct{
margin: 10px auto;
background: #fff;
......@@ -356,7 +387,7 @@
.health_wrapper{
background: #fff;
box-shadow: 0 0px 2.5px #eceaea;
border-radius: 6px;
// border-radius: 6px;
margin-bottom: 10px;
padding: 7px 10px 10px 10px;
h3{
......
src/app/my/my-center-home/my-center-home.component.ts
......@@ -65,9 +65,9 @@ export class MyCenterHomeComponent implements OnInit, AfterViewInit {
}
ngAfterViewInit() {
setTimeout(() => {
this.firstAnnouncementTitle = this.getStr(this.hide.nativeElement.innerText, '32')
}, 400);
// setTimeout(() => {
// this.firstAnnouncementTitle = this.getStr(this.hide.nativeElement.innerText, '32')
// }, 400);
}
getMenuList() {
......@@ -75,51 +75,56 @@ export class MyCenterHomeComponent implements OnInit, AfterViewInit {
{
title: '营销工具',
content: [
{ no: 2, subtitle: 'AI保险医生', icon: 'icon-AI', path: `https://${window.location.host}/questionnaire/#/index?campaign=AIRobot&task=AItask1&customerId=${this.lifeCustomerInfo.customerId}`, routerLink: '' },
{ no: 1, subtitle: '獴哥保险诊所', icon: 'icon-zhensuozhongxin', path: `https://${window.location.host}/consulting`, routerLink: '' },
{ no: 4, subtitle: '线上投保', icon: 'icon-yidonghulianwang2', path: `https://${window.location.host}/index?source=dyd`, routerLink: '' },
{ no: 13, subtitle: '我的商机', icon: 'icon-xiansuo1', path: '', routerLink: 'business' },
{ no: 9, subtitle: '我的名片', icon: 'icon-zhiyezhenghao', path: `https://${window.location.host}/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}?source=0`, routerLink: '' },
{ no: 10, subtitle: '职业类别', icon: 'icon-zhiye', path: 'https://www.ydinsurance.cn/occupationQry/', routerLink: '' },
{ no: 7, subtitle: '文章分享', icon: 'icon-fenxiangwenzhang', path: `https://${window.location.host}/discovery`, routerLink: '' },
{ no: 3, subtitle: '产品海报', icon: 'icon-haibao-1', path: '/salesDetail', routerLink: 'material' },
{ no: 2, subtitle: 'AI保险医生', icon: 'ai', path: `https://${window.location.host}/questionnaire/#/index?campaign=AIRobot&task=AItask1&customerId=${this.lifeCustomerInfo.customerId}`, routerLink: '' },
{ no: 1, subtitle: '獴哥保险诊所', icon: 'clinic', path: `https://${window.location.host}/consulting`, routerLink: '' },
{ no: 4, subtitle: '线上投保', icon: 'online', path: `https://${window.location.host}/index?source=dyd`, routerLink: '' },
{ no: 13, subtitle: '我的商机', icon: 'line', path: '', routerLink: 'business' },
{ no: 9, subtitle: '我的名片', icon: 'card', path: `https://${window.location.host}/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}?source=0`, routerLink: '' },
{ no: 10, subtitle: '职业类别', icon: 'job', path: 'https://www.ydinsurance.cn/occupationQry/', routerLink: '' },
{ no: 7, subtitle: '文章分享', icon: 'article', path: `https://${window.location.host}/discovery`, routerLink: '' },
{ no: 3, subtitle: '产品海报', icon: 'poster_p', path: '/salesDetail', routerLink: 'material' },
],
isShow: true
},
{
title: '我的团队',
content: [
{ no: 15, subtitle: '我的团队', icon: 'icon-tuandui', path: '', routerLink: '' },
// { no: 16, subtitle: '团队增员', icon: 'icon-tuanduiguanlisvg', path: '', routerLink: '' },
{ no: 16, subtitle: '团队增员', icon: 'icon-tuanduiguanlisvg', path: '', routerLink: 'recruiting' },
{ no: 18, subtitle: '招募海报', icon: 'icon-haibao-1', path: '', routerLink: '' },
{ no: '', subtitle: '', icon: '', path: '', routerLink: '' }
{ no: 15, subtitle: '我的团队', icon: 'team', path: '', routerLink: '' },
// { no: 16, subtitle: '团队增员', icon: 'recruiting', path: '', routerLink: '' },
{ no: 16, subtitle: '团队增员', icon: 'recruiting', path: '', routerLink: 'recruiting' },
{ no: 18, subtitle: '招募海报', icon: 'poster_r', path: '', routerLink: '' },
{ no: '', subtitle: '', icon: 'default', path: '', routerLink: '' }
],
isShow: this.isShow
},
{
title: '教育培训',
content: [
{ no: 5, subtitle: '保险ABC', icon: 'icon-zidian', path: `https://${window.location.host}/issue`, routerLink: '' },
{ no: 6, subtitle: '培训课件', icon: 'icon-ziliaoku', path: '', routerLink: 'training' },
{ no: 11, subtitle: '文件下载', icon: 'icon-xiazai1', path: 'https://www.ydinsurance.cn/?page_id=13957', routerLink: 'fileUpload' },
{ no: 17, subtitle: '产品库', icon: 'icon-jingxuanchanpinku', path: 'https://www.ydinsurance.cn/?page_id=14331', routerLink: '' },
{ no: 5, subtitle: '保险ABC', icon: 'abc', path: `https://${window.location.host}/issue`, routerLink: '' },
{ no: 6, subtitle: '培训课件', icon: 'train', path: '', routerLink: 'training' },
{ no: 11, subtitle: '文件下载', icon: 'download', path: 'https://www.ydinsurance.cn/?page_id=13957', routerLink: 'fileUpload' },
{ no: 17, subtitle: '产品库', icon: 'product', path: 'https://www.ydinsurance.cn/?page_id=14331', routerLink: '' }
],
isShow: true
}, {
title: '我的展业',
content: [
{ no: 12, subtitle: '我的保单', icon: 'icon-baodanyangben', path: '', routerLink: '' },
{ no: 20, subtitle: '我的客户', icon: 'icon-ren1', path: '', routerLink: '' },
// { no: 14, subtitle: '我的佣金', icon: 'icon-yongjin', path: '', routerLink: '' },
{ no: 19, subtitle: '薪资单', icon: 'icon-xinzidan', path: '', routerLink: 'salary' },
{ no: '', subtitle: '', icon: '', path: '', routerLink: '' }
{ no: 12, subtitle: '我的保单', icon: 'policy', path: '', routerLink: '' },
{ no: 20, subtitle: '我的客户', icon: 'customer', path: '', routerLink: '' },
// { no: 14, subtitle: '我的佣金', icon: 'commission', path: '', routerLink: '' },
{ no: 19, subtitle: '薪资单', icon: 'salary', path: '', routerLink: 'salary' },
{ no: '', subtitle: '', icon: 'default', path: '', routerLink: '' }
],
isShow: true
}
];
}
getImgUrl(Img) {
return 'assets/images/' + Img + '.png'
}
// 菜单导航
menuNavigation(item) {
if (item.routerLink) {
......
src/app/my/sales-rank/sales-rank.component.html
......@@ -31,16 +31,16 @@
<li *ngIf="searchType=='1'" style="color: #333;font-weight: normal;position: relative;"
(click)="rank(timeType,isOnlineType,2)">
首年保费<img src="assets/images/icon.png"
style="position: relative;width: 20%;right: 0;top: -2px;margin-left: 3px;">
style="position: relative;width: 12%;right: 0;top: -2px;margin-left: 3px;">
</li>
<li *ngIf="searchType=='2'" style="color: #333;font-weight: normal;position: relative;"
(click)="rank(timeType,isOnlineType,3)">
首年佣金<img src="assets/images/icon.png"
style="position: relative;width: 20%;right: 0;top: -2px;margin-left: 3px;">
style="position: relative;width: 12%;right: 0;top: -2px;margin-left: 3px;">
</li>
<li *ngIf="searchType=='3'" style="color: #333;font-weight: normal;margin-right: 0;position: relative;"
(click)="rank(timeType,isOnlineType,1)">
件数<img src="assets/images/icon.png" style="position: relative;width: 20%;right: 0;top: -2px;margin-left: 3px;">
件数<img src="assets/images/icon.png" style="position: relative;width: 12%;right: 0;top: -2px;margin-left: 3px;">
</li>
</ul>
<div style="width: 100%;text-align: center;float: left;" *ngIf="rankList?.length <=0">暂无数据</div>
......
src/app/my/team-rank/team-rank.component.scss
.salesWrapper{
padding: 0 10px 20px 10px;
background: #f6f7f2;
// background: #f6f7f2;
// background: #f7f7f2;
min-height: 100%;
height: auto;
......@@ -26,7 +26,7 @@
.teamItem.totalSales{
margin: 8px 0px;
padding: 10px 0;
background: url('../../../assets/images/bg_02.jpg') no-repeat ;
background: url('../../../assets/images/bg.png') no-repeat ;
box-shadow: 0 0px 2.5px #eceaea;
background-size: cover;
.teamTotal{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment