feat:科技版移动端横屏适配

scene2/public/static/css/main.css

@@ -3458,6 +3458,7 @@ a.hasHover:hover, a:active {
     bottom: 30px;
 }
 
+
 .pinBottom.left .icon {
     float: left
 }
@@ -3479,6 +3480,14 @@ a.hasHover:hover, a:active {
     align-items: center;
     cursor: pointer;
 }
+@media screen and (max-width: 1000px){
+    .pinBottom.left {
+        bottom: 10px;
+    }
+    #gui-modes-map>div[rel]{
+        width: 50px !important;
+    }
+}
 
 #gui-modes-map>div[rel]:hover, .pinBottom.right .rightViewContainer>div:hover, #play:hover {
 }
@@ -7039,15 +7048,16 @@ a.hasHover.tag-link:hover {
 }
 
 
-@media screen and (orientation: landscape) {
+@media screen and (orientation: landscape) and (max-width: 1000px){
 	.viewContainer, #gui-modes-map {
         display: block !important;
     }
     .viewContainer{
-        padding: 10px 20px 10px 10px;
+        padding: 10px 20px 10px 30px;
         display: flex !important;
         align-items: center;
         border-radius: 0 20px 20px 0;
+        /* bottom: 10px; */
     }
 }
 

scene2/public/static/js/Hot.js

