refactor(phone-image): CSS and HTML for thumbnail preview container

This commit is contained in:
augushong
2026-05-03 09:00:32 +08:00
parent c179ed27f1
commit 3cc024409f
2 changed files with 83 additions and 12 deletions

View File

@@ -9,6 +9,7 @@
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
<link rel="stylesheet" href="/static/css/phone-image-templates.css">
<link rel="stylesheet" href="/static/css/phone-image-fonts.css">
<link rel="stylesheet" href="/static/lib/prismjs/prism.css">
<style>
body {
margin: 0;
@@ -52,13 +53,19 @@
.paginated-preview-area {
flex: 1;
overflow-y: auto;
overflow-x: auto;
overflow-y: hidden;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background: #f5f5f5;
}
#paginated-preview {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
height: 100%;
padding: 0 10px;
}
.toolbar .layui-form-label {
@@ -151,13 +158,14 @@
<!-- 右侧:分页排版预览 -->
<div class="paginated-preview-area">
<div id="paginated-preview" class="phone-image-container size-xiaohongshu"></div>
<div id="paginated-preview" class="preview-thumbnails"></div>
</div>
</div>
<script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/lib/html2canvas/html2canvas.js"></script>
<script src="/static/lib/prismjs/prism.js"></script>
<script src="/static/js/phone-image.js"></script>
<script>
layui.use(['form', 'layer'], function () {
@@ -269,6 +277,7 @@
doRender();
});
</script>
<div id="render-staging" style="position:fixed;left:-9999px;top:0;visibility:hidden;"></div>
</body>
</html>