Skip to content

Y
ydLife
Commit 586d7cae by sunchao
Options

海报分类&分类页样式修改

parent bfdf3efa
Showing with 166 additions and 51 deletions
src/app/auth/login/login.component.html
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="weui-form"> <div class="weui-form">
<div class="weui-form__text-area" style="position: relative;"> <div class="weui-form__text-area" style="position: relative;">
<img style="width: 100%;" src="assets/images/ydinsurance_logo.png" > <img style="width: 100%;" src="assets/images/ydinsurance_logo.png" >
<div style="font-family: '微软雅黑';position: absolute; top: 100px;left: 35%;font-size: 14px;">海纳百川&nbsp;赢家后盾</div> <div style="font-family: '微软雅黑';position: absolute; top: 65%;left: 35%;font-size: 14px;">
海纳百<span style="letter-spacing: 3px;">川</span>赢家后盾
</div>
</div> </div>
<div class="weui-form__control-area"> <div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form"> <div class="weui-cells__group weui-cells__group_form">
......
src/app/my/file-upload/file-upload.component.scss
.fileUploadLists { .fileUploadLists {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%; height: 100%;
ul { ul {
list-style: none; list-style: none;
} }
.left{ .left{
width: 100px; display: flex;
height: 100%; padding: 10px 2px;
overflow-x: hidden; border-bottom: 3px #3784ca solid;
overflow-y: scroll; background: #f0f0f0;
-webkit-overflow-scrolling: touch; margin-bottom: 10px;
background: #f3f4f5;
li{ li{
position: relative; width: 19%;
white-space: nowrap; border: 1px #a9aabb solid;
overflow: hidden;
text-overflow: ellipsis;
height: 43px;
line-height: 43px;
text-align: center; text-align: center;
font-size: 14px;
height: 30px;
line-height: 30px;
border-radius: 20px;
margin: 0px 2px;
} }
li.actived{ li.actived{
background-color: #fff; background-color: #ff5a32;
} color: #fff;
li:before { border: 1px #f0f0f0 solid;
content: "";
display: block;
position: absolute;
left: 22px;
top: 42px;
width: 60%;
height: 1px;
background: hsla(0,0%,86%,.4);
}
li.actived:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
font-size: 0;
background-color: #ec2d37;
} }
// li:before {
// content: "";
// display: block;
// position: absolute;
// left: 22px;
// top: 42px;
// width: 60%;
// height: 1px;
// background: hsla(0,0%,86%,.4);
// }
// li.actived:after {
// content: "";
// position: absolute;
// left: 0;
// top: 0;
// width: 6px;
// height: 100%;
// font-size: 0;
// background-color: #ec2d37;
// }
} }
.contentList{ .contentList{
background-color: #fff; background-color: #fff;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
height: 100%; height: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
......
src/app/my/mk-material/mk-material.component.html
<ul class="left">
<li *ngFor="let categoryItem of categoryList"
(click)="switchCategory(categoryItem.dropOptionOrder)"
[ngClass]="{'actived':selectedCategoryId===categoryItem.dropOptionOrder}">
{{categoryItem.dropOptionName}}
</li>
</ul>
<div class="materialContainer"> <div class="materialContainer">
<div class="materialItem" *ngFor="let posterInfo of posterInfos;index as i" <div class="materialItem" *ngFor="let posterInfo of posterInfos;index as i"
[routerLink]="['/material',posterInfo.itemId]" [queryParams]="{itemType:posterInfo.itemType}"> [routerLink]="['/material',posterInfo.itemId]" [queryParams]="{itemType:posterInfo.itemType}">
......
src/app/my/mk-material/mk-material.component.scss
.left{
display: flex;
padding: 10px 2px;
border-bottom: 3px #3784ca solid;
background: #f0f0f0;
margin-bottom: 10px;
list-style: none;
li{
width: 19%;
border: 1px #a9aabb solid;
text-align: center;
font-size: 14px;
height: 30px;
line-height: 30px;
border-radius: 20px;
margin: 0px 2px;
}
li.actived{
background-color: #ff5a32;
color: #fff;
border: 1px #f0f0f0 solid;
}
}
.materialContainer { .materialContainer {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
grid-row-gap: 10px; grid-row-gap: 10px;
grid-column-gap: 10px; grid-column-gap: 10px;
.materialItem { .materialItem {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
......
src/app/my/mk-material/mk-material.component.ts
...@@ -9,24 +9,47 @@ import {MyService} from "../my.service"; ...@@ -9,24 +9,47 @@ import {MyService} from "../my.service";
}) })
export class MkMaterialComponent implements OnInit { export class MkMaterialComponent implements OnInit {
posterInfos: Array<any>; posterInfos: Array<any>;
categoryList:Array<any>;
selectedCategoryId:number;
constructor(private router: Router, private myService: MyService) { constructor(private router: Router, private myService: MyService) {
} }
ngOnInit() { ngOnInit() {
this.dropOptionsQuery();
this.posterQuery(); this.posterQuery();
} }
posterQuery() { posterQuery() {
this.myService.posterQuery({ const param = {
paginationInfo: { mdDropOptionId:this.selectedCategoryId,
noLimitFlag: 'CONFIRM' paginationInfo: {noLimitFlag: 'CONFIRM'}
} }
}).subscribe(res => { this.myService.posterQuery(param).subscribe(res => {
if (res['success']) { if (res['success']) {
this.posterInfos = res['data']['posterInfos']; this.posterInfos = res['data']['posterInfos'];
} }
}); });
} }
//海报分类
dropOptionsQuery() {
this.myService.dropOptionsQuery({ code: 'yd_productbill_file_type'}).subscribe(res => {
if (res['success']) {
this.categoryList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'];
if (this.categoryList.length > 0) {
this.selectedCategoryId = this.categoryList[0].dropOptionOrder;
this.switchCategory(this.selectedCategoryId)
}
}else{
this.categoryList = [];
}
})
}
switchCategory(e){
this.selectedCategoryId = e;
this.posterQuery();
}
} }
src/app/my/my-center-home/my-center-home.component.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="weui-panel__bd"> <div class="weui-panel__bd">
<div class="performance_wrapper"> <div class="performance_wrapper">
<img class="bg" src="assets/images/measurebanner.jpg" > <img class="bg" src="assets/images/sales_bg.png" >
<div class="content"> <div class="content">
<span class="detail" (click)="jumpToDetail()">明细<i class="iconfont icon-ar-r" <span class="detail" (click)="jumpToDetail()">明细<i class="iconfont icon-ar-r"
...@@ -46,9 +46,7 @@ ...@@ -46,9 +46,7 @@
[ngStyle]="{'left':leftWidth}" [ngStyle]="{'left':leftWidth}"
></i> ></i>
</h3> </h3>
</div> </div>
</li> </li>
</ul> </ul>
<ul class="performance_list title"> <ul class="performance_list title">
......
src/app/my/my-center-home/my-center-home.component.scss
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
-webkit-filter: blur(1px); // -webkit-filter: blur(1px);
filter: blur(3px); // filter: blur(3px);
opacity: 0.8; // opacity: 0.8;
} }
.content{ .content{
z-index: 100; z-index: 100;
......
src/app/my/sales-detail/sales-detail.component.html
<div class="salesWrapper"> <div class="salesWrapper">
<ul class="tab">
<li *ngFor="let item of performanceList"
(click)="selectRang(item.type)"
[ngClass]="{selected:salesDetailType==item.type}"
>
<div style="position: relative;">
<h3>{{item.name}}
<!-- <i class="line" *ngIf="performanceSelectedFlag==item.type"
[ngStyle]="{'left':leftWidth}"
></i> -->
</h3>
</div>
</li>
</ul>
<div class="salesContent"> <div class="salesContent">
<div class="salesItem" *ngFor="let salesDetailItem of salesDetailList"> <div class="salesItem" *ngFor="let salesDetailItem of salesDetailList">
<div class="icon_bolck"><span class="iconfont icon-money-more"></span></div> <div class="icon_bolck"><span class="iconfont icon-money-more"></span></div>
<div class="line"> <div class="line">
......
src/app/my/sales-detail/sales-detail.component.scss
...@@ -2,6 +2,42 @@ ...@@ -2,6 +2,42 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
.tab{
display: flex;
list-style: none;
/* margin-bottom: 5px; */
margin: 10px 0px;
padding-left: 1%;
li {
margin-right: 15px;
line-height: 30px;
height: 30px;
width: 20%;
text-align: center;
border: 1px #a9aabb solid;
border-radius: 20px;
h3{
font-weight: normal;
font-size: 16px;
}
}
li.selected{
background-color: #ff5a32;
color: #fff;
border: 1px #f0f0f0 solid;
// h3{
// font-weight: bold;
// }
// .line{
// width: 20px;
// height: 3px;
// display: inline-block;
// position: absolute;
// bottom: 2px;
// background: #ff002a;
// }
}
}
.salesContent{ .salesContent{
.salesItem{ .salesItem{
border-bottom: 1px #dcdcdc solid; border-bottom: 1px #dcdcdc solid;
......
src/app/my/sales-detail/sales-detail.component.ts
...@@ -11,7 +11,13 @@ export class SalesDetailComponent implements OnInit { ...@@ -11,7 +11,13 @@ export class SalesDetailComponent implements OnInit {
allPerformanceInfo:Array<any>; allPerformanceInfo:Array<any>;
salesDetailList:Array<any>; salesDetailList:Array<any>;
salesDetailType:any; salesDetailType:any;
constructor(private myService: MyService,private activatedRoute: ActivatedRoute,public lifeCommonService:LifeCommonService) { } performanceList:Array<any>;
constructor(private myService: MyService,private activatedRoute: ActivatedRoute,public lifeCommonService:LifeCommonService) {
this.performanceList = [
{type: 'month',name:'本月'},
{type: 'year',name:'本年度'}
]
}
ngOnInit() { ngOnInit() {
this.salesDetailType = this.activatedRoute.snapshot.queryParams.type; this.salesDetailType = this.activatedRoute.snapshot.queryParams.type;
...@@ -27,11 +33,19 @@ export class SalesDetailComponent implements OnInit { ...@@ -27,11 +33,19 @@ export class SalesDetailComponent implements OnInit {
this.allPerformanceInfo = res['data']['commissionInfo']; this.allPerformanceInfo = res['data']['commissionInfo'];
if(this.salesDetailType === 'month'){ if(this.salesDetailType === 'month'){
this.salesDetailList = this.allPerformanceInfo['thisMonthInfo']['fortuneItemList']; this.salesDetailList = this.allPerformanceInfo['thisMonthInfo']['fortuneItemList'];
console.log('month')
} }
if(this.salesDetailType==='year'){ if(this.salesDetailType==='year'){
this.salesDetailList = this.allPerformanceInfo['thisYearInfo']['fortuneItemList']; this.salesDetailList = this.allPerformanceInfo['thisYearInfo']['fortuneItemList'];
console.log('year')
} }
} }
}) })
} }
selectRang(e){
this.salesDetailType = e;
this.brokerInfoQuery()
}
} }
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