feat: 完成开屏页

src/api/model/dict.ts

@@ -3,6 +3,7 @@ import { otherHttp } from '/@/utils/http/axios'
 
 enum Api {
     cascaderHn = '/region/cascader/hn', // 获取湖南省内 市/区县/乡镇级联数据
+	queryByType = '/banner/queryByType', // 获取开屏页背景图片
 }
 
 /**
@@ -13,4 +14,17 @@ export function cascaderHn() {
     return otherHttp.get({
         url: Api.cascaderHn,
     })
+}
+/**
+ * 获取开屏页大背景图片
+ * @returns 大背景图片
+ */
+export function getQueryByType(params = {}) {
+    return otherHttp.get({
+        url: Api.queryByType,
+        params,
+		headers: {
+		    'Content-Type': 'application/x-www-form-urlencoded',
+		}
+    })
 }
\ No newline at end of file

src/pages.json

 {
     "pages": [
+		{
+		    "path": "pages/splash/splash",
+		    "style": {
+		        "navigationStyle": "custom",
+		        "transparentTitle": "auto",
+		        "backgroundColor": "#FFFFFF",
+		        "enablePullDownRefresh": false,
+		        "app-plus": {
+		            "titleNView": {}
+		        }
+		    }
+		},
         {
             "path": "pages/login/login",
             "style": {

src/pages/splash/splash.vue

+<script setup lang="ts">
+	import { ref, onMounted,onUnmounted  } from 'vue';
+	import { getQueryByType } from '/@/api/model/dict';
+	const mediaUrl = ref("");
+	const seconds = ref(4);
+	let timer = null;
+	 onLoad(() => {
+		 getServiceItems()
+	 })
+	 onMounted(() => {
+	   countdown();
+	 });
+	 onUnmounted(() => {
+	   clearTimerInterval()
+	 });
+	 function clearTimerInterval(){
+		 clearInterval(timer);
+	 }
+	 function getServiceItems() {
+		 getQueryByType({ type: 2 }).then((res) => {
+			 mediaUrl.value = res[0].mediaUrl;
+		 })
+	 }
+	 function countdown() {
+		timer = setInterval(() => {
+		 if (seconds.value > 0) {
+		   seconds.value -= 1;
+		   console.log(seconds.value)
+		 } else {
+		   clearTimerInterval()
+		   navigateToLogin();
+		 }
+		}, 1000);
+	 }
+	 function navigateToLogin() {
+		uni.redirectTo({
+			url: '/pages/login/login'
+		});
+    }
+</script>
+
+<template>
+  <view class="container">
+    <image class="splash_bg" :src="mediaUrl" mode="aspectFill"></image>
+	<!-- <view class="middle_logo_content">
+		<view class="logo_view">
+			<image class="splash_logo" src="/static/images/home/icon.png" />
+		</view>
+		<image class="logo_text_bg" src="/static/images/splash/logo_text.png"></image>
+		<image class="server_text_bg" src="/static/images/splash/server_text.png"></image>
+		<image class="outline_bg" src="/static/images/splash/outline.png"></image>
+	</view> -->
+	
+	<view class="countdown_view">
+		<image class="shadow_img" src="/static/images/splash/shadow.png" />
+		<view class="countdown_val"><text>{{ seconds }}s</text></view>
+	</view>
+	
+	<view class="under_btn_view">
+	    <fui-button
+	        height="80rpx"
+	        background="linear-gradient(233.81deg, rgba(92, 181, 110, 1) 0%, rgba(100, 214, 62, 1) 100%)"
+	        size="28rpx"
+	        radius="40rpx"
+	        text="立即体验"
+			@click="navigateToLogin"
+	    />
+	</view>
+  </view>
+</template>
+
+
+<style lang="less" scoped>
+.container {
+  height: 100vh;
+  width:750rpx;
+  position: relative;
+  .splash_bg {
+     width: 100%;
+     height: 100vh;
+  }
+  .middle_logo_content{
+	  position: absolute;
+	  top: 250rpx;
+	  left: 0rpx;
+	  right: 0rpx;
+	  display:flex;
+	  flex-direction: column;
+	  align-items: center;
+	  .logo_view{
+		  width: 136rpx;
+		  height: 136rpx;
+		  border-radius: 24rpx;
+		  background-color: #fff;
+		  display:flex;
+		  justify-content: center;
+		  align-items: center;
+		  .splash_logo{
+			  width:110rpx;
+			  height:110rpx;
+		  }
+	  }
+	  .logo_text_bg{
+		  margin-top:32rpx;
+		  width: 192rpx;
+		  height: 64rpx;
+	  }
+	  .server_text_bg{
+		  width: 528rpx;
+		  height: 116rpx;
+	  }
+	  .outline_bg{
+		  margin-top:-36rpx;
+		  width: 464rpx;
+		  height: 54rpx;
+	  }
+  }
+  .countdown_view{
+	  position: absolute;
+	  left: 612rpx;
+	  top: 118rpx;
+	  width: 108rpx;
+	  height: 52rpx;
+	  .shadow_img{
+		  width: 108rpx;
+		  height: 52rpx;
+	  }
+	  .countdown_val{
+		  width: 108rpx;
+		  height: 52rpx;
+		  position: absolute;
+		  left:0rpx;
+		  top:0rpx;
+		  display: flex;
+		  justify-content: center;
+		  align-items: center;
+		  font-size: 26rpx;
+		  color:#fff;
+		  font-weight: 400;
+	  }
+  }
+  
+  .under_btn_view{
+	  width:650rpx;
+	  position: absolute;
+	  bottom: 52rpx;
+	  left:50rpx;
+  }
+}
+
+</style>