| @@ -4,12 +4,14 @@ | |||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | |||
| <!-- <div class="logoTitle">metavatar</div> --> | |||
| </div> | |||
| <div class="loginBox"> | |||
| <!-- 短信验证码登录 --> | |||
| <div class="loginBox" v-if="isCodeLogin"> | |||
| <div class="welcome">登录邃芒</div> | |||
| <el-form ref="form" :rules="rules" :model="form"> | |||
| <el-form-item class="phone" prop="phone"> | |||
| <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">{{ | |||
| codeInfo | |||
| }}</el-button> | |||
| @@ -24,7 +26,46 @@ | |||
| <div class="inputCode">请输入短信验证码</div> | |||
| </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> | |||
| </div> | |||
| @@ -41,6 +82,8 @@ export default { | |||
| data() { | |||
| return { | |||
| codeInfo: "获取验证码", | |||
| isCodeLogin: true, | |||
| // 短信验证码登录 | |||
| form: { | |||
| phone: "", | |||
| 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 { | |||
| position: absolute; | |||
| top: 1px; | |||
| right: 10px; | |||
| color: #0068b7; | |||
| } | |||
| @@ -230,10 +300,21 @@ export default { | |||
| padding: 9px; | |||
| background-color: #0068b7; | |||
| border-radius: 5px; | |||
| &.inside { | |||
| top: 10px; | |||
| } | |||
| } | |||
| .forgetPwd { | |||
| position: relative; | |||
| top: -10px; | |||
| float: left; | |||
| font-size: 12px; | |||
| color: #0068b7; | |||
| } | |||
| } | |||
| } | |||
| /deep/ .el-input__inner { | |||
| height: 42px; | |||
| border: 1px solid #0068b7; | |||
| } | |||
| </style> | |||
| @@ -1,13 +1,14 @@ | |||
| <template> | |||
| <div> | |||
| <HeadTop /> | |||
| <div class="chooseModel"> | |||
| <!-- <div class="chooseModel"> | |||
| <div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||
| <div :class="phase == 2 ? '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 == 0 ? 'active' : ''" @click="chooseType(0)"> | |||
| 全部模板 | |||
| @@ -18,23 +19,27 @@ | |||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||
| 男性模板 | |||
| </div> | |||
| <div style="background-color: #46464661">自建模板</div> | |||
| </div> | |||
| </div> | |||
| <div class="choose"> | |||
| <div class="modeList"> | |||
| <div | |||
| class="model" | |||
| :class="currentId == item.id ? 'active' : ''" | |||
| v-if="modeList.length >= 1" | |||
| v-for="(item, index) in modeList" | |||
| :key="index" | |||
| @click="goDetail(item.id)" | |||
| @click="selectModel(item.id)" | |||
| > | |||
| <img :src="item.coverImg" alt="" /> | |||
| <div class="modelName">{{ item.title }}</div> | |||
| <div class="setPaper">录入文案</div> | |||
| </div> | |||
| <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | |||
| </div> | |||
| </div> | |||
| <div class="blank" v-if="modeList.length <= 2"></div> | |||
| </div> | |||
| </template> | |||
| @@ -52,9 +57,95 @@ export default { | |||
| }, | |||
| data() { | |||
| return { | |||
| phase: 1, | |||
| 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: { | |||
| @@ -73,10 +164,13 @@ export default { | |||
| chooseModel(num) { | |||
| this.phase = num; | |||
| }, | |||
| chooseType(num) { | |||
| this.type = num; | |||
| this.getModeList(num); | |||
| }, | |||
| // 获取模板列表 | |||
| getModeList(sex) { | |||
| const AccessToken = localStorage.getItem("AccessToken"); | |||
| if (sex == 0) { | |||
| @@ -102,13 +196,84 @@ export default { | |||
| 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() { | |||
| @@ -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 { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| padding: 0 30px; | |||
| padding: 0 25px; | |||
| margin-bottom: 20px; | |||
| 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; | |||
| text-align: center; | |||
| transition: all 0.3s; | |||
| &.active { | |||
| 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 { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| flex-wrap: wrap; | |||
| margin: auto; | |||
| padding: 0 25px; | |||
| padding: 0 10px; | |||
| .model { | |||
| text-align: center; | |||
| 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 { | |||
| 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 { | |||
| font-size: 18px; | |||
| margin: 80px auto; | |||
| height: 450px; | |||
| line-height: 450px; | |||
| } | |||
| } | |||
| } | |||
| .blank { | |||
| width: 1px; | |||
| height: 1px; | |||
| margin-bottom: 240px; | |||
| } | |||
| </style> | |||
| @@ -72,12 +72,16 @@ export default { | |||
| position: relative; | |||
| padding: 30px; | |||
| text-align: center; | |||
| .title { | |||
| font-size: 18px; | |||
| margin-bottom: 20px; | |||
| } | |||
| video { | |||
| width: 80%; | |||
| width: 240px; | |||
| height: 427px; | |||
| border: 0.5px solid #000; | |||
| border-radius: 8px; | |||
| } | |||
| img { | |||
| position: absolute; | |||
| @@ -86,32 +90,39 @@ export default { | |||
| transform: translate(-50%, -50%); | |||
| } | |||
| .desc { | |||
| font-size: 16px; | |||
| position: relative; | |||
| right: 45px; | |||
| bottom: 8px; | |||
| font-size: 12px; | |||
| margin-top: 20px; | |||
| span { | |||
| color: #00ccff; | |||
| text-decoration: underline; | |||
| color: #0006ff; | |||
| } | |||
| } | |||
| } | |||
| .bottomBtn { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 75px; | |||
| padding: 0 32.5px; | |||
| margin-top: 20px; | |||
| margin-bottom: 20px; | |||
| div { | |||
| width: 100px; | |||
| height: 30px; | |||
| width: 142px; | |||
| height: 42px; | |||
| color: #484848; | |||
| line-height: 30px; | |||
| 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 #00ccff; | |||
| background-color: #00ccff; | |||
| border: 1px solid #0068b7; | |||
| background-color: #0068b7; | |||
| } | |||
| } | |||
| } | |||
| @@ -1,30 +1,22 @@ | |||
| <template> | |||
| <div> | |||
| <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 class="bottomBtn"> | |||
| <div class="back" @click="back">上一步</div> | |||
| <div class="next" @click="goNext">下一步</div> | |||
| @@ -112,7 +104,7 @@ export default { | |||
| // id: "", | |||
| type: 1, | |||
| personMouldId: this.modelDetail.id, //模板id | |||
| personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
| personMouldSmId: this.modelDetail.mouldSmId, //模板标识 | |||
| paperwork: this.paperwork, | |||
| title: this.modelDetail.title, | |||
| // voiceMouldId: "", | |||
| @@ -144,6 +136,7 @@ export default { | |||
| }); | |||
| }) | |||
| .catch((err) => { | |||
| console.log(err, "err"); | |||
| Toast.fail(err.message); | |||
| }); | |||
| }, | |||
| @@ -154,117 +147,88 @@ export default { | |||
| this.getDetailById(this.id); | |||
| } else { | |||
| this.modelDetail = this.$route.query.modelDetail; | |||
| console.log(this.modelDetail); | |||
| } | |||
| }, | |||
| }; | |||
| </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: 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; | |||
| 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; | |||
| 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; | |||
| 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; | |||
| 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 { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 75px; | |||
| margin-bottom: 20px; | |||
| padding: 0 32.5px; | |||
| margin-top: 50px; | |||
| margin-bottom: 30px; | |||
| div { | |||
| width: 100px; | |||
| height: 30px; | |||
| color: #484848; | |||
| line-height: 30px; | |||
| width: 142px; | |||
| height: 42px; | |||
| color: #fff; | |||
| line-height: 42px; | |||
| text-align: center; | |||
| border: 1px solid #484848; | |||
| border: 1px solid #d2d2d2; | |||
| border-radius: 7px; | |||
| background-color: #d2d2d2; | |||
| &.next { | |||
| color: #fff; | |||
| border: 1px solid #00ccff; | |||
| background-color: #00ccff; | |||
| border: 1px solid #0068b7; | |||
| background-color: #0068b7; | |||
| } | |||
| } | |||
| } | |||
| @@ -104,7 +104,7 @@ export default { | |||
| // id: "", | |||
| type: 1, | |||
| personMouldId: this.modelDetail.id, //模板id | |||
| personMouldPath: this.modelDetail.mouldPath, //模板标识 | |||
| personMouldPath: this.modelDetail.mouldSmId, //模板标识 | |||
| // voiceMouldId: "", | |||
| // voiceMouldId: "", | |||
| }; | |||
| @@ -1,7 +1,7 @@ | |||
| <template> | |||
| <div class="page"> | |||
| <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="title">我的视频作品</div> | |||
| <div class="itemList"> | |||
| @@ -18,21 +18,23 @@ | |||
| '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 class="videoInfo"> | |||
| <div class="videoName"> | |||
| {{ item.title || "暂无" }} | |||
| </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> | |||
| </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 v-if="videoList.length <= 0" class="noWork">暂无作品</div> | |||
| <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||
| </div> | |||
| </div> | |||
| <van-pagination | |||
| @@ -113,7 +115,7 @@ export default { | |||
| const AccessToken = localStorage.getItem("AccessToken"); | |||
| this.$axios({ | |||
| method: "get", | |||
| url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=3`, | |||
| url: `${baseUrl}/api/userVideo/list?pageNum=${pageNum}&pageSize=4`, | |||
| headers: { | |||
| "Content-Type": "application/json;charset=UTF-8", | |||
| token: AccessToken, | |||
| @@ -177,9 +179,12 @@ export default { | |||
| width: 100%; | |||
| } | |||
| .item { | |||
| padding: 15px; | |||
| padding-top: 15px; | |||
| padding-bottom: 15px; | |||
| .title { | |||
| font-size: 20px; | |||
| font-size: 15px; | |||
| font-weight: 600; | |||
| margin-left: 15px; | |||
| margin-bottom: 20px; | |||
| } | |||
| .itemList { | |||
| @@ -188,15 +193,25 @@ export default { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| margin-bottom: 25px; | |||
| border: 1px solid #0000003a; | |||
| border-radius: 5px; | |||
| padding: 25px; | |||
| border-bottom: 1px solid #00000010; | |||
| padding: 0 20px 25px 25px; | |||
| .videoPrv { | |||
| width: 100px; | |||
| width: 150px; | |||
| height: 100px; | |||
| // background-color: #979797; | |||
| 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 { | |||
| @@ -205,7 +220,8 @@ export default { | |||
| justify-content: space-between; | |||
| margin-left: 10px; | |||
| .videoName { | |||
| font-size: 15px; | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| } | |||
| .createTime { | |||
| font-size: 11px; | |||
| @@ -235,24 +251,28 @@ export default { | |||
| } | |||
| } | |||
| .noWork { | |||
| font-size: 20px; | |||
| width: 100%; | |||
| height: 450px; | |||
| line-height: 450px; | |||
| font-size: 14px; | |||
| font-weight: 600; | |||
| text-align: center; | |||
| } | |||
| } | |||
| } | |||
| .goAdd { | |||
| position: fixed; | |||
| bottom: 30px; | |||
| bottom: 15px; | |||
| left: 50%; | |||
| width: 300px; | |||
| height: 30px; | |||
| line-height: 30px; | |||
| height: 42px; | |||
| line-height: 42px; | |||
| font-size: 15px; | |||
| color: #fff; | |||
| text-align: center; | |||
| 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; | |||
| } | |||
| } | |||