|
12 | 12 | bottom: vertical === 'bottom' && direction === 'vertical', |
13 | 13 | right: horizontal === 'right' && direction === 'horizontal' |
14 | 14 | }" :style="{ 'background-color': styles.buttonColor }" class="fab-circle" @click="_onClick"> |
15 | | - <uni-icons :class="{ active: isShow }" class="uni-icon uni-icon-plusempty" /> |
| 15 | + <view class="fab-circle-box" :class="{ active: isShow }"> |
| 16 | + <view class="fab-circle-v"></view> |
| 17 | + <view class="fab-circle-h"></view> |
| 18 | + </view> |
16 | 19 | </view> |
17 | 20 | <view :class="{ |
18 | 21 | left: horizontal === 'left', |
|
179 | 182 | </script> |
180 | 183 |
|
181 | 184 | <style scoped> |
182 | | - @font-face { |
183 | | - font-family: uniicons; |
184 | | - font-weight: normal; |
185 | | - font-style: normal; |
186 | | - src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); |
187 | | - } |
188 | 185 |
|
189 | 186 | .uni-icon { |
190 | 187 | font-family: uniicons; |
|
210 | 207 | } |
211 | 208 |
|
212 | 209 | .fab-box.top { |
213 | | - width: 60upx; |
214 | | - height: 60upx; |
215 | | - right: 30upx; |
216 | | - bottom: 60upx; |
| 210 | + width: 60rpx; |
| 211 | + height: 60rpx; |
| 212 | + right: 30rpx; |
| 213 | + bottom: 60rpx; |
217 | 214 | border: 1px #5989b9 solid; |
218 | 215 | background: #6699cc; |
219 | | - border-radius: 10upx; |
| 216 | + border-radius: 10rpx; |
220 | 217 | color: #fff; |
221 | 218 | transition: all 0.3; |
222 | 219 | opacity: 0; |
|
231 | 228 | } |
232 | 229 |
|
233 | 230 | .fab-box.fab.leftBottom { |
234 | | - left: 30upx; |
235 | | - bottom: 60upx; |
| 231 | + left: 30rpx; |
| 232 | + bottom: 60rpx; |
236 | 233 | } |
237 | 234 |
|
238 | 235 | .fab-box.fab.leftTop { |
239 | | - left: 30upx; |
240 | | - top: 80upx; |
| 236 | + left: 30rpx; |
| 237 | + top: 80rpx; |
241 | 238 | /* #ifdef H5 */ |
242 | | - top: calc(80upx + var(--window-top)); |
| 239 | + top: calc(80rpx + var(--window-top)); |
243 | 240 | /* #endif */ |
244 | 241 | } |
245 | 242 |
|
246 | 243 | .fab-box.fab.rightBottom { |
247 | | - right: 30upx; |
248 | | - bottom: 60upx; |
| 244 | + right: 30rpx; |
| 245 | + bottom: 60rpx; |
249 | 246 | } |
250 | 247 |
|
251 | 248 | .fab-box.fab.rightTop { |
252 | | - right: 30upx; |
253 | | - top: 80upx; |
| 249 | + right: 30rpx; |
| 250 | + top: 80rpx; |
254 | 251 | /* #ifdef H5 */ |
255 | | - top: calc(80upx + var(--window-top)); |
| 252 | + top: calc(80rpx + var(--window-top)); |
256 | 253 | /* #endif */ |
257 | 254 | } |
258 | 255 |
|
|
261 | 258 | justify-content: center; |
262 | 259 | align-items: center; |
263 | 260 | position: absolute; |
264 | | - width: 110upx; |
265 | | - height: 110upx; |
| 261 | + width: 110rpx; |
| 262 | + height: 110rpx; |
266 | 263 | background: #3c3e49; |
267 | 264 | /* background: #5989b9; */ |
268 | 265 | border-radius: 50%; |
269 | 266 | box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); |
270 | 267 | z-index: 11; |
271 | 268 | } |
272 | 269 |
|
| 270 | + .fab-circle-box { |
| 271 | + position: absolute; |
| 272 | + left: 0; |
| 273 | + top: 0; |
| 274 | + right: 0; |
| 275 | + bottom: 0; |
| 276 | + transition: all 0.3s; |
| 277 | + } |
| 278 | +
|
| 279 | + .fab-circle-v { |
| 280 | + position: absolute; |
| 281 | + width: 8rpx; |
| 282 | + height: 60rpx; |
| 283 | + left: 50%; |
| 284 | + top: 50%; |
| 285 | + margin: -30rpx 0 0 -4rpx; |
| 286 | + background-color: white; |
| 287 | + } |
| 288 | +
|
| 289 | + .fab-circle-h { |
| 290 | + position: absolute; |
| 291 | + width: 60rpx; |
| 292 | + height: 8rpx; |
| 293 | + left: 50%; |
| 294 | + top: 50%; |
| 295 | + margin: -4rpx 0 0 -30rpx; |
| 296 | + background-color: white; |
| 297 | + } |
| 298 | +
|
273 | 299 | .fab-circle.left { |
274 | 300 | left: 0; |
275 | 301 | } |
|
288 | 314 |
|
289 | 315 | .fab-circle .uni-icon-plusempty { |
290 | 316 | color: #ffffff; |
291 | | - font-size: 80upx; |
| 317 | + font-size: 80rpx; |
292 | 318 | transition: all 0.3s; |
293 | 319 | font-weight: bold; |
294 | 320 | } |
295 | 321 |
|
296 | | - .fab-circle .uni-icon-plusempty.active { |
| 322 | + .fab-circle-box.active { |
297 | 323 | transform: rotate(135deg); |
298 | | - font-size: 80upx; |
| 324 | + font-size: 80rpx; |
299 | 325 | } |
300 | 326 |
|
301 | 327 | .fab-content { |
302 | 328 | background: #6699cc; |
303 | 329 | box-sizing: border-box; |
304 | 330 | display: flex; |
305 | | - border-radius: 100upx; |
| 331 | + border-radius: 100rpx; |
306 | 332 | overflow: hidden; |
307 | 333 | box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); |
308 | 334 | transition: all 0.2s; |
309 | | - width: 110upx; |
| 335 | + width: 110rpx; |
310 | 336 | } |
311 | 337 |
|
312 | 338 | .fab-content.left { |
|
337 | 363 | flex-direction: column; |
338 | 364 | justify-content: center; |
339 | 365 | align-items: center; |
340 | | - width: 110upx; |
341 | | - height: 110upx; |
342 | | - font-size: 24upx; |
| 366 | + width: 110rpx; |
| 367 | + height: 110rpx; |
| 368 | + font-size: 24rpx; |
343 | 369 | color: #fff; |
344 | 370 | opacity: 0; |
345 | 371 | transition: opacity 0.2s; |
|
350 | 376 | } |
351 | 377 |
|
352 | 378 | .fab-content .fab-item .content-image { |
353 | | - width: 50upx; |
354 | | - height: 50upx; |
355 | | - margin-bottom: 5upx; |
| 379 | + width: 50rpx; |
| 380 | + height: 50rpx; |
| 381 | + margin-bottom: 5rpx; |
356 | 382 | } |
357 | 383 |
|
358 | 384 | .fab-content .fab-item.first { |
359 | | - width: 110upx; |
| 385 | + width: 110rpx; |
360 | 386 | } |
361 | 387 | </style> |
0 commit comments