生成名片

754b23bd · Sweet Zhang · b0b131ba · 754b23bd · 754b23bd · 754b23bd
Commit 754b23bd authored Jun 01, 2020 by Sweet Zhang
18 changed files
--- a/src/app/my/business-card/business-card.component.html
+++ b/src/app/my/business-card/business-card.component.html
+<div class="businessCardContainer">
+  <div class="brokerCardPositive">
+    <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="assets/images/online_chat.jpg" alt="" class="img-responsive"></div>
+    </div>
+    <div class="dividingContainer">
+      <div class="dividingBox"></div>
+      <div class="dividingLine"></div>
+    </div>
+    <div class="brokerInfo">
+      <div class="brokerBasicInfo">
+        <div class="brokerName">
+          <div>{{lifeCustomerInfo.practitionerBasicInfo.name}}</div>
+          <div>Neo Zheng</div>
+        </div>
+        <div class="brokerTitle">
+          <div>{{lifeCustomerInfo.practitionerBasicInfo.levelName}}</div>
+          <div>Sales Director</div>
+        </div>
+      </div>
+      <div class="brokerCompanyInfo">
+        <div style="font-size: 14px">上海银盾保险经纪有限公司</div>
+        <div style="font-size:10px;font-weight: lighter;">上海市浦东新区张杨路560号中融恒瑞国际西楼1502室</div>
+        <div style="font-size: 11px">客服专线：400-921-9290</div>
+      </div>
+      <div class="brokerContactInfo">
+        <div>
+          <i class="iconfont icon-dianhua"></i>
+          <span>M: {{lifeCustomerInfo.mobileNo}}</span>
+        </div>
+        <div>
+          <i class="iconfont icon-youxiang"></i>
+          <span>50262253@qq.com</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="brokerCardOpposite">
+    <img src="assets/images/card_opposite.jpg" alt="" class="img-responsive">
+  </div>
+</div>
--- a/src/app/my/business-card/business-card.component.scss
+++ b/src/app/my/business-card/business-card.component.scss
+.businessCardContainer {
+  display: flex;
+  flex-direction: column;
+  .brokerCardPositive {
+    display: flex;
+    padding-top: 7%;
+    padding-left: 5%;
+    margin-bottom: 10%;
+    .qrcodeBox {
+      width: 15%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    .dividingContainer {
+      padding-top: 45px;
+      margin-right: 11px;
+      margin-left: 5%;
+      .dividingBox {
+        width: 10px;
+        height: 10px;
+        background-color: #ee262e;
+      }
+      .dividingLine {
+        width: 1px;
+        background-color: #b9b9ba;
+        height: 100%;
+      }
+    }
+    .brokerInfo {
+      flex: 1;
+      .brokerBasicInfo {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        padding-right: 5%;
+        margin-bottom: 10%;
+        color: #231f20;
+        .brokerName {
+          div:first-child {
+            font-size: 24px;
+            letter-spacing: 5px;
+            font-weight: bold;
+            line-height: 1.1;
+          }
+          div:last-child {
+            font-size: 12px;
+          }
+        }
+        .brokerTitle {
+          div:first-child {
+            font-size: 13px;
+          }
+          div:last-child {
+            font-size: 12px;
+          }
+        }
+      }
+      .brokerCompanyInfo {
+        margin-bottom: 3%;
+      }
+      .brokerContactInfo {
+        line-height: 1.1;
+        .iconfont {
+          margin-right: 5px;
+          color: #ee262e;
+        }
+      }
+    }
+  }
+}
--- a/src/app/my/business-card/business-card.component.spec.ts
+++ b/src/app/my/business-card/business-card.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BusinessCardComponent } from './business-card.component';
+describe('BusinessCardComponent', () => {
+  let component: BusinessCardComponent;
+  let fixture: ComponentFixture<BusinessCardComponent>;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BusinessCardComponent ]
+    })
+    .compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BusinessCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/my/business-card/business-card.component.ts
+++ b/src/app/my/business-card/business-card.component.ts
+import {Component, OnInit} from '@angular/core';
+@Component({
+  selector: 'ydlife-business-card',
+  templateUrl: './business-card.component.html',
+  styleUrls: ['./business-card.component.scss']
+})
+export class BusinessCardComponent implements OnInit {
+  lifeCustomerInfo: any;
+  constructor() {
+  }
+  ngOnInit() {
+    this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
+  }
+}
--- a/src/app/my/my-routing.module.ts
+++ b/src/app/my/my-routing.module.ts
@@ -20,6 +20,7 @@ import { MySettingDetailComponent } from './my-setting-detail/my-setting-detail.
 import { MyNewsComponent } from './my-news/my-news.component';
 import { MyTargetComponent } from "./my-target/my-target.component";
 import { TeamPanelComponent } from './team-panel/team-panel.component';
