|
|
@@ -2,9 +2,10 @@
|
|
|
<div class="template-design-container">
|
|
|
<!-- 左侧工具栏 -->
|
|
|
<div class="toolbar">
|
|
|
- <!-- 标签页切换 -->
|
|
|
- <div class="toolbar-tabs">
|
|
|
- <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
|
|
+ <!-- 可滚动区域：标签页 + 属性 -->
|
|
|
+ <div class="toolbar-scroll">
|
|
|
+ <div class="toolbar-tabs">
|
|
|
+ <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
|
|
<el-tab-pane label="模版设计" name="design">
|
|
|
<el-upload
|
|
|
class="custom-upload"
|
|
|
@@ -167,9 +168,9 @@
|
|
|
|
|
|
<!-- 保存模版按钮 -->
|
|
|
<el-divider />
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane label="素材选择" name="material" :label-class="'material-tab'">
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="素材选择" name="material" :label-class="'material-tab'">
|
|
|
|
|
|
<div class="materials-list-full">
|
|
|
<el-skeleton v-if="materialsLoading" :rows="5" animated />
|
|
|
@@ -189,13 +190,14 @@
|
|
|
<span>添加</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 固定在底部的保存模版按钮 -->
|
|
|
- <el-divider />
|
|
|
+ <el-divider class="save-template-divider" />
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="Document"
|
|
|
@@ -1053,9 +1055,13 @@ const handleCanvasWheel = (e) => {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-.toolbar-tabs {
|
|
|
+.toolbar-scroll {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar-tabs {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
