Revert "框架调整"

fengxiang

2018-07-11 12b04f145bae740e1971036b1e2dfc1bc224d17b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<div class="content__title">
  <h1>二维码
    <a href="//ng-alain.com/components/qr" target="_blank">Document</a>
  </h1>
</div>
<nz-card>
  <nz-row [nzGutter]="24">
    <nz-col [nzSpan]="8" class="text-center">
      <qr [value]="value" [background]="background" [backgroundAlpha]="backgroundAlpha" [foreground]="foreground" [foregroundAlpha]="foregroundAlpha"
        [level]="level" [mime]="mime" [padding]="padding" [size]="size" style="border:1px solid #999"></qr>
    </nz-col>
    <nz-col [nzSpan]="16">
      <form nz-form>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">背景</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-group>
              <div nz-col nzSpan="12">
                <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{standalone: true}">
              </div>
              <div nz-col nzSpan="12">
                <nz-input-number [(ngModel)]="backgroundAlpha" [nzMin]="0" [nzMax]="1" [nzStep]="0.1" [ngModelOptions]="{standalone: true}"></nz-input-number>
              </div>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">前景</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-group>
              <div nz-col nzSpan="12">
                <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{standalone: true}">
              </div>
              <div nz-col nzSpan="12">
                <nz-input-number [(ngModel)]="foregroundAlpha" [nzMin]="0" [nzMax]="1" [nzStep]="0.1" [ngModelOptions]="{standalone: true}"></nz-input-number>
              </div>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">误差</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select [(ngModel)]="level" [ngModelOptions]="{standalone: true}">
              <nz-option nzValue="L" nzLabel="L"></nz-option>
              <nz-option nzValue="M" nzLabel="M"></nz-option>
              <nz-option nzValue="Q" nzLabel="Q"></nz-option>
              <nz-option nzValue="H" nzLabel="H"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">Mime</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select [(ngModel)]="mime" [ngModelOptions]="{standalone: true}">
              <nz-option nzValue="image/png" nzLabel="image/png"></nz-option>
              <nz-option nzValue="image/jpeg" nzLabel="image/jpeg"></nz-option>
              <nz-option nzValue="image/gif" nzLabel="image/gif"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">内边距</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-number [(ngModel)]="padding" [ngModelOptions]="{standalone: true}" [nzMin]="0" [nzMax]="100"></nz-input-number>px
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">大小</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-number [(ngModel)]="size" [ngModelOptions]="{standalone: true}" [nzMin]="100" [nzMax]="1000" [nzStep]="padding"></nz-input-number>px
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-col>
  </nz-row>
</nz-card>