From 3d5bef78b39635d90d6455570735a537029aa135 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Sat, 25 May 2024 15:36:21 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91AI=20Image?=
 =?UTF-8?q?=20=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/index.vue | 74 ++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/views/ai/image/index.vue

diff --git a/src/views/ai/image/index.vue b/src/views/ai/image/index.vue
new file mode 100644
index 00000000..edd6af22
--- /dev/null
+++ b/src/views/ai/image/index.vue
@@ -0,0 +1,74 @@
+<!-- image -->
+<template>
+  <div class="ai-image">
+    <div class="left">
+      <div class="segmented">
+        <el-segmented v-model="value" :options="options" />
+      </div>
+      <div class="modal-switch-container">
+        <Dall3 />
+      </div>
+    </div>
+    <div class="main">
+      main
+    </div>
+    <div class="right">
+      right
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Dall3 from './dall3/index.vue'
+
+const value = ref('DALL3绘画')
+const options = ['DALL3绘画', 'MJ绘画']
+
+
+</script>
+<style scoped lang="scss">
+
+.ai-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+
+    .segmented .el-segmented {
+      --el-border-radius-base: 16px;
+      --el-segmented-item-selected-color: #fff;
+      background-color: #ececec;
+      width: 350px;
+    }
+
+    .modal-switch-container {
+      height: 100%;
+      overflow-y: auto;
+      margin-top: 15px;
+    }
+  }
+
+  .main {
+    flex: 1;
+    background-color: #fff;
+  }
+
+  .right {
+    width: 350px;
+    background-color: #f7f8fa;
+  }
+}
+
+
+</style>