Browse Source

feat: 样式美化

dev_YWQ
congzc 1 year ago
parent
commit
3026714a74
3 changed files with 160 additions and 65 deletions
  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 View File

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

+ 84
- 47
src/views/createVideo/index.vue View File

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


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

.left { .left {
width: 70%; width: 70%;
height: 100%; 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 { &-top {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -179,53 +188,60 @@ let languageOptions = reactive([
.uploadBtn { .uploadBtn {
position: relative; position: relative;
} }

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

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

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

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

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

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

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

.icon { .icon {
position: absolute; position: absolute;
right: 2px; right: 2px;
width: 30px; width: 30px;
height: 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; text-align: center;
border: 2px solid #000;
border-radius: 50%;
} }
} }

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

.ai { .ai {
width: 100%; width: 100%;

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

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

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

p { p {
height: 30px; height: 30px;
} }

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

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

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

.tabs { .tabs {
height: 100%; height: 100%;

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

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

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

p { p {
margin: 10px 0; margin: 10px 0;
} }

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

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

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

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

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


+ 68
- 18
src/views/myCreating/index.vue View File

@@ -48,20 +48,25 @@
class="elDialog" class="elDialog"
v-model="showDialog" v-model="showDialog"
:title="presentVideo" :title="presentVideo"
width="60%"
width="40%"
center center
> >
<div>
<div class="videoBox">
<video <video
controls="true" 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" 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> ></video>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-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> </span>
</template> </template>
</el-dialog> </el-dialog>
@@ -70,7 +75,7 @@
<script setup> <script setup>
let title = ref(""); let title = ref("");
// 弹窗显示隐藏 // 弹窗显示隐藏
let showDialog = ref(true);
let showDialog = ref(false);
// 当前作品 // 当前作品
let presentVideo = ref(""); let presentVideo = ref("");
// 点击作品事件 // 点击作品事件
@@ -96,6 +101,13 @@ function mouseenter(item) {
background-color: #fff; background-color: #fff;
} }


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

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


.elDialog { .elDialog {
div {
.videoBox {
display: flex;
justify-content: space-between;
width: 100%; width: 100%;
height: 400px; 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> </style>

Loading…
Cancel
Save