1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="Keywords" content="腾讯云会客厅,腾讯云,QQ,Tencent">
  8.     <meta name="description" content="腾讯云会客厅">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  10.     <meta name="format-detection" content="telephone=no">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  12.     <link rel="stylesheet" href="https://mc.qcloudimg.com/static/style/8c6eee6b2107ef25dc486020ced13898/normalize.css">
  13.     <link rel="stylesheet" href="https://mc.qcloudimg.com/static/style/6af34d0737ad0ca608111771cf74cc79/swiper.min.css">
  14.     <link rel="stylesheet" href="https://mc.qcloudimg.com/static/style/aa56d48806a1df73eaaf2c27fe785bc3/style.css">
  15.     <title>腾讯云会客厅</title>
  16.     <script>
  17.         var baseWidth = 375,
  18.             baseHeiht = 603,
  19.             baseFontSize = 50,
  20.             newSize = 1,
  21.             sacle = 1;
  22.  
  23.         var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
  24.             newSize = parseInt(sacle * 10000 * baseFontSize) / 10000;
  25.  
  26.         document.documentElement.style.fontSize = newSize + "px";
  27.     </script>
  28. </head>
  29.  
  30. <body>
  31.     <div class="myLoading">
  32.         <div class="svg-wrap">
  33.             <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"
  34.                 style="background: none;">
  35.                 <circle cx="50" cy="50" fill="none" ng-attr-stroke="" ng-attr-stroke-width="" ng-attr-r="" ng-attr-stroke-dasharray="" stroke="#ffffff"
  36.                     stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(324 50 50)">
  37.                     <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s"
  38.                         begin="0s" repeatCount="indefinite"></animateTransform>
  39.                 </circle>
  40.             </svg>
  41.         </div>
  42.         <p class="progress-num" id="loading">0%</p>
  43.     </div>
  44.     <div id="o2_loading" class="loading">
  45.         <div class="btns">
  46.             <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play btn begin">
  47.             <div class="loading-cover"></div>
  48.         </div>
  49.     </div>
  50.     <div id="o2_main" class="main">
  51.         <div class="wrapper">
  52.             <video id="video" class="video" preload="auto" playsinline src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/Mobike.mp4"
  53.                 width="1" height="1" type="video/mp4"></video>
  54.         </div>
  55.         <div class="btns control">
  56.             <a class="btn continue">继续</a>
  57.             <a class="btn skip">跳过</a>
  58.         </div>
  59.         <div class="poster"></div>
  60.     </div>
  61.     <div class="mod-player" id="mod-player"></div>
  62.     <div class="video-title">
  63.         <p class="">摩拜夏一平：用云端黑科技打造智能出行</p>
  64.     </div>
  65.     <!-- Slider main container -->
  66.     <div class="swiper-container">
  67.         <!-- Additional required wrapper -->
  68.         <div class="swiper-wrapper">
  69.             <!-- Slides -->
  70.             <div class="swiper-slide">
  71.                 <div class="content intro clearfix">
  72.                     <div class="mod-title">
  73.                         <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
  74.                         <span class="">栏目介绍</span>
  75.                     </div>
  76.                     <p class="intro-title">腾讯云会客厅
  77.                         <img src="https://mc.qcloudimg.com/static/img/fd51ec9d85aa385d3668ddf42ace04b9/logo.png" alt="logo" class="logo" width="auto"
  78.                             height="48px">
  79.                     </p>
  80.                     <p class="intro-detail">聚焦云计算热点话题，专家视角，洞察产业趋势</p>
  81.                     <div class="guide">
  82.                         <img src="https://mc.qcloudimg.com/static/img/8d3eac1baf0ec96b1e4496948043a412/guide.jpg" alt="guide" class="">
  83.                     </div>
  84.                     <div class="guest">
  85.                         <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/2%20%E6%A0%8F%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%98%89%E5%AE%BE%E5%9B%BE/%E5%98%89%E5%AE%BE%E5%A4%8F%E4%B8%80%E5%B9%B3.jpg"
  86.                             alt="guest" class="">
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.             <div class="swiper-slide">
  91.                 <div class="content current-point">
  92.                     <div class="mod-title">
  93.                         <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
  94.                         <span class="">本期看点</span>
  95.                     </div>
  96.                     <div class="vqq-wrap">
  97.                         <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="i052011obn1">
  98.                             <div class="vqq-cover-wrap">
  99.                                 <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B91.jpg"
  100.                                     alt="" class="vqq-cover">
  101.                                 <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  102.                             </div>
  103.                             <p class="vqq-title">智慧+出行，摩拜解决最后一公里的痛点</p>
  104.                         </a>
  105.                         <a class="vqq-item clearfix mt60 show-video" href="javascript:;" data-vid="w0520kovzqq">
  106.                             <div class="vqq-cover-wrap">
  107.                                 <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B92.jpg"
  108.                                     alt="" class="vqq-cover">
  109.                                 <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  110.                             </div>
  111.                             <p class="vqq-title">整合行业资源，摩拜打造智能物联生态</p>
  112.                             <!-- <p class="vqq-detail">云计算驱动游戏产业腾飞</p> -->
  113.                         </a>
  114.                     </div>
  115.                     <div class="show-more">
  116.                         <a href="javascript:;" class="mod-btn" id="showCurrentPoint">查看更多</a>
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.             <div class="swiper-slide">
  121.                 <div class="content review">
  122.                     <div class="mod-title">
  123.                         <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
  124.                         <span class="">往期回顾</span>
  125.                     </div>
  126.                     <div class="vqq-wrap">
  127.                         <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="j0511ygervb">
  128.                             <div class="vqq-cover-wrap">
  129.                                 <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/4%20%E5%BE%80%E6%9C%9F%E5%9B%9E%E9%A1%BE%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%AC%AC23%E6%9C%9F%E8%94%9A%E6%9D%A5%E6%9D%8E%E6%96%8C%20.jpg"
  130.                                     alt="" class="vqq-cover">
  131.                                 <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  132.                             </div>
  133.                             <p class="vqq-title">蔚来李斌</p>
  134.                             <p class="vqq-detail">汽车革新浪潮已经袭来</p>
  135.                         </a>
  136.                         <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q05019umr82">
  137.                             <div class="vqq-cover-wrap">
  138.                                 <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/pic/%E7%AC%AC22%E6%9C%9F%20%E8%98%91%E8%8F%87%E8%A1%97%E6%9D%8E%E6%96%8C.png"
  139.                                     alt="" class="vqq-cover">
  140.                                 <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  141.                             </div>
  142.                             <p class="vqq-title">美丽联合CEO陈琪</p>
  143.                             <p class="vqq-detail">智慧电商不安分的技术心</p>
  144.                         </a>
  145.                         <!-- <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0506969bdp">
  146. <div class="vqq-cover-wrap">
  147. <img src="https://mc.qcloudimg.com/static/img/1dd862e386976f3c0004f077989946cd/past-18.png" alt="" class="vqq-cover">
  148. <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  149. </div>
  150. <p class="vqq-title">去哪儿网：张强</p>
  151. <p class="vqq-detail">人工智能是未来？</p>
  152. </a> -->
  153.                     </div>
  154.                     <div class="show-more">
  155.                         <a href="javascript:;" class="mod-btn" id="showReviewPoint">查看更多</a>
  156.                     </div>
  157.                     <!-- <p class="slide-guide">精彩，值得被更多人看见！</p> -->
  158.                 </div>
  159.             </div>
  160.             <div class="swiper-slide">
  161.                 <div class="content qrcode-content">
  162.                     <div class="qrcode-wrap">
  163.                         <img src="https://mc.qcloudimg.com/static/img/a768c578195c64041887b114f6428601/qrcode.png" alt="qrcode" class="qrcode">
  164.                     </div>
  165.                     <p class="qrcode-text">扫码关注腾讯云</p>
  166.                     <div class="show-more">
  167.                         <a href="javascript:;" class="mod-btn" id="qrcodeShow">分享</a>
  168.                     </div>
  169.                     <!-- <p class="slide-guide">精彩，值得被更多人看见！</p> -->
  170.                 </div>
  171.             </div>
  172.         </div>
  173.         <!-- If we need pagination -->
  174.         <div class="swiper-pagination"></div>
  175.         <!-- If we need navigation buttons -->
  176.         <!-- <div class="swiper-button-prev"></div> -->
  177.         <!-- <div class="swiper-button-next"></div> -->
  178.         <!-- If we need scrollbar -->
  179.         <!-- <div class="swiper-scrollbar"></div> -->
  180.     </div>
  181.     <div class="slider-up animated infinite slideInUp"></div>
  182.     <!-- 横屏提示代码 [[ -->
  183.     <div id="orientation_hinter" class="landscape">
  184.         <div class="hinter_phone">
  185.             <i></i>
  186.         </div>
  187.         <div class="hinter_rotate"></div>
  188.         <div class="hinter_text landscape">竖屏体验效果更佳</div>
  189.         <div class="hinter_text portrait">横屏体验效果更佳</div>
  190.     </div>
  191.     <!-- 横屏提示代码 ]] -->
  192.     <!-- 分享弹层 [[ -->
  193.     <div class="share"></div>
  194.     <!-- 分享弹层 ]] -->
  195.     <!-- 查看更多 [[ -->
  196.     <div class="review-more" id="reviewPoint">
  197.         <div class="mod-title">
  198.             <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
  199.             <span class="">往期回顾</span>
  200.         </div>
  201.         <div class="vqq-wrap">
  202.             <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="j0511ygervb">
  203.                 <div class="vqq-cover-wrap">
  204.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/4%20%E5%BE%80%E6%9C%9F%E5%9B%9E%E9%A1%BE%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%AC%AC23%E6%9C%9F%E8%94%9A%E6%9D%A5%E6%9D%8E%E6%96%8C%20.jpg"
  205.                         alt="" class="vqq-cover">
  206.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  207.                 </div>
  208.                 <p class="vqq-title">蔚来李斌</p>
  209.                 <p class="vqq-detail">汽车革新浪潮已经袭来</p>
  210.             </a>
  211.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q05019umr82">
  212.                 <div class="vqq-cover-wrap">
  213.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/4%20%E5%BE%80%E6%9C%9F%E5%9B%9E%E9%A1%BE%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%AC%AC22%E6%9C%9F%20%E8%98%91%E8%8F%87%E8%A1%97%E6%9D%8E%E6%96%8C.png"
  214.                         alt="" class="vqq-cover">
  215.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  216.                 </div>
  217.                 <p class="vqq-title">美丽联合CEO陈琪</p>
  218.                 <p class="vqq-detail">智慧电商不安分的技术心</p>
  219.             </a>
  220.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="h0549gxsdc4">
  221.                 <div class="vqq-cover-wrap">
  222.                     <img src="https://mc.qcloudimg.com/static/img/38d704666dee79c3daa375e80d89b883/past-21.png" alt="" class="vqq-cover">
  223.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  224.                 </div>
  225.                 <p class="vqq-title">KOL--Keso洪波</p>
  226.                 <p class="vqq-detail">互联网的上半场拼什么？</p>
  227.             </a>
  228.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x05483usdlp">
  229.                 <div class="vqq-cover-wrap">
  230.                     <img src="https://mc.qcloudimg.com/static/img/c2f923ad6d80a0473d4d58f0340d0aef/past-20.png" alt="" class="vqq-cover">
  231.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  232.                 </div>
  233.                 <p class="vqq-title">财经作家吴晓波</p>
  234.                 <p class="vqq-detail">《腾讯传》背后的故事</p>
  235.             </a>
  236.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="k0544opab15">
  237.                 <div class="vqq-cover-wrap">
  238.                     <img src="https://mc.qcloudimg.com/static/img/1ff8640844895e2ff583fc0b807eba03/past-19.png" alt="" class="vqq-cover">
  239.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  240.                 </div>
  241.                 <p class="vqq-title">真格基金徐小平</p>
  242.                 <p class="vqq-detail">把创业者梦想架在云上</p>
  243.             </a>
  244.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0506969bdp">
  245.                 <div class="vqq-cover-wrap">
  246.                     <img src="https://mc.qcloudimg.com/static/img/1dd862e386976f3c0004f077989946cd/past-18.png" alt="" class="vqq-cover">
  247.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  248.                 </div>
  249.                 <p class="vqq-title">去哪儿网：张强</p>
  250.                 <p class="vqq-detail">人工智能是未来？</p>
  251.             </a>
  252.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="e0396be80re">
  253.                 <div class="vqq-cover-wrap">
  254.                     <img src="https://mc.qcloudimg.com/static/img/fbf74c5781ff45926b7da54547fc9303/past-17.png" alt="" class="vqq-cover">
  255.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  256.                 </div>
  257.                 <p class="vqq-title">G7：吴海波</p>
  258.                 <p class="vqq-detail">他们正在改变货车司机的命运</p>
  259.             </a>
  260.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="m0394e272cx">
  261.                 <div class="vqq-cover-wrap">
  262.                     <img src="https://mc.qcloudimg.com/static/img/38d7181979fef2847bb4b1c8cef3cfeb/past-16.png" alt="" class="vqq-cover">
  263.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  264.                 </div>
  265.                 <p class="vqq-title">三一重工：贺东东</p>
  266.                 <p class="vqq-detail">你了解工业4.0吗？</p>
  267.             </a>
  268.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0323qx00yh">
  269.                 <div class="vqq-cover-wrap">
  270.                     <img src="https://mc.qcloudimg.com/static/img/1ad4fafb74c00055ca8cf3db9029bca5/past-15.png" alt="" class="vqq-cover">
  271.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  272.                 </div>
  273.                 <p class="vqq-title">安心保险：钟诚</p>
  274.                 <p class="vqq-detail">互联网巨头角逐金融云</p>
  275.             </a>
  276.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="e0323ujhq2h">
  277.                 <div class="vqq-cover-wrap">
  278.                     <img src="https://mc.qcloudimg.com/static/img/8f5e94aab6005a379ce116475e71a3c1/past-14.png" alt="" class="vqq-cover">
  279.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  280.                 </div>
  281.                 <p class="vqq-title">58集团：邢宏宇</p>
  282.                 <p class="vqq-detail">漫步云端的58，怎么个神奇法？</p>
  283.             </a>
  284.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="l0326jxwn17">
  285.                 <div class="vqq-cover-wrap">
  286.                     <img src="https://mc.qcloudimg.com/static/img/37f4d2333fa5c3c93b51b9866a05a9b1/past-13.png" alt="" class="vqq-cover">
  287.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  288.                 </div>
  289.                 <p class="vqq-title">巨人网络：胡远星</p>
  290.                 <p class="vqq-detail">是什么驱动游戏产业的腾飞？</p>
  291.             </a>
  292.             <!-- <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="c032465t9in">
  293. <div class="vqq-cover-wrap">
  294. <img src="https://mc.qcloudimg.com/static/img/bcc6c4d99a47d7f95fc066be85e2e748/past-12.png" alt="" class="vqq-cover">
  295. <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  296. </div>
  297. <p class="vqq-title">饿了么：张雪峰</p>
  298. <p class="vqq-detail">020迈进下半场的关键竟是它</p>
  299. </a> -->
  300.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="r0321q98t0f">
  301.                 <div class="vqq-cover-wrap">
  302.                     <img src="https://mc.qcloudimg.com/static/img/8166234e5f6bbf79eba702c8185cace5/past-11.png" alt="" class="vqq-cover">
  303.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  304.                 </div>
  305.                 <p class="vqq-title">同程旅游：张海龙</p>
  306.                 <p class="vqq-detail">云化路上需要最信任的伙伴</p>
  307.             </a>
  308.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q0316036mzu">
  309.                 <div class="vqq-cover-wrap">
  310.                     <img src="https://mc.qcloudimg.com/static/img/31f085c9b69126f965906556afe32ecb/past-10.png" alt="" class="vqq-cover">
  311.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  312.                 </div>
  313.                 <p class="vqq-title">75峰会特别节目</p>
  314.                 <p class="vqq-detail">万科、新东方、美的大佬有话说</p>
  315.             </a>
  316.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0306fccp3n">
  317.                 <div class="vqq-cover-wrap">
  318.                     <img src="https://mc.qcloudimg.com/static/img/ea89da8d9b4adc4a9fd9324ce061a771/past-9.png" alt="" class="vqq-cover">
  319.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  320.                 </div>
  321.                 <p class="vqq-title">小红书：郄小虎</p>
  322.                 <p class="vqq-detail">云计算和小红书之间的秘密</p>
  323.             </a>
  324.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0300nr7r3a">
  325.                 <div class="vqq-cover-wrap">
  326.                     <img src="https://mc.qcloudimg.com/static/img/7716eb6c2fbd492028c81fd733e23524/past-8.png" alt="" class="vqq-cover">
  327.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  328.                 </div>
  329.                 <p class="vqq-title">百合网：杨溢欣</p>
  330.                 <p class="vqq-detail">揭秘婚恋生态圈的基实</p>
  331.             </a>
  332.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="a0186nevz6f">
  333.                 <div class="vqq-cover-wrap">
  334.                     <img src="https://mc.qcloudimg.com/static/img/268b60680f07c0257ccdcd85808f6cfa/past-7.png" alt="" class="vqq-cover">
  335.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  336.                 </div>
  337.                 <p class="vqq-title">富途证券：陈伟华</p>
  338.                 <p class="vqq-detail">富途证券，何以成互联网新贵？</p>
  339.             </a>
  340.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0182e50ql8">
  341.                 <div class="vqq-cover-wrap">
  342.                     <img src="https://mc.qcloudimg.com/static/img/56eca836e4ad3c1175929aef9a56f63d/past-6.png" alt="" class="vqq-cover">
  343.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  344.                 </div>
  345.                 <p class="vqq-title">ZEALER：王自如</p>
  346.                 <p class="vqq-detail">保护用户体验是关键</p>
  347.             </a>
  348.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="j01754n4mek">
  349.                 <div class="vqq-cover-wrap">
  350.                     <img src="https://mc.qcloudimg.com/static/img/295b85caf99b8a59def68c1a90f2bc1b/past-5.png" alt="" class="vqq-cover">
  351.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  352.                 </div>
  353.                 <p class="vqq-title">微票儿：杨森淼</p>
  354.                 <p class="vqq-detail">微票儿年增长率4000％的秘诀？</p>
  355.             </a>
  356.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="g0173y526ht">
  357.                 <div class="vqq-cover-wrap">
  358.                     <img src="https://mc.qcloudimg.com/static/img/8f94fa0c14d2816bfde22bc31daff4f3/past-4.png" alt="" class="vqq-cover">
  359.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  360.                 </div>
  361.                 <p class="vqq-title">龙珠直播：谭振林</p>
  362.                 <p class="vqq-detail">电竞圈"黑马"的崛起秘笈</p>
  363.             </a>
  364.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0163o0hqmz">
  365.                 <div class="vqq-cover-wrap">
  366.                     <img src="https://mc.qcloudimg.com/static/img/1ab90ff025dea66f440c9914842bd5ba/past-3.png" alt="" class="vqq-cover">
  367.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  368.                 </div>
  369.                 <p class="vqq-title">土巴兔：王国彬</p>
  370.                 <p class="vqq-detail">家装界Uber的七年之痒</p>
  371.             </a>
  372.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="l01617gsdti">
  373.                 <div class="vqq-cover-wrap">
  374.                     <img src="https://mc.qcloudimg.com/static/img/408c7425d6fa5d023beecd5e0e7fde50/past-2.png" alt="" class="vqq-cover">
  375.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  376.                 </div>
  377.                 <p class="vqq-title">e袋洗：岑永洪</p>
  378.                 <p class="vqq-detail">1亿美元B轮融资背后的故事</p>
  379.             </a>
  380.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q0157pd9tj4">
  381.                 <div class="vqq-cover-wrap">
  382.                     <img src="https://mc.qcloudimg.com/static/img/4588a618ea0a5b7e3978a4a61b1963f2/past-1.png" alt="" class="vqq-cover">
  383.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  384.                 </div>
  385.                 <p class="vqq-title">滴滴出行：张博</p>
  386.                 <p class="vqq-detail">解密滴滴如何挺过"补贴大战"？</p>
  387.             </a>
  388.         </div>
  389.         <div class="hide-review-more">
  390.             <a href="javascript:;" class="mod-btn" id="hideReviewPoint">收起</a>
  391.         </div>
  392.     </div>
  393.     <!-- 查看更多 ]] -->
  394.     <!-- 查看更多 [[ -->
  395.     <div class="review-more" id="currentPoint">
  396.         <div class="mod-title">
  397.             <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
  398.             <span class="">本期看点</span>
  399.         </div>
  400.         <div class="vqq-wrap">
  401.             <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="i052011obn1">
  402.                 <div class="vqq-cover-wrap">
  403.                     <!-- <img src="https://mc.qcloudimg.com/static/img/c0e5dec4872e0eb0f5b6b28aabe5bdfd/current-1.jpg" alt="" class="vqq-cover"> -->
  404.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B91.jpg"
  405.                         alt="" class="vqq-cover">
  406.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  407.                 </div>
  408.                 <p class="vqq-title">智慧+出行，摩拜解决最后一公里的痛点</p>
  409.                 <!-- <p class="vqq-detail">人工智能是未来？</p> -->
  410.             </a>
  411.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="w0520kovzqq">
  412.                 <div class="vqq-cover-wrap">
  413.                     <!-- <img src="https://mc.qcloudimg.com/static/img/a11425b45d12156c76d9752da531b0b6/current-2.jpg" alt="" class="vqq-cover"> -->
  414.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B92.jpg"
  415.                         alt="" class="vqq-cover">
  416.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  417.                 </div>
  418.                 <p class="vqq-title">整合行业资源，摩拜打造智能物联生态</p>
  419.                 <!-- <p class="vqq-detail">他们正在改变货车司机的命运</p> -->
  420.             </a>
  421.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q0520erof8t">
  422.                 <div class="vqq-cover-wrap">
  423.                     <!-- <img src="https://mc.qcloudimg.com/static/img/9c692971c9d231a150456286297ce7b7/current-3.jpg" alt="" class="vqq-cover"> -->
  424.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B93.jpg"
  425.                         alt="" class="vqq-cover">
  426.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  427.                 </div>
  428.                 <p class="vqq-title">摩拜在智能科技的投入和突破</p>
  429.                 <!-- <p class="vqq-detail">你了解工业4.0吗？</p> -->
  430.             </a>
  431.             <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="u0520vd3v7a">
  432.                 <div class="vqq-cover-wrap">
  433.                     <!-- <img src="https://mc.qcloudimg.com/static/img/b2face89c9302c9e70b81d6356625306/current-4.jpg" alt="" class="vqq-cover"> -->
  434.                     <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B94.jpg"
  435.                         alt="" class="vqq-cover">
  436.                     <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
  437.                 </div>
  438.                 <p class="vqq-title">夏一平的创业心得</p>
  439.                 <!-- <p class="vqq-detail">互联网巨头角逐金融云</p> -->
  440.             </a>
  441.         </div>
  442.         <div class="hide-review-more">
  443.             <a href="javascript:;" class="mod-btn" id="hideCurrentPoint">收起</a>
  444.         </div>
  445.     </div>
  446.     <!-- 查看更多 ]] -->
  447.     <div class="modal-video">
  448.         <div class="vide-content" id="vide-content"></div>
  449.         <div class="close-modal"></div>
  450.     </div>
  451.     <script src="https://mc.qcloudimg.com/static/script/9a328a6916e3ec86ebd4f3fa832fb233/jquery.1.9.1.js"></script>
  452.     <script src="https://mc.qcloudimg.com/static/script/a639364c11ad398f8aca217d2ce66eb3/resLoader.js"></script>
  453.     <script>
  454.         var loader = new resLoader({
  455.             resources: ['https://mc.qcloudimg.com/static/style/8c6eee6b2107ef25dc486020ced13898/normalize.css',
  456.                 'https://mc.qcloudimg.com/static/style/6af34d0737ad0ca608111771cf74cc79/swiper.min.css',
  457.                 'https://mc.qcloudimg.com/static/img/d294ae6966d2151a6fe16b9a69ca4b65/loading-cover.jpg',
  458.                 'https://mc.qcloudimg.com/static/script/7220abf5713b68943c18a9f9ceef740a/iphone-inline-video.min.js'
  459.             ],
  460.             onStart: function (total) {
  461.             },
  462.             onProgress: function (current, total) {
  463.                 var percent = parseInt(current / total * 100);
  464.                 $('#loading').text(percent + '%');
  465.                 $('.progress').css({
  466.                     'width': percent + '%'
  467.                 });
  468.             },
  469.             onComplete: function (total) {
  470.                 setTimeout(function () {
  471.                     $('.myLoading').hide();
  472.                 }, 2000);
  473.             }
  474.         });
  475.  
  476.         loader.start();
  477.     </script>
  478.     <script src="https://mc.qcloudimg.com/static/script/e8e7a359343270c64dc77834da6baa25/swiper.min.js"></script>
  479.     <script src="https://mc.qcloudimg.com/static/script/4170c05656255775ea13e32cabf8fc55/jquery.touchSwipe.min.js"></script>
  480.     <script src="https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js"></script>
  481.     <script src="https://mc.qcloudimg.com/static/script/7220abf5713b68943c18a9f9ceef740a/iphone-inline-video.min.js"></script>
  482.     <script src="https://mc.qcloudimg.com/static/script/8ccbce0261da12ebfc8d21adcc6e9154/video.js"></script>
  483.     <script>
  484.         var meet = {
  485.             _w: document.documentElement.clientWidth,
  486.             _h: document.documentElement.clientWidth,
  487.             init: function () {
  488.                 this.videoHeight = this.getHeight(16 / 9);
  489.                 this.active();
  490.                 this.initSwiper();
  491.                 this.touchSwipeReview();
  492.                 this.showShare();
  493.                 this.closeShare();
  494.                 this.showReviewPoint();
  495.                 this.showCurrentPoint();
  496.                 this.reviewPointVideo();
  497.             },
  498.             initVideo: function (id, pic) {
  499.                 var _this = this;
  500.                 var player = new Txplayer({
  501.                     containerId: 'mod-player',
  502.                     vid: id,
  503.                     width: _this._w,
  504.                     height: _this.videoHeight,
  505.                     poster: pic
  506.                 });
  507.             },
  508.             getHeight: function (scale) {
  509.                 return this._w / scale;
  510.             },
  511.             active: function () {
  512.                 var _this = this;
  513.                 $('.mod-player').css({
  514.                     'width': _this._w,
  515.                     'height': _this.videoHeight
  516.                 });
  517.                 $('#vide-content').css({
  518.                     'margin-top': (_this._h - _this.videoHeight) / 2
  519.                 })
  520.                 document.querySelector('body').addEventListener('touchmove', function (e) {
  521.                     if (!document.querySelector('.review-more').contains(e.target)) {
  522.                         e.preventDefault();
  523.                     }
  524.                 })
  525.                 _this.initVideo('b0520i6oiq9', 'http://external-1255598498.file.myqcloud.com/public_h5/%E6%91%A9%E6%8B%9CH5%E6%9B%BF%E6%8D%A2/1%20%E5%AE%8C%E6%95%B4%E7%89%88%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2%E5%9B%BE/%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2%E5%9B%BE.JPG');
  526.             },
  527.             initSwiper: function () {
  528.                 var mySwiper = new Swiper('.swiper-container', {
  529.                     direction: 'vertical',
  530.                     loop: false,
  531.                     pagination: '.swiper-pagination',
  532.                     speed: 200,
  533.                     onSlideChangeStart: function (swiper) {
  534.                         console.log(swiper.activeIndex);
  535.                         if (swiper.activeIndex === 2) {
  536.                             $('.slider-up').addClass('slider-up-guide');
  537.                         } else {
  538.  
  539.                         }
  540.                     }
  541.                 })
  542.             },
  543.             touchSwipeReview: function () {
  544.                 $(".review").swipe({
  545.                     swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
  546.                         if (direction === 'up') {
  547.                         }
  548.                     }
  549.                 });
  550.             },
  551.             showShare: function () {
  552.                 $('#qrcodeShow').on('click', function () {
  553.                     $('.share').fadeIn();
  554.                 })
  555.             },
  556.             closeShare: function () {
  557.                 $('.share').on('click', function () {
  558.                     $(this).fadeOut();
  559.                 })
  560.             },
  561.             showReviewPoint: function () {
  562.                 $('#showReviewPoint').on('click', function () {
  563.                     $('#reviewPoint').fadeIn();
  564.                 })
  565.                 $('#hideReviewPoint').on('click', function () {
  566.                     $('#reviewPoint').fadeOut();
  567.                 })
  568.             },
  569.             showCurrentPoint: function () {
  570.                 $('#showCurrentPoint').on('click', function () {
  571.                     $('#currentPoint').fadeIn();
  572.                 })
  573.                 $('#hideCurrentPoint').on('click', function () {
  574.                     $('#currentPoint').fadeOut();
  575.                 })
  576.             },
  577.             reviewPointVideo: function () {
  578.                 var _this = this;
  579.                 var player;
  580.                 $('.show-video').on('click', function () {
  581.                     var vid = $(this).attr('data-vid');
  582.                     console.log(vid)
  583.                     player = new Txplayer({
  584.                         containerId: 'vide-content',
  585.                         vid: vid,
  586.                         width: _this._w,
  587.                         height: _this.videoHeight
  588.                     });
  589.                     $('.modal-video').fadeIn();
  590.                 })
  591.                 $('.close-modal').on('click', function () {
  592.                     $('.modal-video').fadeOut();
  593.                     $('#vide-content').empty();
  594.                 })
  595.             }
  596.         }
  597.  
  598.         $(document).ready(function () {
  599.             $('body').on('touchmove', function (event) {
  600.             });
  601.             meet.init();
  602.         });
  603.     </script>
  604. </body>
  605.  
  606. </html>

　　

