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