1

src/pages/CreationRecord/components/ImageViewer.vue

 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer :images="[img]">
+    <t-image-viewer :images="[img]" :closeOnOverlay="true">
       <template #trigger="{ open }">
         <div class="tdesign-demo-image-viewer__ui-image">
           <img

src/pages/Home/components/HomeSwiper/swiper.vue

 <template>
-  <div class="">
-    <div class="custom-home-swiper">
-      <div class="swiper-button-prev swiper-button-white prev-next">
-        <img :src="imgs.prev" alt="" />
-      </div>
-      <!-- 
+  <div class="custom-home-swiper">
+    <div class="swiper-button-prev swiper-button-white prev-next">
+      <img :src="imgs.prev" alt="" />
+    </div>
+    <!-- 
        -->
-      <Swiper
-        class="swiper-no-swiping"
-        :slidesPerView="4"
-        :loop="true"
-        :centeredSlides="false"
-        :loopAdditionalSlides="2"
-        :preventClicksPropagation="true"
-        :loopFillGroupWithBlank="true"
-        :modules="modules"
-        :navigation="{
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        }"
-        :autoplay="{
-          delay: 2000,
-          stopOnLastSlide: false,
-          disableOnInteraction: false,
-        }"
-      >
-        <!-- @click="goDetail(item)" -->
-        <SwiperSlide v-for="(item, index) in ScrollList.list" :key="index">
-          <CustomCardTwo
-            @click="goDetail(item)"
-            :img="item.image"
-            :title="item.title"
-            :content="item.description"
-          ></CustomCardTwo>
-        </SwiperSlide>
-      </Swiper>
-      <div class="swiper-button-next swiper-button-white prev-next">
-        <img :src="imgs.next" alt="" />
-      </div>
+    <Swiper
+      class="swiper-no-swiping"
+      :slidesPerView="4"
+      :loop="true"
+      :centeredSlides="false"
+      :loopAdditionalSlides="2"
+      :preventClicksPropagation="true"
+      :loopFillGroupWithBlank="true"
+      :modules="modules"
+      :navigation="{
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      }"
+      :autoplay="{
+        delay: 2000,
+        stopOnLastSlide: false,
+        disableOnInteraction: false,
+      }"
+    >
+      <!-- @click="goDetail(item)" -->
+      <SwiperSlide v-for="(item, index) in ScrollList.list" :key="index">
+        <CustomCardTwo
+          @click="goDetail(item)"
+          :img="item.image"
+          :title="item.title"
+          :content="item.description"
+        ></CustomCardTwo>
+      </SwiperSlide>
+    </Swiper>
+    <div class="swiper-button-next swiper-button-white prev-next">
+      <img :src="imgs.next" alt="" />
     </div>
   </div>
 </template>

src/pages/Home/index.less

@@ -3,4 +3,7 @@
   margin: @page-padding-top 0 30px 0;
   margin-top: 0;
   padding-top: @page-padding-top;
+  .recommend-parent {
+    position: relative;
+  }
 }

src/pages/Home/index.tsx

-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import HomeSwiper from './components/HomeSwiper/swiper.vue';
 import './index.less';
 import ModuleCard from '@/components/modulecard.vue';
 import { getScenariosRecommend } from '@/utils/api/scenes';
 import { useRouter } from 'vue-router';
 import { TASKTYPE } from '@/utils/api/Task';
+import CustomLoading from '@/components/custom/loading2.vue';
 export default defineComponent({
   setup() {
     const router = useRouter();
+    const loading = ref(false);
     const CardList = reactive({
       list: [] as any,
     });
     const getRecommend = async () => {
       try {
+        loading.value = true;
         const res: any = await getScenariosRecommend();
         if (res.code == 0) {
           CardList.list = res.data;
         }
+        loading.value = false;
         console.log(res.data);
       } catch (e) {
+        loading.value = false;
         console.log(e);
       }
     };
@@ -46,14 +51,15 @@ export default defineComponent({
       getRecommend();
     });
     return () => (
-      <div>
-        <div class="swiper-box">
-          <HomeSwiper></HomeSwiper>
+      <div class="swiper-box">
+        <HomeSwiper></HomeSwiper>
+        <div class="recommend-parent">
           <ModuleCard
             label="推荐工具"
             list={CardList.list}
             onChange={onChange}
           ></ModuleCard>
+          <CustomLoading v-show={loading.value}></CustomLoading>
         </div>
       </div>
     );

src/pages/ImageGeneration/index.vue

@@ -78,6 +78,7 @@
         </div>
       </div>
     </div>
+    <div class="help"></div>
     <CustomLoading v-show="loading"></CustomLoading>
   </div>
 </template>
@@ -339,9 +340,12 @@ onBeforeUnmount(() => {
   position: relative;
   width: 100%;
   height: 100%;
-  display: flex;
+  text-align: center;
   .generation-box-parent {
     width: 100%;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 auto;
     .generation-box {
       width: 100%;
       display: flex;
@@ -373,6 +377,7 @@ onBeforeUnmount(() => {
             color: #b1b5c4;
             font-weight: 300;
             font-size: @font-size-12;
+            text-align: start;
           }
           .value {
             display: flex;
@@ -421,5 +426,11 @@ onBeforeUnmount(() => {
       }
     }
   }
+  .help {
+    width: 0;
+    height: 100%;
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 </style>

src/pages/ImgConversion/components/img_darg.vue

 <template>
-  <div
-    :class="[DefaultClassName, 'drag']"
-    :style="{
-      backgroundImage: `url(${img})`,
-    }"
-  ></div>
+  <div class="drag-box">
+    <div
+      :class="[DefaultClassName, 'drag']"
+      :style="{
+        backgroundImage: `url(${img})`,
+      }"
+    ></div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -46,8 +48,8 @@ class Drag {
   }
   // 获取父元素的宽高
   getBoundary() {
-    this.maxWidth = this.target.parentNode.clientWidth;
-    this.maxHeight = this.target.parentNode.clientHeight;
+    this.maxWidth = this.target.parentNode.parentNode.clientWidth;
+    this.maxHeight = this.target.parentNode.parentNode.clientHeight;
   }
   // 获取自身起始信息
   getInfo(e) {
@@ -273,16 +275,25 @@ onMounted(() => {
 </script>
 
 <style lang="less">
+.drag-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .drag {
   height: 100px;
   width: 100px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   -moz-background-size: 100% 100%;
+  border: 1px dashed transparent;
+  cursor: all-scroll;
+  &:hover {
+    border-color: #ddd;
+  }
   .horn {
     width: 14px;
     height: 14px;
-    /* background-color: red; */
     position: absolute;
   }
 
@@ -291,7 +302,6 @@ onMounted(() => {
     height: calc(100% - 14px);
     margin: 7px 0px;
     position: absolute;
-    /* background-color: #000; */
     cursor: col-resize;
   }
   .horizontal {
@@ -299,7 +309,6 @@ onMounted(() => {
     height: 10px;
     margin: 0px 7px;
     position: absolute;
-    /* background-color: #000; */
     cursor: row-resize;
   }
   .top {

src/utils/test/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CSS垂直居中</title>
+    <style>
+      .wrapper {
+        width: 500px;
+        height: 500px;
+        background-color: pink;
+        text-align: center;
+      }
+
+      .box {
+        width: 100px;
+        height: 100px;
+        background-color: deepskyblue;
+
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 auto;
+      }
+
+      .help {
+        width: 0;
+        height: 100%;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <div class="box"></div>
+      <div class="help"></div>
+    </div>
+  </body>
+</html>