feat：首页布局调整

src/views/home/Home.vue

@@ -1,32 +1,31 @@
 <script setup lang="ts">
-	import { getList } from '@/api/home'
-import { log } from 'console'
-import { computed, ref } from 'vue'
+	import { computed, reactive, ref, toRefs } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
-	// import { Form, Field, Button, CellGroup  } from 'vant'
-
-    const phone = ref('')
-
-	const route = useRoute()
-    const router = useRouter()
-
-	const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-
-
-	const onSubmit = (value) => {
-		getList(value).then(res=> {
-
-			console.log(res,'res');
 
+	const useShowList = () => {
+		const state = reactive({
+			list: [
+				{title: 'vite'},
+				{title: 'rem移动端适配'},
+				{title: 'VantUI 组件按需加载'},
+				{title: 'Sass 全局样式'},
+				{title: 'Vuex 状态管理'},
+				{title: 'Axios 封装及接口管理'},
+				{title: 'Vue-router'},
+				{title: 'vite.config.ts 基础配置'},
+				{title: '检查文件中的env路径'},
+				{title: '配置 proxy 跨域'},
+				{title: '配置 alias 别名'},
+				{title: 'Eslint+Pettier 统一开发规范'},
+				{title: '批量全局注册公共组件'},
+			]
 		})
-		router.push('/orders')
-		console.log(value,'valuevaluevalue');
-		
+		return toRefs(state)
 	}
+	const { list }  = useShowList()
+
+
 	
-	const onFailed = (error) => {
-		console.log(error,'Failed');
-	}
 
     // const store = useStore()
     // const name = computed(() => store.state.userNmae)
@@ -39,23 +38,21 @@ import { computed, ref } from 'vue'
 <template>
 	<div>
 		<CustomHeader title="首页" />
-		<div class="py-20">
-			<van-form @submit="onSubmit" @failed="onFailed">
-				<van-cell-group  inset>
-					<van-field
-						v-model="phone" 
-						required 
-						name="phone"
-						label="手机号" 
-						placeholder="请输入手机号" 
-						:rules="[{ pattern, message: '请输入正确内容' }]" />
-				</van-cell-group >
-				<div style="margin: 16px;">
-					<van-button round block type="primary" native-type="submit">
-						查询
-					</van-button>
-				</div>
-			</van-form>
+		<div class="py-3 px-3">
+			<div class="title py-2 flex-start align-items-center">
+				<img width="36" src="@/assets/logo.png" />
+				<span class="fs-1 px-5">Vue3+TS H5开发模板</span>
+			</div>
+			<div class="subTitle px-3 fs-3 opacity-50">
+				A Vue3 h5 template with Vant UI 
+			</div>
+		</div>
+		<div class="py-5">
+			<van-list
+				finished-text="没有更多了"
+				>
+				<van-cell v-for="(item, index) in list" :key="index" :title="item.title" icon="success" />
+			</van-list>
 		</div>
 	</div>
 </template>