lanecarford_front/src/views/Workshop/home.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
import { showConfirmDialog } from 'vant'
import { FlowType } from '@/types/enum'

//const props = defineProps({
//})
const emit = defineEmits([
	'viewType'
])

// const data = reactive({
// })

const newJourney = ()=>{
	router.push(`/workshop/styList/index?flowType=${FlowType.MAIN}`)
}

const historicalReview = ()=>{
	router.push(`/workshop/creation?flowType=${FlowType.HISTORY}`)
}

onMounted(()=>{
	emit('viewType', 1)
})
onUnmounted(()=>{
})
defineExpose({})
// const {  } = toRefs(data);
</script>
<template>
	<div class="homePage">
		<img class="homeBg" src="@/assets/images/homeBg.png" alt="">
		<div class="button">
			<div class="item" @click="newJourney">New Journey</div>
			<div class="item" @click="historicalReview">Historical Review</div>
		</div>
		<div class="info">
			Powered by AiDLab for Lane Crawford
		</div>
	</div>
</template>
<style lang="less" scoped>
	.header-title {
		--header-title-background: #fff;
		--header-title-height: 12rem !important;
	}
	.homePage{
		position: relative;
		flex: 1;
		> .homeBg{
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		> .button{
			margin: 64.3rem auto 0;
			font-family: satoshiBold;
			font-size: 4.6rem;
			color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			> .item{
				width: 45.6rem;
				margin-bottom: 8rem;
				line-height: 13.1rem;
				border: 1.16px solid #FFFFFF;
				backdrop-filter: blur(2.5rem);
				background: radial-gradient(100% 100% at 0% 0%, rgba(115, 115, 115, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		> .info{
			position: absolute;
			bottom: 7rem;
			font-size: 3rem;
			font-family: satoshiRegular;
			color: #fff;
			text-align: center;
			width: 100%;
			font-weight: 400;
			letter-spacing: .5rem;
		}
	}
</style>