...
|
...
|
@@ -3,12 +3,8 @@ |
3
|
3
|
<setting-item-box name="背景上传" :alone="true">
|
4
|
4
|
<setting-item>
|
5
|
5
|
<n-card class="upload-box">
|
6
|
|
- <n-upload
|
7
|
|
- :show-file-list="false"
|
8
|
|
- v-model:file-list="uploadFileListRef"
|
9
|
|
- :customRequest="customRequest"
|
10
|
|
- :onBeforeUpload="beforeUploadHandle"
|
11
|
|
- >
|
|
6
|
+ <n-upload :show-file-list="false" v-model:file-list="uploadFileListRef" :customRequest="customRequest"
|
|
7
|
+ :onBeforeUpload="beforeUploadHandle">
|
12
|
8
|
<n-upload-dragger>
|
13
|
9
|
<img v-if="optionData.backgroundImage" class="upload-show" :src="optionData.backgroundImage" alt="背景" />
|
14
|
10
|
<div class="upload-img" v-show="!optionData.backgroundImage">
|
...
|
...
|
@@ -32,14 +28,8 @@ |
32
|
28
|
</setting-item-box>
|
33
|
29
|
<setting-item-box name="背景选择" :alone="true">
|
34
|
30
|
<setting-item>
|
35
|
|
- <n-select
|
36
|
|
- size="small"
|
37
|
|
- placeholder="请选择您要使用的背景"
|
38
|
|
- style="width: 250px"
|
39
|
|
- v-model:value="selectValue"
|
40
|
|
- :options="selectBgOptions"
|
41
|
|
- @update:value="selectBgValueHandle"
|
42
|
|
- />
|
|
31
|
+ <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
|
|
32
|
+ :options="selectBgOptions" @update:value="selectBgValueHandle" />
|
43
|
33
|
</setting-item>
|
44
|
34
|
</setting-item-box>
|
45
|
35
|
<setting-item-box name="文字" :alone="true">
|
...
|
...
|
@@ -83,11 +73,7 @@ |
83
|
73
|
</setting-item-box>
|
84
|
74
|
<setting-item-box name="文字">
|
85
|
75
|
<setting-item name="字体大小">
|
86
|
|
- <n-input-number
|
87
|
|
- v-model:value="optionData.textRightFontSize"
|
88
|
|
- size="small"
|
89
|
|
- placeholder="字体大小"
|
90
|
|
- ></n-input-number>
|
|
76
|
+ <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
|
91
|
77
|
</setting-item>
|
92
|
78
|
<setting-item name="字体位置x轴">
|
93
|
79
|
<n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
|
...
|
...
|
@@ -133,7 +119,7 @@ const selectValue = ref('headerBg08') |
133
|
119
|
|
134
|
120
|
// TODO待封装 成传文件夹名字获取下面所有图片
|
135
|
121
|
const getFetchImages = () => {
|
136
|
|
- const imagesModules = import.meta.globEager('@/assets/external/headbackground/*')
|
|
122
|
+ const imagesModules: Record<string, { default: string }> = import.meta.glob('@/assets/external/headbackground/*', { eager: true })
|
137
|
123
|
selectBgOptions.value = Object.keys(imagesModules).map(item => ({
|
138
|
124
|
label: imagesModules[item]?.default.split('/').at(-1),
|
139
|
125
|
value: imagesModules[item]?.default
|
...
|
...
|
@@ -199,31 +185,38 @@ const clearImage = () => { |
199
|
185
|
<style lang="scss" scoped>
|
200
|
186
|
// $uploadWidth: 215px;
|
201
|
187
|
$uploadHeight: 193px;
|
|
188
|
+
|
202
|
189
|
.upload-box {
|
203
|
190
|
cursor: pointer;
|
204
|
191
|
margin-bottom: 20px;
|
|
192
|
+
|
205
|
193
|
@include deep() {
|
206
|
194
|
.n-card__content {
|
207
|
195
|
padding: 0;
|
208
|
196
|
overflow: hidden;
|
209
|
197
|
}
|
|
198
|
+
|
210
|
199
|
.n-upload-dragger {
|
211
|
200
|
padding: 5px;
|
212
|
201
|
// width: $uploadWidth;
|
213
|
202
|
}
|
214
|
203
|
}
|
|
204
|
+
|
215
|
205
|
.upload-show {
|
216
|
206
|
width: -webkit-fill-available;
|
217
|
207
|
height: $uploadHeight;
|
218
|
208
|
border-radius: 5px;
|
219
|
209
|
}
|
|
210
|
+
|
220
|
211
|
.upload-img {
|
221
|
212
|
display: flex;
|
222
|
213
|
flex-direction: column;
|
223
|
214
|
align-items: center;
|
|
215
|
+
|
224
|
216
|
img {
|
225
|
217
|
height: 150px;
|
226
|
218
|
}
|
|
219
|
+
|
227
|
220
|
.upload-desc {
|
228
|
221
|
padding: 10px 0;
|
229
|
222
|
}
|
...
|
...
|
|