提交

src/view/allMedia/AIeditor/components/comment.vue

@@ -1,11 +1,30 @@
 <template>
-  <div class="pen_ink">
-  </div>
-</template>
-
-<script setup>
-// 评论
-</script>
-
-<style scoped>
-</style>
+    <div class="comment">
+  
+      <div style="width: 310px; margin: 0 auto" v-if="is_status === 'none'">
+        <el-image style="width: 310px; height: 232.5px" :src="pl" fit="fill" />
+        <div class="none_title">在左侧选中文本进行评论</div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  // 评论
+  import pl from '@/assets/img/pl.png';
+  import { ref } from 'vue';
+  const is_status = ref('none');
+  
+  </script>
+  
+  <style scoped>
+  .none_title {
+    font-size: 14px;
+    color: #4b4b4b;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: left;
+    text-align: center;
+  }
+  </style>
+  

src/view/allMedia/AIeditor/components/dictionary.vue

@@ -1,11 +1,47 @@
 <template>
-  <div class="pen_ink">
-  </div>
-</template>
-
-<script setup>
-// 字典
-</script>
-
-<style scoped>
-</style>
+    <div class="image">
+      <el-input
+        style="width: 310px"
+        v-model="input1"
+        placeholder="请输入您要查询的字词"
+      >
+        <template #append>
+          <el-button type="primary" :loading="is_status === 'load'" @click="search">查询</el-button>
+        </template>
+      </el-input>
+  
+    </div>
+  </template>
+  
+  <script setup>
+  // 词典
+  import { ref } from 'vue';
+  const is_status = ref('none');
+  
+  const search = () => {
+      is_status.value = 'load'
+      let t = setTimeout(() => {
+          clearTimeout(t)
+      is_status.value = 'none'
+      }, 1000);
+  }
+  </script>
+  
+  <style scoped>
+  .none_title {
+    font-size: 24px;
+    text-align: left;
+    font-weight: 700;
+    margin-bottom: 16px;
+    margin-left: 11.3%;
+  }
+  ul {
+    margin-left: 20px;
+  }
+  ul > li {
+    font-size: 14px;
+    color: #2c3e50;
+    margin-bottom: 16px;
+  }
+  </style>
+  

src/view/allMedia/AIeditor/components/image.vue

@@ -1,11 +1,55 @@
 <template>
-  <div class="pen_ink">
+  <div class="image">
+    <el-input
+      style="width: 310px"
+      v-model="input1"
+      placeholder="请输入图片描述"
+    >
+      <template #append>
+        <el-button type="primary" :loading="is_status === 'load'" @click="search">查找</el-button>
+      </template>
+    </el-input>
+
+    <div style="width: 310px; margin: 0 auto" v-if="is_status === 'none'">
+      <el-image style="width: 310px; height: 232.5px" :src="image" fit="fill" />
+      <div class="none_title">输入描述，自动配图</div>
+      <ul>
+        <li>根据您对图片的描述，智能匹配相关图片</li>
+        <li>图片均来自Pixabay等图库，可免费商用   </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script setup>
 // 图片
+import image from '@/assets/img/image.png';
+import { ref } from 'vue';
+const is_status = ref('none');
+
+const search = () => {
+    is_status.value = 'load'
+    let t = setTimeout(() => {
+        clearTimeout(t)
+    is_status.value = 'none'
+    }, 1000);
+}
 </script>
 
 <style scoped>
+.none_title {
+  font-size: 24px;
+  text-align: left;
+  font-weight: 700;
+  margin-bottom: 16px;
+  margin-left: 11.3%;
+}
+ul {
+  margin-left: 20px;
+}
+ul > li {
+  font-size: 14px;
+  color: #2c3e50;
+  margin-bottom: 16px;
+}
 </style>