Fix
This commit is contained in:
Swift
@@ -17,9 +17,12 @@
|
||||
</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 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>
|
||||
|
||||
@@ -17,8 +17,12 @@
|
||||
</div>
|
||||
<div class="col-md-6 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 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>
|
||||
|
||||
@@ -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">×</span>
|
||||
|
||||
<!-- The Close Button -->
|
||||
<span @click="closeModal" class="close">×</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>
|
||||
|
||||
+21
-1
@@ -74,6 +74,16 @@
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -114,7 +124,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
checkSerial() {
|
||||
// validation
|
||||
if (this.checkingSerial) {
|
||||
@@ -168,3 +177,14 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user