@@ -25,6 +25,7 @@ | |||||
"@vue/cli-service": "~4.5.13", | "@vue/cli-service": "~4.5.13", | ||||
"node-sass": "^4.12.0", | "node-sass": "^4.12.0", | ||||
"sass-loader": "^8.0.2", | "sass-loader": "^8.0.2", | ||||
"uglifyjs-webpack-plugin": "^2.2.0", | |||||
"vue-template-compiler": "^2.6.11" | "vue-template-compiler": "^2.6.11" | ||||
} | } | ||||
} | } |
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div class="Box"> | <div class="Box"> | ||||
<div id="top"></div> | |||||
<top /> | <top /> | ||||
<div class="topBox"> | <div class="topBox"> | ||||
<div class="more" @click="showPopup"> | <div class="more" @click="showPopup"> | ||||
@@ -646,12 +647,11 @@ export default { | |||||
}, | }, | ||||
goView(id) { | goView(id) { | ||||
document.querySelector("#" + id).scrollIntoView({ | 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; | this.show = false; | ||||
// console.log(document.querySelector(id),); | |||||
}, | }, | ||||
submit() { | submit() { | ||||
let phone = /^1[35789]\d{9}$/; | let phone = /^1[35789]\d{9}$/; | ||||
@@ -707,6 +707,7 @@ export default { | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.goView("top"); | |||||
new Swiper(".swiper-container", { | new Swiper(".swiper-container", { | ||||
slidesPerView: 3, | slidesPerView: 3, | ||||
spaceBetween: 30, | 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> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<div id="top"></div> | |||||
<div class="logoBox" @click="go('/')"> | <div class="logoBox" @click="go('/')"> | ||||
<img src="../../assets/img/logoh.png" alt class="logo" /> | <img src="../../assets/img/logoh.png" alt class="logo" /> | ||||
<!-- <div class="logoTitle">metavatar</div> --> | <!-- <div class="logoTitle">metavatar</div> --> | ||||
@@ -26,7 +27,7 @@ | |||||
<div class="inputCode">请输入短信验证码</div> | <div class="inputCode">请输入短信验证码</div> | ||||
</el-form-item> | </el-form-item> | ||||
<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-item> | ||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
@@ -65,7 +66,9 @@ | |||||
<span class="forgetPwd">忘记密码?</span> | <span class="forgetPwd">忘记密码?</span> | ||||
<el-form-item> | <el-form-item> | ||||
<button class="submitBtn inside" @click="login">登录/注册</button> | |||||
<el-button class="submitBtn inside" @click="login" | |||||
>登录/注册</el-button | |||||
> | |||||
</el-form-item> | </el-form-item> | ||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
@@ -77,6 +80,8 @@ import Vue from "vue"; | |||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
data() { | data() { | ||||
@@ -147,6 +152,10 @@ export default { | |||||
...mapActions(["setCharacters"]), | ...mapActions(["setCharacters"]), | ||||
getCode() { | getCode() { | ||||
if (this.codeInfo != "获取验证码") { | |||||
Toast.fail("请求过于频繁,请稍后再试"); | |||||
return; | |||||
} | |||||
const phoneValue = this.form.phone; | const phoneValue = this.form.phone; | ||||
localStorage.setItem("phoneValue", phoneValue); | localStorage.setItem("phoneValue", phoneValue); | ||||
let phoneReg = /^1[35789]\d{9}$/; | let phoneReg = /^1[35789]\d{9}$/; | ||||
@@ -192,6 +201,7 @@ export default { | |||||
phone: this.form.phone, | phone: this.form.phone, | ||||
code: this.form.code, | code: this.form.code, | ||||
}; | }; | ||||
console.log(data, "data"); | |||||
this.$axios({ | this.$axios({ | ||||
method: "post", | method: "post", | ||||
url: `${baseUrl}/api/user/doLoginByPhone`, | url: `${baseUrl}/api/user/doLoginByPhone`, | ||||
@@ -222,6 +232,9 @@ export default { | |||||
this.form.phone = phoneValue; | this.form.phone = phoneValue; | ||||
} | } | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div @click="globalWatcher"> | |||||
<div> | |||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<!-- <div class="chooseModel"> | <!-- <div class="chooseModel"> | ||||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | <div :class="phase == 1 ? 'active' : ''">选择模板</div> | ||||
@@ -49,6 +50,7 @@ import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -280,6 +282,9 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
created() { | created() { | ||||
this.getModeList(0); | this.getModeList(0); | ||||
}, | }, | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="video"> | <div class="video"> | ||||
<video | <video | ||||
@@ -26,6 +27,7 @@ import { Toast } from "vant"; | |||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -64,6 +66,9 @@ export default { | |||||
this.videoDetail = this.$route.query.videoDetail; | this.videoDetail = this.$route.query.videoDetail; | ||||
console.log(this.videoDetail); | console.log(this.videoDetail); | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -1,54 +1,50 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="chooseModel"> | |||||
<div class="active">选择模板</div> | |||||
<div class="active">录入文案</div> | |||||
<div class="active">合成视频</div> | |||||
</div> | |||||
<div class="title">生成视频</div> | |||||
<div class="coverImg"> | <div class="coverImg"> | ||||
<img :src="coverImg" /> | <img :src="coverImg" /> | ||||
</div> | </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="backGround"> | ||||
<div class="select">请选择视频背景</div> | |||||
<div class="select">更换背景</div> | |||||
<div class="backGroundList"> | <div class="backGroundList"> | ||||
<div | <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> | ||||
<div>合成视频剩余时长:3:00</div> | |||||
<!-- <div>合成视频剩余时长:3:00</div> --> | |||||
</div> | </div> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="back" @click="back">上一步</div> | <div class="back" @click="back">上一步</div> | ||||
@@ -69,6 +65,7 @@ import { Toast } from "vant"; | |||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -79,10 +76,85 @@ export default { | |||||
return { | return { | ||||
isShowCover: false, | isShowCover: false, | ||||
show: false, | show: false, | ||||
setIndex: 1, | |||||
soundIndex: "", | |||||
backGroundIndex: "", | |||||
coverImg: "", | coverImg: "", | ||||
id: "", | id: "", | ||||
timerOver: false, | 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: { | computed: { | ||||
@@ -98,8 +170,32 @@ export default { | |||||
this.$router.push(url); | 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() { | back() { | ||||
@@ -200,62 +296,146 @@ export default { | |||||
this.coverImg = this.$route.query.coverImg; | this.coverImg = this.$route.query.coverImg; | ||||
this.id = this.$route.query.id; | this.id = this.$route.query.id; | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <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 { | .coverImg { | ||||
text-align: center; | text-align: center; | ||||
margin: 25px auto; | margin: 25px auto; | ||||
img { | 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 { | .backGround { | ||||
padding-left: 10px; | |||||
position: relative; | |||||
width: 80%; | |||||
border: 1px solid #0068b7; | |||||
padding: 12.5px; | |||||
padding-bottom: 8px; | |||||
border-radius: 5px; | |||||
margin: auto; | |||||
.select { | .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 { | .backGroundList { | ||||
display: flex; | display: flex; | ||||
overflow-x: auto; | 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 { | &.active { | ||||
border: 2px solid #000; | |||||
width: 118px; | |||||
height: 118px; | |||||
transition: all 0.5s; | |||||
border-radius: 5px; | |||||
background-color: #00000025; | |||||
} | } | ||||
} | } | ||||
// 隐藏滚动条 | // 隐藏滚动条 | ||||
&::-webkit-scrollbar { | &::-webkit-scrollbar { | ||||
width: 0 !important; | width: 0 !important; | ||||
@@ -265,21 +445,22 @@ export default { | |||||
.bottomBtn { | .bottomBtn { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding: 0 75px; | |||||
margin-top: 20px; | |||||
margin-bottom: 20px; | |||||
padding: 0 32.5px; | |||||
margin-top: 16px; | |||||
margin-bottom: 30px; | |||||
div { | div { | ||||
width: 100px; | |||||
height: 30px; | |||||
color: #484848; | |||||
line-height: 30px; | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | |||||
line-height: 42px; | |||||
text-align: center; | text-align: center; | ||||
border: 1px solid #484848; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | border-radius: 7px; | ||||
background-color: #d2d2d2; | |||||
&.next { | &.next { | ||||
color: #fff; | color: #fff; | ||||
border: 1px solid #00ccff; | |||||
background-color: #00ccff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="title">录入文案</div> | <div class="title">录入文案</div> | ||||
<div class="content"> | <div class="content"> | ||||
@@ -30,6 +31,7 @@ import { Toast } from "vant"; | |||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import { mapState, mapActions } from "vuex"; | import { mapState, mapActions } from "vuex"; | ||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -150,6 +152,9 @@ export default { | |||||
console.log(this.modelDetail); | console.log(this.modelDetail); | ||||
} | } | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="chooseModel"> | <div class="chooseModel"> | ||||
<div :class="phase == 1 ? 'active' : ''">选择模板</div> | <div :class="phase == 1 ? 'active' : ''">选择模板</div> | ||||
@@ -35,6 +36,7 @@ import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -139,6 +141,9 @@ export default { | |||||
const id = this.$route.query.id; | const id = this.$route.query.id; | ||||
this.getModeDetail(id); | this.getModeDetail(id); | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<div class="title">请选择需要更换的语音</div> | <div class="title">请选择需要更换的语音</div> | ||||
<div class="selectSex"> | <div class="selectSex"> | ||||
@@ -33,6 +34,7 @@ import { mapState, mapActions } from "vuex"; | |||||
import HeadTop from "./../../components/common/head.vue"; | import HeadTop from "./../../components/common/head.vue"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -90,6 +92,9 @@ export default { | |||||
}); | }); | ||||
}, | }, | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
created() { | created() { | ||||
this.getModeList(2); | this.getModeList(2); | ||||
}, | }, | ||||
@@ -1,5 +1,6 @@ | |||||
<template> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<div id="top"></div> | |||||
<HeadTop /> | <HeadTop /> | ||||
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | ||||
<div class="item"> | <div class="item"> | ||||
@@ -54,6 +55,7 @@ import { mapState, mapActions } from "vuex"; | |||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import baseUrl from "../../api/baseUrl"; | import baseUrl from "../../api/baseUrl"; | ||||
import timestampToTime from "../../utils/timestampToTime"; | import timestampToTime from "../../utils/timestampToTime"; | ||||
import scrollToID from "../../utils/scrollToID"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -140,6 +142,9 @@ export default { | |||||
this.$router.push("/chooseModel"); | this.$router.push("/chooseModel"); | ||||
}, | }, | ||||
}, | }, | ||||
mounted() { | |||||
scrollToID("top"); | |||||
}, | |||||
created() { | created() { | ||||
this.getVideoList(1); | this.getVideoList(1); | ||||
}, | }, | ||||
@@ -1,3 +1,5 @@ | |||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
module.exports = { | module.exports = { | ||||
css: { | css: { | ||||
loaderOptions: { | loaderOptions: { | ||||
@@ -44,4 +46,20 @@ module.exports = { | |||||
}, | }, | ||||
lintOnSave: false, | lintOnSave: false, | ||||
publicPath: './', // 打包后引用的资源路径 | 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" | range-parser "~1.2.1" | ||||
statuses "2.0.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: | serialize-javascript@^4.0.0: | ||||
version "4.0.0" | version "4.0.0" | ||||
resolved "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" | 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" | commander "~2.19.0" | ||||
source-map "~0.6.1" | 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: | unbox-primitive@^1.0.2: | ||||
version "1.0.2" | version "1.0.2" | ||||
resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" | resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" | ||||