all in

package-lock.json

@@ -995,7 +995,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.12.5.tgz?cache=0&sync_timestamp=1604443606981&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.12.5.tgz",
       "integrity": "sha1-QQ5+SHRB4bNgwpvnFdhw2bmFiC4=",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -1105,6 +1104,11 @@
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.5.4.tgz?cache=0&sync_timestamp=1604076368519&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.5.4.tgz",
+      "integrity": "sha1-3iW12p9yeYWjdX/Vm10Cirp1hBo="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -1399,11 +1403,23 @@
         }
       }
     },
+    "@vant/icons": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.4.0.tgz?cache=0&sync_timestamp=1604235300752&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.4.0.tgz",
+      "integrity": "sha1-qR94lPLzQ1b3il1vi51PGkat0MU="
+    },
+    "@vant/popperjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/@vant/popperjs/download/@vant/popperjs-1.0.0.tgz",
+      "integrity": "sha1-LWarS44nXJj7gvXv1D/dR5ZNEfI=",
+      "requires": {
+        "@popperjs/core": "^2.5.4"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz?cache=0&sync_timestamp=1602851174430&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fbabel-helper-vue-jsx-merge-props%2Fdownload%2F%40vue%2Fbabel-helper-vue-jsx-merge-props-1.2.1.tgz",
-      "integrity": "sha1-MWJKelBfsU2h1YAjclpMXycOaoE=",
-      "dev": true
+      "integrity": "sha1-MWJKelBfsU2h1YAjclpMXycOaoE="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.0.0-rc.2",
@@ -2287,6 +2303,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1605751734916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2326,6 +2350,19 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.0.tgz?cache=0&sync_timestamp=1603468783865&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.0.tgz",
+      "integrity": "sha1-Jt8IiAOiNQ3/LCf5b++Z/klEKso=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz",
@@ -2347,6 +2384,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -3944,8 +4002,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4383,6 +4440,19 @@
       "integrity": "sha1-ElTrOUrNIgqDbqHyA/jN7U5IcFI=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.14.1.tgz",
+      "integrity": "sha1-i1dFxzZsHBpgO7bAIShupxh+KqI=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz",
@@ -5026,8 +5096,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
     },
     "for-in": {
       "version": "1.0.2",
@@ -6994,6 +7063,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -8252,10 +8326,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "version": "6.9.4",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
+      "integrity": "sha1-kJCykNH5FyjTwi5UhDykSupatoc="
     },
     "query-string": {
       "version": "4.3.4",
@@ -8376,8 +8449,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U=",
-      "dev": true
+      "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -8574,6 +8646,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -8594,6 +8674,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.19.0.tgz",
@@ -9736,6 +9821,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz",
@@ -10212,6 +10302,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npm.taobao.org/vant/download/vant-2.11.1.tgz",
+      "integrity": "sha1-5x4SHJUXcM5BLRcqqN82K+8fubw=",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "1.4.0",
+        "@vant/popperjs": "^1.0.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -10252,6 +10354,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
+    },
     "vue-loader": {
       "version": "15.9.5",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.5.tgz?cache=0&sync_timestamp=1606702158389&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.5.tgz",

package.json

@@ -7,7 +7,11 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
+    "element-ui": "^2.14.1",
+    "qs": "^6.9.4",
+    "vant": "^2.11.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

public/index.html

@@ -2,6 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <script src="//static.mudu.tv/es6-promise/es6-promise.auto.min.js"></script>
+
+    <script>window.FETCHER_SERVER_URL = "ws://fetcher.mudu.tv:8088";</script>
+    <!--    <script>window.FETCHER_SERVER_URL = "wss://fetcher.mudu.tv";</script>-->
+    <script src="//static.mudu.tv/fetcher/bundle.6d7aca164d2389e8bea6.js"></script>
+    <script src="//static.mudu.tv/static/websdk/sdk.js"></script>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
@@ -13,5 +19,9 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+
+    <script type="module">
+      export default Mudu;
+    </script>
   </body>
 </html>

src/App.vue

@@ -1,32 +1,26 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+
+    <router-view></router-view>
   </div>
+  
 </template>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
+<script>
+export default {
+  mounted() {
+    if (this._isMobile()) {
+      this.$router.replace('/mobileIndex');
+    } else {
+      this.$router.replace('/pcIndex');
     }
-  }
+  },
+  methods: {
+    _isMobile() {
+      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
+      return flag;
+    }
+  },
 }
