@@ -25,6 +25,7 @@ | |||
"@vue/cli-service": "~4.5.13", | |||
"node-sass": "^4.12.0", | |||
"sass-loader": "^8.0.2", | |||
"uglifyjs-webpack-plugin": "^2.2.0", | |||
"vue-template-compiler": "^2.6.11" | |||
} | |||
} |
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div class="Box"> | |||
<div id="top"></div> | |||
<top /> | |||
<div class="topBox"> | |||
<div class="more" @click="showPopup"> | |||
@@ -646,12 +647,11 @@ export default { | |||
}, | |||
goView(id) { | |||
document.querySelector("#" + id).scrollIntoView({ | |||
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 | |||
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。 | |||
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。 | |||
behavior: "smooth", | |||
block: "start", | |||
inline: "nearest", | |||
}); | |||
this.show = false; | |||
// console.log(document.querySelector(id),); | |||
}, | |||
submit() { | |||
let phone = /^1[35789]\d{9}$/; | |||
@@ -707,6 +707,7 @@ export default { | |||
}, | |||
mounted() { | |||
this.goView("top"); | |||
new Swiper(".swiper-container", { | |||
slidesPerView: 3, | |||
spaceBetween: 30, | |||
@@ -0,0 +1,12 @@ | |||
/** | |||
* @description:滚动到对应id的位置 | |||
* @param {type} id | |||
*/ | |||
const scrollToID = id => { | |||
document.querySelector("#" + id).scrollIntoView({ | |||
behavior: "smooth", | |||
block: "start", | |||
inline: "nearest", | |||
}); | |||
} | |||
export default scrollToID |
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div class="page"> | |||
<div id="top"></div> | |||
<div class="logoBox" @click="go('/')"> | |||
<img src="../../assets/img/logoh.png" alt class="logo" /> | |||
<!-- <div class="logoTitle">metavatar</div> --> | |||
@@ -26,7 +27,7 @@ | |||
<div class="inputCode">请输入短信验证码</div> | |||
</el-form-item> | |||
<el-form-item> | |||
<button class="submitBtn" @click="login">登录/注册</button> | |||
<el-button class="submitBtn" @click="login">登录/注册</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -65,7 +66,9 @@ | |||
<span class="forgetPwd">忘记密码?</span> | |||
<el-form-item> | |||
<button class="submitBtn inside" @click="login">登录/注册</button> | |||
<el-button class="submitBtn inside" @click="login" | |||
>登录/注册</el-button | |||
> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
@@ -77,6 +80,8 @@ import Vue from "vue"; | |||
import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
data() { | |||
@@ -147,6 +152,10 @@ export default { | |||
...mapActions(["setCharacters"]), | |||
getCode() { | |||
if (this.codeInfo != "获取验证码") { | |||
Toast.fail("请求过于频繁,请稍后再试"); | |||
return; | |||
} | |||
const phoneValue = this.form.phone; | |||
localStorage.setItem("phoneValue", phoneValue); | |||
let phoneReg = /^1[35789]\d{9}$/; | |||
@@ -192,6 +201,7 @@ export default { | |||
phone: this.form.phone, | |||
code: this.form.code, | |||
}; | |||
console.log(data, "data"); | |||
this.$axios({ | |||
method: "post", | |||
url: `${baseUrl}/api/user/doLoginByPhone`, | |||
@@ -222,6 +232,9 @@ export default { | |||
this.form.phone = phoneValue; | |||
} | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div @click="globalWatcher"> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<!-- <div class="chooseModel"> | |||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||
@@ -49,6 +50,7 @@ import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -280,6 +282,9 @@ export default { | |||
} | |||
}, | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.getModeList(0); | |||
}, | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div class="video"> | |||
<video | |||
@@ -26,6 +27,7 @@ import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -64,6 +66,9 @@ export default { | |||
this.videoDetail = this.$route.query.videoDetail; | |||
console.log(this.videoDetail); | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
@@ -1,54 +1,50 @@ | |||
<template> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div class="chooseModel"> | |||
<div class="active">选择模板</div> | |||
<div class="active">录入文案</div> | |||
<div class="active">合成视频</div> | |||
</div> | |||
<div class="title">生成视频</div> | |||
<div class="coverImg"> | |||
<img :src="coverImg" /> | |||
</div> | |||
<div class="sound"> | |||
<div class="select">更换声音</div> | |||
<div class="soundList"> | |||
<div | |||
class="item" | |||
v-for="(item, index) in soundList" | |||
:key="index" | |||
@click="setIn('sound', item.id)" | |||
:class="soundIndex == item.id ? 'active' : ''" | |||
> | |||
<div | |||
class="preview" | |||
:class="setIndex == item.id ? 'active' : ''" | |||
:style="'background-color:' + item.color" | |||
></div> | |||
<div class="tag">{{ item.title }}</div> | |||
</div> | |||
</div> | |||
<!-- <div>合成视频剩余时长:3:00</div> --> | |||
</div> | |||
<div class="backGround"> | |||
<div class="select">请选择视频背景</div> | |||
<div class="select">更换背景</div> | |||
<div class="backGroundList"> | |||
<div | |||
@click="setIn(1)" | |||
:class="setIndex == 1 ? 'active' : ''" | |||
style="background-color: red" | |||
></div> | |||
<div | |||
@click="setIn(2)" | |||
:class="setIndex == 2 ? 'active' : ''" | |||
style="background-color: orange" | |||
></div> | |||
<div | |||
@click="setIn(3)" | |||
:class="setIndex == 3 ? 'active' : ''" | |||
style="background-color: yellow" | |||
></div> | |||
<div | |||
@click="setIn(4)" | |||
:class="setIndex == 4 ? 'active' : ''" | |||
style="background-color: green" | |||
></div> | |||
<div | |||
@click="setIn(5)" | |||
:class="setIndex == 5 ? 'active' : ''" | |||
style="background-color: aqua" | |||
></div> | |||
<div | |||
@click="setIn(6)" | |||
:class="setIndex == 6 ? 'active' : ''" | |||
style="background-color: blue" | |||
></div> | |||
<div | |||
@click="setIn(7)" | |||
:class="setIndex == 7 ? 'active' : ''" | |||
style="background-color: purple" | |||
></div> | |||
class="item" | |||
v-for="(item, index) in backGroundList" | |||
:key="index" | |||
@click="setIn('backGround', item.id)" | |||
:class="backGroundIndex == item.id ? 'active' : ''" | |||
> | |||
<div | |||
class="preview" | |||
:class="setIndex == item.id ? 'active' : ''" | |||
:style="'background-color:' + item.color" | |||
></div> | |||
<div class="tag">{{ item.title }}</div> | |||
</div> | |||
</div> | |||
<div>合成视频剩余时长:3:00</div> | |||
<!-- <div>合成视频剩余时长:3:00</div> --> | |||
</div> | |||
<div class="bottomBtn"> | |||
<div class="back" @click="back">上一步</div> | |||
@@ -69,6 +65,7 @@ import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -79,10 +76,85 @@ export default { | |||
return { | |||
isShowCover: false, | |||
show: false, | |||
setIndex: 1, | |||
soundIndex: "", | |||
backGroundIndex: "", | |||
coverImg: "", | |||
id: "", | |||
timerOver: false, | |||
soundList: [ | |||
{ | |||
id: 1, | |||
color: "red", | |||
title: "红色", | |||
}, | |||
{ | |||
id: 2, | |||
color: "orange", | |||
title: "橙色", | |||
}, | |||
{ | |||
id: 3, | |||
color: "yellow", | |||
title: "黄色", | |||
}, | |||
{ | |||
id: 4, | |||
color: "green", | |||
title: "绿色", | |||
}, | |||
{ | |||
id: 5, | |||
color: "aqua", | |||
title: "青色", | |||
}, | |||
{ | |||
id: 6, | |||
color: "blue", | |||
title: "蓝色", | |||
}, | |||
{ | |||
id: 7, | |||
color: "purple", | |||
title: "紫色", | |||
}, | |||
], | |||
backGroundList: [ | |||
{ | |||
id: 1, | |||
color: "red", | |||
title: "红色", | |||
}, | |||
{ | |||
id: 2, | |||
color: "orange", | |||
title: "橙色", | |||
}, | |||
{ | |||
id: 3, | |||
color: "yellow", | |||
title: "黄色", | |||
}, | |||
{ | |||
id: 4, | |||
color: "green", | |||
title: "绿色", | |||
}, | |||
{ | |||
id: 5, | |||
color: "aqua", | |||
title: "青色", | |||
}, | |||
{ | |||
id: 6, | |||
color: "blue", | |||
title: "蓝色", | |||
}, | |||
{ | |||
id: 7, | |||
color: "purple", | |||
title: "紫色", | |||
}, | |||
], | |||
}; | |||
}, | |||
computed: { | |||
@@ -98,8 +170,32 @@ export default { | |||
this.$router.push(url); | |||
}, | |||
setIn(num) { | |||
this.setIndex = num; | |||
setIn(type, num) { | |||
// 更换声音 | |||
if (type == "sound") { | |||
// 第一次选中 | |||
if (this.soundIndex == "") { | |||
this.soundIndex = num; | |||
// 取消选中 | |||
} else if (num == this.soundIndex) { | |||
this.soundIndex = ""; | |||
// 有选中的情况下选择其他项 | |||
} else { | |||
this.soundIndex = num; | |||
} | |||
// 更换背景 | |||
} else if (type == "backGround") { | |||
// 第一次选中 | |||
if (this.backGroundIndex == "") { | |||
this.backGroundIndex = num; | |||
// 取消选中 | |||
} else if (num == this.backGroundIndex) { | |||
this.backGroundIndex = ""; | |||
// 有选中的情况下选择其他项 | |||
} else { | |||
this.backGroundIndex = num; | |||
} | |||
} | |||
}, | |||
back() { | |||
@@ -200,62 +296,146 @@ export default { | |||
this.coverImg = this.$route.query.coverImg; | |||
this.id = this.$route.query.id; | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.chooseModel { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 350px; | |||
height: 32px; | |||
margin: auto; | |||
margin-top: 15px; | |||
margin-bottom: 15px; | |||
div { | |||
width: 33.33%; | |||
height: 90%; | |||
line-height: 32px; | |||
text-align: center; | |||
border: 1px solid #46464661; | |||
&.active { | |||
background-color: #00ccff; | |||
color: #fff; | |||
} | |||
} | |||
.title { | |||
text-align: center; | |||
width: 70px; | |||
font-size: 16px; | |||
font-weight: 600; | |||
border-bottom: 3px solid #0068b7; | |||
padding-bottom: 7px; | |||
margin: 10px auto; | |||
margin-bottom: 25px; | |||
} | |||
.coverImg { | |||
text-align: center; | |||
margin: 25px auto; | |||
img { | |||
width: 270px; | |||
height: 380px; | |||
border: 1px solid #00000046; | |||
border-radius: 5px; | |||
width: 207px; | |||
height: 368.5px; | |||
} | |||
} | |||
.sound { | |||
position: relative; | |||
width: 80%; | |||
border: 1px solid #0068b7; | |||
padding: 12.5px; | |||
padding-bottom: 8px; | |||
border-radius: 5px; | |||
margin: 15px auto; | |||
.select { | |||
position: absolute; | |||
top: -7px; | |||
left: 10px; | |||
font-size: 10px; | |||
color: #0068b7; | |||
background-color: #fff; | |||
padding: 0 5px; | |||
} | |||
.soundList { | |||
display: flex; | |||
overflow-x: auto; | |||
.item { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
margin-right: 8px; | |||
transition: all 0.5s; | |||
padding: 5px; | |||
.preview { | |||
width: 35px; | |||
height: 35px; | |||
margin-right: 10px; | |||
flex-shrink: 0; | |||
border: 1px solid #00000036; | |||
border-radius: 50% 50%; | |||
transition: all 0.5s; | |||
opacity: 0.9; | |||
&.active { | |||
border: 1px solid #000; | |||
width: 35px; | |||
height: 35px; | |||
opacity: 1; | |||
} | |||
} | |||
.tag { | |||
min-width: 40px; | |||
} | |||
&.active { | |||
border-radius: 5px; | |||
background-color: #00000025; | |||
} | |||
} | |||
// 隐藏滚动条 | |||
&::-webkit-scrollbar { | |||
width: 0 !important; | |||
} | |||
} | |||
} | |||
.backGround { | |||
padding-left: 10px; | |||
position: relative; | |||
width: 80%; | |||
border: 1px solid #0068b7; | |||
padding: 12.5px; | |||
padding-bottom: 8px; | |||
border-radius: 5px; | |||
margin: auto; | |||
.select { | |||
font-size: 14px; | |||
margin-bottom: 10px; | |||
position: absolute; | |||
top: -7px; | |||
left: 10px; | |||
font-size: 10px; | |||
color: #0068b7; | |||
background-color: #fff; | |||
padding: 0 5px; | |||
} | |||
.backGroundList { | |||
display: flex; | |||
overflow-x: auto; | |||
.item { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
margin-right: 8px; | |||
transition: all 0.5s; | |||
padding: 5px; | |||
.preview { | |||
width: 35px; | |||
height: 35px; | |||
margin-right: 10px; | |||
flex-shrink: 0; | |||
border: 1px solid #00000036; | |||
border-radius: 50% 50%; | |||
transition: all 0.5s; | |||
opacity: 0.9; | |||
div { | |||
width: 120px; | |||
height: 120px; | |||
margin-right: 10px; | |||
flex-shrink: 0; | |||
&.active { | |||
border: 1px solid #000; | |||
width: 35px; | |||
height: 35px; | |||
opacity: 1; | |||
} | |||
} | |||
.tag { | |||
min-width: 40px; | |||
} | |||
&.active { | |||
border: 2px solid #000; | |||
width: 118px; | |||
height: 118px; | |||
transition: all 0.5s; | |||
border-radius: 5px; | |||
background-color: #00000025; | |||
} | |||
} | |||
// 隐藏滚动条 | |||
&::-webkit-scrollbar { | |||
width: 0 !important; | |||
@@ -265,21 +445,22 @@ export default { | |||
.bottomBtn { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 0 75px; | |||
margin-top: 20px; | |||
margin-bottom: 20px; | |||
padding: 0 32.5px; | |||
margin-top: 16px; | |||
margin-bottom: 30px; | |||
div { | |||
width: 100px; | |||
height: 30px; | |||
color: #484848; | |||
line-height: 30px; | |||
width: 142px; | |||
height: 42px; | |||
color: #fff; | |||
line-height: 42px; | |||
text-align: center; | |||
border: 1px solid #484848; | |||
border: 1px solid #d2d2d2; | |||
border-radius: 7px; | |||
background-color: #d2d2d2; | |||
&.next { | |||
color: #fff; | |||
border: 1px solid #00ccff; | |||
background-color: #00ccff; | |||
border: 1px solid #0068b7; | |||
background-color: #0068b7; | |||
} | |||
} | |||
} | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div class="title">录入文案</div> | |||
<div class="content"> | |||
@@ -30,6 +31,7 @@ import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -150,6 +152,9 @@ export default { | |||
console.log(this.modelDetail); | |||
} | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div class="chooseModel"> | |||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||
@@ -35,6 +36,7 @@ import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -139,6 +141,9 @@ export default { | |||
const id = this.$route.query.id; | |||
this.getModeDetail(id); | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
}; | |||
</script> | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div class="title">请选择需要更换的语音</div> | |||
<div class="selectSex"> | |||
@@ -33,6 +34,7 @@ import { mapState, mapActions } from "vuex"; | |||
import HeadTop from "./../../components/common/head.vue"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -90,6 +92,9 @@ export default { | |||
}); | |||
}, | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.getModeList(2); | |||
}, | |||
@@ -1,5 +1,6 @@ | |||
<template> | |||
<div class="page"> | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||
<div class="item"> | |||
@@ -54,6 +55,7 @@ import { mapState, mapActions } from "vuex"; | |||
import { Toast } from "vant"; | |||
import baseUrl from "../../api/baseUrl"; | |||
import timestampToTime from "../../utils/timestampToTime"; | |||
import scrollToID from "../../utils/scrollToID"; | |||
Vue.use(Toast); | |||
export default { | |||
@@ -140,6 +142,9 @@ export default { | |||
this.$router.push("/chooseModel"); | |||
}, | |||
}, | |||
mounted() { | |||
scrollToID("top"); | |||
}, | |||
created() { | |||
this.getVideoList(1); | |||
}, | |||
@@ -1,3 +1,5 @@ | |||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
module.exports = { | |||
css: { | |||
loaderOptions: { | |||
@@ -44,4 +46,20 @@ module.exports = { | |||
}, | |||
lintOnSave: false, | |||
publicPath: './', // 打包后引用的资源路径 | |||
configureWebpack: { | |||
plugins: [ | |||
//打包环境去掉console.log | |||
new UglifyJsPlugin({ | |||
uglifyOptions: { | |||
compress: { | |||
drop_console: true, //注释console | |||
drop_debugger: true, //注释debugger | |||
pure_funcs: ['console.log'], //移除console.log | |||
}, | |||
}, | |||
}), | |||
], | |||
} | |||
} |
@@ -6393,6 +6393,11 @@ send@0.18.0: | |||
range-parser "~1.2.1" | |||
statuses "2.0.1" | |||
serialize-javascript@^1.7.0: | |||
version "1.9.1" | |||
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb" | |||
integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A== | |||
serialize-javascript@^4.0.0: | |||
version "4.0.0" | |||
resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" | |||
@@ -7240,6 +7245,26 @@ uglify-js@3.4.x: | |||
commander "~2.19.0" | |||
source-map "~0.6.1" | |||
uglify-js@^3.6.0: | |||
version "3.17.4" | |||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c" | |||
integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g== | |||
uglifyjs-webpack-plugin@^2.2.0: | |||
version "2.2.0" | |||
resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.2.0.tgz#e75bc80e7f1937f725954c9b4c5a1e967ea9d0d7" | |||
integrity sha512-mHSkufBmBuJ+KHQhv5H0MXijtsoA1lynJt1lXOaotja8/I0pR4L9oGaPIZw+bQBOFittXZg9OC1sXSGO9D9ZYg== | |||
dependencies: | |||
cacache "^12.0.2" | |||
find-cache-dir "^2.1.0" | |||
is-wsl "^1.1.0" | |||
schema-utils "^1.0.0" | |||
serialize-javascript "^1.7.0" | |||
source-map "^0.6.1" | |||
uglify-js "^3.6.0" | |||
webpack-sources "^1.4.0" | |||
worker-farm "^1.7.0" | |||
unbox-primitive@^1.0.2: | |||
version "1.0.2" | |||
resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" | |||