📖 在线翻译🌐 多语言📝 单词查询🔊 发音朗读💡 例句展示
/* ========== 主题变量 ========== */
:root{
--theme: #4F46E5;
--theme-light: #E0E7FF;
--theme-bg: #EEF2FF;
--theme-dark: #3730A3;
--red: #EF4444;
--red-light: #FEF2F2;
--green: #10B981;
--green-light: #ECFDF5;
--amber: #F59E0B;
--amber-light: #FFFBEB;
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;
--radius: 10px;
--radius-sm: 8px;
}
/* ========== 主容器 ========== */
.tr-container{
max-width: 760px;
margin: 0 auto;
padding: 24px 20px 40px;
}
/* ========== 语言选择栏 ========== */
.lang-bar{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.lang-select-wrap{
flex: 1;
position: relative;
}
.lang-select-wrap select{
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius);
font-size: 14px;
color: var(--gray-800);
background: #fff;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
padding-right: 36px;
transition: border-color .2s;
}
.lang-select-wrap select:focus{
border-color: var(--theme);
box-shadow: 0 0 0 3px var(--theme-light);
}
.lang-select-wrap::after{
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--gray-400);
pointer-events: none;
}
.lang-swap-btn{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--gray-200);
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .25s;
color: var(--gray-500);
}
.lang-swap-btn:hover{
border-color: var(--theme);
color: var(--theme);
background: var(--theme-bg);
transform: rotate(180deg);
}
.lang-swap-btn svg{
width: 18px;
height: 18px;
}
/* ========== 快捷语言对 ========== */
.quick-langs{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.quick-lang-chip{
padding: 5px 14px;
border-radius: 20px;
border: 1.5px solid var(--gray-200);
background: #fff;
font-size: 13px;
color: var(--gray-600);
cursor: pointer;
transition: all .2s;
user-select: none;
white-space: nowrap;
}
.quick-lang-chip:hover{
border-color: var(--theme);
color: var(--theme);
background: var(--theme-bg);
}
.quick-lang-chip.active{
border-color: var(--theme);
background: var(--theme);
color: #fff;
}
/* ========== 输入区域 ========== */
.input-section{
margin-bottom: 14px;
}
.input-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.input-label{
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
}
.input-actions{
display: flex;
gap: 6px;
}
.input-action-btn{
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--gray-200);
background: #fff;
font-size: 12px;
color: var(--gray-500);
cursor: pointer;
transition: all .2s;
}
.input-action-btn:hover{
border-color: var(--theme);
color: var(--theme);
background: var(--theme-bg);
}
.input-textarea{
width: 100%;
padding: 14px;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius);
font-size: 15px;
color: var(--gray-800);
line-height: 1.7;
resize: vertical;
outline: none;
transition: border-color .2s;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
box-sizing: border-box;
min-height: 120px;
}
.input-textarea:focus{
border-color: var(--theme);
box-shadow: 0 0 0 3px var(--theme-light);
}
.input-textarea::placeholder{
color: var(--gray-300);
}
.char-count{
text-align: right;
font-size: 12px;
color: var(--gray-400);
margin-top: 6px;
}
.char-count.warn{
color: var(--amber);
}
.char-count.over{
color: var(--red);
}
/* ========== 操作按钮区 ========== */
.action-bar{
display: flex;
gap: 10px;
margin-bottom: 20px;
align-items: center;
flex-wrap: wrap;
}
.btn{
padding: 10px 24px;
border-radius: var(--radius);
border: none;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s;
display: flex;
align-items: center;
gap: 6px;
}
.btn-primary{
background: var(--theme);
color: #fff;
}
.btn-primary:hover{
background: var(--theme-dark);
}
.btn-primary:disabled{
background: var(--gray-400);
cursor: not-allowed;
}
.btn-outline{
background: #fff;
color: var(--theme-dark);
border: 1.5px solid var(--theme);
}
.btn-outline:hover{
background: var(--theme-bg);
}
.btn-ghost{
background: transparent;
color: var(--gray-500);
padding: 8px 14px;
font-weight: 500;
}
.btn-ghost:hover{
background: var(--gray-100);
color: var(--gray-700);
}
.auto-detect-toggle{
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--gray-600);
cursor: pointer;
user-select: none;
padding: 6px 12px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--gray-200);
background: #fff;
transition: all .2s;
}
.auto-detect-toggle:hover{
border-color: var(--theme);
}
.auto-detect-toggle input{
display: none;
}
.toggle-indicator{
width: 34px;
height: 20px;
border-radius: 10px;
background: var(--gray-300);
position: relative;
transition: background .2s;
flex-shrink: 0;
}
.toggle-indicator::after{
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
top: 2px;
left: 2px;
transition: transform .2s;
}
.auto-detect-toggle input:checked + .toggle-indicator{
background: var(--theme);
}
.auto-detect-toggle input:checked + .toggle-indicator::after{
transform: translateX(14px);
}
/* ========== 加载状态 ========== */
.loading-box{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 40px 20px;
color: var(--gray-500);
font-size: 14px;
}
.loading-spinner{
width: 20px;
height: 20px;
border: 2.5px solid var(--gray-200);
border-top-color: var(--theme);
border-radius: 50%;
animation: tr-spin .7s linear infinite;
}
@keyframes tr-spin{
to{ transform: rotate(360deg); }
}
/* ========== 结果区 ========== */
.result-section{
display: none;
}
.result-section.show{
display: block;
}
.result-card{
background: var(--theme-bg);
border: 1.5px solid var(--theme-light);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 14px;
}
.result-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.result-label{
font-size: 13px;
font-weight: 600;
color: var(--theme-dark);
display: flex;
align-items: center;
gap: 6px;
}
.result-label .detected-lang{
font-weight: 400;
color: var(--gray-500);
font-size: 12px;
}
.result-actions{
display: flex;
gap: 6px;
}
.result-action-btn{
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--gray-200);
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-500);
transition: all .2s;
}
.result-action-btn:hover{
border-color: var(--theme);
color: var(--theme);
background: var(--theme-light);
}
.result-action-btn svg{
width: 16px;
height: 16px;
}
.result-text{
font-size: 17px;
font-weight: 500;
color: var(--gray-800);
line-height: 1.8;
word-break: break-word;
}
/* ========== 词典详情区 ========== */
.dict-section{
display: none;
}
.dict-section.show{
display: block;
}
.dict-card{
background: #fff;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius);
padding: 18px 20px;
margin-bottom: 14px;
}
.dict-card h4{
font-size: 13px;
font-weight: 600;
color: var(--gray-500);
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: .5px;
}
.dict-word{
font-size: 22px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 8px;
}
.dict-phonetic{
font-size: 15px;
color: var(--gray-500);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 10px;
}
.dict-phonetic .speak-btn{
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--gray-200);
background: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--theme);
transition: all .2s;
}
.dict-phonetic .speak-btn:hover{
background: var(--theme-bg);
border-color: var(--theme);
}
.dict-meanings{
margin-top: 10px;
}
.dict-pos{
display: inline-block;
font-size: 12px;
font-weight: 600;
color: var(--theme);
background: var(--theme-bg);
padding: 2px 10px;
border-radius: 4px;
margin-right: 8px;
margin-bottom: 6px;
}
.dict-def{
font-size: 14px;
color: var(--gray-700);
line-height: 1.6;
margin: 4px 0 12px 0;
}
.dict-def-list{
list-style: none;
padding: 0;
margin: 0;
}
.dict-def-list li{
padding: 6px 0;
font-size: 14px;
color: var(--gray-700);
line-height: 1.6;
border-bottom: 1px solid var(--gray-100);
}
.dict-def-list li:last-child{
border-bottom: none;
}
.dict-def-list .def-num{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gray-100);
text-align: center;
line-height: 20px;
font-size: 11px;
font-weight: 600;
color: var(--gray-500);
margin-right: 8px;
}
.dict-examples{
margin-top: 12px;
}
.dict-example-item{
padding: 8px 12px;
background: var(--gray-50);
border-radius: 6px;
margin-bottom: 6px;
font-size: 13px;
color: var(--gray-600);
line-height: 1.6;
}
.dict-example-item .ex-orig{
font-weight: 500;
color: var(--gray-800);
}
.dict-example-item .ex-trans{
color: var(--gray-500);
margin-top: 2px;
}
/* ========== 错误/重试状态 ========== */
.error-box{
display: none;
background: var(--red-light);
border: 1.5px solid #FECACA;
border-radius: var(--radius);
padding: 18px 20px;
margin-bottom: 14px;
text-align: center;
}
.error-box.show{
display: block;
}
.error-box p{
font-size: 14px;
color: var(--red);
margin: 0 0 10px 0;
}
.error-box .retry-btn{
padding: 6px 20px;
border-radius: 6px;
border: 1.5px solid #FECACA;
background: #fff;
font-size: 13px;
color: var(--red);
cursor: pointer;
font-weight: 600;
transition: all .2s;
}
.error-box .retry-btn:hover{
background: var(--red);
color: #fff;
border-color: var(--red);
}
/* ========== 空状态 ========== */
.empty-state{
text-align: center;
padding: 48px 20px;
color: var(--gray-400);
}
.empty-state svg{
width: 56px;
height: 56px;
margin-bottom: 12px;
opacity: .5;
}
.empty-state p{
font-size: 14px;
margin: 0;
}
/* ========== 翻译历史 ========== */
.history-section{
margin-top: 24px;
padding-top: 20px;
border-top: 1.5px solid var(--gray-100);
display: none;
}
.history-section.show{
display: block;
}
.history-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.history-header h3{
font-size: 15px;
font-weight: 600;
color: var(--gray-700);
margin: 0;
}
.history-clear{
font-size: 12px;
color: var(--gray-400);
cursor: pointer;
background: none;
border: none;
padding: 4px 8px;
border-radius: 4px;
transition: all .2s;
}
.history-clear:hover{
color: var(--red);
background: var(--red-light);
}
.history-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.history-item{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--gray-50);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .2s;
border: 1.5px solid transparent;
}
.history-item:hover{
border-color: var(--gray-200);
background: #fff;
}
.history-item .hi-langs{
font-size: 11px;
color: var(--gray-400);
white-space: nowrap;
flex-shrink: 0;
}
.history-item .hi-text{
flex: 1;
font-size: 13px;
color: var(--gray-700);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-item .hi-arrow{
font-size: 11px;
color: var(--gray-300);
flex-shrink: 0;
}
.history-item .hi-result{
flex: 1;
font-size: 13px;
color: var(--theme);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-item .hi-time{
font-size: 11px;
color: var(--gray-400);
white-space: nowrap;
flex-shrink: 0;
}
/* ========== Toast ========== */
.tr-toast-container{
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.tr-toast{
padding: 10px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
color: #fff;
background: var(--gray-800);
box-shadow: 0 4px 12px rgba(0,0,0,.15);
max-width: 360px;
animation: toastIn .3s ease;
}
.tr-toast.warn{ background: var(--amber); color: #fff; }
.tr-toast.error{ background: var(--red); }
.tr-toast.success{ background: var(--green); }
@keyframes toastIn{
from{ opacity: 0; transform: translateY(-10px); }
to{ opacity: 1; transform: translateY(0); }
}
/* ========== 响应式 ========== */
@media (max-width: 768px){
.tr-container{ padding: 16px 14px 30px; }
.lang-bar{ flex-wrap: nowrap; }
.result-text{ font-size: 15px; }
.dict-word{ font-size: 18px; }
.action-bar{ flex-direction: column; }
.btn{ width: 100%; justify-content: center; }
.auto-detect-toggle{ width: 100%; justify-content: center; }
}
@media (max-width: 480px){
.lang-select-wrap select{ font-size: 13px; padding: 8px 10px; }
.quick-langs{ gap: 6px; }
.quick-lang-chip{ font-size: 12px; padding: 4px 10px; }
.history-item{ flex-wrap: wrap; }
}