.

2025-10-09 21:56:46 +08:00
parent e7d3fa8855
commit 052aec9a89
2 changed files with 184 additions and 0 deletions
@@ -0,0 +1,178 @@
+<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 (curStep.value === 0) {
+      sheep.$router.go('/pages/index/index');
+    } else {
+      if (!isLogin) {
+        uni.redirectTo({ url: '/pages/login/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%;
+        }
+
+        .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: #9251eb;
+        }
+      }
+    }
+
+    .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>