From d4f01cb0c677e5f250aa26b3ab118554cc280714 Mon Sep 17 00:00:00 2001 From: congzc Date: Mon, 5 Jun 2023 15:31:30 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E8=B7=AF=E7=94=B1=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC=E9=BB=91=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/createVideo/index copy.vue | 560 +++++++++++++++++++++------ src/views/createVideo/index.vue | 14 +- 2 files changed, 443 insertions(+), 131 deletions(-) diff --git a/src/views/createVideo/index copy.vue b/src/views/createVideo/index copy.vue index adf4354..0fb95c0 100644 --- a/src/views/createVideo/index copy.vue +++ b/src/views/createVideo/index copy.vue @@ -4,7 +4,7 @@
-
+
@@ -15,10 +15,15 @@
-
+
-
+
-
+ +
-
+
+ - - +
-
+
×
×
×
@@ -79,23 +83,26 @@
-
- + - - +
+ +
- - -

{{ 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") + }}
+ +

+ + 上传音频 +

+
+ + + + +
+

+ + 录制音频 +

- -->
+ + + {{ + $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") }} -
+ +
+ +
- - -