|
@@ -1,283 +1,429 @@ |
|
|
<template> |
|
|
<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 v-html="textareaContent" v-show="showSubtitle" class="shouModelImg-subtitle"></div> |
|
|
|
|
|
|
|
|
<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-html="textareaContent" |
|
|
|
|
|
v-show="showSubtitle" |
|
|
|
|
|
class="shouModelImg-subtitle" |
|
|
|
|
|
></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 文字 --> |
|
|
|
|
|
<div class="addText"> |
|
|
|
|
|
<div class="addText-title">添加文案</div> |
|
|
|
|
|
<div class="desalinate"> |
|
|
|
|
|
<span>已录入{{ textareaContent.length }}字</span> |
|
|
|
|
|
<span>视频时长: 00:16</span> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 文字 --> |
|
|
|
|
|
<div class="addText"> |
|
|
|
|
|
<div class="addText-title">添加文案</div> |
|
|
|
|
|
<div class="desalinate"> |
|
|
|
|
|
<span>已录入{{textareaContent.length}}字</span> |
|
|
|
|
|
<span>视频时长: 00:16</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 标题框 --> |
|
|
|
|
|
<div class="textInput"> |
|
|
|
|
|
<div class="textInput-in"> |
|
|
|
|
|
<!-- 标题 --> |
|
|
|
|
|
<el-input v-model="inputTitle" placeholder="请输入标题"> |
|
|
|
|
|
<template slot="append"> |
|
|
|
|
|
<img src="../../assets/icon/icon-pencil.png" alt="" /> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-input> |
|
|
|
|
|
<div class="divider" /> |
|
|
|
|
|
<!-- 语音内容 --> |
|
|
|
|
|
<el-input |
|
|
|
|
|
@change="loadVoice" |
|
|
|
|
|
rows="4" |
|
|
|
|
|
type="textarea" |
|
|
|
|
|
v-model="textareaContent" |
|
|
|
|
|
></el-input> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 标题框 --> |
|
|
|
|
|
<div class="textInput"> |
|
|
|
|
|
<div class="textInput-in"> |
|
|
|
|
|
<!-- 标题 --> |
|
|
|
|
|
<el-input v-model="inputTitle" placeholder="请输入标题"> |
|
|
|
|
|
<template slot="append"> |
|
|
|
|
|
<img src="../../assets/icon/icon-pencil.png" alt=""> |
|
|
|
|
|
</template> |
|
|
|
|
|
</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 class="addText"> |
|
|
|
|
|
<div class="addText-title">播报声音<span class="redWord">(必选)</span></div> |
|
|
|
|
|
<div> |
|
|
|
|
|
英语_女性_安娜 |
|
|
|
|
|
|
|
|
<div>英语_女性_安娜</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 合成按钮 --> |
|
|
|
|
|
<div class="makeVideo" @click="videoMake">立即制作</div> |
|
|
|
|
|
<!-- 上移下移 --> |
|
|
|
|
|
<div v-if="false" class="upAndBottomBtn"> |
|
|
|
|
|
<div class="moveLayer"> |
|
|
|
|
|
<div class="btnContent"> |
|
|
|
|
|
<img |
|
|
|
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" |
|
|
|
|
|
alt="" |
|
|
|
|
|
/> |
|
|
|
|
|
上移一层 |
|
|
</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 class="moveLayer below"> |
|
|
|
|
|
<div class="btnContent active"> |
|
|
|
|
|
<img |
|
|
|
|
|
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" |
|
|
|
|
|
alt="" |
|
|
|
|
|
/> |
|
|
|
|
|
下移一层 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 底部导航栏 --> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<!-- 合成视频进度条 --> |
|
|
|
|
|
<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 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 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> |
|
|
|
|
|
|
|
|
<!-- 点击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 class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></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> |
|
|
<!-- 主要内容 --> |
|
|
|
|
|
<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 @click="showTabSheet = !showTabSheet"> |
|
|
|
|
|
<img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</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 class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></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 v-if="soundItemList.length == 0">暂无数据</div> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="soundItemList.length != 0" |
|
|
|
|
|
@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.title }}</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> |
|
|
<!-- 主要内容 --> |
|
|
|
|
|
<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 @click="showTabSheet = !showTabSheet"> |
|
|
|
|
|
<img class="yesImg" 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> |
|
|
<!-- 展示 --> |
|
|
|
|
|
<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 |
|
|
|
|
|
@click="bjAction = 1" |
|
|
|
|
|
class="myTab-item" |
|
|
|
|
|
:class="{ active: bjAction == 1 }" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="../../assets/icon/icon-upload@2x.png" alt="" />我上传的 |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 展示 --> |
|
|
|
|
|
<div v-if="bjLibrary.length == 0">暂无数据</div> |
|
|
|
|
|
<div v-if="bjLibrary.length != 0" 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" |
|
|
|
|
|
v-for="(item, index) in 7" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
:class="{ 'myTab-show-list-active': bjImgAction == index }" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="whiteBox"></div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 图片列表 --> |
|
|
|
|
|
<div @click="bjImgAction=index" class="myTab-show-list-item" v-for="(item,index) in 7" :key="index" > |
|
|
|
|
|
<div :class=" {'myTab-show-list-active':bjImgAction==index}"> |
|
|
|
|
|
<div class="whiteBox"> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 删除上传素材 --> |
|
|
|
|
|
<div class="icon-error" v-if="bjAction==1&&bjImgAction==index"> |
|
|
|
|
|
× |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 中间图片 --> |
|
|
|
|
|
<img src="" alt=""> |
|
|
|
|
|
|
|
|
<!-- 删除上传素材 --> |
|
|
|
|
|
<div |
|
|
|
|
|
class="icon-error" |
|
|
|
|
|
v-if="bjAction == 1 && bjImgAction == index" |
|
|
|
|
|
> |
|
|
|
|
|
× |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 中间图片 --> |
|
|
|
|
|
<img src="" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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 class="yesImg" src="../../assets/icon/icon-yes.png" alt=""></div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 素材 --> |
|
|
|
|
|
<div v-show="bottomTabActive == 3"> |
|
|
|
|
|
<!-- 顶部文字 --> |
|
|
|
|
|
<div class="tabSheet-title"> |
|
|
|
|
|
<div> |
|
|
|
|
|
<img class="img" src="../../assets/icon/icon-material.png" alt="" /> |
|
|
|
|
|
更换素材 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div @click="showTabSheet = !showTabSheet"> |
|
|
|
|
|
<img class="yesImg" 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="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="scAction==1" class="myTab-show-list-upload"> |
|
|
|
|
|
<img src="../../assets/icon/icon-upload@2x.png" alt=""> |
|
|
|
|
|
<input type="file"> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 展示 --> |
|
|
|
|
|
<div v-if="bjLibrary.length == 0">暂无数据</div> |
|
|
|
|
|
<div v-if="scLibrary.length != 0" class="myTab-show"> |
|
|
|
|
|
<div class="myTab-show-title">图片<i></i></div> |
|
|
|
|
|
<div class="myTab-show-list"> |
|
|
|
|
|
<!-- 上传 --> |
|
|
|
|
|
<div v-if="scAction == 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" |
|
|
|
|
|
v-for="(item, index) in 7" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
:class="{ 'myTab-show-list-active': scImgAction == index }" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="whiteBox"></div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 图片列表 --> |
|
|
|
|
|
<div @click="scImgAction=index" class="myTab-show-list-item" v-for="(item,index) in 7" :key="index" > |
|
|
|
|
|
<div :class=" {'myTab-show-list-active':scImgAction==index}"> |
|
|
|
|
|
<div class="whiteBox"> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 删除上传素材 --> |
|
|
|
|
|
<div class="icon-error" v-if="scAction==1&&scImgAction==index"> |
|
|
|
|
|
× |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 中间图片 --> |
|
|
|
|
|
<img src="" alt=""> |
|
|
|
|
|
|
|
|
<!-- 删除上传素材 --> |
|
|
|
|
|
<div |
|
|
|
|
|
class="icon-error" |
|
|
|
|
|
v-if="scAction == 1 && scImgAction == index" |
|
|
|
|
|
> |
|
|
|
|
|
× |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 中间图片 --> |
|
|
|
|
|
<img src="" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</van-action-sheet> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</van-action-sheet> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// 组件 |
|
|
// 组件 |
|
|
import Vue from "vue"; |
|
|
|
|
|
import { Toast } from "vant"; |
|
|
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
|
|
import HeadTop from "./../../components/common/head.vue"; |
|
|
|
|
|
|
|
|
import Vue from 'vue' |
|
|
|
|
|
import { Toast } from 'vant' |
|
|
|
|
|
import { mapState, mapActions } from 'vuex' |
|
|
|
|
|
import HeadTop from './../../components/common/head.vue' |
|
|
// 工具 |
|
|
// 工具 |
|
|
import { scrollToID } from "../../utils"; |
|
|
|
|
|
|
|
|
import { scrollToID } from '../../utils' |
|
|
|
|
|
// 接口 |
|
|
|
|
|
import { |
|
|
|
|
|
doCreateVideo, |
|
|
|
|
|
doFindVideoById, |
|
|
|
|
|
getVoiceList, |
|
|
|
|
|
getBackGroundList, |
|
|
|
|
|
doFindInviteCode, |
|
|
|
|
|
saveOrUpdateUserVideo |
|
|
|
|
|
} from '@/api/generateVideo' |
|
|
|
|
|
|
|
|
Vue.use(Toast); |
|
|
|
|
|
|
|
|
Vue.use(Toast) |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
HeadTop, |
|
|
|
|
|
|
|
|
HeadTop |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
inPage: false, |
|
|
inPage: false, |
|
|
imgUrl:null, |
|
|
|
|
|
|
|
|
imgUrl: null, |
|
|
modelId: null, |
|
|
modelId: null, |
|
|
|
|
|
mouldSmId: null, |
|
|
inputTitle: '', |
|
|
inputTitle: '', |
|
|
textareaContent: '', // 输入框内容 |
|
|
textareaContent: '', // 输入框内容 |
|
|
bottomTabActive: 2,// 底部导航高亮 |
|
|
|
|
|
showSubtitle: true, // 是否展示字幕 |
|
|
|
|
|
showSynthesisDialog: false,//合成进度条窗口显示隐藏 |
|
|
|
|
|
showTabSheet: false, //tab栏弹出框显隐 |
|
|
|
|
|
soundTabList: ['男生', '女生', '御姐', '萝莉'], // 声音tab栏标题 |
|
|
|
|
|
soundListAction:-1,//声音tab栏标题高亮 |
|
|
|
|
|
soundItemList: ['普通话', '英语', '日语', '日语', '日语', '日语', '日语'],// 声音展示列表 |
|
|
|
|
|
soundItemListAction:-1,// 声音展示列表高亮 |
|
|
|
|
|
bjAction:-1,// 背景:素材库和上传高亮 |
|
|
|
|
|
bjImgAction:-1,// 选中背景图高亮 |
|
|
|
|
|
scAction:-1,// 素材:素材库和上传高亮 |
|
|
|
|
|
scImgAction:-1,// 选中素材图高亮 |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
bottomTabActive: 2, // 底部导航高亮 |
|
|
|
|
|
showSubtitle: false, // 是否展示字幕 |
|
|
|
|
|
showSynthesisDialog: false, //合成进度条窗口显示隐藏 |
|
|
|
|
|
showTabSheet: false, //tab栏弹出框显隐 |
|
|
|
|
|
soundTabList: ['全部'], // 声音tab栏标题 |
|
|
|
|
|
soundListAction: -1, //声音tab栏标题高亮 |
|
|
|
|
|
soundItemList: [], // 声音展示列表 |
|
|
|
|
|
soundItemListAction: -1, // 声音展示列表高亮 |
|
|
|
|
|
bjAction: 0, // 背景:素材库和上传高亮 |
|
|
|
|
|
bjImgAction: -1, // 选中背景图高亮 |
|
|
|
|
|
scAction: 0, // 素材:素材库和上传高亮 |
|
|
|
|
|
scImgAction: -1, // 选中素材图高亮 |
|
|
|
|
|
bjLibrary: [], // 背景库列表 |
|
|
|
|
|
myBjLibrary: [], // 我上传的背景库列表 |
|
|
|
|
|
scLibrary: [], // 素材库列表 |
|
|
|
|
|
myScLibrary: [] // 我上传的素材库列表 |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
...mapState({ |
|
|
...mapState({ |
|
|
characters: (state) => state.publicObj.characters, |
|
|
|
|
|
}), |
|
|
|
|
|
|
|
|
characters: (state) => state.publicObj.characters |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
...mapActions(["setCharacters"]), |
|
|
|
|
|
|
|
|
...mapActions(['setCharacters']), |
|
|
// 点击底部tab栏 |
|
|
// 点击底部tab栏 |
|
|
clickBottomTab(index) { |
|
|
clickBottomTab(index) { |
|
|
if (index != 4) { |
|
|
if (index != 4) { |
|
|
this.bottomTabActive = index |
|
|
this.bottomTabActive = index |
|
|
console.log(this.bottomTabActive); |
|
|
|
|
|
this.showTabSheet=!this.showTabSheet |
|
|
|
|
|
|
|
|
console.log(this.bottomTabActive) |
|
|
|
|
|
this.showTabSheet = !this.showTabSheet |
|
|
} else { |
|
|
} else { |
|
|
//字幕切换 |
|
|
//字幕切换 |
|
|
this.showSubtitle=!this.showSubtitle |
|
|
|
|
|
|
|
|
this.showSubtitle = !this.showSubtitle |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
go(url) { |
|
|
|
|
|
this.$router.push(url); |
|
|
|
|
|
|
|
|
// 点击立即制作 |
|
|
|
|
|
videoMake() { |
|
|
|
|
|
if (this.textareaContent.length == 0) { |
|
|
|
|
|
Toast('您还没有输入文案') |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
// 获取声音列表 |
|
|
|
|
|
async loadVoice() { |
|
|
|
|
|
if (this.textareaContent.length != 0) { |
|
|
|
|
|
const data = { |
|
|
|
|
|
paperwork: this.textareaContent |
|
|
|
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
const res = await getVoiceList(data) |
|
|
|
|
|
console.log(res, '获取声音列表') |
|
|
|
|
|
this.soundItemList = res.data.list |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.log(error, 'error') |
|
|
|
|
|
Toast.fail(error.message) |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
Toast('您还没有输入文案') |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
go(url) { |
|
|
|
|
|
this.$router.push(url) |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.imgUrl=this.$route.query.imgUrl |
|
|
|
|
|
this.modelId=this.$route.query.modelId |
|
|
|
|
|
|
|
|
this.imgUrl = this.$route.query.imgUrl |
|
|
|
|
|
this.modelId = this.$route.query.modelId |
|
|
|
|
|
this.mouldSmId = this.$route.query.mouldSmId |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.inPage = true; |
|
|
|
|
|
scrollToID("top"); |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
this.inPage = true |
|
|
|
|
|
scrollToID('top') |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.page { |
|
|
.page { |
|
|
|
|
|
|
|
|
// transform会导致其子元素固定定位失效 |
|
|
// transform会导致其子元素固定定位失效 |
|
|
// transform: translateX(30%); |
|
|
// transform: translateX(30%); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
@@ -292,17 +438,16 @@ export default { |
|
|
padding: 0 10px; |
|
|
padding: 0 10px; |
|
|
padding-bottom: 50px; |
|
|
padding-bottom: 50px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.shouModelImg { |
|
|
.shouModelImg { |
|
|
display: flex; |
|
|
display: flex; |
|
|
position: relative; |
|
|
position: relative; |
|
|
justify-content: center ; |
|
|
|
|
|
|
|
|
justify-content: center; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
img { |
|
|
img { |
|
|
width: 200px; |
|
|
width: 200px; |
|
|
height: 351px; |
|
|
height: 351px; |
|
|
border-radius: 12px; |
|
|
border-radius: 12px; |
|
|
}; |
|
|
|
|
|
|
|
|
} |
|
|
&-subtitle { |
|
|
&-subtitle { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 220px; |
|
|
top: 220px; |
|
@@ -312,7 +457,7 @@ export default { |
|
|
width: 160px; |
|
|
width: 160px; |
|
|
height: 24px; |
|
|
height: 24px; |
|
|
line-height: 20px; |
|
|
line-height: 20px; |
|
|
background: rgba(0,0,0,0.5); |
|
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
border-radius: 3px; |
|
|
border-radius: 3px; |
|
@@ -332,7 +477,11 @@ export default { |
|
|
margin-top: 10px; |
|
|
margin-top: 10px; |
|
|
padding: 1px; |
|
|
padding: 1px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)); |
|
|
|
|
|
|
|
|
background: linear-gradient( |
|
|
|
|
|
225deg, |
|
|
|
|
|
rgba(81, 217, 202, 1), |
|
|
|
|
|
rgba(114, 100, 245, 1) |
|
|
|
|
|
); |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
&-in { |
|
|
&-in { |
|
|
width: 100%; |
|
|
width: 100%; |
|
@@ -354,7 +503,12 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 1px; |
|
|
height: 1px; |
|
|
border-top: 1px solid; |
|
|
border-top: 1px solid; |
|
|
border-image: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)) 1 1; |
|
|
|
|
|
|
|
|
border-image: linear-gradient( |
|
|
|
|
|
225deg, |
|
|
|
|
|
rgba(81, 217, 202, 1), |
|
|
|
|
|
rgba(114, 100, 245, 1) |
|
|
|
|
|
) |
|
|
|
|
|
1 1; |
|
|
} |
|
|
} |
|
|
::v-deep .el-input__inner { |
|
|
::v-deep .el-input__inner { |
|
|
border: none; |
|
|
border: none; |
|
@@ -373,7 +527,7 @@ export default { |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
line-height: 50px; |
|
|
line-height: 50px; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
background: linear-gradient(316deg, #6EE4D7 0%, #37C4F1 32%, #A49AFC 100%); |
|
|
|
|
|
|
|
|
background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); |
|
|
border-radius: 25px; |
|
|
border-radius: 25px; |
|
|
} |
|
|
} |
|
|
.upAndBottomBtn { |
|
|
.upAndBottomBtn { |
|
@@ -409,9 +563,8 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.bottom { |
|
|
.bottom { |
|
|
|
|
|
|
|
|
::v-deep .van-tabbar-item { |
|
|
::v-deep .van-tabbar-item { |
|
|
color: rgba(51, 51, 51, 1)!important; |
|
|
|
|
|
|
|
|
color: rgba(51, 51, 51, 1) !important; |
|
|
font-size: 10px !important; |
|
|
font-size: 10px !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@@ -422,8 +575,8 @@ export default { |
|
|
width: 100vw; |
|
|
width: 100vw; |
|
|
height: 110vh; |
|
|
height: 110vh; |
|
|
z-index: 99999; |
|
|
z-index: 99999; |
|
|
color:#333; |
|
|
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
|
|
|
|
|
color: #333; |
|
|
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
&-in { |
|
|
&-in { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 40%; |
|
|
top: 40%; |
|
@@ -449,12 +602,12 @@ export default { |
|
|
} |
|
|
} |
|
|
.tabSheet { |
|
|
.tabSheet { |
|
|
height: 280px; |
|
|
height: 280px; |
|
|
padding: 10px; |
|
|
|
|
|
padding-bottom: 0px; |
|
|
padding-bottom: 0px; |
|
|
background-color: #f9f9f9; |
|
|
background-color: #f9f9f9; |
|
|
&-title { |
|
|
&-title { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 0 10px; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
font-size: 13px; |
|
|
font-size: 13px; |
|
|
line-height: 40px; |
|
|
line-height: 40px; |
|
@@ -466,15 +619,16 @@ export default { |
|
|
height: 16px; |
|
|
height: 16px; |
|
|
} |
|
|
} |
|
|
.yesImg { |
|
|
.yesImg { |
|
|
margin-top: -13px; |
|
|
|
|
|
|
|
|
margin-top: -3px; |
|
|
width: 24px; |
|
|
width: 24px; |
|
|
height: 16px; |
|
|
height: 16px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
&-content { |
|
|
&-content { |
|
|
height: 220px; |
|
|
height: 220px; |
|
|
|
|
|
padding: 0 10px; |
|
|
background-color: #f9f9f9; |
|
|
background-color: #f9f9f9; |
|
|
::v-deep .van-tab{ |
|
|
|
|
|
|
|
|
::v-deep .van-tab { |
|
|
background-color: #f9f9f9; |
|
|
background-color: #f9f9f9; |
|
|
} |
|
|
} |
|
|
::v-deep .van-tab--active { |
|
|
::v-deep .van-tab--active { |
|
@@ -499,31 +653,32 @@ export default { |
|
|
width: 170px; |
|
|
width: 170px; |
|
|
height: 50px; |
|
|
height: 50px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
background: rgba(186,186,189,0.5); |
|
|
|
|
|
|
|
|
background: rgba(186, 186, 189, 0.5); |
|
|
border-radius: 24px; |
|
|
border-radius: 24px; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
img { |
|
|
img { |
|
|
width: 32px; |
|
|
width: 32px; |
|
|
} |
|
|
} |
|
|
>div { |
|
|
|
|
|
|
|
|
> div { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
margin-left: 12px; |
|
|
margin-left: 12px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.active { |
|
|
.active { |
|
|
background: #7264F5; |
|
|
|
|
|
|
|
|
background: #7264f5; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.list::-webkit-scrollbar { |
|
|
.list::-webkit-scrollbar { |
|
|
width:0; |
|
|
|
|
|
|
|
|
width: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.myTab { |
|
|
.myTab { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
margin: 10px 0; |
|
|
padding: 5px; |
|
|
padding: 5px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
background-color: #EEEEEE; |
|
|
|
|
|
|
|
|
background-color: #eeeeee; |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
&-item { |
|
|
&-item { |
|
|
width: 50%; |
|
|
width: 50%; |
|
@@ -531,7 +686,7 @@ export default { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
line-height: 30px; |
|
|
line-height: 30px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
background-color: #EEEEEE; |
|
|
|
|
|
|
|
|
background-color: #eeeeee; |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
img { |
|
|
img { |
|
|
width: 20px; |
|
|
width: 20px; |
|
@@ -544,7 +699,7 @@ export default { |
|
|
} |
|
|
} |
|
|
&-show { |
|
|
&-show { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 190px; |
|
|
|
|
|
|
|
|
height: 170px; |
|
|
&-title { |
|
|
&-title { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
i { |
|
|
i { |
|
@@ -553,7 +708,7 @@ export default { |
|
|
margin-left: 3px; |
|
|
margin-left: 3px; |
|
|
width: 23px; |
|
|
width: 23px; |
|
|
height: 3px; |
|
|
height: 3px; |
|
|
background: #7264F5; |
|
|
|
|
|
|
|
|
background: #7264f5; |
|
|
border-radius: 2px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@@ -564,10 +719,8 @@ export default { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: start; |
|
|
justify-content: start; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
&-list::-webkit-scrollbar { |
|
|
|
|
|
width:0; |
|
|
|
|
|
} |
|
|
|
|
|
&-item { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&-item { |
|
|
position: relative; |
|
|
position: relative; |
|
|
margin-right: 9px; |
|
|
margin-right: 9px; |
|
|
margin-top: 10px; |
|
|
margin-top: 10px; |
|
@@ -587,7 +740,7 @@ export default { |
|
|
top: 5px; |
|
|
top: 5px; |
|
|
right: 5px; |
|
|
right: 5px; |
|
|
z-index: 99999; |
|
|
z-index: 99999; |
|
|
display: block!important; |
|
|
|
|
|
|
|
|
display: block !important; |
|
|
float: right; |
|
|
float: right; |
|
|
width: 12px; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
height: 12px; |
|
@@ -598,11 +751,10 @@ export default { |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
} |
|
|
} |
|
|
&:nth-child(4n) { |
|
|
&:nth-child(4n) { |
|
|
margin-right: 0px!important; |
|
|
|
|
|
|
|
|
margin-right: 0px !important; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
&-active { |
|
|
&-active { |
|
|
|
|
|
|
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: -3px; |
|
|
top: -3px; |
|
|
left: -3px; |
|
|
left: -3px; |
|
@@ -611,8 +763,12 @@ export default { |
|
|
width: 86px; |
|
|
width: 86px; |
|
|
height: 126px; |
|
|
height: 126px; |
|
|
border-radius: 12px; |
|
|
border-radius: 12px; |
|
|
|
|
|
|
|
|
background: linear-gradient(225deg, rgba(81, 217, 202, 1), rgba(114, 100, 245, 1)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background: linear-gradient( |
|
|
|
|
|
225deg, |
|
|
|
|
|
rgba(81, 217, 202, 1), |
|
|
|
|
|
rgba(114, 100, 245, 1) |
|
|
|
|
|
); |
|
|
.whiteBox { |
|
|
.whiteBox { |
|
|
transition: all 0.5s; |
|
|
transition: all 0.5s; |
|
|
width: 100%; |
|
|
width: 100%; |
|
@@ -634,7 +790,7 @@ export default { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%,-50%); |
|
|
|
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
input { |
|
|
input { |
|
|
width: 100%; |
|
|
width: 100%; |
|
@@ -645,5 +801,9 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 隐藏滚动条 |
|
|
|
|
|
.myTab-show-list::-webkit-scrollbar { |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |