| @@ -1,7 +1,6 @@ | |||
| .DS_Store | |||
| node_modules | |||
| /dist | |||
| dist | |||
| # local env files | |||
| .env.local | |||
| @@ -25,7 +25,6 @@ | |||
| "@vue/cli-plugin-vuex": "~4.5.13", | |||
| "@vue/cli-service": "~4.5.13", | |||
| "node-sass": "^4.14.1", | |||
| "uglifyjs-webpack-plugin": "^2.2.0", | |||
| "vue-template-compiler": "^2.6.11" | |||
| } | |||
| } | |||
| } | |||
| @@ -1,18 +1,21 @@ | |||
| <!DOCTYPE html> | |||
| <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> | |||
| <div id="app"> | |||
| <transition name="app" mode="out-in"> | |||
| <router-view></router-view> | |||
| </transition> | |||
| <router-view></router-view> | |||
| <tail /> | |||
| </div> | |||
| </template> | |||
| @@ -18,6 +16,7 @@ export default { | |||
| return {}; | |||
| }, | |||
| }; | |||
| // "uglifyjs-webpack-plugin": "^2.2.0", | |||
| </script> | |||
| <style lang="scss"> | |||
| @@ -26,6 +25,7 @@ p { | |||
| margin: 0 0; | |||
| padding: 0 0; | |||
| } | |||
| input { | |||
| background: 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> | |||
| <div class="page"> | |||
| <div class="pages"> | |||
| <div class="logoBox"> | |||
| <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" /> | |||
| <div class="userInfo"> | |||
| @@ -71,7 +71,11 @@ export default { | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| .pages { | |||
| position: sticky; | |||
| top: 0; | |||
| background-color: #fff; | |||
| z-index: 99; | |||
| .logoBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div class="Box"> | |||
| <div :class="inPage ? 'Box active' : 'Box'"> | |||
| <div id="top"></div> | |||
| <top /> | |||
| <div class="topBox"> | |||
| @@ -411,6 +411,7 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| userName: "", | |||
| phone: "", | |||
| email: "", | |||
| @@ -730,6 +731,7 @@ export default { | |||
| el: ".swiper-scrollbar", | |||
| }, | |||
| }); | |||
| this.inPage = true; | |||
| }, | |||
| }; | |||
| </script> | |||
| @@ -742,6 +744,7 @@ export default { | |||
| transform: translateY(0); | |||
| } | |||
| } | |||
| .contentBox { | |||
| width: 90%; | |||
| background-color: rgba(0, 0, 0, 0.5); | |||
| @@ -816,6 +819,13 @@ export default { | |||
| .Box { | |||
| width: 100%; | |||
| overflow: hidden; | |||
| transform: translateX(100%); | |||
| opacity: 0; | |||
| transition: all 0.3s; | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| } | |||
| .topBox { | |||
| width: 100%; | |||
| @@ -12,9 +12,7 @@ import ElementUI from 'element-ui'; //引入js | |||
| import 'element-ui/lib/theme-chalk/index.css';//引入css | |||
| Vue.use(ElementUI); | |||
| Vue.use(Vant); | |||
| Vue.use(Vant) | |||
| Vue.config.productionTip = false | |||
| Vue.prototype.$axios = axios | |||
| @@ -30,19 +30,19 @@ request.interceptors.request.use( | |||
| // 响应拦截器 | |||
| request.interceptors.response.use( | |||
| function (response) { | |||
| let code = response.data.code | |||
| // 弹出错误 | |||
| if (response.data.code != 200) { | |||
| if (code != 200) { | |||
| // 当token过期或损坏时 | |||
| if (response.data.code == 1052) { | |||
| if (code == 1052) { | |||
| router.push("/login"); | |||
| Toast.fail("登录过期,请重新登录!"); | |||
| 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("系统异常,请稍后再试"); | |||
| return Promise.reject(response.data) | |||
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div class="page"> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <div class="logoBox" @click="go('/')"> | |||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | |||
| @@ -117,6 +117,7 @@ export default { | |||
| data() { | |||
| return { | |||
| codeInfo: "获取验证码", | |||
| inPage: false, | |||
| loginType: 1, | |||
| // 短信验证码登录 | |||
| form: { | |||
| @@ -312,6 +313,7 @@ export default { | |||
| this.form.phone = phoneValue ? phoneValue : ""; | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| }; | |||
| @@ -319,6 +321,13 @@ export default { | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| transform: translateX(100%); | |||
| opacity: 0; | |||
| transition: all 0.3s; | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| .logoBox { | |||
| // margin-top: 10px; | |||
| margin-left: 5px; | |||
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <!-- <div class="chooseModel"> | |||
| @@ -64,6 +64,7 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| type: 2, | |||
| currentId: "", | |||
| modeList: [], // 模板列表 | |||
| @@ -162,6 +163,7 @@ export default { | |||
| }, | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| created() { | |||
| @@ -171,132 +173,140 @@ export default { | |||
| </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: 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; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 0 25px; | |||
| margin-bottom: 20px; | |||
| width: 350px; | |||
| height: 32px; | |||
| margin: auto; | |||
| margin-top: 15px; | |||
| margin-bottom: 15px; | |||
| 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; | |||
| transition: all 0.3s; | |||
| border: 1px solid #46464661; | |||
| &.active { | |||
| background-color: #00ccff; | |||
| 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; | |||
| font-size: 14px; | |||
| font-weight: 600; | |||
| background-color: #00000042; | |||
| padding: 3px 5px; | |||
| border: 1px solid #bfbfbf; | |||
| background-color: #bfbfbf; | |||
| border-radius: 5px; | |||
| text-align: center; | |||
| 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 { | |||
| 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; | |||
| .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> | |||
| @@ -1,22 +1,24 @@ | |||
| <template> | |||
| <div> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div class="video"> | |||
| <video | |||
| <!-- <video | |||
| :src=" | |||
| 'https://smapitest.malls.iformall.com/myVideo/' + | |||
| videoDetail.videoPath | |||
| " | |||
| /> | |||
| /> --> | |||
| <div id="J_prismPlayer" /> | |||
| <div class="desc"> | |||
| 视频已保存到 <span @click="go('/myPage')">我的视频作品</span> | |||
| </div> | |||
| <img src="../../assets/img/play.png" @click="play" /> | |||
| <!-- <img src="../../assets/img/play.png" @click="play" /> --> | |||
| </div> | |||
| <div class="bottomBtn"> | |||
| <div class="back" @click="backToIndex">返回首页</div> | |||
| <div class="next" @click="play">下载视频</div> | |||
| <a class="next" @click="download">下载视频</a> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| @@ -24,10 +26,12 @@ | |||
| <script> | |||
| import Vue from "vue"; | |||
| 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"; | |||
| import deepCopy from "../../utils/deepCopy"; | |||
| import { doGetVideoDetialById } from "../../api/downloadVideo"; | |||
| Vue.use(Toast); | |||
| export default { | |||
| @@ -36,7 +40,10 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| videoDetail: {}, | |||
| coverUrl: "", | |||
| videoUrl: "", | |||
| }; | |||
| }, | |||
| computed: { | |||
| @@ -51,83 +58,133 @@ export default { | |||
| go(url) { | |||
| this.$router.push(url); | |||
| }, | |||
| backToIndex() { | |||
| 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() { | |||
| this.videoDetail = this.$route.query.videoDetail; | |||
| console.log(this.videoDetail); | |||
| this.videoId = this.$route.query.videoId; | |||
| this.getVideoDetail(this.videoId); | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| }; | |||
| </script> | |||
| <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; | |||
| 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; | |||
| 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> | |||
| <div> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div class="title">生成视频</div> | |||
| @@ -106,10 +106,12 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| isShowCover: false, | |||
| isShowMessageCover: false, | |||
| show: false, | |||
| voiceAlert: "暂无可用声音", | |||
| timeOuter: "", | |||
| soundIndex: "", | |||
| backGroundIndex: "", | |||
| coverImg: "", | |||
| @@ -210,7 +212,7 @@ export default { | |||
| console.log(res, "生成视频"); | |||
| Toast.success("提交成功!"); | |||
| // *#06# | |||
| setTimeout(() => { | |||
| this.timeOuter = setTimeout(() => { | |||
| this.isShowCover = true; | |||
| }, 2000); | |||
| const timer = setInterval(() => { | |||
| @@ -266,14 +268,13 @@ export default { | |||
| const res = await doFindVideoById(id); | |||
| console.log(res, "通过id获取视频"); | |||
| if (res.data.videoStatus == 2) { | |||
| setTimeout(() => { | |||
| this.isShowCover = false; | |||
| }, 2000); | |||
| this.isShowCover = false; | |||
| clearTimeout(this.timeOuter); | |||
| Toast.success("视频生成成功!"); | |||
| this.$router.push({ | |||
| path: "/downloadVideo", | |||
| query: { | |||
| videoDetail: res.data, | |||
| videoId: res.data.videoId, | |||
| }, | |||
| }); | |||
| this.timerOver = true; | |||
| @@ -281,9 +282,8 @@ export default { | |||
| } else if (res.data.videoStatus == 3) { | |||
| Toast.fail(`视频生成失败!失败原因:${res.data.videoMsg}`); | |||
| this.timerOver = true; | |||
| setTimeout(() => { | |||
| this.isShowCover = false; | |||
| }, 2000); | |||
| clearTimeout(this.timeOuter); | |||
| this.isShowCover = false; | |||
| return; | |||
| } | |||
| } catch (error) { | |||
| @@ -345,6 +345,7 @@ export default { | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| this.loadVoice(); | |||
| this.loadBackGrounnd(); | |||
| @@ -353,292 +354,301 @@ export default { | |||
| </script> | |||
| <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; | |||
| 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; | |||
| opacity: 0.9; | |||
| img { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| &.active { | |||
| border: 1px solid #000; | |||
| padding: 5px; | |||
| .preview { | |||
| width: 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; | |||
| 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; | |||
| opacity: 0.9; | |||
| img { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| &.active { | |||
| border: 1px solid #000; | |||
| padding: 5px; | |||
| .preview { | |||
| width: 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; | |||
| 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; | |||
| 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; | |||
| 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; | |||
| 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> | |||
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <div class="title">录入文案</div> | |||
| @@ -44,6 +44,7 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| paperwork: "", | |||
| title: "", | |||
| modelDetail: {}, | |||
| @@ -129,91 +130,102 @@ export default { | |||
| this.saveID = this.$route.query.saveID; | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| }; | |||
| </script> | |||
| <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; | |||
| 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; | |||
| 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; | |||
| 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> | |||
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div class="page"> | |||
| <div :class="inPage ? 'page active' : 'page'"> | |||
| <div id="top"></div> | |||
| <HeadTop /> | |||
| <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" /> | |||
| @@ -28,8 +28,8 @@ | |||
| <div class="videoName"> | |||
| {{ item.title || "暂无" }} | |||
| </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"> | |||
| 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} | |||
| </div> | |||
| @@ -41,7 +41,7 @@ | |||
| <van-pagination | |||
| v-model="currentPage" | |||
| :total-items="total" | |||
| :items-per-page="3" | |||
| :items-per-page="4" | |||
| @change="pageChange" | |||
| /> | |||
| <div class="goAdd" @click="goCreateNew">+ 创作新作品</div> | |||
| @@ -55,7 +55,7 @@ import { mapState, mapActions } from "vuex"; | |||
| import { Toast } from "vant"; | |||
| import timestampToTime from "../../utils/timestampToTime"; | |||
| import scrollToID from "../../utils/scrollToID"; | |||
| import { getVideoList } from "../../api/myPage"; | |||
| import { getVideoList, doGetVideoDetialById } from "../../api/myPage"; | |||
| Vue.use(Toast); | |||
| export default { | |||
| @@ -64,9 +64,11 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| inPage: false, | |||
| videoList: [], | |||
| currentPage: 1, | |||
| pageSize: 5, | |||
| pageSize: 4, | |||
| prePage: "", | |||
| total: "", | |||
| }; | |||
| }, | |||
| @@ -107,7 +109,7 @@ export default { | |||
| this.$router.push({ | |||
| path: "/downloadVideo", | |||
| query: { | |||
| videoDetail: item, | |||
| videoId: item.videoId, | |||
| }, | |||
| }); | |||
| } 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() { | |||
| this.$router.push("/chooseModel"); | |||
| }, | |||
| }, | |||
| mounted() { | |||
| this.inPage = true; | |||
| scrollToID("top"); | |||
| }, | |||
| created() { | |||
| @@ -141,6 +154,14 @@ export default { | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| transform: translateX(100%); | |||
| opacity: 0; | |||
| transition: all 0.3s; | |||
| padding-bottom: 25px; | |||
| &.active { | |||
| opacity: 1; | |||
| transform: translateX(0); | |||
| } | |||
| .logoBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| @@ -255,9 +276,9 @@ export default { | |||
| } | |||
| } | |||
| .goAdd { | |||
| position: fixed; | |||
| bottom: 15px; | |||
| left: 50%; | |||
| position: sticky; | |||
| bottom: 25px; | |||
| left: 10px; | |||
| width: 300px; | |||
| height: 42px; | |||
| line-height: 42px; | |||
| @@ -268,6 +289,8 @@ export default { | |||
| background-color: #0068b7; | |||
| border-radius: 5px; | |||
| box-shadow: #60606082 1px 1px 1px 1px; | |||
| margin-top: 25px; | |||
| margin-left: 190px; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -1,4 +1,4 @@ | |||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
| // const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||
| module.exports = { | |||
| css: { | |||
| @@ -47,18 +47,18 @@ 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 | |||
| }, | |||
| }, | |||
| }), | |||
| ], | |||
| } | |||
| // 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" | |||
| 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" | |||
| @@ -7255,26 +7250,6 @@ 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" | |||