yin_yu820
/
yd_qycpfb


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  <META HTTP-EQUIV="Expires" CONTENT="0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/8.0.7/swiper-bundle.min.css">
  </link>
  <script src="https://cdn.staticfile.org/Swiper/8.0.7/swiper-bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.6.0/vue.min.js"></script>
  <title>data数据大屏</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body,
    html,
    #app {
      height: 100%;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    .swiper,
    .swiper-wrapper,
    .swiper-slide {
      width: 100%;
      height: 100%;
    }

    .swiper-slide iframe {
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
    function GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    }
  </script>
</head>

<body>
  <div id="app">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in list" :key="index">
          <iframe :src="`./view.html?id=`+item" frameborder="0"></iframe>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          id: GetQueryString('id'),
          list: [],
        }
      },
      created() {
        this.list = this.id.split(',')
      },
      mounted() {
        new Swiper('.swiper', {
          loop: true,
          autoplay: true,
          delay: 3000,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        })
      }
    })
  </script>
</body>

</html>