|
@@ -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; |
|
|