Skip to content

A
antaile-web
Commit 207bd2ca by wangyalan-git
Options

注册登录重置密码协议app页面

parent 7a61c4cd
Showing with 1728 additions and 240 deletions
public/index.html
......@@ -8,7 +8,7 @@
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body::-webkit-scrollbar {
display: none; /*ChromeSafari*/
display: none;
}
</style>
</head>
......
src/App.vue
......@@ -18,5 +18,6 @@ export default {
display: flex;
flex-direction: column;
min-height: 100vh;
background:#f5f5f5;
}
</style>
src/assets/images/图片/appBg.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/styles/element-variables.scss
/* 改变主题色变量 */
$--color-primary: #caa774;
$bg: #fdb64f;
$light_gray: #eee;
/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
......@@ -46,6 +47,7 @@ body {
a {
color: #020202;
text-decoration:none;
}
a:hover {
......@@ -54,7 +56,7 @@ a:hover {
img {
width: 100%;
object-fit: cover;
object-fit: contain;
}
.my_icon {
......@@ -153,7 +155,7 @@ dl {
position: relative;
}
.primary {
.color-primary {
color: $--color-primary !important;
}
......@@ -192,3 +194,124 @@ dl {
}
@import "~element-ui/packages/theme-chalk/src/index";
.my-form {
.el-input {
display: inline-block;
height: 50px;
border-radius: 7px;
// width: 85%;
input {
background: transparent;
border: 1px solid #e0e0e0;
border-radius: 8px;
-webkit-appearance: none;
// padding: 12px 5px 12px 15px;
color: #333;
height: 50px;
}
}
.el-form-item__label {
line-height: 50px;
color: #020202;
}
.el-form-item {
margin-bottom: 40px;
}
}
.login-container {
.el-input {
display: inline-block;
height: 66px;
border-radius: 7px;
// width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 66px;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
.el-button {
height: 50px;
}
.small-btn {
text-align: center;
margin-top: 60px;
button {
width: 200px;
height: 60px;
color: #fff;
font-size: 22px;
border-radius: 37px;
}
button + button {
margin-left: 30px;
}
button:first-child {
background: #181f2a;
}
button:last-child {
background: $--color-primary;
}
}
.my-step {
// 步骤条
.el-step__icon {
background: $--color-primary;
// width: 35px;
// height: 35px;
}
.el-step__icon.is-text {
border: 0;
color: #fff;
width: 40px;
height: 40px;
}
.el-step.is-horizontal .el-step__line {
top: 20px;
}
.step-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-image: url("~@/assets/images/steptwo.png");
background-size: 100% 100%;
}
.el-step__head.is-finish .is-text .step-img {
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-image: url("~@/assets/images/step.png");
background-size: 100% 100%;
}
.el-step__title.is-process {
font-weight: bold;
color: #999;
}
.el-step__title.is-finish{
color: #B57631;
}
}
src/components/Footer.vue
......@@ -91,7 +91,7 @@ export default {
<style lang="scss" scoped>
.footer {
background: #f3f3f3;
background: #fff;
text-align: left;
padding: 40px 50px 90px;
color: #999;
......
src/components/Header.vue
<template>
<div class="header" >
<div class="header">
<div style="display: flex; flex: 1" v-if="deviceType == 2">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<ul class="right-ul" >
<router-link :to="{ name: 'index' }"
><img src="@/assets/images/logo.png" alt="" class="logo"
/></router-link>
<ul class="right-ul">
<li>纪念馆列表</li>
<li>APP下载</li>
<li><router-link :to="{ name: 'appPage' }">APP下载</router-link></li>
</ul>
</div>
<img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<ul class="right-ul">
<li>
<img src="@/assets/images/Signin.png" alt="" class="avatar" />登录
......@@ -35,9 +37,7 @@ export default {
}
},
methods: {
},
methods: {},
};
</script>
......@@ -45,7 +45,6 @@ export default {
.header {
background: #181f2a;
height: 70px;
line-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -54,7 +53,10 @@ export default {
left: 0;
right: 0;
z-index: 999;
>.logo{
a{
color: #ccc;
}
> .logo {
margin-left: 38px;
}
.logo {
......
src/main.js
......@@ -5,9 +5,13 @@ import ElementUI from "element-ui";
import "lib-flexible";
import "@/assets/styles/element-variables.scss";
import animated from "animate.css"; // npm install animate.css --save安装，在引入
import CustomHeader from "@/components/Header";
import CustomFooter from "@/components/Footer";
Vue.use(animated);
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.component('CustomHeader',CustomHeader)
Vue.component('CustomFooter',CustomFooter)
import common from "@/utils/commonFunctions";
Vue.prototype.common = common; // 公共函数
......
src/router/index.js
......@@ -22,7 +22,22 @@ const routes = [
{
path: '/register',
name: 'register',
component: () => import('@/views/Login/register')
component: () => import('@/views/Login/Register/register')
},
{
path: '/findPassword',
name: 'findPassword',
component: () => import('@/views/Login/findPassword')
},
{
path: '/agreement',
name: 'agreement',
component: () => import('@/views/Login/agreement')
},
{
path: '/appPage',
name: 'appPage',
component: () => import('@/views/AppPage/index')
},
{
path: '/404',
......
src/views/AppPage/index.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="container">
<div class="show-bg" :style="'height:' + screenHeight + 'px'">
<div class="bg-mask"></div>
<img class="show-word" src="@/assets/images/writtenwords.png" alt="" />
<div class="show-click">
<div>
<img class="app-icon" src="@/assets/images/ios.png" alt="" />
<p>APP Store</p>
</div>
<div>
<img class="app-icon" src="@/assets/images/Android.png" alt="" />
<p>Android</p>
</div>
</div>
</div>
<div class="show-app" :style="'height:' + screenHeight + 'px'">
<div class="show-word">
<p class="first-word">APP端管理</p>
<p class="last-word">随时随地 方便快捷</p>
</div>
<img class="app-img" src="@/assets/images/century.png" alt="" />
</div>
<div class="show-app show-more" :style="'height:' + screenHeight + 'px'">
<!-- <div class="bg-mask"></div> -->
<img class="app-img" src="@/assets/images/Spectrum.png" alt="" />
<div class="show-word">
<p class="app-word">APP更多功能 等你发现</p>
</div>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
screenHeight: 0, // 屏幕高度
};
},
created() {
this.screenHeight = document.documentElement.clientHeight;
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
width: 100%;
margin: 0 auto;
padding: 70px 0 0 0;
}
.show-bg {
width: 100%;
position: relative;
background: url("~@/assets/images/appBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8% 0 10%;
box-sizing: border-box;
.show-word {
width: 25%;
z-index: 1;
}
.show-click {
display: flex;
z-index: 1;
> div {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 20px;
width: 240px;
height: 80px;
border: 1px solid #fff;
margin: 40px 10px;
border-radius: 10px;
}
}
.app-icon {
width: 46px;
height: 53px;
margin-right: 17px;
}
}
.bg-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
}
.show-app {
width: 100%;
position: relative;
background: url("~@/assets/images/actualbg.png") no-repeat;
// background-size: 100% 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 20% 0;
box-sizing: border-box;
.show-word {
align-self: center;
.first-word {
color: #000;
font-size: 40px;
// padding-top: 7vw;
margin-bottom: 10px;
}
.last-word {
color: #999;
font-size: 24px;
}
}
.app-img {
width: 40%;
}
}
.show-more {
background-image: url("~@/assets/images/Spectrumbg.png"),
linear-gradient(#000, #000);
background-blend-mode: lighten;
align-items: center;
.app-word{
color: #fff;
font-size: 30px;
margin-top: 17vw;
}
.app-img {
width: 30%;
}
}
</style>
src/views/ErrorPage/errorPage.vue
<template>
<div class="error">
<Row type="flex"
<el-row type="flex"
align="middle"
:gutter="16">
<Col span="12">
<el-col :span="12">
<img :src="img_404"
alt="404">
</Col>
<Col span="10"
</el-col>
<el-col :span="10"
class="right"
offset="1">
:offset="1">
<h1 class="font36">OOPS!</h1>
<p class="font24">很抱歉，页面它不小心迷路了！</p>
<div style="color:#909399;font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
<Button size="large"
<el-button size="large"
style="width: 120px;margin-top: 20px;"
type="primary"
@click="handleGoMain">返回首页
</Button>
</Col>
</Row>
</el-button>
</el-col>
</el-row>
</div>
</template>
......
src/views/Home/index.vue
......@@ -220,14 +220,10 @@
</div>
</template>
<script>
import CustomHeader from "@/components/Header";
import CustomFooter from "@/components/Footer";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
CustomHeader,
CustomFooter,
vueSeamlessScroll,
},
props: {},
......
src/views/Home/mindex.vue
......@@ -203,14 +203,10 @@
</div>
</template>
<script>
import CustomHeader from "@/components/Header";
import CustomFooter from "@/components/Footer";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
CustomHeader,
CustomFooter,
vueSeamlessScroll,
},
props: {},
......
src/views/Login/Register/modules/RegisterDetail.vue 0 → 100644
<template>
<el-card class="form-container" shadow="never" v-loading="loading">
<div class="fomm-content">
<!-- 步骤栏 -->
<el-steps :active="active" align-center class="my-step">
<el-step title="手机号验证"><span slot="icon" class="step-img">1</span></el-step>
<el-step title="设置密码"><span slot="icon" class="step-img">2</span></el-step>
<el-step title="完成"><span slot="icon" class="step-img">3</span></el-step>
</el-steps>
<!-- 手机验证码 -->
<valiate-phone
v-show="active == 0"
v-model="productParam"
:is-edit="isEdit"
ref="category"
@nextStep="nextStep"
>
</valiate-phone>
<!-- 设置密码 -->
<set-password
v-show="active == 1"
v-model="productParam"
:is-edit="isEdit"
ref="relation"
@prevStep="prevStep"
@nextStep="nextStep"
></set-password>
<!-- 设置密码 -->
<register-success
v-show="active == 2"
v-model="productParam"
:is-edit="isEdit"
ref="relation"
@prevStep="prevStep"
@finishCommit="handleCommit"
>
</register-success>
<!-- 弹窗 -->
</div>
</el-card>
</template>
<script>
import ValiatePhone from "./ValiatePhone";
import SetPassword from "./SetPassword";
import RegisterSuccess from "./RegisterSuccess";
// import { createProduct, getProduct, updateProduct } from '@/api/product'
// 默认的商品参数
const defaultProductParam = {
mobile: null,
pwd: null,
verifyCode: null,
nickName: null,
};
// 商品详情
export default {
name: "RegisterDetail",
components: {
ValiatePhone,
SetPassword,
RegisterSuccess
},
props: {
isEdit: {
type: Boolean,
default: false,
},
},
data() {
return {
loading: false,
active: 0,
isFinishInfo: false,
isFinishAttribute: false,
isFinishDetail: false,
productParam: Object.assign({}, defaultProductParam),
previewFlag: false,
};
},
created() {},
methods: {
prevStep() {
// 上一步
if (this.active > 0) {
this.active--;
}
},
nextStep() {
// 下一步
this.active++;
// 基本信息根据商家获取对应品牌
if (this.active === 1) {
this.$refs.info.init();
}
// 获取平台规格参数属性
if (this.active === 1) {
this.$refs.attribute.init();
}
// 获取商品关联商品
if (this.active === 4) {
this.$refs.relation.init();
}
// 友情提示处理，判断是否真的要离开
if (this.active > 0) {
this.$emit("showTip");
}
},
finishInfo(result) {
this.isFinishInfo = result;
if (this.isFinishInfo) {
this.finishCommit();
}
},
finishDetail(result) {
this.isFinishDetail = result;
if (this.isFinishDetail) {
this.finishCommit();
}
},
finishAttribute(result) {
this.isFinishAttribute = result;
if (this.isFinishAttribute) {
this.finishCommit();
}
},
finishCommit() {
// if (!this.isFinishInfo) {
// this.$refs.info.handleNext()
// } else if (!this.isFinishAttribute) {
// this.$refs.attribute.handleNext()
// } else if (!this.isFinishDetail) {
// this.$refs.detail.handleNext()
// }
// if (this.isFinishInfo && this.isFinishAttribute && this.isFinishDetail) {
// if (this.previewFlag) {
// this.$refs.previewModal.show(Object.assign({}, this.productParam))
// } else {
// this.$confirm('是否要提交该产品', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// center: true,
// type: 'warning'
// }).then(() => {
// this.productParam.moveDetailPesc = this.productParam.pcDetailPesc
// if (this.isEdit) {
// this.loading = true
// // 如果是临时库过来编辑的需要把状态改为审核状态
// if (this.$route.query.publishStatus) {
// this.productParam.publishStatus = this.$route.query.publishStatus
// }
// updateProduct(this.productParam).then(res => {
// this.loading = false
// this.$message({
// type: 'success',
// message: '提交成功',
// duration: 1000
// })
// this.$router.back()
// }).catch(err => {
// this.loading = false
// })
// } else {
// this.loading = true
// createProduct(this.productParam).then(res => {
// this.$emit('hideTip')
// this.loading = false
// this.$message({
// type: 'success',
// message: '提交成功',
// duration: 1000
// })
// this.$router.push('productAudit')
// }).catch(err => {
// this.loading = false
// })
// }
// })
// }
// }
},
handleCommit() {
this.isFinishInfo = false;
this.isFinishAttribute = false;
this.isFinishDetail = false;
this.previewFlag = false;
this.finishCommit();
},
previewHandle() {
this.isFinishInfo = false;
this.isFinishAttribute = false;
this.isFinishDetail = false;
this.previewFlag = true;
this.finishCommit();
},
},
};
</script>
<style lang="scss" scoped>
.form-container {
width: 100%;
padding: 100px 0 200px 0;
}
.fomm-content{
width: 80%;
margin: 0 auto;
}
</style>
src/views/Login/Register/modules/RegisterSuccess.vue 0 → 100644
<template>
<div class="page">
<img src="@/assets/images/success.png" alt="" class="success-img" />
<div class="small-btn">
<el-button type="primary" @click.native.prevent="handleLogin"
>立即登录
</el-button>
</div>
</div>
</template>
<script>
export default {
name: "login",
components: {},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.page {
text-align: center;
}
.success-img {
width: 280px;
margin-top: 60px;
}
</style>
src/views/Login/Register/modules/SetPassword.vue 0 → 100644
<template>
<div>
<div class="my-form">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-width="80px"
>
<el-form-item prop="mobile" label="密码">
<el-input
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
placeholder="请输入密码"
/>
</el-form-item>
<el-form-item prop="password" label="确认密码">
<el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入确认密码"
@keyup.enter.native="handleNext"
/>
</el-form-item>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
>上一步
</el-button>
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
>下一步
</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
name: "login",
components: {},
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
loginForm: {
mobile: "admin123",
password: "admin123",
},
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
// 发送验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
return;
}
this.sendSms(this.ruleForm.phone, 11);
},
//发送验证码
sendSms(phone, type) {
console.log("type", phone, type);
// sendSms(phone, type).then((response) => {
// this.$message.success("发送成功");
// this.codeChange();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
this.snsMsgWait = this.codeCount + "s后可重发";
this.codeCount--;
this.smsCodeDisable = true;
} else {
this.codeShow = true;
this.smsCodeDisable = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
},
handlePrev() {
this.$emit("prevStep");
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid && !this.loading) {
this.loading = true;
this.$store
.dispatch("LoginByUsername", this.loginForm)
.then(() => {
this.loading = false;
this.$router.push({ path: this.redirect || "/" });
})
.catch((response) => {
this.$notify.error({
title: "失败",
message: response.data.errmsg,
});
this.loading = false;
});
} else {
return false;
}
});
},
},
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
},
};
</script>
<style lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-form {
width: 70%;
margin: 50px auto;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
</style>
src/views/Login/Register/modules/ValiatePhone.vue 0 → 100644
<template>
<div>
<div class="my-form">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-width="80px"
>
<el-form-item prop="mobile" label="手机号">
<el-input
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item prop="password" label="验证码">
<el-input
style="width: 73%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
@keyup.enter.native="handleNext"
/>
<el-button
:type="codeShow ? 'primary' : 'info'"
@click="sendCode"
:disabled="smsCodeDisable"
>
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
</el-button>
<div class="show-choice" >
<img v-if="isDefault" src="@/assets/images/choice.png" alt="" @click="changeDefault" />
<img v-else src="@/assets/images/Notselected.png" alt="" @click="changeDefault" />
<p @click="changeDefault">默认同意 <router-link :to="{name: 'agreement'}" class="color-primary">《生命纪念馆协议》</router-link></p>
</div>
</el-form-item>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
>下一步
</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
name: "login",
components: {},
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
loginForm: {
mobile: "admin123",
password: "admin123",
},
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
isDefault: 0,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
changeDefault() {
this.isDefault = this.isDefault ? 0 : 1;
},
// 发送验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
return;
}
this.sendSms(this.ruleForm.phone, 11);
},
//发送验证码
sendSms(phone, type) {
console.log("type", phone, type);
// sendSms(phone, type).then((response) => {
// this.$message.success("发送成功");
// this.codeChange();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
this.snsMsgWait = this.codeCount + "s后可重发";
this.codeCount--;
this.smsCodeDisable = true;
} else {
this.codeShow = true;
this.smsCodeDisable = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleFinishCommit(formName, isTemp) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isTemp) {
this.value.publishStatus = -1;
}
this.$emit("finishCommit");
} else {
this.$message({
message: "验证失败",
type: "error",
duration: 1000,
});
return false;
}
});
},
},
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-form {
width: 70%;
margin: 50px auto;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.show-choice {
display: flex;
align-items: center;
margin-top: 10px;
p{
color: #C6CED4;
font-size: 16px;
cursor: pointer;
}
img {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
}
}
</style>
src/views/Login/Register/register.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="container">
<register-detail
:is-edit="false"
@showTip="handleTip(true)"
@hideTip="handleTip(false)"
></register-detail>
</div>
<custom-footer></custom-footer>
<!-- <custom-footer></custom-footer> -->
</div>
</template>
<script>
import RegisterDetail from "./modules/RegisterDetail";
export default {
name: "Register",
components: { RegisterDetail
},
data() {
return {
needTip: false,
};
},
beforeRouteLeave(to, from, next) {
if (!this.needTip) {
next();
} else {
this.$confirm("你还未提交数据，离开后数据将丢失", "您确定要离开吗？", {
confirmButtonText: "确定",
cancelButtonText: "取消",
center: true,
type: "warning",
})
.then((res) => {
console.log(res);
next();
})
.catch((err) => {
console.log(err);
next(false);
});
}
},
methods: {
handleTip(val) {
this.needTip = val;
},
},
};
</script>
<style lang="scss" scoped>
.container{
padding-top: 70px;
width: 1200px;
margin: 0 auto 30px;
}
</style>
src/views/Login/agreement.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="container">
<div class="my-form">
<div class="show-content">
1.提示条款
各条款标题仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议条款的含义或解释为维护您自身权益，建议您仔细阅读各条款具体表述
您在申请注册流程中点击同意本协议之前，应当认真阅读本协议。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体下划线标识，您应重点阅读。如您对协议有任何疑问，可向安泰乐客服咨询。
当您按照注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后，即表示您已充分阅读、理解并接受本协议的全部内容，并与安泰乐达成一致，成为安泰乐网站“用户阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。如果您未申请注册流程，或者在本协议生效前已成为安泰乐的注册用户，则您通过访问和/或使用安泰乐，即视为您表示同意接受本协议的全部内容，否则请您不要访问或使用安泰乐平台网站。
</div>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
>已阅读
</el-button>
</div>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
name: "login",
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
loginForm: {
mobile: "admin123",
password: "admin123",
},
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
// 发送验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
return;
}
this.sendSms(this.ruleForm.phone, 11);
},
//发送验证码
sendSms(phone, type) {
console.log("type", phone, type);
// sendSms(phone, type).then((response) => {
// this.$message.success("发送成功");
// this.codeChange();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
this.snsMsgWait = this.codeCount + "s后可重发";
this.codeCount--;
this.smsCodeDisable = true;
} else {
this.codeShow = true;
this.smsCodeDisable = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleFinishCommit(formName, isTemp) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isTemp) {
this.value.publishStatus = -1;
}
this.$emit("finishCommit");
} else {
this.$message({
message: "验证失败",
type: "error",
duration: 1000,
});
return false;
}
});
},
},
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
width: 1200px;
margin: 0 auto 30px;
background: #fff;
padding: 100px 0 200px 0;
}
.show-content {
height: 20vw;
overflow: auto;
border: 2px solid #e0e0e0;
padding: 30px;
}
.my-form {
width: 70%;
margin: 0 auto;
.title {
font-size: 24px;
color: #020202;
margin: 30px auto;
text-align: center;
}
}
.show-content::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.show-content::-webkit-scrollbar-track {
background: #f4f4f4;
border-radius: 0;
border-left: 2px solid #e0e0e0;
}
.show-content::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
.show-content::-webkit-scrollbar-thumb:hover {
background: #c8c8c8;
}
.show-content::-webkit-scrollbar-corner {
background: #179a16;
}
</style>
src/views/Login/findPassword.vue 0 → 100644
<template>
<div>
<custom-header></custom-header>
<div class="container">
<div class="my-form">
<p class="title">重置密码</p>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-width="110px"
>
<el-form-item prop="mobile" label="手机号">
<el-input
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
placeholder="请输入手机号"
/>
</el-form-item>
<el-form-item prop="mobile" label="图形验证码">
<el-input
style="width: 76%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入图形验证码"
@keyup.enter.native="handleNext"
/>
<el-button
:type="codeShow ? 'primary' : 'info'"
@click="sendCode"
:disabled="smsCodeDisable"
>
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
</el-button>
</el-form-item>
<el-form-item prop="password" label="验证码">
<el-input
style="width: 76%; margin-right: 10px"
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
@keyup.enter.native="handleNext"
/>
<el-button
:type="codeShow ? 'primary' : 'info'"
@click="sendCode"
:disabled="smsCodeDisable"
>
<span v-show="codeShow">获取验证码</span>
<span v-show="!codeShow"> {{ snsMsgWait }}</span>
</el-button>
</el-form-item>
<el-form-item prop="mobile" label="新密码">
<el-input
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
placeholder="请输入新密码"
/>
</el-form-item>
<el-form-item prop="mobile" label="确认新密码">
<el-input
v-model="loginForm.mobile"
name="mobile"
type="text"
auto-complete="on"
placeholder="请输入确认新密码"
/>
</el-form-item>
<div class="small-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleFinishCommit"
>保存
</el-button>
</div>
</el-form>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
name: "login",
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
loginForm: {
mobile: "admin123",
password: "admin123",
},
codeShow: true,
smsCodeDisable: false,
codeCount: TIME_COUNT,
snsMsgWait: null,
timer: null,
loginRules: {
mobile: [
{ required: true, message: "手机号不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
destroyed() {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
// 发送验证码
sendCode() {
if (!/^1[345789]\d{9}$/.test(this.ruleForm.phone)) {
// Message({
// message: "电话格式不对",
// type: "error",
// duration: 3 * 1000,
// });
return;
}
this.sendSms(this.ruleForm.phone, 11);
},
//发送验证码
sendSms(phone, type) {
console.log("type", phone, type);
// sendSms(phone, type).then((response) => {
// this.$message.success("发送成功");
// this.codeChange();
// });
},
//验证码变化
codeChange() {
if (!this.timer) {
this.codeCount = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
this.snsMsgWait = this.codeCount + "s后可重发";
this.codeCount--;
this.smsCodeDisable = true;
} else {
this.codeShow = true;
this.smsCodeDisable = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
this.passwordType = "password";
}
},
handleNext(formName, type) {
this.value.publishType = type;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit("nextStep");
}
});
},
handleFinishCommit(formName, isTemp) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (isTemp) {
this.value.publishStatus = -1;
}
this.$emit("finishCommit");
} else {
this.$message({
message: "验证失败",
type: "error",
duration: 1000,
});
return false;
}
});
},
},
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container {
width: 1200px;
margin: 0 auto 30px;
background: #fff;
padding: 100px 0 200px 0;
}
.my-form {
width: 55%;
margin: 0 auto;
.title {
font-size: 24px;
color: #020202;
margin: 30px auto;
text-align: center;
}
}
</style>
src/views/Login/index.vue
......@@ -11,14 +11,22 @@
label-position="left"
>
<div class="title-container">
<h3 class="title" :class="checkedTab == 1 ? 'checked' : ''">
<h3
class="title"
:class="checkedTab == 1 ? 'checked' : ''"
@click="changeTab(1)"
>
账号管理
</h3>
<h3 class="title" :class="checkedTab == 2 ? 'checked' : ''">
管理员登录
<h3
class="title"
:class="checkedTab == 2 ? 'checked' : ''"
@click="changeTab(2)"
>
验证码登录
</h3>
</div>
<el-form-item prop="username" >
<el-form-item prop="username">
<div class="form-item">
<div class="svg-container svg-container_login">
<img src="@/assets/images/user.png" alt="" />
......@@ -28,50 +36,52 @@
name="username"
type="text"
auto-complete="on"
placeholder="username"
placeholder="请输入手机号"
/>
</div>
</el-form-item>
<el-form-item prop="password">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="password"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"
/>
<!-- <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</div>
</span> -->
</div>
</el-form-item>
<el-button
:loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.native.prevent="handleLogin"
>登录
</el-button>
<div class="forget">
<p>账号注册</p>
<p>忘记密码</p>
</div>
<div class="my-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
>登录
</el-button>
<img src="@/assets/images/WeChatr.png" alt="">
</div>
</el-form>
</div>
<!-- <custom-footer></custom-footer> -->
</div>
</template>
<script>
import CustomHeader from "@/components/Header";
import jpegPath from "../../assets/images/Computerframe.png";
export default {
name: "login",
components: {
CustomHeader,
},
data() {
const validatePassword = (rule, value, callback) => {
......@@ -116,7 +126,6 @@ export default {
created() {
window.addEventListener("hashchange", this.afterQRScan);
this.PATH_TO_JPEG = jpegPath;
this.PATH_TO_MP4 =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
},
......@@ -124,6 +133,9 @@ export default {
window.removeEventListener("hashchange", this.afterQRScan);
},
methods: {
changeTab(type) {
this.checkedTab = type;
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
......@@ -189,44 +201,6 @@ export default {
},
};
</script>
<style lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
// width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
......@@ -236,13 +210,14 @@ $light_gray: #eee;
position: absolute;
height: 100%;
width: 100%;
min-width: 1000px;
background: url("~@/assets/images/denglu.png") no-repeat;
background-size: 100% 100%;
.login-form {
position: absolute;
top: 24%;
right: 12%;
width: 32%;
right: 13%;
width: 30%;
}
.form-item {
......@@ -271,13 +246,13 @@ $light_gray: #eee;
align-items: center;
justify-content: space-between;
.title {
font-size: 30px;
font-size: 26px;
font-weight: 400;
color: #888585;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
position: relative;
&.checked {
color: $bg;
}
......@@ -287,8 +262,8 @@ $light_gray: #eee;
content: "";
position: absolute;
left: 50%;
bottom: -10px;
margin-left: 20px;
bottom: -12px;
transform: translateX(-50%);
z-index: 1;
background: $bg;
}
......@@ -305,6 +280,33 @@ $light_gray: #eee;
user-select: none;
}
}
.forget {
font-size: 16px;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
margin-bottom: 15px;
}
.my-btn {
margin: 30px auto;
text-align: center;
button {
width: 100%;
height: 66px;
background: $bg;
border-radius: 33px;
color: #26201e;
font-size: 24px;
}
img{
margin-top: 30px;
width: 45px;
height: 45px;
}
}
.homepage-hero-module {
position: relative;
height: 100vh;
......
src/views/Login/register.vue deleted 100644 → 0
<template>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul id="pageUl" type="circle">
<li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}">&nbsp;</li>
<li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>
<li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>
<li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>
<li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>
</ul>
<div style="background-color: #1b6d85" id="page1" class="page"></div>
<div style="background-color: #5cb85c" id="page2" class="page"></div>
<div style="background-color: #8a6d3b" id="page3" class="page"></div>
<div style="background-color: #337ab7" id="page4" class="page"></div>
<div style="background-color: #66512c" id="page5" class="page"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return{
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object
}
},
mounted(){
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className == 'page') {
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// 浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
methods:{
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || (-event.wheelDelta);
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if ((this.startTime - this.endTime) > 1500) {
if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {
// 向下滚动
this.index++;
this.toPage(this.index);
}else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
}
}
}
}
</script>
<style>
html, body {
height: 100%;
}
body, ul, li, a, p, div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
position: relative;
transition:top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
bottom: 50%;
}
.active{
color: red;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment