浏览代码

样式修改

release
HolyKnightIX 2 年前
父节点
当前提交
dc488fcc37
共有 7 个文件被更改,包括 473 次插入172 次删除
  1. 二进制
      src/assets/img/BG-Page.png
  2. +84
    -3
      src/views/login/login.vue
  3. +251
    -26
      src/views/model/chooseModel.vue
  4. +21
    -10
      src/views/model/downloadVideo.vue
  5. +74
    -110
      src/views/model/getPaper.vue
  6. +1
    -1
      src/views/model/modelDetail.vue
  7. +42
    -22
      src/views/myPage/myPage.vue

二进制
src/assets/img/BG-Page.png 查看文件

之前 之后
宽度: 935  |  高度: 217  |  大小: 333 KiB

+ 84
- 3
src/views/login/login.vue 查看文件

@@ -4,12 +4,14 @@
<img src="../../assets/img/logoh.png" alt class="logo" /> <img src="../../assets/img/logoh.png" alt class="logo" />
<!-- <div class="logoTitle">metavatar</div> --> <!-- <div class="logoTitle">metavatar</div> -->
</div> </div>
<div class="loginBox">

<!-- 短信验证码登录 -->
<div class="loginBox" v-if="isCodeLogin">
<div class="welcome">登录邃芒</div> <div class="welcome">登录邃芒</div>
<el-form ref="form" :rules="rules" :model="form"> <el-form ref="form" :rules="rules" :model="form">
<el-form-item class="phone" prop="phone"> <el-form-item class="phone" prop="phone">
<el-input class="phoneInput" v-model="form.phone"></el-input> <el-input class="phoneInput" v-model="form.phone"></el-input>
<div class="inputPhone">请输入手机号</div>
<div class="inputPhone">请输入您的手机号</div>
<el-button class="getCode" type="text" @click="getCode">{{ <el-button class="getCode" type="text" @click="getCode">{{
codeInfo codeInfo
}}</el-button> }}</el-button>
@@ -24,7 +26,46 @@
<div class="inputCode">请输入短信验证码</div> <div class="inputCode">请输入短信验证码</div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<button class="submitBtn" @click.native="login">登录/注册</button>
<button class="submitBtn" @click="login">登录/注册</button>
</el-form-item>
</el-form>
</div>

<!-- 用户名密码登录 -->
<div class="loginBox" v-else>
<div class="welcome">登录邃芒</div>
<el-form ref="form" :rules="rulesII" :model="formII">
<el-form-item class="phone" prop="phone">
<el-input class="phoneInput" v-model="formII.phone"></el-input>
<div class="inputPhone">请输入您的手机号</div>
<!-- <el-button class="getCode" type="text" @click="getCode">{{
codeInfo
}}</el-button> -->
</el-form-item>
<el-form-item class="code" prop="code">
<el-input
class="codeInput"
v-model="form.pwd"
maxlength="10"
clearable
></el-input>
<div class="inputCode">请输入密码</div>
</el-form-item>

<el-form-item class="code" prop="code">
<el-input
class="codeInput"
v-model="form.code"
maxlength="10"
clearable
></el-input>
<div class="inputCode">请输入验证码</div>
</el-form-item>

<span class="forgetPwd">忘记密码?</span>

<el-form-item>
<button class="submitBtn inside" @click="login">登录/注册</button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@@ -41,6 +82,8 @@ export default {
data() { data() {
return { return {
codeInfo: "获取验证码", codeInfo: "获取验证码",
isCodeLogin: true,
// 短信验证码登录
form: { form: {
phone: "", phone: "",
code: "", code: "",
@@ -65,6 +108,32 @@ export default {
}, },
], ],
}, },
// 账号密码登录
formII: {
phone: "",
pwd: "",
code: "",
},
rulesII: {
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
},
}; };
}, },


@@ -201,6 +270,7 @@ export default {
} }
.getCode { .getCode {
position: absolute; position: absolute;
top: 1px;
right: 10px; right: 10px;
color: #0068b7; color: #0068b7;
} }
@@ -230,10 +300,21 @@ export default {
padding: 9px; padding: 9px;
background-color: #0068b7; background-color: #0068b7;
border-radius: 5px; border-radius: 5px;
&.inside {
top: 10px;
}
}
.forgetPwd {
position: relative;
top: -10px;
float: left;
font-size: 12px;
color: #0068b7;
} }
} }
} }
/deep/ .el-input__inner { /deep/ .el-input__inner {
height: 42px;
border: 1px solid #0068b7; border: 1px solid #0068b7;
} }
</style> </style>

+ 251
- 26
src/views/model/chooseModel.vue 查看文件

@@ -1,13 +1,14 @@
<template> <template>
<div> <div>
<HeadTop /> <HeadTop />
<div class="chooseModel">
<!-- <div class="chooseModel">
<div :class="phase == 1 ? 'active' : ''">选择模板</div> <div :class="phase == 1 ? 'active' : ''">选择模板</div>
<div :class="phase == 2 ? 'active' : ''">录入文案</div> <div :class="phase == 2 ? 'active' : ''">录入文案</div>
<div :class="phase == 3 ? 'active' : ''">合成视频</div> <div :class="phase == 3 ? 'active' : ''">合成视频</div>
</div>
</div> -->


<div v-show="phase == 1" class="choose">
<div class="title">选择模板</div>
<div class="typeOutSide">
<div class="type"> <div class="type">
<div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)">
全部模板 全部模板
@@ -18,23 +19,27 @@
<div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)">
男性模板 男性模板
</div> </div>
<div style="background-color: #46464661">自建模板</div>
</div> </div>
</div>


<div class="choose">
<div class="modeList"> <div class="modeList">
<div <div
class="model" class="model"
:class="currentId == item.id ? 'active' : ''"
v-if="modeList.length >= 1" v-if="modeList.length >= 1"
v-for="(item, index) in modeList" v-for="(item, index) in modeList"
:key="index" :key="index"
@click="goDetail(item.id)"
@click="selectModel(item.id)"
> >
<img :src="item.coverImg" alt="" /> <img :src="item.coverImg" alt="" />
<div class="modelName">{{ item.title }}</div> <div class="modelName">{{ item.title }}</div>
<div class="setPaper">录入文案</div>
</div> </div>
<div class="alt" v-if="modeList.length == 0">暂无可用模板</div> <div class="alt" v-if="modeList.length == 0">暂无可用模板</div>
</div> </div>
</div> </div>
<div class="blank" v-if="modeList.length <= 2"></div>
</div> </div>
</template> </template>


@@ -52,9 +57,95 @@ export default {
}, },
data() { data() {
return { return {
phase: 1,
type: 0, type: 0,
modeList: [],
currentId: "",
// modeList: [
// {
// id: 1,
// salePriceStr: "0",
// priceStr: "0",
// type: 1,
// coverImg:
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg",
// coverPicture:
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]',
// title: "测试1",
// sex: 2,
// age: 10,
// colour: 1,
// salePrice: 0,
// price: 0,
// sendType: 1,
// mouldSmId: "16739389169485046_nVi875Ej",
// status: 1,
// createDate: 1673976448000,
// updateDate: 1673976448000,
// },
// {
// id: 2,
// salePriceStr: "0",
// priceStr: "0",
// type: 1,
// coverImg:
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg",
// coverPicture:
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]',
// title: "测试1",
// sex: 2,
// age: 10,
// colour: 1,
// salePrice: 0,
// price: 0,
// sendType: 1,
// mouldSmId: "16739389169485046_nVi875Ej",
// status: 1,
// createDate: 1673976448000,
// updateDate: 1673976448000,
// },
// {
// id: 3,
// salePriceStr: "0",
// priceStr: "0",
// type: 1,
// coverImg:
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg",
// coverPicture:
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]',
// title: "测试1",
// sex: 2,
// age: 10,
// colour: 1,
// salePrice: 0,
// price: 0,
// sendType: 1,
// mouldSmId: "16739389169485046_nVi875Ej",
// status: 1,
// createDate: 1673976448000,
// updateDate: 1673976448000,
// },
// {
// id: 4,
// salePriceStr: "0",
// priceStr: "0",
// type: 1,
// coverImg:
// "https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg",
// coverPicture:
// '["https://formall.oss-accelerate.aliyuncs.com/789/d9870b5c-7eec-46ea-8d6c-47b5a1fbe6dd.jpg"]',
// title: "测试1",
// sex: 2,
// age: 10,
// colour: 1,
// salePrice: 0,
// price: 0,
// sendType: 1,
// mouldSmId: "16739389169485046_nVi875Ej",
// status: 1,
// createDate: 1673976448000,
// updateDate: 1673976448000,
// },
// ],
modeList: [], // 模板列表
}; };
}, },
computed: { computed: {
@@ -73,10 +164,13 @@ export default {
chooseModel(num) { chooseModel(num) {
this.phase = num; this.phase = num;
}, },

chooseType(num) { chooseType(num) {
this.type = num; this.type = num;
this.getModeList(num); this.getModeList(num);
}, },

// 获取模板列表
getModeList(sex) { getModeList(sex) {
const AccessToken = localStorage.getItem("AccessToken"); const AccessToken = localStorage.getItem("AccessToken");
if (sex == 0) { if (sex == 0) {
@@ -102,13 +196,84 @@ export default {
Toast.fail(err.message); Toast.fail(err.message);
}); });
}, },
goDetail(id) {
this.$router.push({
path: "/modelDetail",
query: {
id: id,

/**
* @description:根据id获取模板详情
* @param {type} id
* @return:data
*/
getModeDetail(id) {
const AccessToken = localStorage.getItem("AccessToken");
this.$axios({
method: "get",
url: `${baseUrl}/api/mouldPatch/findById?id=${id}`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
},
})
.then((res) => {
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");
return;
}
const modelDetail = res.data.data;
this.goSetPaperWork(modelDetail);
})
.catch((err) => {
Toast.fail(err.message);
});
},

/**
* @description:根据模板详情跳转至选择文案
* @param {type}modelDetail
* @event:Go page => setPaperWork
*/
goSetPaperWork(modelDetail) {
const AccessToken = localStorage.getItem("AccessToken");
const data = {
// id: "",
type: 1,
personMouldId: modelDetail.id, //模板id
personMouldSmId: modelDetail.mouldSmId, //模板标识
// voiceMouldId: "",
// voiceMouldId: "",
};
this.$axios({
method: "post",
url: `${baseUrl}/api/userVideo/saveOrUpdate`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
token: AccessToken,
}, },
});
data,
})
.then((res) => {
if (res.data.code == 1052) {
this.$router.push("/login");
Toast.fail("登录过期,请重新登录!");
return;
}
this.$router.push({
path: "/getPaper",
query: {
modelDetail: modelDetail,
},
});
})
.catch((err) => {
Toast.fail(err.message);
});
},

selectModel(id) {
if (this.currentId != id) {
this.currentId = id;
} else {
this.getModeDetail(id);
}
}, },
}, },
created() { created() {
@@ -139,51 +304,111 @@ export default {
} }
} }
} }
.choose {
margin-bottom: 40px;
.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 { .type {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 30px;
padding: 0 25px;
margin-bottom: 20px; margin-bottom: 20px;
div { div {
width: 65px;
height: 25px;
line-height: 25px;
border: 1px solid #797979;
width: 94px;
height: 35px;
line-height: 35px;
color: #fff;
border: 1px solid #bfbfbf;
background-color: #bfbfbf;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
transition: all 0.3s;

&.active { &.active {
color: #fff; color: #fff;
border: 1px solid #9d00ff5d;
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae);
border: 1px solid #0068b7;
background-color: #0068b7;
} }
} }
} }
}

