-
+
+
-
+
+
-
-
+
-
+
-
-
+
-
-
+
+ +
-
-
![]()
-
{{ item.title }}
+
+
![]()
+
+ s
@@ -114,18 +121,26 @@
{{ $t("createVideo.confirm") }}
+
-
-
-
+
🕬
+
🕗
{{ $t("createVideo.languages") }}
+
+ :label="item.name"
+ :value="item.id"
+ >
+
![]()
+
{{ item.name }}
+
{{ $t("createVideo.voices") }}
+
{{ $t("createVideo.styles") }}
+
-
{{
- $t("createVideo.generateVideo")
- }}
+
+
+ {{
+ $t("createVideo.generateVideo")
+ }}
+
+
+
+ 上传音频
+
+
+ +
+
+
+
+
+
+ 录制音频
+
@@ -281,25 +333,38 @@
+
+
@@ -472,7 +735,7 @@ onMounted(() => {
position: relative;
width: 100%;
// height: 65%;
- height: 600px;
+ height: 580px;
.uploadBtn {
position: relative;
@@ -600,31 +863,48 @@ onMounted(() => {
}
.faceList {
+ padding: 8px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
- height: 160px;
+ height: 180px;
overflow-y: scroll;
.faceItem {
position: relative;
- margin-right: 10px;
- margin-bottom: 10px;
+ margin-right: 35px;
+ margin-bottom: 35px;
width: 150px;
height: 150px;
- padding: 0 25px;
+ // padding: 0 25px;
line-height: 150px;
text-align: center;
border-radius: 50%;
- border: 2px solid #000;
- overflow: hidden;
- input {
+ background-color: #fbf8f8;
+ // border: 2px solid #fff;
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
+ // overflow: hidden;
+ transition: all 0.3s;
+ .imgBox {
+ cursor: pointer;
position: absolute;
top: 0;
left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 3;
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ background-color: #fbf8f8;
+ overflow: hidden;
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ }
}
.uploadImg {
line-height: 145px;
@@ -632,16 +912,28 @@ onMounted(() => {
font-weight: 700;
text-align: center;
}
- p {
- height: 30px;
- }
- img {
- width: 100%;
- }
- .img {
- width: 100px;
- height: 100px;
+ }
+ .faceItemActive {
+ position: relative;
+ transition: all 0.3s;
+ &::before {
+ content: "";
+ position: absolute;
+ // top: -3px;
+ // right: -7px;
+ // left: -3px;
+ // bottom: -7px;
+ top: -3px;
+ right: -3px;
+ left: -3px;
+ bottom: -3px;
+ z-index: 2;
border-radius: 50%;
+ background: linear-gradient(
+ 225deg,
+ rgb(81 217 202 / 100%),
+ rgb(114 100 245 / 100%)
+ );
}
}
}
@@ -664,7 +956,6 @@ onMounted(() => {
.text {
padding: 10px;
border: 1px solid #000;
-
.el-button {
float: right;
margin-top: 10px;
@@ -685,9 +976,18 @@ onMounted(() => {
height: 50px;
margin-top: 10px;
}
+
+ :deep(.el-input .is-focus) {
+ // box-shadow: none !important;
+ // box-shadow: 0 0 0 1px #000 !important;
+ }
}
.card2 {
padding: 10px;
+ .el-icon {
+ // color: red;
+ vertical-align: text-top;
+ }
> div {
position: relative;
margin-top: 10px;
@@ -704,6 +1004,7 @@ onMounted(() => {
}
.uploadAudio {
padding: 20px;
+ // margin-top: 30px;
margin-bottom: 20px;
height: 70px;
.btnBox {
@@ -733,18 +1034,35 @@ onMounted(() => {
height: 170px;
}
.uploadVideo {
+ text-align: center;
+ margin-bottom: 20px;
height: 100px;
+ font-size: 50px;
+ font-weight: 700;
+ line-height: 100px;
input {
position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
width: 100%;
height: 100%;
}
}
+ > .el-button {
+ width: 100%;
+ height: 50px;
+ margin-top: 10px;
+ // background-color: #000;
+ }
}
.card3 {
.text {
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index d8ba0ca..139af0c 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -114,13 +114,6 @@
-
-
- {{ $t("createVideo.confirm") }}
-
+
+
-
-
-