ByeCheng 2 年之前
父節點
當前提交
4934f6231d
共有 10 個檔案被更改,包括 461 行新增35 行删除
  1. 二進制
      src/assets/icon/icon-background.png
  2. 二進制
      src/assets/icon/icon-earphone.png
  3. 二進制
      src/assets/icon/icon-folder@2x.png
  4. 二進制
      src/assets/icon/icon-material.png
  5. 二進制
      src/assets/icon/icon-microphone.png
  6. 二進制
      src/assets/icon/icon-subtitle.png
  7. 二進制
      src/assets/icon/icon-upload@2x.png
  8. 二進制
      src/assets/icon/icon-yes.png
  9. +3
    -0
      src/styles/index.scss
  10. +458
    -35
      src/views/model/editModel.vue

二進制
src/assets/icon/icon-background.png 查看文件

Before After
Width: 48  |  Height: 48  |  Size: 2.3 KiB

二進制
src/assets/icon/icon-earphone.png 查看文件

Before After
Width: 64  |  Height: 48  |  Size: 1.9 KiB

二進制
src/assets/icon/icon-folder@2x.png 查看文件

Before After
Width: 40  |  Height: 32  |  Size: 839 B

二進制
src/assets/icon/icon-material.png 查看文件

Before After
Width: 48  |  Height: 48  |  Size: 2.6 KiB

二進制
src/assets/icon/icon-microphone.png 查看文件

Before After
Width: 48  |  Height: 48  |  Size: 2.6 KiB

二進制
src/assets/icon/icon-subtitle.png 查看文件

Before After
Width: 48  |  Height: 48  |  Size: 2.8 KiB

二進制
src/assets/icon/icon-upload@2x.png 查看文件

Before After
Width: 40  |  Height: 32  |  Size: 461 B

二進制
src/assets/icon/icon-yes.png 查看文件

Before After
Width: 52  |  Height: 32  |  Size: 1.1 KiB

+ 3
- 0
src/styles/index.scss 查看文件

@@ -10,4 +10,7 @@
.redWord {
font-weight: normal;
color: red;
}
img {
vertical-align: middle;
}

+ 458
- 35
src/views/model/editModel.vue 查看文件

@@ -1,39 +1,184 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<div class="content">
<!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="">
</div>
<!-- 文字 -->
<div class="addText">
<div class="addText-title">添加文案</div>
<div class="desalinate">
<span>已录入65字</span>&nbsp;&nbsp;
<span>视频时长:&nbsp;00:16</span>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<!-- 中间内容区 -->
<div class="content">
<!-- 展示图片 -->
<div v-if="imgUrl" class="shouModelImg">
<img :src="imgUrl" alt="">
<div v-show="showSubtitle" class="shouModelImg-subtitle">
中午吃啥?
</div>
</div>
<!-- 文字 -->
<div class="addText">
<div class="addText-title">添加文案</div>
<div class="desalinate">
<span>已录入65字</span>&nbsp;&nbsp;
<span>视频时长:&nbsp;00:16</span>
</div>
</div>
<!-- 标题框 -->
<div class="textInput">
<div class="textInput-in">
<!-- 标题 -->
<el-input v-model="inputTitle" placeholder="请输入标题"></el-input>
<div class="divider" />
<!-- 语音内容 -->
<el-input rows="4" type="textarea" v-model="textareaContent"></el-input>
</div>
</div>
<!-- 播报声音 -->
<div class="addText">
<div class="addText-title">播报声音<span class="redWord">(必选)</span></div>
<div>
英语_女性_安娜
</div>
</div>
<!-- 合成按钮 -->
<div class="makeVideo" @click="showSynthesisDialog=true">立即制作</div>
<!-- 上移下移 -->
<div class="upAndBottomBtn">
<div class="moveLayer">
<div class="btnContent">
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="">
上移一层
</div>
</div>
<div class="moveLayer below">
<div class="btnContent active">
<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="">
下移一层
</div>
</div>
</div>
</div>
<!-- 标题框 -->
<div class="textInput">
<!-- 标题 -->
<el-input v-model="inputTitle" placeholder="请输入标题"></el-input>
<div class="divider" />
<!-- 语音内容 -->
<el-input type="textarea" v-model="textareaContent"></el-input>

