Merge pull request 'xbx' (#217) from xbx into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/217

dist/css/chunk-2c9b2f26.86e9a8a8.css

@@ -1 +0,0 @@
-.video[data-v-c231389e]{width:9.76rem;height:5.63rem;border-radius:.18rem;overflow:hidden;display:flex;flex-direction:column}.video>video[data-v-c231389e]{width:100%;height:5.05rem}.video .liveinfo[data-v-c231389e]{flex-shrink:0;display:flex;justify-content:space-between;height:.58rem;align-items:center;background-color:#fff}.video .liveinfo .left[data-v-c231389e]{display:flex;color:#121212;font-size:.13rem;margin-left:.29rem}.video .liveinfo .left .score[data-v-c231389e]{color:#d22c2e;font-size:.13rem}.video .liveinfo .left>div[data-v-c231389e]{margin-right:.57rem}.video .liveinfo .left .icon[data-v-c231389e]{width:.25rem;height:.24rem;margin-right:.06rem}.video .liveinfo .right[data-v-c231389e]{width:.74rem;height:.29rem;border:.01rem solid #08ae98;border-radius:.03rem;margin-right:.29rem;color:#08ae98;cursor:pointer;font-size:.13rem;line-height:.29rem;font-weight:700;text-align:center}.cont[data-v-49ae79ed]{width:3.16rem;height:5.63rem;background-color:#fff;border-radius:.17rem;padding:0 .28rem;position:relative;overflow:auto}.cont .title[data-v-49ae79ed]{padding:.23rem 0 .11rem 0;font-size:.13rem;color:#111;line-height:1;border-bottom:.01rem solid #eee;display:flex;justify-content:space-between}.cont .title .more[data-v-49ae79ed]{color:#999;font-size:.11rem;cursor:pointer}.cont .info .item[data-v-49ae79ed]{display:flex;align-content:center;justify-content:space-between;margin-top:.23rem;font-size:.1rem}.cont .info .item .stuinfo[data-v-49ae79ed]{margin:auto 0;margin-left:.11rem;color:#111}.cont .info .item .stuinfo .lessonname[data-v-49ae79ed]{color:#666}.cont .info .item .takehour[data-v-49ae79ed]{color:#08ae98;font-size:.11rem;margin:auto 0;text-align:center}.cont .info .item>div>img[data-v-49ae79ed]{width:.57rem;height:.57rem;border-radius:50%}.cont .refuse[data-v-49ae79ed]{color:#d22c2e;margin:auto 0;width:.57rem;text-align:center}.cont .cancel[data-v-49ae79ed]{margin:auto 0;min-width:.57rem;height:.23rem;border:.01rem solid #09ae99;line-height:.23rem;text-align:center;cursor:pointer;color:#09ae99;border-radius:.03rem}.cont .button[data-v-49ae79ed]{position:absolute;width:2.6rem;bottom:.28rem;display:flex;justify-content:space-between}.cont .button>div[data-v-49ae79ed]{width:1.14rem;height:.23rem;border-radius:.03rem;font-size:.1rem;color:#fff;line-height:.23rem;text-align:center}.cont .button .modify[data-v-49ae79ed]{background-color:#08ae98}.cont .button .del[data-v-49ae79ed]{background-color:#d12c2e}.cont[data-v-49ae79ed] .modal-dialog{border-radius:.28rem;overflow:hidden;padding:0;width:5.69rem!important}.cont[data-v-49ae79ed] .modal-dialog .close{width:.14rem;height:.14rem}.cont[data-v-49ae79ed] .modal-dialog .yuanyin{margin-top:.13rem;font-size:.11rem;color:#111;font-weight:700}.cont[data-v-49ae79ed] .modal-dialog .body{display:flex;margin-top:.34rem}.cont[data-v-49ae79ed] .modal-dialog .body .jubao{font-size:.11rem;color:grey;margin-right:.28rem}.cont[data-v-49ae79ed] .modal-dialog .body .text{width:3.59rem;height:.85rem;font-size:.11rem}.cont[data-v-49ae79ed] .modal-dialog .submit-btn{width:.63rem;height:.23rem;background:#08ae98;border-radius:.03rem;font-size:.1rem;font-weight:500;color:#fff;text-align:center;line-height:.23rem;cursor:pointer;user-select:none;margin-top:.57rem}.livedetail[data-v-55dff82c]{width:13.2rem;height:5.63rem}.livedetail .info[data-v-55dff82c]{width:13.21rem;display:flex;justify-content:center}.livedetail .info .liveplay[data-v-55dff82c]{background:#fff;border-radius:.18rem;margin-right:.29rem}.livedetail .review[data-v-55dff82c]{margin-top:.28rem}

dist/css/chunk-bfb7be0e.4fd7590c.css

@@ -1 +1 @@
-.video[data-v-471d113a]{width:9.76rem;height:5.63rem;border-radius:.17rem;background:#fff;position:relative;overflow:hidden}.video>video[data-v-471d113a]{width:100%;height:100%}.video .title[data-v-471d113a]{position:absolute;top:.23rem;left:.51rem;font-size:.13rem;color:#fff;z-index:999}.video .fenxiang[data-v-471d113a]{left:unset;right:.51rem;display:flex;align-items:center}.video .fenxiang>img[data-v-471d113a]{width:.11rem;height:.11rem;margin-right:.11rem}.modal-container[data-v-471d113a] .ant-modal-header{padding:0}.modal-container[data-v-471d113a] .ant-modal-title{font-size:.12rem;margin-top:-.09rem;padding-bottom:.2rem}.modal-container[data-v-471d113a] .ant-modal-close{top:.08rem}.modal-container[data-v-471d113a] .ant-modal-body{padding:0}.modal-container[data-v-471d113a] .modal-dialog{border-radius:.36rem;overflow:hidden}.modal-container[data-v-471d113a] .modal-dialog .close{width:.14rem;height:.14rem}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content{box-sizing:border-box;padding:.35rem .3rem;background:#fff;box-shadow:0 .04rem .06rem 0 hsla(0,0%,40%,.07);border-radius:.26rem;overflow:hidden}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content .notice-container{display:flex;align-items:center;padding-top:.3rem}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content .notice-container>div{width:auto;display:flex;align-items:center;font-size:.12rem}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content .notice-container>div>img{width:.35rem;margin-right:.05rem}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content .notice-container>div:first-child{margin-right:.8rem}.modal-container[data-v-471d113a] .modal-dialog .ant-modal-content .report .sub-title{margin-bottom:.5rem}.cont[data-v-003d59b2]{width:3.16rem;height:5.63rem;background-color:#fff;border-radius:.17rem;padding:0 .28rem;position:relative}.cont .title[data-v-003d59b2]{padding:.23rem 0 .11rem 0;font-size:.13rem;color:#111;line-height:1;border-bottom:.01rem solid #eee}.cont .info .item1[data-v-003d59b2]{position:relative;left:-.12rem}.cont .info .status[data-v-003d59b2]{color:#07ad97!important}.cont .info .status1[data-v-003d59b2]{color:#d12c2d!important}.cont .info .item[data-v-003d59b2]{display:flex;align-content:center;margin-top:.23rem}.cont .info .item>img[data-v-003d59b2]{width:.24rem;height:.24rem}.cont .info .item>span[data-v-003d59b2]{font-size:.11rem;color:#666;margin-left:.1rem}.cont .button[data-v-003d59b2]{position:absolute;width:2.6rem;bottom:.28rem;display:flex;justify-content:space-between}.cont .button>div[data-v-003d59b2]{width:1.14rem;height:.23rem;border-radius:.03rem;font-size:.1rem;color:#fff;line-height:.23rem;text-align:center;cursor:pointer}.cont .button .modify[data-v-003d59b2]{background-color:#08ae98}.cont .button .del[data-v-003d59b2]{background-color:#d12c2e}.videoinfo[data-v-f3c916e0]{width:13.2rem;height:5.63rem}.videoinfo .info[data-v-f3c916e0]{display:flex;justify-content:space-between}.videoinfo .review[data-v-f3c916e0]{margin-top:.28rem}
+.video[data-v-0e133a80]{width:9.76rem;height:5.63rem;border-radius:.17rem;background:#fff;position:relative;overflow:hidden}.video>video[data-v-0e133a80]{width:100%;height:100%}.video .title[data-v-0e133a80]{position:absolute;top:.23rem;left:.51rem;font-size:.13rem;color:#fff;z-index:999}.video .fenxiang[data-v-0e133a80]{left:unset;right:.51rem;display:flex;align-items:center}.video .fenxiang>img[data-v-0e133a80]{width:.11rem;height:.11rem;margin-right:.11rem}.modal-container[data-v-0e133a80] .ant-modal-header{padding:0}.modal-container[data-v-0e133a80] .ant-modal-title{font-size:.12rem;margin-top:-.09rem;padding-bottom:.2rem}.modal-container[data-v-0e133a80] .ant-modal-close{top:.08rem}.modal-container[data-v-0e133a80] .ant-modal-body{padding:0}.modal-container[data-v-0e133a80] .modal-dialog{border-radius:.36rem;overflow:hidden}.modal-container[data-v-0e133a80] .modal-dialog .close{width:.14rem;height:.14rem}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content{box-sizing:border-box;padding:.35rem .3rem;background:#fff;box-shadow:0 .04rem .06rem 0 hsla(0,0%,40%,.07);border-radius:.26rem;overflow:hidden}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content .notice-container{display:flex;align-items:center;padding-top:.3rem}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content .notice-container>div{width:auto;display:flex;align-items:center;font-size:.12rem}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content .notice-container>div>img{width:.35rem;margin-right:.05rem}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content .notice-container>div:first-child{margin-right:.8rem}.modal-container[data-v-0e133a80] .modal-dialog .ant-modal-content .report .sub-title{margin-bottom:.5rem}.cont[data-v-003d59b2]{width:3.16rem;height:5.63rem;background-color:#fff;border-radius:.17rem;padding:0 .28rem;position:relative}.cont .title[data-v-003d59b2]{padding:.23rem 0 .11rem 0;font-size:.13rem;color:#111;line-height:1;border-bottom:.01rem solid #eee}.cont .info .item1[data-v-003d59b2]{position:relative;left:-.12rem}.cont .info .status[data-v-003d59b2]{color:#07ad97!important}.cont .info .status1[data-v-003d59b2]{color:#d12c2d!important}.cont .info .item[data-v-003d59b2]{display:flex;align-content:center;margin-top:.23rem}.cont .info .item>img[data-v-003d59b2]{width:.24rem;height:.24rem}.cont .info .item>span[data-v-003d59b2]{font-size:.11rem;color:#666;margin-left:.1rem}.cont .button[data-v-003d59b2]{position:absolute;width:2.6rem;bottom:.28rem;display:flex;justify-content:space-between}.cont .button>div[data-v-003d59b2]{width:1.14rem;height:.23rem;border-radius:.03rem;font-size:.1rem;color:#fff;line-height:.23rem;text-align:center;cursor:pointer}.cont .button .modify[data-v-003d59b2]{background-color:#08ae98}.cont .button .del[data-v-003d59b2]{background-color:#d12c2e}.videoinfo[data-v-f3c916e0]{width:13.2rem;height:5.63rem}.videoinfo .info[data-v-f3c916e0]{display:flex;justify-content:space-between}.videoinfo .review[data-v-f3c916e0]{margin-top:.28rem}

dist/index.html

@@ -61,11 +61,11 @@
             left: 0;
             z-index: 1001;
             display: none;
-        }</style><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-07015098.03da786d.css" rel="prefetch"><link href="/css/chunk-0d9de69e.0e433876.css" rel="prefetch"><link href="/css/chunk-14e01a5d.87ce32b1.css" rel="prefetch"><link href="/css/chunk-14e6a7cb.9cba31b5.css" rel="prefetch"><link href="/css/chunk-18d6ebc2.07c0f4a4.css" rel="prefetch"><link href="/css/chunk-1abac668.206f270b.css" rel="prefetch"><link href="/css/chunk-21d6a1b9.85832ac1.css" rel="prefetch"><link href="/css/chunk-2415f10c.0e433876.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-2c9b2f26.86e9a8a8.css" rel="prefetch"><link href="/css/chunk-3c7641ed.f87c4e8b.css" rel="prefetch"><link href="/css/chunk-46cefeb5.78141e1e.css" rel="prefetch"><link href="/css/chunk-46e3b07d.9259aefd.css" rel="prefetch"><link href="/css/chunk-4e0b884c.48d44d85.css" rel="prefetch"><link href="/css/chunk-520d8a08.dd761c06.css" rel="prefetch"><link href="/css/chunk-623eb100.c75b32b7.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-737c53fe.6caedc04.css" rel="prefetch"><link href="/css/chunk-74d6e86d.85aed290.css" rel="prefetch"><link href="/css/chunk-8d0dacb4.b6d4145a.css" rel="prefetch"><link href="/css/chunk-977f0f52.6081abf8.css" rel="prefetch"><link href="/css/chunk-aff6a506.4b9b513f.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.b978a41f.js" rel="prefetch"><link href="/js/chunk-05d3c41a.985b7a34.js" rel="prefetch"><link href="/js/chunk-06828374.1b4f37ee.js" rel="prefetch"><link href="/js/chunk-07015098.21ded38b.js" rel="prefetch"><link href="/js/chunk-0d9de69e.d7efa2bb.js" rel="prefetch"><link href="/js/chunk-14e01a5d.d2983560.js" rel="prefetch"><link href="/js/chunk-14e6a7cb.b914a547.js" rel="prefetch"><link href="/js/chunk-18d6ebc2.e8a89e2f.js" rel="prefetch"><link href="/js/chunk-1abac668.36379823.js" rel="prefetch"><link href="/js/chunk-21d6a1b9.f74f6b87.js" rel="prefetch"><link href="/js/chunk-2415f10c.38e27521.js" rel="prefetch"><link href="/js/chunk-27236dd2.149a663c.js" rel="prefetch"><link href="/js/chunk-2a197f09.5cb0889b.js" rel="prefetch"><link href="/js/chunk-2c9b2f26.6ef20301.js" rel="prefetch"><link href="/js/chunk-3c7641ed.05d04420.js" rel="prefetch"><link href="/js/chunk-46cefeb5.f8af7008.js" rel="prefetch"><link href="/js/chunk-46e3b07d.86a7a428.js" rel="prefetch"><link href="/js/chunk-4e0b884c.851fc7ff.js" rel="prefetch"><link href="/js/chunk-520d8a08.61cd1105.js" rel="prefetch"><link href="/js/chunk-623eb100.d5fffb2c.js" rel="prefetch"><link href="/js/chunk-650d0cb1.61a4883e.js" rel="prefetch"><link href="/js/chunk-68091c98.7bf25f05.js" rel="prefetch"><link href="/js/chunk-737c53fe.6e2ffa92.js" rel="prefetch"><link href="/js/chunk-74d6e86d.4e000617.js" rel="prefetch"><link href="/js/chunk-8d0dacb4.e994258a.js" rel="prefetch"><link href="/js/chunk-977f0f52.aa87c603.js" rel="prefetch"><link href="/js/chunk-aff6a506.cc78c7e0.js" rel="prefetch"><link href="/js/chunk-da7e1532.4b71bb2c.js" rel="prefetch"><link href="/js/chunk-ebdb96a0.0296b8c3.js" rel="prefetch"><link href="/js/chunk-ef207110.d170f9c2.js" rel="prefetch"><link href="/css/app.30b6bfaa.css" rel="preload" as="style"><link href="/css/chunk-vendors.d0a33139.css" rel="preload" as="style"><link href="/js/app.8dc29585.js" rel="preload" as="script"><link href="/js/chunk-vendors.5e652f88.js" rel="preload" as="script"><link href="/css/chunk-vendors.d0a33139.css" rel="stylesheet"><link href="/css/app.30b6bfaa.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><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-07015098.03da786d.css" rel="prefetch"><link href="/css/chunk-0d9de69e.0e433876.css" rel="prefetch"><link href="/css/chunk-13df6c63.cf93d877.css" rel="prefetch"><link href="/css/chunk-14e6a7cb.9cba31b5.css" rel="prefetch"><link href="/css/chunk-18d6ebc2.07c0f4a4.css" rel="prefetch"><link href="/css/chunk-1abac668.206f270b.css" rel="prefetch"><link href="/css/chunk-21d6a1b9.85832ac1.css" rel="prefetch"><link href="/css/chunk-2415f10c.0e433876.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-3c7641ed.f87c4e8b.css" rel="prefetch"><link href="/css/chunk-46cefeb5.78141e1e.css" rel="prefetch"><link href="/css/chunk-46e3b07d.9259aefd.css" rel="prefetch"><link href="/css/chunk-4e0b884c.48d44d85.css" rel="prefetch"><link href="/css/chunk-520d8a08.dd761c06.css" rel="prefetch"><link href="/css/chunk-623eb100.c75b32b7.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-737c53fe.6caedc04.css" rel="prefetch"><link href="/css/chunk-74d6e86d.85aed290.css" rel="prefetch"><link href="/css/chunk-8d0dacb4.b6d4145a.css" rel="prefetch"><link href="/css/chunk-977f0f52.6081abf8.css" rel="prefetch"><link href="/css/chunk-bfb7be0e.4fd7590c.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="/css/chunk-fb5c51ea.450d4ce3.css" rel="prefetch"><link href="/js/chunk-04e3a2fa.b978a41f.js" rel="prefetch"><link href="/js/chunk-05d3c41a.985b7a34.js" rel="prefetch"><link href="/js/chunk-06828374.1b4f37ee.js" rel="prefetch"><link href="/js/chunk-07015098.21ded38b.js" rel="prefetch"><link href="/js/chunk-0d9de69e.d7efa2bb.js" rel="prefetch"><link href="/js/chunk-13df6c63.0b03e8ab.js" rel="prefetch"><link href="/js/chunk-14e6a7cb.b914a547.js" rel="prefetch"><link href="/js/chunk-18d6ebc2.e8a89e2f.js" rel="prefetch"><link href="/js/chunk-1abac668.36379823.js" rel="prefetch"><link href="/js/chunk-21d6a1b9.f74f6b87.js" rel="prefetch"><link href="/js/chunk-2415f10c.38e27521.js" rel="prefetch"><link href="/js/chunk-27236dd2.149a663c.js" rel="prefetch"><link href="/js/chunk-2a197f09.5cb0889b.js" rel="prefetch"><link href="/js/chunk-3c7641ed.05d04420.js" rel="prefetch"><link href="/js/chunk-46cefeb5.f8af7008.js" rel="prefetch"><link href="/js/chunk-46e3b07d.86a7a428.js" rel="prefetch"><link href="/js/chunk-4e0b884c.851fc7ff.js" rel="prefetch"><link href="/js/chunk-520d8a08.61cd1105.js" rel="prefetch"><link href="/js/chunk-623eb100.d5fffb2c.js" rel="prefetch"><link href="/js/chunk-650d0cb1.61a4883e.js" rel="prefetch"><link href="/js/chunk-68091c98.7bf25f05.js" rel="prefetch"><link href="/js/chunk-737c53fe.6e2ffa92.js" rel="prefetch"><link href="/js/chunk-74d6e86d.4e000617.js" rel="prefetch"><link href="/js/chunk-8d0dacb4.e994258a.js" rel="prefetch"><link href="/js/chunk-977f0f52.aa87c603.js" rel="prefetch"><link href="/js/chunk-bfb7be0e.bf51c95d.js" rel="prefetch"><link href="/js/chunk-da7e1532.4b71bb2c.js" rel="prefetch"><link href="/js/chunk-ebdb96a0.0296b8c3.js" rel="prefetch"><link href="/js/chunk-ef207110.d170f9c2.js" rel="prefetch"><link href="/js/chunk-fb5c51ea.55895dae.js" rel="prefetch"><link href="/css/app.30b6bfaa.css" rel="preload" as="style"><link href="/css/chunk-vendors.d0a33139.css" rel="preload" as="style"><link href="/js/app.145bd2d9.js" rel="preload" as="script"><link href="/js/chunk-vendors.5e652f88.js" rel="preload" as="script"><link href="/css/chunk-vendors.d0a33139.css" rel="stylesheet"><link href="/css/app.30b6bfaa.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/chunk-vendors.5e652f88.js"></script><script src="/js/app.8dc29585.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/chunk-vendors.5e652f88.js"></script><script src="/js/app.145bd2d9.js"></script></body></html>

src/components/LivePlay.vue

@@ -2,7 +2,9 @@
   <div class="video">
     <video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:100%"></video>
     <img v-else :src="info.img" style="width:100%;height:100%" alt="">
+    <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
     <div class="liveinfo">
+
           <div class="left">
               <div>
                   <img src="@/static/images/livelesson.png" alt="" class="icon">
@@ -31,6 +33,35 @@
           </div>
           
       </div>
+         <div class="modal-container">
+                <!-- @cancel="hideNoticeModal" -->
+
+            <a-modal
+                centered
+                :footer="null"
+                dialogClass="modal-dialog"
+                v-model:visible="fxtc"
+                title="请选择分享途径"
+                :getContainer="modalNode"
+                width="4rem"
+            >
+                <template v-slot:closeIcon>
+                    <img src="@/static/images/delete.png" class="close" />
+                </template>
+                <div class="notice-container report">
+                     <div @click="fx(1)">
+                        <img src="@/static/images/weibo.png" alt="" srcset="">
+                        新浪微博
+                    </div>
+                    <div @click="fx(2)">
+                        <img src="@/static/images/facebook.png" alt="" srcset="">
+                        Facebook
+                    </div>
+                   
+                </div>
+               
+            </a-modal>
+        </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -41,10 +72,30 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
   > video {
     width: 100%;
     height: 505px;
   }
+     .title{
+        position: absolute;
+        top: 23px;
+        left: 51px;
+        font-size: 13px;
+        color: #fff;
+        z-index: 999;
+    }
+    .fenxiang{
+        left: unset;
+        right: 51px;
+        display: flex;
+        align-items: center;
+        >img{
+            width: 11px;
+            height: 11px;
+            margin-right: 11px;
+        }
+    }
   .liveinfo{
         flex-shrink: 0;
         display: flex;
@@ -52,6 +103,7 @@
         height: 58px;
         align-items: center;
         background-color: #fff;
+        position: relative;
         .left{
             display: flex;
             color: #121212;
@@ -85,10 +137,67 @@
             text-align: center;
         }
       }
+      .modal-container {
+    ::v-deep(.ant-modal-header){
+        padding: 0;
+    }
+    ::v-deep(.ant-modal-title){
+        font-size: 12px;
+        margin-top: -0.09rem;
+        padding-bottom: 20px;
+    }
+    ::v-deep(.ant-modal-close){
+        top: 8px;
+    }
+    ::v-deep(.ant-modal-body){
+        padding: 0;
+    }
+        ::v-deep(.modal-dialog) {
+            border-radius: 36px;
+            overflow: hidden;
+            .close {
+                width: 14px;
+                height: 14px;
+            }
+            .ant-modal-content {
+                box-sizing: border-box;
+                padding: 35px 30px;
+                // width: 569px;
+                background: #ffffff;
+                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
+                border-radius: 26px;
+                overflow: hidden;
+                .notice-container {
+                  display: flex;
+                  align-items: center;
+                  padding-top: 30px;
+                  >div{
+                      width: auto;
+                      display: flex;
+                      align-items: center;
+                      font-size: 12px;
+                      >img{
+                          width: 35px;
+                          margin-right: 5px;
+                      }
+                  }
+                  >div:first-child{
+                      margin-right: 80px;
+
+                  }
+                }
+                .report {
+                    .sub-title {
+                        margin-bottom: 50px;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>
 <script lang="ts">
-import { livestart } from '@/api';
+import { livestart, share } from '@/api';
 import router from '@/router';
 import { useI18n } from '@/utils/i18n';
 import { defineComponent, onUpdated, ref, watch } from "vue";
@@ -118,7 +227,7 @@ export default defineComponent({
     const time = ref(new Date().getTime())
     let play: any;
     const isvideo = ref(true);
-    
+    const fxtc = ref(false)
     watch(()=> props.info,()=>{
       if(props.info){
         console.log(props.info)
@@ -141,13 +250,33 @@ export default defineComponent({
       }
         next()
     })
+            function fx(index: number){
+            console.log(index)
+            share().then((res: any)=>{
+                console.log(res)
+                let url = "";
+                if(index == 1){
+                    url = `https://service.weibo.com/share/share.php?url=${res.shareUrl}&appkey=2754574056&language=zh_cn&pic=${res.shareImg}&searchPic=true&title=${res.shareTitle}`
+                }else {
+                    url = `https://www.facebook.com/sharer/sharer.php?%20u=${res.shareUrl}&t=${res.shareTitle}`
+                }
+                window.open(url, "_blank")
+            })
+        }
+        function show(){
+            fxtc.value = true
+        }
     // const liveinfo = ref(props.liveinfo)
     return {
       bianji,
       kaishi,
       lan,
       time,
-      isvideo
+      isvideo,
+      fx,
+      fxtc,
+      show,
+      modalNode: () => document.getElementsByClassName("modal-container")[0],
     }
   }
 });

src/components/VideoPlay.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="video">
         <div class="title">{{title}}</div>
-        <div class="title fenxiang"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
+        <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
         <video style="width:100%; height:100%;" :id="'a' + url" ></video>
         <div class="modal-container">
                 <!-- @cancel="hideNoticeModal" -->
@@ -10,7 +10,7 @@
                 centered
                 :footer="null"
                 dialogClass="modal-dialog"
-                :visible="true"
+                v-model:visible="fxtc"
                 title="请选择分享途径"
                 :getContainer="modalNode"
                 width="4rem"
@@ -129,7 +129,7 @@
 import { share } from '@/api';
 import router from '@/router';
 import { useI18n } from '@/utils/i18n';
-import { defineComponent, onMounted, onUpdated } from 'vue';
+import { defineComponent, onMounted, onUpdated, ref, watch } from 'vue';
 import { onBeforeRouteLeave, useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -145,13 +145,37 @@ export default defineComponent({
         console.log(1)
         let play: any;
         const lan = useI18n()
-        onUpdated(()=>{
+        const fxtc = ref(false)
+        // onMounted(()=>{
+        //     console.log(props.url)
+        //     play = window.TCPlayer('a' + props.url, { 
+        //         fileID: props.url,
+        //         appID: '1303872925' 
+        //     });
+        // })
+        onMounted(()=>{
             console.log(props.url)
-            play = window.TCPlayer('a' + props.url, { 
+            if(props.url){
-                fileID: props.url,
+                console.log(props.url)
-                appID: '1303872925' 
+                play = window.TCPlayer('a' + props.url, { 
-            });
+                    fileID: props.url,
+                    appID: '1303872925' 
+                });
+            }else{
+                watch(()=> props.url,()=>{
+                    console.log(props.url)
+                    setTimeout(()=>{
+                        play = window.TCPlayer('a' + props.url, { 
+                            fileID: props.url,
+                            appID: '1303872925' 
+                        });
+                    }, 500)
+                    
+                })
+            }
+            
         })
+        
         onBeforeRouteLeave((to, from, next) => {
             console.log(121)
             play.dispose()
@@ -170,11 +194,16 @@ export default defineComponent({
                 window.open(url, "_blank")
             })
         }
+        function show(){
+            fxtc.value = true
+        }
         return{
             lan,
             modalNode: () =>
                 document.getElementsByClassName("modal-container")[0],
-            fx
+            fx,
+            fxtc,
+            show
         }
       
     }

src/views/regime/Livedetail.vue

@@ -35,8 +35,9 @@ import liveplay from "@/components/LivePlay.vue";
 import LiveCount from "@/components/LiveCount.vue";
 import VideoReview from "@/components/VideoReview.vue";
 import { useRoute } from "vue-router";
-import { getliveinfo } from "@/api";
+import { getliveinfo, share } from "@/api";
 import router from '@/router';
+import { useI18n } from "@/utils/i18n";
 export default defineComponent({
   components: {
     LiveCount,