ostandari/pages/_portal/digital-books.vue

<template>
  <div class="container">
    <div class="content">
      <img :src="imageUrl" class="bookCover" alt="" @click="openBook(1)" />

      <div class="frameBox" v-show="showFrame">
        <iframe
          src="https://ostandari-library.run.danakcorp.com/"
          id="frame"
          class="frame"
          frameborder="0"
        ></iframe>
      
        <svg
          @click="closeBook"
          width="40"
          height="40"
          viewBox="0 0 24 24"
          fill="rgb(255,120,60)"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
            stroke="#292D32"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M9.16998 14.8299L14.83 9.16992"
            stroke="#292D32"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M14.83 14.8299L9.16998 9.16992"
            stroke="#292D32"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
    <div class="bookshelf"></div>
  </div>
</template>
<script>
import { ref } from "vue";

import { useRoute, useRouter } from "vue-router";

export default {
  data() {
    return {
      showFrame: ref(false),
      imageUrl: "https://ostan-mr.ir/uploads/books/tumb.jpg",
      imageUrl2: "https://ostan-mr.ir/uploads/books/saramad/saramad-1.png",
      message: null,
      target: null,
    };
  },

  mounted() {},
  methods: {
    closeBook() {
      this.showFrame = false;
      // const iframe = document.querySelector("iframe");
      // iframe.contentWindow.postMessage("reset", "*");
    },
    openBook(value) {
      this.showFrame = true;
      this.target = value;
      this.message = value;
      const iframe = document.querySelector("iframe");
      iframe.contentWindow.postMessage(this.message, "*");
      //   $(document).ready(function () {
      //     $("#frame").flipBook({
      //         pdfUrl:"/amirkabir.pdf",
      //         viewMode:'3d',
      //             //   backgroundColor:"#150000",
      //             backgroundPattern:"images/patterns/woven.png",
      //         background:'url("images/patterns/woven.png")',
      //         skin:'dark',
      //         rightToLeft:true,
      //         btnZoomIn : {enabled:false},
      // 	btnZoomOut : {enabled:false},
      // 	btnToc : {enabled:false},
      // 	btnShare : {enabled:false},
      // 	btnDownloadPages : {enabled:false},
      // 	btnDownloadPdf : {enabled:false},
      // 	// btnSound : {enabled:false},
      //         btnPrint : {enabled:false},
      //         btnBookmark : {enabled:false},
      //         // btnNext: {enabled:true, icon: 'fa-long-arrow-right', title: 'Next page'},
      //         // btnPrev: {enabled:true, icon: 'fa-long-arrow-left', title: 'Previouse page'},

      //         viewMode:'3d',

      //         skin:'dark',

      //         menuMargin:10,
      //         menuBackground:'none',
      //         menuShadow:'none',
      //         menuAlignHorizontal:'center',
      //         menuOverBook:true,

      //         btnRadius:40,
      //         btnMargin:4,
      //         btnSize:14,
      //         btnPaddingV:16,
      //         btnPaddingH:16,
      //         btnBorder:'2px solid rgba(255,255,255,.7)',
      //         btnBackground:"rgba(0,0,0,.3)",
      //         btnColor:'rgb(255,120,60)',

      //         sideBtnRadius:60,
      //         sideBtnSize:60,
      //         sideBtnBackground:"rgba(0,0,0,.7)",
      //         sideBtnColor:'rgb(255,120,60)',

      //     });

      // })
      // console.log($('frame2', "#frame2"));
    },
  },
};
</script>
<style>
.frame3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.bookCover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 200px;
  width: 150px;
  z-index: 1;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bookCover2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 200px;
  width: 150px;
  z-index: 1;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bookCover:hover {
  cursor: pointer;
  -moz-transform: translate(0, -12px);
  -webkit-transform: translate(0, -12px);
  -o-transform: translate(0, -12px);
  -ms-transform: translate(0, -12px);
  transform: translate(0, -12px);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.container {
  position: relative;
  width: 100%;
}
.bookshelf {
  position: absolute;
  width: 60%;
  right: 20%;
  height: 100px;
  top: 190px !important;
  background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/12757027663?profile=RESIZE_1200x");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  overflow: hidden;
}
@media (max-width: 1000px) {
  .bookshelf {
    width: 90%;
    right: 5%;
  }
  .bookCover {
    margin-top: 30px;
  }
  .bookCover2 {
    margin-top: 30px;
  }
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  gap: 40px;
}

.frameBox {
  position: fixed;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden !important;
  top: 0;
  left: 0;
  backdrop-filter: blur(2px);
  width: 100vw;
  height: 100vh;
}

.frameBox svg {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 30px;
  z-index: 10000;
}

.frame {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  right: 0;
  background-color: black;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}
</style>