feat: mobile forgot-password redesign, navbar/search updates, vite proxy and request tweaks
This commit is contained in:
chunyu
+26
-1
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 1.4 KiB |
+204
-110
@@ -38,20 +38,36 @@
|
||||
.current-section h2 { font-size: 16px; color: #ff4444; margin-bottom: 12px; }
|
||||
.current-section .current-icon { width: 64px; height: 64px; }
|
||||
|
||||
.section-label {
|
||||
max-width: 1100px;
|
||||
margin: 40px auto 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.section-label h2 {
|
||||
font-size: 18px;
|
||||
color: #aaa;
|
||||
border-left: 3px solid;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.section-label.sub { margin-top: 50px; }
|
||||
.section-label.sub h2 { border-color: #D4423A; color: #D4423A; }
|
||||
.section-label.old h2 { border-color: #6C63FF; color: #8B83FF; }
|
||||
.section-label p { font-size: 13px; color: #666; margin-top: 4px; padding-left: 13px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card {
|
||||
background: #1a1a2e;
|
||||
border-radius: 16px;
|
||||
padding: 30px 20px 24px;
|
||||
padding: 28px 20px 22px;
|
||||
text-align: center;
|
||||
border: 1px solid #2a2a3e;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
@@ -64,7 +80,7 @@
|
||||
box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
.card.selected::after {
|
||||
content: '✓ 已选择';
|
||||
content: '\2713 \5DF2\u9009\u62E9';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
@@ -75,20 +91,20 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
.card-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0 auto 16px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
color: #fff;
|
||||
}
|
||||
.card .desc {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
@@ -97,12 +113,16 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag {
|
||||
background: rgba(108, 99, 255, 0.15);
|
||||
background: rgba(108, 99, 255, 0.12);
|
||||
color: #8B83FF;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.tag.cola {
|
||||
background: rgba(212, 66, 58, 0.12);
|
||||
color: #E74C3C;
|
||||
}
|
||||
|
||||
.sizes-section {
|
||||
max-width: 1100px;
|
||||
@@ -180,168 +200,242 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>可乐项目 - 图标模板预览</h1>
|
||||
<p class="subtitle">点击选择你喜欢的图标设计，然后应用为项目 Favicon</p>
|
||||
<h1>可乐项目 - 图标模板预览</h1>
|
||||
<p class="subtitle">点击选择你喜歡的图标设计，然后应用为项目 Favicon</p>
|
||||
|
||||
<!-- 当前图标 -->
|
||||
<div class="current-section">
|
||||
<h2>当前图标</h2>
|
||||
<img class="current-icon" src="/favicon.svg" alt="当前图标">
|
||||
<h2>当前图标</h2>
|
||||
<img class="current-icon" src="/favicon.svg" alt="当前图标">
|
||||
</div>
|
||||
|
||||
<!-- 新图标选项 -->
|
||||
<div class="section-label sub">
|
||||
<h2>新设计 - 微妒可乐元素</h2>
|
||||
<p>帖妒蓝入可乐色调、气波、水体等元素，但保持充分克制，不直取可乐</p>
|
||||
</div>
|
||||
<div class="grid" id="new-grid">
|
||||
<div class="card" data-file="icon-c-letter-v2.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-c-letter-v2.svg" alt="V2 C">
|
||||
<h3>杂志 C 标识</h3>
|
||||
<p class="desc">深色背景上纯繁的 C 字母，右上角一个微小红点暗示气波。充分保持充分工具感，可乐元素只作点缀。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">极简</span>
|
||||
<span class="tag">C字母</span>
|
||||
<span class="tag cola">微妒可乐色</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-colared-wrench.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-colared-wrench.svg" alt="可乐红打扎">
|
||||
<h3>红色打扎</h3>
|
||||
<p class="desc">深色背景上简纯的打扎工具，右下角有一把微妒的深红色水把，像可乐的一点印记。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">工具</span>
|
||||
<span class="tag">简纯</span>
|
||||
<span class="tag cola">可乐红点缀</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-wave-square.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-wave-square.svg" alt="波波方块">
|
||||
<h3>波波工具盒</h3>
|
||||
<p class="desc">方块内上单部留白，底部有可乐色的水面波波和气波。中央白色千字符号表示工具属性。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">工具平台</span>
|
||||
<span class="tag">抽象设计</span>
|
||||
<span class="tag cola">可乐波波</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-ring-colared.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-ring-colared.svg" alt="可乐环">
|
||||
<h3>红环星辰</h3>
|
||||
<p class="desc">可乐红色外环包被深色内围，中央金色星辰符号。可乐色只作为外框存在，内部保持工具感。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">几何</span>
|
||||
<span class="tag">外环设计</span>
|
||||
<span class="tag cola">可乐红框</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label old" style="margin-top:56px;">
|
||||
<h2>原有设计</h2>
|
||||
<p>较为直揍的风格设计，可乐元素表达更直揍</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card" data-file="icon-c-letter.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-c-letter.svg" alt="C字母图标">
|
||||
<h3>字母 C 标识</h3>
|
||||
<p class="desc">圆润加粗的"C"字母，搭配气泡装饰，呼应可乐品牌。橙红到深红的渐变色调，温暖而有辨识度。</p>
|
||||
<img class="card-icon" src="icon-c-letter.svg" alt="C字母">
|
||||
<h3>字母 C 标识</h3>
|
||||
<p class="desc">圆涨加粗的C字母，搭配气波装饰，橙红到深红的渗变色调，温粘而有辨认度。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">品牌辨识</span>
|
||||
<span class="tag">极简</span>
|
||||
<span class="tag">可乐色调</span>
|
||||
<span class="tag">品牌辨认</span>
|
||||
<span class="tag cola">可乐色调</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-toolbox.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-toolbox.svg" alt="工具箱图标">
|
||||
<h3>等距工具箱</h3>
|
||||
<p class="desc">3D等距视角的彩色工具箱，珊瑚色/青色/紫色多面体设计，展现平台多工具属性，现代科技感。</p>
|
||||
<img class="card-icon" src="icon-toolbox.svg" alt="工具箱">
|
||||
<h3>等距工具箱</h3>
|
||||
<p class="desc">3D等距视角的彩色工具箱，珌瑞色/青色/紫色多面体设计，展现平台多工具属性。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">3D等距</span>
|
||||
<span class="tag">多色</span>
|
||||
<span class="tag">工具平台</span>
|
||||
<span class="tag">3D等距</span>
|
||||
<span class="tag">多色</span>
|
||||
<span class="tag">工具平台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-colabubbles.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-colabubbles.svg" alt="气泡可乐图标">
|
||||
<h3>抽象气泡杯</h3>
|
||||
<p class="desc">深色背景上的极简可乐杯，液体中冒出的气泡传递活力感。暗色系设计，科技感十足。</p>
|
||||
<img class="card-icon" src="icon-colabubbles.svg" alt="气波可乐">
|
||||
<h3>抽象气波框</h3>
|
||||
<p class="desc">深色背景上的极简可乐框，水体中击出的气波伝递活力感。暗色系设计。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">暗色系</span>
|
||||
<span class="tag">抽象</span>
|
||||
<span class="tag">活力</span>
|
||||
<span class="tag">暗色系</span>
|
||||
<span class="tag">抽象</span>
|
||||
<span class="tag cola">可乐框</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-file="icon-hextool.svg" onclick="selectCard(this)">
|
||||
<img class="card-icon" src="icon-hextool.svg" alt="六边形工具图标">
|
||||
<h3>六边形齿轮</h3>
|
||||
<p class="desc">六边形底座搭配齿轮符号，紫蓝渐变光效。传达精密工具与技术平台的气质，科技前沿感。</p>
|
||||
<img class="card-icon" src="icon-hextool.svg" alt="八边形">
|
||||
<h3>八边形骨辑</h3>
|
||||
<p class="desc">八边形底座搭配骨辑符号，紫蓝渗变光效。伝递精密工具与技术平台的气质。</p>
|
||||
<div class="tags">
|
||||
<span class="tag">科技感</span>
|
||||
<span class="tag">几何</span>
|
||||
<span class="tag">工具符号</span>
|
||||
<span class="tag">科技感</span>
|
||||
<span class="tag">几何</span>
|
||||
<span class="tag">工具符号</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多尺寸预览 -->
|
||||
<div class="sizes-section">
|
||||
<h2>不同尺寸预览</h2>
|
||||
<div id="sizes-grid" class="sizes-grid" style="display:none;">
|
||||
</div>
|
||||
<h2>不同层次预览</h2>
|
||||
<div id="sizes-grid" class="sizes-grid" style="display:none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 特性对比 -->
|
||||
<div class="compare-table">
|
||||
<h2>设计特性对比</h2>
|
||||
<h2>设计特性对比</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图标</th>
|
||||
<th>风格</th>
|
||||
<th>配色</th>
|
||||
<th>适用场景</th>
|
||||
<th>辨识度</th>
|
||||
<th>图标</th>
|
||||
<th>风格</th>
|
||||
<th>配色</th>
|
||||
<th>可乐元素</th>
|
||||
<th>适用场景</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>字母 C</td>
|
||||
<td>扁平极简</td>
|
||||
<td>暖色系（橙红→深红）</td>
|
||||
<td>品牌一致性最强，适合正式场合</td>
|
||||
<td>⭐⭐⭐⭐⭐</td>
|
||||
<td>杂志 C</td>
|
||||
<td>深色背 + 极简线条</td>
|
||||
<td>深蓝紫背 + 红色C</td>
|
||||
<td>一个小红点</td>
|
||||
<td>品牌一致性最强</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>等距工具箱</td>
|
||||
<td>3D 等距</td>
|
||||
<td>多色（珊瑚+青+紫）</td>
|
||||
<td>展现工具多样性，视觉冲击力强</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
<td>红色打扎</td>
|
||||
<td>极简线条工具</td>
|
||||
<td>深背 + 红色打扎</td>
|
||||
<td>一把深红水把</td>
|
||||
<td>工具感最强</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>气泡可乐杯</td>
|
||||
<td>暗色抽象</td>
|
||||
<td>暗色系（深棕+焦糖）</td>
|
||||
<td>暗色主题搭配最佳，独特有记忆点</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
<td>波波工具盒</td>
|
||||
<td>方块 + 波波抽象</td>
|
||||
<td>深蓝紫背 + 红色波波</td>
|
||||
<td>底部波波 + 气波</td>
|
||||
<td>抽象设计最优雅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>六边形齿轮</td>
|
||||
<td>科技几何</td>
|
||||
<td>冷色系（紫→蓝）</td>
|
||||
<td>技术平台定位，专业现代</td>
|
||||
<td>⭐⭐⭐⭐</td>
|
||||
<td>红环星辰</td>
|
||||
<td>几何外环形</td>
|
||||
<td>红色外环 + 金色星辰</td>
|
||||
<td>红色圆环</td>
|
||||
<td>精纯八边性最强</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>字母 C</td>
|
||||
<td>扁平极简</td>
|
||||
<td>橙红→深红渗变</td>
|
||||
<td>气波装饰</td>
|
||||
<td>品牌关联最直揍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>等距工具箱</td>
|
||||
<td>3D等距</td>
|
||||
<td>珌瑞+青+紫多色</td>
|
||||
<td>无直揍可乐元素</td>
|
||||
<td>展现工具多样性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>抽象气波框</td>
|
||||
<td>暗色抽象</td>
|
||||
<td>深棒+燃稀色</td>
|
||||
<td>框形+气波+水体</td>
|
||||
<td>暗色主页最搭</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>八边形骨辑</td>
|
||||
<td>科技几何</td>
|
||||
<td>紫→蓝渗变</td>
|
||||
<td>无直揍可乐元素</td>
|
||||
<td>技术平台气质</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button class="apply-btn" id="applyBtn" disabled onclick="applyIcon()">
|
||||
选择一个图标后点击应用
|
||||
选择一个图标后点击应用
|
||||
</button>
|
||||
|
||||
<script>
|
||||
let selectedFile = null;
|
||||
var selectedFile = null;
|
||||
|
||||
function selectCard(card) {
|
||||
document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'));
|
||||
var cards = document.querySelectorAll('.card');
|
||||
for (var i = 0; i < cards.length; i++) cards[i].classList.remove('selected');
|
||||
card.classList.add('selected');
|
||||
selectedFile = card.dataset.file;
|
||||
|
||||
const btn = document.getElementById('applyBtn');
|
||||
selectedFile = card.getAttribute('data-file');
|
||||
var btn = document.getElementById('applyBtn');
|
||||
btn.disabled = false;
|
||||
btn.textContent = `应用 "${card.querySelector('h3').textContent}" 为项目图标`;
|
||||
|
||||
// 展示多尺寸预览
|
||||
btn.textContent = '\u5E94\u7528 "' + card.querySelector('h3').textContent + '" \u4E3A\u9879\u76EE\u56FE\u6807';
|
||||
showSizes(selectedFile);
|
||||
}
|
||||
|
||||
function showSizes(file) {
|
||||
const grid = document.getElementById('sizes-grid');
|
||||
var grid = document.getElementById('sizes-grid');
|
||||
grid.style.display = 'flex';
|
||||
const sizes = [
|
||||
{ w: 16, h: 16, label: '16×16 浏览器标签' },
|
||||
{ w: 32, h: 32, label: '32×32 标准' },
|
||||
{ w: 48, h: 48, label: '48×48 推荐' },
|
||||
{ w: 64, h: 64, label: '64×64 收藏夹' },
|
||||
{ w: 128, h: 128, label: '128×128 高清' },
|
||||
var sizes = [
|
||||
{ w: 16, h: 16, label: '16x16 \u6D4F\u89C8\u5668\u6807\u7B7E' },
|
||||
{ w: 32, h: 32, label: '32x32 \u6807\u51C6' },
|
||||
{ w: 48, h: 48, label: '48x48 \u63A8\u8350' },
|
||||
{ w: 64, h: 64, label: '64x64 \u6536\u85CF\u5939' },
|
||||
{ w: 128, h: 128, label: '128x128 \u9AD8\u6E05' }
|
||||
];
|
||||
grid.innerHTML = sizes.map(s =>
|
||||
`<div class="size-group">
|
||||
<img src="${file}" width="${s.w}" height="${s.h}" alt="${s.label}">
|
||||
<div class="size-label">${s.label}</div>
|
||||
</div>`
|
||||
).join('');
|
||||
var html = '';
|
||||
for (var i = 0; i < sizes.length; i++) {
|
||||
var s = sizes[i];
|
||||
html += '<div class="size-group">' +
|
||||
'<img src="' + file + '" width="' + s.w + '" height="' + s.h + '">' +
|
||||
'<div class="size-label">' + s.label + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
grid.innerHTML = html;
|
||||
}
|
||||
|
||||
function applyIcon() {
|
||||
if (!selectedFile) return;
|
||||
if (confirm(`确认将项目图标替换为 "${selectedFile}"？\n\n原 favicon.svg 将被替换。`)) {
|
||||
// 复制文件
|
||||
fetch(selectedFile).then(r => r.text()).then(svg => {
|
||||
const blob = new Blob([svg], { type: 'image/svg+xml' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'favicon.svg';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
alert('已下载新图标文件 favicon.svg\n请将它替换到 public/ 目录下覆盖原文件。');
|
||||
});
|
||||
}
|
||||
var name = card.querySelector('h3').textContent;
|
||||
fetch(selectedFile).then(function(r) { return r.text(); }).then(function(svg) {
|
||||
var blob = new Blob([svg], { type: 'image/svg+xml' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'favicon.svg';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user