mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-08 04:12:49 +08:00
refactor(phone-image): CSS and HTML for thumbnail preview container
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user