FontAwesome-加载状态-1.1

本文解析了Font Awesome图标在不同加载状态下的HTML类变化,包括初始搜索图标、图标替换完成及加载过程中的状态切换。介绍了如何利用这些状态进行自定义样式设计,激发读者创意。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    浏览器开始搜索图标时:

<html class="fontawesome-i2svg-pending">

    图标替换完:

<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">

    一旦第一次成功加载图标,fontawesome-i2svg-active 就不变,如果还有图标需要加载,则 fontawesome-i2svg-complete 变成 fontawesome-i2svg-pending。

 

    了解了这些,我们就可以根据不同状态,玩一些别的了。比如加个样式什么的?那就开启你的脑洞吧。

 

参考:

    https://fontawesome.com/how-to-use/on-the-web/advanced/svg-asynchronous-loading 

<template> <view class="container"> <!-- 顶部用户信息区域 --> <view class="user-info-section"> <view class="avatar-container"> <image src="/static/workbanch/banner/workbench/4.jpg" class="avatar-image" mode="aspectFill" /> <view class="avatar-frame"></view> </view> <!-- 用户信息 --> <view class="user-details"> <text class="welcome-text">您好,</text> <text class="username">{{ userName || '加载...' }}</text> <view class="user-meta"> <text class="user-role">{{ userRole }}</text> <text class="user-dept">{{ userDept }}</text> <text class="user-phone" v-if="userPhone">电话:{{ userPhone }}</text> </view> </view> </view> <!-- 功能板块区域 --> <view class="function-section"> <!-- 重置密码按钮 --> <view class="function-item" @click="handleResetPassword" @touchstart="handleTouchStart('reset')" @touchend="handleTouchEnd('reset')" > <view class="item-left"> <image src="/static/workbanch/icons/reset-password.png" class="item-icon" /> <text class="item-text">重置密码</text> </view> <view class="arrow-icon">›</view> </view> <!-- 分隔线 --> <view class="divider"></view> <!-- 退出登录按钮 --> <view class="function-item logout-item" @click="handleLogout" @touchstart="handleTouchStart('logout')" @touchend="handleTouchEnd('logout')" > <view class="item-left"> <image src="/static/workbanch/icons/logout.png" class="item-icon" /> <text class="item-text">退出登录</text> </view> <view class="arrow-icon">›</view> </view> </view> <!-- 这里添加了function-section的结束标签 --> <!-- 重置密码弹窗 (优化后的布局) --> <view v-if="showResetModal" class="modal-overlay" @click.self="closeResetModal"> <view class="modal-content"> <view class="modal-header"> <text class="modal-title">重置密码</text> <text class="modal-close" @click="closeResetModal">×</text> </view> <view class="input-group"> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="oldPassword" type="password" placeholder="请输入旧密码" class="password-input" placeholder-style="color: #aaa;" /> </view> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="newPassword" type="password" placeholder="请输入新密码(6-20位)" class="password-input" placeholder-style="color: #aaa;" /> </view> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="confirmPassword" type="password" placeholder="请确认新密码" class="password-input" placeholder-style="color: #aaa;" /> </view> </view> <view class="modal-buttons"> <button class="cancel-btn" @click="closeResetModal">取消</button> <button class="confirm-btn" @click="submitResetPassword">确定</button> </view> </view> </view> </view> </template> <script setup> import { ref } from 'vue'; import { onShow, onTabItemTap } from '@dcloudio/uni-app'; // 用户信息相关 const userName = ref(''); const userRole = ref(''); const userDept = ref(''); const userPhone = ref(''); // 重置密码 const showResetModal = ref(false); const oldPassword = ref(''); const newPassword = ref(''); const confirmPassword = ref(''); // 触摸状态 const touchState = ref({ reset: false, logout: false }); // 页面显示时加载数据 onShow(() => { // console.log('onShow 被触发'); loadUserInfo(); // 加载用户信息 }); // tabbar 页面被点击时触发 onTabItemTap(() => { // console.log('tabbar 页面被点击'); loadUserInfo(); // 强制刷新数据 }); const forceRefresh = true; // 加载用户信息 const loadUserInfo = async () => { try { const userInfo = uni.getStorageSync('userInfo'); // console.log('本地缓存 userInfo:', userInfo); if (!forceRefresh && userInfo && userInfo.userName) { // 使用缓存 userName.value = userInfo.nickName || userInfo.userName || '未知用户'; userRole.value = userInfo.roles?.[0]?.roleName || '普通用户'; userDept.value = userInfo.dept?.deptName || '未分配部门'; userPhone.value = userInfo.phonenumber || '暂无电话'; } else { // console.log('开始请求用户信息...'); const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile', method: 'GET', header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') } }); // console.log('接口返回结果:', res); if (res.statusCode === 200 && res.data.code === 200) { const userData = res.data.data; uni.setStorageSync('userInfo', userData); userName.value = userData.nickName || userData.userName || '未知用户'; userRole.value = userData.roles?.[0]?.roleName || '普通用户'; userDept.value = userData.dept?.deptName || '未分配部门'; userPhone.value = userData.phonenumber || '暂无电话'; } else { uni.showToast({ title: '获取用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } } } catch (error) { console.error('加载用户信息失败:', error); uni.showToast({ title: '加载用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } }; // 处理触摸开始 const handleTouchStart = (type) => { touchState.value[type] = true; }; // 处理触摸结束 const handleTouchEnd = (type) => { touchState.value[type] = false; }; // 显示弹窗 const handleResetPassword = () => { uni.vibrateShort(); // 震动反馈 showResetModal.value = true; }; // 关闭弹窗 const closeResetModal = () => { showResetModal.value = false; }; // 提交重置密码 const submitResetPassword = async () => { const { oldPassword: oldPass, newPassword: newPass, confirmPassword: confirmPass } = { oldPassword: oldPassword.value, newPassword: newPassword.value, confirmPassword: confirmPassword.value }; if (!oldPass || !newPass || !confirmPass) { uni.showToast({ title: '所有密码都必须填写', icon: 'none' }); return; } if (newPass !== confirmPass) { uni.showToast({ title: '新密码与确认密码不一致', icon: 'none' }); return; } uni.showLoading({ title: '提交中...' }); try { const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile/updatePwd', method: 'POST', header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token'), 'Content-Type': 'application/json' }, data: { oldPassword: oldPass, newPassword: newPass } }); uni.hideLoading(); if (res.statusCode === 200 && res.data.code === 200) { uni.showToast({ title: '密码修改成功', icon: 'success' }); uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); } else { uni.showToast({ title: '密码修改失败', icon: 'none' }); } } catch (error) { uni.hideLoading(); uni.showToast({ title: '网络请求失败', icon: 'none' }); console.error('请求失败:', error); } closeResetModal(); }; // 处理退出登录 const handleLogout = () => { uni.vibrateShort(); // 添加震动反馈 uni.showModal({ title: '确认退出', content: '您确定要退出当前账号吗?', confirmText: '退出登录', confirmColor: '#e74c3c', success: (res) => { if (res.confirm) { // 清除用户相关数据 uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); uni.removeStorageSync('savedUsername'); // 显示退出提示 uni.showToast({ title: '已退出登录', icon: 'success', duration: 1500 }); // 跳转到登录页 setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); } } }); }; </script> <style lang="scss" scoped> .container { padding: 20rpx; background-color: #f5f7fa; min-height: 100vh; } /* 用户信息区域样式 */ .user-info-section { display: flex; align-items: center; padding: 30rpx; margin: 20rpx 0; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; position: relative; overflow: hidden; border-radius: 24rpx; &::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } } .user-phone { display: block; font-size: 24rpx; // margin-top: 10rpx; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } .avatar-container { position: relative; width: 120rpx; height: 120rpx; margin-right: 30rpx; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; } .avatar-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4rpx solid rgba(255, 255, 255, 0.3); border-radius: 50%; box-sizing: border-box; } .user-details { flex: 1; } .welcome-text { font-size: 28rpx; opacity: 0.9; } .username { display: block; font-size: 40rpx; font-weight: bold; margin: 8rpx 0; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); } .user-meta { display: flex; flex-wrap: wrap; gap: 15rpx; margin-top: 15rpx; } .user-role, .user-dept { font-size: 24rpx; background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } /* 功能板块区域 */ .function-section { background-color: #fff; border-radius: 24rpx; margin: 30rpx 40rpx; /* 左右边距增加 */ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); overflow: hidden; } .function-item { display: flex; align-items: center; justify-content: space-between; padding: 30rpx 35rpx; /* 增加左右内边距 */ position: relative; transition: all 0.2s ease; /* 点击效果 - 缩放 */ &:active { transform: scale(0.98); background-color: #f8f8f8; } /* 触摸效果 - 高亮 */ &.touch-active { background-color: #f0f9ff; transform: scale(0.98); .item-text { font-weight: bold; } } } .logout-item { .item-text { color: #e74c3c; } &.touch-active { background-color: #fff0f0; } } .item-left { display: flex; align-items: center; } .item-icon { width: 44rpx; height: 44rpx; margin-right: 20rpx; transition: transform 0.2s ease; .touch-active & { transform: scale(1.1); } } .item-text { font-size: 32rpx; color: #333; transition: all 0.2s ease; .touch-active & { transform: translateX(5px); } } .arrow-icon { font-size: 40rpx; color: #999; transform: scale(1.5, 1.5); transition: all 0.2s ease; .touch-active & { transform: scale(1.5, 1.5) translateX(-5px); } } .divider { height: 1rpx; background-color: #f0f0f0; margin: 0 35rpx; /* 与内边距一致 */ } /* 动画效果 */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.3s ease; } /* 重置密码弹窗*/ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: #fff; width: 80%; max-width: 600rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(100rpx); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; background-color: #f8f8f8; border-bottom: 1rpx solid #eee; } .modal-title { font-size: 34rpx; font-weight: bold; color: #333; } .modal-close { font-size: 40rpx; color: #999; padding: 10rpx 20rpx; } .input-group { padding: 30rpx; } .input-item { display: flex; align-items: center; margin-bottom: 30rpx; padding-bottom: 15rpx; border-bottom: 1rpx solid #eee; &:last-child { margin-bottom: 0; } } .input-icon { width: 36rpx; height: 36rpx; margin-right: 20rpx; opacity: 0.7; } .password-input { flex: 1; height: 60rpx; font-size: 30rpx; color: #333; } .modal-buttons { display: flex; border-top: 1rpx solid #eee; } .cancel-btn, .confirm-btn { flex: 1; height: 90rpx; line-height: 90rpx; font-size: 32rpx; border-radius: 0; background: none; position: relative; &::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1rpx; background-color: #eee; } } .cancel-btn { color: #666; &:active { background-color: #f8f8f8; } } .confirm-btn { color: #3498db; font-weight: bold; &:active { background-color: #f0f9ff; } } .confirm-btn::after { left: 0; } .cancel-btn::after { display: none; } </style> 我想要重置密码弹窗的输入框最右边有一个小眼睛,点击可以显示输入的具体内容
最新发布
08-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值