Skip to content

Commit fc44958

Browse files
YunaiVYunaiV
committed
feat：【AI 大模型】image/index/components 下的部分页面，使用 unocss
1 parent fef64d1 commit fc44958

File tree

5 files changed

+63
-383
lines changed

5 files changed

+63
-383
lines changed

‎src/views/ai/image/index/components/common/index.vue

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
type="textarea"
1515
/>
1616
</div>
17-
<div class="hot-words">
17+
<div class="flex flex-col mt-30px">
1818
<div>
1919
<el-text tag="b">随机热词</el-text>
2020
</div>
21-
<el-space wrap class="word-list">
21+
<el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
2222
<el-button
2323
round
24-
class="btn"
24+
class="m-0"
2525
:type="selectHotWord === hotWord ? 'primary' : 'default'"
2626
v-for="hotWord in ImageHotWords"
2727
:key="hotWord"
@@ -31,11 +31,11 @@
3131
</el-button>
3232
</el-space>
3333
</div>
34-
<div class="group-item">
34+
<div class="mt-30px">
3535
<div>
3636
<el-text tag="b">平台</el-text>
3737
</div>
38-
<el-space wrap class="group-item-body">
38+
<el-space wrap class="mt-15px w-full">
3939
<el-select
4040
v-model="otherPlatform"
4141
placeholder="Select"
@@ -52,11 +52,11 @@
5252
</el-select>
5353
</el-space>
5454
</div>
55-
<div class="group-item">
55+
<div class="mt-30px">
5656
<div>
5757
<el-text tag="b">模型</el-text>
5858
</div>
59-
<el-space wrap class="group-item-body">
59+
<el-space wrap class="mt-15px w-full">
6060
<el-select v-model="modelId" placeholder="Select" size="large" class="!w-350px">
6161
<el-option
6262
v-for="item in platformModels"
@@ -67,16 +67,16 @@
6767
</el-select>
6868
</el-space>
6969
</div>
70-
<div class="group-item">
70+
<div class="mt-30px">
7171
<div>
7272
<el-text tag="b">图片尺寸</el-text>
7373
</div>
74-
<el-space wrap class="group-item-body">
74+
<el-space wrap class="mt-15px w-full">
7575
<el-input v-model="width" type="number" class="w-170px" placeholder="图片宽度" />
7676
<el-input v-model="height" type="number" class="w-170px" placeholder="图片高度" />
7777
</el-space>
7878
</div>
79-
<div class="btns">
79+
<div class="flex justify-center mt-50px">
8080
<el-button
8181
type="primary"
8282
size="large"
@@ -187,38 +187,3 @@ watch(
187187
/** 暴露组件方法 */
188188
defineExpose({ settingValues })
189189
</script>
190-
<style scoped lang="scss">
191-
.hot-words {
192-
display: flex;
193-
flex-direction: column;
194-
margin-top: 30px;
195-
196-
.word-list {
197-
display: flex;
198-
flex-direction: row;
199-
flex-wrap: wrap;
200-
justify-content: start;
201-
margin-top: 15px;
202-
203-
.btn {
204-
margin: 0;
205-
}
206-
}
207-
}
208-
209-
// 模型
210-
.group-item {
211-
margin-top: 30px;
212-
213-
.group-item-body {
214-
margin-top: 15px;
215-
width: 100%;
216-
}
217-
}
218-
219-
.btns {
220-
display: flex;
221-
justify-content: center;
222-
margin-top: 50px;
223-
}
224-
</style>

‎src/views/ai/image/index/components/dall3/index.vue

Lines changed: 17 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
type="textarea"
1515
/>
1616
</div>
17-
<div class="hot-words">
17+
<div class="flex flex-col mt-30px">
1818
<div>
1919
<el-text tag="b">随机热词</el-text>
2020
</div>
21-
<el-space wrap class="word-list">
21+
<el-space wrap class="flex flex-row flex-wrap justify-start mt-15px">
2222
<el-button
2323
round
24-
class="btn"
24+
class="m-0"
2525
:type="selectHotWord === hotWord ? 'primary' : 'default'"
2626
v-for="hotWord in ImageHotWords"
2727
:key="hotWord"
@@ -31,57 +31,57 @@
3131
</el-button>
3232
</el-space>
3333
</div>
34-
<div class="model">
34+
<div class="mt-30px">
3535
<div>
3636
<el-text tag="b">模型选择</el-text>
3737
</div>
38-
<el-space wrap class="model-list">
38+
<el-space wrap class="mt-15px">
3939
<div
40-
:class="selectModel === model.key ? 'modal-item selectModel' : 'modal-item'"
40+
:class="selectModel === model.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
4141
v-for="model in Dall3Models"
4242
:key="model.key"
4343
>
4444
<el-image :src="model.image" fit="contain" @click="handleModelClick(model)" />
45-
<div class="model-font">{{ model.name }}</div>
45+
<div class="text-14px color-#3e3e3e font-bold">{{ model.name }}</div>
4646
</div>
4747
</el-space>
4848
</div>
49-
<div class="image-style">
49+
<div class="mt-30px">
5050
<div>
5151
<el-text tag="b">风格选择</el-text>
5252
</div>
53-
<el-space wrap class="image-style-list">
53+
<el-space wrap class="mt-15px">
5454
<div
55-
:class="style === imageStyle.key ? 'image-style-item selectImageStyle' : 'image-style-item'"
55+
:class="style === imageStyle.key ? 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-#1293ff rounded-5px cursor-pointer' : 'w-110px overflow-hidden flex flex-col items-center border-3 border-solid border-transparent cursor-pointer'"
5656
v-for="imageStyle in Dall3StyleList"
5757
:key="imageStyle.key"
5858
>
5959
<el-image :src="imageStyle.image" fit="contain" @click="handleStyleClick(imageStyle)" />
60-
<div class="style-font">{{ imageStyle.name }}</div>
60+
<div class="text-14px color-#3e3e3e font-bold">{{ imageStyle.name }}</div>
6161
</div>
6262
</el-space>
6363
</div>
64-
<div class="image-size">
64+
<div class="w-full mt-30px">
6565
<div>
6666
<el-text tag="b">画面比例</el-text>
6767
</div>
68-
<el-space wrap class="size-list">
68+
<el-space wrap class="flex flex-row justify-between w-full mt-20px">
6969
<div
70-
class="size-item"
70+
class="flex flex-col items-center cursor-pointer"
7171
v-for="imageSize in Dall3SizeList"
7272
:key="imageSize.key"
7373
@click="handleSizeClick(imageSize)"
7474
>
7575
<div
76-
:class="selectSize === imageSize.key ? 'size-wrapper selectImageSize' : 'size-wrapper'"
76+
:class="selectSize === imageSize.key ? 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-#1293ff' : 'flex flex-col items-center justify-center rounded-7px p-4px w-50px h-50px bg-white border-1 border-solid border-white'"
7777
>
7878
<div :style="imageSize.style"></div>
7979
</div>
80-
<div class="size-font">{{ imageSize.name }}</div>
80+
<div class="text-14px color-#3e3e3e font-bold">{{ imageSize.name }}</div>
8181
</div>
8282
</el-space>
8383
</div>
84-
<div class="btns">
84+
<div class="flex justify-center mt-50px">
8585
<el-button
8686
type="primary"
8787
size="large"
@@ -229,135 +229,4 @@ const settingValues = async (detail: ImageVO) => {
229229
/** 暴露组件方法 */
230230
defineExpose({ settingValues })
231231
</script>
232-
<style scoped lang="scss">
233-
// 热词
234-
.hot-words {
235-
display: flex;
236-
flex-direction: column;
237-
margin-top: 30px;
238232

239-
.word-list {
240-
display: flex;
241-
flex-direction: row;
242-
flex-wrap: wrap;
243-
justify-content: start;
244-
margin-top: 15px;
245-
246-
.btn {
247-
margin: 0;
248-
}
249-
}
250-
}
251-
252-
// 模型
253-
.model {
254-
margin-top: 30px;
255-
256-
.model-list {
257-
margin-top: 15px;
258-
259-
.modal-item {
260-
width: 110px;
261-
//outline: 1px solid blue;
262-
overflow: hidden;
263-
display: flex;
264-
flex-direction: column;
265-
align-items: center;
266-
border: 3px solid transparent;
267-
cursor: pointer;
268-
269-
.model-font {
270-
font-size: 14px;
271-
color: #3e3e3e;
272-
font-weight: bold;
273-
}
274-
}
275-
276-
.selectModel {
277-
border: 3px solid #1293ff;
278-
border-radius: 5px;
279-
}
280-
}
281-
}
282-
283-
// 样式 style
284-
.image-style {
285-
margin-top: 30px;
286-
287-
.image-style-list {
288-
margin-top: 15px;
289-
290-
.image-style-item {
291-
width: 110px;
292-
//outline: 1px solid blue;
293-
overflow: hidden;
294-
display: flex;
295-
flex-direction: column;
296-
align-items: center;
297-
border: 3px solid transparent;
298-
cursor: pointer;
299-
300-
.style-font {
301-
font-size: 14px;
302-
color: #3e3e3e;
303-
font-weight: bold;
304-
}
305-
}
306-
307-
.selectImageStyle {
308-
border: 3px solid #1293ff;
309-
border-radius: 5px;
310-
}
311-
}
312-
}
313-
314-
// 尺寸
315-
.image-size {
316-
width: 100%;
317-
margin-top: 30px;
318-
319-
.size-list {
320-
display: flex;
321-
flex-direction: row;
322-
justify-content: space-between;
323-
width: 100%;
324-
margin-top: 20px;
325-
326-
.size-item {
327-
display: flex;
328-
flex-direction: column;
329-
align-items: center;
330-
cursor: pointer;
331-
332-
.size-wrapper {
333-
display: flex;
334-
flex-direction: column;
335-
align-items: center;
336-
justify-content: center;
337-
border-radius: 7px;
338-
padding: 4px;
339-
width: 50px;
340-
height: 50px;
341-
background-color: #fff;
342-
border: 1px solid #fff;
343-
}
344-
345-
.size-font {
346-
font-size: 14px;
347-
color: #3e3e3e;
348-
font-weight: bold;
349-
}
350-
}
351-
}
352-
353-
.selectImageSize {
354-
border: 1px solid #1293ff !important;
355-
}
356-
}
357-
358-
.btns {
359-
display: flex;
360-
justify-content: center;
361-
margin-top: 50px;
362-
}
363-
</style>

0 commit comments

Comments
 (0)