|
@@ -8,20 +8,16 @@ import 'swiper/css/navigation'
|
|
import 'swiper/css/autoplay'
|
|
import 'swiper/css/autoplay'
|
|
import 'swiper/css/pagination'
|
|
import 'swiper/css/pagination'
|
|
import 'swiper/css/effect-cards'
|
|
import 'swiper/css/effect-cards'
|
|
|
|
+import aboutShow01 from '@/assets/images/aboutUs/show_img01.png'
|
|
|
|
+import aboutShow02 from '@/assets/images/aboutUs/show_img02.png'
|
|
|
|
+import aboutShow03 from '@/assets/images/aboutUs/show_img03.png'
|
|
|
|
+import { useUserStore } from '@/stores/modules/user'
|
|
// import 'swiper/css/bundle' // 全部css
|
|
// import 'swiper/css/bundle' // 全部css
|
|
const modules = [Navigation, Pagination, EffectCards, Autoplay]
|
|
const modules = [Navigation, Pagination, EffectCards, Autoplay]
|
|
|
|
+
|
|
const { openLoginModal } = useLoginModal()
|
|
const { openLoginModal } = useLoginModal()
|
|
-async function clickLogin() {
|
|
|
|
- try {
|
|
|
|
- const { status } = await openLoginModal()
|
|
|
|
- console.log('Login status:', status)
|
|
|
|
- // if (status)
|
|
|
|
- // 登陆后的逻辑
|
|
|
|
- }
|
|
|
|
- catch (error) {
|
|
|
|
- console.log(error)
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+const userStore = useUserStore()
|
|
|
|
+const { isLogin } = storeToRefs(userStore)
|
|
|
|
|
|
const swiperVertical = ref<any>(null)
|
|
const swiperVertical = ref<any>(null)
|
|
const swiperHorizontal = ref<any>(null)
|
|
const swiperHorizontal = ref<any>(null)
|
|
@@ -43,19 +39,22 @@ function onSlideChange2(swiper: any) {
|
|
}
|
|
}
|
|
const list = ref([
|
|
const list = ref([
|
|
{
|
|
{
|
|
- title: 'Insight-Driven Creativity111',
|
|
|
|
|
|
+ img: aboutShow01,
|
|
|
|
+ title: 'Insight-Driven Creativity',
|
|
description:
|
|
description:
|
|
- 'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
|
|
|
|
|
|
+ 'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.Aesthetics Design',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: 'Insight-Driven Creativity22',
|
|
|
|
|
|
+ img: aboutShow02,
|
|
|
|
+ title: 'Aesthetics Design',
|
|
description:
|
|
description:
|
|
- 'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
|
|
|
|
|
|
+ 'Good design isn’t just about aesthetics — it’s about function, emotion, and experience. Our design approach balances visual appeal with usability to make every product speak for itself.Trend-Driven Picks',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: 'Insight-Driven Creativity333',
|
|
|
|
|
|
+ img: aboutShow03,
|
|
|
|
+ title: 'Trend-Driven Picks',
|
|
description:
|
|
description:
|
|
- 'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
|
|
|
|
|
|
+ 'We stay ahead of the curve. From fashion to tech, we follow what’s trending globally and transform it into commercial-ready solutions that speak to Gen Z and beyond.',
|
|
},
|
|
},
|
|
])
|
|
])
|
|
onUnmounted(() => {
|
|
onUnmounted(() => {
|
|
@@ -90,7 +89,7 @@ onUnmounted(() => {
|
|
@swiper="onVerticalSwiper"
|
|
@swiper="onVerticalSwiper"
|
|
>
|
|
>
|
|
<SwiperSlide v-for="(item, index) in list" :key="index">
|
|
<SwiperSlide v-for="(item, index) in list" :key="index">
|
|
- Slide {{ index }}
|
|
|
|
|
|
+ <img :src="item.img" class="w-480px h-480px object-cover" alt="">
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
@@ -113,8 +112,13 @@ onUnmounted(() => {
|
|
<div class="text-#999 mt-20px lh-24px">
|
|
<div class="text-#999 mt-20px lh-24px">
|
|
{{ item.description }}
|
|
{{ item.description }}
|
|
</div>
|
|
</div>
|
|
- <el-button class="!bg-#9B6CFF mt-40px !text-#fff !b-#9B6CFF w-160px !b-rd-380px text-16px fw-bold !h-40px px-20px" @click="clickLogin">
|
|
|
|
- get started
|
|
|
|
|
|
+ <el-button class="!bg-#9B6CFF mt-40px !text-#fff !b-#9B6CFF w-160px !b-rd-380px text-16px fw-bold !h-40px px-20px">
|
|
|
|
+ <span v-if="!isLogin" @click="openLoginModal">
|
|
|
|
+ get started
|
|
|
|
+ </span>
|
|
|
|
+ <nuxt-link v-else to="/categories">
|
|
|
|
+ view catalogs
|
|
|
|
+ </nuxt-link>
|
|
</el-button>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|