Fix

pages/announcements/index.vue

@@ -12,13 +12,14 @@
 
             </div>
           <div v-if="item.image" class="row">
-            <div class="col-md-6 col-sm-12">
+            <div class="col-md-5 col-sm-12">
               <p>{{ item.caption }}</p>
 
             </div>
-            <div class="col-md-6 col-sm-12">
+            <div class="col-md-7 col-sm-12">
+              <p>برای نمایش بهتر کلیک کنید</p>
               <div class="fr-image">
-                <img :src="'/uploads/images/announcement/'+item.image" alt="">
+                <img id="myImg" :src="'/uploads/images/announcement/'+item.image" alt="">
 
               </div>
             </div>
@@ -27,6 +28,17 @@
           </el-collapse-item>
         </el-collapse>
       </div>
+      <!-- The Modal -->
+    <div v-if="modalVisible"  id="myModal" class="modal">
+
+<!-- The Close Button -->
+<span @click="closeModal" class="close">&times;</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>
     </div>
@@ -38,7 +50,9 @@
  
     data() {
       return {
-        userAnnouncements:''
+        userAnnouncements:'',
+        modalVisible:false,
+      modalImageUrl:''
       }
     },
     mounted(){
@@ -47,6 +61,16 @@
         this.userAnnouncements = res.data
 
       })
+    },
+    methods:{
+      openModal(image) {
+      this.modalVisible = true;
+      this.modalImageUrl = image;
+
+    },
+    closeModal() {
+      this.modalVisible = false;
+    },
     }
   }
   </script>
@@ -64,15 +88,100 @@
     width: 80% !important;
   }
   .fr-image{
-    width: 17rem;
-    height: 11rem;
+
+    height: 17rem;
     margin: auto;
     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>