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>
|