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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
// html body
html, body, #app {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #262626;
background-color: #fff;
font-size: .14rem;
// 防止底部被遮挡
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
// 路由切换 动画
.route-enter-active, .route-leave-active {
transition: opacity .3s;
}
.route-enter, .route-leave-to {
opacity: 0;
}
// 下拉框 消失隐藏动画
.viewer-fade-enter-active {
animation: viewer-fade-in .3s;
}
.viewer-fade-leave-active {
animation: viewer-fade-out .2s;
}
@keyframes viewer-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes viewer-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
*, :after, :before {
box-sizing: border-box;
}
// van组件样式调整
// 表单
.screen-form {
input::placeholder {
color: #999999;
opacity: 1;
}
.van-cell:after {
transform: scaleY(1);
}
// 为表单最后一个控件添加底部边框
>.van-field:last-child {
&::before {
position: absolute;
box-sizing: border-box;
content: " ";
pointer-events: none;
right: var(--van-padding-md);
bottom: 0;
left: var(--van-padding-md);
border-bottom: 1px solid var(--van-cell-border-color);
}
}
// 必选标记修改
.van-field__label--required {
&::before {
display: none;
}
>label {
&::after {
content: "*";
margin-left: 4px;
color: var(--van-field-required-mark-color);
display: inline-block;
transform: translateY(1px);
}
}
}
// 在table表格中的控件
.table-field {
padding: 0;
// input::placeholder {
// float: none;
// }
&:after {
display: none;
}
}
}
// 按键形式的单选框
.doc-radio-button {
height: 27px;
.radio-item {
border: 1px solid #BFBFBF;
border-radius: 4px;
color: #8C8C8C;
background: transparent;
transition: all .2s;
padding: 0px 16px;
font-size: 14px;
display: inline-block;
}
.radio-item-active {
background-color: var(--van-primary-color);
border: 1px solid var(--van-primary-color);
color: #fff;
}
.van-radio--horizontal {
margin-right: 0;
margin-left: var(--van-padding-sm);
}
}