交互

src/utils/tools.ts

@@ -210,4 +210,8 @@ export function FormatBytes(bytes, options: { decimals?: number, unitBig?: boole
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 	const value = bytes / Math.pow(k, i);
 	return `${Number(value.toFixed(decimals))} ${sizes[i]}`;
+}
+
+export const openAida = () => {
+	window.open('https://www.aida.com.hk/', '_blank')
 }

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">

src/views/shoppingCart/sc-list-null.vue

@@ -19,7 +19,6 @@
 	})
 	const emit = defineEmits(['explore'])
 	const handleClick = () => {
-		console.log('emit("explore")')
 		emit('explore')
 	}
 </script>

src/views/shoppingCart/sc-list.vue

@@ -42,6 +42,7 @@
 				:show-button="!isMini"
 				title="Your Cart is empty"
 				tip="Discover new fashion assets and add them to your cart."
+				@explore="handleExplore"
 			/>
 			<sc-item
 				v-for="v in list"
@@ -83,6 +84,8 @@
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import scItem from './sc-item.vue'
 	import scListNull from './sc-list-null.vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
 	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		title: { type: String, default: '' },
@@ -126,7 +129,9 @@
 			return list_.value.filter(() => true).sort((a, b) => a.amount - b.amount)
 		}
 		if (sortBy.value === 'SelectedFirst') {
-			return list_.value.filter(() => true).sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
+			return list_.value
+				.filter(() => true)
+				.sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
 		}
 		if (sortBy.value === 'DateAdded') {
 			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
@@ -180,8 +185,8 @@
 			})
 			.catch(() => {})
 	}
-	const handleExploreClick = () => {
-		console.log('探索')
+	const handleExplore = () => {
+		router.push({ name: 'brand' })
 	}
 </script>