bmw-axture
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page 4</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/page_1/styles2.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-3.2.1.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <script src="resources/scripts/messagecenter.js"></script>
    <script src="resources/scripts/axure/events.js"></script>
    <script src="resources/scripts/axure/recording.js"></script>
    <script src="resources/scripts/axure/action.js"></script>
    <script src="resources/scripts/axure/expr.js"></script>
    <script src="resources/scripts/axure/geometry.js"></script>
    <script src="resources/scripts/axure/flyout.js"></script>
    <script src="resources/scripts/axure/model.js"></script>
    <script src="resources/scripts/axure/repeater.js"></script>
    <script src="resources/scripts/axure/sto.js"></script>
    <script src="resources/scripts/axure/utils.temp.js"></script>
    <script src="resources/scripts/axure/variables.js"></script>
    <script src="resources/scripts/axure/drag.js"></script>
    <script src="resources/scripts/axure/move.js"></script>
    <script src="resources/scripts/axure/visibility.js"></script>
    <script src="resources/scripts/axure/style.js"></script>
    <script src="resources/scripts/axure/adaptive.js"></script>
    <script src="resources/scripts/axure/tree.js"></script>
    <script src="resources/scripts/axure/init.temp.js"></script>
    <script src="resources/scripts/axure/legacy.js"></script>
    <script src="resources/scripts/axure/viewer.js"></script>
    <script src="resources/scripts/axure/math.js"></script>
    <script src="resources/scripts/axure/jquery.nicescroll.min.js"></script>
    <script src="data/document.js"></script>
    <script src="files/page_1/data.js"></script>
    <link rel="stylesheet" href="plugins/swipper3/styles/swiper.min.css">
    <style>
      .swiper-wrapper {
        height: 100%;
      }
      .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
      }
      #swipe-wrapper-1 {
        position: absolute;
        /* display: none; */
        width: 100%;
        background: transparent;
        top: 33.2%;
      }
      #swipe-wrapper-2 {
        position: absolute;
        /* display: none; */
        width: 100%;
        background: transparent;
        top: 88%;
      }
      #swipe-wrapper-2 .word-wrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: auto;
      }
      #swipe-wrapper-2 .word-wrapper img {
        height: auto;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      #swipe-wrapper-2 .word-wrapper .word {
        position: absolute;
        bottom: 0;
        color: white;
        width: 100%;
        line-height: 100px;
        text-align: center;
        font-size: 40px;
      }
    </style>
    <script src="plugins/swipper3/swiper.min.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
    <script type="text/javascript">
      // 根据设计稿，获取宽度比例
      function getScreenWidthRatio(width) {
        if (!width) width = 1;
        // return document.documentElement.clientWidth / width;
        return window.screen.width / width;
      }
      // 根据设计稿，获取高度比例
      function getScreenHeightRatio(height) {
        if (!height) height = 1;
        return document.documentElement.clientHeight / height;
      }
      function swipeWrapper1Load(){
        console.log('swipeWrapper1Load');
        var swipeWrapper1 = document.getElementById('swipe-wrapper-1');
        var s1With = 980;
        var s1Height = 1063;
        swipeWrapper1.style.height = (100 * s1Height / s1With) + 'vw';
        // swipeWrapper1.style.top = (3040 * getScreenWidthRatio(gWidth)) + 'px';
        // swipeWrapper1.style.height = (1063 * getScreenWidthRatio(gWidth)) + 'px';
        setTimeout(function(){
          new Swiper('#swipe-wrapper-1',{
            loop: true,
          });
          swipeWrapper1.style.display = 'block';
        }, 0);
      }
      function swipeWrapper2Load(){
        console.log('swipeWrapper2Load');
        var swipeWrapper2 = document.getElementById('swipe-wrapper-2');
        var s2With = 980;
        var s2Height = 560;
        swipeWrapper2.style.height = (100 * s2Height / s2With) + 'vw';
        // swipeWrapper2.style.top = (5560 * getScreenWidthRatio(gWidth)) + 'px';
        // swipeWrapper2.style.height = (560 * getScreenWidthRatio(gWidth)) + 'px';
        setTimeout(function(){
          new Swiper('#swipe-wrapper-2',{
            loop: true,
          });
          swipeWrapper2.style.display = 'block';
        }, 0);
      }
      function layout(){
        swipeWrapper1Load();
        swipeWrapper2Load();
        console.log('layout');
        var gWidth = 414;

        var u82_img = document.getElementById('u82_img');
        var u82With = 1080;
        var u82Height = 1657;
        u82_img.style.height = (100 * u82Height / u82With) + 'vw';
        // u82_img.style.height = (1503.5 * getScreenWidthRatio(gWidth)) + 'px';

        var u1_img = document.getElementById('u1_img');
        var u1Width = 801;
        var u1Height = 3768;
        u1_img.style.height = (100 * u1Height / u1Width) + 'vw';
        // u1_img.style.height = (5432.2 * getScreenWidthRatio(u1Width)) + 'px';

        var u0_img = document.getElementById('u0_img');
        var u0Width = 1080;
        var u0Height = 2482;
        u0_img.style.height = (100 * u0Height / u0Width) + 'vw';

        var u0_gif_wrap = document.getElementById('u0_gif_wrap');
        var u0GifWrapWidth = 1080;
        var u0GifWrapHeight = 662;
        var u0GifWidth = 944;
        var u0GifHeight = 653;
        u0_gif_wrap.style.padding = '3vw 0vw';
        u0_gif_wrap.style.height = (100 * u0GifWrapHeight / u0GifWrapWidth) + 'vw';

        var u2_img = document.getElementById('u2_img');
        var u2Width = 1080;
        var u2Height = 6418;
        u2_img.style.height = (100 * u2Height / u2Width) + 'vw';
      }
      window.onload = function(){
        layout();
      };
      window.onresize = function(){
        layout();
      };
    </script>
    <style>
      .ax_default {
        /* background: blue;
        opacity: 0.8; */
      }
      #u3, #u4, #u5, #u6, #u7, #u8, #u9, #u10, #u11, #u12, #u13, #u14, #u15, #u16, #u17, #u18,
      #u19, #u20, #u21, #u22, #u23, #u24, #u25, #u26, #u27, #u28, #u29, #u30, #u31, #u32 {
        height: 0.6%;
      }
      #u3 {
        top: 41%;
      }
      #u4 {
        top: 42.1%;
      }
      #u5 {
        top: 43.2%;
      }
      #u6 {
        top: 44.3%;
      }
      #u7 {
        top: 45.4%;
      }
      #u8 {
        top: 46.5%;
      }
      #u9 {
        top: 48.5%;
      }
      #u10 {
        top: 49.6%;
      }
      #u11 {
        top: 50.6%;
      }
      #u12 {
        top: 51.7%;
      }
      #u13 {
        top: 52.8%;
      }
      #u14 {
        top: 53.9%;
      }
      #u15 {
        top: 56%;
      }
      #u16 {
        top: 57%;
      }
      #u17 {
        top: 58.1%;
      }
      #u18 {
        top: 59.2%;
      }
      #u19 {
        top: 60.3%;
      }
      #u20 {
        top: 61.4%;
      }
      #u21 {
        top: 63.4%;
      }
      #u22 {
        top: 64.6%;
      }
      #u23 {
        top: 65.6%;
      }
      #u24 {
        top: 66.7%;
      }
      #u25 {
        top: 67.8%;
      }
      #u26 {
        top: 68.8%;
      }
      #u27 {
        top: 70.9%;
      }
      #u28 {
        top: 72%;
      }
      #u29 {
        top: 73.1%;
      }
      #u30 {
        top: 74.1%;
      }
      #u31 {
        top: 75.2%;
      }
      #u32 {
        top: 76.3%;
      }

      #u33, #u34, #u35, #u36, #u37, #u38, #u39, #u40, #u41, #u42, #u43, #u44, #u45, #u46,
      #u47, #u48, #u49, #u50, #u51, #u52, #u53, #u54, #u55, #u56, #u57, #u58, #u59 {
        height: 0.6%;
      }
      #u33 {
        top: 3%;
      }
      #u34 {
        top: 4.1%;
      }
      #u35 {
        top: 5.2%;
      }
      #u36 {
        top: 6.2%;
      }
      #u37 {
        top: 7.4%;
      }
      #u38 {
        top: 8.4%;
      }
      #u39 {
        top: 10.5%;
      }
      #u40 {
        top: 11.6%;
      }
      #u41 {
        top: 12.6%;
      }
      #u42 {
        top: 14.7%;
      }
      #u43 {
        top: 15.8%;
      }
      #u44 {
        top: 16.9%;
      }
      #u45 {
        top: 18%;
      }
      #u46 {
        top: 19.1%;
      }
      #u47 {
        top: 20.2%;
      }
      #u48 {
        top: 22.2%;
      }
      #u49 {
        top: 23.3%;
      }
      #u50 {
        top: 24.4%;
      }
      #u51 {
        top: 25.5%;
      }
      #u52 {
        top: 26.6%;
      }
      #u53 {
        top: 27.7%;
      }
      #u54 {
        top: 29.7%;
      }
      #u55 {
        top: 30.7%;
      }
      #u56 {
        top: 31.8%;
      }
      #u57 {
        top: 32.9%;
      }
      #u58 {
        top: 34%;
      }
      #u59 {
        top: 35.1%;
      }

      #u60, #u61, #u62, #u63, #u64 {
        height: 4%;
      }
      #u60 {
        top: 65%;
      }
      #u61 {
        top: 70.2%;
      }
      #u62 {
        top: 75.2%;
      }
      #u63 {
        top: 80.4%;
      }
      #u64 {
        top: 85.6%;
      }

      #u65, #u66, #u67, #u68, #u69, #u70, #u71, #u72, #u73, #u74 {
        height: 2%;
      }
      #u65 {
        top: 55.7%;
      }
      #u66 {
        top: 58%;
      }
      #u67 {
        top: 62.6%;
      }
      #u68 {
        top: 64.8%;
      }
      #u69 {
        top: 69.4%;
      }
      #u70 {
        top: 71.5%;
      }
      #u71 {
        top: 76.3%;
      }
      #u72 {
        top: 78.4%;
      }
      #u73 {
        top: 83%;
      }
      #u74 {
        top: 85.3%;
      }
      #u0, #u1, #u2 {
        position: relative;
        top: auto;
      }

      #u0_gif_wrap {
        position: absolute;
        left: 0px;
        top: 12.2%;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      #u0_gif {
        position: relative;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="base" class="">

      <div id="u82" class="ax_default _图片_">
        <img id="u82_img" class="img " src="images/page_1/u82-1.jpg"/>
        <div id="u82_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <div id="u1" class="ax_default _图片_">
        <img id="u1_img" class="img " src="images/page_1/u1-2.jpg"/>
        <div id="u1_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>

        <div id="swipe-wrapper-1" class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/page_1/u76.png">
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u77.png">
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u78.png">
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u79.png">
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u80.png">
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u81.png">
            </div>
          </div>
        </div>

        <div id="swipe-wrapper-2" class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/page_1/u84.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>天津荣宝行 - NEV定制化试驾</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u86.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>石家庄宝和 - 领创未来，卓悦前行</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u88.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>镇江宝徳 - 卓悦试驾体验</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u90.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>常州宝尊 - 卓悦在您身边</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u92.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>杭州和诚之宝 - 透过细节看卓悦，打造2020客户年</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u94.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>宁波宝恒 - 所遇即温柔，BMW常伴左右</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u96.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>广州宝悦 - 特别的一天 - 荣誉忠诚客户交车仪式</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u98.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>南昌万宝行 - 难忘的交付车辆体验</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u100.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>重庆宝创 - 难忘的交车体验</span></div>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="images/page_1/u102.png">
              <div class="word-wrapper">
                <img src="images/page_1/u85.svg"/>
                <div class="word"><span>成都运通御宝 - 夜间行动计划</span></div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div id="u0" class="ax_default _图片_">
        <img id="u0_img" class="img " src="images/page_1/u0-2.jpg"/>
        <div id="u0_gif_wrap">
          <img id="u0_gif" class="img " src="images/page_1/u0-2.gif"/>
        </div>
        <div id="u0_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>

        <!-- Unnamed (热区) -->
        <div id="u65" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u66" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u67" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u68" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u69" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u70" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u71" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u72" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u73" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u74" class="ax_default">
        </div>

      </div>

      <div id="u2" class="ax_default _图片_">
        <img id="u2_img" class="img " src="images/page_1/u2-2.jpg"/>
        <div id="u2_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>

        <!-- Unnamed (热区) -->
        <div id="u33" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u34" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u35" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u36" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u37" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u38" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u39" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u40" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u41" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u42" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u43" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u44" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u45" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u46" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u47" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u48" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u49" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u50" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u51" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u52" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u53" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u54" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u55" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u56" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u57" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u58" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u59" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u3" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u4" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u5" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u6" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u7" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u8" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u9" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u10" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u11" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u12" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u13" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u14" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u15" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u16" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u17" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u18" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u19" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u20" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u21" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u22" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u23" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u24" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u25" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u26" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u27" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u28" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u29" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u30" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u31" class="ax_default">
        </div>

        <!-- Unnamed (热区) -->
        <div id="u32" class="ax_default">
        </div>

      </div>

    </div>
    <script src="resources/scripts/axure/ios.js"></script>
  </body>
</html>