交互

src/views/home/index.vue

@@ -2,7 +2,7 @@
 	<div class="home-index">
 		<section-index />
 		<section-designer />
-		<section-design />
+		<section-aida />
 		<section-digital-items1 />
 		<section-digital-items2 />
 		<section-footer />
@@ -13,7 +13,7 @@
 	import { computed } from 'vue'
 	import SectionIndex from './section-index.vue'
 	import SectionDesigner from './section-designer.vue'
-	import SectionDesign from './section-design.vue'
+	import SectionAida from './section-aida.vue'
 	import SectionDigitalItems1 from './section-digital-items1.vue'
 	import SectionDigitalItems2 from './section-digital-items2.vue'
 	import SectionFooter from './section-footer.vue'

src/views/home/section-aida.vue

@@ -1,24 +1,25 @@
 <template>
-	<section class="section-design bgw">
-		<img src="@/assets/images/home/design-bg.jpg" class="bg" />
+	<section class="section-aida bgw">
+		<img src="@/assets/images/home/aida-bg.jpg" class="bg" />
 		<div class="content">
 			<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
 			<div class="title">Design with AiDA</div>
 			<div class="tip">
-				Each garment on this platform is where designer vision blooms through AiDA. A tool that
-				nurtures your creativity, never overshadows it. Let your ideas flourish.
+				Each garment on this platform is where designer vision blooms through AiDA. A tool
+				that nurtures your creativity, never overshadows it. Let your ideas flourish.
 			</div>
-			<button custom>Try Now</button>
+			<button custom @click="openAida">Try Now</button>
 		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import { openAida } from '@/utils/tools'
 </script>
 
 <style lang="less">
-	.section-design {
+	.section-aida {
 		> .content {
 			width: 55rem;
 			top: 12rem;

src/views/home/section-digital-items1.vue

@@ -8,7 +8,7 @@
 				<br />
 				digital visions—a virtual realm where creativity collides and evolves.
 			</div>
-			<button custom="black">Shop All</button>
+			<button custom="black" @click="onShopAll">Shop All</button>
 			<div class="list">
 				<div v-for="v in list" :key="v.url">
 					<img :src="v.url" alt="" />
@@ -22,6 +22,9 @@
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+
 	const list = ref([
 		{
 			title: 'Women’s Itemk',
@@ -44,6 +47,9 @@
 			url: 'http://118.31.39.42:3000/falls/digital-items-4.png'
 		}
 	])
+	const onShopAll = () => {
+		router.push({ name: 'digitalItem' })
+	}
 </script>
 
 <style lang="less">

src/views/home/section-footer.vue

@@ -8,11 +8,11 @@
 					<img src="@/assets/images/logos/aida-black.png" />
 				</div>
 				<div class="tip">
-					Stylish Parade is a commerce platform for designers, serving as AiDA's commercial
-					extension.
+					Stylish Parade is a commerce platform for designers, serving as AiDA's
+					commercial extension.
 				</div>
 				<div class="link">
-					<span class="text">Bloom your Creativity with AiDA!</span>
+					<span class="text" @click="openAida">Bloom your Creativity with AiDA!</span>
 					<span class="icon"><svg-icon name="arrow_right" size="12" /></span>
 				</div>
 			</div>
@@ -54,6 +54,9 @@
 
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import { openAida } from '@/utils/tools'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
 </script>
 
 <style lang="less">