From 8a5713ef7c5b3fa5301cb68acee81fbb65c4e8a1 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Thu, 14 Sep 2023 06:55:03 +0800
Subject: [PATCH] feat: finish mj model layout

---
 web/src/views/ImageMj.vue | 72 +++++++++++++++++++++++++++++----------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index bc8402c7..e76d8a27 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -20,22 +20,11 @@
 
           <div class="param-line">
             <el-row :gutter="10">
-              <el-col :span="8">
-                <div class="grid-content">
-                  <div class="shape vertical"></div>
-                  <div class="text">竖图</div>
-                </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>
+              <el-col :span="8" v-for="item in rates" :key="item.value">
+                <div :class="item.value === params.rate?'grid-content active':'grid-content'"
+                     @click="changeRate(item)">
+                  <div :class="'shape '+item.css"></div>
+                  <div class="text">{{ item.text }}</div>
                 </div>
               </el-col>
             </el-row>
@@ -54,6 +43,19 @@
               </el-icon>
             </el-tooltip>
           </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 class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
@@ -70,9 +72,25 @@ import {ref} from "vue"
 import {InfoFilled} from "@element-plus/icons-vue";
 
 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({
-  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>
 
 <style lang="stylus" scoped>
@@ -87,6 +105,7 @@ const params = ref({
       background-color #262626
       border 1px solid #454545
       min-width 300px
+      max-width 300px
       padding 10px
       border-radius 10px
       color #ffffff;
@@ -113,10 +132,14 @@ const params = ref({
           .grid-content {
             background-color #383838
             border-radius 5px
-            padding 5px 6px
+            padding 8px 14px
             display flex
             cursor pointer
 
+            &:hover {
+              background-color #585858
+            }
+
             .shape {
               width 16px
               height 16px
@@ -136,8 +159,21 @@ const params = ref({
               position relative
               top 3px
             }
+
+            .img {
+              
+            }
           }
 
+
+          .grid-content.active {
+            color #47fff1
+            background-color #585858
+
+            .shape {
+              border 1px solid #47fff1
+            }
+          }
         }
       }
     }