angular-material-app documentation
  1. Components
  2. CrmComponent

File

src/app/crm/crm.component.ts

Implements

OnInit

Metadata

selector app-crm
styleUrls ./crm.component.scss
templateUrl ./crm.component.html

Index

Methods

Constructor

constructor()
Defined in src/app/crm/crm.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/crm/crm.component.ts:12
Returns : void 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-crm',
  templateUrl: './crm.component.html',
  styleUrls: ['./crm.component.scss']
})
export class CrmComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start" class="m-b-20">
  <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start start" fxFlex.gt-xs="calc(50% - 24px)">
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state value="142" icon="group_add" backgroundcolor="linear-gradient(60deg, #8C99E0, #6572B8)"
        textcolor="white" property="新增客户数" changepercent="77" changeicon="trending_up"></stb-widget-state>
    </div>
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state value="595" icon="pageview" backgroundcolor="linear-gradient(60deg, #4DD0E2, #4CA8BA)"
        textcolor="white" property="跟进次数" changepercent="30" changeicon="trending_up"></stb-widget-state>
    </div>
  </div>

  <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start start" fxFlex.gt-xs="calc(50% - 24px)">
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state value="30232" icon="monetization_on" backgroundcolor="linear-gradient(60deg, #81C683, #62A864)"
        textcolor="white" property="成交总额" changepercent="77" changeicon="trending_down"></stb-widget-state>
    </div>
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state value="5" icon="playlist_add" backgroundcolor="linear-gradient(60deg, #EAC459, #DCAC3F)"
        textcolor="white" property="成交单数" changepercent="77" changeicon="trending_up" valueprefix="$"></stb-widget-state>
    </div>
  </div>

</div>


<div fxLayout="row wrap">
  <div fxFlex="50">

    <div class="card mat-elevation-z2 m-b-20">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的任务</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
              <div>拜访客户了解需求</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.01.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
              <div>组织客户进行产品培训</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.02.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
              <div>跟踪客户反馈的问题</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.03.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
              <div>与stbui达成合作意向</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>

      </div>
      <div class="card-footer" fxLayout="row">
        <div fxLayout="row" fxLayoutAlign="start center">
          <button mat-raised-button color="primary" disabled>
            <mat-icon>flag</mat-icon>
            标记完成
          </button>
        </div>

        <span fxFlex></span>

        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-button>查看所有任务</button>
          <button mat-button>添加任务</button>
        </div>

      </div>
    </div>

  </div>

  <div fxFlex="50">
    <div class="card mat-elevation-z2">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的审批</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>请假申请</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>出差申请</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>报销申请</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>

        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>客户拜访申请</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>

      </div>
      <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
        <button mat-button>查看所有审批</button>
        <button mat-button>添加审批</button>
      </div>
    </div>
  </div>

  <div fxFlex="50">
    <div class="card mat-elevation-z2 m-b-20">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的项目</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>社区卫生服务中心改建项目</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>家居保护垫及塑料挂钩生产线建设项目</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>生态公益林建设工程</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>
        <div class="task-container" fxLayout="column">
          <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
            <div fxLayout="row" fxLayoutAlign="start center">
              <div>天燃气报警系统改造工程</div>
            </div>

            <div fxLayout="row" fxLayoutAlign="end center">
              <div>2018.04.01</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
        <button mat-button>查看所有项目</button>
      </div>
    </div>
  </div>

  <div fxFlex="50">

    <div class="card mat-elevation-z2 m-b-20">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的消息</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
        <mat-list>
          <mat-list-item>
            <img mat-list-avatar src="assets/images/avatars/noavatar.png">
            <h3 mat-line>小姐姐</h3>
            <p mat-line>
              人家有的是背景儿，我有的只是背影儿。
            </p>
          </mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item>
            <img mat-list-avatar src="assets/images/avatars/noavatar.png">
            <h3 mat-line>小哥哥</h3>
            <p mat-line>
              时间过的真快，刚起床就天黑了。
            </p>
          </mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item>
            <img mat-list-avatar src="assets/images/avatars/noavatar.png">
            <h3 mat-line>小李</h3>
            <p mat-line>
              从小学到大学，唯一不变的就是一颗不想念书的心。
            </p>
          </mat-list-item>
        </mat-list>
      </div>
      <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
        <button mat-button>最新消息</button>
      </div>
    </div>

  </div>

  <div fxFlex="50">
    <div class="card mat-elevation-z2">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的日志</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
      </div>
      <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
        <button mat-button>最新日志</button>
      </div>
    </div>
  </div>

  <div fxFlex="50">
    <div class="card mat-elevation-z2">
      <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
        <div>我的会议</div>
        <div fxLayout="row">
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </div>
      </div>
      <div class="card-content" fxLayout="column">
      </div>
      <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
        <button mat-button>最新会议</button>
      </div>
    </div>
  </div>

</div>

./crm.component.scss 

:host {
  display: block;
  padding: 14px;
}

.card {
  background: #fff;
  border-radius: 2px;
  margin: 10px;

  &-header {
    min-height: 64px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 20px;

    padding: {
      left: 24px;
      right: 24px;
    }
  }

  &-content {
    min-height: 56px;
  }

  &-footer {
    padding: 8px;
    padding-left: 24px;
    border-top: 1px solid #e0e0e0;
  }
}

.task-container {
  border-bottom: 1px solid #e0e0e0;

  &:last-child {
    border-bottom: 0;
  }
}

.task {
  padding: {
    left: 24px;
    right: 24px;
  }
  min-height: 56px;

  &.active,
  &:hover {
    background: #f5f5f5;
  }

  .checkbox {
    margin-right: 24px;
  }
}

.widget {
  margin: 0 10px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""