383 lines
13 KiB
HTML
383 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<meta name="baidu-site-verification" content="codeva-bhaFvYlfgd" />
|
||
<meta
|
||
name="keywords"
|
||
content="deepl、deepl翻译、百度翻译、谷歌翻译、腾讯翻译君"
|
||
/>
|
||
<meta
|
||
name="description"
|
||
content="翻译之家提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译等服务。"
|
||
/>
|
||
<meta name="baidu-site-verification" content="codeva-mXz3BqI9VN" />
|
||
<link rel="stylesheet" href="static/css/public.css" />
|
||
<link rel="stylesheet" href="static/css/layui.css" />
|
||
<script src="static/js/jquery-1.11.0.min.js"></script>
|
||
<script src="static/js/axios.min.js"></script>
|
||
<script src="static/js/countUp.min.js"></script>
|
||
<script src="static/js/vue.js"></script>
|
||
<script src="static/js/lodash.min.js"></script>
|
||
<script src="static/js/layui.all.js"></script>
|
||
<script src="static/js/common.js"></script>
|
||
<title>翻译之家</title>
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?c4e0dd6add63dd71fa52870120ca22cf";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body >
|
||
<div class="public-header normal" id="main">
|
||
<div class="container clearfix">
|
||
<div class="left">
|
||
<img class="logo default" src="static/picture/logo.png" alt="" /><img
|
||
class="logo1 default"
|
||
src="static/picture/logo1.png"
|
||
alt=""
|
||
/><img class="logo light" src="static/picture/logow.png" alt="" /><img
|
||
class="logo1 light"
|
||
src="static/picture/logo1w.png"
|
||
alt=""
|
||
/>
|
||
<div class="nav">
|
||
<a class="" href="index.html"><span>首页</span></a
|
||
><a class="" href="onlineTranslation.html"><span>文本翻译</span></a
|
||
><a class="" href="voice.html"><span>语音翻译</span></a
|
||
><a class="" href="api.html"><span>API文档</span></a
|
||
><a class="" href="commonProblems.html"><span>常见问题</span></a>
|
||
</div>
|
||
</div>
|
||
<div v-if="userInfo&&userInfo.id" class="right">
|
||
<a href="userInfo.html" class="console">控制台</a>
|
||
<div class="user-info">
|
||
<div class="phone">13809073722</div>
|
||
<i></i>
|
||
<div class="log-out">退出</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="right"><a class="unlogin" href="login.html">登录</a></div>
|
||
</div>
|
||
<div class="bg"></div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var vm = new Vue({
|
||
el: "#main",
|
||
data() {
|
||
return {};
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
logOut() {
|
||
axios.get("/api/translate/logOut").then((response) => {
|
||
location.reload();
|
||
});
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<div id="app">
|
||
<div class="page-login" v-if="type == 0">
|
||
<div class="w1200">
|
||
<div class="left"></div>
|
||
<div class="right">
|
||
<img src="static/picture/logo3x.png" alt="" />
|
||
<h3>登录</h3>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="label">账号</div>
|
||
<!-- <span class="pre">+86</span> -->
|
||
<input class="form-input" placeholder="请输入" v-model="tel"/>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">密码</div>
|
||
<input
|
||
class="form-input"
|
||
type="password"
|
||
placeholder="请输入"
|
||
v-model="password"
|
||
/>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">验证码</div>
|
||
<input
|
||
class="form-input captcha-input" v-model="code" placeholder="请输入验证码"></input>
|
||
<div class="code-col captcha-container" @click="getCode" style="height: 100%;">
|
||
<img :src="captcha" class="captcha-img" />
|
||
</div>
|
||
</div>
|
||
<div class="login" @click="login()">登录</div>
|
||
<!-- <div class="more">
|
||
<a href="javascript:;" @click="type=1">注册</a>
|
||
<a href="javascript:;" @click="type=2 ">找回密码</a>
|
||
</div> -->
|
||
<div
|
||
class="rule"
|
||
style="
|
||
font-size: 15px;
|
||
text-align: center;
|
||
padding-top: 13px;
|
||
color: #666;
|
||
"
|
||
>
|
||
登录即代表您同意并遵守<a
|
||
target="_blank"
|
||
href="static/file/rule.pdf"
|
||
>《隐私协议》</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-login find-password" v-if="type == 1">
|
||
<div class="w1200">
|
||
<div class="left"></div>
|
||
<div class="right">
|
||
<img src="static/picture/p20.png" alt="" />
|
||
<h3>注册</h3>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="label">手机号</div>
|
||
<span class="pre">+86</span
|
||
><input class="form-input" type="number" v-model="tel" />
|
||
</div>
|
||
<div class="form-item form-code">
|
||
<div class="label">验证码</div>
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
placeholder="4位数验证码"
|
||
v-model="code"
|
||
/>
|
||
<div class="code-col" @click="getCode">{{ codeText }}</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">密码</div>
|
||
<input
|
||
class="form-input"
|
||
type="password"
|
||
placeholder="至少8位，字母或数字的组合"
|
||
v-model="password"
|
||
/>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">确认密码</div>
|
||
<input
|
||
class="form-input"
|
||
type="password"
|
||
placeholder="至少8位，字母或数字的组合"
|
||
v-model="surepassword"
|
||
/>
|
||
</div>
|
||
<div class="login" @click="register()">确定</div>
|
||
<div class="login-now">
|
||
<a href="javascript:;" @click="type=0">登录</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-login find-password" v-if="type == 2">
|
||
<div class="w1200">
|
||
<div class="left"></div>
|
||
<div class="right">
|
||
<img src="static/picture/p20.png" alt="" />
|
||
<h3>登录</h3>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="label">手机号</div>
|
||
<span class="pre">+86</span
|
||
><input class="form-input" type="number" v-model="tel" />
|
||
</div>
|
||
<div class="form-item form-code">
|
||
<div class="label">验证码</div>
|
||
<input
|
||
class="form-input"
|
||
type="number"
|
||
placeholder="4位数验证码"
|
||
v-model="code"
|
||
/>
|
||
<div class="code-col" @click="getCode">{{ codeText}}</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">密码</div>
|
||
<input
|
||
class="form-input"
|
||
type="password"
|
||
placeholder="至少8位，字母或数字的组合"
|
||
v-model="password"
|
||
/>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">确认密码</div>
|
||
<input
|
||
class="form-input"
|
||
type="password"
|
||
placeholder="至少8位，字母或数字的组合"
|
||
v-model="surepassword"
|
||
/>
|
||
</div>
|
||
<div class="login" @click="register()">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
tel: "",
|
||
password: "",
|
||
code:"",
|
||
uuid:"",
|
||
type: 0,
|
||
isCanClick: true,
|
||
count: 60,
|
||
timer: undefined,
|
||
codeText: "发送验证码",
|
||
code: "",
|
||
surepassword: "",
|
||
captcha:"",
|
||
};
|
||
},
|
||
beforeCreate(){
|
||
let token = localStorage.getItem("token");
|
||
if(token){
|
||
location.href="userinfo.html"
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCode();
|
||
},
|
||
methods: {
|
||
login() {
|
||
var pattern = /^1[0-9]{10}$/;
|
||
if (this.password) {
|
||
axios
|
||
.post("/login", {
|
||
username: this.tel,
|
||
password: this.password,
|
||
code:this.code,
|
||
uuid:this.uuid,
|
||
rememberMe: false,
|
||
})
|
||
.then((response) => {
|
||
if (response.data.code == 200) {
|
||
localStorage.setItem("token", response.data.token);
|
||
location.href="userinfo.html"
|
||
} else {
|
||
layer.msg(response.data.msg);
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg("密码不能为空");
|
||
}
|
||
},
|
||
getCode() {
|
||
const that = this;
|
||
|
||
axios
|
||
.get("/captcha")
|
||
.then((response) => {
|
||
if (response.data.code == 200) {
|
||
that.isCanClick = false;
|
||
that.captcha=response.data.data;
|
||
this.uuid=response.data.id;
|
||
} else {
|
||
that.isCanClick = 1;
|
||
layer.msg(response.data.msg);
|
||
}
|
||
});
|
||
},
|
||
register() {
|
||
var pattern = /^1[0-9]{10}$/;
|
||
if (!pattern.test(this.tel)) {
|
||
layer.msg("手机号码有误！");
|
||
return;
|
||
}
|
||
if (!$.trim(this.password)) {
|
||
layer.msg("密码不能为空");
|
||
return;
|
||
}
|
||
if (this.password != this.surepassword) {
|
||
layer.msg("两次密码不一致，请重新输入");
|
||
return;
|
||
}
|
||
if (!this.code) {
|
||
layer.msg("验证码不能为空");
|
||
return;
|
||
}
|
||
axios
|
||
.post("/api/translate/register", {
|
||
tel: this.tel,
|
||
password: this.password,
|
||
code: this.code,
|
||
type: this.type,
|
||
})
|
||
.then((response) => {
|
||
if (response.data.code == 200) {
|
||
|
||
} else {
|
||
layer.msg(response.data.msg);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
<div class="public-footer">
|
||
<div class="w1200">
|
||
<div class="left"><img src="static/picture/logo.png" alt="" /></div>
|
||
<div
|
||
style="
|
||
flex-direction: column;
|
||
line-height: 23px;
|
||
padding-left: 100px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
"
|
||
>
|
||
<p style="color: #fff; font-size: 12px"><span>关于我们：</span></p>
|
||
<p style="color: #fff; font-size: 12px">
|
||
<span></span>
|
||
</p>
|
||
</div>
|
||
<div class="right" style="white-space: nowrap">
|
||
<p></p>
|
||
<p><span>联系我们：</span></p>
|
||
<p><span>地址：</span></p>
|
||
<p><span>邮箱：</span></p>
|
||
<p class=""><span>电话: </span></p>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<a href="https://beian.miit.gov.cn/" target="blank"></a>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.captcha-input{
|
||
width: 260px !important;
|
||
}
|
||
|
||
.captcha-container{
|
||
cursor: pointer;
|
||
|
||
}
|
||
.captcha-img{
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html>
|