تغییر نمایش صفحه content_category/26

src/components/Widgets/ContentCategory/ContentCategoryShow/ContentCategoryShow.vue

@@ -23,7 +23,9 @@
                   :show-expand-button="false"
                   :show-reload-button="false">
       <template #entity-index-table-item-cell="{inputData}">
-        <content-item :content="getContent(inputData.props.row)" />
+        <div class="col-md-4 col-12">
+          <content-item :content="getContent(inputData.props.row)" />
+        </div>
       </template>
     </entity-index>
     <q-banner v-if="showRelatedProduct"

src/components/Widgets/ContentCategory/ContentCategoryShow/ContentItem.vue

@@ -1,42 +1,51 @@
 <template>
-  <div class="col-md-4 col-sm-6 col-12">
-    <q-card flat
-            class="ContentItem"
-            @click="goToContentPage">
-      <div class="thumbnail">
-        <q-img :src="content.thumbnail" />
-      </div>
-      <div class="title ellipsis-2-lines">
-        <router-link :to="{name: 'Public.Content.Show', params: {id: content.id}}">
-          {{content.title}}
-        </router-link>
-      </div>
-      <q-card-actions class="action-section">
-        <q-btn color="primary"
-               class="btn-show-content"
-               :to="{name: 'Public.Content.Show', params: {id: content.id}}">
-          مشاهده جزئیات
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </div>
+  <q-card class="ContentItem"
+          flat>
+    <div class="thumbnail"
+         @click="goToContentPageShow">
+      <q-img :src="content.thumbnail" />
+    </div>
+    <div class="title ellipsis-2-lines"
+         @click="goToContentPageShow">
+      {{ content.title }}
+    </div>
+    <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>
 
 <script>
 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,
       default: new Content()
     }
   },
+  data() {
+    return {
+    }
+  },
   methods: {
-    goToContentPage () {
+    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 } })
+    },
+    miladiToShamsi () {
+      return Assist.miladiToShamsi(this.content.creation_time, 'jD jMMMM jYYYY ساعت HH:mm')
     }
   }
 })
@@ -44,34 +53,38 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .ContentItem {
-  background: #F6F6F6;
-  border-radius: 8px;
-  border: 1px solid #DFE1EC;
-  padding: 11px 24px 24px 24px;
-  margin: 8px;
+  background-color: #f6f6f6;
+  display: flex;
+  flex-flow: column;
   position: relative;
+  cursor: pointer;
+  padding: 16px;
+  margin: 8px;
+  border-radius: 16px;
   .thumbnail {
-    padding: 0 34px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
     .q-img {
+      width: 100%;
+      border-radius: 8px;
     }
   }
   .title {
-    font-size: 18px;
-    color: #212121;
     text-align: center;
-    margin-bottom: 8px;
-    max-height: 48px;
-    min-height: 48px;
-    a {
-      color: #212121;
-    }
+    margin-bottom: 16px;
+    font-size: 16px;
   }
-  .action-section {
-    .btn-show-content {
-      width: 100%;
-      height: 48px;
-    }
+  .description {
+    position: absolute;
+    left: 21px;
+    color: #FFFFFF;
+    font-size: 16px;
+    display: none;
+  }
+  .show-content-btn {
+    width: 100%;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    height: 60px;
   }
 }
 </style>