.choose {
margin-bottom: 40px;

.modeList { .modeList {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto; margin: auto;
padding: 0 25px;
padding: 0 10px;

.model { .model {
text-align: center;
position: relative;
text-align: left;
margin-bottom: 25px; margin-bottom: 25px;
border: 1px solid #00000028;
padding: 8px;
border-radius: 8px;
transition: all 0.3s;
opacity: 0.9;
img { img {
width: 150px; width: 150px;
height: 220px; height: 220px;
} }
.modelName { .modelName {
font-size: 15px;
margin-top: 10px;
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(-5px);
box-shadow: #60606082 0px 2px 2px 1px;
opacity: 1;
.setPaper {
opacity: 1;
}
} }
} }
.alt { .alt {
font-size: 18px; font-size: 18px;
margin: 80px auto; margin: 80px auto;
height: 450px;
line-height: 450px;
} }
} }
} }
.blank {
width: 1px;
height: 1px;
margin-bottom: 240px;
}
</style> </style>

+ 21
- 10
src/views/model/downloadVideo.vue 查看文件

@@ -72,12 +72,16 @@ export default {
position: relative; position: relative;
padding: 30px; padding: 30px;
text-align: center; text-align: center;

.title { .title {
font-size: 18px; font-size: 18px;
margin-bottom: 20px; margin-bottom: 20px;
} }
video { video {
width: 80%;
width: 240px;
height: 427px;
border: 0.5px solid #000;
border-radius: 8px;
} }
img { img {
position: absolute; position: absolute;
@@ -86,32 +90,39 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.desc { .desc {
font-size: 16px;
position: relative;
right: 45px;
bottom: 8px;
font-size: 12px;
margin-top: 20px; margin-top: 20px;
span { span {
color: #00ccff;
text-decoration: underline;
color: #0006ff;
} }
} }
} }
.bottomBtn { .bottomBtn {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 75px;
padding: 0 32.5px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
div { div {
width: 100px;
height: 30px;
width: 142px;
height: 42px;
color: #484848; color: #484848;
line-height: 30px;
line-height: 42px;
text-align: center; text-align: center;
border: 1px solid #484848; border: 1px solid #484848;
border-radius: 7px; border-radius: 7px;
&.back {
color: #fff;
border: 1px solid #d2d2d2;
background-color: #d2d2d2;
}
&.next { &.next {
color: #fff; color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
border: 1px solid #0068b7;
background-color: #0068b7;
} }
} }
} }


+ 74
- 110
src/views/model/getPaper.vue 查看文件

@@ -1,30 +1,22 @@
<template> <template>
<div> <div>
<HeadTop /> <HeadTop />
<div class="chooseModel">
<div class="active">选择模板</div>
<div class="active">录入文案</div>
<div>合成视频</div>
</div>
<div class="img">
<img :src="modelDetail.coverImg" />
<div class="title">{{ modelDetail.title }}</div>
</div>
<div class="inpuType">
<div class="text">文字输入</div>
<div class="voice">语音输入</div>
</div>
<div class="textarea">
<input v-model="title" type="text" placeholder="请输入标题" />
<textarea
v-model="paperwork"
cols="55"
rows="15"
placeholder="写点什么"
></textarea>
<div class="limit">15000字 约100分钟</div>
<div class="try">试听</div>
<div class="title">录入文案</div>
<div class="content">
<div class="img">
<img :src="modelDetail.coverImg" />
</div>
<div class="textarea">
<textarea
v-model="paperwork"
cols="55"
rows="15"
placeholder="写点什么"
></textarea>
<div class="limit">已录入150字 约1分钟</div>
</div>
</div> </div>

<div class="bottomBtn"> <div class="bottomBtn">
<div class="back" @click="back">上一步</div> <div class="back" @click="back">上一步</div>
<div class="next" @click="goNext">下一步</div> <div class="next" @click="goNext">下一步</div>
@@ -112,7 +104,7 @@ export default {
// id: "", // id: "",
type: 1, type: 1,
personMouldId: this.modelDetail.id, //模板id personMouldId: this.modelDetail.id, //模板id
personMouldPath: this.modelDetail.mouldPath, //模板标识
personMouldSmId: this.modelDetail.mouldSmId, //模板标识
paperwork: this.paperwork, paperwork: this.paperwork,
title: this.modelDetail.title, title: this.modelDetail.title,
// voiceMouldId: "", // voiceMouldId: "",
@@ -144,6 +136,7 @@ export default {
}); });
}) })
.catch((err) => { .catch((err) => {
console.log(err, "err");
Toast.fail(err.message); Toast.fail(err.message);
}); });
}, },
@@ -154,117 +147,88 @@ export default {
this.getDetailById(this.id); this.getDetailById(this.id);
} else { } else {
this.modelDetail = this.$route.query.modelDetail; this.modelDetail = this.$route.query.modelDetail;
console.log(this.modelDetail);
} }
}, },
}; };
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
.chooseModel {
display: flex;
justify-content: space-between;
align-items: center;
width: 350px;
height: 32px;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
div {
width: 33.33%;
height: 90%;
line-height: 32px;
text-align: center;
border: 1px solid #46464661;
&.active {
background-color: #00ccff;
color: #fff;
}
}
}
.img {
margin: 25px auto;
.title {
text-align: center; text-align: center;
img {
width: 300px;
height: 180px;
background-color: grey;
}
.title {
font-size: 15px;
margin-top: 15px;
}
width: 70px;
font-size: 16px;
font-weight: 600;
border-bottom: 3px solid #0068b7;
padding-bottom: 7px;
margin: 10px auto;
margin-bottom: 25px;
} }
.inpuType {
.content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 90px;
margin-bottom: 25px;
div {
width: 80px;
height: 28px;
line-height: 28px;
padding: 0 15px;
.img {
img {
width: 76px;
height: 135.5px;
border: 1px solid #999999;
border-radius: 8px;
}
.title {
font-size: 15px;
margin-top: 15px;
}
}
.textarea {
position: relative;
text-align: center; text-align: center;
border: 1px solid #000;
border-radius: 5px;
&.text {
color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
border: none;
margin-bottom: 60px;
textarea {
width: 250px;
height: 367.5px;
border: 1px solid #00000080;
border-radius: 8px;
} }
&.voice {
.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; color: #0000004b;
border: 1px solid #0000004b; border: 1px solid #0000004b;
border-radius: 5px;
} }
} }
} }
.textarea {
position: relative;
text-align: center;
margin-bottom: 60px;
input {
height: 20px;
border: 1px solid #000;
margin-bottom: 15px;
}
textarea {
border: 1px solid #00000080;
}
.limit {
position: absolute;
left: 25px;
bottom: 10px;
}
.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 { .bottomBtn {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 75px;
margin-bottom: 20px;
padding: 0 32.5px;
margin-top: 50px;
margin-bottom: 30px;
div { div {
width: 100px;
height: 30px;
color: #484848;
line-height: 30px;
width: 142px;
height: 42px;
color: #fff;
line-height: 42px;
text-align: center; text-align: center;
border: 1px solid #484848;
border: 1px solid #d2d2d2;
border-radius: 7px; border-radius: 7px;
background-color: #d2d2d2;
&.next { &.next {
color: #fff; color: #fff;
border: 1px solid #00ccff;
background-color: #00ccff;
border: 1px solid #0068b7;
background-color: #0068b7;
} }
} }
} }


+ 1
- 1
src/views/model/modelDetail.vue 查看文件

@@ -104,7 +104,7 @@ export default {
// id: "", // id: "",
type: 1, type: 1,
personMouldId: this.modelDetail.id, //模板id personMouldId: this.modelDetail.id, //模板id
personMouldPath: this.modelDetail.mouldPath, //模板标识
personMouldPath: this.modelDetail.mouldSmId, //模板标识
// voiceMouldId: "", // voiceMouldId: "",
// voiceMouldId: "", // voiceMouldId: "",
}; };


