1

src/components/register.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="pb_content">
+    <div class="pb_content_body" style="position: relative; width: 100%">
+      <div style="width: 100%; margin: 0px auto">
+        <div class="formTop">
+          <div class="tx">
+            <img
+              :src="ruleForm.headportrait ? ruleForm.headportrait : tx"
+              alt
+            />
+          </div>
+        </div>
+        <div class="reBox">
+          <div class="first">
+            <div><div style="color:red">*</div> 请输入地区</div>
+            <div>
+              <el-input
+                v-model="ruleForm.region"
+                style="width: 300px"
+                placeholder="请输入市区"
+              ></el-input>
+            </div>
+          </div>
+          <div class="first">
+            <div>详细地址</div>
+            <div>
+              <el-input
+                v-model="ruleForm.address"
+                style="width: 300px"
+                placeholder="请输入详细地址"
+              ></el-input>
+            </div>
+          </div>
+          <div class="first">
+            <div>学校</div>
+            <div>
+              <el-input
+                v-model="ruleForm.school"
+                style="width: 300px"
+                placeholder="请输入学校"
+              ></el-input>
+            </div>
+          </div>
+          <div class="first">
+            <div>姓名</div>
+            <div>
+              <el-input
+                v-model="ruleForm.name"
+                style="width: 300px"
+                placeholder="请输入姓名"
+              ></el-input>
+            </div>
+          </div>
+          <div class="first">
+            <div>联系方式</div>
+            <div>
+              <el-input
+                v-model="ruleForm.phone"
+                style="width: 300px"
+                placeholder="请输入手机号或邮箱"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        headportrait: "",
+        region: [],
+        address: "",
+        school: "",
+        name: "",
+        phone: "",
+      },
+      tx: require("../assets/avatar.png"),
+    };
+  },
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.pb_content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 640px;
+  min-width: unset;
+  margin: 0;
+  background: #fff;
+}
+.formTop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+.formTop >>> .el-form {
+  margin: 0 auto;
+}
+.tx {
+  width: 100px;
+  /* margin-right: 15px; */
+  min-width: 50px;
+  min-height: 50px;
+}
+.tx > img {
+  width: 100%;
+  height: 100%;
+}
+.reBox {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+.first {
+  margin: 5px 0;
+}
+.first > div:nth-child(1) {
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+</style>

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import login from '@/components/login'
+import register from '@/components/register'
 import eventCenter from '@/components/pages/race/eventCenter'
 import addRace from '@/components/pages/race/addRace'
 import anliDetail from '@/components/pages/race/eventCenter/anliDetail'
@@ -17,6 +18,13 @@ export default new Router({
         meta: {
             requireAuth: '' // 不需要鉴权
         }
+    }, {
+        path: '/register',
+        name: 'register',
+        component: register,
+        meta: {
+            requireAuth: '' // 不需要鉴权
+        }
     }, {
         path: '/eventCenter',
         name: 'eventCenter',