|
|
@@ -0,0 +1,153 @@
|
|
|
+<template>
|
|
|
+ <div class="Recruiting">
|
|
|
+ <div class="box1">
|
|
|
+ <img src="../assets/img/5.gif" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <div class="box2">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <div class="row">您的姓名 <span>（已加密，请放心填写）</span></div>
|
|
|
+ <el-form-item prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ maxlength="10"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="row">您的电话 <span>（已加密，请放心填写）</span></div>
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.phone"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="row">所在城市 <span>（已加密，请放心填写）</span></div>
|
|
|
+ <el-form-item prop="city">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.city"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="btnn">提 交 申 请</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Recruiting",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ city: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ phone: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ city: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {},
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ document.title = "元宇宙建模师火热招募";
|
|
|
+ // chrome
|
|
|
+ document.body.scrollTop = 0;
|
|
|
+ // firefox
|
|
|
+ document.documentElement.scrollTop = 0;
|
|
|
+ // safari
|
|
|
+ window.pageYOffset = 0;
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+::-webkit-scrollbar {
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+.Recruiting {
|
|
|
+ padding-top: 800px;
|
|
|
+ background: url("../assets/img/bg2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 2850px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .box1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 228px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ width: 325px;
|
|
|
+ height: 370px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 1400px auto 0;
|
|
|
+ padding: 10px 20px 0;
|
|
|
+ .row {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ & > span {
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: "*";
|
|
|
+ color: #f56c6c;
|
|
|
+ position: absolute;
|
|
|
+ right: -1px;
|
|
|
+ top: 0px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-form-item {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .btnn{
|
|
|
+ width: 202px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #5b91fd;
|
|
|
+ margin: 30px auto 0;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
