|
|
@@ -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> |
|
|
|
<span>视频时长: 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> |
|
|
|
<span>视频时长: 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> |