+</script>
+<style lang="scss">
 </style>

src/assets/pc/css/pc.scss

@@ -0,0 +1,5 @@
+body,
+html {
+    padding: 0;
+    margin: 0;
+}

src/assets/pc/css/pc.wxss

@@ -0,0 +1,5 @@
+body,
+html {
+  padding: 0;
+  margin: 0;
+}

src/assets/pc/css/video.scss

@@ -0,0 +1,393 @@
+body,
+html {
+    padding: 0;
+    margin: 0;
+}
+
+.video-container {
+    width: 100%;
+    height: 100%;
+    min-width: 1000px;
+    position: relative;
+    /*  display: flex;
+    justify-content: center;*/
+    padding-top: 150px;
+    margin: 0 auto;
+
+    .back-img {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: -10;
+    }
+
+    .video-player {
+        height: 630px;
+        border: 0;
+        margin-right: 10px;
+
+        .el-card__body {
+            padding: 0;
+        }
+
+        .player {
+            height: 480px;
+        }
+
+        @at-root .title {
+            padding: 0 20px;
+            height: 100px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ebeef5;
+
+            .video-title {
+                position: relative;
+                height: 100%;
+                padding-left: 80px;
+
+                .title-img {
+                    width: 60px;
+                    height: 60px;
+                    border-radius: 50%;
+                    position: absolute;
+                    left: 0;
+                    top: 20px;
+                }
+
+                .broadcaster-name {
+                    margin-top: 20px;
+                    font-size: 20px;
+                }
+
+                .info {
+                    display: flex;
+                    justify-content: flex-start;
+                    margin-top: 20px;
+                    font-size: 13px;
+
+                    @at-root .viewer-num {
+                        margin-right: 20px;
+                    }
+
+                    .share {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .present {
+                position: relative;
+                text-align: center;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                border: 1px solid #ebeef5;
+                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
+
+                font-size: 12px;
+                margin-bottom: 20px;
+
+                .present-btn {
+                    width: 41px;
+                    height: 41px;
+                    border-radius: 50%;
+                    border: 1px solid #ebeef5;
+                    margin: 3px;
+                    background-color: #DEBD57;
+                    cursor: pointer;
+
+                    >img {
+                        width: 50px;
+                        position: absolute;
+                        left: 50%;
+                        top: 0;
+                        bottom: 0;
+                        transform: translateX(-50%);
+                    }
+
+                    &:hover {
+                        >img {
+                            width: 56px;
+                            top: -3px;
+                        }
+                    }
+                }
+
+            }
+        }
+
+        .barrage {
+            height: 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 20px;
+
+            >.video-mobile {
+                cursor: pointer;
+            }
+
+            >.barrage-btn {
+                .el-switch {
+                    margin-left: 10px;
+                }
+            }
+        }
+
+        img {
+            width: 100%;
+        }
+
+
+    }
+
+    .comments {
+        height: 600px;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .el-card__body {
+            padding: 10px;
+
+            .cose-title {
+                text-align: center;
+                border-bottom: 1px solid #ebeef5;
+                line-height: 40px;
+            }
+        }
+
+        .messages-content {
+            flex: 1;
+            min-height: 500px;
+            >.item {
+                margin-top: 4px;
+
+                .time {
+                    font-size: 12px;
+                    color: #bbb;
+                    text-align: center;
+                    padding: 8px 0;
+                }
+
+                .message {
+                    display: flex;
+                    justify-content: flex-start;
+
+                    .head-img {
+                        padding-right: 10px;
+
+                        >img {
+                            width: 40px;
+                            height: 40px;
+                            border-radius: 50%;
+                        }
+                    }
+
+                    .word {
+                        .user {
+                            font-size: 12px;
+                            color: #454545;
+
+                        }
+
+                        .tidings {
+                            display: inline-block;
+                            margin-top: 6px;
+                            font-size: 12px;
+                            color: #454545;
+                            background-color: #f2f6fd;
+                            padding: 8px 10px;
+                            line-height: 16px;
+                            border-radius: 0px 8px 8px 8px;
+                            letter-spacing: 1px;
+                        }
+                    }
+
+                }
+            }
+        }
+
+        .send{
+            display: flex;
+            justify-content: center;
+            
+            .textbox{
+                flex: 1;
+                margin-right: 10px;
+            }
+            .el-input__inner{
+                height: 33px;
+                line-height: 33px;
+            }
+            .el-button {
+                padding: 8px 14px;
+            }
+        }
+    }
+
+
+
+}
+
+.card {
+    background-color: #fff;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    border-radius: 6px;
+}
+
+.icon {
+    font-size: 16px;
+    color: #448AFF;
+    margin-right: 5px;
+
+}
+
+.present-content {
+    >.present-title {
+        font-size: 17px;
+        font-weight: 600;
+        text-align: center;
+        width: 100%;
+        line-height: 20px;
+        height: 30px;
+        color: #000;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    >.content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+
+        >.item {
+            width: 90px;
+            height: 110px;
+            margin: 5px 5px;
+            padding: 5px 5px;
+            text-align: center;
+            border: 1px solid #fff;
+            border-radius: 4px;
+            cursor: pointer;
+
+            img {
+                width: 60px;
+                height: 60px;
+            }
+
+            p {
+                margin: 5px 0 0 0;
+                font-size: 12px;
+            }
+
+            .price {
+                color: #999;
+            }
+
+            >.present-send {
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+
+                @at-root.present-info {
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+
+                    @at-root.present-img {
+                        width: 80px;
+                    }
+                }
+
+                @at-root.present-desc {
+                    display: flex;
+                    justify-content: space-between;
+                    flex-direction: column;
+                    margin-left: 12px;
+                    height: 80px;
+                    border-bottom: 1px solid #ebeef5;
+
+                    >p {
+                        text-align: left;
+                        margin: 0;
+                        font-size: 16px;
+
+                    }
+
+                    .present-num {
+                        width: 200px;
+                        height: 30px;
+                        display: flex;
+                        justify-content: flex-end;
+
+                        .el-input-number {
+                            width: 80px;
+                            line-height: 18px;
+
+                            .el-input-number__decrease,
+                            .el-input-number__increase {
+                                width: 21px;
+                            }
+
+                            .el-input__inner {
+                                height: 20px;
+                                padding-left: 20px;
+                                padding-right: 20px;
+                            }
+                        }
+                    }
+                }
+
+                @at-root.present-totalprice {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding-top: 12px;
+
+                    >.send {
+                        .el-button {
+                            padding: 5px 15px;
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+
+            &:hover {
+                border: 1px solid #F78989;
+                border-radius: 4px;
+                box-shadow: 0 2px 5px 0 rgba(247, 137, 137, .5);
+
+                .price {
+                    color: #F78989;
+                }
+            }
+        }
+
+
+    }
+
+    >.present-num {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+
+.present-active {
+    border: 1px solid #F78989;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px 0 rgba(247, 137, 137, .5);
+
+    .price {
+        color: #F04040;
+    }
+}
+
+.c-666 {
+    color: #666;
+}

src/assets/pc/css/video.wxss

@@ -0,0 +1,374 @@
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+  min-width: 1000px;
+  position: relative;
+  /*  display: flex;
+    justify-content: center;*/
+  padding-top: 150px;
+  margin: 0 auto;
+}
+
+.video-container .back-img {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: -10;
+}
+
+.video-container .video-player {
+  height: 630px;
+  border: 0;
+  margin-right: 10px;
+}
+
+.video-container .video-player .el-card__body {
+  padding: 0;
+}
+
+.video-container .video-player .player {
+  height: 480px;
+}
+
+.title {
+  padding: 0 20px;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.title .video-title {
+  position: relative;
+  height: 100%;
+  padding-left: 80px;
+}
+
+.title .video-title .title-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 20px;
+}
+
+.title .video-title .broadcaster-name {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+.title .video-title .info {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+  font-size: 13px;
+}
+
+.viewer-num {
+  margin-right: 20px;
+}
+
+.title .video-title .info .share {
+  cursor: pointer;
+}
+
+.title .present {
+  position: relative;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+  margin-bottom: 20px;
+}
+
+.title .present .present-btn {
+  width: 41px;
+  height: 41px;
+  border-radius: 50%;
+  border: 1px solid #ebeef5;
+  margin: 3px;
+  background-color: #DEBD57;
+  cursor: pointer;
+}
+
+.title .present .present-btn > img {
+  width: 50px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+
+.title .present .present-btn:hover > img {
+  width: 56px;
+  top: -3px;
+}
+
+.video-container .video-player .barrage {
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.video-container .video-player .barrage > .video-mobile {
+  cursor: pointer;
+}
+
+.video-container .video-player .barrage > .barrage-btn .el-switch {
+  margin-left: 10px;
+}
+
+.video-container .video-player img {
+  width: 100%;
+}
+
+.video-container .comments {
+  height: 600px;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.video-container .comments .el-card__body {
+  padding: 10px;
+}
+
+.video-container .comments .el-card__body .cose-title {
+  text-align: center;
+  border-bottom: 1px solid #ebeef5;
+  line-height: 40px;
+}
+
+.video-container .comments .messages-content {
+  flex: 1;
+  min-height: 500px;
+}
+
+.video-container .comments .messages-content > .item {
+  margin-top: 4px;
+}
+
+.video-container .comments .messages-content > .item .time {
+  font-size: 12px;
+  color: #bbb;
+  text-align: center;
+  padding: 8px 0;
+}
+
+.video-container .comments .messages-content > .item .message {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.video-container .comments .messages-content > .item .message .head-img {
+  padding-right: 10px;
+}
+
+.video-container .comments .messages-content > .item .message .head-img > img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.video-container .comments .messages-content > .item .message .word .user {
+  font-size: 12px;
+  color: #454545;
+}
+
+.video-container .comments .messages-content > .item .message .word .tidings {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #454545;
+  background-color: #f2f6fd;
+  padding: 8px 10px;
+  line-height: 16px;
+  border-radius: 0px 8px 8px 8px;
+  letter-spacing: 1px;
+}
+
+.video-container .comments .send {
+  display: flex;
+  justify-content: center;
+}
+
+.video-container .comments .send .textbox {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.video-container .comments .send .el-input__inner {
+  height: 33px;
+  line-height: 33px;
+}
+
+.video-container .comments .send .el-button {
+  padding: 8px 14px;
+}
+
+.card {
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+
+.icon {
+  font-size: 16px;
+  color: #448AFF;
+  margin-right: 5px;
+}
+
+.present-content > .present-title {
+  font-size: 17px;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+  line-height: 20px;
+  height: 30px;
+  color: #000;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.present-content > .content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.present-content > .content > .item {
+  width: 90px;
+  height: 110px;
+  margin: 5px 5px;
+  padding: 5px 5px;
+  text-align: center;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.present-content > .content > .item img {
+  width: 60px;
+  height: 60px;
+}
+
+.present-content > .content > .item p {
+  margin: 5px 0 0 0;
+  font-size: 12px;
+}
+
+.present-content > .content > .item .price {
+  color: #999;
+}
+
+.present-content > .content > .item > .present-send {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.present-info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.present-img {
+  width: 80px;
+}
+
+.present-desc {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-left: 12px;
+  height: 80px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.present-desc > p {
+  text-align: left;
+  margin: 0;
+  font-size: 16px;
+}
+
+.present-desc .present-num {
+  width: 200px;
+  height: 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.present-desc .present-num .el-input-number {
+  width: 80px;
+  line-height: 18px;
+}
+
+.present-desc .present-num .el-input-number .el-input-number__decrease,
+.present-desc .present-num .el-input-number .el-input-number__increase {
+  width: 21px;
+}
+
+.present-desc .present-num .el-input-number .el-input__inner {
+  height: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.present-totalprice {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+}
+
+.present-totalprice > .send .el-button {
+  padding: 5px 15px;
+  font-size: 12px;
+}
+
+.present-content > .content > .item:hover {
+  border: 1px solid #F78989;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(247, 137, 137, 0.5);
+}
+
+.present-content > .content > .item:hover .price {
+  color: #F78989;
+}
+
+.present-content > .present-num {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.present-active {
+  border: 1px solid #F78989;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(247, 137, 137, 0.5);
+}
+
+.present-active .price {
+  color: #F04040;
+}
+
+.c-666 {
+  color: #666;
+}

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/medicineVideo.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div class="video-container">
+      <img src="../assets/pc/img/bg@3x.png" alt="" class="back-img" />
+
+      <el-row>
+        <el-col :span="14" :push="2">
+          <el-card class="video-player">
+            <div id="J_prismPlayer" class="player">
+              <img src="../assets/pc/img/video-img.jpg" alt />
+            </div>
+            <div class="title">
+              <div class="video-title">
+                <img src="../assets/pc/img/title-img.jpg" class="title-img" />
+                <div class="broadcaster-name">恒瑞测试</div>
+                <div class="info">
+                  <div class="viewer-num">
+                    <i class="el-icon-view icon"></i>观众：588
+                  </div>
+                  <div class="share">
+                    <i class="el-icon-share icon"></i>分享
+                  </div>
+                </div>
+              </div>
+              <div class="present">
+                <el-popover
+                  placement="right"
+                  title=""
+                  width="450"
+                  trigger="click"
+                >
+                  <div class="present-content">
+                    <div class="present-title">打赏</div>
+                    <div class="content">
+                      <!-- 礼物赠送 -->
+                      <div
+                        class="item"
+                        v-for="(item, i) in presentList"
+                        :key="item.img"
+                      >
+                        <el-popover
+                          placement="top-end"
+                          title=""
+                          width="300"
+                          trigger="click"
+                        >
+                          <div class="present-send">
+                            <div class="present-info">
+                              <div>
+                                <img
+                                  :src="item.img"
+                                  alt=""
+                                  class="present-img"
+                                />
+                              </div>
+                              <div class="present-desc">
+                                <p>{{ item.desc }}</p>
+                                <div class="present-num">
+                                  <div>数量：</div>
+                                  <el-input-number
+                                    v-model="presentNum"
+                                    @change="handleChange"
+                                    :min="1"
+                                    :max="99"
+                                    label=""
+                                  ></el-input-number>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="present-totalprice">
+                              <div>
+                                <span>合计：</span
+                                ><span style="color: #f04040">{{
+                                  item.price
+                                }}</span>
+                              </div>
+                              <div class="send">
+                                <el-button type="danger">赠送</el-button>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div slot="reference">
+                            <img :src="item.img" alt="" />
+                            <p>{{ item.desc }}</p>
+                            <p class="price">{{ item.price }}</p>
+                          </div>
+                        </el-popover>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="present-btn" slot="reference">
+                    <img src="../assets/pc/img/present.png" alt="" />
+                  </div>
+                </el-popover>
+
+                <span style="line-height: 30px" class="c-666"> 打赏 </span>
+              </div>
+            </div>
+            <div class="barrage">
+              <div class="video-mobile c-666">
+                <i class="el-icon-mobile icon"></i>手机观看
+              </div>
+              <div class="barrage-btn c-666">
+                弹幕<el-switch
+                  v-model="barrageFlag"
+                  active-color="#409EFF"
+                  inactive-color="#cccccc"
+                >
+                </el-switch>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6" :push="2">
+          <el-card class="comments">
+            <div class="cose-title">聊天互动</div>
+            <div class="messages-content">
+              <div class="item">
+                <div class="time">2021-01-01 22:22</div>
+                <div class="message">
+                  <div class="head-img">
+                    <img
+                      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1429871452,4246708244&fm=26&gp=0.jpg"
+                      alt=""
+                    />
+                  </div>
+                  <div class="word">
+                    <div class="user">上海市网友</div>
+                    <div class="tidings">111</div>
+                  </div>
+                </div>
+              </div>
+              <div class="item">
+                <!-- <div class="time">2021-01-01 22:22</div> -->
+                <div class="message">
+                  <div class="head-img">
+                    <img
+                      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1429871452,4246708244&fm=26&gp=0.jpg"
+                      alt=""
+                    />
+                  </div>
+                  <div class="word">
+                    <div class="user">上海市网友</div>
+                    <div class="tidings">111</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="send">
+              <div class="textbox">
+                <el-input v-model="tidings" placeholder="我也来说几句"></el-input>
+              </div>
+              <div class="send-btn"><el-button type="primary">发送</el-button></div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div
+      style="height: 1000px; background-color: #232323; margin-top: 100px"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { strToObject, initMudu, initPlayer } from "../util/video.js";
+import "../assets/pc/css/video.scss";
+export default {
+  data() {
+    return {
+      width: 1024,
+      height: 500,
+      presentNum: 1,
+      barrageFlag: true,
+      presentList: [
+        {
+          img: "https://static.mudu.tv/assets/img/console/reward/call.png",
+          desc: "为你打call",
+          price: "免费",
+        },
+        {
+          img: "https://static.mudu.tv/assets/img/console/reward/heart.png",
+          desc: "怦然心动",
+          price: "免费",
+        },
+        {
+          img: "https://static.mudu.tv/assets/img/console/reward/flower.png",
+          desc: "鲜花礼盒",
+          price: "免费",
+        },
+        {
+          img: "https://static.mudu.tv/assets/img/console/reward/rock.gif",
+          desc: "冲天云彩大火箭",
+          price: "免费",
+        },
+        {
+          img: "https://static.mudu.tv/assets/img/console/reward/yacht.png",
+          desc: "梦幻环游飞艇",
+          price: "免费",
+        },
+      ],
+      tidings:''
+    };
+  },
+
+  created() {},
+  mounted() {
+    // 初始化播放器
+    /*   initMudu({
+        id:'J_prismPlayer',
+        width:this.width,
+        height:this.height
+      }); */
+  },
+  methods: {
+    handleChange(value) {
+      this.$data.presentNum = value;
+      console.log(this.$data.presentNum);
+    },
+  },
+};
+</script>
+

src/main.js

@@ -1,7 +1,16 @@
 import Vue from 'vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from 'axios'
+import {post,get} from './request/http'
+
+Vue.use(ElementUI);
+//定义全局变量
+Vue.prototype.$post=post;
+Vue.prototype.$get=get;
 
 Vue.config.productionTip = false
 

src/request/api.js

@@ -0,0 +1 @@
+import { get, post } from './http'

src/request/http.js

@@ -0,0 +1,140 @@
+/**axios封装
+ * 请求拦截、相应拦截、错误统一处理
+ */
+import axios from 'axios';import QS from 'qs';
+import { Toast } from 'vant';
+import store from '../store/index'
+
+// 环境的切换
+if (process.env.NODE_ENV == 'development') {    
+    axios.defaults.baseURL = '/api';
+} else if (process.env.NODE_ENV == 'debug') {    
+    axios.defaults.baseURL = '';
+} else if (process.env.NODE_ENV == 'production') {    
+    axios.defaults.baseURL = 'http://api.123dailu.com/';
+}
+
+// 请求超时时间
+axios.defaults.timeout = 10000;
+
+// post请求头
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+
+// 请求拦截器
+/* axios.interceptors.request.use(    
+    config => {
+        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
+        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
+        const token = store.state.token;        
+        token && (config.headers.Authorization = token);        
+        return config;    
+    },    
+    error => {        
+        return Promise.error(error);    
+    });
+
+     */
+
+// 响应拦截器
+/* axios.interceptors.response.use(    
+    response => {        
+        if (response.status === 200) {            
+            return Promise.resolve(response);        
+        } else {            
+            return Promise.reject(response);        
+        }    
+    },
+    // 服务器状态码不是200的情况    
+    error => {        
+        if (error.response.status) {            
+            switch (error.response.status) {                
+                // 401: 未登录                
+                // 未登录则跳转登录页面，并携带当前页面的路径                
+                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
+                case 401:                    
+                    router.replace({                        
+                        path: '/login',                        
+                        query: { redirect: router.currentRoute.fullPath } 
+                    });
+                    break;
+                // 403 token过期                
+                // 登录过期对用户进行提示                
+                // 清除本地token和清空vuex中token对象                
+                // 跳转登录页面                
+                case 403:                     
+                    Toast({                        
+                        message: '登录过期，请重新登录',                        
+                        duration: 1000,                        
+                        forbidClick: true                    
+                    });                    
+                    // 清除token                    
+                    localStorage.removeItem('token');                    
+                    store.commit('loginSuccess', null);                    
+                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
+                    setTimeout(() => {                        
+                        router.replace({                            
+                            path: '/login',                            
+                            query: { 
+                                redirect: router.currentRoute.fullPath 
+                            }                        
+                        });                    
+                    }, 1000);                    
+                    break; 
+                // 404请求不存在                
+                case 404:                    
+                    Toast({                        
+                        message: '网络请求不存在',                        
+                        duration: 1500,                        
+                        forbidClick: true                    
+                    });                    
+                break;                
+                // 其他错误，直接抛出错误提示                
+                default:                    
+                    Toast({                        
+                        message: error.response.data.message,                        
+                        duration: 1500,                        
+                        forbidClick: true                    
+                    });            
+            }            
+            return Promise.reject(error.response);        
+        }       
+    }
+);
+ */
+
+
+
+/** 
+ * get方法，对应get请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+export function get(url, params){    
+    return new Promise((resolve, reject) =>{        
+        axios.get(url, {            
+            params: params        
+        })        
+        .then(res => {            
+            resolve(res.data);        
+        })        
+        .catch(err => {            
+            reject(err.data)        
+        })    
+    });
+}
+/** 
+ * post方法，对应post请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+export function post(url, params) {    
+    return new Promise((resolve, reject) => {         
+        axios.post(url, QS.stringify(params))        
+        .then(res => {            
+            resolve(res.data);        
+        })        
+        .catch(err => {            
+            reject(err.data)        
+        })    
+    });
+}

src/router/index.js

@@ -1,29 +1,36 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import pc from '../views/pc.vue'
+import mobile from '../views/mobile.vue'
 
 Vue.use(VueRouter)
 
-const routes = [
-  {
+const routes = [{
     path: '/',
-    name: 'Home',
-    component: Home
+    component: pc
+
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
-]
+    path: '/pcIndex',
+    name: 'pcIndex',
+    component: pc
+
+  },
+  {
+    path: '/mobileIndex',
+    name: 'mobileIndex',
+    component: mobile
 
+  },
+]
+const originalReplace = VueRouter.prototype.replace;
+VueRouter.prototype.replace = function replace(location) {
+  return originalReplace.call(this, location).catch(err => err);
+};
 const router = new VueRouter({
-  mode: 'history',
+  // mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })
 
-export default router
+export default router

src/util/video.js

@@ -0,0 +1,108 @@
+import {
+    Toast
+} from 'vant';
+
+// 处理返回字符串中含有特殊字符问题
+export function checkStr(str){
+    return str.split(""").join("");
+}
+
+// 没有双引号的字符串转换为对象
+export function strToObject(jsonStr) {
+    jsonStr = jsonStr.replace("{", "{\"");
+    jsonStr = jsonStr.replace(/:/g, "\":\"");
+    jsonStr = jsonStr.replace(/,/g, "\",\"");
+    jsonStr = jsonStr.replace("}", "\"}");
+
+    var str = JSON.parse(jsonStr);
+    return str;
+}
+
+// 目睹的频道id
+const mid = 489497;
+// 初始化Mudu
+
+export function initMudu(obj) {
+    Mudu.Init(
+        mid,
+        function () {
+            console.log('Mudu Web Sdk 初始化成功');
+            initPlayer(obj)
+        })
+}
+// 激活播放器
+// 传入参数obj{id,width,height}
+export function initPlayer(obj) {
+    var roomPlayAddr = Mudu.Room.GetPlayAddr()
+    var isChannelLiving = !!Mudu.Room.GetLiveStatus() //
+    Mudu.Room.GetLiveStatus() //获取当前的直播状态 类型为 number: `1`为正在直播，`0`为不在直播
+    var player = new Mudu.Player({
+        containerId: obj.id,
+        isLive: isChannelLiving,
+        src: roomPlayAddr,
+        image: Mudu.Room.GetLiveImage(), // 非必须，播放器海报图 string
+        autoplay: false,
+        controls: true,
+        repeat: false,
+        width: obj.width,
+        height: obj.height,
+        x5Layer: false,
+        x5Inline: false,
+        // 非必须 isLive为false时展示在时间进度条上的高亮点，hover时可展示text字段内容 （视频为回看视频时，会默认添加高亮信息，设置为[]可覆盖）
+        highlights: [{
+            time: 1, // int,
+            text: '大会开始' // string
+        }]
+    });
+}
+
+// 获取弹幕
+export function getMsgList(page) {
+    Mudu.Room.Comment.Get(
+        // 要获取评论的页码，类型为int
+        page,
+        // 评论获取成功的回调函数，参数为response对象
+        function (response) {
+            response = JSON.parse(response)
+            if (response.status === 'y') {
+                // console.log('获取评论成功，数据为：', response.data)
+                return {
+                    status: 0,
+                    data: response.data
+                };
+            }
+            if (response.status === 'n') {
+                // console.log('获取评论失败')
+                return {
+                    status: 1,
+                    data:{}
+                }
+            }
+        }
+    )
+}
+
+
+// 发送评论
+export function sendMsg(msg) {
+    Mudu.Room.Comment.Send(
+        // 要发送的评论文本，类型为string
+        msg,
+
+        // 发送完成的回调函数，参数为response对象
+        function (response) {
+            response = JSON.parse(response)
+            if (response.status === 'y') {
+                // console.log('发送成功')
+            }
+            if (response.status === 'n') {
+                // console.log('发送失败，错误码为：' + response.flag)
+            }
+        }
+    )
+}
+
+// 获取评论页数
+export function getPageNum() {
+    return Mudu.Room.Comment.GetPage();
+}

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/mobile.vue

@@ -0,0 +1,13 @@
+<template>
+   <div >
+    <medicineVideo></medicineVideo>
+  </div>
+</template>
+<script>
+import medicineVideo from '@/components/medicineVideo'
+export default {
+  components: {
+    medicineVideo
+  }
+}
+</script>

src/views/pc.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="video">
+    <medicineVideo></medicineVideo>
+  </div>
+</template>
+<script>
+import medicineVideo from '@/components/medicineVideo'
+export default {
+  components: {
+    medicineVideo
+  }
+}
+</script>

vue.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+
+    publicPath: "./",
+    assetsDir: "static",
+    outputDir: 'dist',
+
+    /* configureWebpack: {
+        devServer: {
+            proxy: {
+                '/api': {
+                    target: 'http://tp.llzlovesh.top',
+                    changeOrigin: true, //是否跨域
+                    // pathRewrite: {
+                    //   '^/api': '' //规定请求地址以什么作为开头
+                    // }
+                }
+            }
+        }
+    } */
+}