<!-- 底部导航栏 -->
<div class="bottom">
<van-tabbar class="bottom-tab">
<van-tabbar-item @click="clickBottomTab(1)">
<span>更改声音</span>
<template #icon="props">
<img src="../../assets/icon/icon-microphone.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(2)">
<span>更改背景</span>
<template #icon="props">
<img src="../../assets/icon/icon-background.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(3)">
<span>添加素材</span>
<template #icon="props">
<img src="../../assets/icon/icon-material.png" />
</template>
</van-tabbar-item>
<van-tabbar-item @click="clickBottomTab(4)">
<span v-show="showSubtitle">取消字幕</span>
<span v-show="!showSubtitle">添加字幕</span>
<template #icon="props">
<img src="../../assets/icon/icon-subtitle.png" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>
<!-- 播报声音 -->
<div class="addText">
<div class="addText-title">播报声音<span class="redWord">(必选)</span></div>
<div>
英语_女性_安娜

<!-- 合成视频进度条 -->
<div v-if="showSynthesisDialog" class="synthesisDialog">
<div class="synthesisDialog-in">
<el-progress color="#7264F5" define-back-color="#f0effe" stroke-width="12" class="progress" :percentage="26"></el-progress>
<div class="synthesisDialog-text">正在生成视频,请耐心等待!</div>
</div>
</div>
<!-- 合成按钮 -->
<div class="makeVideo" >立即制作</div>

<!-- 点击tab栏弹出框 -->
<van-action-sheet class="tabSheet" v-model="showTabSheet" >
<!-- 声音 -->
<div v-show="bottomTabActive==1">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-microphone.png" alt=""> 更改声音</div>
<div><img src="../../assets/icon/icon-yes.png" alt=""></div>
</div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<van-tabs color="#7264F5" line-width=46 line-height=6 title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable>
<van-tab v-for="(item,index) in soundTabList" :title="item" :key="index">
<!-- 展示页 -->
<div class="list">
<div @click="soundItemListAction=index" class="listItem" :class="{ 'active': soundItemListAction ===index }" v-for="(item,index) in soundItemList" :key="index">
<img src="../../assets/icon/icon-earphone.png" alt="">
<div >{{ item }}</div>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</div>
<!-- 背景 -->
<div v-show="bottomTabActive==2">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-background.png" alt=""> 更换背景</div>
<div><img src="../../assets/icon/icon-yes.png" alt=""></div>
</div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div @click="bjAction=0" class="myTab-item" :class="{'active':bjAction==0}"><img src="../../assets/icon/icon-folder@2x.png" alt=""> 背景库</div>
<div @click="bjAction=1" class="myTab-item" :class="{'active':bjAction==1}"><img src="../../assets/icon/icon-upload@2x.png" alt="">我上传的</div>
</div>
<!-- 展示 -->
<div class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="bjAction==1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="">
<input type="file">
</div>
<!-- 图片列表 -->
<div @click="bjImgAction=index" class="myTab-show-list-item" :class="{'myTab-show-list-active':bjImgAction==index}" v-for="(item,index) in 7" :key="index" ></div>
</div>
</div>
</div>
</div>
<!-- 素材 -->
<div v-show="bottomTabActive==3">
<!-- 顶部文字 -->
<div class="tabSheet-title">
<div><img class="img" src="../../assets/icon/icon-material.png" alt=""> 更换素材</div>
<div><img src="../../assets/icon/icon-yes.png" alt=""></div>
</div>
<!-- 主要内容 -->
<div class="tabSheet-content">
<!-- tab栏 -->
<div class="myTab">
<div @click="scAction=0" class="myTab-item" :class="{'active':scAction==0}"><img src="../../assets/icon/icon-folder@2x.png" alt=""> 背景库</div>
<div @click="scAction=1" class="myTab-item" :class="{'active':scAction==1}"><img src="../../assets/icon/icon-upload@2x.png" alt="">我上传的</div>
</div>
<!-- 展示 -->
<div class="myTab-show">
<div class="myTab-show-title">图片<i></i></div>
<div class="myTab-show-list">
<!-- 上传 -->
<div v-if="bjAction==1" class="myTab-show-list-upload">
<img src="../../assets/icon/icon-upload@2x.png" alt="">
<input type="file">
</div>
<!-- 图片列表 -->
<div @click="scImgAction=index" class="myTab-show-list-item" :class="{'myTab-show-list-active':scImgAction==index}" v-for="(item,index) in 7" :key="index" ></div>
</div>
</div>
</div>
</div>
</van-action-sheet>
</div>
</div>
</template>

<script>
@@ -56,7 +201,19 @@ export default {
imgUrl:null,
modelId: null,
inputTitle: '',
textareaContent:''
textareaContent: '',
bottomTabActive: 2,// 底部导航高亮
showSubtitle: true, // 是否展示字幕
showSynthesisDialog: false,//合成进度条窗口显示隐藏
showTabSheet: true, //tab栏弹出框显隐
soundTabList: ['男生', '女生', '御姐', '萝莉'], // 声音tab栏标题
soundListAction:0,//声音tab栏标题高亮
soundItemList: ['普通话', '英语', '日语', '日语', '日语', '日语', '日语'],// 声音展示列表
soundItemListAction:0,// 声音展示列表高亮
bjAction:0,// 背景:素材库和上传高亮
bjImgAction:0,// 选中背景图高亮
scAction:0,// 素材:素材库和上传高亮
scImgAction:0,// 选中素材图高亮
};
},
computed: {
@@ -67,7 +224,17 @@ export default {

methods: {
...mapActions(["setCharacters"]),

// 点击底部tab栏
clickBottomTab(index) {
if (index != 4) {
this.bottomTabActive = index
console.log(this.bottomTabActive);
this.showTabSheet=!this.showTabSheet
} else {
//字幕切换
this.showSubtitle=!this.showSubtitle
}
},
go(url) {
this.$router.push(url);
},
@@ -85,24 +252,43 @@ export default {

<style lang="scss" scoped>
.page {
transform: translateX(30%);
// transform会导致其子元素固定定位失效
// transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
&.active {
opacity: 1;
transform: translateX(0);
// transform: translateX(0);
}
}
.content {
position: relative;
padding: 0 10px;
padding-bottom: 50px;
width: 375px;
.shouModelImg {
display: flex;
position: relative;
justify-content: center ;
width: 100%;
img {
width: 200px;
height: 351px;
};
&-subtitle {
position: absolute;
top: 220px;
left: 50%;
transform: translateX(-50%);
padding: 2px 6px;
width: 160px;
height: 24px;
line-height: 20px;
background: rgba(0,0,0,0.5);
font-size: 14px;
color: #fff;
border-radius: 3px;
}
}
.addText {
@@ -117,10 +303,16 @@ export default {
}
.textInput {
margin-top: 10px;
padding: 1px;
width: 100%;
border: 1px solid;
border-image: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)) 1 1;
background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1));
border-radius: 6px;
&-in {
width: 100%;
height: 100%;
background: #fff;
border-radius: 6px;
}
.divider {
transform: scaleY (0.25);
width: 100%;
@@ -130,9 +322,11 @@ export default {
}
::v-deep .el-input__inner {
border: none;
background-color: #faf9fe;
}
::v-deep .el-textarea__inner {
border: none;
background-color: #faf9fe;
}
}
.makeVideo {
@@ -146,5 +340,234 @@ export default {
background: linear-gradient(316deg, #6EE4D7 0%, #37C4F1 32%, #A49AFC 100%);
border-radius: 25px;
}
.upAndBottomBtn {
.moveLayer {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 20%;
left: 290px;
padding-left: 10px;
width: 80px;
height: 22px;
font-size: 10px;
line-height: 28px;
text-align: center;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 1);
border-radius: 11px;
}
img {
vertical-align: middle;
width: 10px;
height: 11px;
margin: 1px 0 2px 0;
}
.below {
top: 25%;
}
.active {
opacity: 0.5;
}
}
}
.bottom {
::v-deep .van-tabbar-item {
color: rgba(51, 51, 51, 1)!important;
font-size: 10px !important;
}
}
.synthesisDialog {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 110vh;
z-index: 99999;
color:#333;
background: rgba(0,0,0,0.5);
&-in {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%);
padding: 0 15px;
padding-top: 40px;
width: 315px;
height: 95px;
background-color: #fff;
border-radius: 12px;
.progress {
width: 300px;
::v-deep .el-progress__text {
margin-left: 15px;
}
}
}
&-text {
margin-top: 10px;
font-size: 12px;
}
}
.tabSheet {
height: 280px;
padding: 10px;
padding-bottom: 0px;
background-color: #f9f9f9;
&-title {
display: flex;
justify-content: space-between;
height: 40px;
font-size: 13px;
line-height: 40px;
background-color: #fff;
.img {
margin-top: -3px;
margin-right: 3px;
width: 16px;
height: 16px;
}
}
&-content {
height: 220px;
background-color: #f9f9f9;
::v-deep .van-tab{
background-color: #f9f9f9;
}
::v-deep .van-tab--active {
font-size: 17px;
font-weight: 700;
}
.list {
height: 170px;
overflow-y: scroll;
// scrollbar-width: none;
// -ms-overflow-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;

.listItem {
display: flex;
justify-content: space-between;
padding: 12px;
margin-bottom: 10px;
width: 170px;
height: 50px;
overflow: hidden;
background: rgba(186,186,189,0.5);
border-radius: 24px;
color: #fff;
img {
width: 32px;
}
>div {
flex: 1;
margin-left: 12px;
}
}
.active {
background: #7264F5;
}
}
.list::-webkit-scrollbar {
width:0;
}
}
.myTab {
display: flex;
padding: 5px;
width: 100%;
height: 40px;
background-color: #EEEEEE;
border-radius: 6px;
&-item {
width: 50%;
height: 30px;
font-size: 14px;
line-height: 30px;
text-align: center;
background-color: #EEEEEE;
border-radius: 6px;
img {
width: 20px;
height: 16px;
margin-right: 8px;
}
}
.active {
background-color: #fff;
}
&-show {
width: 100%;
height: 190px;
background-color: green;
&-title {
font-size: 16px;
i {
display: block;
margin-top: 4px;
margin-left: 3px;
width: 23px;
height: 3px;
background: #7264F5;
border-radius: 2px;
}
}
&-list {
height: 145px;
overflow-y: scroll;
display: flex;
justify-content: start;
flex-wrap: wrap;
&-list::-webkit-scrollbar {
width:0;
}
&-item {
margin-right: 10px;
margin-top: 10px;
width: 80px;
height: 120px;
background: red;
border-radius: 10px;
&:nth-child(4n) {
margin-right: 0px;
}
}
&-active {
margin-right: 8px;
margin-top: 8px;
padding: 2px;
width: 84px;
height: 124px;
border: 1px solid;
border-image: linear-gradient(90deg, rgba(114, 100, 245, 1), rgba(81, 217, 202, 1)) 1 1;
}
&-upload {
position: relative;
margin-right: 10px;
margin-top: 10px;
width: 80px;
height: 120px;
background: #ddd;
border-radius: 10px;
img {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
input {
width: 100%;
height: 100%;
opacity: 0;
}
}
}
}
}
}
</style>

Loading…
取消
儲存