thainv-dev:

components/dynamic-page/page-component/templates/articles/cards/Audio.vue

@@ -78,14 +78,15 @@ const parseData = computed(() => {
       </nuxt-link>
     </div>
   </article>
-  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
 </template>
 
 <style lang="scss">
 .card-audio {
   position: relative;
   width: 100%;
-  padding-bottom: 56.25%; //tỷ lệ 9 /16;;
+  padding-bottom: calc((16 / 9) * 100%);
+  overflow: hidden;
 
   img {
     position: absolute;
@@ -98,7 +99,7 @@ const parseData = computed(() => {
   .card-audio__content {
     position: absolute;
     width: 100%;
-
+    max-height: 100%;
     bottom: 0;
     padding: 20px 30px;
     z-index: 3;

components/dynamic-page/page-component/templates/articles/cards/Card.vue

@@ -25,32 +25,6 @@ const parseData = computed(() => {
 </script>
 
 <template>
-  <!-- <article class="article-card-default">
-    <div class="article-card-default__content">
-      <template v-if="currentArticle.tags && currentArticle?.tags.length > 0">
-        <nuxt-link class="article-card-default__tag" :to="`/${currentArticle?.tags[0].code}`">
-          <h5>{{ currentArticle?.tags[0].title }}</h5>
-        </nuxt-link>
-      </template>
-
-      <nuxt-link class="article-card-default__title" :to="`/bai-viet/${currentArticle.code}`">
-        <h2 v-html="currentArticle.title"></h2>
-        <p v-html="currentArticle.intro"></p>
-      </nuxt-link>
-
-      <div class="article-card-default__bottom">
-        <span>{{ formatDate(String(currentArticle.createdOn), "DD/MM/YYYY | HH:mm") }}</span> /
-        <nuxt-link :to="`/${currentArticle.category?.code}`"> {{ currentArticle.category?.title }}</nuxt-link>
-      </div>
-    </div>
-    <div class="article-card-default__thumbnail">
-      <figure>
-        <nuxt-link :to="`bai-viet${currentArticle.code}`">
-          <img :src="currentArticle?.thumbnail ? currentArticle?.thumbnail : 'http://picsum.photos/1024/600?random=1'" :alt="currentArticle?.title" />
-        </nuxt-link>
-      </figure>
-    </div>
-  </article> -->
   <article
   v-if="parseData"
     class="basic-article border-custom"
@@ -95,7 +69,7 @@ const parseData = computed(() => {
       </div>
     </div>
   </article>
-  <div v-html="LAYOUT_PARSE.styleClasses"></div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
 </template>
 
 <style lang="scss" scoped>