115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<template>
|
|
<div class="nuic-2">
|
|
<p class="title" v-html="$t('Nuic.nuic2Title')"></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>{{ v.title }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btns">
|
|
<button class="next" @click="onNext">{{ $t('Nuic.next') }}</button>
|
|
<button class="more" @click="onLoadMore">
|
|
<span>{{ $t('Nuic.loadMore') }}</span>
|
|
<div><svg-icon name="refresh-single" size="24" /></div>
|
|
</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', title: '凳子', active: false },
|
|
{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
|
|
{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
|
|
{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
|
|
{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
|
|
{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
|
|
{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
|
|
{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
|
|
])
|
|
const onNext = () => {
|
|
const data = {
|
|
vibe: list.value
|
|
.filter((v) => v.active)
|
|
.map((v) => v.id)
|
|
.join(',')
|
|
}
|
|
emit('next', data)
|
|
}
|
|
const onLoadMore = () => {}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.nuic-2 {
|
|
> .title {
|
|
font-weight: 500;
|
|
font-size: 4rem;
|
|
margin-bottom: 6rem;
|
|
&:deep(b) {
|
|
font-size: 4.8rem;
|
|
font-family: MBold;
|
|
}
|
|
}
|
|
> .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;
|
|
font-family: SemiBold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .btns {
|
|
> .more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> span {
|
|
margin-right: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|