新用户信息收集
This commit is contained in:
@@ -97,7 +97,7 @@
|
||||
}
|
||||
const onVerifyCode = (code: string) => {
|
||||
console.log(code)
|
||||
router.push({ name: 'home' })
|
||||
router.push({ name: 'nuic' })
|
||||
}
|
||||
const onClickPrivacy = () => {}
|
||||
const onClickLogin = () => {
|
||||
|
||||
149
src/views/nuic/index.vue
Normal file
149
src/views/nuic/index.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="nuic background-pink">
|
||||
<div class="logo">
|
||||
<img src="@/assets/images/logo.png" />
|
||||
<span>FiDA</span>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="close" @click="onClose">
|
||||
<svg-icon name="close-border" size="33" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
v-for="(v, i) in list"
|
||||
:key="i"
|
||||
:state="active === i ? 1 : active > i ? 0 : 2"
|
||||
>
|
||||
<img v-show="i === active" src="@/assets/images/nuic/nav-active.png" draggable="false" />
|
||||
</div>
|
||||
</div>
|
||||
<component class="view" :is="list[active]" @next="onNext" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, markRaw } from 'vue'
|
||||
import nuic1 from './nuic-1.vue'
|
||||
import nuic2 from './nuic-2.vue'
|
||||
import nuic3 from './nuic-3.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const active = computed(() => Number(route.query.index || 0))
|
||||
const list = markRaw([nuic1, nuic2, nuic3])
|
||||
const onClose = () => {
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
const onNext = () => {
|
||||
const index = active.value + 1
|
||||
if (index < list.length) {
|
||||
router.push({ query: { index } })
|
||||
} else {
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nuic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
> .logo {
|
||||
position: absolute;
|
||||
top: 3.8rem;
|
||||
left: 3.8rem;
|
||||
|
||||
> img {
|
||||
width: 6rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 600;
|
||||
font-size: 3.3rem;
|
||||
}
|
||||
}
|
||||
> .header {
|
||||
margin-top: 5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
height: 11.2rem;
|
||||
> * {
|
||||
margin-right: 3rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
> .close {
|
||||
margin-bottom: -0.65rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .item {
|
||||
width: 30.2rem;
|
||||
&[state='1'] {
|
||||
height: 100%;
|
||||
}
|
||||
&[state='2'],
|
||||
&[state='0'] {
|
||||
height: 2rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
&[state='0'] {
|
||||
background: linear-gradient(90deg, #ff8ca2 0%, #ffa497 49.04%, #ff8d55 100%);
|
||||
}
|
||||
&[state='2'] {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::v-deep > .view {
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #252727;
|
||||
text-align: center;
|
||||
> .btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> button {
|
||||
width: 29.6rem;
|
||||
height: 6rem;
|
||||
border-radius: 6rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 600;
|
||||
color: #252727;
|
||||
cursor: pointer;
|
||||
margin-right: 3.4rem;
|
||||
background-color: #fff;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.skip {
|
||||
color: #8d8d8d;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/views/nuic/nuic-1.vue
Normal file
55
src/views/nuic/nuic-1.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="nuic-1">
|
||||
<img src="@/assets/images/nuic/nuic-1-bg.png" />
|
||||
<p class="hi">Hi, Aaa.</p>
|
||||
<p class="title">Help Fiphant discover the <b>'YOU'</b> in your space.</p>
|
||||
<p class="tip">
|
||||
Let's set up your profile. A few quick details will help Fiphant understand
|
||||
<br />
|
||||
your needs and find exactly what you're looking for.
|
||||
</p>
|
||||
<div class="btns">
|
||||
<button class="next" @click="emit('next')">Let’s go, Fiphant!</button>
|
||||
<button class="skip" @click="onSkip">Skip</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['next'])
|
||||
const onSkip = () => {
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nuic-1 {
|
||||
> img {
|
||||
width: 44.7rem;
|
||||
height: auto;
|
||||
margin-bottom: 4.8rem;
|
||||
}
|
||||
> .hi {
|
||||
font-weight: 500;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .title {
|
||||
font-weight: 500;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
> b {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
}
|
||||
> .tip {
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
color: #585858;
|
||||
margin-bottom: 8.7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/views/nuic/nuic-2.vue
Normal file
107
src/views/nuic/nuic-2.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="nuic-2">
|
||||
<!-- <img src="@/assets/images/nuic/nuic-1-bg.png" /> -->
|
||||
<p class="title">What's your dream <b>home vibe</b> ?</p>
|
||||
<div class="list">
|
||||
<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
|
||||
<img :src="v.url" draggable="false" />
|
||||
<div class="active" v-show="v.active">
|
||||
<span>Constructivism</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button class="more" @click="onLoadMore">
|
||||
<span>Load more</span>
|
||||
<div><svg-icon name="refresh-single" size="24" /></div>
|
||||
</button>
|
||||
<button class="next" @click="emit('next')">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['next'])
|
||||
const list = ref([
|
||||
{ id: 1, url: '/image/nuic/style-1.png', active: false },
|
||||
{ id: 2, url: '/image/nuic/style-2.png', active: false },
|
||||
{ id: 3, url: '/image/nuic/style-3.png', active: false },
|
||||
{ id: 4, url: '/image/nuic/style-4.png', active: false },
|
||||
{ id: 5, url: '/image/nuic/style-5.png', active: false },
|
||||
{ id: 6, url: '/image/nuic/style-6.png', active: false },
|
||||
{ id: 7, url: '/image/nuic/style-7.png', active: false },
|
||||
{ id: 8, url: '/image/nuic/style-8.png', active: false }
|
||||
])
|
||||
const onLoadMore = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nuic-2 {
|
||||
> .title {
|
||||
font-weight: 500;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 6rem;
|
||||
> b {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
margin-bottom: 13rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
user-select: none;
|
||||
grid-gap: 3rem;
|
||||
> div {
|
||||
width: 21.9rem;
|
||||
height: 21.9rem;
|
||||
position: relative;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.6rem;
|
||||
}
|
||||
> .active {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 1.6rem;
|
||||
border: 0.4rem solid #ff945e;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 138, 140, 0.09) 68.75%,
|
||||
#f98848 100%
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
> span {
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 1px 1px 4.7px #d9692b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
> .more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>span{
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/views/nuic/nuic-3.vue
Normal file
85
src/views/nuic/nuic-3.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="nuic-3">
|
||||
<p class="title"><b>Where</b> are you based? What do you <b>do</b> ?</p>
|
||||
|
||||
<div class="select-item">
|
||||
<div class="title">Based in</div>
|
||||
<el-select v-model="data.based">
|
||||
<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="select-item">
|
||||
<div class="title">Role</div>
|
||||
<el-select v-model="data.based">
|
||||
<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button class="next" @click="emit('next')">All set!</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['next'])
|
||||
const data = reactive({
|
||||
basedList: [
|
||||
{ value: '1', label: 'Student' },
|
||||
{ value: '2', label: 'Teacher' },
|
||||
{ value: '3', label: 'Parent' },
|
||||
{ value: '4', label: 'Other' }
|
||||
],
|
||||
roleList: [
|
||||
{ value: '1', label: 'Student' },
|
||||
{ value: '2', label: 'Teacher' },
|
||||
{ value: '3', label: 'Parent' },
|
||||
{ value: '4', label: 'Other' }
|
||||
],
|
||||
based: '',
|
||||
role: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.nuic-3 {
|
||||
> .title {
|
||||
font-weight: 500;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 9.8rem;
|
||||
> b {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
}
|
||||
> .select-item {
|
||||
margin-bottom: 8rem;
|
||||
width: 50rem;
|
||||
text-align: left;
|
||||
> .title {
|
||||
margin-bottom: 3rem;
|
||||
font-size: 3.6rem;
|
||||
font-weight: 800;
|
||||
color: #252727;
|
||||
}
|
||||
> .el-select {
|
||||
width: 100%;
|
||||
--el-border-radius-base: 0.8rem;
|
||||
&::v-deep {
|
||||
.el-select__wrapper {
|
||||
min-height: auto;
|
||||
height: 6rem;
|
||||
font-size: 2rem;
|
||||
padding: 0 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .btns {
|
||||
margin-top: 15.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user