静态页面

src/components/index/Banner/index.vue

@@ -2,7 +2,7 @@
   <div class="components Banner">
     <swiper :options="SwiperOptions" ref="MySwiper">
       <swiper-slide v-for="(item, index) in list" :key="index">
-        <div class="SwiperItem">
+        <div class="SwiperItem" @click="$emit('Click', item)">
           <img :src="item.image" class="centerLabel cover" alt="">
         </div>
       </swiper-slide>

src/pages/index/ShouYe/index.vue

@@ -3,6 +3,18 @@
     <MainPageContainer :ShowMainHeader="true" :ShowMainTabBar="true" MainHeaderTitle="首页" :MainTabBarActiveId="1">
       <div class="PageContainer">
 
+        <div class="Iframe flex-v" v-if="ShowIframe">
+          <div class="Top">
+            <a class="iconfont iconjiantouleft" @click="ShowIframe = false"></a>
+            <span>{{IframeTitle}}</span>
+          </div>
+          <div class="flex-item">
+            <div>
+              <iframe :src="IframeSrc" frameborder="0"></iframe>
+            </div>
+          </div>
+        </div>
+
         <!-- 背景 -->
         <div class="Bg"></div>
 
@@ -14,7 +26,7 @@
               <!-- banner -->
               <div class="Banner">
                 <div>
-                  <Banner :list="bannerList"></Banner>
+                  <Banner :list="bannerList" @Click="BannerClick"></Banner>
                 </div>
               </div>
 
@@ -73,6 +85,9 @@ export default {
   name: 'index',
   data () {
     return {
+      IframeSrc: null,
+      ShowIframe: false,
+      IframeTitle: '',
       ExitAppStatus: false,
       bannerList: [
         {
@@ -126,6 +141,11 @@ export default {
     ...mapIndexMutations([
       'EmptyBanner'
     ]),
+    BannerClick (e) {
+      this.IframeTitle = e.title || '活动'
+      this.IframeSrc = e.link || null
+      this.ShowIframe = true
+    },
     RouterBack () {
       if (this.ExitAppStatus) {
         window.js2native.closePage()

src/pages/index/ShouYe/page.scss

@@ -8,6 +8,58 @@
     height: 100%;
     position: relative;
     overflow: hidden;
+    > .Iframe {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      z-index: 100;
+      background: #fff;
+      > .Top {
+        position: relative;
+        overflow: hidden;
+        background: #ff5100;
+        > span {
+          display: block;
+          font-size: 0.17rem;
+          text-align: center;
+          position: relative;
+          z-index: 1;
+          line-height: 0.4rem;
+          color: #fff;
+          height: 0.4rem;
+          white-space: nowrap;
+        }
+        > a {
+          display: inline-block;
+          position: absolute;
+          z-index: 2;
+          font-size: 0.2rem;
+          color: #fff;
+          line-height: 0.4rem;
+          left: 0.15rem;
+        }
+      }
+      > .flex-item {
+        position: relative;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          z-index: 100;
+          > iframe {
+            width: 100%;
+            height: 100%;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+          }
+        }
+      }
+    }
     > .Bg {
       width: 200vw;
       height: 200vw;