@@ -1215,8 +1215,13 @@ window.initHot = function(model){
 
                 
                 if(this.info.linkType=="jumpLink"){
-                    var newPage = window.open(src, "_blank" ); 
-                    newPage.focus();  
+                    // var newPage = window.open(src, "_blank" ); 
+                    // newPage.focus();  
+
+                    let m = src.substring(src.indexOf("?")+3, src.indexOf("&"))
+                    if(window.parent){
+                        window.parent.window.transformScene(m)
+                    }
                     
                 }else if(this.info.linkType=="iframeDiv"){
                     

scene2/src/App.vue

@@ -1,26 +1,26 @@
 <template>
-    <div class="vvvv">
-        <router-view/>
-        <div class="orientation-tip" v-if="isMobile">
-        <div>
-            <img :src="require('@/assets/images/project/landtip.png')" alt="" />
-            <p>请在竖屏模式观看</p>
-        </div>
-        </div>
+  <div class="vvvv">
+    <router-view />
+    <div class="orientation-tip" v-if="isMobile">
+      <div>
+        <img :src="require('@/assets/images/project/landtip.png')" alt="" />
+        <p>请在横屏模式观看</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import '@/assets/style/reset.less'
 import '@/assets/style/public.less'
 export default {
-    
+
 }
 </script>
 <style lang="less">
-.vvvv{
-    width: 100%;
-    height: 100%;
+.vvvv {
+  width: 100%;
+  height: 100%;
 }
 
 
@@ -28,24 +28,35 @@ export default {
 .orientation-tip {
   width: 100%;
   height: 100%;
-  z-index: 10000;
   position: fixed;
   top: 0;
   left: 0;
-  display: none;
-  background-color: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.507);
+  backdrop-filter: blur(20px);
+  background-size: 100% 100%;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 2;
 
-  > div {
+  >div {
     position: absolute;
     top: 50%;
     width: 100%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
-    > img {
-        width: 20%;
+
+    >img {
+      width: 20%;
+      margin-bottom: 10px;
+
     }
-    > p {
+
+    >p {
       font-size: 16px;
       margin-top: 20px;
       width: 100%;
@@ -56,14 +67,14 @@ export default {
 /*竖屏*/
 @media screen and (orientation: portrait) {
   .orientation-tip {
-    display: none;
+    display: block;
   }
 }
 
 /*横屏*/
 @media screen and (orientation: landscape) {
   .orientation-tip {
-    display: block;
+    display: none;
   }
 }
 </style>

scene2/src/assets/style/myBase.css

@@ -3,6 +3,11 @@
   display: flex;
   align-items: center;
 }
+@media screen and (max-width: 1000px) {
+  #gui .pinBottom.right {
+    height: 0px;
+  }
+}
 .pinBottom-container.drawerOpen {
   bottom: 0;
 }
@@ -34,8 +39,7 @@
 #progressBar .step.active::before,
 #progressBar .step.recent::before {
   /* background-color: #D6B970; */
-  background-color: #911212 ;
-
+  background-color: #911212;
 }
 #popup {
   background: none;

scene2/src/views/gui/menu.vue

@@ -394,6 +394,7 @@ export default {
 .pinBottom.right .ui-icon {
   background: none;
 }
+
 .back-icon {
   position: fixed;
   top: 20px;
@@ -492,6 +493,8 @@ export default {
   }
 
   .viewContainer {
+    // bottom: 10px !important;
+
     &>div {
       img {
         width: 33px !important;
@@ -508,18 +511,19 @@ export default {
   .pinBottom-container {
     .pinBottom.right.hideTarget {
       position: fixed;
-      top: 200px;
+      // top: 200px;
       right: 10px;
 
       .rightViewContainer {
         flex-direction: column;
+        margin-bottom: 10px;
 
         &>div,
         #volume {
           width: 50px !important;
           text-align: right;
-          margin-right: 0;
-          margin-bottom: 10px;
+          margin-right: 10px;
+          // margin-bottom: 10px;
 
           &>div {
             display: flex;

zdkkc2/public/staticData/data.js

@@ -99,7 +99,7 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '180px',
+            top: '20vh',
             left: '-7px',
           },
           lineP: {

zdkkc2/src/App.vue

@@ -1,10 +1,35 @@
 <script setup lang="ts">
 import { useStore } from "./stores/index";
+import axios from "axios";
 const store = useStore();
 
 const time = ref();
 
+const isMobile = ref(false)
 
+const isMobileDevice = () => {
+  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(navigator.userAgent);
+}
+
+// 加上浏览量统计
+const getVisit = () => {
+  axios
+    .get("https://sit-likecount.4dage.com/api/show/share/detail/zdkkcScience")
+    .then(() => {
+    });
+}
+
+const onVisit = () => {
+  axios
+    .post("https://sit-likecount.4dage.com/api/show/addVisit", {
+      sceneCode: "zdkkcScience",
+      type: "visit"
+    })
+    .then(() => {
+      getVisit()
+    });
+}
 onMounted(() => {
   // @ts-ignore
   store.dataAll = dataAll;
@@ -18,44 +43,29 @@ onMounted(() => {
       time.current = window.setTimeout(() => {
         // 根元素
         const dom: HTMLDivElement | null = document.querySelector("#app");
-        if (dom && document.documentElement.clientWidth < 480) {
+        if (dom && document.documentElement.clientWidth < 1000) {
           dom.style.height = document.documentElement.clientHeight + "px";
+          dom.style.width = document.documentElement.clientWidth + "px";
         }
       }, 100);
     },
     true
   );
+  isMobile.value = isMobileDevice()
+  // 浏览量统计
+  onVisit()
 
-  // const baseAPIUrl = ref('')
-  // // const baseAPIUrl = ref('http://192.168.20.61:8063')
-  // // const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')
-
-  // // 统计访问量
-  // if (localStorage.getItem('refreshTime')) {
-  //   var nowDate = Math.floor(Date.now() / 1000);
-  //   // @ts-ignore
-  //   var storedTimestamp = parseInt(localStorage.getItem('refreshTime'), 10);
-  //   console.log('时间差',Math.floor((nowDate - storedTimestamp)))
-  //   if (Math.floor((nowDate - storedTimestamp) / 60) > 60) {
-  //     // 发送请求并且更新本地缓存
-
-  //     axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
-  //       // @ts-ignore
-  //       localStorage.setItem('refreshTime', nowDate);
-  //     })
-  //   }
-  // } else {
-  //   axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
-  //     // @ts-ignore
-  //     localStorage.setItem('refreshTime', Math.floor(Date.now() / 1000));
-  //   })
-
-  // }
 })
 </script>
 
 <template>
   <router-view />
+  <div class="orientation-tip">
+    <div>
+      <img src="@/assets/images/landtip.png" alt="" />
+      <p>请打开屏幕自动旋转，进行横屏浏览</p>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -84,6 +94,7 @@ onMounted(() => {
 #app {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 * {
@@ -91,4 +102,41 @@ onMounted(() => {
   padding: 0;
   box-sizing: border-box;
 }
+
+.orientation-tip {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.507);
+  backdrop-filter: blur(20px);
+  background-size: 100% 100%;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 2;
+
+  img {
+    width: 50%;
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (orientation:portrait) {
+  .orientation-tip {
+    display: flex;
+  }
+
+}
+
+@media screen and (orientation: landscape) {
+  /* 在这里定义横屏模式下的CSS */
+  .orientation-tip {
+    display: none;
+  }
+}
 </style>

zdkkc2/src/stores/index.ts

@@ -7,7 +7,8 @@ export const useStore = defineStore('home', {
       // 原始数据
       dataAll: {} as any,
       mode: {} as any,
-      currentInfoPart: {} as any
+      currentInfoPart: {} as any,
+      lastCode: '' as any ,
     }
   },
   // 相当于计算属性

zdkkc2/src/views/Detail/detailPage.vue

@@ -17,6 +17,7 @@ const isShowGuide = ref(false)
 const goScenefu = () => {
   store.mode = curMode.value;
   store.currentInfoPart = curInfoPart.value;
+  console.log(curInfoPart.value)
   router.push({
     path: '/scene',
     query: {
@@ -25,13 +26,35 @@ const goScenefu = () => {
   })
 }
 
+
+const isMobile = ref(false)
+
+const isMobileDevice = () => {
+  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(navigator.userAgent);
+}
+
+const time =ref()
+
+
 onMounted(() => {
   if (Object.keys(store.currentInfoPart).length != 0) {
     curInfoPart.value = store.currentInfoPart
   }
   curMoudle.value = 'construction'
   curMode.value = store.dataAll.modeList[0]
-
+  isMobile.value = isMobileDevice()
+
+ // 重新获取高度
+  // @ts-ignore
+  time.current = window.setTimeout(() => {
+    // 根元素
+    const dom: HTMLDivElement | null = document.querySelector("#app");
+    if (dom && document.documentElement.clientWidth < 1000) {
+      dom.style.height = document.documentElement.clientHeight + "px";
+      dom.style.width = document.documentElement.clientWidth + "px";
+    }
+  }, 100);
 })
 
 </script>
@@ -77,7 +100,7 @@ onMounted(() => {
 
       <!-- 船体列表 -->
       <div class="list-box"
-        :style="{ backgroundImage: curSelect.name == '顶甲板' ? `url(${baseURl}/selectEnd.png)` : curSelect.name == '救生艇' ? `url(${baseURl}/selectLast.png)` : '' }">
+        :style="{ backgroundImage: curSelect.name == '顶甲板' && !isMobile ? `url(${baseURl}/selectEnd.png)` : curSelect.name == '救生艇' && !isMobile ? `url(${baseURl}/selectLast.png)` : '' }">
         <div class="stereoscopic-box"
           @click="() => { curSelect = {}, curMode = store.dataAll.modeList[0], curInfoPart = {}, isShowGuide = false }">
           {{ store.dataAll.modeList[0].title }}
@@ -87,12 +110,13 @@ onMounted(() => {
           <img class="bottomAc" src="@/assets/images/bottomAc.png" alt=""> -->
 
           <div class="list-item" :class="{ 'active': item.name == curSelect.name }"
-            @click="() => { index === store.dataAll.modeList[1].content.length - 1 ? goScenefu() : (curSelect = item, curMode = store.dataAll.modeList[1], curInfoPart = item, isShowGuide = true) }"
+            @click="() => { index === store.dataAll.modeList[1].content.length - 1 ? (curInfoPart = item, goScenefu()) : (curSelect = item, curMode = store.dataAll.modeList[1], curInfoPart = item, isShowGuide = true) }"
             v-for="(item, index) in store.dataAll.modeList[1].content" :key="item.id"
-            :style="{ borderBottom: index == store.dataAll.modeList[1].content.length - 1 ? 'none' : '', background: index == store.dataAll.modeList[1].content.length - 1 || index == 0 ? 'none' : '' }">
+            :style="{ borderBottom: index == store.dataAll.modeList[1].content.length - 1 ? 'none' : '', background: (index == store.dataAll.modeList[1].content.length - 1 || index == 0) && !isMobile ? 'none' : '' }">
             {{ item.number + item.name }}
           </div>
         </div>
+        <img v-show="isMobile" class="down-line" src="@/assets/images/down-line.png" alt="">
       </div>
       <!-- 信息框 -->
       <div class="info-box-detail" v-show="Object.keys(curSelect).length > 0 && isShowGuide">
@@ -100,31 +124,32 @@ onMounted(() => {
         <div class="title">{{ curSelect.number + curSelect.name }}</div>
         <div class="line"></div>
         <div class="bottom-content">
-          <div>{{ curSelect.info }}</div>
+          <div v-show="!isMobile">{{ curSelect.info }}</div>
           <img @click="goScenefu()" :src="`${baseURl}/plane/pic${curSelect.id}.png`" alt="">
+          <div v-show="isMobile">{{ curSelect.info }}</div>
         </div>
       </div>
-
       <!-- 指引 -->
-      <div class="guide-box" v-if="Object.keys(curSelect).length > 0 && isShowGuide && curSelect.name != '救生艇'"
+      <div class="guide-box" v-if="Object.keys(curSelect).length > 0 && curSelect.name != '救生艇'"
         :style="{ top: curInfoPart.guideP.top, left: curInfoPart.guideP.left }">
-        <img class="hot-icon" :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
+        <img v-show="isMobile ? true : isShowGuide" class="hot-icon"
+          :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
           src="@/assets/images/hot.png" alt="">
-        <img class="line"
+        <img v-show="isShowGuide" class="line"
           :style="{ width: curInfoPart.lineP.width, height: curInfoPart.lineP.height, left: curInfoPart.lineP.left }"
           :src="`${baseURl}/plane/line${curSelect.id}.png`" alt="">
       </div>
     </div>
-
   </div>
 </template>
 
 <style lang='less' scoped>
 .detail-page {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: url(@/assets/images/bg.png);
   background-size: 100% 100%;
+  overflow: hidden;
 
   .logo-welcome {
     width: 40vw;
@@ -227,25 +252,44 @@ onMounted(() => {
     position: absolute;
     left: 0;
     top: 0;
+    overflow: hidden;
 
     .img-map {
       position: absolute;
       left: 5%;
       top: 5%;
+
+      @media screen and (max-width: 1000px) {
+        left: 3vw;
+        top: 0vh;
+        width: 150px;
+      }
     }
 
     .img-left {
       position: absolute;
       left: 26px;
       top: 50%;
-      transform: translateY(-50%)
+      transform: translateY(-50%);
+
+      @media screen and (max-width: 1000px) {
+        width: 20px;
+        left: 5px;
+        height: 100%;
+      }
     }
 
     .img-right {
       position: absolute;
       right: 26px;
       top: 50%;
-      transform: translateY(-50%)
+      transform: translateY(-50%);
+
+      @media screen and (max-width: 1000px) {
+        width: 20px;
+        right: 5px;
+        height: 100%;
+      }
     }
 
     .img-bottom {
@@ -270,6 +314,15 @@ onMounted(() => {
       padding-bottom: 1%;
       box-sizing: border-box;
 
+      @media screen and (max-width: 1000px) {
+        width: 25vw;
+        height: 98%;
+        right: 1vw;
+        top: 1%;
+        background: url(@/assets/images/list-bg-mo.png);
+        background-size: 100% 100%;
+      }
+
       .stereoscopic-box {
         width: 100%;
         height: 10%;
@@ -282,6 +335,15 @@ onMounted(() => {
         font-size: 1.4em;
         letter-spacing: 2px;
         cursor: pointer;
+
+        @media screen and (max-width: 1000px) {
+          font-size: 1.2em;
+          margin-top: 4%;
+        }
+      }
+
+      ::-webkit-scrollbar {
+        width: 0;
       }
 
       .list-bottom {
@@ -297,6 +359,16 @@ onMounted(() => {
         letter-spacing: 2px;
         position: relative;
 
+
+
+        @media screen and (max-width: 1000px) {
+          width: 25vw;
+          height: 80%;
+          overflow: auto;
+          margin-bottom: 10%;
+          margin-top: 8%;
+        }
+
         .topAc {
           width: 100%;
           position: absolute;
@@ -320,6 +392,11 @@ onMounted(() => {
           font-size: 0.7em;
           position: relative;
           z-index: 2;
+
+          @media screen and (max-width: 1000px) {
+            width: 90%;
+            text-align: center;
+          }
         }
 
         .active {
@@ -327,9 +404,24 @@ onMounted(() => {
           border-bottom: none;
           width: 96%;
           font-weight: bold;
+
+          @media screen and (max-width: 1000px) {
+            width: 90%;
+            background: url(@/assets/images/active-bg.png);
+            background-size: 100% 100%;
+          }
         }
 
       }
+
+      .down-line {
+        position: absolute;
+        bottom: 10px;
+        width: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+      }
     }
 
     .info-box-detail {
@@ -343,6 +435,17 @@ onMounted(() => {
       right: 25%;
       padding: 20px 20px;
       z-index: 2;
+      box-sizing: border-box;
+
+
+      @media screen and (max-width: 1000px) {
+        height: 70vh;
+        right: 27%;
+        top: 16%;
+        padding: 0;
+        width: 22vw;
+
+      }
 
       .close-icon {
         width: 35px;
@@ -351,12 +454,24 @@ onMounted(() => {
         position: absolute;
         top: 10px;
         right: 10px;
+
+        @media screen and (max-width: 1000px) {
+          width: 20px;
+          height: 20px;
+        }
       }
 
       .title {
         color: #FFFFFF;
         font-weight: bold;
         font-size: 1.2em;
+
+        @media screen and (max-width: 1000px) {
+          font-size: 0.8em;
+          margin-top: 5px;
+          padding-left: 10px;
+          padding-top: 5px;
+        }
       }
 
       .line {
@@ -364,23 +479,47 @@ onMounted(() => {
         height: 2px;
         background: linear-gradient(to right, rgba(63, 151, 188, 1), rgba(63, 151, 188, 0));
         margin: 10px 0;
+
+
       }
 
       .bottom-content {
         display: flex;
         color: white;
 
+        @media screen and (max-width: 1000px) {
+          flex-direction: column;
+          padding: 0px 15px;
+          overflow: auto;
+          height: 50vh;
+          // justify-content: center;
+          align-items: center;
+        }
+
         img {
           width: 40%;
           object-fit: cover;
           margin-left: 10px;
           cursor: pointer;
+
+          @media screen and (max-width: 1000px) {
+            width: 90%;
+            height: 20vh;
+            margin-left: 0px;
+            box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.3);
+            margin-bottom: 5px;
+          }
         }
 
         div {
           max-height: 10vh;
           overflow: auto;
           font-size: 0.9em;
+
+          @media screen and (max-width: 1000px) {
+            font-size: 0.7em;
+            max-height: 25vh;
+          }
         }
 
         ::-webkit-scrollbar {
@@ -413,10 +552,18 @@ onMounted(() => {
         position: absolute;
         z-index: 2;
         cursor: pointer;
+
+        @media screen and (max-width: 1000px) {
+          width: 60px;
+        }
       }
 
       .line {
         position: absolute;
+
+        @media screen and (max-width: 1000px) {
+          display: none;
+        }
       }
     }
   }

zdkkc2/src/views/Home/homePage.vue

@@ -9,14 +9,14 @@ const router = useRouter();
       <div class="title">中山大学科考船</div>
       <div class="disc">虚拟漫游</div>
     </div>
-    <div class="logo-welcome" @click="() => { router.push('/detail') }">开始探索</div>
+    <div class="logo-welcome" @click="() => { router.replace('/detail') }">开始探索</div>
   </div>
 </template>
 
 <style lang='less' scoped>
 .home {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: url(@/assets/images/bg.png);
   background-size: 100% 100%;
 
@@ -35,6 +35,11 @@ const router = useRouter();
     text-shadow: 0px 4px 8px #FFFFFF, 0px 4px 3px #FFFFFF;
     letter-spacing: 5px;
 
+    @media screen and (max-width: 1000px) {
+      padding: 10px 25px;
+      text-shadow: 0px 1px 4px #FFFFFF, 0px 3px 3px #FFFFFF;
+    }
+
     .title {
       font-size: 4em;
       white-space: nowrap;
@@ -46,10 +51,20 @@ const router = useRouter();
       @media screen and (max-width: 2000px) {
         font-size: 2.8em;
       }
+
+      @media screen and (max-width: 1000px) {
+        font-size: 2em;
+        letter-spacing: 2px;
+      }
     }
 
     .disc {
       font-size: 2.5em;
+
+      @media screen and (max-width: 1000px) {
+        font-size: 1.6em;
+        letter-spacing: 2px;
+      }
     }
   }
 
@@ -81,6 +96,13 @@ const router = useRouter();
     padding-bottom: 15px;
     cursor: pointer;
     opacity: 0.7;
+
+    @media screen and (max-width: 1000px) {
+      opacity: 1;
+      font-size: 1.2em;
+      padding-bottom: 7vh;
+      color: #fffffff2;
+    }
   }
 }
 </style>

zdkkc2/src/views/Scene/scenePage.vue

@@ -1,14 +1,25 @@
 <script setup lang='ts'>
+import { useStore } from '@/stores';
+
 
 const route = useRoute()
 const router = useRouter()
+const store = useStore()
+
 
 
 declare global {
   interface Window {
     toHome: () => void,
+    transformScene: (code: string) => void,
+
   }
 }
+const curCode = ref(route.query.code)
+
+
+const time =ref()
+
 
 onMounted(() => {
   window.toHome = () => {
@@ -16,19 +27,34 @@ onMounted(() => {
       path: '/detail'
     })
   }
+  window.transformScene = (code: string) => {
+    curCode.value = code
+    store.lastCode = curCode.value
+  }
+
+  // 重新获取高度
+  // @ts-ignore
+  time.current = window.setTimeout(() => {
+    // 根元素
+    const dom: HTMLDivElement | null = document.querySelector("#app");
+    if (dom && document.documentElement.clientWidth < 1000) {
+      dom.style.height = document.documentElement.clientHeight + "px";
+      dom.style.width = document.documentElement.clientWidth + "px";
+    }
+  }, 100);
 })
 </script>
 
 <template>
   <div class="scene-box">
-    <iframe :src="`./scenePage/index.html?m=${route.query.code ? route.query.code : 'KJ-VfABdXXAzvy'}`"></iframe>
+    <iframe :src="`./scenePage/index.html?m=${curCode ? curCode : 'KJ-VfABdXXAzvy'}`"></iframe>
   </div>
 </template>
 
 <style lang='less' scoped>
 .scene-box {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 
   iframe {