Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
18339415 1 parent b5e0398e

新增首页

Inline Side-by-side
Showing 8 changed files with 121 additions and 54 deletions
......@@ -19,5 +19,7 @@ declare module '@vue/runtime-core' {
VanRadio: typeof import('vant/es')['Radio']
VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanRow: typeof import('vant/es')['Row']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
}
}
......
......@@ -33,7 +33,7 @@ mv "${output:?}/static" $path"/${output:?}"
cd $path"/${output:?}"
git pull
git add -A
git commit -m '别院预约前端网页更新'
git commit -m '西园寺预约前端网页更新'
git push
# 更新SSH服务器上文件
......
<!--
* @Date: 2023-06-13 13:26:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 10:04:45
* @LastEditTime: 2024-01-15 10:24:37
* @FilePath: /xysBooking/src/App.vue
* @Description: 启动页
-->
<template>
<div class="bg-wrapper">
<div class="box-wrapper">
<div class="box-top"></div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script setup>
......@@ -27,8 +24,6 @@ import wx from 'weixin-js-sdk'
import { wxJsAPI } from '@/api/wx/config'
import { apiList } from '@/api/wx/jsApiList.js'*/
import { orderInfoAPI } from '@/api/index'
// 使用 include + pinia 状态管理动态缓存页面
const store = mainStore()
const keepPages = computed(() => store.getKeepPages)
......@@ -56,27 +51,17 @@ onMounted(async () => {
wx.error((err) => {
console.warn(err);
});*/
// 进入后先查询有没有订单，有订单直接跳转最终页面
const { data } = await orderInfoAPI();
if (data?.id) {
$router.replace({
path: '/result',
query: {
id: data.id
}
})
}
})
</script>
<style lang="less">
@prefix: ~'@{namespace}-x';
// html,
// body {
// width: 100%;
// height: 100%;
// }
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
......@@ -87,7 +72,7 @@ body {
/* 全局修改主色调 */
// --van-blue: #F9D95C;
background-color: #F7EFEB;
// background-color: #F7EFEB;
p {
margin: 0;
......@@ -108,30 +93,4 @@ body {
.zIndex {
z-index: 4500 !important;
}
.bg-wrapper {
padding: 1rem;
padding-bottom: 0;
background-image: url('https://cdn.ipadbiz.cn/bieyuan/bg@2x~1.png');
background-repeat: no-repeat;
}
.box-wrapper {
background: #FFFFFF;
box-shadow: 0px 0px 13px 0px rgba(95, 69, 54, 0.25);
border-radius: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
min-height: calc(100vh - 1rem);
.box-top {
padding: 0 1rem 1rem;
height: 1rem;
background-image: url('https://cdn.ipadbiz.cn/bieyuan/top@2x~1.png');
background-repeat: no-repeat;
background-size: calc(100% - 2rem);
background-position: 1rem 0;
/* 向右位移 1rem */
}
}
</style>
......
......@@ -10,7 +10,7 @@ export default [
path: '/',
component: () => import('@/views/index.vue'),
meta: {
title: '别院预约',
title: '西园寺预约',
},
},
{
......
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 10:07:06
* @LastEditTime: 2024-01-15 11:37:41
* @FilePath: /xysBooking/src/views/index.vue
* @Description: 预约页首页
-->
<template>
<div class="index-page">
<div class="index-content">
<div style="height: 30vh;">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>
<img style="height: 30vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" />
</van-swipe-item>
</van-swipe>
</div>
<div class="index-control">
<div class="booking">
<van-icon size="1.5rem" color="#FFFFFF" name="todo-list" />
立即预约
</div>
<div class="record">
<van-icon size="1.5rem" color="#A67939" name="todo-list" />
预约记录
</div>
</div>
<div class="logo"></div>
</div>
<div class="index-nav">
<div class="nav-logo">
<van-icon size="1.5rem" name="wap-home" color="#A67939" />
首页
</div>
<div class="nav-logo">
<van-icon size="5rem" name="wap-home" color="#A67939" style="position: absolute; top: -4rem;" />
<van-icon size="1.5rem" name="wap-home" color="#FFF" />
预约码
</div>
<div class="nav-logo">
<van-icon size="1.5rem" name="manager-o" color="#A67939" />
我的
</div>
</div>
</div>
</template>
......@@ -19,7 +54,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { showSuccessToast, showFailToast } from 'vant';
import { orderRestCountAPI } from '@/api/index'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
......@@ -31,6 +66,77 @@ onMounted(async () => {
<style lang="less" scoped>
.index-page {
padding: 1rem 1rem 0;
position: relative;
height: 100vh;
background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
background-repeat: no-repeat;
background-position: center;
.index-content {
height: 90vh;
.index-control {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 10vh;
// font-weight: bold;
font-size: 1.15rem;
.booking {
background-color: #A67939;
border-radius: 7px;
color: #FFFFFF;
padding: 0.7rem 4rem;
border: 1px solid #A67939;
}
.record {
color: #A67939;
border-radius: 7px;
padding: 0.7rem 4rem;
border: 1px solid #A67939;
margin-top: 1.5rem;
}
}
.logo {
position: absolute;
right: 0;
bottom: calc(15vh);
height: 30vh;
width: 20vw;
background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
}
.my-swipe {
height: 30vh;
.van-swipe-item {
height: 30vh;
width: 100vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
.index-nav {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
color: #A67939;
.nav-logo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
</style>
......