编译windows版本连接器
This commit is contained in:
Yeomai committed
1 parent
e626e685fc
commit
97e6713cfd
9 files changed
+40
-37
No files matched your search
+23
-20
@@ -178,8 +178,11 @@ onBeforeUnmount(closePromotionPreview)
|
||||
|
||||
<style scoped>
|
||||
.welcome-shell {
|
||||
/* --u 是“1px”在 1920 宽下的缩放单位：宽度不超过 1920 时恒为 1px（外观不变），
|
||||
更宽的屏幕按 100vw / 1920 线性放大，保证 2K/4K 与 1080p 的画面比例一致。 */
|
||||
--u: max(1px, calc(100vw / 1920));
|
||||
position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
|
||||
padding: clamp(22px, 3vw, 42px) clamp(22px, 4vw, 64px) 28px;
|
||||
padding: clamp(22px, 3vw, calc(42 * var(--u))) clamp(22px, 4vw, calc(64 * var(--u))) calc(28 * var(--u));
|
||||
color: #eef0f5;
|
||||
background:
|
||||
radial-gradient(circle at 17% 0%, rgba(218, 45, 57, .16), transparent 32%),
|
||||
@@ -190,33 +193,33 @@ onBeforeUnmount(closePromotionPreview)
|
||||
.welcome-shell::before {
|
||||
position: fixed; inset: 0; pointer-events: none; content: ""; opacity: .22;
|
||||
background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
background-size: calc(42 * var(--u)) calc(42 * var(--u));
|
||||
mask-image: linear-gradient(to bottom, #000, transparent 70%);
|
||||
}
|
||||
.welcome-header, .welcome-intro, .hub-grid { position: relative; }
|
||||
.welcome-header { display: flex; min-height: 42px; align-items: center; gap: 18px; }
|
||||
.welcome-header { display: flex; min-height: calc(42 * var(--u)); align-items: center; gap: calc(18 * var(--u)); }
|
||||
.welcome-header { z-index: 40; }
|
||||
.brand-link { display: inline-flex; border-radius: 6px; transition: opacity .16s ease; }
|
||||
.brand-link:hover { opacity: .78; }
|
||||
.brand-link:focus-visible { outline: 2px solid #ef5147; outline-offset: 5px; }
|
||||
.brand-logo { display: block; width: clamp(128px, 10vw, 156px); height: auto; }
|
||||
.welcome-intro { padding: clamp(34px, 6vh, 64px) 0 clamp(22px, 3.5vh, 34px); text-align: center; }
|
||||
.brand-logo { display: block; width: clamp(128px, 10vw, calc(156 * var(--u))); height: auto; }
|
||||
.welcome-intro { padding: clamp(34px, 6vh, calc(64 * var(--u))) 0 clamp(22px, 3.5vh, calc(34 * var(--u))); text-align: center; }
|
||||
.welcome-intro h1 {
|
||||
max-width: none; margin: 0 auto; color: #f3f3f5;
|
||||
font-size: clamp(20px, 2.4vw, 40px); line-height: 1.1; letter-spacing: -.025em; white-space: nowrap;
|
||||
font-size: clamp(20px, 2.4vw, calc(40 * var(--u))); line-height: 1.1; letter-spacing: -.025em; white-space: nowrap;
|
||||
}
|
||||
.welcome-intro h1 span { color: #ff4e47; }
|
||||
.welcome-intro p { max-width: 390px; margin: 0 0 3px; color: #8c93a3; font-size: 13px; line-height: 1.75; }
|
||||
.hub-grid {
|
||||
display: grid; min-height: 0; flex: 0 1 auto;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px);
|
||||
width: min(100%, 1540px); margin: 0 auto;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, calc(22 * var(--u)));
|
||||
width: min(100%, calc(1540 * var(--u))); margin: 0 auto;
|
||||
}
|
||||
.hub-card {
|
||||
--hub-border: #242731;
|
||||
--hub-divider: #242731;
|
||||
position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column;
|
||||
padding: 0; overflow: hidden; border: 1px solid var(--hub-border); border-radius: 18px;
|
||||
padding: 0; overflow: hidden; border: 1px solid var(--hub-border); border-radius: calc(18 * var(--u));
|
||||
background: linear-gradient(180deg, rgba(26,29,38,.94), rgba(15,17,23,.98));
|
||||
color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
|
||||
box-shadow: 0 20px 52px rgba(0,0,0,.25);
|
||||
@@ -228,24 +231,24 @@ onBeforeUnmount(closePromotionPreview)
|
||||
.viewer-card:hover, .thumbnail-card:hover { --hub-border: #f04d45; }
|
||||
.hub-preview { position: relative; width: 100%; aspect-ratio: 3 / 2; flex: 0 0 auto; overflow: hidden; border-bottom: 1px solid #252832; }
|
||||
.preview-badge {
|
||||
position: absolute; top: 14px; left: 14px; z-index: 4; padding: 5px 9px;
|
||||
position: absolute; top: calc(14 * var(--u)); left: calc(14 * var(--u)); z-index: 4; padding: calc(5 * var(--u)) calc(9 * var(--u));
|
||||
border: 1px solid rgba(255,255,255,.11); border-radius: 999px;
|
||||
background: rgba(10,11,16,.72); color: #c7cbd5; font-size: 9px; letter-spacing: .08em;
|
||||
background: rgba(10,11,16,.72); color: #c7cbd5; font-size: calc(9 * var(--u)); letter-spacing: .08em;
|
||||
backdrop-filter: blur(7px);
|
||||
}
|
||||
.badge-with-icon { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.badge-with-icon img { display: block; width: 16px; height: 16px; border-radius: 4px; }
|
||||
.card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: clamp(16px, 1.7vw, 24px) clamp(16px, 1.8vw, 25px) 0; }
|
||||
.card-body h2 { margin: 0 0 8px; color: #f1f2f5; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
|
||||
.card-body p { min-height: 40px; margin: 0; color: #858c9c; font-size: 12px; line-height: 1.65; }
|
||||
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
|
||||
.tag-row span { padding: 4px 8px; border: 1px solid #34394a; border-radius: 999px; background: #1a1e2a; color: #8f98ad; font-size: 9px; }
|
||||
.badge-with-icon { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
|
||||
.badge-with-icon img { display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); }
|
||||
.card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: clamp(16px, 1.7vw, calc(24 * var(--u))) clamp(16px, 1.8vw, calc(25 * var(--u))) 0; }
|
||||
.card-body h2 { margin: 0 0 calc(8 * var(--u)); color: #f1f2f5; font-size: clamp(22px, 1.8vw, calc(28 * var(--u))); line-height: 1.1; letter-spacing: -.02em; }
|
||||
.card-body p { min-height: calc(40 * var(--u)); margin: 0; color: #858c9c; font-size: calc(12 * var(--u)); line-height: 1.65; }
|
||||
.tag-row { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin: calc(14 * var(--u)) 0 calc(18 * var(--u)); }
|
||||
.tag-row span { padding: calc(4 * var(--u)) calc(8 * var(--u)); border: 1px solid #34394a; border-radius: 999px; background: #1a1e2a; color: #8f98ad; font-size: calc(9 * var(--u)); }
|
||||
.editor-card .tag-row span { border-color: rgba(119,116,255,.35); background: rgba(74,72,150,.16); color: #aaa7f5; }
|
||||
.viewer-card .tag-row span, .thumbnail-card .tag-row span { border-color: rgba(238,76,68,.24); background: rgba(111,36,37,.14); color: #d99a97; }
|
||||
.card-action {
|
||||
display: flex; width: 100%; min-height: 76px; flex: 0 0 auto; align-items: center; justify-content: center;
|
||||
display: flex; width: 100%; min-height: calc(76 * var(--u)); flex: 0 0 auto; align-items: center; justify-content: center;
|
||||
border-top: 1px solid var(--hub-divider); background: #13161d; color: #f3f4f7;
|
||||
font-size: clamp(17px, 1.35vw, 21px); font-weight: 750; letter-spacing: -.01em;
|
||||
font-size: clamp(17px, 1.35vw, calc(21 * var(--u))); font-weight: 750; letter-spacing: -.01em;
|
||||
transition: background-color .18s ease, color .18s ease;
|
||||
}
|
||||
.card-action:hover { border-top-color: #d94740; background: #d94740; color: #fff; }
|
||||
|
||||
Reference in new issue
Block a user