+ 42
- 22
src/views/myPage/myPage.vue 查看文件

@@ -1,7 +1,7 @@
<template> <template>
<div class="page"> <div class="page">
<HeadTop /> <HeadTop />
<img class="showIMG" src="../../assets/img/BG@2x.png" alt="" />
<img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
<div class="item"> <div class="item">
<div class="title">我的视频作品</div> <div class="title">我的视频作品</div>
<div class="itemList"> <div class="itemList">
@@ -18,21 +18,23 @@
'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath
" "
/> />
<div v-if="item.videoStatus == 0" class="cover">草稿</div>
<div v-if="item.videoStatus == 1" class="cover">视频生成中</div>
<div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
<!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> -->
</div> </div>
<div class="videoInfo"> <div class="videoInfo">
<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"> <div class="createTime">
创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }} 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }}
</div> </div>
</div> </div>
<div v-if="item.videoStatus == 0" class="tag text">草稿</div>
<div v-if="item.videoStatus == 1" class="tag generating">生成中</div>
<div v-if="item.videoStatus == 2" class="tag finish">已完成</div>
<div v-if="item.videoStatus == 3" class="tag fail">失败</div>
</div> </div>
<div v-if="videoList.length <= 0" class="noWork">暂无作品</div>
<div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
</div> </div>
</div> </div>
<van-pagination <van-pagination
@@ -113,7 +115,7 @@ export default {
const AccessToken = localStorage.getItem("AccessToken"); const AccessToken = localStorage.getItem("AccessToken");
this.$axios({ this.$axios({
method: "get", method: "get",
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`,
url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=4`,
headers: { headers: {
"Content-Type": "application/json;charset=UTF-8", "Content-Type": "application/json;charset=UTF-8",
token: AccessToken, token: AccessToken,
@@ -177,9 +179,12 @@ export default {
width: 100%; width: 100%;
} }
.item { .item {
padding: 15px;
padding-top: 15px;
padding-bottom: 15px;
.title { .title {
font-size: 20px;
font-size: 15px;
font-weight: 600;
margin-left: 15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.itemList { .itemList {
@@ -188,15 +193,25 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 25px; margin-bottom: 25px;
border: 1px solid #0000003a;
border-radius: 5px;
padding: 25px;
border-bottom: 1px solid #00000010;
padding: 0 20px 25px 25px;
.videoPrv { .videoPrv {
width: 100px;
width: 150px;
height: 100px; height: 100px;
// background-color: #979797;
video { video {
width: 100%;
height: 100%;
position: absolute;
width: 150px;
height: 100px;
}
.cover {
position: absolute;
width: 150px;
height: 100px;
line-height: 100px;
background-color: #00000034;
text-align: center;
color: #fff;
} }
} }
.videoInfo { .videoInfo {
@@ -205,7 +220,8 @@ export default {
justify-content: space-between; justify-content: space-between;
margin-left: 10px; margin-left: 10px;
.videoName { .videoName {
font-size: 15px;
font-size: 16px;
font-weight: 600;
} }
.createTime { .createTime {
font-size: 11px; font-size: 11px;
@@ -235,24 +251,28 @@ export default {
} }
} }
.noWork { .noWork {
font-size: 20px;
width: 100%;
height: 450px;
line-height: 450px;
font-size: 14px;
font-weight: 600;
text-align: center; text-align: center;
} }
} }
} }
.goAdd { .goAdd {
position: fixed; position: fixed;
bottom: 30px;
bottom: 15px;
left: 50%; left: 50%;
width: 300px; width: 300px;
height: 30px;
line-height: 30px;
height: 42px;
line-height: 42px;
font-size: 15px; font-size: 15px;
color: #fff; color: #fff;
text-align: center; text-align: center;
transform: translateX(-50%); transform: translateX(-50%);
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae);
border-radius: 8px;
background-color: #0068b7;
border-radius: 5px;
box-shadow: #60606082 1px 1px 1px 1px; box-shadow: #60606082 1px 1px 1px 1px;
} }
} }


正在加载...
取消
保存