<template>
    <div class="bg-img-in " >
     <user-dashboard-container page-class="complaint" panel-title="ثبت شکایت" class="panelx">
      
        



     </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)=>{

        this.userAnnouncements = res.data

      })
    },
    methods:{
      openModal(image) {
      this.modalVisible = true;
      this.modalImageUrl = image;

    },
    closeModal() {
      this.modalVisible = false;
    },
    }
  }
  </script>
  <style lang="scss" scoped>
  .bg-img-in{
    background: url(@/static/assets/img/home/bg3.jpeg);
    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;
      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>
  