ソースを参照

feat: 样式美化

dev_YWQ
congzc 1年前
コミット
3026714a74
3個のファイルの変更160行の追加65行の削除
  1. +8
    -0
      src/styles/my.scss
  2. +84
    -47
      src/views/createVideo/index.vue
  3. +68
    -18
      src/views/myCreating/index.vue

+ 8
- 0
src/styles/my.scss ファイルの表示

@@ -31,3 +31,11 @@ p {
display: none;
width: 0;
}
// 主题色
.themeColor {
background: linear-gradient(
225deg,
rgb(81 217 202 / 100%),
rgb(114 100 245 / 100%)
);
}

+ 84
- 47
src/views/createVideo/index.vue ファイルの表示

@@ -8,16 +8,8 @@
<el-row class="justify-between">
<!-- title框 -->
<div class="flex justify-between" style="width: 300px">
<el-icon
style="
text-align: center;
width: 32px;
height: 32px;
color: #8c939d;
"
><Edit
/></el-icon>
<el-input v-model="title" placeholder="输入标题" />
<el-icon class="icon-edit"><i-ep-edit /></el-icon>
</div>
<!-- 上传按钮 -->
<button class="uploadBtn">
@@ -35,7 +27,7 @@
<!-- 中间展示大图 -->
<div class="noImg">
<div class="trueImg inmiddle">
<div class="icon"></div>
<div class="icon"></div>
</div>
<div class="upload inmiddle">
+
@@ -55,11 +47,11 @@
<div class="aiAvatar"></div>
<div style="margin-left: 20px">Generate By Ai</div>
</div>
<div class="faceList">
<div class="faceItem" v-for="item in 7">
<div class="faceList scrolly">
<div class="faceItem" v-for="item in 7" :key="item">
<div class="img"></div>
<!-- <img src="" alt="" /> -->
<p>name</p>
<p>{{ item }}name</p>
</div>
</div>
</div>
@@ -163,14 +155,31 @@ let languageOptions = reactive([

<style lang="scss" scoped>
.page {
height: calc(100vh - 84px);
background-color: #fff;
// height: calc(100vh - 84px);
height: 844px;
padding: 20px 0 0 40px;
background-color: #fff;
}

.left {
width: 70%;
height: 100%;
// background-color: red;

:deep(.el-input__wrapper) {
border: none;
border-bottom: 2px solid #000;
border-radius: 0;
box-shadow: none;
}

.el-icon.icon-edit {
width: 35px;
height: 35px;
font-size: 35px;
color: #8c939d;
text-align: center;
}

&-top {
position: relative;
width: 100%;
@@ -179,53 +188,60 @@ let languageOptions = reactive([
.uploadBtn {
position: relative;
}

.bigImg {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
width: 80%;
height: 88%;
margin-top: 20px;

img {
max-width: 100%;
max-height: 100%;
}
}

.noImg {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #000;

.trueImg {
top: 60px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
border-radius: 50%;
}

.upload {
top: 200px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 100px;
font-size: 50px;
line-height: 100px;
text-align: center;
background-color: pink;
border-radius: 50%;
}

.falseImg {
top: 350px;
width: 500px;
height: 100px;
// background-color: #795562;
display: flex;
justify-content: space-evenly;
width: 500px;
height: 100px;

> div {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
border-radius: 50%;
}
}
}
@@ -235,97 +251,116 @@ let languageOptions = reactive([
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
opacity: 0;
}

.icon {
position: absolute;
right: 2px;
width: 30px;
height: 30px;
border: 1px solid #000;
border-radius: 50%;
line-height: 30px;
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-align: center;
border: 2px solid #000;
border-radius: 50%;
}
}

&-bottom {
// overflow: hidden;
position: absolute;
bottom: 10px;
width: 70%;
width: 100%;
height: 32%;
margin-top: 10px;

.ai {
width: 100%;

.aiAvatar {
margin-left: 25px;
width: 100px;
height: 100px;
border-radius: 50%;
margin-left: 25px;
background-color: pink;
border-radius: 50%;
}
}

.faceList {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
height: 130px;

.faceItem {
line-height: 30px;
padding: 0 25px;
width: 150px;
height: 150px;
padding: 0 25px;
line-height: 30px;
text-align: center;

p {
height: 30px;
}

.img {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
border-radius: 50%;
}
}
}
}
}

.right {
height: 100%;
width: 25%;
height: 100%;
background-color: green;

:deep(.el-tabs--border-card) {
border: none;
font-size: 20px;
border: none;
}

.tabs {
height: 100%;

.card3 {
.text {
border: 1px solid #000;
padding: 10px;
border: 1px solid #000;

.el-button {
margin-top: 10px;
float: right;
margin-top: 10px;
}

:deep(.el-textarea__inner) {
box-shadow: none;
resize: none;
box-shadow: none;
}
}

p {
margin: 10px 0;
}

> .el-button {
width: 100%;
height: 50px;
margin-top: 10px;
}
}

:deep(.el-tabs__item.is-active) {
background-color: #000;
color: #909393;
background-color: #000;
}

:deep(.el-tabs__nav) {
width: 100%;
}
@@ -333,9 +368,11 @@ let languageOptions = reactive([
:deep(.el-tabs__item) {
width: 34%;
}

:deep(.el-tabs__item:hover) {
color: #909393;
}

:deep(.el-tabs__content) {
height: calc(100% - 60px);
padding: 0;


+ 68
- 18
src/views/myCreating/index.vue ファイルの表示

@@ -48,20 +48,25 @@
class="elDialog"
v-model="showDialog"
:title="presentVideo"
width="60%"
width="40%"
center
>
<div>
<div class="videoBox">
<video
controls="true"
class="inmiddle"
class=""
src="https://wenlian.wenzhou.gov.cn:8001/upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4"
></video>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="showDialog = false">下载</el-button>
<el-button @click="showDialog = false"> 删除 </el-button>
<el-button type="primary" @click="showDialog = false"
><el-icon class="icon-delete"><i-ep-download /></el-icon
>下载</el-button
>
<el-button @click="showDialog = false">
<el-icon class="icon-delete"><i-ep-delete /></el-icon>删除
</el-button>
</span>
</template>
</el-dialog>
@@ -70,7 +75,7 @@
<script setup>
let title = ref("");
// 弹窗显示隐藏
let showDialog = ref(true);
let showDialog = ref(false);
// 当前作品
let presentVideo = ref("");
// 点击作品事件
@@ -96,6 +101,13 @@ function mouseenter(item) {
background-color: #fff;
}

:deep(.el-input__wrapper) {
border: none;
border-bottom: 2px solid #000;
border-radius: 0;
box-shadow: none;
}

.el-icon.icon-edit {
width: 32px;
height: 32px;
@@ -228,24 +240,62 @@ function mouseenter(item) {
}

.elDialog {
div {
.videoBox {
display: flex;
justify-content: space-between;
width: 100%;
height: 400px;
}
padding: 0 20px;

video {
width: 100%;
height: 350px;
video {
width: 90%;
height: 400px;
margin-top: -10px;
margin-left: 5%;
}
}

:deep(.el-dialog) {
overflow: hidden;
border-radius: 25px;
}
.dialog-footer {
display: flex;
justify-content: space-between;

:deep(.el-button) {
color: #fff;
background-color: #000 !important;
border: none;
border-radius: 10px;

&:hover {
background: linear-gradient(
225deg,
rgb(81 217 202 / 100%),
rgb(114 100 245 / 100%)
);
}
}

:deep(.el-dialog__body) {
padding: 0;
overflow: hidden;
:deep(.el-icon) {
margin-right: 5px;
font-weight: 700;
}
}
}

:deep(.el-dialog) {
overflow: hidden;
border-radius: 25px;
}
// :deep(.el-dialog__header) {
// }
:deep(.el-dialog__title) {
color: red;
}

:deep(.el-dialog__body) {
padding: 0;
}

:deep(.dialog__footer) {
padding: 0;
}
</style>

読み込み中…
キャンセル
保存