womenzijide2的更多相关文章

随机推荐

  1. 【ABAP系列】SAP ABAP ALV中设置CHECKBOX同时选中事件

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP ALV中设置CHE ...

  2. PS把一张白色背景的图片设为透明

    方法一: 1.双击图层缩略图上的小锁图标(注意,这里不要拖动小锁进行删除锁定),弹出“新建图层”,确定 2.右键左侧第四个功能菜单,选择魔棒工具 3.用魔棒工具在白色背景区域点击一下,选中白色区域背景 ...

  3. mysql使用触发器生成唯一订单号，

    需求:订单号唯一,并且期望是时间格式加其他字符串, 实现:采用触发机制,在新增时根据新增id值加1作为订单生成的随机且确定唯一的数,因为id唯一: 遇到问题:新增时不能提前知道id值, 解决:取到当前 ...

  4. jvm学习（2）JVM内存说明

    前言 一.类方法 类方法是静态方法,前面需要有static修饰符修饰.类方法内不能涉及有关变量的内容1.不能调用类的对象方法2.不能引用对象变量3.类方法不能被重写(覆盖)4.类方法不能使用super ...

  5. JVM调优 dump文件怎么生成和分析

    1.获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: - ...

  6. 洛谷 - P3649 - 回文串 - 回文自动机

    https://www.luogu.org/problem/P3649 #include <bits/stdc++.h> using namespace std; typedef long ...

  7. ofbiz框架以及核心原理介绍

    1. 什么是Ofbiz Ofbiz(Open for business)是一个开源的,基于J2EE和XML规范的,用于构建大型企业级.跨平台.跨数据库.跨应用服务器的多层.分布式电子商务类WEB应用系 ...

  8. EwoMail 邮件服务器安装

    ewomail 安装及使用 主页:http://www.ewomail.com/ 开源版主页:http://www.ewomail.com/list-9.html 开源版文档:http://doc.e ...

  9. 部署Tomcat服务器

    部署Tomcat服务器,具体内容如下: 1.安装部署JDK基础环境; 2.安装部署Tomcat服务器; 3.创建JSP测试页面,文件名为test.jsp,显示服务器当前时间. 然后客户机访问Web服务 ...

  10. vue的class和style的绑定

    <div class="input-search" :class="{input-search-focus : iscur == 1}"> 在原本有 ...