在初步完成了整个项目之后，现在开始做初步美化界面，在这里我们首先给小程序添加全局背景，然后在做渐变色处理，实现代码如下：
001 | /**app.wxss**/ |
002 |
003 | page::before { |
004 | top: 0; |
005 | right: 0; |
006 | bottom: 0; |
007 | left: 0; |
008 | content: ''; |
009 | position: fixed; |
010 | overflow: hidden; |
011 | width: 100%; |
012 | height: 100%; |
013 | background-image: url('https://697a-izmm-97e47d-1257967894.tcb.qcloud.la/login-1.jpg?sign=5ec535f6e502af2bee9d3d5169453c4b&t=1544419144'); |
014 | transform: scale(1.3); |
015 | background-size: 100% 100%; |
016 | background-repeat: repeat; |
017 | filter: blur(20px); |
018 | z-index: -1; |
019 | } |
020 |
021 | page { |
022 | line-height: 1.6; |
023 | font-family: -apple-system-font, Helvetica Neue, sans-serif; |
024 | } |
025 |
026 | .weui-cells { |
027 | opacity: 0.7; |
028 | position: relative; |
029 | margin-top: 1.17647059em; |
030 | background-color: #fff; |
031 | line-height: 1.41176471; |
032 | font-size: 14px; |
033 | } |
034 |
035 | .weui-cells:before { |
036 | top: 0; |
037 | } |
038 |
039 | .weui-cells:after, .weui-cells:before { |
040 | content: " "; |
041 | position: absolute; |
042 | left: 0; |
043 | right: 0; |
044 | height: 1px; |
045 | color: #d9d9d9; |
046 | } |
047 |
048 | .weui-cells:after { |
049 | bottom: 0; |
050 | border-bottom: 1rpx solid #d9d9d9; |
051 | } |
052 |
053 | .weui-cells__title { |
054 | margin-top: 0.77em; |
055 | margin-bottom: 0.3em; |
056 | padding-left: 15px; |
057 | padding-right: 15px; |
058 | color: #999; |
059 | font-size: 14px; |
060 | } |
061 |
062 | .weui-cells_after-title { |
063 | margin-top: 0; |
064 | } |
065 |
066 | .weui-cells__tips { |
067 | margin-top: 0.3em; |
068 | color: #999; |
069 | padding-left: 15px; |
070 | padding-right: 15px; |
071 | font-size: 14px; |
072 | } |
073 |
074 | .weui-cell { |
075 | padding: 10px 15px; |
076 | position: relative; |
077 | display: -webkit-box; |
078 | display: -webkit-flex; |
079 | display: flex; |
080 | -webkit-box-align: center; |
081 | -webkit-align-items: center; |
082 | align-items: center; |
083 | } |
084 |
085 | .weui-cell:before { |
086 | content: " "; |
087 | position: absolute; |
088 | top: 0; |
089 | right: 0; |
090 | height: 1px; |
091 | border-top: 1rpx solid #d9d9d9; |
092 | color: #d9d9d9; |
093 | left: 15px; |
094 | } |
095 |
096 | .weui-cell:first-child:before { |
097 | display: none; |
098 | } |
099 |
100 | .weui-cell_active { |
101 | background-color: #ececec; |
102 | } |
103 |
104 | .weui-cell_primary { |
105 | -webkit-box-align: start; |
106 | -webkit-align-items: flex-start; |
107 | align-items: flex-start; |
108 | } |
109 |
110 | .weui-cell__bd { |
111 | text-overflow: ellipsis; |
112 | overflow: hidden; |
113 | white-space: nowrap; |
114 | -webkit-box-flex: 1; |
115 | -webkit-flex: 1; |
116 | flex: 1; |
117 | } |
118 |
119 | .weui-cell__ft { |
120 | text-align: right; |
121 | color: #999; |
122 | } |
123 |
124 | .weui-cell_access { |
125 | color: inherit; |
126 | } |
127 |
128 | .weui-cell__ft_in-access { |
129 | padding-right: 13px; |
130 | position: relative; |
131 | } |
132 |
133 | weui-cell__ft weui-cell__ft_in-access |
134 | .weui-cell__ft_in-access { |
135 | padding-right: 13px; |
136 | position: relative; |
137 | } |
138 |
139 | .weui-cell__ft_in-access:after { |
140 | content: " "; |
141 | display: inline-block; |
142 | height: 6px; |
143 | width: 6px; |
144 | border-width: 2px 2px 0 0; |
145 | border-color: #c8c8cd; |
146 | border-style: solid; |
147 | -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); |
148 | transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0); |
149 | top: -2px; |
150 | position: absolute; |
151 | top: 50%; |
152 | margin-top: -4px; |
153 | } |
154 |
155 | image { |
156 | width: 100%; |
157 | display: inline-block; |
158 | overflow: hidden; |
159 | } |
160 |
161 | .flex-wrp-row { |
162 | opacity: 0.7; |
163 | position: fixed; |
164 | height: 100%; |
165 | width: 100%; |
166 | display: flex; |
167 | flex-direction: column; |
168 | align-items: center; /*垂直居中*/ |
169 | justify-content: center; /*水平居中*/ |
170 | } |
171 |
172 | .flex-wrp-list { |
173 | position: fixed; |
174 | height: 100%; |
175 | width: 100%; |
176 | } |
177 |
178 | button { |
179 | opacity: 0.7; |
180 | } |
给出的代码实现所有功能的代码，这里说明下，其中page:before中为重点代码，css其他属性中的opacity：0.7为后期实现所有地方透明我们定义了一个半透明。
正文到此结束
版权声明：本文中使用的部分内容来自于网络，如有侵权，请联系《博主》进行删除
QQ游客
好羞射，文章真的好赞啊，顶博主!!!