Skip to content

Y
ydLife
Commit c00f860f by sunchao
Options

经纪人名片

parent 65115587
Showing with 140 additions and 51 deletions
src/app/my/business-card/business-card.component.html
<div class="businessCardContainer"> <div class="businessCardContainer">
<div class="brokerCardPositive" id="brokerCardPositive" *ngIf="showFlag==false"> <div class="brokerCardPositive" id="brokerCardPositive" *ngIf="showFlag==false">
<div class="qrcodeBox"> <!-- <div class="dividingContainer">
<div>
<div style="margin-bottom: 20%;"><img src="assets/images/ydShield.png" alt="银盾保险经纪" class="img-responsive">
</div>
<div><img src="assets/images/ydCompanyName.png" alt="银盾保险经纪" class="img-responsive"></div>
</div>
<div><img src="assets/images/online.jpg" alt="" class="img-responsive"></div>
</div>
<div class="dividingContainer">
<div class="dividingBox"></div> <div class="dividingBox"></div>
<div class="dividingLine"></div> <div class="dividingLine"></div>
</div> </div> -->
<div class="brokerInfo"> <div class="brokerInfo">
<div class="brokerBasicInfo"> <div class="brokerBasicInfo">
<div class="brokerName"> <div class="brokerName">
<div>{{lifeCustomerInfo.practitionerBasicInfo.name}}</div> <div>
<div>Neo Zheng</div> {{lifeCustomerInfo.practitionerBasicInfo.name}}
</div> <span>Neo Zheng</span>
<div class="brokerTitle"> </div>
<div>{{lifeCustomerInfo.practitionerBasicInfo.levelName}}</div>
<div>Sales Director</div>
</div> </div>
</div> </div>
<div class="brokerCompanyInfo"> <div class="brokerCompanyInfo">
<div style="font-size: 14px">上海银盾保险经纪有限公司</div> <div style="font-size: 14px">上海银盾保险经纪有限公司</div>
<div style="font-size:10px;font-weight: lighter;">上海市浦东新区张杨路560号中融恒瑞国际西楼1502室</div> <div style="font-size:10px;">上海市浦东新区张杨路560号中融恒瑞国际西楼1502室</div>
<div style="font-size: 11px">客服专线：400-921-9290</div>
</div> </div>
<div class="brokerContactInfo"> <div class="brokerContactInfo">
<div> <div>
<i class="iconfont icon-dianhua"></i> <i class="iconfont icon-shouji"></i>
<span>M: {{lifeCustomerInfo.mobileNo}}</span> <span>手机: {{lifeCustomerInfo.mobileNo}}</span>
</div> </div>
<div> <div>
<i class="iconfont icon-youxiang"></i> <i class="iconfont icon-youxiang1"></i>
<span>50262253@qq.com</span> <span>邮箱：50262253@qq.com</span>
</div>
<div style="margin-bottom: 0;">
<i class="iconfont icon-gongsiwangzhi"></i>
<span>网址：www.ydinsurance.com</span>
</div> </div>
</div> </div>
</div> </div>
<div class="qrcodeBox">
<div>
<div style="margin-bottom: 20%;"><img src="assets/images/ydShield.png" alt="银盾保险经纪" class="img-responsive">
</div>
<div><img src="assets/images/ydCompanyName.png" alt="银盾保险经纪" class="img-responsive"></div>
</div>
<div>
<img src="{{lifeCustomerInfo.practitionerBasicInfo.qrCodePath ?lifeCustomerInfo.practitionerBasicInfo.qrCodePath:'assets/images/online.jpg'}}" alt="" class="img-responsive">
</div>
</div>
</div> </div>
<img src="{{canvasImg}}" *ngIf="showFlag==true"> <img src="{{canvasImg}}" *ngIf="showFlag==true">
<div class="brokerCardOpposite"> <div class="brokerCardOpposite">
......
src/app/my/business-card/business-card.component.scss
...@@ -3,11 +3,9 @@ ...@@ -3,11 +3,9 @@
flex-direction: column; flex-direction: column;
.brokerCardPositive { .brokerCardPositive {
display: flex; display: flex;
padding-top: 7%; padding:7% 5% 10% 5%;
padding-left: 5%;
padding-bottom: 10%;
.qrcodeBox { .qrcodeBox {
width: 15%; width: 18%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
...@@ -37,30 +35,18 @@ ...@@ -37,30 +35,18 @@
margin-bottom: 10%; margin-bottom: 10%;
color: #231f20; color: #231f20;
.brokerName { .brokerName {
div:first-child { font-size: 20px;
font-size: 24px;
letter-spacing: 5px;
font-weight: bold;
line-height: 1.1; line-height: 1.1;
}
div:last-child {
font-size: 12px;
}
}
.brokerTitle {
div:first-child {
font-size: 13px;
}
div:last-child {
font-size: 12px;
}
} }
} }
.brokerCompanyInfo { .brokerCompanyInfo {
margin-bottom: 3%; margin-bottom: 10%;
} }
.brokerContactInfo { .brokerContactInfo {
line-height: 1.1; line-height: 1.1;
div{
margin-bottom: 5px;
}
.iconfont { .iconfont {
margin-right: 5px; margin-right: 5px;
color: #ee262e; color: #ee262e;
......
src/app/my/business-card/business-card.component.ts
...@@ -37,8 +37,6 @@ export class BusinessCardComponent implements OnInit { ...@@ -37,8 +37,6 @@ export class BusinessCardComponent implements OnInit {
}) })
} }
// downLoadJspdfs(){ // downLoadJspdfs(){
// this.element = document.getElementById("brokerCardPositive"); // this.element = document.getElementById("brokerCardPositive");
// html2canvas(this.element,{ // html2canvas(this.element,{
......
src/assets/font/demo_index.html
...@@ -55,6 +55,24 @@ ...@@ -55,6 +55,24 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">手机</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">公司网址</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">邮箱</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68e;</span> <span class="icon iconfont">&#xe68e;</span>
<div class="name">问号</div> <div class="name">问号</div>
<div class="code-name">&amp;#xe68e;</div> <div class="code-name">&amp;#xe68e;</div>
...@@ -978,9 +996,9 @@ ...@@ -978,9 +996,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1620983830052') format('woff2'), src: url('iconfont.woff2?t=1620992914659') format('woff2'),
url('iconfont.woff?t=1620983830052') format('woff'), url('iconfont.woff?t=1620992914659') format('woff'),
url('iconfont.ttf?t=1620983830052') format('truetype'); url('iconfont.ttf?t=1620992914659') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -1007,6 +1025,33 @@ ...@@ -1007,6 +1025,33 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-shouji"></span>
<div class="name">
手机
</div>
<div class="code-name">.icon-shouji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongsiwangzhi"></span>
<div class="name">
公司网址
</div>
<div class="code-name">.icon-gongsiwangzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-youxiang1"></span>
<div class="name">
邮箱
</div>
<div class="code-name">.icon-youxiang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenhao"></span> <span class="icon iconfont icon-wenhao"></span>
<div class="name"> <div class="name">
问号 问号
...@@ -2394,6 +2439,30 @@ ...@@ -2394,6 +2439,30 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouji"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#icon-shouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongsiwangzhi"></use>
</svg>
<div class="name">公司网址</div>
<div class="code-name">#icon-gongsiwangzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youxiang1"></use>
</svg>
<div class="name">邮箱</div>
<div class="code-name">#icon-youxiang1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wenhao"></use> <use xlink:href="#icon-wenhao"></use>
</svg> </svg>
<div class="name">问号</div> <div class="name">问号</div>
......
src/assets/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 356495 */ font-family: "iconfont"; /* Project id 356495 */
src: url('iconfont.woff2?t=1620983830052') format('woff2'), src: url('iconfont.woff2?t=1620992914659') format('woff2'),
url('iconfont.woff?t=1620983830052') format('woff'), url('iconfont.woff?t=1620992914659') format('woff'),
url('iconfont.ttf?t=1620983830052') format('truetype'); url('iconfont.ttf?t=1620992914659') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,18 @@ ...@@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-shouji:before {
content: "\e643";
}
.icon-gongsiwangzhi:before {
content: "\e616";
}
.icon-youxiang1:before {
content: "\e691";
}
.icon-wenhao:before { .icon-wenhao:before {
content: "\e68e"; content: "\e68e";
} }
......
src/assets/font/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font/iconfont.json
...@@ -6,6 +6,27 @@ ...@@ -6,6 +6,27 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "6832329",
"name": "手机",
"font_class": "shouji",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "1288620",
"name": "公司网址",
"font_class": "gongsiwangzhi",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "1576565",
"name": "邮箱",
"font_class": "youxiang1",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "15668768", "icon_id": "15668768",
"name": "问号", "name": "问号",
"font_class": "wenhao", "font_class": "wenhao",
......
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg

186 KB | W: | H:

src/assets/images/card_opposite.jpg

685 KB | W: | H:

src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
  • 2-up
  • Swipe
  • Onion skin
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