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/account/agents/announcements/index.vue
+6 -3
View File
@@ -17,9 +17,12 @@
</div> </div>
<div class="col-md-7 col-sm-12"> <div class="col-md-7 col-sm-12">
<p>برای نمایش بهتر کلیک کنید</p> <p>برای نمایش بهتر کلیک کنید</p>
<div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image"> <div class="fr-image">
<img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt=""> <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>
</div> </div>
pages/account/announcements/index.vue
+6 -2
View File
@@ -17,8 +17,12 @@
</div> </div>
<div class="col-md-6 col-sm-12"> <div class="col-md-6 col-sm-12">
<p>برای نمایش بهتر کلیک کنید</p> <p>برای نمایش بهتر کلیک کنید</p>
<div @click="openModal('/uploads/images/announcement/' + item.image)" class="fr-image"> <div class="fr-image">
<img id="myImg" :src="'/uploads/images/announcement/' + item.image" alt=""> <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>
pages/announcements/index.vue
+74 -85
View File
@@ -1,104 +1,97 @@
<template> <template>
<div class="bg-img-in" > <div class="bg-img-in">
<user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx"> <user-dashboard-container page-class="announcements" panel-title="اعلانات" class="panelx">
<div v-for="item in userAnnouncements" :key="item._id" class="item" > <div v-for="item in userAnnouncements" :key="item._id" class="item">
<el-collapse :key="item._id + 'co_parent'" accordion > <el-collapse :key="item._id + 'co_parent'" accordion>
<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"> <template slot="title">
<h3>{{ item.title }}</h3> <h3>{{ item.title }}</h3>
</template> </template>
<div v-if="!item.image" class="col-12"> <div v-if="!item.image" class="col-12">
<p>{{ item.caption }}</p> <p>{{ item.caption }}</p>
</div> </div>
<div v-if="item.image" class="row"> <div v-if="item.image" class="row">
<div class="col-md-5 col-sm-12"> <div class="col-md-5 col-sm-12">
<p>{{ item.caption }}</p> <p>{{ item.caption }}</p>
</div>
</div> <div class="col-md-7 col-sm-12">
<div class="col-md-7 col-sm-12"> <p>برای نمایش بهتر کلیک کنید</p>
<p>برای نمایش بهتر کلیک کنید</p> <div class="fr-image">
<div class="fr-image"> <el-image
<img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt=""> :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> </div>
</div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
<!-- The Modal --> <!-- 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 --> <!-- Modal Content (The Image) -->
<span @click="closeModal" class="close">&times;</span> <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> <h3 v-if="!userAnnouncements.length" style="text-align: center; margin-top: 50px">هیچ اعلانی موجود نیست</h3>
</user-dashboard-container> </user-dashboard-container>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'PublicAnnouncements', 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;
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() { closeModal() {
this.modalVisible = false; this.modalVisible = false
},
} }
} }
</script> }
<style lang="scss" scoped> </script>
.bg-img-in{ <style lang="scss" scoped>
background: url(@/static/assets/img/home/bg2.jpg); .bg-img-in {
background-size: cover; background: url(@/static/assets/img/home/bg2.jpg);
background-repeat: no-repeat; background-size: cover;
border-top: groove; background-repeat: no-repeat;
} border-top: groove;
.panelx{ }
margin-top: 20%; .panelx {
margin-left: auto; margin-top: 20%;
margin-right: auto; margin-left: auto;
width: 80% !important; margin-right: auto;
} width: 80% !important;
.fr-image{ }
.fr-image {
height: 17rem;
margin: auto;
img {
width: 100%;
height: 17rem; height: 17rem;
margin: auto; object-fit: cover;
img{ border-radius: 0.5rem;
width: 100%;
height: 17rem;
object-fit: cover;
border-radius: .5rem;
}
} }
/* Style the Image Used to Trigger the Modal */ }
/* Style the Image Used to Trigger the Modal */
#myImg { #myImg {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
@@ -111,7 +104,6 @@
/* The Modal (background) */ /* The Modal (background) */
.modal { .modal {
/* Hidden by default */ /* Hidden by default */
position: fixed; position: fixed;
/* Stay in place */ /* Stay in place */
@@ -141,8 +133,6 @@
max-width: 700px; max-width: 700px;
} }
/* Add Animation - Zoom in the Modal */ /* Add Animation - Zoom in the Modal */
.modal-content { .modal-content {
animation-name: zoom; animation-name: zoom;
@@ -151,11 +141,11 @@
@keyframes zoom { @keyframes zoom {
from { from {
transform: scale(0) transform: scale(0);
} }
to { to {
transform: scale(1) transform: scale(1);
} }
} }
@@ -183,5 +173,4 @@
width: 100%; width: 100%;
} }
} }
</style> </style>
pages/index.vue
+21 -1
View File
@@ -74,6 +74,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-3" style="background-color: white">
<div >
<el-carousel :interval="400000" type="card" height="400px">
<el-carousel-item v-for="item in 6" :key="item">
</el-carousel-item>
</el-carousel>
</div>
</div>
</div> </div>
</template> </template>
@@ -114,7 +124,6 @@ export default {
} }
}, },
methods: { methods: {
checkSerial() { checkSerial() {
// validation // validation
if (this.checkingSerial) { if (this.checkingSerial) {
@@ -168,3 +177,14 @@ export default {
} }
} }
</script> </script>
<style scoped>
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>