diff --git a/src/assets/images/homeBg.png b/src/assets/images/homeBg.png new file mode 100644 index 0000000..92b7848 Binary files /dev/null and b/src/assets/images/homeBg.png differ diff --git a/src/views/Workshop/home.vue b/src/views/Workshop/home.vue index 821a8a4..eab0352 100644 --- a/src/views/Workshop/home.vue +++ b/src/views/Workshop/home.vue @@ -3,7 +3,7 @@ import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from import { useRouter } from 'vue-router' const router = useRouter() import { showConfirmDialog } from 'vant' -import MyEvent from '@/utils/myEvent' +import { FlowType } from '@/types/enum' //const props = defineProps({ //}) @@ -14,27 +14,12 @@ const emit = defineEmits([ // const data = reactive({ // }) -const clickSwitchVIPID = ()=>{ - showConfirmDialog({ - title: 'Switch VIP ID?', - message: 'You have unsaved changes. Your progress will be lost.', - confirmButtonText: 'Yes', - cancelButtonText: 'Cancel', - }) - .then(() => { - MyEvent.emit('clear-generate-state') - MyEvent.emit('clearAllCache') - router.push({ name: 'customer', query: { demo: 1 } }) - }) - .catch(() => {}) +const newJourney = ()=>{ + router.push(`/workshop/styList/index?flowType=${FlowType.MAIN}`) } -const openFlow = (path:string,flowType:string)=>{ - if(flowType == 'clientId')return clickSwitchVIPID() - if(flowType == 'main'){ - router.push({ name: path }) - }else{ - router.push({ name: path, query: { demo: 1 } }) - } + +const historicalReview = ()=>{ + router.push(`/workshop/creation?flowType=${FlowType.HISTORICAL}`) } onMounted(()=>{ @@ -46,29 +31,14 @@ defineExpose({}) // const { } = toRefs(data); @@ -77,46 +47,46 @@ defineExpose({}) --header-title-background: #fff; --header-title-height: 12rem !important; } - .homeNavPage{ - > .title{ - padding: 0 8.4rem; - font-family: satoshiBold; - font-weight: 700; - margin-top: 6.8rem; - font-size: 9.6rem; - line-height: 124%; - background: #B3B3B3; - background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), linear-gradient( - 344deg, #B3B3B2 16%, #000000 66%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + .homePage{ + position: relative; + flex: 1; + > .homeBg{ + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; } - > .navBox{ - > .navTitle{ - padding: 0 8.4rem; - font-family: satoshiBold; - font-weight: 700; - font-size: 5.2rem; - margin: 6.3rem 0; - } - > .navList{ - display: flex; - flex-wrap: wrap; - padding: 0 7.4rem; - gap: 4.8rem; - > .item{ - // width: 44.2rem; - // height: 41.6rem; - height: auto; - width: calc(50% - 4.8rem / 2); - > img{ - width: 100%; - height: 100%; - object-fit: contain; - } + > .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(40.50761795043945px); + 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; + } } \ No newline at end of file