This commit is contained in:
MoreStrive
2024-07-02 16:03:24 +07:00
parent 4bf217c207
commit ee5c6f40f1
5 changed files with 72 additions and 95 deletions
@@ -74,7 +74,7 @@ const parseData = computed(() => {
class="article_video_thumb"
:style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
>
<i class="ri-play-circle-line"></i>
<Icon name="ri:play-circle-line" />
</div>
<div class="article_video_content">
<div>
@@ -85,20 +85,9 @@ const parseData = computed(() => {
</div>
</div>
</template>
<div v-else>
<div class="empty-box">
<div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
<i class="ri-play-circle-line text-white"></i>
</div>
<div class="empty-block">
<div style="height: 8px"></div>
<div style="height: 8px"></div>
</div>
</div>
</div>
</div>
<div v-html="LAYOUT_PARSE.styleClasses"></div>
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
</article>
</template>
@@ -107,6 +96,7 @@ const parseData = computed(() => {
.article_video_container {
display: flex;
align-items: center;
.article_video_thumb {
background-size: cover;
background-repeat: no-repeat;
@@ -116,8 +106,10 @@ const parseData = computed(() => {
width: 250px;
height: 140px;
border-radius: 2px;
margin: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: '';
position: absolute;
@@ -128,17 +120,18 @@ const parseData = computed(() => {
top: 0px;
left: 0px;
}
i {
svg {
font-size: 40px;
color: white;
position: relative;
z-index: 2;
}
}
.article_video_content {
position: relative;
z-index: 2;
margin: 10px 0px;
padding: 10px;
> div {
background: #ffffff;
}