瀏覽代碼

页面进入过渡动画

release
HolyKnightIX 2 年之前
父節點
當前提交
6e4010a35b
共有 18 個文件被更改,包括 721 次插入587 次删除
  1. +1
    -2
      .gitignore
  2. +1
    -2
      package.json
  3. +19
    -16
      public/index.html
  4. +3
    -3
      src/App.vue
  5. +13
    -0
      src/api/downloadVideo.js
  6. +12
    -0
      src/api/myPage.js
  7. +6
    -2
      src/components/common/head.vue
  8. +11
    -1
      src/components/home/home.vue
  9. +1
    -3
      src/main.js
  10. +8
    -8
      src/utils/request.js
  11. +10
    -1
      src/views/login/login.vue
  12. +116
    -106
      src/views/model/chooseModel.vue
  13. +121
    -64
      src/views/model/downloadVideo.vue
  14. +268
    -258
      src/views/model/generateVideo.vue
  15. +83
    -71
      src/views/model/getPaper.vue
  16. +33
    -10
      src/views/myPage/myPage.vue
  17. +15
    -15
      vue.config.js
  18. +0
    -25
      yarn.lock

+ 1
- 2
.gitignore 查看文件

@@ -1,7 +1,6 @@
.DS_Store
node_modules
/dist

dist

# local env files
.env.local


+ 1
- 2
package.json 查看文件

@@ -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"
}
}
}

+ 19
- 16
public/index.html 查看文件

@@ -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>

+ 3
- 3
src/App.vue 查看文件

@@ -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;


+ 13
- 0
src/api/downloadVideo.js 查看文件

@@ -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
- 0
src/api/myPage.js 查看文件

@@ -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',
})
}


+ 6
- 2
src/components/common/head.vue 查看文件

@@ -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;


+ 11
- 1
src/components/home/home.vue 查看文件

@@ -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%;


+ 1
- 3
src/main.js 查看文件

@@ -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


+ 8
- 8
src/utils/request.js 查看文件

@@ -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)



+ 10
- 1
src/views/login/login.vue 查看文件

@@ -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;


+ 116
- 106
src/views/model/chooseModel.vue 查看文件

@@ -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>

+ 121
- 64
src/views/model/downloadVideo.vue 查看文件

@@ -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;
}
}
}
}


+ 268
- 258
src/views/model/generateVideo.vue 查看文件

@@ -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>

+ 83
- 71
src/views/model/getPaper.vue 查看文件

@@ -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>

+ 33
- 10
src/views/myPage/myPage.vue 查看文件

@@ -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>

+ 15
- 15
vue.config.js 查看文件

@@ -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
// },
// },
// }),
// ],
// }
}

+ 0
- 25
yarn.lock 查看文件

@@ -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"


Loading…
取消
儲存