feat:首页布局调整

This commit is contained in:
talktao 2022-03-25 00:53:52 +08:00
parent 65614eb09c
commit ec41a92858

View File

@ -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>
@ -66,7 +63,7 @@ import { computed, ref } from 'vue'
h1 {
display: block;
font-size: 40px;
text-align: center;
text-align: center;
padding: 20px 0;
}
ul {