@@ -1,7 +1,6 @@ | |||||
.DS_Store | .DS_Store | ||||
node_modules | node_modules | ||||
/dist | |||||
dist | |||||
# local env files | # local env files | ||||
.env.local | .env.local | ||||
@@ -25,7 +25,6 @@ | |||||
"@vue/cli-plugin-vuex": "~4.5.13", | "@vue/cli-plugin-vuex": "~4.5.13", | ||||
"@vue/cli-service": "~4.5.13", | "@vue/cli-service": "~4.5.13", | ||||
"node-sass": "^4.14.1", | "node-sass": "^4.14.1", | ||||
"uglifyjs-webpack-plugin": "^2.2.0", | |||||
"vue-template-compiler": "^2.6.11" | "vue-template-compiler": "^2.6.11" | ||||
} | } | ||||
} | |||||
} |
@@ -1,18 +1,21 @@ | |||||
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html lang=""> | <html lang=""> | ||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
<title><%= htmlWebpackPlugin.options.title %></title> | |||||
</head> | |||||
<body> | |||||
<noscript> | |||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
</noscript> | |||||
<div id="app"></div> | |||||
<!-- built files will be auto injected --> | |||||
</body> | |||||
</html> | |||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | |||||
<script charset="utf-8" type="text/javascript" | |||||
src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script> | |||||
<title> | |||||
<%= htmlWebpackPlugin.options.title %> | |||||
</title> | |||||
</head> | |||||
<body> | |||||
<div id="app"></div> | |||||
</body> | |||||
</html> |
@@ -1,8 +1,6 @@ | |||||
<template> | <template> | ||||
<div id="app"> | <div id="app"> | ||||
<transition name="app" mode="out-in"> | |||||
<router-view></router-view> | |||||
</transition> | |||||
<router-view></router-view> | |||||
<tail /> | <tail /> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -18,6 +16,7 @@ export default { | |||||
return {}; | return {}; | ||||
}, | }, | ||||
}; | }; | ||||
// "uglifyjs-webpack-plugin": "^2.2.0", | |||||
</script> | </script> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
@@ -26,6 +25,7 @@ p { | |||||
margin: 0 0; | margin: 0 0; | ||||
padding: 0 0; | padding: 0 0; | ||||
} | } | ||||
input { | input { | ||||
background: none; | background: none; | ||||
outline: none; | outline: none; | ||||
@@ -0,0 +1,13 @@ | |||||
import request from '@/utils/request' | |||||
/** | |||||
* @description 通过视频id获取视频详情 | |||||
* @param {number | string} id | |||||
* @returns data | |||||
*/ | |||||
export function doGetVideoDetialById(id) { | |||||
return request({ | |||||
url: `/api/userVideo/videoDetial?videoId=${id}`, | |||||
method: 'get', | |||||
}) | |||||
} |
@@ -12,3 +12,15 @@ export function getVideoList(pageNum, pageSize) { | |||||
}) | }) | ||||
} | } | ||||
/** | |||||
* @description 通过视频id获取视频详情 | |||||
* @param {number | string} id | |||||
* @returns data | |||||
*/ | |||||
export function doGetVideoDetialById(id) { | |||||
return request({ | |||||
url: `/api/userVideo/videoDetial?videoId=${id}`, | |||||
method: 'get', | |||||
}) | |||||
} | |||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="page"> | |||||
<div class="pages"> | |||||
<div class="logoBox"> | <div class="logoBox"> | ||||
<img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | ||||
<div class="userInfo"> | <div class="userInfo"> | ||||
@@ -71,7 +71,11 @@ export default { | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | |||||
.pages { | |||||
position: sticky; | |||||
top: 0; | |||||
background-color: #fff; | |||||
z-index: 99; | |||||
.logoBox { | .logoBox { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="Box"> | |||||
<div :class="inPage ? 'Box active' : 'Box'"> | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<top /> | <top /> | ||||
<div class="topBox"> | <div class="topBox"> | ||||
@@ -411,6 +411,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
userName: "", | userName: "", | ||||
phone: "", | phone: "", | ||||
email: "", | email: "", | ||||
@@ -730,6 +731,7 @@ export default { | |||||
el: ".swiper-scrollbar", | el: ".swiper-scrollbar", | ||||
}, | }, | ||||
}); | }); | ||||
this.inPage = true; | |||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -742,6 +744,7 @@ export default { | |||||
transform: translateY(0); | transform: translateY(0); | ||||
} | } | ||||
} | } | ||||
.contentBox { | .contentBox { | ||||
width: 90%; | width: 90%; | ||||
background-color: rgba(0, 0, 0, 0.5); | background-color: rgba(0, 0, 0, 0.5); | ||||
@@ -816,6 +819,13 @@ export default { | |||||
.Box { | .Box { | ||||
width: 100%; | width: 100%; | ||||
overflow: hidden; | overflow: hidden; | ||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | |||||
} | } | ||||
.topBox { | .topBox { | ||||
width: 100%; | width: 100%; | ||||
@@ -12,9 +12,7 @@ import ElementUI from 'element-ui'; //引入js | |||||
import 'element-ui/lib/theme-chalk/index.css';//引入css | import 'element-ui/lib/theme-chalk/index.css';//引入css | ||||
Vue.use(ElementUI); | Vue.use(ElementUI); | ||||
Vue.use(Vant); | |||||
Vue.use(Vant) | |||||
Vue.config.productionTip = false | Vue.config.productionTip = false | ||||
Vue.prototype.$axios = axios | Vue.prototype.$axios = axios | ||||
@@ -30,19 +30,19 @@ request.interceptors.request.use( | |||||
// 响应拦截器 | // 响应拦截器 | ||||
request.interceptors.response.use( | request.interceptors.response.use( | ||||
function (response) { | function (response) { | ||||
let code = response.data.code | |||||
// 弹出错误 | // 弹出错误 | ||||
if (response.data.code != 200) { | |||||
if (code != 200) { | |||||
// 当token过期或损坏时 | // 当token过期或损坏时 | ||||
if (response.data.code == 1052) { | |||||
if (code == 1052) { | |||||
router.push("/login"); | router.push("/login"); | ||||
Toast.fail("登录过期,请重新登录!"); | Toast.fail("登录过期,请重新登录!"); | ||||
return | return | ||||
} else if (response.data.code == 404) { | |||||
Toast.fail("网络异常,请稍后再试"); | |||||
return Promise.reject(response.data) | |||||
} else if (response.data.code == 500) { | |||||
} else if (code == 1053) { | |||||
router.push("/login"); | |||||
Toast.fail("请您先登录!"); | |||||
return | |||||
} else if (code == 500) { | |||||
Toast.fail("系统异常,请稍后再试"); | Toast.fail("系统异常,请稍后再试"); | ||||
return Promise.reject(response.data) | return Promise.reject(response.data) | ||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="page"> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <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" /> | ||||
@@ -117,6 +117,7 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
codeInfo: "获取验证码", | codeInfo: "获取验证码", | ||||
inPage: false, | |||||
loginType: 1, | loginType: 1, | ||||
// 短信验证码登录 | // 短信验证码登录 | ||||
form: { | form: { | ||||
@@ -312,6 +313,7 @@ export default { | |||||
this.form.phone = phoneValue ? phoneValue : ""; | this.form.phone = phoneValue ? phoneValue : ""; | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
}, | }, | ||||
}; | }; | ||||
@@ -319,6 +321,13 @@ export default { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | |||||
.logoBox { | .logoBox { | ||||
// margin-top: 10px; | // margin-top: 10px; | ||||
margin-left: 5px; | margin-left: 5px; | ||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<HeadTop /> | <HeadTop /> | ||||
<!-- <div class="chooseModel"> | <!-- <div class="chooseModel"> | ||||
@@ -64,6 +64,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
type: 2, | type: 2, | ||||
currentId: "", | currentId: "", | ||||
modeList: [], // 模板列表 | modeList: [], // 模板列表 | ||||
@@ -162,6 +163,7 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
}, | }, | ||||
created() { | created() { | ||||
@@ -171,132 +173,140 @@ export default { | |||||
</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: 100%; | |||||
line-height: 32px; | |||||
text-align: center; | |||||
border: 1px solid #46464661; | |||||
&.active { | |||||
background-color: #00ccff; | |||||
color: #fff; | |||||
} | |||||
.page { | |||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
padding-bottom: 25px; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | } | ||||
} | |||||
.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; | |||||
} | |||||
.typeOutSide { | |||||
position: fixed; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 10px; | |||||
z-index: 99; | |||||
.type { | |||||
.chooseModel { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
align-items: center; | align-items: center; | ||||
padding: 0 25px; | |||||
margin-bottom: 20px; | |||||
width: 350px; | |||||
height: 32px; | |||||
margin: auto; | |||||
margin-top: 15px; | |||||
margin-bottom: 15px; | |||||
div { | div { | ||||
width: 94px; | |||||
height: 35px; | |||||
line-height: 35px; | |||||
color: #fff; | |||||
border: 1px solid #bfbfbf; | |||||
background-color: #bfbfbf; | |||||
border-radius: 5px; | |||||
width: 33.33%; | |||||
height: 100%; | |||||
line-height: 32px; | |||||
text-align: center; | text-align: center; | ||||
transition: all 0.3s; | |||||
border: 1px solid #46464661; | |||||
&.active { | &.active { | ||||
background-color: #00ccff; | |||||
color: #fff; | color: #fff; | ||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
} | |||||
.choose { | |||||
margin-bottom: 40px; | |||||
.modeList { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
flex-wrap: wrap; | |||||
margin: auto; | |||||
padding: 0 10px; | |||||
.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; | |||||
} | |||||
.typeOutSide { | |||||
position: sticky; | |||||
top: 60px; | |||||
z-index: 99; | |||||
.model { | |||||
position: relative; | |||||
text-align: left; | |||||
margin-bottom: 25px; | |||||
border: 1px solid #00000028; | |||||
padding: 8px; | |||||
border-radius: 8px; | |||||
transition: all 0.3s; | |||||
opacity: 0.9; | |||||
img { | |||||
width: 150px; | |||||
height: 220px; | |||||
} | |||||
.modelName { | |||||
margin-top: 4px; | |||||
font-size: 13px; | |||||
} | |||||
.setPaper { | |||||
position: absolute; | |||||
top: 80%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
.type { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 0 25px; | |||||
margin-bottom: 20px; | |||||
div { | |||||
width: 94px; | |||||
height: 35px; | |||||
line-height: 35px; | |||||
color: #fff; | color: #fff; | ||||
font-size: 14px; | |||||
font-weight: 600; | |||||
background-color: #00000042; | |||||
padding: 3px 5px; | |||||
border: 1px solid #bfbfbf; | |||||
background-color: #bfbfbf; | |||||
border-radius: 5px; | border-radius: 5px; | ||||
text-align: center; | |||||
transition: all 0.3s; | transition: all 0.3s; | ||||
opacity: 0; | |||||
&.active { | |||||
color: #fff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | |||||
} | } | ||||
&.active { | |||||
transform: translateY(-3px); | |||||
box-shadow: #60606082 0px 2px 2px 1px; | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.choose { | |||||
margin-bottom: 40px; | |||||
.modeList { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
flex-wrap: wrap; | |||||
margin: auto; | |||||
padding: 0 10px; | |||||
.model { | |||||
position: relative; | |||||
text-align: left; | |||||
margin-bottom: 25px; | |||||
border: 1px solid #00000028; | |||||
padding: 8px; | |||||
border-radius: 8px; | |||||
transition: all 0.3s; | |||||
opacity: 0.9; | |||||
img { | |||||
width: 150px; | |||||
height: 220px; | |||||
} | |||||
.modelName { | |||||
margin-top: 4px; | |||||
font-size: 13px; | |||||
} | |||||
.setPaper { | .setPaper { | ||||
position: absolute; | |||||
top: 80%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
color: #fff; | |||||
font-size: 14px; | |||||
font-weight: 600; | |||||
background-color: #00000042; | |||||
padding: 3px 5px; | |||||
border-radius: 5px; | |||||
transition: all 0.3s; | |||||
opacity: 0; | |||||
} | |||||
&.active { | |||||
transform: translateY(-3px); | |||||
box-shadow: #60606082 0px 2px 2px 1px; | |||||
opacity: 1; | opacity: 1; | ||||
.setPaper { | |||||
opacity: 1; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | |||||
.alt { | |||||
font-size: 18px; | |||||
margin: 80px auto; | |||||
height: 450px; | |||||
line-height: 450px; | |||||
.alt { | |||||
font-size: 18px; | |||||
margin: 80px auto; | |||||
height: 450px; | |||||
line-height: 450px; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | |||||
.blank { | |||||
width: 1px; | |||||
height: 1px; | |||||
margin-bottom: 240px; | |||||
.blank { | |||||
width: 1px; | |||||
height: 1px; | |||||
margin-bottom: 240px; | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -1,22 +1,24 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<HeadTop /> | <HeadTop /> | ||||
<div class="video"> | <div class="video"> | ||||
<video | |||||
<!-- <video | |||||
:src=" | :src=" | ||||
'https://smapitest.malls.iformall.com/myVideo/' + | 'https://smapitest.malls.iformall.com/myVideo/' + | ||||
videoDetail.videoPath | videoDetail.videoPath | ||||
" | " | ||||
/> | |||||
/> --> | |||||
<div id="J_prismPlayer" /> | |||||
<div class="desc"> | <div class="desc"> | ||||
视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | 视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | ||||
</div> | </div> | ||||
<img src="../../assets/img/play.png" @click="play" /> | |||||
<!-- <img src="../../assets/img/play.png" @click="play" /> --> | |||||
</div> | </div> | ||||
<div class="bottomBtn"> | <div class="bottomBtn"> | ||||
<div class="back" @click="backToIndex">返回首页</div> | <div class="back" @click="backToIndex">返回首页</div> | ||||
<div class="next" @click="play">下载视频</div> | |||||
<a class="next" @click="download">下载视频</a> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -24,10 +26,12 @@ | |||||
<script> | <script> | ||||
import Vue from "vue"; | import Vue from "vue"; | ||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
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"; | import scrollToID from "../../utils/scrollToID"; | ||||
import deepCopy from "../../utils/deepCopy"; | |||||
import { doGetVideoDetialById } from "../../api/downloadVideo"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -36,7 +40,10 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
videoDetail: {}, | videoDetail: {}, | ||||
coverUrl: "", | |||||
videoUrl: "", | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -51,83 +58,133 @@ export default { | |||||
go(url) { | go(url) { | ||||
this.$router.push(url); | this.$router.push(url); | ||||
}, | }, | ||||
backToIndex() { | backToIndex() { | ||||
this.$router.push("/myPage"); | this.$router.push("/myPage"); | ||||
}, | }, | ||||
play() { | |||||
location.href = | |||||
"https://smapitest.malls.iformall.com/myVideo/" + | |||||
this.videoDetail.videoPath; | |||||
download() { | |||||
window.open(this.videoUrl); | |||||
}, | |||||
async getVideoDetail(id) { | |||||
try { | |||||
const res = await doGetVideoDetialById(id); | |||||
console.log(res, "视频详情"); | |||||
this.coverUrl = res.data.coverURL; | |||||
this.videoUrl = res.data.videoUrl; | |||||
this.open(); | |||||
} catch (error) { | |||||
console.log(error, "error"); | |||||
Toast.fail(error.message); | |||||
} | |||||
}, | }, | ||||
download() {}, | |||||
open() { | |||||
new Aliplayer( | |||||
{ | |||||
id: "J_prismPlayer", | |||||
cover: this.coverUrl, | |||||
source: this.videoUrl, | |||||
width: "480px", | |||||
height: "854px", | |||||
// 以下可选设置 | |||||
isLive: false, // 直播 | |||||
rePlay: false, // 循环播放 | |||||
preload: true, //播放器自动加载 | |||||
autoplay: false, // 自动播放 | |||||
diagnosisButtonVisible: false, //是否显示检测按钮 | |||||
keyShortCuts: true, //是否启用快捷键 | |||||
keyFastForwardStep: 3, //快进快退的时间长度 | |||||
controlBarVisibility: "hover", // 控制条的显示方式 | |||||
}, | |||||
function (player) { | |||||
player.play(); | |||||
} | |||||
); | |||||
}, | |||||
}, | }, | ||||
created() { | created() { | ||||
this.videoDetail = this.$route.query.videoDetail; | |||||
console.log(this.videoDetail); | |||||
this.videoId = this.$route.query.videoId; | |||||
this.getVideoDetail(this.videoId); | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.video { | |||||
position: relative; | |||||
padding: 30px; | |||||
text-align: center; | |||||
.title { | |||||
font-size: 18px; | |||||
margin-bottom: 20px; | |||||
} | |||||
video { | |||||
width: 240px; | |||||
height: 427px; | |||||
border: 0.5px solid #000; | |||||
border-radius: 8px; | |||||
} | |||||
img { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
.page { | |||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
padding-bottom: 25px; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | } | ||||
.desc { | |||||
.video { | |||||
position: relative; | position: relative; | ||||
right: 45px; | |||||
bottom: 8px; | |||||
font-size: 12px; | |||||
margin-top: 20px; | |||||
span { | |||||
color: #0006ff; | |||||
} | |||||
} | |||||
} | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 20px; | |||||
margin-bottom: 20px; | |||||
div { | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #484848; | |||||
line-height: 42px; | |||||
padding: 30px; | |||||
text-align: center; | text-align: center; | ||||
border: 1px solid #484848; | |||||
border-radius: 7px; | |||||
&.back { | |||||
color: #fff; | |||||
border: 1px solid #d2d2d2; | |||||
background-color: #d2d2d2; | |||||
#J_prismPlayer { | |||||
margin: auto; | |||||
} | |||||
.title { | |||||
font-size: 18px; | |||||
margin-bottom: 20px; | |||||
} | |||||
video { | |||||
width: 240px; | |||||
height: 427px; | |||||
border: 0.5px solid #000; | |||||
border-radius: 8px; | |||||
} | } | ||||
&.next { | |||||
color: #fff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
img { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
} | |||||
.desc { | |||||
position: relative; | |||||
right: 45px; | |||||
bottom: 8px; | |||||
font-size: 12px; | |||||
margin-top: 20px; | |||||
span { | |||||
color: #0006ff; | |||||
} | |||||
} | |||||
} | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 20px; | |||||
margin-bottom: 20px; | |||||
div, | |||||
a { | |||||
display: block; | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #484848; | |||||
line-height: 42px; | |||||
text-align: center; | |||||
border: 1px solid #484848; | |||||
border-radius: 7px; | |||||
&.back { | |||||
color: #fff; | |||||
border: 1px solid #d2d2d2; | |||||
background-color: #d2d2d2; | |||||
} | |||||
&.next { | |||||
color: #fff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<HeadTop /> | <HeadTop /> | ||||
<div class="title">生成视频</div> | <div class="title">生成视频</div> | ||||
@@ -106,10 +106,12 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
isShowCover: false, | isShowCover: false, | ||||
isShowMessageCover: false, | isShowMessageCover: false, | ||||
show: false, | show: false, | ||||
voiceAlert: "暂无可用声音", | voiceAlert: "暂无可用声音", | ||||
timeOuter: "", | |||||
soundIndex: "", | soundIndex: "", | ||||
backGroundIndex: "", | backGroundIndex: "", | ||||
coverImg: "", | coverImg: "", | ||||
@@ -210,7 +212,7 @@ export default { | |||||
console.log(res, "生成视频"); | console.log(res, "生成视频"); | ||||
Toast.success("提交成功!"); | Toast.success("提交成功!"); | ||||
// *#06# | // *#06# | ||||
setTimeout(() => { | |||||
this.timeOuter = setTimeout(() => { | |||||
this.isShowCover = true; | this.isShowCover = true; | ||||
}, 2000); | }, 2000); | ||||
const timer = setInterval(() => { | const timer = setInterval(() => { | ||||
@@ -266,14 +268,13 @@ export default { | |||||
const res = await doFindVideoById(id); | const res = await doFindVideoById(id); | ||||
console.log(res, "通过id获取视频"); | console.log(res, "通过id获取视频"); | ||||
if (res.data.videoStatus == 2) { | if (res.data.videoStatus == 2) { | ||||
setTimeout(() => { | |||||
this.isShowCover = false; | |||||
}, 2000); | |||||
this.isShowCover = false; | |||||
clearTimeout(this.timeOuter); | |||||
Toast.success("视频生成成功!"); | Toast.success("视频生成成功!"); | ||||
this.$router.push({ | this.$router.push({ | ||||
path: "/downloadVideo", | path: "/downloadVideo", | ||||
query: { | query: { | ||||
videoDetail: res.data, | |||||
videoId: res.data.videoId, | |||||
}, | }, | ||||
}); | }); | ||||
this.timerOver = true; | this.timerOver = true; | ||||
@@ -281,9 +282,8 @@ export default { | |||||
} else if (res.data.videoStatus == 3) { | } else if (res.data.videoStatus == 3) { | ||||
Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | ||||
this.timerOver = true; | this.timerOver = true; | ||||
setTimeout(() => { | |||||
this.isShowCover = false; | |||||
}, 2000); | |||||
clearTimeout(this.timeOuter); | |||||
this.isShowCover = false; | |||||
return; | return; | ||||
} | } | ||||
} catch (error) { | } catch (error) { | ||||
@@ -345,6 +345,7 @@ export default { | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
this.loadVoice(); | this.loadVoice(); | ||||
this.loadBackGrounnd(); | this.loadBackGrounnd(); | ||||
@@ -353,292 +354,301 @@ export default { | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.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 { | |||||
border: 1px solid #00000046; | |||||
border-radius: 5px; | |||||
width: 207px; | |||||
height: 368.5px; | |||||
.page { | |||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
padding-bottom: 25px; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | } | ||||
} | |||||
.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; | |||||
.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; | |||||
} | } | ||||
.soundList { | |||||
display: flex; | |||||
overflow-x: auto; | |||||
.item { | |||||
.coverImg { | |||||
text-align: center; | |||||
margin: 25px auto; | |||||
img { | |||||
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; | 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%; | |||||
overflow: hidden; | |||||
overflow-x: auto; | |||||
.item { | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
margin-right: 8px; | |||||
transition: all 0.5s; | transition: all 0.5s; | ||||
opacity: 0.9; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&.active { | |||||
border: 1px solid #000; | |||||
padding: 5px; | |||||
.preview { | |||||
width: 35px; | width: 35px; | ||||
height: 35px; | height: 35px; | ||||
opacity: 1; | |||||
margin-right: 10px; | |||||
flex-shrink: 0; | |||||
border: 1px solid #00000036; | |||||
border-radius: 50% 50%; | |||||
overflow: hidden; | |||||
transition: all 0.5s; | |||||
opacity: 0.9; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&.active { | |||||
border: 1px solid #000; | |||||
width: 35px; | |||||
height: 35px; | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.tag { | |||||
min-width: 40px; | |||||
} | |||||
&.active { | |||||
border-radius: 5px; | |||||
background-color: #00000025; | |||||
} | } | ||||
} | } | ||||
.tag { | |||||
min-width: 40px; | |||||
// 隐藏滚动条 | |||||
&::-webkit-scrollbar { | |||||
width: 0 !important; | |||||
} | } | ||||
&.active { | |||||
border-radius: 5px; | |||||
background-color: #00000025; | |||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | } | ||||
} | } | ||||
// 隐藏滚动条 | |||||
&::-webkit-scrollbar { | |||||
width: 0 !important; | |||||
} | |||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | |||||
} | |||||
} | |||||
.backGround { | |||||
position: relative; | |||||
width: 80%; | |||||
border: 1px solid #0068b7; | |||||
padding: 12.5px; | |||||
padding-bottom: 8px; | |||||
border-radius: 5px; | |||||
margin: auto; | |||||
.select { | |||||
position: absolute; | |||||
top: -7px; | |||||
left: 10px; | |||||
font-size: 10px; | |||||
color: #0068b7; | |||||
background-color: #fff; | |||||
padding: 0 5px; | |||||
} | } | ||||
.backGroundList { | |||||
display: flex; | |||||
overflow-x: auto; | |||||
.item { | |||||
.backGround { | |||||
position: relative; | |||||
width: 80%; | |||||
border: 1px solid #0068b7; | |||||
padding: 12.5px; | |||||
padding-bottom: 8px; | |||||
border-radius: 5px; | |||||
margin: auto; | |||||
.select { | |||||
position: absolute; | |||||
top: -7px; | |||||
left: 10px; | |||||
font-size: 10px; | |||||
color: #0068b7; | |||||
background-color: #fff; | |||||
padding: 0 5px; | |||||
} | |||||
.backGroundList { | |||||
display: flex; | 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%; | |||||
overflow: hidden; | |||||
overflow-x: auto; | |||||
.item { | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
margin-right: 8px; | |||||
transition: all 0.5s; | transition: all 0.5s; | ||||
opacity: 0.9; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&.active { | |||||
border: 1px solid #000; | |||||
padding: 5px; | |||||
.preview { | |||||
width: 35px; | width: 35px; | ||||
height: 35px; | height: 35px; | ||||
opacity: 1; | |||||
margin-right: 10px; | |||||
flex-shrink: 0; | |||||
border: 1px solid #00000036; | |||||
border-radius: 50% 50%; | |||||
overflow: hidden; | |||||
transition: all 0.5s; | |||||
opacity: 0.9; | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&.active { | |||||
border: 1px solid #000; | |||||
width: 35px; | |||||
height: 35px; | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.tag { | |||||
min-width: 40px; | |||||
} | |||||
&.active { | |||||
border-radius: 5px; | |||||
background-color: #00000025; | |||||
} | } | ||||
} | } | ||||
.tag { | |||||
min-width: 40px; | |||||
// 隐藏滚动条 | |||||
&::-webkit-scrollbar { | |||||
width: 0 !important; | |||||
} | } | ||||
&.active { | |||||
border-radius: 5px; | |||||
background-color: #00000025; | |||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | } | ||||
} | } | ||||
// 隐藏滚动条 | |||||
&::-webkit-scrollbar { | |||||
width: 0 !important; | |||||
} | |||||
.instead { | |||||
position: relative; | |||||
left: 38%; | |||||
height: 45px; | |||||
line-height: 45px; | |||||
} | |||||
} | } | ||||
} | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 16px; | |||||
margin-bottom: 30px; | |||||
div { | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | |||||
line-height: 42px; | |||||
text-align: center; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | |||||
background-color: #d2d2d2; | |||||
&.next { | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 16px; | |||||
margin-bottom: 30px; | |||||
div { | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | color: #fff; | ||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
line-height: 42px; | |||||
text-align: center; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | |||||
background-color: #d2d2d2; | |||||
&.next { | |||||
color: #fff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | |||||
@keyframes rotation { | |||||
from { | |||||
-webkit-transform: rotate(0deg); | |||||
} | |||||
to { | |||||
-webkit-transform: rotate(360deg); | |||||
} | |||||
} | |||||
.coverUp { | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
opacity: 0; | |||||
text-align: center; | |||||
transition: all 0.3s; | |||||
.inside { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
width: 80%; | |||||
transform: translate(-50%, -50%); | |||||
img { | |||||
width: 75px; | |||||
height: 75px; | |||||
animation: rotation 2s linear infinite; | |||||
margin-bottom: 10px; | |||||
@keyframes rotation { | |||||
from { | |||||
-webkit-transform: rotate(0deg); | |||||
} | } | ||||
.generating { | |||||
font-size: 18px; | |||||
color: #fff; | |||||
margin-bottom: 53px; | |||||
} | |||||
.alert { | |||||
font-size: 11.5px; | |||||
color: #fff; | |||||
to { | |||||
-webkit-transform: rotate(360deg); | |||||
} | } | ||||
} | } | ||||
&.active { | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #00000077; | |||||
z-index: 99999; | |||||
opacity: 1; | |||||
} | |||||
} | |||||
.messageCover { | |||||
position: fixed; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #00000091; | |||||
transition: all 0.3s; | |||||
opacity: 0; | |||||
z-index: -1; | |||||
.message { | |||||
.coverUp { | |||||
position: fixed; | position: fixed; | ||||
top: 53%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
width: 272px; | |||||
height: 290px; | |||||
border-radius: 5px; | |||||
background-color: #fff; | |||||
top: 0; | |||||
left: 0; | |||||
opacity: 0; | |||||
text-align: center; | text-align: center; | ||||
transition: all 0.3s; | transition: all 0.3s; | ||||
.inside { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 50%; | |||||
width: 80%; | |||||
transform: translate(-50%, -50%); | |||||
.connect { | |||||
font-size: 12px; | |||||
margin: 19px 0 10px 0; | |||||
img { | |||||
width: 75px; | |||||
height: 75px; | |||||
animation: rotation 2s linear infinite; | |||||
margin-bottom: 10px; | |||||
} | |||||
.generating { | |||||
font-size: 18px; | |||||
color: #fff; | |||||
margin-bottom: 53px; | |||||
} | |||||
.alert { | |||||
font-size: 11.5px; | |||||
color: #fff; | |||||
} | |||||
} | } | ||||
.qrCode { | |||||
width: 203px; | |||||
height: 213px; | |||||
background-color: #ffffff; | |||||
border-radius: 5px; | |||||
border: solid 1px #595959; | |||||
margin: auto; | |||||
&.active { | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #00000077; | |||||
z-index: 150; | |||||
opacity: 1; | |||||
} | } | ||||
.phoneNum { | |||||
float: left; | |||||
font-size: 11px; | |||||
margin-top: 3px; | |||||
margin-left: 34px; | |||||
} | |||||
.messageCover { | |||||
position: fixed; | |||||
top: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #00000091; | |||||
transition: all 0.3s; | |||||
opacity: 0; | |||||
z-index: -1; | |||||
.message { | |||||
position: fixed; | |||||
top: 53%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
width: 272px; | |||||
height: 290px; | |||||
border-radius: 5px; | |||||
background-color: #fff; | |||||
text-align: center; | |||||
transition: all 0.3s; | |||||
.connect { | |||||
font-size: 12px; | |||||
margin: 19px 0 10px 0; | |||||
} | |||||
.qrCode { | |||||
width: 203px; | |||||
height: 213px; | |||||
background-color: #ffffff; | |||||
border-radius: 5px; | |||||
border: solid 1px #595959; | |||||
margin: auto; | |||||
} | |||||
.phoneNum { | |||||
float: left; | |||||
font-size: 11px; | |||||
margin-top: 3px; | |||||
margin-left: 34px; | |||||
} | |||||
.close { | |||||
position: absolute; | |||||
top: 8px; | |||||
right: 15px; | |||||
font-size: 18px; | |||||
color: #000; | |||||
} | |||||
} | } | ||||
.close { | |||||
.clickToClose { | |||||
position: absolute; | position: absolute; | ||||
top: 8px; | |||||
right: 15px; | |||||
font-size: 18px; | |||||
color: #000; | |||||
font-size: 14px; | |||||
color: #fff; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
bottom: 16%; | |||||
} | |||||
&.active { | |||||
z-index: 100; | |||||
opacity: 1; | |||||
} | } | ||||
} | |||||
.clickToClose { | |||||
position: absolute; | |||||
font-size: 14px; | |||||
color: #fff; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
bottom: 16%; | |||||
} | |||||
&.active { | |||||
z-index: 999; | |||||
opacity: 1; | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <div id="top"></div> | ||||
<HeadTop /> | <HeadTop /> | ||||
<div class="title">录入文案</div> | <div class="title">录入文案</div> | ||||
@@ -44,6 +44,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
paperwork: "", | paperwork: "", | ||||
title: "", | title: "", | ||||
modelDetail: {}, | modelDetail: {}, | ||||
@@ -129,91 +130,102 @@ export default { | |||||
this.saveID = this.$route.query.saveID; | this.saveID = this.$route.query.saveID; | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
}, | }, | ||||
}; | }; | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.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; | |||||
} | |||||
.content { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 15px; | |||||
.img { | |||||
img { | |||||
width: 76px; | |||||
height: 135.5px; | |||||
border: 1px solid #999999; | |||||
border-radius: 8px; | |||||
} | |||||
.title { | |||||
font-size: 15px; | |||||
margin-top: 15px; | |||||
} | |||||
.page { | |||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
padding-bottom: 25px; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | } | ||||
.textarea { | |||||
position: relative; | |||||
.title { | |||||
text-align: center; | text-align: center; | ||||
margin-bottom: 60px; | |||||
textarea { | |||||
width: 250px; | |||||
height: 367.5px; | |||||
border: 1px solid #00000080; | |||||
border-radius: 8px; | |||||
} | |||||
.limit { | |||||
position: absolute; | |||||
left: 0px; | |||||
bottom: -15px; | |||||
width: 70px; | |||||
font-size: 16px; | |||||
font-weight: 600; | |||||
border-bottom: 3px solid #0068b7; | |||||
padding-bottom: 7px; | |||||
margin: 10px auto; | |||||
margin-bottom: 25px; | |||||
} | |||||
.content { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 15px; | |||||
.img { | |||||
img { | |||||
width: 76px; | |||||
height: 135.5px; | |||||
border: 1px solid #999999; | |||||
border-radius: 8px; | |||||
} | |||||
.title { | |||||
font-size: 15px; | |||||
margin-top: 15px; | |||||
} | |||||
} | } | ||||
.try { | |||||
position: absolute; | |||||
left: 20px; | |||||
bottom: -35px; | |||||
width: 80px; | |||||
height: 25px; | |||||
line-height: 25px; | |||||
.textarea { | |||||
position: relative; | |||||
text-align: center; | text-align: center; | ||||
color: #0000004b; | |||||
border: 1px solid #0000004b; | |||||
border-radius: 5px; | |||||
margin-bottom: 60px; | |||||
textarea { | |||||
width: 250px; | |||||
height: 367.5px; | |||||
border: 1px solid #00000080; | |||||
border-radius: 8px; | |||||
} | |||||
.limit { | |||||
position: absolute; | |||||
left: 0px; | |||||
bottom: -15px; | |||||
} | |||||
.try { | |||||
position: absolute; | |||||
left: 20px; | |||||
bottom: -35px; | |||||
width: 80px; | |||||
height: 25px; | |||||
line-height: 25px; | |||||
text-align: center; | |||||
color: #0000004b; | |||||
border: 1px solid #0000004b; | |||||
border-radius: 5px; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 50px; | |||||
margin-bottom: 30px; | |||||
div { | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | |||||
line-height: 42px; | |||||
text-align: center; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | |||||
background-color: #d2d2d2; | |||||
&.next { | |||||
.bottomBtn { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 32.5px; | |||||
margin-top: 50px; | |||||
margin-bottom: 30px; | |||||
div { | |||||
width: 142px; | |||||
height: 42px; | |||||
color: #fff; | color: #fff; | ||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
line-height: 42px; | |||||
text-align: center; | |||||
border: 1px solid #d2d2d2; | |||||
border-radius: 7px; | |||||
background-color: #d2d2d2; | |||||
&.next { | |||||
color: #fff; | |||||
border: 1px solid #0068b7; | |||||
background-color: #0068b7; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | |||||
.van-popup { | |||||
background-color: #ffffff00 !important; | |||||
.van-popup { | |||||
background-color: #ffffff00 !important; | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="page"> | |||||
<div :class="inPage ? 'page active' : 'page'"> | |||||
<div id="top"></div> | <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="" /> | ||||
@@ -28,8 +28,8 @@ | |||||
<div class="videoName"> | <div class="videoName"> | ||||
{{ item.title || "暂无" }} | {{ item.title || "暂无" }} | ||||
</div> | </div> | ||||
<div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
<div class="createTime">视频容量{{ "46.5Mb" }}</div> | |||||
<div class="createTime">视频时长:{{ item.videoTime }}</div> | |||||
<div class="createTime">视频容量:{{ "46.5Mb" }}</div> | |||||
<div class="createTime"> | <div class="createTime"> | ||||
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | ||||
</div> | </div> | ||||
@@ -41,7 +41,7 @@ | |||||
<van-pagination | <van-pagination | ||||
v-model="currentPage" | v-model="currentPage" | ||||
:total-items="total" | :total-items="total" | ||||
:items-per-page="3" | |||||
:items-per-page="4" | |||||
@change="pageChange" | @change="pageChange" | ||||
/> | /> | ||||
<div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | ||||
@@ -55,7 +55,7 @@ import { mapState, mapActions } from "vuex"; | |||||
import { Toast } from "vant"; | import { Toast } from "vant"; | ||||
import timestampToTime from "../../utils/timestampToTime"; | import timestampToTime from "../../utils/timestampToTime"; | ||||
import scrollToID from "../../utils/scrollToID"; | import scrollToID from "../../utils/scrollToID"; | ||||
import { getVideoList } from "../../api/myPage"; | |||||
import { getVideoList, doGetVideoDetialById } from "../../api/myPage"; | |||||
Vue.use(Toast); | Vue.use(Toast); | ||||
export default { | export default { | ||||
@@ -64,9 +64,11 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
inPage: false, | |||||
videoList: [], | videoList: [], | ||||
currentPage: 1, | currentPage: 1, | ||||
pageSize: 5, | |||||
pageSize: 4, | |||||
prePage: "", | |||||
total: "", | total: "", | ||||
}; | }; | ||||
}, | }, | ||||
@@ -107,7 +109,7 @@ export default { | |||||
this.$router.push({ | this.$router.push({ | ||||
path: "/downloadVideo", | path: "/downloadVideo", | ||||
query: { | query: { | ||||
videoDetail: item, | |||||
videoId: item.videoId, | |||||
}, | }, | ||||
}); | }); | ||||
} else if (status == 3) { | } else if (status == 3) { | ||||
@@ -126,11 +128,22 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
async getVideoDetialById(id) { | |||||
try { | |||||
const res = await doGetVideoDetialById(id); | |||||
console.log(res, "通过视频id获取视频详情"); | |||||
} catch (error) { | |||||
console.log(error, "error"); | |||||
Toast.fail(error.message); | |||||
} | |||||
}, | |||||
goCreateNew() { | goCreateNew() { | ||||
this.$router.push("/chooseModel"); | this.$router.push("/chooseModel"); | ||||
}, | }, | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.inPage = true; | |||||
scrollToID("top"); | scrollToID("top"); | ||||
}, | }, | ||||
created() { | created() { | ||||
@@ -141,6 +154,14 @@ export default { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
transform: translateX(100%); | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
padding-bottom: 25px; | |||||
&.active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | |||||
.logoBox { | .logoBox { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
@@ -255,9 +276,9 @@ export default { | |||||
} | } | ||||
} | } | ||||
.goAdd { | .goAdd { | ||||
position: fixed; | |||||
bottom: 15px; | |||||
left: 50%; | |||||
position: sticky; | |||||
bottom: 25px; | |||||
left: 10px; | |||||
width: 300px; | width: 300px; | ||||
height: 42px; | height: 42px; | ||||
line-height: 42px; | line-height: 42px; | ||||
@@ -268,6 +289,8 @@ export default { | |||||
background-color: #0068b7; | background-color: #0068b7; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
box-shadow: #60606082 1px 1px 1px 1px; | box-shadow: #60606082 1px 1px 1px 1px; | ||||
margin-top: 25px; | |||||
margin-left: 190px; | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -1,4 +1,4 @@ | |||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
module.exports = { | module.exports = { | ||||
css: { | css: { | ||||
@@ -47,18 +47,18 @@ 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 | |||||
}, | |||||
}, | |||||
}), | |||||
], | |||||
} | |||||
// configureWebpack: { | |||||
// plugins: [ | |||||
// //打包环境去掉console.log | |||||
// new UglifyJsPlugin({ | |||||
// uglifyOptions: { | |||||
// compress: { | |||||
// drop_console: true, //注释console | |||||
// drop_debugger: true, //注释debugger | |||||
// pure_funcs: ['console.log'], //移除console.log | |||||
// }, | |||||
// }, | |||||
// }), | |||||
// ], | |||||
// } | |||||
} | } |
@@ -6403,11 +6403,6 @@ 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" | ||||
@@ -7255,26 +7250,6 @@ 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" | ||||