增加头像加载中效果

This commit is contained in:
ember 2025-04-12 16:04:13 +08:00
parent cc75339cf1
commit 9d8afa2473
10 changed files with 48 additions and 10 deletions

1
dist/css/5.d70f219a.css vendored Normal file
View File

@ -0,0 +1 @@
.user-meta[data-v-9156a04c]{position:relative;display:inline-block}.user-basic[data-v-9156a04c]{display:flex;align-items:center;gap:8px;cursor:pointer}.avatar-wrapper[data-v-9156a04c]{position:relative;width:36px;height:36px}.avatar[data-v-9156a04c]{width:36px;height:36px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #eee}.avatar-loading[data-v-9156a04c]{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,100%,.7);border-radius:50%;display:flex;justify-content:center;align-items:center}.loading-spinner[data-v-9156a04c]{width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #3273dc;border-radius:50%;animation:spin-9156a04c 1s linear infinite}@keyframes spin-9156a04c{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.user-name[data-v-9156a04c]{font-weight:500;font-size:14px;color:#333}.user-badges[data-v-9156a04c]{display:flex;gap:4px}.badge[data-v-9156a04c]{display:inline-block;padding:1px 6px;border-radius:4px;font-size:12px;color:#fff}.verified[data-v-9156a04c]{background-color:#3273dc}.invited[data-v-9156a04c]{background-color:coral}.medal[data-v-9156a04c]{background-color:gold;color:#333}.user-detail[data-v-9156a04c]{position:absolute;top:calc(100% + 8px);left:0;width:280px;z-index:9999}.detail-fade-enter-active[data-v-9156a04c],.detail-fade-leave-active[data-v-9156a04c]{transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top}.detail-fade-enter-from[data-v-9156a04c],.detail-fade-leave-to[data-v-9156a04c]{opacity:0;transform:scale(.95) translateY(-10px)}.detail-fade-enter-to[data-v-9156a04c],.detail-fade-leave-from[data-v-9156a04c]{opacity:1;transform:scale(1) translateY(0)}.card-container[data-v-9156a04c]{background-color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);overflow:hidden}.detail-header[data-v-9156a04c]{position:relative;padding:16px 16px 4px}.header-bg[data-v-9156a04c]{position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,#3273dc,#6cb6ff);opacity:.3}.detail-avatar[data-v-9156a04c]{width:64px;height:64px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative;z-index:1;background-color:#fff}.detail-right[data-v-9156a04c]{margin-top:8px;position:relative}.detail-name[data-v-9156a04c]{font-weight:600;font-size:18px;margin-bottom:4px;color:#333}.user-sign[data-v-9156a04c]{margin:8px 16px;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background-color:#f8f9fa;border-radius:8px}.sign-icon[data-v-9156a04c]{font-size:16px;color:#666}.sign-text[data-v-9156a04c]{font-size:13px;color:#555;line-height:1.9;flex:1}.user-stats[data-v-9156a04c]{display:flex;justify-content:center;align-items:center;padding:12px 16px;background-color:#f8f9fa;margin:0 16px;border-radius:8px}.stat-item[data-v-9156a04c]{text-align:center;flex:1}.stat-separator[data-v-9156a04c]{width:1px;height:24px;background-color:#ddd;margin:0 16px}.stat-value[data-v-9156a04c]{font-weight:600;font-size:16px;color:#333}.stat-label[data-v-9156a04c]{font-size:12px;color:#666;margin-top:2px}.card-footer[data-v-9156a04c]{padding:12px 16px 16px;text-align:center}.follow-btn[data-v-9156a04c]{background:linear-gradient(135deg,#3273dc,#4a89ff);color:#fff;border:none;border-radius:20px;padding:6px 18px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px rgba(50,115,220,.3)}.follow-btn[data-v-9156a04c]:hover{background:linear-gradient(135deg,#2366d1,#3273dc);transform:translateY(-1px);box-shadow:0 4px 8px rgba(50,115,220,.4)}.user-demo[data-v-0801b4ba]{max-width:900px;margin:0 auto;padding:40px 20px}h1[data-v-0801b4ba],h2[data-v-0801b4ba]{color:#333}h1[data-v-0801b4ba]{text-align:center;margin-bottom:40px}.section[data-v-0801b4ba]{margin-bottom:40px}h2[data-v-0801b4ba]{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #eee}.example[data-v-0801b4ba]{background-color:#f9f9f9;padding:20px;border-radius:8px}.users-grid[data-v-0801b4ba]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.user-card[data-v-0801b4ba]{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:16px;transition:transform .2s,box-shadow .2s}.user-card[data-v-0801b4ba]:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.card-content[data-v-0801b4ba]{margin-top:16px;padding-top:16px;border-top:1px solid #eee}.hint[data-v-0801b4ba]{margin-top:8px;font-size:12px;color:#666;font-style:italic}

View File

@ -1 +0,0 @@
.user-meta[data-v-345b8298]{position:relative;display:inline-block}.user-basic[data-v-345b8298]{display:flex;align-items:center;gap:8px;cursor:pointer}.avatar[data-v-345b8298]{width:36px;height:36px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #eee}.user-name[data-v-345b8298]{font-weight:500;font-size:14px;color:#333}.user-badges[data-v-345b8298]{display:flex;gap:4px}.badge[data-v-345b8298]{display:inline-block;padding:1px 6px;border-radius:4px;font-size:12px;color:#fff}.verified[data-v-345b8298]{background-color:#3273dc}.invited[data-v-345b8298]{background-color:coral}.medal[data-v-345b8298]{background-color:gold;color:#333}.user-detail[data-v-345b8298]{position:absolute;top:calc(100% + 8px);left:0;width:280px;z-index:9999}.detail-fade-enter-active[data-v-345b8298],.detail-fade-leave-active[data-v-345b8298]{transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top}.detail-fade-enter-from[data-v-345b8298],.detail-fade-leave-to[data-v-345b8298]{opacity:0;transform:scale(.95) translateY(-10px)}.detail-fade-enter-to[data-v-345b8298],.detail-fade-leave-from[data-v-345b8298]{opacity:1;transform:scale(1) translateY(0)}.card-container[data-v-345b8298]{background-color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);overflow:hidden}.detail-header[data-v-345b8298]{position:relative;padding:16px 16px 4px}.header-bg[data-v-345b8298]{position:absolute;top:0;left:0;right:0;height:60px;background:linear-gradient(135deg,#3273dc,#6cb6ff);opacity:.3}.detail-avatar[data-v-345b8298]{width:64px;height:64px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:relative;z-index:1;background-color:#fff}.detail-right[data-v-345b8298]{margin-top:8px;position:relative}.detail-name[data-v-345b8298]{font-weight:600;font-size:18px;margin-bottom:4px;color:#333}.user-sign[data-v-345b8298]{margin:8px 16px;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background-color:#f8f9fa;border-radius:8px}.sign-icon[data-v-345b8298]{font-size:16px;color:#666}.sign-text[data-v-345b8298]{font-size:13px;color:#555;line-height:1.9;flex:1}.user-stats[data-v-345b8298]{display:flex;justify-content:center;align-items:center;padding:12px 16px;background-color:#f8f9fa;margin:0 16px;border-radius:8px}.stat-item[data-v-345b8298]{text-align:center;flex:1}.stat-separator[data-v-345b8298]{width:1px;height:24px;background-color:#ddd;margin:0 16px}.stat-value[data-v-345b8298]{font-weight:600;font-size:16px;color:#333}.stat-label[data-v-345b8298]{font-size:12px;color:#666;margin-top:2px}.card-footer[data-v-345b8298]{padding:12px 16px 16px;text-align:center}.follow-btn[data-v-345b8298]{background:linear-gradient(135deg,#3273dc,#4a89ff);color:#fff;border:none;border-radius:20px;padding:6px 18px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px rgba(50,115,220,.3)}.follow-btn[data-v-345b8298]:hover{background:linear-gradient(135deg,#2366d1,#3273dc);transform:translateY(-1px);box-shadow:0 4px 8px rgba(50,115,220,.4)}.user-demo[data-v-0801b4ba]{max-width:900px;margin:0 auto;padding:40px 20px}h1[data-v-0801b4ba],h2[data-v-0801b4ba]{color:#333}h1[data-v-0801b4ba]{text-align:center;margin-bottom:40px}.section[data-v-0801b4ba]{margin-bottom:40px}h2[data-v-0801b4ba]{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #eee}.example[data-v-0801b4ba]{background-color:#f9f9f9;padding:20px;border-radius:8px}.users-grid[data-v-0801b4ba]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.user-card[data-v-0801b4ba]{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:16px;transition:transform .2s,box-shadow .2s}.user-card[data-v-0801b4ba]:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.card-content[data-v-0801b4ba]{margin-top:16px;padding-top:16px;border-top:1px solid #eee}.hint[data-v-0801b4ba]{margin-top:8px;font-size:12px;color:#666;font-style:italic}

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1 +1 @@
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>NEU小站</title><script defer="defer" src="/js/chunk-vendors.2587987c.js"></script><script defer="defer" src="/js/app.636fb7aa.js"></script><link href="/css/app.91c3e0f8.css" rel="stylesheet"></head><body><noscript><strong>抱歉NEU小站无法在没有 JavaScript 的情况下正常工作。请启用 JavaScript 以继续。</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>NEU小站</title><script defer="defer" src="/js/chunk-vendors.2587987c.js"></script><script defer="defer" src="/js/app.adcb648f.js"></script><link href="/css/app.91c3e0f8.css" rel="stylesheet"></head><body><noscript><strong>抱歉NEU小站无法在没有 JavaScript 的情况下正常工作。请启用 JavaScript 以继续。</strong></noscript><div id="app"></div></body></html>

File diff suppressed because one or more lines are too long

2
dist/js/5.56366bd5.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/js/874.840423db.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff