xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-17 16:56:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: finish mj model layout

Browse Source
This commit is contained in:
RockYang 2023-09-14 06:55:03 +08:00
parent 3365a6008d
commit 952d6183ed
1 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/views/ImageMj.vue
View File

@ -20,22 +20,11 @@
<div class="param-line"> <div class="param-line">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="8"> <el-col :span="8" v-for="item in rates" :key="item.value">
<div class="grid-content"> <div :class="item.value === params.rate?'grid-content active':'grid-content'"
<div class="shape vertical"></div> @click="changeRate(item)">
<div class="text">竖图</div> <div :class="'shape '+item.css"></div>
</div> <div class="text">{{ item.text }}</div>
</el-col>
<el-col :span="8">
<div class="grid-content">
<div class="shape square"></div>
<div class="text">方图</div>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content">
<div class="shape horizontal"></div>
<div class="text">横图</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -54,6 +43,19 @@
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="param-line">
<el-row :gutter="10">
<el-col :span="12" v-for="item in models" :key="item.value">
<div :class="item.value === params.model?'grid-content active':'grid-content'"
@click="changeModel(item)">
<div class="img">
<el-image src="https://ai.2021it.com/assets/mj-8c02cbcc.png"></el-image>
</div>
<div class="text">{{ item.text }}</div>
</div>
</el-col>
</el-row>
</div>
</div> </div>
</div> </div>
<div class="task-list-box" :style="{ height: listBoxHeight + 'px' }"> <div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
@ -70,9 +72,25 @@ import {ref} from "vue"
import {InfoFilled} from "@element-plus/icons-vue"; import {InfoFilled} from "@element-plus/icons-vue";
const listBoxHeight = window.innerHeight - 20 const listBoxHeight = window.innerHeight - 20
const rates = [
{css: "horizontal", value: "16:9", text: "横图"},
{css: "square", value: "1:1", text: "方图"},
{css: "vertical", value: "9:16", text: "竖图"},
]
const models = [
{text: "标准模型", value: "--v 5.2"},
{text: "动漫模型", value: "--niji 5"},
]
const params = ref({ const params = ref({
rate: '16:9' rate: rates[0].value,
model: models[0].value
}) })
const changeRate = (item) => {
params.value.rate = item.value
}
const changeModel = (item) => {
params.value.model = item.value
}
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -87,6 +105,7 @@ const params = ref({
background-color #262626 background-color #262626
border 1px solid #454545 border 1px solid #454545
min-width 300px min-width 300px
max-width 300px
padding 10px padding 10px
border-radius 10px border-radius 10px
color #ffffff; color #ffffff;
@ -113,10 +132,14 @@ const params = ref({
.grid-content { .grid-content {
background-color #383838 background-color #383838
border-radius 5px border-radius 5px
padding 5px 6px padding 8px 14px
display flex display flex
cursor pointer cursor pointer
&:hover {
background-color #585858
}
.shape { .shape {
width 16px width 16px
height 16px height 16px
@ -136,8 +159,21 @@ const params = ref({
position relative position relative
top 3px top 3px
} }
.img {
}
} }
.grid-content.active {
color #47fff1
background-color #585858
.shape {
border 1px solid #47fff1
}
}
} }
} }
} }