24kycj
88c6ce8ccc
- 迁移为 frontend-web、frontend-electron、backend-web 与 docker 部署结构 - 网页端：订阅门禁二次弹窗、套餐/支付组件化、顶栏分组对齐 - 首页：最近文件与模板库布局优化，缩略图对齐，下载与删除操作 - 新增管理后台、支付与云端文件 API，更新 README 与项目规范 Co-authored-by: Cursor <cursoragent@cursor.com>
241 lines
8.2 KiB
HTML
241 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>SoonDesign</title>
|
|
<link rel="stylesheet" href="../vendor/layui/css/layui.css">
|
|
|
|
<style>
|
|
/* =========================================
|
|
1. 全局布局
|
|
========================================= */
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0;
|
|
background-color: #1E1E1E;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.layui-fluid.main { height: 100%; padding: 0; display: flex; flex-direction: column; }
|
|
.layui-row { height: 100%; display: flex; }
|
|
|
|
/* =========================================
|
|
2. 左侧栏 (#31373D)
|
|
========================================= */
|
|
.layui-col-md2 {
|
|
width: 260px !important; flex-shrink: 0;
|
|
background-color: #31373D; border-right: 1px solid #1E1E1E;
|
|
height: 100%; overflow-y: auto;
|
|
}
|
|
|
|
.left { padding: 20px; }
|
|
.left h1 {
|
|
font-size: 18px; color: #fff; margin-bottom: 25px;
|
|
border-left: 4px solid #009688; padding-left: 10px;
|
|
line-height: 1; font-weight: 500;
|
|
}
|
|
.left .card { margin-bottom: 25px; cursor: pointer; }
|
|
|
|
/* 左侧容器 */
|
|
.left .rect {
|
|
width: 100%; height: 150px;
|
|
background-color: #252A2E; border: 1px solid #444; border-radius: 4px;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
transition: all 0.3s; position: relative;
|
|
}
|
|
.left .rect:hover { border-color: #009688; background-color: #3E464F; transform: translateY(-2px); }
|
|
|
|
/* 左侧图片：固定 80px */
|
|
.left .rect img {
|
|
width: 80px; height: 80px; object-fit: contain;
|
|
margin-bottom: 15px;
|
|
}
|
|
/* 左侧卡片不缩放 */
|
|
.left .rect1 img { transform: none !important; }
|
|
.left .tip { color: #ccc; font-size: 13px; text-align: center; }
|
|
|
|
/* =========================================
|
|
3. 右侧栏 (#1E252D)
|
|
========================================= */
|
|
.layui-col-md10 {
|
|
flex: 1; background-color: #1E252D; height: 100%;
|
|
overflow: hidden; position: relative;
|
|
}
|
|
.right { padding: 30px; height: 100%; display: flex; flex-direction: column; }
|
|
|
|
#openfile {
|
|
background-color: #009688; border: none; height: 34px; line-height: 34px;
|
|
padding: 0 20px; font-size: 13px; border-radius: 3px; margin-right: 20px;
|
|
color: #fff; cursor: pointer;
|
|
}
|
|
.recent { font-size: 18px; color: #ddd; vertical-align: middle; font-weight: 500; }
|
|
|
|
/* 列表 Grid */
|
|
.card-list {
|
|
margin-top: 20px; flex: 1; overflow-y: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 30px; align-content: start;
|
|
padding: 10px; padding-bottom: 40px;
|
|
}
|
|
|
|
/* 【修复1】统一背景框大小 */
|
|
.card-list .rect {
|
|
width: 100%;
|
|
height: 160px; /* 固定高度，确保对齐 */
|
|
background-color: #252A2E;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
.card-list .rect:hover { border-color: #009688; background-color: #3E464F; }
|
|
|
|
/* 【修复2】加大光盘图片尺寸 */
|
|
.card-list .rect img {
|
|
width: 100%;
|
|
height: 135px; /* 【改大】增加图片高度，让光盘看起来很大 */
|
|
object-fit: contain;
|
|
margin-bottom: 0;
|
|
background-color: #1E1E1E;
|
|
border-radius: 4px;
|
|
padding: 2px; /* 减少内边距，让图更大 */
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
/* 【修复3】卡片单独缩小，背景框不变 */
|
|
.card-list .rect1 img {
|
|
transform: scale(0.8);
|
|
}
|
|
.card-list .rect1:hover img {
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
/* 文字 */
|
|
.card-list .tip {
|
|
color: #aaa; font-size: 12px; width: 100%; text-align: center;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
height: 25px; line-height: 25px;
|
|
}
|
|
.card-list .rect:hover .tip { color: #fff; }
|
|
|
|
/* =========================================
|
|
4. 光盘遮罩 (中心对齐修正)
|
|
========================================= */
|
|
.rect:not(.rect1) { position: relative; }
|
|
|
|
.rect:not(.rect1)::after {
|
|
content: ''; position: absolute; left: 50%;
|
|
/* 【计算修正】
|
|
Box高 160px, Box中心Y=80px
|
|
Img高 135px, Img中心Y = 135/2 = 67.5px
|
|
偏移量 = 67.5 - 80 = -12.5px
|
|
*/
|
|
top: 50%;
|
|
transform: translate(-50%, calc(-50% - 12.5px));
|
|
|
|
width: 24px; height: 24px;
|
|
border-radius: 50%; background-color: #252A2E;
|
|
box-shadow: inset 0 0 2px rgba(0,0,0,0.8);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
z-index: 10; pointer-events: none;
|
|
}
|
|
|
|
/* 左侧单独修正 */
|
|
.left .rect:not(.rect1)::after {
|
|
width: 16px; height: 16px;
|
|
/* 左侧Box 150px, Img 80px + margin 15px -> 内容高 95px -> 垂直居中
|
|
Img中心大概在 Box 顶部偏下的位置，这里微调 */
|
|
transform: translate(-50%, calc(-50% - 15px));
|
|
}
|
|
|
|
/* =========================================
|
|
5. 语言选择器
|
|
========================================= */
|
|
#language_select {
|
|
position: absolute; top: 30px; right: 30px;
|
|
background-color: #31373D; color: #ccc;
|
|
border: 1px solid #444; padding: 5px;
|
|
height: 30px; width: 100px;
|
|
z-index: 999; outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layui-fluid main">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md2">
|
|
<div class="left">
|
|
<h1 language="m" zh="新建" ozh="新建" en="New"></h1>
|
|
<div class="card" id="new1">
|
|
<div class="rect">
|
|
<img src="../assets/images/bg_1.png">
|
|
<div class="tip" language="m" zh="空白光盘模板" ozh="空白光碟模闆" en="Disc Template"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card" id="new2">
|
|
<div class="rect rect1">
|
|
<img src="../assets/images/bg_2.png">
|
|
<div class="tip" language="m" zh="空白卡片模板" ozh="空白卡片模闆" en="Card Template"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md10">
|
|
<div class="right">
|
|
<div>
|
|
<button class="layui-btn layui-btn-normal" id="openfile" language="m" zh="打开其他文件" ozh="打開其他文件"
|
|
en="Open"></button>
|
|
<span class="recent" language="m" zh="最近文件" ozh="最近文件" en="Recent Files"></span>
|
|
</div>
|
|
<div class="card-list">
|
|
</div>
|
|
</div>
|
|
<select class="ui-select" id="language_select">
|
|
<option value='zh'>中文-简体</option>
|
|
<option value='ozh'>中文-繁體</option>
|
|
<option value='en'>English</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/common/asset-base.js"></script>
|
|
<script src="../vendor/layui/layui.js"></script>
|
|
<script>
|
|
(function() {
|
|
const path = require('path'), fs = require('fs'), remote = require('@electron/remote');
|
|
const appPath = (() => { try { return remote.app.getAppPath(); } catch(e) { return __dirname || process.cwd(); } })();
|
|
try {
|
|
require(path.join(appPath, 'js', 'common', 'asset-base.js'));
|
|
require(path.join(appPath, 'js', 'platform', 'electron.js'));
|
|
} catch (e) { console.warn('platform/electron load:', e); }
|
|
const jsPath = path.join(appPath, 'js', 'index.js');
|
|
if (fs.existsSync(jsPath)) {
|
|
try {
|
|
require(jsPath);
|
|
console.log('[加载] ✅ index → index.js');
|
|
} catch(e) {
|
|
alert('文件加载失败！\n\n错误: ' + e.message);
|
|
}
|
|
} else {
|
|
alert('文件不存在！\n\n请检查：' + jsPath);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |