dist/index.html

@@ -61,11 +61,11 @@
             left: 0;
             z-index: 1001;
             display: none;
-        }</style><meta property="og:type" content="website"><meta property="og:title" content="分享测试测试"><meta property="og:description" content="分享描述"><meta property="og:image" content="http://1303872925.vod2.myqcloud.com/7db674eavodcq1303872925/a5d03b0c5285890810149245655/vrLgNu2JaBkA.png"><meta property="og:url" content="https://beelink.theluyuan.com/"><link href="/css/chunk-04e3a2fa.08ef3a2d.css" rel="prefetch"><link href="/css/chunk-05d3c41a.55076a31.css" rel="prefetch"><link href="/css/chunk-06828374.8e285ce3.css" rel="prefetch"><link href="/css/chunk-0d9de69e.0e433876.css" rel="prefetch"><link href="/css/chunk-18d6ebc2.07c0f4a4.css" rel="prefetch"><link href="/css/chunk-1908dacf.4661450c.css" rel="prefetch"><link href="/css/chunk-19951b38.61589eff.css" rel="prefetch"><link href="/css/chunk-1f21263e.b9051f93.css" rel="prefetch"><link href="/css/chunk-21b42480.6808bbcc.css" rel="prefetch"><link href="/css/chunk-27236dd2.3992b5d2.css" rel="prefetch"><link href="/css/chunk-2a197f09.b2772b24.css" rel="prefetch"><link href="/css/chunk-2b71f1e5.182b1bb8.css" rel="prefetch"><link href="/css/chunk-3326ceee.61cdda7f.css" rel="prefetch"><link href="/css/chunk-39b973ba.0e433876.css" rel="prefetch"><link href="/css/chunk-3c7641ed.f87c4e8b.css" rel="prefetch"><link href="/css/chunk-4663db36.3eaba60f.css" rel="prefetch"><link href="/css/chunk-520d8a08.dd761c06.css" rel="prefetch"><link href="/css/chunk-650d0cb1.47d38586.css" rel="prefetch"><link href="/css/chunk-68091c98.14c0db2d.css" rel="prefetch"><link href="/css/chunk-6e7aa5b1.9851e10f.css" rel="prefetch"><link href="/css/chunk-74d6e86d.85aed290.css" rel="prefetch"><link href="/css/chunk-7582a703.b7f6c0c7.css" rel="prefetch"><link href="/css/chunk-7da0eb18.409b8eb7.css" rel="prefetch"><link href="/css/chunk-8d0dacb4.b6d4145a.css" rel="prefetch"><link href="/css/chunk-922d780a.e11df9e0.css" rel="prefetch"><link href="/css/chunk-977f0f52.6081abf8.css" rel="prefetch"><link href="/css/chunk-a4a29886.aa3c0949.css" rel="prefetch"><link href="/css/chunk-da7e1532.17a6e0e0.css" rel="prefetch"><link href="/css/chunk-ebdb96a0.d22f743d.css" rel="prefetch"><link href="/css/chunk-ef207110.a20941ed.css" rel="prefetch"><link href="/js/chunk-04e3a2fa.644947cf.js" rel="prefetch"><link href="/js/chunk-05d3c41a.eb6172e6.js" rel="prefetch"><link href="/js/chunk-06828374.396a639e.js" rel="prefetch"><link href="/js/chunk-0d9de69e.9b497785.js" rel="prefetch"><link href="/js/chunk-18d6ebc2.705d439f.js" rel="prefetch"><link href="/js/chunk-1908dacf.5a77bef7.js" rel="prefetch"><link href="/js/chunk-19951b38.ac7b67af.js" rel="prefetch"><link href="/js/chunk-1f21263e.93577762.js" rel="prefetch"><link href="/js/chunk-21b42480.bd68920f.js" rel="prefetch"><link href="/js/chunk-27236dd2.6a20330a.js" rel="prefetch"><link href="/js/chunk-2a197f09.a0d9b395.js" rel="prefetch"><link href="/js/chunk-2b71f1e5.1586a6db.js" rel="prefetch"><link href="/js/chunk-3326ceee.c535d5c4.js" rel="prefetch"><link href="/js/chunk-39b973ba.b9a3c15b.js" rel="prefetch"><link href="/js/chunk-3c7641ed.98a67f5d.js" rel="prefetch"><link href="/js/chunk-4663db36.8cb98f8c.js" rel="prefetch"><link href="/js/chunk-520d8a08.fa8b550a.js" rel="prefetch"><link href="/js/chunk-650d0cb1.35a1fd6a.js" rel="prefetch"><link href="/js/chunk-68091c98.6bc9c5f0.js" rel="prefetch"><link href="/js/chunk-6e7aa5b1.3223b150.js" rel="prefetch"><link href="/js/chunk-74d6e86d.014b0140.js" rel="prefetch"><link href="/js/chunk-7582a703.6d0001bc.js" rel="prefetch"><link href="/js/chunk-7da0eb18.889148b0.js" rel="prefetch"><link href="/js/chunk-8d0dacb4.e4bf4f99.js" rel="prefetch"><link href="/js/chunk-922d780a.54ca79a7.js" rel="prefetch"><link href="/js/chunk-977f0f52.162b9d9d.js" rel="prefetch"><link href="/js/chunk-a4a29886.574f1892.js" rel="prefetch"><link href="/js/chunk-da7e1532.4b71bb2c.js" rel="prefetch"><link href="/js/chunk-ebdb96a0.cbefff6f.js" rel="prefetch"><link href="/js/chunk-ef207110.58ca6790.js" rel="prefetch"><link href="/css/app.3feb420b.css" rel="preload" as="style"><link href="/css/chunk-vendors.d0a33139.css" rel="preload" as="style"><link href="/js/app.24ba2485.js" rel="preload" as="script"><link href="/js/chunk-vendors.60dc9ef4.js" rel="preload" as="script"><link href="/css/chunk-vendors.d0a33139.css" rel="stylesheet"><link href="/css/app.3feb420b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but beelink doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><div id="make"></div><script>window.fbAsyncInit = function () {
+        }</style><meta property="og:type" content="website"><meta property="og:title" content="分享测试测试"><meta property="og:description" content="分享描述"><meta property="og:image" content="http://1303872925.vod2.myqcloud.com/7db674eavodcq1303872925/a5d03b0c5285890810149245655/vrLgNu2JaBkA.png"><meta property="og:url" content="https://beelink.theluyuan.com/"><link href="/css/chunk-04e3a2fa.08ef3a2d.css" rel="prefetch"><link href="/css/chunk-05d3c41a.55076a31.css" rel="prefetch"><link href="/css/chunk-06828374.8e285ce3.css" rel="prefetch"><link href="/css/chunk-0d9de69e.0e433876.css" rel="prefetch"><link href="/css/chunk-18d6ebc2.07c0f4a4.css" rel="prefetch"><link href="/css/chunk-1908dacf.4661450c.css" rel="prefetch"><link href="/css/chunk-1f21263e.b9051f93.css" rel="prefetch"><link href="/css/chunk-21b42480.6808bbcc.css" rel="prefetch"><link href="/css/chunk-27236dd2.3992b5d2.css" rel="prefetch"><link href="/css/chunk-2a197f09.b2772b24.css" rel="prefetch"><link href="/css/chunk-2b71f1e5.182b1bb8.css" rel="prefetch"><link href="/css/chunk-2d97bb7f.2d22ae68.css" rel="prefetch"><link href="/css/chunk-3326ceee.61cdda7f.css" rel="prefetch"><link href="/css/chunk-39b973ba.0e433876.css" rel="prefetch"><link href="/css/chunk-3c7641ed.f87c4e8b.css" rel="prefetch"><link href="/css/chunk-4663db36.3eaba60f.css" rel="prefetch"><link href="/css/chunk-520d8a08.dd761c06.css" rel="prefetch"><link href="/css/chunk-650d0cb1.47d38586.css" rel="prefetch"><link href="/css/chunk-68091c98.14c0db2d.css" rel="prefetch"><link href="/css/chunk-6e7aa5b1.9851e10f.css" rel="prefetch"><link href="/css/chunk-74d6e86d.85aed290.css" rel="prefetch"><link href="/css/chunk-7582a703.b7f6c0c7.css" rel="prefetch"><link href="/css/chunk-7da0eb18.409b8eb7.css" rel="prefetch"><link href="/css/chunk-8d0dacb4.b6d4145a.css" rel="prefetch"><link href="/css/chunk-922d780a.e11df9e0.css" rel="prefetch"><link href="/css/chunk-977f0f52.6081abf8.css" rel="prefetch"><link href="/css/chunk-a4a29886.aa3c0949.css" rel="prefetch"><link href="/css/chunk-da7e1532.17a6e0e0.css" rel="prefetch"><link href="/css/chunk-ebdb96a0.d22f743d.css" rel="prefetch"><link href="/css/chunk-ef207110.a20941ed.css" rel="prefetch"><link href="/js/chunk-04e3a2fa.644947cf.js" rel="prefetch"><link href="/js/chunk-05d3c41a.eb6172e6.js" rel="prefetch"><link href="/js/chunk-06828374.396a639e.js" rel="prefetch"><link href="/js/chunk-0d9de69e.9b497785.js" rel="prefetch"><link href="/js/chunk-18d6ebc2.705d439f.js" rel="prefetch"><link href="/js/chunk-1908dacf.5a77bef7.js" rel="prefetch"><link href="/js/chunk-1f21263e.93577762.js" rel="prefetch"><link href="/js/chunk-21b42480.bd68920f.js" rel="prefetch"><link href="/js/chunk-27236dd2.6a20330a.js" rel="prefetch"><link href="/js/chunk-2a197f09.a0d9b395.js" rel="prefetch"><link href="/js/chunk-2b71f1e5.1586a6db.js" rel="prefetch"><link href="/js/chunk-2d97bb7f.d3a4fc8c.js" rel="prefetch"><link href="/js/chunk-3326ceee.c535d5c4.js" rel="prefetch"><link href="/js/chunk-39b973ba.b9a3c15b.js" rel="prefetch"><link href="/js/chunk-3c7641ed.98a67f5d.js" rel="prefetch"><link href="/js/chunk-4663db36.8cb98f8c.js" rel="prefetch"><link href="/js/chunk-520d8a08.fa8b550a.js" rel="prefetch"><link href="/js/chunk-650d0cb1.35a1fd6a.js" rel="prefetch"><link href="/js/chunk-68091c98.6bc9c5f0.js" rel="prefetch"><link href="/js/chunk-6e7aa5b1.3223b150.js" rel="prefetch"><link href="/js/chunk-74d6e86d.014b0140.js" rel="prefetch"><link href="/js/chunk-7582a703.6d0001bc.js" rel="prefetch"><link href="/js/chunk-7da0eb18.889148b0.js" rel="prefetch"><link href="/js/chunk-8d0dacb4.e4bf4f99.js" rel="prefetch"><link href="/js/chunk-922d780a.54ca79a7.js" rel="prefetch"><link href="/js/chunk-977f0f52.162b9d9d.js" rel="prefetch"><link href="/js/chunk-a4a29886.574f1892.js" rel="prefetch"><link href="/js/chunk-da7e1532.4b71bb2c.js" rel="prefetch"><link href="/js/chunk-ebdb96a0.cbefff6f.js" rel="prefetch"><link href="/js/chunk-ef207110.58ca6790.js" rel="prefetch"><link href="/css/app.3feb420b.css" rel="preload" as="style"><link href="/css/chunk-vendors.d0a33139.css" rel="preload" as="style"><link href="/js/app.918454d8.js" rel="preload" as="script"><link href="/js/chunk-vendors.60dc9ef4.js" rel="preload" as="script"><link href="/css/chunk-vendors.d0a33139.css" rel="stylesheet"><link href="/css/app.3feb420b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but beelink doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><div id="make"></div><script>window.fbAsyncInit = function () {
             FB.init({
                 appId: '277826133389999',
                 autoLogAppEvents: true,
                 xfbml: true,
                 version: 'v8.0'
             });
-        };</script><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script><script src="/js/cropper.min.js"></script><script src="/js/jquery-3.2.1.min.js"></script><div id="xiangqingdivadsensedisplaynone" style="display:none;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-7145171713084445" data-ad-slot="9189068072"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div id="guanlidivadsensedisplaynone" style="display:none;"><ins class="adsbygoogle" style="display:inline-block;width:450px;height:380px" data-ad-client="ca-pub-7145171713084445" data-ad-slot="4213570423"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><script>$("meta[property='og:title']")[0].content = "测试动态"</script><script src="/js/chunk-vendors.60dc9ef4.js"></script><script src="/js/app.24ba2485.js"></script></body></html>
+        };</script><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script><script src="/js/cropper.min.js"></script><script src="/js/jquery-3.2.1.min.js"></script><div id="xiangqingdivadsensedisplaynone" style="display:none;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-7145171713084445" data-ad-slot="9189068072"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div id="guanlidivadsensedisplaynone" style="display:none;"><ins class="adsbygoogle" style="display:inline-block;width:450px;height:380px" data-ad-client="ca-pub-7145171713084445" data-ad-slot="4213570423"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><script>$("meta[property='og:title']")[0].content = "测试动态"</script><script src="/js/chunk-vendors.60dc9ef4.js"></script><script src="/js/app.918454d8.js"></script></body></html>

dist/share.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        //designWidth:设计稿的实际宽度值，需要根据实际设置
+        //maxWidth:制作稿的最大宽度值，需要根据实际设置
+        //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
+        (function (designWidth, maxWidth) {
+            var doc = document,
+                win = window,
+                docEl = doc.documentElement,
+                remStyle = document.createElement("style"),
+                tid;
+
+            function refreshRem() {
+
+                var width = docEl.getBoundingClientRect().width;
+                // maxWidth = maxWidth || 540; //不需要判断最大宽度
+                // width > maxWidth && (width = maxWidth);
+                var rem = width / designWidth;
+                console.log(rem)
+
+                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
+            }
+
+            if (docEl.firstElementChild) {
+                docEl.firstElementChild.appendChild(remStyle);
+            } else {
+                var wrap = doc.createElement("div");
+                wrap.appendChild(remStyle);
+                doc.write(wrap.innerHTML);
+                wrap = null;
+            }
+            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+            refreshRem();
+
+            win.addEventListener("resize", function () {
+                clearTimeout(tid); //防止执行两次
+                tid = setTimeout(refreshRem, 300);
+            }, false);
+
+            win.addEventListener("pageshow", function (e) {
+                if (e.persisted) { // 浏览器后退的时候重新计算
+                    clearTimeout(tid);
+                    tid = setTimeout(refreshRem, 300);
+                }
+            }, false);
+
+            if (doc.readyState === "complete") {
+                doc.body.style.fontSize = "16px";
+            } else {
+                doc.addEventListener("DOMContentLoaded", function (e) {
+                    doc.body.style.fontSize = "px";
+                }, false);
+            }
+        })(1366, 1024);
+    </script>
+    <style>
+        .share {
+  min-width: 100%;
+  /* height: 100vh; */
+  background: url("../../static/images/loginbg.png");
+  background-size: 100% 130%;
+  background-repeat: no-repeat;
+  overflow-x: hidden;
+}
+
+.share .active {
+  background: #f6fcfb !important;
+  border: 1rem solid #0ebba4 !important;
+  box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07) !important;
+}
+
+.share .box .top {
+  padding-top: 97rem;
+  margin-left: 144rem;
+  color: #121212;
+  font-weight: bold;
+  font-size: 18rem;
+}
+
+.share .box .top .org_name {
+  color: #0ebca4;
+  font-size: 29rem;
+  margin-left: 7rem;
+}
+
+.share .box .mid {
+  width: 998rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 44rem;
+}
+
+.share .box .mid .left {
+  width: 314rem;
+  border: 1rem solid #eeeeee;
+  box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07);
+  border-radius: 8rem;
+  background: white;
+  text-align: center;
+}
+
+.share .box .mid .left .title {
+  font-size: 15rem;
+  color: #121212;
+  font-weight: bold;
+  padding-top: 41rem;
+  margin-bottom: 33rem;
+}
+
+.share .box .mid .left .pic {
+  width: 114rem;
+  height: 114rem;
+}
+
+.share .box .mid .left .ale {
+  color: #121212;
+  font-size: 12rem;
+  margin-top: 70rem;
+  margin-bottom: 17rem;
+}
+
+.share .box .mid .left .link {
+  color: #4992ec;
+  font-size: 12rem;
+  margin-bottom: 31rem;
+}
+
+.share .box .mid .right {
+  width: 627rem;
+  display: flex;
+  padding-left: 65rem;
+}
+
+.share .box .mid .right .line {
+  width: 1rem;
+  height: 221rem;
+  background: #eeeeee;
+  margin: auto 0;
+  margin-left: 65rem;
+}
+
+.share .box .mid .right .ewms {
+  font-size: 12rem;
+  color: #121212;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.share .box .mid .right .ewms > div {
+  margin-bottom: 57rem;
+}
+
+.share .box .mid .right .ewms .ewm {
+  width: 61rem;
+  height: 63rem;
+  margin-left: 12rem;
+}
+
+.share .box .mid .right .ewms .ewm1 {
+  margin-left: 20rem;
+}
+
+.share .bottom {
+  height: 317rem;
+  margin-top: 44rem;
+  background: #08ae98;
+  color: white;
+  font-size: 10rem;
+}
+
+.share .bottom .content {
+  width: 415rem;
+  padding-top: 59rem;
+  margin-left: 144rem;
+}
+
+.share .bottom .content .title {
+  font-size: 18rem;
+  font-weight: 800;
+}
+
+.share .bottom .content .rowline {
+  width: 46rem;
+  height: 2rem;
+  background: #68df7e;
+  margin-top: 18rem;
+  margin-bottom: 34rem;
+}
+
+.share .bottom .content .texts {
+  text-align: left;
+  margin: 0 auto;
+}
+
+.share .bottom .content .relation {
+  height: 29rem;
+  display: flex;
+  line-height: 29rem;
+  margin-top: 52rem;
+  color: white;
+}
+
+.share .bottom .content .relation .more {
+  width: 86rem;
+  height: 29rem;
+  background: #68df7e;
+  color: white;
+  text-align: center;
+  line-height: 29rem;
+  border-radius: 15rem;
+}
+
+.share .bottom .content .relation .icon {
+  width: 9rem;
+  height: 12rem;
+  margin: auto 0;
+  margin-right: 6rem;
+  margin-left: 29rem;
+}
+
+.share .bottom .content .relation .email {
+  width: 15rem;
+}
+
+    </style>
+</head>
+<body style="margin: 0">
+    <div class="share">
+        <div class="box">
+          <div class="top">
+            您好，欢迎来到
+            <span class="org_name">Beelink</span>
+          </div>
+          <div class="mid">
+            <div class="left active">
+              <div class="title">如果您是老师</div>
+              <img src="@/static/images/teacher.png" alt="" class="pic" />
+              <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
+              <div class="link">https://www.beelinkXXXX.com</div>
+            </div>
+            <div class="left right">
+              <div>
+                <div class="title">如果您是老师</div>
+                <img src="@/static/images/teacher.png" alt="" class="pic" />
+                <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
+                <div class="link">https://www.beelinkXXXX.com</div>
+              </div>
+              <div class="line"></div>
+              <div class="ewms">
+                <div>
+                  <span>Google play </span>
+                  <img src="@/static/images/ewm1.png" alt="" class="ewm" />
+                </div>
+                <div>
+                  <span> App store </span>
+                  <img src="@/static/images/ewm1.png" alt="" class="ewm ewm1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content">
+            <div class="title">关于 Beelink</div>
+            <div class="rowline"></div>
+            <div class="texts">
+              Beelink平台拥有数千名优秀老师，丰富的教育经验和有趣的课堂环境，一对一辅导
+              平台的教务管理、线上课堂、线下课堂、助学互动，课程回放等多项教学功能，让
+              您利用碎片时间，轻轻松松学会各种语言。
+            </div>
+            <div class="relation">
+              <img src="@/static/images/tel.png" alt="" class="icon" />
+              <div>136-0111-1111</div>
+    
+              <img src="@/static/images/email.png" alt="" class="icon email" />
+              <div>136-0111-1111</div>
+            </div>
+          </div>
+        </div>
+      </div>
+</body>
+</html>

public/share.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        //designWidth:设计稿的实际宽度值，需要根据实际设置
+        //maxWidth:制作稿的最大宽度值，需要根据实际设置
+        //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
+        (function (designWidth, maxWidth) {
+            var doc = document,
+                win = window,
+                docEl = doc.documentElement,
+                remStyle = document.createElement("style"),
+                tid;
+
+            function refreshRem() {
+
+                var width = docEl.getBoundingClientRect().width;
+                // maxWidth = maxWidth || 540; //不需要判断最大宽度
+                // width > maxWidth && (width = maxWidth);
+                var rem = width / designWidth;
+                console.log(rem)
+
+                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
+            }
+
+            if (docEl.firstElementChild) {
+                docEl.firstElementChild.appendChild(remStyle);
+            } else {
+                var wrap = doc.createElement("div");
+                wrap.appendChild(remStyle);
+                doc.write(wrap.innerHTML);
+                wrap = null;
+            }
+            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+            refreshRem();
+
+            win.addEventListener("resize", function () {
+                clearTimeout(tid); //防止执行两次
+                tid = setTimeout(refreshRem, 300);
+            }, false);
+
+            win.addEventListener("pageshow", function (e) {
+                if (e.persisted) { // 浏览器后退的时候重新计算
+                    clearTimeout(tid);
+                    tid = setTimeout(refreshRem, 300);
+                }
+            }, false);
+
+            if (doc.readyState === "complete") {
+                doc.body.style.fontSize = "16px";
+            } else {
+                doc.addEventListener("DOMContentLoaded", function (e) {
+                    doc.body.style.fontSize = "px";
+                }, false);
+            }
+        })(1366, 1024);
+    </script>
+    <style>
+        .share {
+  min-width: 100%;
+  /* height: 100vh; */
+  background: url("../../static/images/loginbg.png");
+  background-size: 100% 130%;
+  background-repeat: no-repeat;
+  overflow-x: hidden;
+}
+
+.share .active {
+  background: #f6fcfb !important;
+  border: 1rem solid #0ebba4 !important;
+  box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07) !important;
+}
+
+.share .box .top {
+  padding-top: 97rem;
+  margin-left: 144rem;
+  color: #121212;
+  font-weight: bold;
+  font-size: 18rem;
+}
+
+.share .box .top .org_name {
+  color: #0ebca4;
+  font-size: 29rem;
+  margin-left: 7rem;
+}
+
+.share .box .mid {
+  width: 998rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 44rem;
+}
+
+.share .box .mid .left {
+  width: 314rem;
+  border: 1rem solid #eeeeee;
+  box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07);
+  border-radius: 8rem;
+  background: white;
+  text-align: center;
+}
+
+.share .box .mid .left .title {
+  font-size: 15rem;
+  color: #121212;
+  font-weight: bold;
+  padding-top: 41rem;
+  margin-bottom: 33rem;
+}
+
+.share .box .mid .left .pic {
+  width: 114rem;
+  height: 114rem;
+}
+
+.share .box .mid .left .ale {
+  color: #121212;
+  font-size: 12rem;
+  margin-top: 70rem;
+  margin-bottom: 17rem;
+}
+
+.share .box .mid .left .link {
+  color: #4992ec;
+  font-size: 12rem;
+  margin-bottom: 31rem;
+}
+
+.share .box .mid .right {
+  width: 627rem;
+  display: flex;
+  padding-left: 65rem;
+}
+
+.share .box .mid .right .line {
+  width: 1rem;
+  height: 221rem;
+  background: #eeeeee;
+  margin: auto 0;
+  margin-left: 65rem;
+}
+
+.share .box .mid .right .ewms {
+  font-size: 12rem;
+  color: #121212;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.share .box .mid .right .ewms > div {
+  margin-bottom: 57rem;
+}
+
+.share .box .mid .right .ewms .ewm {
+  width: 61rem;
+  height: 63rem;
+  margin-left: 12rem;
+}
+
+.share .box .mid .right .ewms .ewm1 {
+  margin-left: 20rem;
+}
+
+.share .bottom {
+  height: 317rem;
+  margin-top: 44rem;
+  background: #08ae98;
+  color: white;
+  font-size: 10rem;
+}
+
+.share .bottom .content {
+  width: 415rem;
+  padding-top: 59rem;
+  margin-left: 144rem;
+}
+
+.share .bottom .content .title {
+  font-size: 18rem;
+  font-weight: 800;
+}
+
+.share .bottom .content .rowline {
+  width: 46rem;
+  height: 2rem;
+  background: #68df7e;
+  margin-top: 18rem;
+  margin-bottom: 34rem;
+}
+
+.share .bottom .content .texts {
+  text-align: left;
+  margin: 0 auto;
+}
+
+.share .bottom .content .relation {
+  height: 29rem;
+  display: flex;
+  line-height: 29rem;
+  margin-top: 52rem;
+  color: white;
+}
+
+.share .bottom .content .relation .more {
+  width: 86rem;
+  height: 29rem;
+  background: #68df7e;
+  color: white;
+  text-align: center;
+  line-height: 29rem;
+  border-radius: 15rem;
+}
+
+.share .bottom .content .relation .icon {
+  width: 9rem;
+  height: 12rem;
+  margin: auto 0;
+  margin-right: 6rem;
+  margin-left: 29rem;
+}
+
+.share .bottom .content .relation .email {
+  width: 15rem;
+}
+
+    </style>
+</head>
+<body style="margin: 0">
+    <div class="share">
+        <div class="box">
+          <div class="top">
+            您好，欢迎来到
+            <span class="org_name">Beelink</span>
+          </div>
+          <div class="mid">
+            <div class="left active">
+              <div class="title">如果您是老师</div>
+              <img src="@/static/images/teacher.png" alt="" class="pic" />
+              <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
+              <div class="link">https://www.beelinkXXXX.com</div>
+            </div>
+            <div class="left right">
+              <div>
+                <div class="title">如果您是老师</div>
+                <img src="@/static/images/teacher.png" alt="" class="pic" />
+                <div class="ale">想要赚取直播收益，请使用电脑端访问一下域名</div>
+                <div class="link">https://www.beelinkXXXX.com</div>
+              </div>
+              <div class="line"></div>
+              <div class="ewms">
+                <div>
+                  <span>Google play </span>
+                  <img src="@/static/images/ewm1.png" alt="" class="ewm" />
+                </div>
+                <div>
+                  <span> App store </span>
+                  <img src="@/static/images/ewm1.png" alt="" class="ewm ewm1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content">
+            <div class="title">关于 Beelink</div>
+            <div class="rowline"></div>
+            <div class="texts">
+              Beelink平台拥有数千名优秀老师，丰富的教育经验和有趣的课堂环境，一对一辅导
+              平台的教务管理、线上课堂、线下课堂、助学互动，课程回放等多项教学功能，让
+              您利用碎片时间，轻轻松松学会各种语言。
+            </div>
+            <div class="relation">
+              <img src="@/static/images/tel.png" alt="" class="icon" />
+              <div>136-0111-1111</div>
+    
+              <img src="@/static/images/email.png" alt="" class="icon email" />
+              <div>136-0111-1111</div>
+            </div>
+          </div>
+        </div>
+      </div>
+</body>
+</html>

src/components/LivePlay.vue

@@ -234,7 +234,7 @@ export default defineComponent({
       if(props.info){
         console.log(props.info)
 
-          if(props.info.fileid != '0' || props.info.vodid != ''){
+          if(props.info.fileid != '' || props.info.vodid != ''){
             play = window.TCPlayer('a' + time.value, { 
                 fileID: (props.info.livestatus == 0 ? props.info.fileid : props.info.vodid),
                 appID: '1303872925'