@@ -0,0 +1,59 @@ | |||||
import request from './request' | |||||
/* eslint-disable */ | |||||
let baseUrl = 'https://www.meta-autotv.com' | |||||
/** | |||||
* 密码登录 | |||||
* @returns request | |||||
*/ | |||||
export const loginApi = (data) => { | |||||
return request({ | |||||
method: 'POST', | |||||
url: baseUrl + `/C/api/user/login`, | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 发送短信 | |||||
* @returns request | |||||
*/ | |||||
export const sendLoginPhoneCodeApi = (phone) => { | |||||
return request({ | |||||
method: 'get', | |||||
url: baseUrl + `/C/api/user/sendLoginPhoneCode?phone=${phone}` | |||||
}) | |||||
} | |||||
/** | |||||
* 短信登录 | |||||
* @returns request | |||||
*/ | |||||
export const doLoginByPhoneApi = (data) => { | |||||
return request({ | |||||
method: 'POST', | |||||
url: baseUrl + `/C/api/user/doLoginByPhone`, | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 注册 | |||||
* @returns request | |||||
*/ | |||||
export function doRegisterByPhoneAPi(data) { | |||||
return request({ | |||||
method: 'POST', | |||||
url: baseUrl + `/C/api/user/doRegisterByPhone`, | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 当前用户 | |||||
* @returns request | |||||
*/ | |||||
export const getUserInfoApi = () => { | |||||
return request({ | |||||
method: 'get', | |||||
url: baseUrl + `/C/api/user/getUserInfo` | |||||
}) | |||||
} |
@@ -1,162 +0,0 @@ | |||||
<template> | |||||
<div class="s-canvas"> | |||||
<canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'SIdentify', | |||||
props: { | |||||
identifyCode: { | |||||
type: String, | |||||
default: '1234' | |||||
}, | |||||
fontSizeMin: { | |||||
type: Number, | |||||
default: 28 | |||||
}, | |||||
fontSizeMax: { | |||||
type: Number, | |||||
default: 40 | |||||
}, | |||||
backgroundColorMin: { | |||||
type: Number, | |||||
default: 180 | |||||
}, | |||||
backgroundColorMax: { | |||||
type: Number, | |||||
default: 240 | |||||
}, | |||||
colorMin: { | |||||
type: Number, | |||||
default: 50 | |||||
}, | |||||
colorMax: { | |||||
type: Number, | |||||
default: 160 | |||||
}, | |||||
lineColorMin: { | |||||
type: Number, | |||||
default: 40 | |||||
}, | |||||
lineColorMax: { | |||||
type: Number, | |||||
default: 180 | |||||
}, | |||||
dotColorMin: { | |||||
type: Number, | |||||
default: 0 | |||||
}, | |||||
dotColorMax: { | |||||
type: Number, | |||||
default: 255 | |||||
}, | |||||
contentWidth: { | |||||
type: Number, | |||||
default: 110 | |||||
}, | |||||
contentHeight: { | |||||
type: Number, | |||||
default: 40 | |||||
} | |||||
}, | |||||
methods: { | |||||
// 生成一个随机数 | |||||
randomNum (min, max) { | |||||
return Math.floor(Math.random() * (max - min) + min) | |||||
}, | |||||
// 生成一个随机的颜色 | |||||
randomColor (min, max) { | |||||
var r = this.randomNum(min, max) | |||||
var g = this.randomNum(min, max) | |||||
var b = this.randomNum(min, max) | |||||
return 'rgb(' + r + ',' + g + ',' + b + ')' | |||||
}, | |||||
drawPic () { | |||||
var canvas = document.getElementById('s-canvas') | |||||
var ctx = canvas.getContext('2d') | |||||
ctx.textBaseline = 'bottom' | |||||
// 绘制背景 | |||||
ctx.fillStyle = this.randomColor( | |||||
this.backgroundColorMin, | |||||
this.backgroundColorMax | |||||
) | |||||
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) | |||||
// 绘制文字 | |||||
for (let i = 0; i < this.identifyCode.length; i++) { | |||||
this.drawText(ctx, this.identifyCode[i], i) | |||||
} | |||||
this.drawLine(ctx) | |||||
this.drawDot(ctx) | |||||
}, | |||||
drawText (ctx, txt, i) { | |||||
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) | |||||
ctx.font = | |||||
this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' | |||||
var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) | |||||
var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) | |||||
var deg = this.randomNum(-30, 30) | |||||
// 修改坐标原点和旋转角度 | |||||
ctx.translate(x, y) | |||||
ctx.rotate(deg * Math.PI / 270) | |||||
ctx.fillText(txt, 0, 0) | |||||
// 恢复坐标原点和旋转角度 | |||||
ctx.rotate(-deg * Math.PI / 270) | |||||
ctx.translate(-x, -y) | |||||
}, | |||||
drawLine (ctx) { | |||||
// 绘制干扰线 | |||||
for (let i = 0; i < 2; i++) { | |||||
ctx.strokeStyle = this.randomColor( | |||||
this.lineColorMin, | |||||
this.lineColorMax | |||||
) | |||||
ctx.beginPath() | |||||
ctx.moveTo( | |||||
this.randomNum(0, this.contentWidth), | |||||
this.randomNum(0, this.contentHeight) | |||||
) | |||||
ctx.lineTo( | |||||
this.randomNum(0, this.contentWidth), | |||||
this.randomNum(0, this.contentHeight) | |||||
) | |||||
ctx.stroke() | |||||
} | |||||
}, | |||||
drawDot (ctx) { | |||||
// 绘制干扰点 | |||||
for (let i = 0; i < 20; i++) { | |||||
ctx.fillStyle = this.randomColor(0, 255) | |||||
ctx.beginPath() | |||||
ctx.arc( | |||||
this.randomNum(0, this.contentWidth), | |||||
this.randomNum(0, this.contentHeight), | |||||
1, | |||||
0, | |||||
2 * Math.PI | |||||
) | |||||
ctx.fill() | |||||
} | |||||
} | |||||
}, | |||||
watch: { | |||||
identifyCode () { | |||||
this.drawPic() | |||||
} | |||||
}, | |||||
mounted () { | |||||
this.drawPic() | |||||
} | |||||
} | |||||
</script> | |||||
<style lang='scss' scoped> | |||||
.s-canvas { | |||||
width: 130px; | |||||
height: 38px; | |||||
cursor: pointer; | |||||
} | |||||
.s-canvas canvas{ | |||||
margin-top: 1px; | |||||
margin-left: 8px; | |||||
} | |||||
</style> |
@@ -0,0 +1,248 @@ | |||||
<template> | |||||
<el-dialog title="" :visible.sync="dialogVisible" width="512px" > | |||||
<div class="login"> | |||||
<div class="top"> | |||||
登录体验更多 | |||||
<i class="icon el-icon-close" @click="dialogVisible = false"></i> | |||||
</div> | |||||
<h6>会员登录</h6> | |||||
<el-form ref="form" :rules="rules" :model="form" label-width="0px"> | |||||
<el-form-item prop="phone"> | |||||
<el-input v-model="form.phone" placeholder="手机号"></el-input> | |||||
</el-form-item> | |||||
<el-form-item prop="password" v-if="loginFlag !== 2"> | |||||
<el-input v-model="form.password" show-password placeholder="登录密码"></el-input> | |||||
</el-form-item> | |||||
<el-form-item prop="code" v-if="loginFlag !== 3"> | |||||
<el-input class="identify" v-model="form.code" placeholder="验证码"></el-input> | |||||
<img v-if="loginFlag === 1" :src="verifyCodeUrl" class="code" @click='getCode' alt=""> | |||||
<el-button v-else class="btn" @click="sendCode">获取验证码</el-button> | |||||
</el-form-item> | |||||
<el-form-item class="nomargin"> | |||||
<el-button type="primary" @click="login('form')">{{loginFlag === 3 ? "注册" : "登录"}}</el-button> | |||||
</el-form-item> | |||||
<el-form-item class="nomargin" v-if="loginFlag !== 3"> | |||||
<a v-if="loginFlag === 1" @click="changeLoginType(2)">使用短信登录</a> | |||||
<a v-else @click="changeLoginType(1)">使用密码登录</a> | |||||
<a @click="changeLoginType(3)">注册</a> | |||||
</el-form-item> | |||||
</el-form> | |||||
</div> | |||||
</el-dialog> | |||||
</template> | |||||
<script> | |||||
/* eslint-disable */ | |||||
import { loginApi, sendLoginPhoneCodeApi, doLoginByPhoneApi, doRegisterByPhoneAPi, getUserInfoApi } from '@/api/login.js' | |||||
export default { | |||||
props: {}, | |||||
data() { | |||||
return { | |||||
dialogVisible: true, | |||||
form: { | |||||
phone: '', | |||||
password: '', | |||||
code: '' | |||||
}, | |||||
verifyCodeUrl: 'https://www.meta-autotv.com/C/api/user/captcha.jpg', | |||||
rules: { | |||||
phone: [ | |||||
{ required: true, message: '请输入手机号', trigger: 'blur' } | |||||
], | |||||
password: [ | |||||
{ required: true, message: '请输入密码', trigger: 'blur' } | |||||
], | |||||
code: [ | |||||
{ required: true, message: '请输入验证码', trigger: 'blur' } | |||||
] | |||||
}, | |||||
loginFlag: 1 // 1 密码登录 2 短信登录 | |||||
} | |||||
}, | |||||
created() {}, | |||||
methods: { | |||||
getCode() { | |||||
this.verifyCodeUrl = 'https://www.meta-autotv.com/C/api/user/captcha.jpg?time=' + Math.random() | |||||
}, | |||||
changeLoginType(val) { | |||||
this.loginFlag = val | |||||
}, | |||||
sendCode() { | |||||
if (!this.form.phone) { | |||||
this.$message({ | |||||
message: '请输入手机号', | |||||
type: 'warning' | |||||
}); | |||||
return | |||||
} | |||||
sendLoginPhoneCodeApi(this.form.phone).then(res => { | |||||
if (res.data.coode === 200) { | |||||
this.$message({ | |||||
message: '发送成功', | |||||
type: 'success' | |||||
}); | |||||
}else { | |||||
debugger | |||||
this.$message({ | |||||
message: res.data.message, | |||||
type: 'warning' | |||||
}); | |||||
} | |||||
}) | |||||
}, | |||||
async login(formName) { | |||||
this.$refs[formName].validate(async(valid) => { | |||||
if (valid) { | |||||
if(this.loginFlag === 3) { | |||||
let resData = { | |||||
password: this.form.password, | |||||
phone: this.form.phone | |||||
} | |||||
doRegisterByPhoneAPi(resData).then(res => { | |||||
if (res.data.code === 200) { | |||||
this.$message({ | |||||
message: '注册成功', | |||||
type: 'success' | |||||
}); | |||||
this.dialogVisible = false | |||||
} else { | |||||
this.$message({ | |||||
message: res.data.message, | |||||
type: 'warning' | |||||
}); | |||||
} | |||||
}) | |||||
} else { | |||||
loginApi(this.form).then(res => { | |||||
if (res.data.code === 200) { | |||||
this.$message({ | |||||
message: '登录成功', | |||||
type: 'success' | |||||
}); | |||||
this.dialogVisible = false | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
console.log('error submit!!'); | |||||
return false; | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
::v-deep .el-dialog{ | |||||
padding: 0; | |||||
position: relative; | |||||
border-radius: 15px; | |||||
} | |||||
.login { | |||||
h6{ | |||||
margin: 0; | |||||
text-align: left; | |||||
font-size: 18px; | |||||
font-weight: bold; | |||||
color: #000000; | |||||
line-height: 48px; | |||||
margin-left: 22px; | |||||
margin-top: 30px; | |||||
} | |||||
.top { | |||||
background-image: url('../../assets/loginTop.png'); | |||||
background-size: cover; | |||||
height: 80px; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
right: 0; | |||||
color: #fff; | |||||
font-size: 18px; | |||||
line-height: 80px; | |||||
text-align: left; | |||||
padding-left: 43px; | |||||
.icon{ | |||||
color: #fff; | |||||
font-size: 25px; | |||||
position: absolute; | |||||
right:22px ; | |||||
top: 25px; | |||||
font-weight: bold; | |||||
cursor: pointer; | |||||
} | |||||
} | |||||
} | |||||
.el-form { | |||||
width: 420px; | |||||
margin: 0 auto; | |||||
.el-form-item { | |||||
width: 420px; | |||||
margin-bottom: 12px; | |||||
::v-deep .el-input__inner{ | |||||
width: 420px; | |||||
height: 44px; | |||||
background: #F5F5F5; | |||||
border-radius: 4px; | |||||
border: none; | |||||
} | |||||
.identify{ | |||||
::v-deep .el-input__inner{ | |||||
width: 266px; | |||||
} | |||||
} | |||||
.btn { | |||||
width: 137px; | |||||
height: 44px; | |||||
background: #00ADEB; | |||||
border-radius: 4px; | |||||
color: #fff; | |||||
font-size: 16px; | |||||
margin: 0; | |||||
margin-left: 42px; | |||||
} | |||||
.code{ | |||||
width: 137px; | |||||
height: 44px; | |||||
border-radius: 4px; | |||||
margin-left: 42px; | |||||
} | |||||
} | |||||
.el-form-item:nth-child(3) { | |||||
:deep .el-form-item__content { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
} | |||||
} | |||||
.el-button { | |||||
width: 420px; | |||||
height: 54px; | |||||
background: #000000; | |||||
border-radius: 4px; | |||||
color: #fff; | |||||
font-size: 18px; | |||||
font-weight: bold; | |||||
color: #FFFFFF; | |||||
border: none; | |||||
margin-top: 20px; | |||||
} | |||||
.createai { | |||||
background-color:#07CAAF | |||||
} | |||||
.nomargin { | |||||
margin-bottom: 0px !important; | |||||
a{ | |||||
display: block; | |||||
line-height: 14px; | |||||
cursor: pointer; | |||||
padding-top: 10px; | |||||
} | |||||
} | |||||
.identify { | |||||
width: 240px; | |||||
} | |||||
} | |||||
</style> |
@@ -4,26 +4,36 @@ | |||||
<div class="header"> | <div class="header"> | ||||
<img src="@/assets/logo.png" id="logo" /> | <img src="@/assets/logo.png" id="logo" /> | ||||
<yqheaders/> | <yqheaders/> | ||||
<el-button plain class="login" size="small">注册 / 登陆</el-button> | |||||
<el-button plain class="login" size="small" @click="loginFn">注册 / 登录</el-button> | |||||
</div> | </div> | ||||
</el-header> | </el-header> | ||||
<el-main> | <el-main> | ||||
<router-view /> | <router-view /> | ||||
</el-main> | </el-main> | ||||
<yqfooters/> | <yqfooters/> | ||||
<login v-if="loginFlag" /> | |||||
</el-container> | </el-container> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import yqheaders from '@/components/header.vue' | import yqheaders from '@/components/header.vue' | ||||
import yqfooters from '@/components/footer.vue' | import yqfooters from '@/components/footer.vue' | ||||
import login from '@/components/login' | |||||
export default { | export default { | ||||
name: 'layouts', | name: 'layouts', | ||||
data () { | data () { | ||||
return {} | |||||
return { | |||||
loginFlag: false | |||||
} | |||||
}, | }, | ||||
components: { | components: { | ||||
yqheaders, | yqheaders, | ||||
yqfooters | |||||
yqfooters, | |||||
login | |||||
}, | |||||
methods: { | |||||
loginFn () { | |||||
this.loginFlag = true | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
@@ -0,0 +1,15 @@ | |||||
/* | |||||
* @Date: 2021-07-16 17:52:04 | |||||
* @LastEditTime: 2022-07-27 10:48:11 | |||||
* @Description: | |||||
*/ | |||||
const getters = { | |||||
sidebar: state => state.app.sidebar, | |||||
device: state => state.app.device, | |||||
token: state => state.user.token, | |||||
avatar: state => state.user.avatar, | |||||
name: state => state.user.name, | |||||
isChild: state => state.user.isChild, | |||||
roles: state => state.user.roles | |||||
} | |||||
export default getters |
@@ -0,0 +1,15 @@ | |||||
import Vue from 'vue' | |||||
import Vuex from 'vuex' | |||||
import getters from './getters' | |||||
import user from './modules/user' | |||||
Vue.use(Vuex) | |||||
const store = new Vuex.Store({ | |||||
modules: { | |||||
user | |||||
}, | |||||
getters | |||||
}) | |||||
export default store |
@@ -0,0 +1,76 @@ | |||||
import { login, logout, getInfo } from '@/api/user' | |||||
import { getToken, removeToken } from '@/utils/auth' | |||||
import { resetRouter } from '@/router' | |||||
const getDefaultState = () => { | |||||
return { | |||||
loginFlag: false, | |||||
phone: '' | |||||
} | |||||
} | |||||
const state = getDefaultState() | |||||
const mutations = { | |||||
RESET_STATE: (state) => { | |||||
Object.assign(state, getDefaultState()) | |||||
}, | |||||
SET_TOKEN: (state, token) => { | |||||
state.token = token | |||||
}, | |||||
SET_NAME: (state, name) => { | |||||
state.name = name | |||||
}, | |||||
SET_AVATAR: (state, avatar) => { | |||||
state.avatar = avatar | |||||
}, | |||||
SET_ISCHILD: (state, isChild) => { | |||||
state.isChild = isChild | |||||
}, | |||||
SET_Login: (state, roles) => { | |||||
state.roles = roles | |||||
} | |||||
} | |||||
const actions = { | |||||
setChild({ commit }, isChild) { | |||||
commit('SET_ISCHILD', isChild) | |||||
}, | |||||
setRoles({ commit }, roles) { | |||||
commit('SET_ROLES', roles) | |||||
}, | |||||
setToken({ commit }, token) { | |||||
commit('SET_TOKEN', token) | |||||
}, | |||||
// user login | |||||
/* login({ commit }, userInfo) { | |||||
const { username, password } = userInfo | |||||
return new Promise((resolve, reject) => { | |||||
login({ username: username.trim(), password: password }).then(response => { | |||||
const { data } = response | |||||
commit('SET_TOKEN', data.token) | |||||
setToken(data.token) | |||||
resolve() | |||||
}).catch(error => { | |||||
reject(error) | |||||
}) | |||||
}) | |||||
}, */ | |||||
// remove token | |||||
resetToken({ commit }) { | |||||
return new Promise(resolve => { | |||||
removeToken() // must remove token first | |||||
commit('RESET_STATE') | |||||
resolve() | |||||
}) | |||||
} | |||||
} | |||||
export default { | |||||
namespaced: true, | |||||
state, | |||||
mutations, | |||||
actions | |||||
} | |||||
@@ -2,27 +2,27 @@ | |||||
<div class="aigc"> | <div class="aigc"> | ||||
<div id="top"> | <div id="top"> | ||||
<Swiper :banner-array="carouselList" /> | <Swiper :banner-array="carouselList" /> | ||||
<el-form ref="form" :model="form" label-width="0px"> | |||||
<!-- <el-form ref="form" :model="form" label-width="0px"> | |||||
<el-form-item> | <el-form-item> | ||||
<el-input v-model="form.name" placeholder="手机号"></el-input> | |||||
<el-input v-model="form.phone" placeholder="手机号"></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item> | <el-form-item> | ||||
<el-input v-model="form.name" placeholder="登陆密码"></el-input> | |||||
<el-input v-model="form.password" placeholder="登录密码"></el-input> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item> | <el-form-item> | ||||
<el-input class="identify" v-model="form.name" placeholder="验证码"></el-input> | |||||
<s-identify :identifyCode="identifyCode"></s-identify> | |||||
<el-input class="identify" v-model="form.code" placeholder="验证码"></el-input> | |||||
<img :src="verifyCodeUrl" class="code" alt=""> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="nomargin"> | <el-form-item class="nomargin"> | ||||
<el-button type="primary" >登陆</el-button> | |||||
<el-button type="primary" @click="login">登录</el-button> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item class="nomargin"> | <el-form-item class="nomargin"> | ||||
<a>使用短信登陆</a> | |||||
<a>使用短信登录</a> | |||||
</el-form-item> | </el-form-item> | ||||
<el-form-item> | <el-form-item> | ||||
<el-button type="primary" class="createai">制作数字人</el-button> | <el-button type="primary" class="createai">制作数字人</el-button> | ||||
</el-form-item> | </el-form-item> | ||||
</el-form> | |||||
</el-form> --> | |||||
</div> | </div> | ||||
<div id="hot"> | <div id="hot"> | ||||
<div class="content"> | <div class="content"> | ||||
@@ -76,15 +76,12 @@ | |||||
<script> | <script> | ||||
import Swiper from '@/components/swiper' | import Swiper from '@/components/swiper' | ||||
import SwiperHor from '@/components/swiperHor' | import SwiperHor from '@/components/swiperHor' | ||||
import SIdentify from '@/components/identify' | |||||
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js' | ||||
export default { | export default { | ||||
name: 'aigc', | name: 'aigc', | ||||
data () { | data () { | ||||
return { | return { | ||||
carouselList: [], | carouselList: [], | ||||
identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz', | |||||
identifyCode: '', | |||||
rules: { | rules: { | ||||
verifycode: [{ | verifycode: [{ | ||||
required: true, | required: true, | ||||
@@ -93,38 +90,30 @@ export default { | |||||
}] | }] | ||||
}, | }, | ||||
form: { | form: { | ||||
name: '', | |||||
region: '', | |||||
date1: '', | |||||
date2: '', | |||||
delivery: false, | |||||
type: [], | |||||
resource: '', | |||||
desc: '' | |||||
phone: '', | |||||
code: '', | |||||
password: '' | |||||
}, | }, | ||||
ailist: [], | ailist: [], | ||||
aitxt: {}, | aitxt: {}, | ||||
aigczb: [], | aigczb: [], | ||||
aigcsp: [], | aigcsp: [], | ||||
gg1: {}, | gg1: {}, | ||||
gg2: {} | |||||
gg2: {}, | |||||
verifyCodeUrl: 'https://www.meta-autotv.com/C/api/user/captcha.jpg' | |||||
} | } | ||||
}, | }, | ||||
components: { | components: { | ||||
SIdentify, | |||||
Swiper, | Swiper, | ||||
SwiperHor | SwiperHor | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
this.identifyCode = '' | |||||
this.makeCode(this.identifyCodes, 4) | |||||
this.getguanggao() | this.getguanggao() | ||||
this.getshuzirenremark() | this.getshuzirenremark() | ||||
this.getshuzirenList() | this.getshuzirenList() | ||||
this.getshuzirenZhiBoList() | this.getshuzirenZhiBoList() | ||||
this.getvideoList() | this.getvideoList() | ||||
this.getlunboList() | this.getlunboList() | ||||
// this.yidong() | |||||
}, | }, | ||||
methods: { | methods: { | ||||
async getlunboList () { | async getlunboList () { | ||||
@@ -178,35 +167,6 @@ export default { | |||||
}, | }, | ||||
randomNum (min, max) { | randomNum (min, max) { | ||||
return Math.floor(Math.random() * (max - min) + min) | return Math.floor(Math.random() * (max - min) + min) | ||||
}, | |||||
// 切换验证码 | |||||
refreshCode () { | |||||
this.identifyCode = '' | |||||
this.makeCode(this.identifyCodes, 4) | |||||
}, | |||||
// 生成随机验证码 | |||||
makeCode (o, l) { | |||||
for (let i = 0; i < l; i++) { | |||||
this.identifyCode += this.identifyCodes[ | |||||
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) | |||||
] | |||||
} | |||||
}, | |||||
yidong () { | |||||
const contentBox = document.getElementById('zbitem') | |||||
const scrollBox = document.getElementById('zb') | |||||
const imgWidth = 220 | |||||
this.scroll(contentBox, scrollBox, imgWidth) | |||||
}, | |||||
scroll (contentBox, scrollBox, imgWidth) { | |||||
setInterval(() => { | |||||
scrollBox.scrollLeft++ | |||||
// 当一张图片恰好滚动至可视区域外 | |||||
if (scrollBox.scrollLeft % imgWidth === 0) { | |||||
var el = contentBox.firstElementChild // 获取处于前面的图片 | |||||
contentBox.appendChild(el) // appendChild()具备剪切功能,无需手动删除旧节点 | |||||
} | |||||
}, 2000) | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -215,6 +175,11 @@ export default { | |||||
.aigc{ | .aigc{ | ||||
background: #E3E5EA; | background: #E3E5EA; | ||||
} | } | ||||
.code { | |||||
width: 138px; | |||||
height: 40px; | |||||
margin-left: 15px; | |||||
} | |||||
.el-carousel__container { | .el-carousel__container { | ||||
height: 590px; | height: 590px; | ||||
} | } | ||||
@@ -42,7 +42,7 @@ export default { | |||||
data () { | data () { | ||||
return { | return { | ||||
total: 0, | total: 0, | ||||
pageSize: 10, | |||||
pageSize: 9, | |||||
pageNum: 1, | pageNum: 1, | ||||
carouselList: [], | carouselList: [], | ||||
articleList: [], | articleList: [], | ||||