تغییر نمایش ویجت کروسل محتوا برای سازگاری با نمایش جدید

src/components/Widgets/Content/ContentCarousel/componetns/ContentItem.vue

@@ -1,40 +1,20 @@
 <template>
-  <q-card flat
-          class="content-item">
-    <div class="thumbnail">
-      <img class="thumbnail-img"
-           :src="content.thumbnail"
-           @click="goToPage">
+  <q-card class="ContentItem"
+          flat>
+    <div class="thumbnail"
+         @click="goToContentPageShow">
+      <q-img :src="content.thumbnail" />
     </div>
-    <div class="infos">
-      <div class="title ellipsis-2-lines">
-        <router-link :to="{name: 'Public.Content.Show', params: {id: content.id}}">
-          {{ content.title }}
-        </router-link>
-      </div>
-      <div class="date">
-        <q-icon name="calendar_month"
-                size="20px" />
-        {{ miladiToShamsi() }}
-      </div>
+    <div class="title ellipsis-2-lines"
+         @click="goToContentPageShow">
+      {{ content.title }}
     </div>
-    <q-card-actions class="action-section">
-      <q-btn color="primary"
-             class="btn-show-content"
-             :to="{name: 'Public.Content.Show', params: {id: content.id}}">
-        مشاهده جزییات
-        <svg xmlns="http://www.w3.org/2000/svg"
-             width="18.387"
-             height="11.502"
-             viewBox="0 0 18.387 11.502">
-          <path id="Combined_Shape"
-                data-name="Combined Shape"
-                d="M-9.338,11.408a.748.748,0,0,0,.388-.656V6.5h8.2A.751.751,0,0,0,0,5.75.75.75,0,0,0-.75,5h-8.2V.75A.751.751,0,0,0-9.338.093.769.769,0,0,0-9.7,0a.735.735,0,0,0-.4.115l-7.938,5a.747.747,0,0,0-.35.635.742.742,0,0,0,.35.634l7.938,5a.751.751,0,0,0,.4.116A.746.746,0,0,0-9.338,11.408ZM-10.45,9.392l-5.78-3.641,5.78-3.642Z"
-                transform="translate(18.387)"
-                fill="#fff" />
-        </svg>
-      </q-btn>
-    </q-card-actions>
+    <content-item-categories :content="content" />
+    <q-btn color="primary"
+           class="show-content-btn"
+           :to="{name: 'Public.Content.Show', params: {id: content.id}}">
+      مشاهده
+    </q-btn>
   </q-card>
 </template>
 
@@ -42,9 +22,11 @@
 import { defineComponent } from 'vue'
 import Assist from 'src/assets/js/Assist.js'
 import { Content } from 'src/models/Content.js'
+import ContentItemCategories from '../../../ContentCategory/ContentCategoryList/ContentItemCategories.vue'
 
 export default defineComponent({
   name: 'ContentItem',
+  components: { ContentItemCategories },
   props: {
     content: {
       type: Content,
@@ -56,6 +38,9 @@ export default defineComponent({
     }
   },
   methods: {
+    goToContentPageShow () {
+      this.$router.push({ name: 'Public.Content.Show', params: { id: this.content.id } })
+    },
     goToPage () {
       this.$router.push({ name: 'Public.Content.Show', params: { id: this.content.id } })
     },
@@ -67,62 +52,39 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.content-item {
-  width: 100%;
-  background-color: #F6F6F6;
-  border-radius: 8px;
+.ContentItem {
+  background-color: #f6f6f6;
+  display: flex;
+  flex-flow: column;
   position: relative;
-  z-index: 1;
-
+  cursor: pointer;
+  padding: 16px;
+  margin: 8px;
+  border-radius: 16px;
   .thumbnail {
-    padding: 0;
-    cursor: pointer;
-    .thumbnail-img {
+    margin-bottom: 16px;
+    .q-img {
       width: 100%;
-      height: auto;
+      border-radius: 8px;
     }
   }
-  .infos {
+  .title {
+    text-align: center;
+    margin-bottom: 16px;
+    font-size: 16px;
+  }
+  .description {
     position: absolute;
-    left: 0;
-    padding-top: 12px;
-    bottom: 60px;
-    width: 100%;
-    z-index: 2;
-    -webkit-box-shadow: inset 0px -200px 55px -90px rgba(0,0,0,0.32);
-    -moz-box-shadow: inset 0px -200px 55px -90px rgba(0,0,0,0.32);
-    box-shadow: inset 0px -200px 55px -90px rgba(0,0,0,0.32);
-    .title {
-      padding: 0 15px;
-      text-align: left;
-      margin-bottom: 49px;
-      a {
-        color: white;
-        font-size: 16px;
-        font-weight: bold;
-      }
-    }
-    .date {
-      padding: 0 15px;
-      text-align: left;
-      margin-bottom: 24px;
-      color: white;
-      font-size: 16px;
-      font-weight: normal;
-      .q-icon {
-        color: #EAC38A;
-        margin-right: 12.5px;
-      }
-    }
+    left: 21px;
+    color: #FFFFFF;
+    font-size: 16px;
+    display: none;
   }
-  .action-section {
-    padding: 0;
-    .btn-show-content {
-      width: 100%;
-      height: 60px;
-      border-top-right-radius: 0;
-      border-top-left-radius: 0;
-    }
+  .show-content-btn {
+    width: 100%;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    height: 60px;
   }
 }
 </style>