代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./flexible.js"></script>
<script src="./element.js"></script>
<script src="./bootstrap.js"></script>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./elementui.css" />
<link rel="stylesheet" type="text/css" href="./common.css" />
<link rel="stylesheet" type="text/css" href="./bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<link rel="stylesheet" type="text/css" href="./news.css" />
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
</head>
<body>
<div id="appNews" class="login_page page">
<!-- 新加头 -->
<div style="width: 100%;" class="justify-center">
<div class="justify-between" style="width: 1000px;margin-top: 30px;">
<div class=" flex-row">
<img class="head_image_6" referrerpolicy="no-referrer" style="width: 124px;
height: 90px;margin-top: 18px;"
src="./img/SketchPnga4358636872b912ee4cc5dc3e2fe245448bdaaf943b22d09e1ae3dc4edd13165.png" />
<div class=" flex-col justify-between" style="margin-left: 20px;">
<span class="head_text_5" style="font-size: 48px;width: 10rem;">三江源国家公园</span>
<span class="head_text_6" style="font-size: 16px; ;width: 10rem;margin-top: 20px;">
THREE-RIVER-SOURCE NATIONAL PARK
</span>
</div>
</div>
<div style="width: 78px;
height: 30px;
background: linear-gradient(180deg, #579FD1 0%, #2C66A5 100%);
border-radius: 4px;text-align: center;margin-top: 2.8rem;">
<img src="./img/home.png" style="width: 18px;height: 16px;margin-bottom: 4px;" alt="">
<a href="./index.html" style="line-height: 28px;color: #FFFFFF;">首页</a>
</div>
</div>
</div>
<div class="justify-around zc_content">
<div class="login_left" style="width: 450px;">
<div class="login_title">
用户服务条款
</div>
<div class="login_text">
<div>一、用户注册、登录，视为接受本协议的约束。</div>
<div>二、用户承诺遵守国家的法律法规及部门规章</div>
<div>三、用户承诺遵守网站的知识产权政策，</div>
<div>四、用户承诺遵守网站现行有效的及将来发布的各类规且政策及规则优先，后发布的优先，</div>
<div>五、用户侵犯第三人的知识产权，由该用户承担全部法责任</div>
<div>六、网站有权向用户追偿因其侵权所发生的赔偿款、诉公费、律师费等损失。</div>
<div>七、 发生争议，任何一方均有权向网站营业地人民法院是起诉讼。</div>
</div>
</div>
<div style=" border-right: 1px solid #A4A4A4;width: 1px;margin: 30px 0;"></div>
<div class="login_right">
<div>
<el-form :model="ruleForm" :rules="rules" label-width="120px" leab ref="ruleForm"
class="demo-ruleForm">
<div class="login_title">
用户登录
</div>
<el-form-item label="用户名/手机号" prop="userName">
<el-input v-model="ruleForm.userName" placeholder="请输入用户名/手机号">
</el-input>
</el-form-item>
<el-form-item label="昵称" prop="name">
<el-input placeholder="" v-model="ruleForm.name" autocomplete="off">
</el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电子邮件" prop="email">
<el-input placeholder="" v-model="ruleForm.email" autocomplete="off">
</el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input placeholder="" v-model="ruleForm.phone" autocomplete="off">
</el-input>
</el-form-item>
<el-form-item label="" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="" name="type"></el-checkbox>
</el-checkbox-group>
<div style="margin-top: -43px;margin-left: 30px;"> 已阅读并同意 <span
style="color: #B8000A;">《用户服务条款》</span> 协议</div>
</el-form-item>
<el-form-item>
<div class="delu_login" @click="submitForm('ruleForm')">注 册</div>
<div>
已有账号，<a style="color: #B8000A;" href="./login.html">直接登录</a>
</div>
<!-- <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button> -->
</el-form-item>
</el-form>
</div>
</div>
</div>
<!-- 新增-->
<div style=" width: 100%;" class="justify-center">
<span class="paragraph_2">
Copyright © 2023 sjy.qinghai.gov.cn All Rights Reserved 版权所有：三江源国家公园管理局
<br />
青ICP备17001282号 青公网安备 63010402000279号 政府网站标识码 6300000059
</span>
</div>
<div style=" width: 100%;margin-top: -0.7rem;margin-left: 22.2rem;">
<img referrerpolicy="no-referrer" style="top: 23rem;left: 15rem;height: 0.6rem;width: 0.6rem;"
src="./img/SketchPnge1225200ffece62754e3040e482a2610c75dae6279ee56d054e21b519c31d71e.png" />
</div>
<div style=" width: 100%;" class="justify-center">
<img class="image_16" referrerpolicy="no-referrer"
src="./img/SketchPng2872bb3456a736e1a081e103abf5bf638963142165d17926b8ccf09842f82642.png" />
</div>
<!-- -->
</div>
<script>
new Vue({
el: "#appNews",
data: function () {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: '',
type: []
},
rules: {
userName: [
{ required: true, message: '请填写用户名/手机号', trigger: 'blur' }
],
name: [
{ required: true, message: '请填写昵称', trigger: 'blur' }
],
pass: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ required: true, validator: validatePass2, trigger: 'blur' }
],
email: [{
required: true,
pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}],
phone: [
{
required: true,
pattern: /^1[3|4|5|7|8][0-9]{9}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
type: [{ type: 'array', required: true, message: '请勾选用户协议', trigger: 'change' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
});
</script>
</body>
<style>
.login_page {
height: 900px;
background-image: url(./img/zhucebg.png);
background-size: 100% 100%;
font-size: 0.425rem;
}
.zc_content {
width: 1000px;
margin: auto;
margin-top: 0.5rem;
background-color: #fff;
box-shadow: 4px 4px 13px 4px #A4A4A4;
}
.delu_login {
width: 282px;
height: 36px;
background: #B8000A;
border-radius: 3px;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.delu_zc {
color: #FFFFFF;
width: 282px;
height: 36px;
background: #A4A4A4;
border-radius: 3px;
cursor: pointer;
text-align: center;
}
.login_title {
width: 120px;
height: 20px;
font-size: 20px;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: bold;
color: #2C66A5;
line-height: 30px;
margin-bottom: 30px;
}
.login_left {
padding: 30px;
}
.login_right {
padding: 30px;
}
.login_text {
line-height: 30px;
}
.el-form-item {
margin-bottom: 10px;
}
.el-form-item__error {
padding-top: 0;
}
.el-input__inner {
height: 30px;
line-height: 30px;
}
</style>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手