:root { --el-color-primary: #626aef; --el-color-primary-light-3: #7c82f0; --el-color-primary-light-5: #9699f2; --el-color-primary-light-7: #b0b0f4; --el-color-primary-light-9: #c9c9f6; --el-color-primary-dark-2: #4e54e0; --el-color-primary-dark-4: #3a3fe0; --el-color-primary-dark-6: #262ae0; --el-color-primary-dark-8: #1216e0; color-scheme: light; } html,body { width: 100%; height: 100% } html { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0,0,0,0); line-height: 1.15; scroll-behavior: smooth; } body { margin: 0; font-family: Microsoft YaHei UI,Microsoft YaHei,PingFang SC,Helvetica Neue,Hiragino Sans GB,Noto Sans,Tahoma,Arial,simsun,"sans-serif"; font-size: 14px; font-variant: tabular-nums; line-height: 1.5; color: rgba(0,0,0,.85); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-rendering: optimizeLegibility; /* 优剴3: 字距调整，提升中文字符间距精准度 */ font-feature-settings: "kern" 1; } /* 全局基础重置：字体平滑继承 + 盒模型统一（优剴2）防止非整数像素布局偏移 */ * { -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; } /* SVG图标像素级对齐，消除Windows下图标边缘模糊 */ svg { shape-rendering: geometricPrecision; } /* 优剴1: 图片渲染质量优化，高DPI下防止UI图片插应模糊 */ img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* Windows 125%/150% 系统缩放高DPR场景针对性优化 由 fx.js DPR检测逻辑动态挂载 .is-high-dpr 到 覆盖范围：字体重量微调、亚像素边框、GPU合成层 */ .is-high-dpr body { /* Windows高DPI下字体笔画偏细，轻微加粗补偿视觉重量 */ -webkit-font-smoothing: antialiased; font-weight: 400; } .is-high-dpr .el-button, .is-high-dpr .el-input__inner, .is-high-dpr .el-tag, .is-high-dpr .el-menu-item, .is-high-dpr .el-dropdown-menu__item { /* 触发GPU合成层，消除高DPI下控件边缘亚像素模糊 */ transform: translateZ(0); backface-visibility: hidden; } .is-high-dpr .el-button { /* 高DPI下1px边框视觉偏粗，用0.5px精细化 */ border-width: 0.5px; } [v-cloak] { display:none !important; } pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; } .el-message{ margin-top: 45px; } .el-tag{ overflow: hidden; } .el-overlay{ z-index: 10 !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .25s ease-in-out; background-color: rgba(28, 39, 48, .2); } .el-dropdown-link:focus { outline: none; } .el-dropdown-menu__item:not(.is-disabled):focus { background-color: #f3f4f6; color: #303133; } .el-dialog{ border-radius: 12px !important; } .el-popper{ border-radius: 12px !important; } .el-popper .el-dropdown-menu{ border-radius: 12px; } .vxe-table .vxe-cell--sort{ margin-top: 2px; font-size: 12px; } .vxe-table .vxe-cell--title{ display: inline-flex; align-items: center; } .vxe-table .vxe-cell{ white-space: pre-wrap !important; } .no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .divider-v { display: inline-block; width: 1px; height: 1em; margin: 0 15px; user-select: none; vertical-align: middle; position: relative; border-left: 1px solid #E9ECF0; } .text-clip{ max-width: 100%; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; justify-content: start; } .text-2xl { font-size: 1.5rem; line-height: 1.75rem; } .text-content { border: none; background-color: transparent; cursor: text; outline: none; user-select: none; white-space: pre-wrap; word-wrap: break-word; } .text-content:focus { user-select: text; } .text-center{ text-align: center !important; } .text-truncated{ display: inline-block; max-width: 400px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; justify-content: start;} .text-red{ color:#F56C6C !important; } .search-button{ height: 24px; align-items: center; background-color: rgba(235, 237, 240, 0.6); color: #909399; cursor: pointer; display: inline-flex; font-weight: 500; justify-content: space-between; user-select: none; } .search-button-container { align-items: center; display: flex; padding-right: 8px; } .search-button-keys { display: flex; min-width: calc(40px + .8em); align-items: center; } .search-button-key { align-items: center; background: rgba(125, 125, 125, .1); border-radius: 3px; box-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4); display: flex; height: 12px; font-size: 10px; justify-content: center; margin-right: .4em; position: relative; padding: 0 0 2px; border: 0; top: -1px; width: 22px } .dialog{ } .dialog .mask{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background-color: rgba(28,39,48,.2); opacity: 1; z-index: 10; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .25s ease-in-out; } .dialog .content{ width:520px; height:480px; max-width: 100%; max-height: 100%; overflow: hidden; text-align: center; border-radius: 15px; background-color: white; position: fixed; margin: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; border: 0px; } .dialog .content iframe{ width:100%; height:100%; overflow: hidden; } .dialog .dialog-message{ padding: 5px; min-width: 280px; max-width: 360px; min-height: 25px; line-height: 25px; overflow: hidden; border: 1px solid rgb(233, 233, 235); border-radius: 5px; text-align: center; position: fixed; margin: auto; left: 0; right: 0; top: 80px; background-color: rgb(244, 244, 245); color: #909399; box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px; z-index: 3065; transition: opacity .3s, transform .4s, top .4s; } .dialog .toolbar{ padding: 5px 10px; height: 28px; line-height: 28px; background: #F6F6F6; text-align: left; } .dialog .close{ position: absolute; right: 0px; float: right; margin: 15px 20px; } .dialog .close a{ font-size:24px; color:#606266; text-decoration:none; } @keyframes dialog-fadeIn { from { opacity: 0; } to { opacity: 1; } } .dialog-side { position: fixed; top: 0; left: 0; z-index: 100; width: 248px; height: 100%; background: #2c3e50; color: #fff; padding: 0px; background: white; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); animation: dialog-fadeIn 0.3s ease forwards; } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fade-in { animation: fadeIn 0.5s ease-out forwards; } .fade-out { animation: fadeOut 0.5s ease-out forwards; } .w-2 { width: .5rem; } .w-14 { width: 3.5rem; } .m-w-100{ max-width: 100px; } .h-14 { height: 3.5rem; } .h-45 { height: 45px; } .p-0{ padding: 0px !important; } .p-1 { padding: .25rem !important; } .p-2 { padding: .5rem !important; } .p-10{ padding: 10px !important; } .p-20{ padding: 20px !important; } .p-30{ padding: 30px !important; } .p-w-20{ padding: 0px 20px !important; } .p-t-0{ padding-top: 0px !important; } .p-b-0{ padding-bottom: 0px !important; } .p-b-10{ padding-bottom: 10px !important; } .m-0{ margin: 0px !important; } .m-10{ margin: 10px !important; } .m-20{ margin: 20px !important; } .m-t-0{ margin-top: 0px !important; } .m-t-10{ margin-top: 10px !important; } .m-t-20{ margin-top: 20px !important; } .m-r-5{ margin-right: 5px !important; } .m-r-10{ margin-right: 10px !important; } .m-b-5{ margin-bottom: 10px !important; } .m-b-10{ margin-bottom: 10px !important; } .m-b-20{ margin-bottom: 20px !important; } .m-tb-10{ margin: 10px 0; } .m-lr-20{ margin: 0 20px; } .gap-2 { gap: .5rem; } .w-full { box-sizing: border-box; width: 100% !important; } .w-max{ max-width: 100% !important; } .w-80{ width: 80px !important; } .w-100{ width: 100px !important; } .w-120{ width: 120px !important; } .w-180{ width: 180px !important; } .h-full { box-sizing: border-box; height: 100% !important; } .h-max { max-height: 100% !important; } .h-30{ height: 30px !important; } .h-40{ height: 40px !important; } .h-180{ height: 180px !important; } .flex { display: flex; } .flex-center{ display: inline-flex; align-items: center; justify-content: center; } .radius { border-radius: .25rem; } .items-center { align-items: center; } .items-flash { animation: items-flash 0.5s ease-in-out; } @keyframes items-flash { 0%, 100% { opacity: 1; transform: scale(1); } 25% { opacity: 0.5; transform: scale(1.05); } 50% { opacity: 1; transform: scale(1); } 75% { opacity: 0.5; transform: scale(1.05); } } .fs-scale-button.active { background: #c9c9f6; color: #626aef; border-color: #b0b0f4; font-weight: 500; } .justify-center { justify-content: center; } .cursor-pointer { cursor: pointer; } .bg-transparent{ background: transparent !important; background-image: radial-gradient(transparent 1px, #fff 1px); background-size: 4px 4px; backdrop-filter: saturate(50%) blur(4px); -webkit-backdrop-filter: saturate(50%) blur(4px); } .img-empty{ background-image: url('../img/work/my-works-empty.png'); background-size: cover; background-position: center; width: 358px; height: 273px; margin-bottom: 10px; } .img-submit{ background-image: url('../img/work/my-works-submit.png'); background-size: cover; background-position: center; width: 158px; height: 158px; margin-bottom: 10px; } .img-stop{ background-image: url('../img/work/my-works-stop.png'); background-size: cover; background-position: center; width: 88px; height: 88px; margin-bottom: 10px; } .img-pause{ background-image: url('../img/work/my-works-pause.png'); background-size: cover; background-position: center; width: 88px; height: 88px; margin-bottom: 10px; } .fx-logo{ width: 32px; height: 32px; background-color: #9454ab; border-radius: 10px; margin: 0 8px; display: inline-flex; align-items: center; justify-content: center; background-image: url(../img/logo_s.png); background-size: cover; background-position: center; } .fx-logo .el-icon{ color: white; } .fx-logo-mini{ width: 24px; height: 24px; background-color: #9454ab; background-image: linear-gradient(to bottom right, #7fa9ff, #5b69e5); background: linear-gradient(45deg, rgb(212, 52, 33), rgb(255, 106, 11), rgb(255, 93, 7)); border-radius: 8px; margin: 0 8px; display: inline-flex; align-items: center; justify-content: center; } .fx-logo-mini .el-icon{ color: white; } .field-scale-block{ justify-content: space-between; display: flex; padding-bottom: 10px; flex-wrap: wrap; row-gap: 15px; column-gap: 10px; color: #333; } .field-scale-block .el-button{ margin: 0; min-width: 40px; max-width: 100px; height: 40px; overflow: hidden; } .field-image-upload{ border: 1px dashed #dcdfe6; border-radius: 6px; cursor: pointer; display: inline-flex; } .field-image-upload .el-upload{ padding: 15px; min-width: 45px; min-height: 45px; } .field-image-upload img{ max-width: 100%; max-height: 100%; } .brand-block{ position: fixed; right: 20px; bottom: 20px; z-index: 12; width: 80px; height: 30px; text-align: center; border-radius: 4px; padding: 0 5px; background: #fff4ee; font-family: sans-serif; display: flex; align-items: center; font-size: 14px; color: #333; gap: 4px; opacity: 0.9; background: linear-gradient(135deg, rgb(238, 238, 252) 0%, rgb(238, 238, 252) 13%, rgb(249, 234, 238) 53%, rgb(242, 227, 239) 88%); } .brand-block-logo{ display: inline-block; background-image: url(../img/logo.png); background-size: cover; background-position: center; width: 30px; height: 30px; } .brand-block .brand-block-logo::after { content: "简报云"; display: block; width: 45px; height: 30px; line-height: 30px; margin-left: 30px; } .brand-loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 1; z-index: 9999; background: rgba(255, 255, 255, 1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .3s ease-in-out; transform: translateZ(0); } .brand-loading-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 320px; } .brand-loading-container .brand-loading-logo { font-size: 28px; font-weight: bold; color: #333; display: flex; align-items: center; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .brand-loading-container .brand-loading-progress-bar { width: 100%; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; max-width: 120px; } .brand-loading-container .brand-loading-content{ min-height: 20px; margin: 10px 0; font-size: 14px; color: #666; opacity: 1; transition: opacity 0.3s ease-in-out; } .brand-loading-container .brand-loading-progress { height: 100%; background: #333; width: 0%; animation: brand-loading-progress 1s linear infinite; } @keyframes brand-loading-progress { from { width: 0%; } to { width: 100%; } } /* ══════════════════════════════════════════════════════════════════ Field Flashcard Component (field-flashcard-*) 默认：深靖蓝正面 / 深翠綠背面 主题：自动适配 --share-* CSS 变量，不定义时回退默认颜色 ══════════════════════════════════════════════════════════════════ */ /* Scene 与 Card */ .field-flashcard-scene { width: 100%; perspective: 1100px; perspective-origin: 50% 40%; padding: 4px 0 14px; } .field-flashcard-card { display: grid; grid-template-columns: 100%; /* 显式定义单列，避免隐式轨道导致两面各占一行 */ grid-template-rows: auto; /* 显式定义单行，强制两面共享同一 grid cell */ width: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .field-flashcard-card.field-flashcard-flipped { transform: rotateY(180deg); } .field-flashcard-card .field-flashcard-back {display: none;} /* 非可见面不响应点击 */ .field-flashcard-card:not(.field-flashcard-flipped) .field-flashcard-back { pointer-events: none; } .field-flashcard-card.field-flashcard-flipped .field-flashcard-front { pointer-events: none; display:none; } .field-flashcard-card.field-flashcard-flipped .field-flashcard-back {display: block;} /* 双面公共样式 */ .field-flashcard-face { grid-row: 1; /* 明确指定行1（替代 grid-area:1/1 简写，防止隐式轨道拓展导致高度翻倍） */ grid-column: 1; /* 明确指定列1 */ backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; min-height: 200px; } /* 正面 — 默认深靖蓝渐变，有主题时使用 --share-panel */ .field-flashcard-front { background: linear-gradient(148deg, rgba(0,0,0,.14) 0%, transparent 50%, rgba(0,0,0,.14) 100%), var(--share-panel, linear-gradient(148deg, #1e1b4b 0%, #312e81 45%, #1e1b4b 100%)); box-shadow: 0 4px 28px rgba(var(--share-action-rgb, 99, 102, 241), .28), 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); position: relative; } .field-flashcard-front::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 28% 18%, rgba(var(--share-action-rgb, 139, 92, 246), .22) 0%, transparent 58%); pointer-events: none; } /* 背面 — 默认深翠綠渐变，有主题时使用 --share-font */ .field-flashcard-back { transform: rotateY(180deg); background: linear-gradient(148deg, rgba(0,0,0,.18) 0%, transparent 50%, rgba(0,0,0,.18) 100%), var(--share-font, linear-gradient(148deg, #052e16 0%, #14532d 45%, #052e16 100%)); box-shadow: 0 4px 28px rgba(var(--share-bg-rgb, 34, 197, 94), .22), 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); position: relative; } .field-flashcard-back::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 18%, rgba(var(--share-bg-rgb, 74, 222, 128), .16) 0%, transparent 58%); pointer-events: none; } /* 面内内容布局 */ .field-flashcard-face-body { position: relative; z-index: 1; padding: 24px 26px 20px; display: flex; flex-direction: column; min-height: 200px; box-sizing: border-box; text-align: left; } /* 标签胶囊 */ .field-flashcard-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; background: rgba(var(--share-action-rgb, 139, 92, 246), .18); border: 1px solid rgba(var(--share-action-rgb, 139, 92, 246), .32); color: var(--share-fg, #c4b5fd); margin-bottom: 18px; width: fit-content; } .field-flashcard-badge-ans { cursor: pointer; background: rgba(var(--share-bg-rgb, 34, 197, 94), .14); border-color: rgba(var(--share-bg-rgb, 34, 197, 94), .28); color: var(--share-fg, #86efac); } .field-flashcard-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; } /* 卡片正文 */ .field-flashcard-content { flex: 1; color: var(--share-fg, rgba(238,242,255,.93)); font-size: 1.08rem; line-height: 1.78; word-break: break-word; margin-bottom: 16px; } .field-flashcard-content p { margin: 0 0 10px; } .field-flashcard-content p:last-child { margin-bottom: 0; } .field-flashcard-content strong { color: var(--share-fg, #c4b5fd); } .field-flashcard-content-ans { color: var(--share-fg, rgba(220,252,231,.93)); } .field-flashcard-content-ans strong { color: var(--share-fg, #86efac); } .field-flashcard-content-ans ul, .field-flashcard-content-ans ol { padding-left: 20px; margin: 6px 0; } .field-flashcard-content-ans li { margin-bottom: 5px; } /* 提示条 */ .field-flashcard-hint-bar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 9px 13px; background: rgba(255,255,255,.05); border-left: 3px solid rgba(var(--share-action-rgb, 165, 180, 252), .38); border-radius: 0 8px 8px 0; } .field-flashcard-hint-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; } .field-flashcard-hint-text { font-size: .84rem; color: rgba(var(--share-fg-rgb, 196, 181, 253), .72); font-style: italic; line-height: 1.5; } /* 翻转按鈕 */ .field-flashcard-flip { align-self: center; /* 防止在 flex column 中 stretch 占满整行，使按钮宽度由内容决定 */ display: flex; align-items: center; justify-content: center; padding: 11px 20px; border-radius: 100px; border: 1.5px solid rgba(var(--share-action-rgb, 139, 92, 246), .38); background: rgba(var(--share-action-rgb, 139, 92, 246), .1); color: var(--share-fg, #c4b5fd); font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .2s ease; user-select: none; letter-spacing: .3px; } .field-flashcard-flip:hover { background: rgba(var(--share-action-rgb, 139, 92, 246), .22); border-color: rgba(var(--share-action-rgb, 139, 92, 246), .65); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(var(--share-action-rgb, 139, 92, 246), .25); } .field-flashcard-flip:active { transform: translateY(0); box-shadow: none; } /* 自评按鈕 */ .field-flashcard-verdict-row { display: flex; gap: 10px; margin-top: 4px; } .field-flashcard-verdict-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px; border-radius: 100px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s ease; border: 1.5px solid; user-select: none; letter-spacing: .3px; } .field-flashcard-verdict-btn:active { transform: scale(.97); } /* “再看看” — 琪珀色，语义色保持不随主题变化 */ .field-flashcard-verdict-again { background: rgba(251,146,60,.11); border-color: rgba(251,146,60,.38); color: #fdba74; } .field-flashcard-verdict-again:hover { background: rgba(251,146,60,.22); border-color: rgba(251,146,60,.68); transform: translateY(-1px); } /* “已掌握” — 逐主题适配 --share-action */ .field-flashcard-verdict-got { background: rgba(var(--share-action-rgb, 52, 211, 153), .11); border-color: rgba(var(--share-action-rgb, 52, 211, 153), .38); color: var(--share-fg, #6ee7b7); } .field-flashcard-verdict-got:hover { background: rgba(var(--share-action-rgb, 52, 211, 153), .22); border-color: rgba(var(--share-action-rgb, 52, 211, 153), .68); transform: translateY(-1px); } /* 完成状态 */ .field-flashcard-verdict-done { display: flex; justify-content: center; margin-top: 4px; padding: 10px 0; } .field-flashcard-done-tag { cursor: pointer; font-size: .92rem; font-weight: 600; padding: 8px 22px; border-radius: 100px; border: 1.5px solid; animation: field-flashcard-fadein .3s ease; } @keyframes field-flashcard-fadein { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } } .field-flashcard-done-got { color: #4ade80; border-color: rgba(74,222,128,.38); background: rgba(74,222,128,.1); } .field-flashcard-done-again { color: #fb923c; border-color: rgba(251,146,60,.38); background: rgba(251,146,60,.1); } .field-vas-scale .el-slider__bar { background-color: var(--share-panel, var(--el-color-primary)); } /* 拖拽按鈕边框色 */ .field-vas-scale .el-slider__button { border-color: var(--share-panel, var(--el-color-primary)); } /* 未选轨道底色 */ .field-vas-scale .el-slider__runway { background-color: rgba(var(--share-panel-rgb, 98, 106, 239), 0.15); } /* 刻度点 */ .field-vas-scale .el-slider__stop { background-color: rgba(var(--share-panel-rgb, 98, 106, 239), 0.35); } /* 优剴5: 自定义滚动条，Windows默认滚动条视觉粗糙，统一细化提升整体精致度 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); } ::-webkit-scrollbar-corner { background: transparent; } /* 优剴6: 可访问性平衡，对系统设置了“减少动画”的用户禁用过渡，防止渲染抗抗 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }