Skip to content

Y
ydLife
Commit e7d273b3 by sunchao
Options

ydLife海报详情样式修改

parent 586d7cae
Showing with 301 additions and 298 deletions
src/app/my/file-upload/file-upload.component.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.left{ .left{
display: flex; display: flex;
padding: 10px 2px; padding: 10px 2px;
border-bottom: 3px #3784ca solid; // border-bottom: 3px #3784ca solid;
background: #f0f0f0; background: #f0f0f0;
margin-bottom: 10px; margin-bottom: 10px;
li{ li{
......
src/app/my/mk-material-detail/mk-material-detail.component.ts
...@@ -74,7 +74,7 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -74,7 +74,7 @@ export class MkMaterialDetailComponent implements OnInit {
// 加载海报图 // 加载海报图
ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
ctx.save(); ctx.save();
ctx.fillStyle = '#f5e7cd'; ctx.fillStyle = 'rgba(0,0,0,0.15)';
ctx.fillRect(0, this.canvas.nativeElement.height - this.contentHeight * ratio, this.canvas.nativeElement.width * ratio, this.contentHeight * ratio); ctx.fillRect(0, this.canvas.nativeElement.height - this.contentHeight * ratio, this.canvas.nativeElement.width * ratio, this.contentHeight * ratio);
ctx.beginPath(); // 开始绘制 ctx.beginPath(); // 开始绘制
// 先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针 // 先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
...@@ -101,7 +101,7 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -101,7 +101,7 @@ export class MkMaterialDetailComponent implements OnInit {
this.canvas.nativeElement.style.display = 'none'; this.canvas.nativeElement.style.display = 'none';
}; };
// 绘制字体 // 绘制字体
ctx.fillStyle = '#000'; ctx.fillStyle = '#fff';
ctx.font = `${12 * ratio}px 微软雅黑`; ctx.font = `${12 * ratio}px 微软雅黑`;
ctx.fillText(`${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, avatarurlY + 15 * ratio); // Y指的是文字底部的位置 ctx.fillText(`${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, avatarurlY + 15 * ratio); // Y指的是文字底部的位置
ctx.fillText(`银盾保险经纪`, 75 * ratio, avatarurlY + 30 * ratio); // Y指的是文字底部的位置 ctx.fillText(`银盾保险经纪`, 75 * ratio, avatarurlY + 30 * ratio); // Y指的是文字底部的位置
......
src/app/my/mk-material/mk-material.component.scss
.left{ .left{
display: flex; display: flex;
padding: 10px 2px; padding: 10px 2px;
border-bottom: 3px #3784ca solid; // border-bottom: 3px #3784ca solid;
background: #f0f0f0; background: #f0f0f0;
margin-bottom: 10px; margin-bottom: 10px;
list-style: none; list-style: none;
......
src/app/my/mk-material/mk-material.component.ts
...@@ -17,8 +17,6 @@ export class MkMaterialComponent implements OnInit { ...@@ -17,8 +17,6 @@ export class MkMaterialComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.dropOptionsQuery(); this.dropOptionsQuery();
this.posterQuery();
} }
posterQuery() { posterQuery() {
...@@ -40,7 +38,7 @@ export class MkMaterialComponent implements OnInit { ...@@ -40,7 +38,7 @@ export class MkMaterialComponent implements OnInit {
this.categoryList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList']; this.categoryList = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'];
if (this.categoryList.length > 0) { if (this.categoryList.length > 0) {
this.selectedCategoryId = this.categoryList[0].dropOptionOrder; this.selectedCategoryId = this.categoryList[0].dropOptionOrder;
this.switchCategory(this.selectedCategoryId) this.posterQuery();
} }
}else{ }else{
this.categoryList = []; this.categoryList = [];
......
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/sales_bg.png" > <!-- <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"
...@@ -75,8 +75,8 @@ ...@@ -75,8 +75,8 @@
<div class="performance_wrapper notice"> <div class="performance_wrapper notice">
<div style="position: relative;"> <div style="position: relative;">
<h3 style="font-size: 16px;color: #ff002a;">公告</h3><i class="iconfont" style="color: #ff002a;">&#xe645;</i> <h3 style="font-size: 16px;color: #ff002a;">公告</h3><i class="iconfont" style="color: #ff002a;">&#xe645;</i>
<div [innerHtml]="firstAnnouncement" ></div> <div #hide style="font-size: 14px;" [innerHtml]="firstAnnouncement" ></div>
<span style="position:absolute;right:5px;font-size: 14px;color:#408dc9;" routerLink="importantAnnouncement">更多</span> <span style="position:absolute;right:5px;font-size: 12px;color:#408dc9;" routerLink="importantAnnouncement">更多</span>
</div> </div>
</div> </div>
<div class="tool_wrapper"> <div class="tool_wrapper">
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
<div class="summaryBox"> <div class="summaryBox">
<div class="summaryContent" *ngFor="let label of product.labels"> <div class="summaryContent" *ngFor="let label of product.labels">
<div class="summaryIcon"><i class="iconfont icon-gou"></i></div> <div class="summaryIcon"><i class="iconfont icon-gou"></i></div>
<div class="summaryLabel">{{label}}</div> <div class="summaryLabel" >{{label}}</div>
</div> </div>
</div> </div>
<div class="priceContainer"> <div class="priceContainer">
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
<div class="health_wrapper"> <div class="health_wrapper">
<h3>医疗服务</h3> <h3>医疗服务</h3>
<img style="border-radius: 10px;width: 48%;margin-right: 10px;" src="assets/images/yindunvipmember.jpg" (click)="jumpUrl()"> <img style="border-radius: 10px;width: 48%;margin-right: 10px;" src="assets/images/yindunvipmember.jpg" (click)="jumpUrl()">
<img style="border-radius: 10px;width: 48%;" src="assets/images/yindunvipmember.jpg" (click)="jumpUrl()"> <!-- <img style="border-radius: 10px;width: 48%;" src="assets/images/yindunvipmember.jpg" (click)="jumpUrl()"> -->
</div> </div>
......
src/app/my/my-center-home/my-center-home.component.scss
.weui-cell__hd { .weui-panel{
i.iconfont { .weui-cell__hd {
background-image: -webkit-gradient(linear, left top, right bottom, from(#ff1c2b), to(#461415)); i.iconfont {
background-image: linear-gradient(to bottom right, #ff1c2b, #461415); background-image: -webkit-gradient(linear, left top, right bottom, from(#ff1c2b), to(#461415));
-webkit-background-clip: text; background-image: linear-gradient(to bottom right, #ff1c2b, #461415);
color: transparent; -webkit-background-clip: text;
margin-right: 10px; color: transparent;
width: 35px; margin-right: 10px;
height: 35px; width: 35px;
line-height: 35px; height: 35px;
text-align: center; line-height: 35px;
font-size: 26px; text-align: center;
} font-size: 26px;
} }
.weui-panel__hd {
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 15px 0 15px 21px;
width: 100%;
color: #fff;
background: linear-gradient(90deg, #494949, #393939);
box-sizing: border-box;
img {
max-width: 100%;
height: 100%;
display: block;
}
> div {
margin-right: 15px;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
} }
.brokerInfo {
flex: 1; .weui-panel__hd {
.brokerName { display: flex;
display: flex; -webkit-box-align: center;
justify-content: space-between; align-items: center;
color: #e3c385; padding: 15px 0 15px 21px;
font-size: 16px; width: 100%;
> div:first-child { color: #fff;
display: flex; background: linear-gradient(90deg, #494949, #393939);
align-items: flex-end; box-sizing: border-box;
font-size: 17px; img {
} max-width: 100%;
height: 100%;
display: block;
} }
.ydTitle, .brokerTag { > div {
color: #ae9f82; margin-right: 15px;
border-radius: 6px;
} }
.brokerTag { .avatar {
margin-top: 10px; width: 60px;
display: flex; height: 60px;
font-weight: normal; border-radius: 50%;
font-size: 14px; overflow: hidden;
> div { }
.brokerInfo {
flex: 1;
.brokerName {
display: flex; display: flex;
align-items: center; justify-content: space-between;
margin-right: 10px; color: #e3c385;
font-size: 16px;
> div:first-child {
display: flex;
align-items: flex-end;
font-size: 17px;
}
}
.ydTitle, .brokerTag {
color: #ae9f82;
border-radius: 6px;
}
.brokerTag {
margin-top: 10px;
display: flex;
font-weight: normal;
font-size: 14px;
> div {
display: flex;
align-items: center;
margin-right: 10px;
}
} }
}
}
.shareSelfInfoBtn {
padding: 0 15px;
color: #fff;
background-color: #ff4100;
border-radius: 20px;
font-size: 15px;
}
}
.weui-panel__bd{
background: #f6f7f2;
height: auto;
padding: 0px 8px;
img{
width: 100%;
} }
.performance_wrapper{ .shareSelfInfoBtn {
// background: #fff; padding: 0 15px;
border-radius: 6px; color: #fff;
margin: 5px auto 8px auto; background-color: #ff4100;
box-shadow: 0 1px 5px #969696; border-radius: 20px;
position: relative; font-size: 15px;
.bg{
height: 100%;
position: absolute;
z-index: 1;
// -webkit-filter: blur(1px);
// filter: blur(3px);
// opacity: 0.8;
} }
.content{ }
z-index: 100;
.weui-panel__bd{
background: #f6f7f2;
height: auto;
padding: 0px 8px;
img{
width: 100%;
}
.performance_wrapper{
border-radius: 6px;
margin: 5px auto 8px auto;
box-shadow: 0 1px 5px #969696;
position: relative; position: relative;
padding: 0px 0px 5px 8px; background: url('../../../assets/images/sales__bg.png') no-repeat ;
background-size: cover;
ul{ .bg{
list-style: none; height: 100%;
position: absolute;
z-index: 1;
// -webkit-filter: blur(1px);
// filter: blur(3px);
// opacity: 0.8;
} }
.tab{ .content{
display: flex; // z-index: 100;
list-style: none; position: relative;
margin-bottom: 5px; padding: 0px 0px 5px 8px;
li { ul{
margin-right: 15px; list-style: none;
line-height: 38px;
height: 38px;
color: #fff;
h3{
font-weight: normal;
font-size: 16px;
}
} }
li.selected{ .tab{
h3{ display: flex;
font-weight: bold; list-style: none;
margin-bottom: 5px;
li {
margin-right: 15px;
line-height: 38px;
height: 38px;
color: #fff;
h3{
font-weight: normal;
font-size: 16px;
}
} }
.line{ li.selected{
width: 20px; h3{
height: 3px; font-weight: bold;
display: inline-block; }
position: absolute; .line{
bottom: 2px; width: 20px;
background: #ff002a; height: 3px;
display: inline-block;
position: absolute;
bottom: 2px;
background: #ff002a;
}
} }
} }
} .detail{
.detail{ display: inline-block;
display: inline-block; color: #fff;
color: #fff;
text-align: center;
cursor: pointer;
position: absolute;
right: 0px;
top: 5px;
width: 60px;
height: 25px;
line-height: 25px;
background: rgba(0, 0, 0, 0.7);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
font-size:12px;
}
.performance_list{
display: flex;
font-size: 14px;
li{
width: 15%;
text-align: center; text-align: center;
cursor: pointer;
position: absolute;
right: 0px;
top: 5px;
width: 60px;
height: 25px;
line-height: 25px; line-height: 25px;
font-size: 12px; background: rgba(0, 0, 0, 0.7);
color: #fff; border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
font-size:12px;
} }
.mark{ .performance_list{
color: #fff; display: flex;
font-weight: bold; font-size: 14px;
font-size: 15px; li{
width: 15%;
} text-align: center;
li:nth-child(1){ line-height: 25px;
width: 12%; font-size: 12px;
text-align: left; color: #fff;
} }
li:nth-child(2),li:nth-child(3){ .mark{
width: 28%; color: #fff;
text-align: left; font-weight: bold;
margin-left: 10px; font-size: 15px;
}
li:nth-child(1){
width: 12%;
text-align: left;
}
li:nth-child(2),li:nth-child(3){
width: 28%;
text-align: left;
margin-left: 10px;
}
li:nth-child(3){
margin-left: 0px;
}
} }
li:nth-child(3){ }
margin-left: 0px;
}
.notice{
background: #FFF;
padding: 0px 0px 0px 10px;
margin-top: 10px;
div{
display: flex;
align-items: center;
color: #737272;
height: 40px;
.iconfont{
font-size: 30px;
} }
} }
} }
} .tool_wrapper{
.notice{ .tool_item{
background: #FFF; display: flex;
padding: 0px 0px 0px 10px; flex-direction: column;
margin-top: 10px; margin-bottom: 10px;
div{ h3{
display: flex; font-weight: normal;
align-items: center; font-size: 16px;
color: #737272; margin-bottom: 3px;
height: 40px; }
.iconfont{ .tool_content{
font-size: 30px; display: flex;
justify-content: space-between;
margin-bottom: 5px;
.content_item{
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
.iconfont{
color: #ff002a;
font-size: 24px;
}
}
}
} }
} }
} .hotProduct{
margin: 10px auto;
.tool_wrapper{
.tool_item{
display: flex;
flex-direction: column;
margin-bottom: 10px;
h3{ h3{
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
margin-bottom: 3px;
} }
.tool_content{ .media {
display: flex; position: relative;
justify-content: space-between; width: 100%;
margin-bottom: 5px;
.content_item{
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center; align-items: flex-start;
width: 25%; cursor: pointer;
.iconfont{ padding-bottom: 15px;
color: #ff002a; }
font-size: 24px; .media-left {
width: 30%;
padding-right: 10px;
.yd_logo {
padding: 8px;
background: rgba(114, 209, 196, 0.18);
margin-top: -5px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
} }
} }
} .media-body {
} width: 75%;
}
.hotProduct{
margin: 10px auto;
h3{
font-weight: normal;
font-size: 16px;
}
.media {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
cursor: pointer;
padding-bottom: 15px;
}
.media-left {
width: 30%;
padding-right: 10px;
.yd_logo {
padding: 8px;
background: rgba(114, 209, 196, 0.18);
margin-top: -5px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
} }
} .summaryBox {
.media-body { justify-content: space-between;
width: 75%;
}
.summaryBox {
justify-content: space-between;
}
.priceContainer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
line-height: 1;
margin-top: 5px;
span {
font-size: 12px;
color: #e56124;
} }
.price { .priceContainer {
width: 100%;
display: flex; display: flex;
font-size: 22px;
margin-right: 15px;
color: #e56124;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
line-height: 1;
margin-top: 5px;
span {
font-size: 12px;
color: #e56124;
}
.price {
display: flex;
font-size: 22px;
margin-right: 15px;
color: #e56124;
justify-content: space-between;
align-items: flex-end;
}
} }
.media-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
color: #4a4a4a;
}
h4 {
font-size: 15px;
margin: 0;
width: 85%;
}
.companylogo {
width: 70px;
height: 26px;
margin-top: -1px;
font-size: 12px;
}
.logoBox {
width: 100%;
height: 100%;
display: inline-block;
}
}
.health_wrapper{
h3{
font-weight: normal;
font-size: 16px;
margin: 10px auto;
} }
.media-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
color: #4a4a4a;
}
h4 {
font-size: 15px;
margin: 0;
width: 85%;
}
.companylogo {
width: 70px;
height: 26px;
margin-top: -1px;
font-size: 12px;
}
.logoBox {
width: 100%;
height: 100%;
display: inline-block;
}
}
.health_wrapper{
h3{
font-weight: normal;
font-size: 16px;
margin: 10px auto;
} }
} }
} }
@media(min-width: 768px) { @media(min-width: 768px) {
......
src/app/my/my-center-home/my-center-home.component.ts
...@@ -85,7 +85,7 @@ export class MyCenterHomeComponent implements OnInit { ...@@ -85,7 +85,7 @@ export class MyCenterHomeComponent implements OnInit {
},{ },{
title:'展业工具', title:'展业工具',
content:[ content:[
{no:9,subtitle:'名片分享',icon:'icon-shenfenzheng',path:'',routerLink:''}, {no:9,subtitle:'执业分享',icon:'icon-shenfenzheng',path:'',routerLink:''},
{no:10,subtitle:'职业类别',icon:'icon-zhiyeleibie',path:'https://www.ydinsurance.cn/occupationQry/',routerLink:''}, {no:10,subtitle:'职业类别',icon:'icon-zhiyeleibie',path:'https://www.ydinsurance.cn/occupationQry/',routerLink:''},
{no:11,subtitle:'文件下载',icon:'icon-xiazai1',path:'https://www.ydinsurance.cn/?page_id=13957',routerLink:'fileUpload'}, {no:11,subtitle:'文件下载',icon:'icon-xiazai1',path:'https://www.ydinsurance.cn/?page_id=13957',routerLink:'fileUpload'},
{no:12,subtitle:'',icon:'',path:'',routerLink:''} {no:12,subtitle:'',icon:'',path:'',routerLink:''}
...@@ -130,8 +130,8 @@ export class MyCenterHomeComponent implements OnInit { ...@@ -130,8 +130,8 @@ export class MyCenterHomeComponent implements OnInit {
this.lifeCommonService.shareStatusPublish(1); this.lifeCommonService.shareStatusPublish(1);
this.lifeCommonService.wxShare( this.lifeCommonService.wxShare(
`银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`, `银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`,
'银盾保险经纪，家庭健康保险专家', '您的家庭保险专家、财务策划师。规划成就人生。',
`https://m.zuihuibi.cn/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}`, `https://${window.location.host}/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}`,
imgUrl); imgUrl);
} }
...@@ -139,7 +139,7 @@ export class MyCenterHomeComponent implements OnInit { ...@@ -139,7 +139,7 @@ export class MyCenterHomeComponent implements OnInit {
this.myService.announcementQuery(null, null).subscribe(res => { this.myService.announcementQuery(null, null).subscribe(res => {
if (res['success']) { if (res['success']) {
this.announcementLists = res['data']['announcementInfoList']; this.announcementLists = res['data']['announcementInfoList'];
this.firstAnnouncement = this.getStr(this.announcementLists[0]['title'],'28'); this.firstAnnouncement = this.getStr(this.announcementLists[0]['title'],'36');
} }
}); });
} }
...@@ -173,7 +173,7 @@ export class MyCenterHomeComponent implements OnInit { ...@@ -173,7 +173,7 @@ export class MyCenterHomeComponent implements OnInit {
templen++; templen++;
} }
if (len == templen || len== templen+1) { if (len == templen || len== templen+1) {
return str.substring(0, i + 1) ; return str.substring(0, i + 1) + '...' ;
} else if (templen > len + 1) { } else if (templen > len + 1) {
return str.substring(0, i); return str.substring(0, i);
} }
...@@ -195,11 +195,7 @@ export class MyCenterHomeComponent implements OnInit { ...@@ -195,11 +195,7 @@ export class MyCenterHomeComponent implements OnInit {
// 大家都在买产品查询列表 // 大家都在买产品查询列表
recommendPlanQuery() { recommendPlanQuery() {
const adType = { this.myService.queryproductlistbytag({mdTagId:17}).subscribe(res => {
type: 4,
productId: 1
};
this.myService.recommendPlanQuery(adType).subscribe(res => {
this.products = res['data'].plans; this.products = res['data'].plans;
}) })
} }
......
src/app/my/my.service.ts
...@@ -60,4 +60,11 @@ export class MyService { ...@@ -60,4 +60,11 @@ export class MyService {
return res; return res;
}); });
} }
queryproductlistbytag(param){
const url = this.API + "/queryproductlistbytag";
return this.http.post(url, JSON.stringify(param)).pipe(res => {
return res;
});
}
} }
src/styles.scss
...@@ -48,6 +48,7 @@ input::placeholder { ...@@ -48,6 +48,7 @@ input::placeholder {
.summaryBox .summaryContent .summaryLabel { .summaryBox .summaryContent .summaryLabel {
margin-left: 5px; margin-left: 5px;
line-height: 1; line-height: 1;
font-size: 14px;
} }
.summaryBox .summaryContent:nth-child(2n) { .summaryBox .summaryContent:nth-child(2n) {
......
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