Fix
This commit is contained in:
Mr Swift
@@ -4,14 +4,39 @@
|
||||
<el-collapse :key="item._id + 'co_parent'" accordion @change="seeAnnouncement">
|
||||
<el-collapse-item :key="item._id + 'co_item'" :name="item._id">
|
||||
<template slot="title">
|
||||
<h3>{{ item.title }}</h3>
|
||||
</template>
|
||||
<div>
|
||||
<p>{{ item.caption }}</p>
|
||||
<h3>{{ item.title }}</h3>
|
||||
</template>
|
||||
<div v-if="!item.image" class="col-12">
|
||||
<p>{{ item.caption }}</p>
|
||||
|
||||
</div>
|
||||
<div v-if="item.image" class="row">
|
||||
<div class="col-md-5 col-sm-12">
|
||||
<p>{{ item.caption }}</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-7 col-sm-12">
|
||||
<p>برای نمایش بهتر کلیک کنید</p>
|
||||
<div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image">
|
||||
<img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<!-- The Modal -->
|
||||
<div v-if="modalVisible" id="myModal" class="modal">
|
||||
|
||||
<!-- The Close Button -->
|
||||
<span @click="closeModal" class="close">×</span>
|
||||
|
||||
<!-- Modal Content (The Image) -->
|
||||
<img id="img01" class="modal-content" :src="modalImageUrl">
|
||||
|
||||
|
||||
</div>
|
||||
<h3 v-if="!agentAnnouncements.length" style="text-align: center; margin-top: 50px">هیچ اطلاعیه ای موجود نیست</h3>
|
||||
</user-dashboard-container>
|
||||
</template>
|
||||
@@ -21,7 +46,10 @@ export default {
|
||||
name: 'AccountAgentAnnouncements',
|
||||
layout: 'user',
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
modalVisible:false,
|
||||
modalImageUrl:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
agentAnnouncements() {
|
||||
@@ -29,6 +57,14 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal(image) {
|
||||
this.modalVisible = true;
|
||||
this.modalImageUrl = image;
|
||||
|
||||
},
|
||||
closeModal() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
seeAnnouncement(id) {
|
||||
if (!id) return
|
||||
const item = this.agentAnnouncements.find(item => item._id === id)
|
||||
@@ -37,3 +73,101 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fr-image{
|
||||
|
||||
height: 17rem;
|
||||
margin: auto;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 17rem;
|
||||
object-fit: cover;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
/* Style the Image Used to Trigger the Modal */
|
||||
#myImg {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#myImg:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
|
||||
/* Hidden by default */
|
||||
position: fixed;
|
||||
/* Stay in place */
|
||||
z-index: 50;
|
||||
/* Sit on top */
|
||||
padding-top: 100px;
|
||||
/* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
height: 100%;
|
||||
/* Full height */
|
||||
overflow: auto;
|
||||
/* Enable scroll if needed */
|
||||
background-color: rgb(0, 0, 0);
|
||||
/* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
/* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content (Image) */
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Add Animation - Zoom in the Modal */
|
||||
.modal-content {
|
||||
animation-name: zoom;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 100% Image Width on Smaller Screens */
|
||||
@media only screen and (max-width: 700px) {
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,32 +2,46 @@
|
||||
<user-dashboard-container page-class="announcements" panel-title="اعلانات">
|
||||
<div v-for="item in userAnnouncements" :key="item._id" class="item" :class="!item.seen && 'unread'">
|
||||
<el-collapse :key="item._id + 'co_parent'" accordion @change="seeAnnouncement">
|
||||
<el-collapse-item :key="item._id + 'co_item'" :name="item._id" >
|
||||
<el-collapse-item :key="item._id + 'co_item'" :name="item._id">
|
||||
<template slot="title">
|
||||
<h3>{{ item.title }}</h3>
|
||||
</template>
|
||||
<div v-if="!item.image" class="col-12">
|
||||
<p>{{ item.caption }}</p>
|
||||
<div v-if="!item.image" class="col-12">
|
||||
<p>{{ item.caption }}</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.image" class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<p>{{ item.caption }}</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="fr-image">
|
||||
<img :src="'/uploads/images/announcement/'+item.image" alt="">
|
||||
<p>برای نمایش بهتر کلیک کنید</p>
|
||||
<div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image">
|
||||
<img id="myImg" :src="'/uploads/images/announcement/' + item.image" alt="">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<!-- The Modal -->
|
||||
<div v-if="modalVisible" id="myModal" class="modal">
|
||||
|
||||
<!-- The Close Button -->
|
||||
<span @click="closeModal" class="close">×</span>
|
||||
|
||||
<!-- Modal Content (The Image) -->
|
||||
<img id="img01" class="modal-content" :src="modalImageUrl">
|
||||
|
||||
|
||||
</div>
|
||||
<h3 v-if="!userAnnouncements.length" style="text-align: center; margin-top: 50px">هیچ اعلانی موجود نیست</h3>
|
||||
</user-dashboard-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -35,32 +49,132 @@ export default {
|
||||
name: 'AccountUserAnnouncements',
|
||||
layout: 'user',
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
modalVisible:false,
|
||||
modalImageUrl:''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userAnnouncements() {
|
||||
return this.$store.state.front.userAnnouncements
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openModal(image) {
|
||||
this.modalVisible = true;
|
||||
this.modalImageUrl = image;
|
||||
|
||||
},
|
||||
closeModal() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
seeAnnouncement(id) {
|
||||
if (!id) return
|
||||
const item = this.userAnnouncements.find(item => item._id === id)
|
||||
if (!item.seen) this.$userSocket.emit('user:updateAnnouncement', id)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fr-image{
|
||||
width: 17rem;
|
||||
height: 11rem;
|
||||
.fr-image {
|
||||
|
||||
height: 17rem;
|
||||
margin: auto;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
height: 17rem;
|
||||
object-fit: cover;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Style the Image Used to Trigger the Modal */
|
||||
#myImg {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#myImg:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
|
||||
/* Hidden by default */
|
||||
position: fixed;
|
||||
/* Stay in place */
|
||||
z-index: 50;
|
||||
/* Sit on top */
|
||||
padding-top: 100px;
|
||||
/* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
height: 100%;
|
||||
/* Full height */
|
||||
overflow: auto;
|
||||
/* Enable scroll if needed */
|
||||
background-color: rgb(0, 0, 0);
|
||||
/* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
/* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content (Image) */
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Add Animation - Zoom in the Modal */
|
||||
.modal-content {
|
||||
animation-name: zoom;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 100% Image Width on Smaller Screens */
|
||||
@media only screen and (max-width: 700px) {
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user