+import {BusinessCardComponent} from "./business-card/business-card.component";
 const myRoutes: Routes = [
  { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -41,7 +42,8 @@ const myRoutes: Routes = [
  { path: 'setting/:uploadType', component: MySettingDetailComponent, canActivate: [AuthGuard] },
  { path: 'news', component: MyNewsComponent, canActivate: [AuthGuard] },
  { path: 'target', component: MyTargetComponent, canActivate: [AuthGuard] },
-  { path: 'teamPanel', component: TeamPanelComponent, canActivate: [AuthGuard] }
+  { path: 'teamPanel', component: TeamPanelComponent, canActivate: [AuthGuard] },
+  { path: 'businessCard', component: BusinessCardComponent, canActivate: [AuthGuard] },
 ];

--- a/src/app/my/my.module.ts
+++ b/src/app/my/my.module.ts
@@ -24,10 +24,11 @@ import { MySettingDetailComponent } from './my-setting-detail/my-setting-detail.
 import { MyNewsComponent } from './my-news/my-news.component';
 import { MyTargetComponent } from './my-target/my-target.component';
 import { TeamPanelComponent } from './team-panel/team-panel.component';
+import { BusinessCardComponent } from './business-card/business-card.component';
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, ToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, ToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, BusinessCardComponent],
  imports: [
    CommonModule,
    LifeCommonModule,

--- a/src/assets/font/demo_index.html
+++ b/src/assets/font/demo_index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
-  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
@@ -31,6 +31,18 @@
          <ul class="icon_lists dib-box">
            <li class="dib">
+              <span class="icon iconfont">&#xe679;</span>
+                <div class="name">邮箱</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+            <li class="dib">
+              <span class="icon iconfont">&#xe678;</span>
+                <div class="name">上引号</div>
+                <div class="code-name">&amp;#xe678;</div>
+              </li>
+            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">开关 switch-基本状态-关闭状态</div>
                <div class="code-name">&amp;#xe674;</div>
@@ -1047,6 +1059,24 @@
        <ul class="icon_lists dib-box">
          <li class="dib">
+            <span class="icon iconfont icon-youxiang"></span>
+            <div class="name">
+              邮箱
+            </div>
+            <div class="code-name">.icon-youxiang
+            </div>
+          </li>
+          <li class="dib">
+            <span class="icon iconfont icon-shangyinhao"></span>
+            <div class="name">
+              上引号
+            </div>
+            <div class="code-name">.icon-shangyinhao
+            </div>
+          </li>
+          <li class="dib">
            <span class="icon iconfont icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai"></span>
            <div class="name">
              开关 switch-基本状态-关闭状态
@@ -2526,6 +2556,22 @@
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-youxiang"></use>
+                </svg>
+                <div class="name">邮箱</div>
+                <div class="code-name">#icon-youxiang</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangyinhao"></use>
+                </svg>
+                <div class="name">上引号</div>
+                <div class="code-name">#icon-shangyinhao</div>
+            </li>
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai"></use>
                </svg>
                <div class="name">开关 switch-基本状态-关闭状态</div>

--- a/src/assets/font/iconfont.css
+++ b/src/assets/font/iconfont.css
--- a/src/assets/font/iconfont.eot
+++ b/src/assets/font/iconfont.eot
--- a/src/assets/font/iconfont.js
+++ b/src/assets/font/iconfont.js
--- a/src/assets/font/iconfont.json
+++ b/src/assets/font/iconfont.json
@@ -6,6 +6,20 @@
  "description": "",
  "glyphs": [
    {
+      "icon_id": "9592761",
+      "name": "邮箱",
+      "font_class": "youxiang",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "816614",
+      "name": "上引号",
+      "font_class": "shangyinhao",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
      "icon_id": "8897231",
      "name": "开关 switch-基本状态-关闭状态",
      "font_class": "kaiguanswitch-jibenzhuangtai-dianliangzhuangtai",

--- a/src/assets/font/iconfont.svg
+++ b/src/assets/font/iconfont.svg
@@ -20,6 +20,12 @@ Created by iconfont
  />
    <missing-glyph />
+    <glyph glyph-name="youxiang" unicode="&#59001;" d="M983.899806 110.614218V671.113777h0.180631l-0.180631 4.696419c-0.180632 5.238314-0.722526 10.476627-1.806315 15.714941-2.890104 25.469042-21.675781 44.977245-45.519139 47.686717H122.287529c-11.741048 0-23.482096-1.625684-34.861881-5.238314-30.346093-10.295996-50.757453-40.100194-50.576821-74.058917v-534.849885c-0.361263-21.314518 5.780208-42.087141 17.701887-59.789028l0.361263-0.722526 5.418946-3.973893c18.243782-21.856412 44.977245-34.319986 73.517022-34.500618H904.421944c37.751984 0 70.265655 27.094726 79.477862 66.291763l0.180631 0.541894c0.361263 5.96084 0.361263 11.741048-0.180631 17.701888zM390.16405 348.505909l55.453872-49.854295 43.893456-40.100194c5.418945-5.96084 13.005468-9.57347 21.133886-9.57347 7.947786 0 15.534309 3.431999 21.133886 9.57347l101.153642 91.941436 272.753572-263.721997H126.622685L390.16405 348.505909z m120.119951-30.346092L111.449638 679.96472H115.604163c214.409596 0.903158 703.559711 2.890104 793.875463 0.361263l-399.195625-362.166166z m165.458458 69.72376l251.619686 227.956959v-474.518963L675.742459 387.883577z m-328.568707-0.180631L93.205856 135.721997V617.104957l253.967896-229.402011z"  horiz-adv-x="1024" />
+    <glyph glyph-name="shangyinhao" unicode="&#59000;" d="M505.6 691.2c0-12.8-12.8-25.6-44.8-44.8C307.2 531.2 236.8 441.6 236.8 371.2c0-38.4 25.6-70.4 70.4-83.2 70.4-25.6 96-70.4 96-115.2 0-38.4-19.2-134.4-134.4-134.4-89.6 0-204.8 64-204.8 217.6C64 409.6 211.2 576 416 723.2 428.8 736 441.6 736 448 736c12.8 0 25.6-6.4 38.4-19.2C499.2 704 505.6 697.6 505.6 691.2zM960 691.2c0-12.8-12.8-25.6-44.8-44.8-153.6-108.8-224-204.8-224-275.2 0-38.4 25.6-70.4 70.4-83.2 70.4-25.6 96-70.4 96-115.2 0-38.4-19.2-134.4-134.4-134.4-89.6 0-204.8 64-204.8 217.6 0 160 147.2 326.4 352 473.6 12.8 12.8 25.6 12.8 38.4 12.8C928 736 960 704 960 691.2z"  horiz-adv-x="1024" />
    <glyph glyph-name="kaiguanswitch-jibenzhuangtai-dianliangzhuangtai" unicode="&#58996;" d="M0 384C0 666.763636 229.003636 896 512.186182 896h1023.627636C1818.670545 896 2048 666.810182 2048 384c0-282.763636-229.003636-512-512.186182-512H512.186182C229.329455-128 0 101.003636 0 384zM512-34.909091a418.909091 418.909091 0 1 1 0 837.818182 418.909091 418.909091 0 0 1 0-837.818182z"  horiz-adv-x="2048" />

--- a/src/assets/font/iconfont.ttf
+++ b/src/assets/font/iconfont.ttf
--- a/src/assets/font/iconfont.woff
+++ b/src/assets/font/iconfont.woff
--- a/src/assets/font/iconfont.woff2
+++ b/src/assets/font/iconfont.woff2
--- a/src/assets/images/card_opposite.jpg
+++ b/src/assets/images/card_opposite.jpg
--- a/src/assets/images/ydCompanyName.png
+++ b/src/assets/images/ydCompanyName.png
--- a/src/assets/images/ydShield.png
+++ b/src/assets/images/ydShield.png