178 lines
4.3 KiB
Vue
178 lines
4.3 KiB
Vue
<template>
|
||
<view class="splash-page">
|
||
<swiper
|
||
class="swiper"
|
||
circular
|
||
:indicator-dots="false"
|
||
:autoplay="true"
|
||
interval="3000"
|
||
duration="400"
|
||
:current="curStep"
|
||
@change="
|
||
(event) => {
|
||
curStep = event.detail.current;
|
||
}
|
||
"
|
||
>
|
||
<swiper-item class="swiper-item">
|
||
<image
|
||
src="https://puton.huimeimeta.com/imgs/splash1.png"
|
||
mode="widthFix"
|
||
class="splash-img"
|
||
></image>
|
||
|
||
<view class="text-box">
|
||
<view class="text-title">专业全维度风格诊断</view>
|
||
<view>让您科学变美</view>
|
||
<view>包含：基因风格、心里风格、四季色彩季型、发型</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<image
|
||
src="https://puton.huimeimeta.com/imgs/splash2.png"
|
||
mode="widthFix"
|
||
class="splash-img"
|
||
></image>
|
||
|
||
<view class="text-box">
|
||
<view class="text-title">个人在线衣橱管理工具</view>
|
||
<view>My衣橱管家</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<image
|
||
src="https://puton.huimeimeta.com/imgs/splash3.png"
|
||
mode="widthFix"
|
||
class="splash-img"
|
||
></image>
|
||
|
||
<view class="text-box">
|
||
<view class="text-title">【美搭】可视化智慧穿搭</view>
|
||
<view>可实现发型、上衣、下衣、外套、连衣裙、套装试穿</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="swiper-item">
|
||
<image
|
||
src="https://puton.huimeimeta.com/imgs/splash4.png"
|
||
mode="widthFix"
|
||
class="splash-img"
|
||
></image>
|
||
|
||
<view class="text-box">
|
||
<view class="text-title">【美搭】可视化智慧穿搭SSS+系统</view>
|
||
<view>个人形象服务私域运营工具</view>
|
||
<view>适用：各类提供穿搭服务和服装离店营销创景</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="step-box">
|
||
<view
|
||
:class="['step-item', curStep === item - 1 ? 'curStep' : '']"
|
||
v-for="item in 4"
|
||
:key="item"
|
||
/>
|
||
</view>
|
||
|
||
<view class="arrow-box" @click="jumpPage">
|
||
<image src="https://puton.huimeimeta.com/imgs/splash-arrow.png" class="arrow-img"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from 'vue';
|
||
import sheep from '@/sheep';
|
||
|
||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||
|
||
const curStep = ref(0);
|
||
|
||
const jumpPage = () => {
|
||
if (!isLogin.value) {
|
||
uni.redirectTo({ url: '/pages/login/index' });
|
||
} else if (curStep.value === 0) {
|
||
sheep.$router.go('/pages/index/index');
|
||
} else {
|
||
sheep.$router.go('/pages/index/room');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.splash-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #000;
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.splash-img {
|
||
width: 100%;
|
||
height: 1332rpx;
|
||
}
|
||
|
||
.text-box {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
position: absolute;
|
||
left: calc(50%);
|
||
bottom: 180px;
|
||
transform: translateX(-50%);
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
|
||
.text-title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-box {
|
||
width: 708rpx;
|
||
height: 2rpx;
|
||
position: absolute;
|
||
left: calc(50% - 354rpx);
|
||
bottom: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.step-item {
|
||
width: 172rpx;
|
||
height: 2rpx;
|
||
background: #fff;
|
||
|
||
&.curStep {
|
||
background: $purple;
|
||
}
|
||
}
|
||
}
|
||
|
||
.arrow-box {
|
||
width: 100%;
|
||
height: 160px;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
.arrow-img {
|
||
width: 30px;
|
||
height: 28px;
|
||
position: absolute;
|
||
left: calc(50% - 15px);
|
||
top: calc(50% - 14px);
|
||
}
|
||
}
|
||
}
|
||
</style>
|