0911 第一版

src/components/SelectTemplateV2.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onMounted } from "vue"
 import { useRouter } from 'vue-router'
+import GenerateImgConfirm from './GenerateImgConfirm.vue'
 defineProps({
   show: true
 })
 
 const menuData = ref([
   {
-    title: '神仙',
     imgSrc: 'src/assets/images/generate/shenxian.png',
     activeImgSrc: 'src/assets/images/generate/shenxian-selected.png',
     children: [
@@ -20,7 +20,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '仙侠',
     imgSrc: 'src/assets/images/generate/xianxia.png',
     activeImgSrc: 'src/assets/images/generate/xianxia-selected.png',
     children: [
@@ -33,7 +32,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '复古',
     imgSrc: 'src/assets/images/generate/fugu.png',
     activeImgSrc: 'src/assets/images/generate/fugu-selected.png',
     children: [
@@ -46,7 +44,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '新中式',
     imgSrc: 'src/assets/images/generate/xinzhongshi.png',
     activeImgSrc: 'src/assets/images/generate/xinzhongshi-selected.png',
     children: [
@@ -59,7 +56,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '露营',
     imgSrc: 'src/assets/images/generate/luying.png',
     activeImgSrc: 'src/assets/images/generate/luying-selected.png',
     children: [
@@ -72,7 +68,6 @@ const menuData = ref([
     ]
   },
   {
-    title: '派对',
     imgSrc: 'src/assets/images/generate/paidui.png',
     activeImgSrc: 'src/assets/images/generate/paidui-selected.png',
     children: [
@@ -133,8 +128,8 @@ const getImageStyle = (index, actived)=> {
   console.log(actived)
   return {
     position: 'absolute',
-    width: actived? index === 3? '68px' : '54px' : index === 3 ? '66px' : '44px',
-    top: actived? '14.2%' : '15%',
+    width: actived? index === 3? '16vw' : '13vw' : index === 3 ? '15vw' : '10.8vw',
+    top: actived? '14%' : '15%',
     left: calculateMenuLevel1Left(index, actived) + '%'
   }
 }
@@ -174,7 +169,7 @@ const goToGenerateImgPage = (item) => {
 
 <template>
   <div :show="show">
-    <div class="home-wrapper" style="z-index: 9;">
+    <div class="home-wrapper">
       <div class="scene-item item-1">
         <img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
       </div>
@@ -214,13 +209,6 @@ const goToGenerateImgPage = (item) => {
           class="content-panel"
           :class="{ active: activeContent === index }"
         >
-        <div class="content-header">
-          <div class="breadcrumb">
-            <span>{{ getMenuLevelTitle(1) }}</span>
-            <span>{{ getMenuLevelTitle(2) }}</span>
-          </div>
-          <h2>{{ item.title }}</h2>
-        </div>
         </div>
     </div>
 
@@ -235,8 +223,8 @@ const goToGenerateImgPage = (item) => {
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
-  gap: 14px;
-  margin-top: 192px;
+  gap: 3vw;
+  margin-top: 43vw;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -255,15 +243,15 @@ const goToGenerateImgPage = (item) => {
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
-  width: 168px;
-  height: 224px;
+  width: 39vw;
+  height: 52vw;
 }
 .border-img {
-  width: 170px;
-  height: 231px;
+  width: 39.5vw;
+  height: 54vw;
   position: absolute;
-  top: -2px;
-  left: 0px;
+  top: -0.5vw;
+  left: 0;
 }
 .home-wrapper {
   width: 100%;
@@ -281,10 +269,8 @@ const goToGenerateImgPage = (item) => {
 
 .scene-item {
   position: absolute;
-  z-index: 2;
   cursor: pointer;
   transition: all 0.4s ease;
-  border-radius: 8px;
   overflow: hidden;
   border: 3px solid transparent;
   animation: float 4s ease-in-out infinite;
@@ -292,7 +278,6 @@ const goToGenerateImgPage = (item) => {
 
 .scene-item:hover {
   transform: scale(1.05);
-  z-index: 10;
 }
 
 .scene-item img {
@@ -303,7 +288,7 @@ const goToGenerateImgPage = (item) => {
 }
 
 .item-1 {
-  width: 20px;
+  width: 5vw;
   top: 6.7%;
   left: 5%;
   animation-delay: 0s;