danak/asan-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix

Browse Source
This commit is contained in:
Swift
2024-02-06 21:22:21 +03:30
parent 425a52c242
commit 69a31f2e2d
4 changed files with 107 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/announcements/index.vue
+74 -85
View File
@@ -1,104 +1,97 @@
<template>
<div class="bg-img-in" >
<user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
<div v-for="item in userAnnouncements" :key="item._id" class="item" >
<el-collapse :key="item._id + 'co_parent'" accordion >
<el-collapse-item :key="item._id + 'co_item'" :name="item._id" >
<div class="bg-img-in">
<user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
<div v-for="item in userAnnouncements" :key="item._id" class="item">
<el-collapse :key="item._id + 'co_parent'" accordion>
<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">
<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 class="fr-image">
<img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt="">
<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 class="fr-image">
<el-image
:src="'https://www.asan-service.com/uploads/images/announcement/' + item.image"
:preview-src-list="['https://www.asan-service.com/uploads/images/announcement/' + item.image]"
>
</el-image>
</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<!-- The Modal -->
<div v-if="modalVisible" id="myModal" class="modal">
<div v-if="modalVisible" id="myModal" class="modal">
<!-- The Close Button -->
<span @click="closeModal" class="close">&times;</span>
<!-- The Close Button -->
<span @click="closeModal" class="close">&times;</span>
<!-- Modal Content (The Image) -->
<img id="img01" class="modal-content" :src="modalImageUrl">
</div>
<!-- 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>
</div>
</template>
<script>
export default {
name: 'PublicAnnouncements',
data() {
return {
userAnnouncements:'',
modalVisible:false,
modalImageUrl:''
}
},
mounted(){
this.$axios.get('/api/public/announcement').then((res)=>{
</div>
</template>
this.userAnnouncements = res.data
})
},
methods:{
openModal(image) {
this.modalVisible = true;
this.modalImageUrl = image;
<script>
export default {
name: 'PublicAnnouncements',
data() {
return {
userAnnouncements: '',
modalVisible: false,
modalImageUrl: ''
}
},
mounted() {
this.$axios.get('/api/public/announcement').then(res => {
this.userAnnouncements = res.data
})
},
methods: {
openModal(image) {
this.modalVisible = true
this.modalImageUrl = image
},
closeModal() {
this.modalVisible = false;
},
this.modalVisible = false
}
}
</script>
<style lang="scss" scoped>
.bg-img-in{
background: url(@/static/assets/img/home/bg2.jpg);
background-size: cover;
background-repeat: no-repeat;
border-top: groove;
}
.panelx{
margin-top: 20%;
margin-left: auto;
margin-right: auto;
width: 80% !important;
}
.fr-image{
}
</script>
<style lang="scss" scoped>
.bg-img-in {
background: url(@/static/assets/img/home/bg2.jpg);
background-size: cover;
background-repeat: no-repeat;
border-top: groove;
}
.panelx {
margin-top: 20%;
margin-left: auto;
margin-right: auto;
width: 80% !important;
}
.fr-image {
height: 17rem;
margin: auto;
img {
width: 100%;
height: 17rem;
margin: auto;
img{
width: 100%;
height: 17rem;
object-fit: cover;
border-radius: .5rem;
}
object-fit: cover;
border-radius: 0.5rem;
}
/* Style the Image Used to Trigger the Modal */
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
@@ -111,7 +104,6 @@
/* The Modal (background) */
.modal {
/* Hidden by default */
position: fixed;
/* Stay in place */
@@ -141,8 +133,6 @@
max-width: 700px;
}
/* Add Animation - Zoom in the Modal */
.modal-content {
animation-name: zoom;
@@ -151,11 +141,11 @@
@keyframes zoom {
from {
transform: scale(0)
transform: scale(0);
}
to {
transform: scale(1)
transform: scale(1);
}
}
@@ -183,5 +173,4 @@
width: 100%;
}
}
</style>
</style>