Commit 008ba189 authored by limeimei's avatar limeimei

更新

parent 204f1ac5
Pipeline #1912 canceled with stages
<template> <template>
<div id="app"> <div id="app">
<nav>
<router-link to="/">Home1</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view /> <router-view />
</div> </div>
</template> </template>
<style> <style>
#app { html,
font-family: Avenir, Helvetica, Arial, sans-serif; body {
-webkit-font-smoothing: antialiased; padding: 0;
-moz-osx-font-smoothing: grayscale; margin: 0;
text-align: center; width: 100%;
color: #2c3e50; height: 100%;
}
nav {
padding: 30px;
} }
nav a { #app {
font-weight: bold; width: 100%;
color: #2c3e50; height: 100%;
}
nav a.router-link-exact-active {
color: #42b983;
} }
</style> </style>
\ No newline at end of file
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
import Visitor from '../views/visitor/standby.vue'
import Reserved from '../views/visitor/reserved.vue'
import Comment from '../views/common.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
...@@ -17,6 +20,26 @@ const routes = [ ...@@ -17,6 +20,26 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/visitor',
name: 'visitor',
component: Visitor
},
{
path: "/comment",
redirect: "/reserved",
component: Comment,
children: [
{
path: "/reserved",
name: "reserved",
component: Reserved,
meta: {
title: "已预约",
},
},
]
} }
] ]
......
<template>
<div class="wrapper ">
<div class="common">
<div class="common_btn">返回主页</div>
<div class="common_title">
{{title}}
</div>
</div>
<div class="content_view">
<router-view />
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
data() {
return {
title: ""
}
},
created() {
//获得路由传递过来的值
this.title = this.$route.params.title;
},
methods: {
}
}
</script>
<style scoped>
.wrapper {
background: #F0F2F8;
height: 100%;
box-sizing: border-box;
}
.common {
width: 100%;
height: 70px;
background: #507DD9;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
opacity: 1;
line-height: 70px;
display: flex;
}
.common_btn {
margin-left: 31px;
margin-right: auto;
}
.common_title {
margin-right: 50%;
margin-left: auto;
}
.content_view {
flex: 1;
}
</style>
\ No newline at end of file
<template>
<div class="reserved">
<div class="content">
<div class="content_time">118s</div>
<div class="content_card">
<div class="card_left">
<div class="card_tip">请输入预约手机号验证</div>
<el-input value="phone"><template slot="prepend">
<div style="display: flex;align-items: center;">
<span class="card_pre">+86</span>
<div class="card_center"></div>
</div>
</template></el-input>
<div>
<el-button @click="Reserved">已预约</el-button>
<el-button @click="">未预约</el-button>
</div>
</div>
<div class="card_right">
<el-button v-for="item in numList" :key="item.value">{{item.label}}</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
data() {
return {
numList: [{ label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 }, { label: '4', value: 4 },
{ label: '5', value: 5 }, { label: '6', value: 6 }, { label: '7', value: 7 },
{ label: '8', value: 8 }, { label: '9', value: 9 }, { label: '退格', value: 10 },
{ label: '0', value: 0 }, { label: '删除', value: 11 }
]
}
},
methods: {
Reserved() {
this.$router.replace({
path: "/reserved",
});
}
}
}
</script>
<style scoped>
.reserved {
width: 100%;
padding: 36px;
min-height: calc(100% - 70px);
box-sizing: border-box;
}
.content {
background: #FFFFFF;
border-radius: 14px;
height: 100%;
padding-top: 24px;
box-sizing: border-box;
}
.content_time {
width: 50px;
height: 50px;
background: #FFFFFF;
opacity: 1;
border: 3px solid #5A8FF6;
margin: 0 30px 0 auto;
}
.content_card {
display: flex;
padding: 76px 100px 0 70px;
}
.card_tip {
font-size: 28px;
color: #000000;
}
::v-deep .content_card .el-input__inner {
width: 377px;
height: 78px;
background: none;
opacity: 1;
border: none;
padding-left: 0;
font-size: 24px;
}
::v-deep .content_card .el-input {
width: 482px;
height: 78px;
background: #FFFFFF;
border-radius: 10px 10px 10px 10px;
opacity: 1;
border: 1px solid #CBC7C7;
margin: 40px 0 120px 0;
}
::v-deep .content_card .el-input-group__prepend {
background-color: none;
/* height: 78px; */
line-height: 70px;
}
.card_pre {
color: #000000;
font-size: 24px;
}
.card_center {
width: 2px;
height: 40px;
background: #D6D6D6;
margin-left: 30px;
}
.card_right {
width: 449px;
height: 391px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding: 30px;
margin-right: 0;
margin-left: auto;
}
::v-deep .card_right .el-button {
width: 113px;
height: 64px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 1px solid #CBC7C7;
margin: 0 25px 25px 0;
}
</style>
\ No newline at end of file
<template>
<div class="standby">
<div class="header">
<div class="header_title">锶想(广州)科技有限公司</div>
<div class="header_right">
<span class="header_first"><span>{{weekDay }}</span>
<span class="header_mon">{{currentDate}}</span>
</span>
<span style="line-height: 18px;">|</span>
<span class="header_time">{{currentTIme}}</span>
</div>
</div>
<div class="content">
<div style="color: #333333;
font-size: 44px;">欢迎使用</div>
<div style="color: #416CCC;
font-size: 50px;">访客自助登记系统</div>
<div>
<el-button @click="Reserved">已预约</el-button>
<el-button @click="">未预约</el-button>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
data() {
return {
weekDay: '',
currentDate: '',
currentTIme: "",
weekDays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
}
},
created() {
this.getTime()
},
methods: {
Reserved() {
this.$router.push({ name: 'reserved', params: { title: '预约验证' } });
},
getTime() {
let nowDate = new Date();
let date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
date: nowDate.getDate(),
hours: nowDate.getHours(),
minutes: nowDate.getMinutes(),
seconds: nowDate.getSeconds(),
};
let newmonth = date.month >= 10 ? date.month : "0" + date.month;
let newday = date.date >= 10 ? date.date : "0" + date.date;
let newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
let newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
this.currentDate = date.year + "." + newmonth + "." + newday;
this.currentTIme = date.hours + ":" + newminutes;
this.weekDay = this.weekDays[nowDate.getDay()];
},
}
}
</script>
<style scoped>
.header {
width: 100%;
padding: 0 30px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.header_title {
color: #333333;
font-size: 16px;
margin-top: 20px;
}
.header_right {
display: flex;
align-items: center;
height: 70px;
}
.header_first {
display: flex;
flex-direction: column;
text-align: center;
font-size: 13px;
margin-right: 10px;
}
.header_mon {
margin-top: 2px;
}
.header_time {
font-size: 30px;
font-weight: bold;
margin-left: 6px;
}
.content {
font-weight: bold;
padding: 140px 60px 0;
box-sizing: border-box;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment