3 سال پیش · a7123d21ba
--- a/houtai/src/router/index.js
+++ b/houtai/src/router/index.js
@@ -43,14 +43,14 @@ const router = new VueRouter({
 
				 
			
 
				 router.beforeEach((to, from, next) => {
			
 
				   // 如果是去登录页，不需要验证，直接下一步
			
 
				-  if (to.name === 'login') next()
			
 
				+  if (to.name === 'Login') next()
			
 
				   // 否则要有token值才能下一步，不然就返回登录页
			
 
				   else {
			
 
				     const token = localStorage.getItem('WLBWG_token')
			
 
				     if (token) next()
			
 
				     else {
			
 
				       Message.warning('登录失效，请重新登录')
			
 
				-      next({ name: 'login' })
			
 
				+      next({ name: 'Login' })
			
 
				     }
			
 
				   }
			
 
				 })
			
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,19 @@
 
				+# web
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/web/babel.config.js
+++ b/web/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,29 @@
 
				+{
			
 
				+  "name": "web",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "axios": "^0.27.2",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "vant": "^2.12.48",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.13",
			
 
				+    "@vue/cli-plugin-router": "~4.5.13",
			
 
				+    "@vue/cli-service": "~4.5.13",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/web/public/favicon.ico
+++ b/web/public/favicon.ico
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -0,0 +1,12 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <Router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<style lang='less' scoped>
			
 
				+#app{
			
 
				+  max-width: 500px;
			
 
				+  margin: 0 auto;
			
 
				+  min-height: 100vh;
			
 
				+}
			
 
				+</style>
			
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -0,0 +1,88 @@
 
				+
			
 
				+html, body, div, span, applet, object, iframe,
			
 
				+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			
 
				+a, abbr, acronym, address, big, cite, code,
			
 
				+del, dfn, em, img, ins, kbd, q, s, samp,
			
 
				+small, strike, strong, sub, sup, tt, var,
			
 
				+b, u, i, center,
			
 
				+dl, dt, dd, ol, ul, li,
			
 
				+fieldset, form, label, legend,
			
 
				+table, caption, tbody, tfoot, thead, tr, th, td,
			
 
				+article, aside, canvas, details, embed,
			
 
				+figure, figcaption, footer, header,
			
 
				+menu, nav, output, ruby, section, summary,
			
 
				+time, mark, audio, video, input {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+    border: 0;
			
 
				+    font-size: 100%;
			
 
				+    font-weight: normal;
			
 
				+    vertical-align: baseline;
			
 
				+    box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+/* HTML5 display-role reset for older browsers */
			
 
				+article, aside, details, figcaption, figure,
			
 
				+footer, header, menu, nav, section {
			
 
				+    display: block;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    line-height: 1;
			
 
				+}
			
 
				+
			
 
				+blockquote, q {
			
 
				+    quotes: none;
			
 
				+}
			
 
				+
			
 
				+blockquote:before, blockquote:after,
			
 
				+q:before, q:after {
			
 
				+    content: none;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+    border-collapse: collapse;
			
 
				+    border-spacing: 0;
			
 
				+}
			
 
				+
			
 
				+/* custom */
			
 
				+a {
			
 
				+    color: #7e8c8d;
			
 
				+    text-decoration: none;
			
 
				+    -webkit-backface-visibility: hidden;
			
 
				+}
			
 
				+
			
 
				+li {
			
 
				+    list-style: none;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar {
			
 
				+    width: 5px;
			
 
				+    height: 5px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-track-piece {
			
 
				+    background-color: rgba(0, 0, 0, 0.2);
			
 
				+    -webkit-border-radius: 6px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:vertical {
			
 
				+    height: 5px;
			
 
				+    background-color: rgba(125, 125, 125, 0.7);
			
 
				+    -webkit-border-radius: 6px;
			
 
				+}
			
 
				+
			
 
				+::-webkit-scrollbar-thumb:horizontal {
			
 
				+    width: 5px;
			
 
				+    background-color: rgba(125, 125, 125, 0.7);
			
 
				+    -webkit-border-radius: 6px;
			
 
				+}
			
 
				+
			
 
				+html, body {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    -webkit-text-size-adjust: none;
			
 
				+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
--- a/web/src/assets/img/IMGerror.png
+++ b/web/src/assets/img/IMGerror.png
--- a/web/src/assets/img/index.png
+++ b/web/src/assets/img/index.png
--- a/web/src/assets/img/loading.gif
+++ b/web/src/assets/img/loading.gif
--- a/web/src/assets/img/none.png
+++ b/web/src/assets/img/none.png
--- a/web/src/components/Back.vue
+++ b/web/src/components/Back.vue
@@ -0,0 +1,41 @@
 
				+<template>
			
 
				+  <div class="Back" @click="$router.go(-1)">
			
 
				+    <van-icon name="arrow-left" />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "Back",
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {};
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.Back {
			
 
				+  font-size: 22px;
			
 
				+  position: absolute;
			
 
				+  top: 20px;
			
 
				+  left: 20px;
			
 
				+}
			
 
				+</style>
			
--- a/web/src/components/ToIndex.vue
+++ b/web/src/components/ToIndex.vue
@@ -0,0 +1,59 @@
 
				+<!--  -->
			
 
				+<template>
			
 
				+  <div class="ToIndex">
			
 
				+    <img src="../assets/img/index.png" alt="" />
			
 
				+    <span>首 页</span>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+//例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+  //import引入的组件需要注入到对象中才能使用
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {};
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.ToIndex {
			
 
				+  max-width: 500px;
			
 
				+  width: 100%;
			
 
				+  height: 40px;
			
 
				+  background-color: rgba(0, 0, 0, 0.8);
			
 
				+  position: fixed;
			
 
				+  z-index: 9999;
			
 
				+  bottom: 0;
			
 
				+  left: 50%;
			
 
				+  transform: translateX(-50%);
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  color: #fff;
			
 
				+  & > img {
			
 
				+    width: 14px;
			
 
				+    margin-right: 5px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -0,0 +1,22 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+
			
 
				+// 图片懒加载
			
 
				+import { Lazyload, Icon,  } from 'vant';
			
 
				+Vue.use(Lazyload, {
			
 
				+  lazyComponent: true,
			
 
				+  error: require('@/assets/img/IMGerror.png'),
			
 
				+  loading: require('@/assets/img/loading.gif')
			
 
				+})
			
 
				+Vue.use(Icon);
			
 
				+import 'vant/lib/index.css';
			
 
				+
			
 
				+import './assets/base.css'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -0,0 +1,23 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'Home',
			
 
				+    component: () => import('../views/Home.vue')
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/Inquire',
			
 
				+    name: 'Inquire',
			
 
				+    component: () => import('../views/Inquire.vue')
			
 
				+  },
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/web/src/utlis/api.js
+++ b/web/src/utlis/api.js
@@ -0,0 +1,8 @@
 
				+import axios from './request'
			
 
				+// 获取活动列表
			
 
				+export const webListApi = (status="") => {
			
 
				+  return axios({
			
 
				+    method: 'get',
			
 
				+    url: `/show/activity/webList/${status}`,
			
 
				+  })
			
 
				+}
			
--- a/web/src/utlis/request.js
+++ b/web/src/utlis/request.js
@@ -0,0 +1,39 @@
 
				+import axios from 'axios'
			
 
				+const service = axios.create({
			
 
				+  baseURL: 'http://192.168.20.55:8018', // 本地调试
			
 
				+  // baseURL: 'http://project.4dage.com:8017', // 线上调试
			
 
				+  // baseURL: '', // build
			
 
				+  timeout: 5000
			
 
				+})
			
 
				+// // 请求拦截器
			
 
				+// service.interceptors.request.use(function (config) {
			
 
				+//   // console.log('触发拦截器')
			
 
				+//   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
			
 
				+//   const token = localStorage.getItem('WLBWG_token')
			
 
				+//   if (token) { // 判断是否有token,有，则
			
 
				+//     // config.headers['Authorization'] = token
			
 
				+//     config.headers.token = token
			
 
				+//   }
			
 
				+
			
 
				+//   return config
			
 
				+// }, function (error) {
			
 
				+//   // 对请求错误做些什么
			
 
				+//   return Promise.reject(error)
			
 
				+// })
			
 
				+
			
 
				+// 添加响应拦截器
			
 
				+service.interceptors.response.use(function (response) {
			
 
				+  // // console.log('触发相应拦截器', response)
			
 
				+  // // 对响应数据做点什么--response就是发送每个请求的返回值
			
 
				+  // if (response.data.code === 5001 || response.data.code === 5002) {
			
 
				+  //   // Toast.fail('未登录，请先登录')
			
 
				+  //   localStorage.removeItem('WLBWG_token')
			
 
				+  //   location.reload(true)
			
 
				+  // }
			
 
				+  return response.data
			
 
				+}, function (error) {
			
 
				+  // 对响应错误做点什么
			
 
				+  return Promise.reject(error)
			
 
				+})
			
 
				+
			
 
				+export default service
			
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -0,0 +1,198 @@
 
				+<!--  -->
			
 
				+<template>
			
 
				+  <div class="Home">
			
 
				+    <div class="top">
			
 
				+      <div
			
 
				+        v-for="item in topData"
			
 
				+        :key="item.id"
			
 
				+        @click="topId = item.id"
			
 
				+        :class="{ active: topId === item.id }"
			
 
				+      >
			
 
				+        {{ item.name }}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- 下面主要内容 -->
			
 
				+    <div class="main">
			
 
				+      <div class="none" v-if="data.length===0">
			
 
				+        <img src="../assets/img/none.png" alt="">
			
 
				+        <p>暂无社交活动</p>
			
 
				+      </div>
			
 
				+      <div class="row" v-for="item in data" :key="item.id" v-else>
			
 
				+        <div class="rowL">
			
 
				+          <img v-lazy="baseURL + item.thumb" alt="" />
			
 
				+        </div>
			
 
				+        <div class="rowR">
			
 
				+          <h3>{{ item.name }}</h3>
			
 
				+          <p>活动时间：<br />{{ item.startDay }}-{{ item.endDay }}</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- 固定的预约查询按钮 -->
			
 
				+    <div class="inquire" @click="$router.push('/Inquire')">
			
 
				+      <p>预 约</p>
			
 
				+      查 询
			
 
				+    </div>
			
 
				+    <ToIndex />
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import ToIndex from "../components/ToIndex.vue";
			
 
				+import axios from "@/utlis/request";
			
 
				+import { webListApi } from "@/utlis/api";
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+  components: { ToIndex },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      baseURL: "",
			
 
				+      topId: "",
			
 
				+      topData: [
			
 
				+        { id: "", name: "全部" },
			
 
				+        { id: 2, name: "活动中" },
			
 
				+        { id: 1, name: "未开始" },
			
 
				+        { id: 3, name: "已结束" },
			
 
				+      ],
			
 
				+      data: [],
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {},
			
 
				+  watch: {
			
 
				+    topId(val) {
			
 
				+      this.getList(`?status=${val}`);
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    async getList(data) {
			
 
				+      let res = await webListApi(data);
			
 
				+      this.data = res.data;
			
 
				+    },
			
 
				+  },
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {
			
 
				+    // 获取服务器前缀地址
			
 
				+    this.baseURL = axios.defaults.baseURL;
			
 
				+    this.getList();
			
 
				+  },
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.Home {
			
 
				+  padding: 40px 20px 40px;
			
 
				+  min-height: 100vh;
			
 
				+  background-color: #f8f8f8;
			
 
				+  .top {
			
 
				+    max-width: 500px;
			
 
				+    background-color: #f8f8f8;
			
 
				+    padding: 20px 20px 0;
			
 
				+    position: fixed;
			
 
				+    top: 0;
			
 
				+    left: 50%;
			
 
				+    transform: translateX(-50%);
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    padding-bottom: 10px;
			
 
				+    & > div {
			
 
				+      text-align: center;
			
 
				+      padding-bottom: 6px;
			
 
				+      font-size: 16px;
			
 
				+      color: #696969;
			
 
				+    }
			
 
				+    .active {
			
 
				+      color: #858b6b;
			
 
				+      border-bottom: 3px solid #858b6b;
			
 
				+    }
			
 
				+  }
			
 
				+  .main {
			
 
				+    margin-top: 20px;
			
 
				+    .none{
			
 
				+      margin-top: 100px;
			
 
				+      width: 100%;
			
 
				+      text-align: center;
			
 
				+      &>img{
			
 
				+        width: 200px;
			
 
				+      }
			
 
				+      &>p{
			
 
				+        padding-left: 20px;
			
 
				+        color: #858B6B;
			
 
				+        margin-top: 15px;
			
 
				+        text-align: center;
			
 
				+      }
			
 
				+    }
			
 
				+    .row {
			
 
				+      z-index: 9999;
			
 
				+      background-color: #fff;
			
 
				+      width: 100%;
			
 
				+      border-radius: 5px;
			
 
				+      height: 150px;
			
 
				+      display: flex;
			
 
				+      padding: 10px;
			
 
				+      margin-bottom: 20px;
			
 
				+      .rowL {
			
 
				+        width: 130px;
			
 
				+        height: 100%;
			
 
				+        margin-right: 15px;
			
 
				+        border-radius: 3px;
			
 
				+        overflow: hidden;
			
 
				+        img {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+          object-fit: cover;
			
 
				+        }
			
 
				+      }
			
 
				+      .rowR {
			
 
				+        padding: 10px 0;
			
 
				+        flex: 1;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        justify-content: space-between;
			
 
				+        & > h3 {
			
 
				+          color: #696969;
			
 
				+          font-size: 18px;
			
 
				+          font-weight: 700;
			
 
				+          word-break: break-all;
			
 
				+          line-height: 22px;
			
 
				+        }
			
 
				+        & > p {
			
 
				+          font-size: 12px;
			
 
				+          color: #989898;
			
 
				+          line-height: 14px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .inquire {
			
 
				+    position: fixed;
			
 
				+    right: 20px;
			
 
				+    bottom: 100px;
			
 
				+    background-color: #858b6b;
			
 
				+    border-radius: 50%;
			
 
				+    width: 60px;
			
 
				+    height: 60px;
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    color: #fff;
			
 
				+    & > p {
			
 
				+      margin-bottom: 5px;
			
 
				+    }
			
 
				+  }
			
 
				+  @media screen and (min-width: 500px) {
			
 
				+    .inquire {
			
 
				+      left: 50%;
			
 
				+      transform: translateX(170px);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/web/src/views/Inquire.vue
+++ b/web/src/views/Inquire.vue
@@ -0,0 +1,97 @@
 
				+<template>
			
 
				+  <div class="Inquire">
			
 
				+    <Back />
			
 
				+    <div class="num">
			
 
				+      <h3>身份证号</h3>
			
 
				+      <input type="text" v-model="value" @blur="blurInput" />
			
 
				+      <div class="tit" :class="{ opcNone: tit }">身份证号有误，请重新输入!</div>
			
 
				+      <div class="btn" @click="toSearch">预约查询</div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Back from "../components/Back.vue";
			
 
				+export default {
			
 
				+  name: "Inquire",
			
 
				+  components: { Back },
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {
			
 
				+      value: "",
			
 
				+      tit: true,
			
 
				+    };
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {
			
 
				+    // 检查身份证格式
			
 
				+    blurInput() {
			
 
				+      let idcardReg =
			
 
				+        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
			
 
				+      this.tit = idcardReg.test(this.value);
			
 
				+    },
			
 
				+    toSearch(){
			
 
				+      this.blurInput()
			
 
				+      if(this.tit){
			
 
				+        console.log('过');
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.Inquire {
			
 
				+  position: relative;
			
 
				+  padding: 20px 60px;
			
 
				+  width: 100%;
			
 
				+  min-height: 100vh;
			
 
				+  .num {
			
 
				+    padding-top: 150px;
			
 
				+    & > h3 {
			
 
				+      font-size: 24px;
			
 
				+      font-weight: 700;
			
 
				+      color: #6f774f;
			
 
				+      margin-bottom: 30px;
			
 
				+    }
			
 
				+    input {
			
 
				+      padding: 0 5px 4px;
			
 
				+      width: 100%;
			
 
				+      border-bottom: 2px solid #c7c7c7;
			
 
				+    }
			
 
				+    .tit {
			
 
				+      transition: all 0.3s;
			
 
				+      margin-top: 10px;
			
 
				+      color: #be9c6c;
			
 
				+    }
			
 
				+    .opcNone {
			
 
				+      opacity: 0;
			
 
				+    }
			
 
				+    .btn {
			
 
				+      width: 140px;
			
 
				+      height: 40px;
			
 
				+      line-height: 40px;
			
 
				+      text-align: center;
			
 
				+      margin: 150px auto 0;
			
 
				+      border-radius: 30px;
			
 
				+      background-color: #858b6b;
			
 
				+      color: #fff;
			
 
				+      font-size: 18px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>