@ -1,143 +0,0 @@
@@ -1,143 +0,0 @@
|
||||
<template> |
||||
<transition appear> |
||||
<div v-if="building" class="nuxt__build_indicator" :style="indicatorStyle"> |
||||
<svg viewBox="0 0 96 72" version="1" xmlns="http://www.w3.org/2000/svg"> |
||||
<g fill="none" fill-rule="evenodd"> |
||||
<path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z" /> |
||||
<path d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z" fill="#00C58E" /> |
||||
<path d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z" fill="#00C58E" /> |
||||
<path d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z" fill="#FFF" fill-rule="nonzero" /> |
||||
</g> |
||||
</svg> |
||||
{{ animatedProgress }}% |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'NuxtBuildIndicator', |
||||
data () { |
||||
return { |
||||
building: false, |
||||
progress: 0, |
||||
animatedProgress: 0, |
||||
reconnectAttempts: 0 |
||||
} |
||||
}, |
||||
computed: { |
||||
options: () => ({"position":"bottom-right","backgroundColor":"#2E495E","color":"#00C48D"}), |
||||
indicatorStyle () { |
||||
const [d1, d2] = this.options.position.split('-') |
||||
return { |
||||
[d1]: '20px', |
||||
[d2]: '20px', |
||||
'background-color': this.options.backgroundColor, |
||||
color: this.options.color |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
progress (val, oldVal) { |
||||
// Average progress may decrease but ignore it! |
||||
if (val < oldVal) { |
||||
return |
||||
} |
||||
// Cancel old animation |
||||
clearInterval(this._progressAnimation) |
||||
// Jump to edge immediately |
||||
if (val < 10 || val > 90) { |
||||
this.animatedProgress = val |
||||
return |
||||
} |
||||
// Animate to value |
||||
this._progressAnimation = setInterval(() => { |
||||
const diff = this.progress - this.animatedProgress |
||||
if (diff > 0) { |
||||
this.animatedProgress++ |
||||
} else { |
||||
clearInterval(this._progressAnimation) |
||||
} |
||||
}, 50) |
||||
} |
||||
}, |
||||
mounted () { |
||||
if (EventSource === undefined) { |
||||
return // Unsupported |
||||
} |
||||
this.sseConnect() |
||||
}, |
||||
beforeDestroy () { |
||||
this.sseClose() |
||||
clearInterval(this._progressAnimation) |
||||
}, |
||||
methods: { |
||||
sseConnect () { |
||||
if (this._connecting) { |
||||
return |
||||
} |
||||
this._connecting = true |
||||
this.sse = new EventSource('/_loading/sse') |
||||
this.sse.addEventListener('message', event => this.onSseMessage(event)) |
||||
}, |
||||
onSseMessage (message) { |
||||
const data = JSON.parse(message.data) |
||||
if (!data.states) { |
||||
return |
||||
} |
||||
|
||||
this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length) |
||||
|
||||
if (!data.allDone) { |
||||
this.building = true |
||||
} else { |
||||
this.$nextTick(() => { |
||||
this.building = false |
||||
this.animatedProgress = 0 |
||||
this.progress = 0 |
||||
clearInterval(this._progressAnimation) |
||||
}) |
||||
} |
||||
}, |
||||
|
||||
sseClose () { |
||||
if (this.sse) { |
||||
this.sse.close() |
||||
delete this.sse |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.nuxt__build_indicator { |
||||
box-sizing: border-box; |
||||
position: fixed; |
||||
font-family: monospace; |
||||
padding: 5px 10px; |
||||
border-radius: 5px; |
||||
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); |
||||
width: 88px; |
||||
z-index: 2147483647; |
||||
font-size: 16px; |
||||
line-height: 1.2rem; |
||||
} |
||||
.v-enter-active, .v-leave-active { |
||||
transition-delay: 0.2s; |
||||
transition-property: all; |
||||
transition-duration: 0.3s; |
||||
} |
||||
.v-leave-to { |
||||
opacity: 0; |
||||
transform: translateY(20px); |
||||
} |
||||
svg { |
||||
display: inline-block; |
||||
vertical-align: baseline; |
||||
width: 1.1em; |
||||
height: 0.825em; |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{790:function(n,t,e){"use strict";e.r(t);var c={name:"OtherDisclaimerPage",layout:"detail",data:function(){return{}},head:{title:"糖尿病网-免责声明",meta:[{hid:"description",name:"description",content:""}]}},o=e(13),component=Object(o.a)(c,function(){this._self._c;return this._m(0)},[function(){var n=this,t=n._self._c;return t("div",{staticClass:"common-other-content disclamier-page"},[t("h6",[n._v("免责声明")]),n._v(" "),t("div",{staticClass:"font-content"},[t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常,仅查空腹血糖,会有70%的糖尿病前期被漏诊。糖尿病前期是糖尿病发展的必经之路。那么什么是糖尿病前期,如何预防疾病进展呢?\n ")]),n._v(" "),t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。\n ")]),n._v(" "),t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常,仅查空腹血糖,会有70%的糖尿病前期被漏诊。糖尿病前期是糖尿病发展的必经之路。那么什么是糖尿病前期,如何预防疾病进展呢?\n ")]),n._v(" "),t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。\n ")]),n._v(" "),t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常,仅查空腹血糖,会有70%的糖尿病前期被漏诊。糖尿病前期是糖尿病发展的必经之路。那么什么是糖尿病前期,如何预防疾病进展呢?\n ")]),n._v(" "),t("p",[n._v("\n 最新糖尿病调查结果显示,我国约有4亿人处在糖尿病前期,但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。但90%的人不知道自己处于糖尿病前期。这是因为很多人不测血糖,或只测空腹血糖。殊不知,空腹血糖正常,不代表餐后血糖也正常。\n ")])])])}],!1,null,null,null);t.default=component.exports}}]); |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{787:function(t,n,e){"use strict";e.r(n);var o={name:"OtherAgreementPage",layout:"detail",data:function(){return{content:""}},head:{title:"糖尿病网-用户协议",meta:[{hid:"description",name:"description",content:""}]},mounted:function(){var t=this;this.$axios.$get("/agreement/get-content?type=2").then(function(n){t.content=n.detail})}},c=e(13),component=Object(c.a)(o,function(){var t=this,n=t._self._c;return n("div",{staticClass:"common-other-content user-agreement-page"},[n("h6",[t._v("糖尿病网用户服务协议")]),t._v(" "),n("div",{staticClass:"font-content",domProps:{innerHTML:t._s(t.content)}})])},[],!1,null,null,null);n.default=component.exports}}]); |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
!function(e){function r(data){for(var r,n,f=data[0],l=data[1],d=data[2],i=0,h=[];i<f.length;i++)n=f[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var l=r[n];0!==o[l]&&(t=!1)}t&&(c.splice(i--,1),e=f(f.s=r[0]))}return e}var n={},o={25:0},c=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise(function(r,n){t=o[e]=[r,n]});r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,f.nc&&script.setAttribute("nonce",f.nc),script.src=function(e){return f.p+""+{0:"f2063a9",3:"50cfb23",4:"6445172",5:"4530c8c",6:"6dbe3f4",7:"a0ed511",8:"8251167",9:"f9b5fe2",10:"93710f5",11:"fbdded5",12:"eca4e4d",13:"75e775e",14:"7a1b9f9",15:"4864bb1",16:"ed411e0",17:"7335168",18:"d10b0e8",19:"c971676",20:"95f4e2e",21:"3490718",22:"5207fe0",23:"0051f4c",24:"b4d6cc7"}[e]+".js"}(e);var l=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",l.name="ChunkLoadError",l.type=n,l.request=c,t[1](l)}o[e]=void 0}};var d=setTimeout(function(){c({type:"timeout",target:script})},12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},f.p="/_nuxt/",f.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],d=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var v=d;t()}([]); |
||||
@ -0,0 +1,73 @@
@@ -0,0 +1,73 @@
|
||||
/*! |
||||
* Vue.js v2.7.16 |
||||
* (c) 2014-2023 Evan You |
||||
* Released under the MIT License. |
||||
*/ |
||||
|
||||
/*! |
||||
* vuex v3.6.2 |
||||
* (c) 2021 Evan You |
||||
* @license MIT |
||||
*/ |
||||
|
||||
|
||||
/*! |
||||
* The buffer module from node.js, for the browser. |
||||
* |
||||
* @author Feross Aboukhadijeh <http://feross.org> |
||||
* @license MIT |
||||
*/ |
||||
|
||||
/*! |
||||
* vue-client-only v0.0.0-semantic-release |
||||
* (c) 2021-present egoist <0x142857@gmail.com> |
||||
* Released under the MIT License. |
||||
*/ |
||||
|
||||
/*! |
||||
* vue-no-ssr v1.1.1 |
||||
* (c) 2018-present egoist <0x142857@gmail.com> |
||||
* Released under the MIT License. |
||||
*/ |
||||
|
||||
/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */ |
||||
|
||||
/** |
||||
* @license |
||||
* Lodash <https://lodash.com/> |
||||
* Copyright JS Foundation and other contributors <https://js.foundation/> |
||||
* Released under MIT license <https://lodash.com/license> |
||||
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE> |
||||
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors |
||||
*/ |
||||
|
||||
/** |
||||
* @license |
||||
* Video.js 6.13.0 <http://videojs.com/> |
||||
* Copyright Brightcove, Inc. <https://www.brightcove.com/> |
||||
* Available under Apache License Version 2.0 |
||||
* <https://github.com/videojs/video.js/blob/master/LICENSE> |
||||
* |
||||
* Includes vtt.js <https://github.com/mozilla/vtt.js> |
||||
* Available under Apache License Version 2.0 |
||||
* <https://github.com/mozilla/vtt.js/blob/master/LICENSE> |
||||
*/ |
||||
|
||||
/** |
||||
* Checks if an event is supported in the current execution environment. |
||||
* |
||||
* NOTE: This will not work correctly for non-generic events such as `change`, |
||||
* `reset`, `load`, `error`, and `select`. |
||||
* |
||||
* Borrows from Modernizr. |
||||
* |
||||
* @param {string} eventNameSuffix Event name, e.g. "click". |
||||
* @param {?boolean} capture Check if the capture phase is supported. |
||||
* @return {boolean} True if the event is supported. |
||||
* @internal |
||||
* @license Modernizr 3.0.0pre (Custom Build) | MIT |
||||
*/ |
||||
|
||||
//! moment.js |
||||
|
||||
//! moment.js locale configuration |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{792:function(t,n,e){"use strict";e.r(n);var o={name:"OtherPrivacyPage",layout:"detail",data:function(){return{content:""}},head:{title:"糖尿病网-隐私政策",meta:[{hid:"description",name:"description",content:""}]},mounted:function(){var t=this;this.$axios.$get("/agreement/get-content?type=1").then(function(n){t.content=n.detail})}},c=e(13),component=Object(c.a)(o,function(){var t=this,n=t._self._c;return n("div",{staticClass:"common-other-content privacy-policy-page"},[n("h6",[t._v("隐私政策")]),t._v(" "),n("div",{staticClass:"font-content",domProps:{innerHTML:t._s(t.content)}})])},[],!1,null,null,null);n.default=component.exports}}]); |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{789:function(t,n,o){"use strict";o.r(n);var e={name:"OtherCorporatePage",layout:"detail",data:function(){return{}},head:{title:"糖尿病网-媒体合作",meta:[{hid:"description",name:"description",content:""}]}},c=o(13),component=Object(c.a)(e,function(){this._self._c;return this._m(0)},[function(){var t=this,n=t._self._c;return n("div",{staticClass:"common-other-content media-corporate-page"},[n("h6",[t._v("媒体合作")]),t._v(" "),n("div",{staticClass:"font-content"},[n("p",[t._v("\n 商务合作邮箱:"),n("a",{attrs:{href:"mailto:DHcommunications@novonordisk.com",target:"_blank"}},[t._v("DHcommunications@novonordisk.com")])])])])}],!1,null,null,null);n.default=component.exports}}]); |
||||
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,477 @@
@@ -0,0 +1,477 @@
|
||||
exports.ids = [1]; |
||||
exports.modules = { |
||||
|
||||
/***/ 160: |
||||
/***/ (function(module, exports, __webpack_require__) { |
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(166); |
||||
if(content.__esModule) content = content.default; |
||||
if(typeof content === 'string') content = [[module.i, content, '']]; |
||||
if(content.locals) module.exports = content.locals; |
||||
// add CSS to SSR context
|
||||
var add = __webpack_require__(4).default |
||||
module.exports.__inject__ = function (context) { |
||||
add("11f2e1da", content, true, context) |
||||
}; |
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 165: |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
__webpack_require__.r(__webpack_exports__); |
||||
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(160); |
||||
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__); |
||||
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_3_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_3_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_3_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Barrage_vue_vue_type_style_index_0_id_c3f32de4_prod_lang_css_scoped_true__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__)); |
||||
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 166: |
||||
/***/ (function(module, exports, __webpack_require__) { |
||||
|
||||
// Imports
|
||||
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3); |
||||
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]}); |
||||
// Module
|
||||
___CSS_LOADER_EXPORT___.push([module.i, ".z_barrage-container[data-v-c3f32de4]{pointer-events:none}.z_container[data-v-c3f32de4]{overflow:hidden;width:100%}.z_barrage[data-v-c3f32de4]{left:0;position:absolute;top:0}", ""]); |
||||
// Exports
|
||||
___CSS_LOADER_EXPORT___.locals = {}; |
||||
module.exports = ___CSS_LOADER_EXPORT___; |
||||
|
||||
|
||||
/***/ }), |
||||
|
||||
/***/ 181: |
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
||||
|
||||
"use strict"; |
||||
// ESM COMPAT FLAG
|
||||
__webpack_require__.r(__webpack_exports__); |
||||
|
||||
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Barrage.vue?vue&type=template&id=c3f32de4&scoped=true
|
||||
var render = function render() { |
||||
var _vm = this, |
||||
_c = _vm._self._c; |
||||
return _c('div', { |
||||
staticClass: "z_barrage-container" |
||||
}, [_vm._ssrNode("<canvas" + _vm._ssrAttr("width", _vm.containerWidth) + _vm._ssrAttr("height", _vm.containerHeight) + " style=\"display: none\" data-v-c3f32de4></canvas> <div class=\"z_container\"" + _vm._ssrStyle(null, { |
||||
height: _vm.containerHeight / 2 + 'px' |
||||
}, null) + " data-v-c3f32de4><canvas id=\"canvas\"" + _vm._ssrAttr("width", _vm.containerWidth) + _vm._ssrAttr("height", _vm.containerHeight) + " class=\"z_barrage\"" + _vm._ssrStyle(null, { |
||||
width: _vm.containerWidth / 2 + 'px', |
||||
height: _vm.containerHeight / 2 + 'px' |
||||
}, null) + " data-v-c3f32de4></canvas></div>")]); |
||||
}; |
||||
var staticRenderFns = []; |
||||
|
||||
// CONCATENATED MODULE: ./src/components/Barrage.vue?vue&type=template&id=c3f32de4&scoped=true
|
||||
|
||||
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Barrage.vue?vue&type=script&lang=js
|
||||
// import faceMap from '../../assets/emoji'
|
||||
let aniId, aniId1; |
||||
/* harmony default export */ var Barragevue_type_script_lang_js = ({ |
||||
name: 'Barrage', |
||||
props: { |
||||
barrageList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
speed: { |
||||
type: Number, |
||||
default: 4 |
||||
}, |
||||
loop: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
channels: { |
||||
type: Number, |
||||
default: 2 |
||||
}, |
||||
barrageHeight: { |
||||
type: Number, |
||||
default: 60 |
||||
}, |
||||
screenPercent: { |
||||
type: Number, |
||||
default: 0.3 |
||||
}, |
||||
borderColor: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
background: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
deviceType: { |
||||
type: String, |
||||
default: 'pc' |
||||
}, |
||||
linearGradient: { |
||||
type: Object, |
||||
default: () => { |
||||
return { |
||||
startColor: '', |
||||
endColor: '' |
||||
}; |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
newBarrageArray: [], |
||||
// 新增弹幕之后的总弹幕
|
||||
barrageArray: [], |
||||
barrageQueue: [], |
||||
containerWidth: 0, |
||||
containerHeight: 0, |
||||
channelsArray: [], |
||||
barrageChannels: 1 |
||||
}; |
||||
}, |
||||
watch: { |
||||
barrageList(val) { |
||||
if (val.length !== 0) { |
||||
this.barrageQueue = JSON.parse(JSON.stringify(val)); |
||||
this.newBarrageArray = JSON.parse(JSON.stringify(val)); |
||||
this.initData(); |
||||
window.cancelAnimationFrame(aniId); |
||||
aniId = window.requestAnimationFrame(this.render); |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.containerWidth = this.deviceType === 'pc' ? 723 * 2 : document.body.clientWidth * 2; |
||||
this.containerHeight = 365 * 2; // 设定总高度
|
||||
this.barrageChannels = this.channels; // 总高度对应的轨道数
|
||||
this.ctx = this.$refs.canvas.getContext('2d'); |
||||
this.ctx1 = this.$refs.canvasContainer.getContext('2d'); |
||||
this.barrageClickEvent(); |
||||
}, |
||||
methods: { |
||||
/** |
||||
* 数据初始化 |
||||
*/ |
||||
initData() { |
||||
for (let i = 0; i < this.barrageQueue.length; i++) { |
||||
// 此处处理只显示50个字符
|
||||
let tagImg = null; |
||||
let img = null; |
||||
if (this.barrageQueue[i].icon) { |
||||
img = new Image(); |
||||
img.src = this.barrageQueue[i].icon; |
||||
} |
||||
if (this.barrageQueue[i].tagImage) { |
||||
tagImg = new Image(); |
||||
tagImg.src = this.barrageQueue[i].tagImage; |
||||
} |
||||
const content = this.dealStr(this.barrageQueue[i].content); |
||||
this.barrageArray.push({ |
||||
id: this.barrageQueue[i].id, |
||||
content, |
||||
x: this.containerWidth + this.barrageHeight, |
||||
icon: img, |
||||
tagImage: tagImg, |
||||
width: this.ctx1.measureText(content).width * 3.6 + (this.barrageQueue[i].icon ? 60 : 0), |
||||
color: this.barrageQueue[i].color || '#FFFFFF', |
||||
bgColor: this.barrageQueue[i].bgColor || 'rgba(0,0,0,0.4)' |
||||
}); |
||||
} |
||||
this.initChannel(); |
||||
}, |
||||
/** |
||||
* 初始化轨道数据 |
||||
*/ |
||||
initChannel() { |
||||
for (let i = 0; i < this.barrageChannels; i++) { |
||||
const item = this.barrageArray.shift(); |
||||
if (item) { |
||||
this.channelsArray[i] = [item]; |
||||
} else { |
||||
this.channelsArray[i] = []; |
||||
} |
||||
} |
||||
}, |
||||
/** |
||||
* 渲染 |
||||
*/ |
||||
render() { |
||||
this.ctx.clearRect(0, 0, this.containerWidth, this.containerHeight); |
||||
this.ctx.font = '36px Microsoft YaHei'; |
||||
this.draw(); |
||||
window.cancelAnimationFrame(aniId1); |
||||
aniId1 = window.requestAnimationFrame(this.render); |
||||
}, |
||||
draw() { |
||||
for (let i = 0; i < this.channelsArray.length; i++) { |
||||
for (let j = 0; j < this.channelsArray[i].length; j++) { |
||||
try { |
||||
const barrage = this.channelsArray[i][j]; |
||||
barrage.x -= this.speed; |
||||
if (barrage.x <= this.containerWidth) { |
||||
// 弹幕显示
|
||||
this.borderColor && this.drawRoundRectBorder(this.ctx, barrage.x - this.barrageHeight / 2, i * (this.barrageHeight + 60) + 20, barrage.width + this.barrageHeight, this.barrageHeight, this.barrageHeight / 2); |
||||
this.drawRoundRect(this.ctx, barrage.bgColor, barrage.x - this.barrageHeight / 2, i * (this.barrageHeight + 60) + 21, barrage.width + this.barrageHeight, this.barrageHeight - 2, this.barrageHeight / 2); |
||||
this.ctx.fillStyle = `${barrage.color}`; |
||||
this.ctx.fillText(barrage.content, barrage.x + (barrage.icon ? this.barrageHeight / 2 + 10 : -5), i * (this.barrageHeight + 60) + this.barrageHeight - 25); |
||||
if (barrage.icon) { |
||||
this.circleImg(this.ctx, barrage.icon, barrage.x - 40, i * (this.barrageHeight + 60) + 40, 40); |
||||
} |
||||
if (barrage.tagImage) { |
||||
this.originImg(this.ctx, barrage.tagImage, barrage.x - this.barrageHeight - 10, i * (this.barrageHeight + 60) + 20, this.barrageHeight, this.barrageHeight); |
||||
} |
||||
} |
||||
if (barrage.x < -(barrage.width + this.barrageHeight)) { |
||||
// 弹幕删除
|
||||
const arr = this.channelsArray.reduce((a, b) => a.concat(b)); |
||||
if (this.loop) { |
||||
if (this.checkBarrageStatus(arr)) { |
||||
this.barrageQueue = []; |
||||
this.barrageQueue = JSON.parse(JSON.stringify(this.newBarrageArray)); |
||||
this.initData(); |
||||
} |
||||
} |
||||
} |
||||
// 弹幕插入时机判断
|
||||
if (barrage.x <= Math.floor(this.containerWidth - barrage.width - 40) && barrage.x >= Math.floor(this.containerWidth - barrage.width - 40 - this.speed) && j === this.channelsArray[i].length - 1 && this.barrageArray.length !== 0) { |
||||
const item = this.barrageArray.shift(); |
||||
this.channelsArray[i].push(item); |
||||
} |
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
/** |
||||
* 重置数据 |
||||
*/ |
||||
add(obj) { |
||||
const content = this.dealStr(obj.content); |
||||
let img = null; |
||||
let tagImg = null; |
||||
if (obj.icon) { |
||||
img = new Image(); |
||||
img.src = obj.icon; |
||||
} |
||||
if (obj.tagImage) { |
||||
tagImg = new Image(); |
||||
tagImg.src = obj.tagImage; |
||||
} |
||||
const item = { |
||||
id: obj.id, |
||||
content, |
||||
x: this.containerWidth + this.barrageHeight, |
||||
icon: obj.icon ? img : '', |
||||
tagImage: obj.tagImage ? tagImg : '', |
||||
width: this.ctx1.measureText(content).width * 3 + (obj.icon ? this.barrageHeight : 0), |
||||
color: obj.color || '#FFFFFF', |
||||
bgColor: obj.bgColor || 'rgba(0,0,0,0.4)' |
||||
}; |
||||
const originItem = { |
||||
id: obj.id, |
||||
content: obj.content, |
||||
icon: obj.icon, |
||||
tagImage: obj.tagImage, |
||||
color: obj.color || '#FFFFFF', |
||||
bgColor: obj.bgColor || 'rgba(0,0,0,0.4)' |
||||
}; |
||||
if (this.barrageArray.length === 0) { |
||||
// 剩余弹幕数为0
|
||||
this.newBarrageArray.unshift(originItem); |
||||
} else { |
||||
this.barrageArray.unshift(item); |
||||
const insertIndex = this.barrageList.length - this.barrageArray.length; |
||||
this.newBarrageArray.splice(insertIndex, 0, originItem); |
||||
} |
||||
}, |
||||
/** |
||||
* 弹幕点击事件 |
||||
*/ |
||||
barrageClickEvent() { |
||||
document.getElementById('canvas').addEventListener('click', e => { |
||||
const p = this.getEventPosition(e); |
||||
const channelIndex = Math.floor(p.y / (this.barrageHeight + 36)); |
||||
const tempArray = JSON.parse(JSON.stringify(this.channelsArray[channelIndex])); |
||||
for (let i = 0; i < tempArray.length; i++) { |
||||
const channelItemArray = tempArray[i]; |
||||
if (p.x > channelItemArray.x && p.x < channelItemArray.x + channelItemArray.width) { |
||||
if (channelItemArray.id) { |
||||
this.$emit('doLike', channelItemArray.id); |
||||
} |
||||
} |
||||
} |
||||
}, false); |
||||
}, |
||||
/** |
||||
* 获取点击位置 |
||||
*/ |
||||
getEventPosition(ev) { |
||||
let x, y; |
||||
if (ev.layerX || ev.layerX === 0) { |
||||
x = ev.layerX; |
||||
y = ev.layerY; |
||||
} else if (ev.offsetX || ev.offsetX === 0) { |
||||
x = ev.offsetX; |
||||
y = ev.offsetY; |
||||
} |
||||
return { |
||||
x: 2 * x, |
||||
y: 2 * y |
||||
}; |
||||
}, |
||||
/** |
||||
* 判断所有的弹幕是否滚动完成 |
||||
* @params arr |
||||
*/ |
||||
checkBarrageStatus(arr) { |
||||
for (let i = 0; i < arr.length; i++) { |
||||
if (arr[i].x > -arr[i].width) return false; |
||||
} |
||||
return true; |
||||
}, |
||||
/** |
||||
* 处理字符 |
||||
*/ |
||||
dealStr(str) { |
||||
return str.length > 50 ? `${str.substring(0, 50)}...` : str; |
||||
}, |
||||
/** |
||||
* 获取随机颜色 |
||||
*/ |
||||
getColor() { |
||||
return `#${Math.floor(Math.random() * 16777215).toString(16)}`; |
||||
}, |
||||
/** |
||||
* 裁剪图片 |
||||
* @param ctx |
||||
* @param img |
||||
* @param x |
||||
* @param y |
||||
* @param r |
||||
*/ |
||||
circleImg(ctx, img, x, y, r) { |
||||
ctx.save(); |
||||
const d = 2 * r; |
||||
const cx = x + r; |
||||
const cy = y + r; |
||||
ctx.beginPath(); |
||||
ctx.arc(cx, cy, r, 0, 2 * Math.PI); |
||||
ctx.clip(); |
||||
ctx.drawImage(img, x, y, d, d); |
||||
ctx.restore(); |
||||
ctx.closePath(); |
||||
}, |
||||
/** |
||||
* 绘制原始图片 |
||||
* @param ctx |
||||
* @param img |
||||
* @param x |
||||
* @param y |
||||
* @param width |
||||
* @param height |
||||
*/ |
||||
originImg(ctx, img, x, y, width, height) { |
||||
try { |
||||
ctx.beginPath(); |
||||
ctx.drawImage(img, x, y, width, height); |
||||
ctx.closePath(); |
||||
} catch (e) { |
||||
console.log(e); |
||||
} |
||||
}, |
||||
/** |
||||
* 绘画圆角矩形 |
||||
* @param context |
||||
* @param bgColor |
||||
* @param x |
||||
* @param y |
||||
* @param width |
||||
* @param height |
||||
* @param radius |
||||
*/ |
||||
drawRoundRect(context, bgColor, x, y, width, height, radius) { |
||||
if (this.linearGradient.startColor && this.linearGradient.endColor) { |
||||
const linearGrad = context.createLinearGradient(x, y, x, y + height); |
||||
linearGrad.addColorStop(0, this.linearGradient.startColor); |
||||
linearGrad.addColorStop(1, this.linearGradient.endColor); |
||||
context.fillStyle = linearGrad || bgColor; |
||||
} else { |
||||
context.fillStyle = this.background || bgColor; |
||||
} |
||||
context.beginPath(); |
||||
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
||||
context.lineTo(width - radius + x, y); |
||||
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); |
||||
context.lineTo(width + x, height + y - radius); |
||||
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2); |
||||
context.lineTo(radius + x, height + y); |
||||
context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI); |
||||
context.fill(); |
||||
context.closePath(); |
||||
}, |
||||
/** |
||||
* 绘画圆角矩形 |
||||
* @param context |
||||
* @param x |
||||
* @param y |
||||
* @param width |
||||
* @param height |
||||
* @param radius 半径 |
||||
*/ |
||||
drawRoundRectBorder(context, x, y, width, height, radius) { |
||||
context.beginPath(); |
||||
context.lineWidth = 2; |
||||
context.strokeStyle = this.borderColor; |
||||
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); |
||||
context.lineTo(width - radius + x, y); |
||||
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); |
||||
context.lineTo(width + x, height + y - radius); |
||||
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2); |
||||
context.lineTo(radius + x, height + y); |
||||
context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI); |
||||
context.stroke(); |
||||
context.closePath(); |
||||
} |
||||
} |
||||
}); |
||||
// CONCATENATED MODULE: ./src/components/Barrage.vue?vue&type=script&lang=js
|
||||
/* harmony default export */ var components_Barragevue_type_script_lang_js = (Barragevue_type_script_lang_js); |
||||
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
||||
var componentNormalizer = __webpack_require__(1); |
||||
|
||||
// CONCATENATED MODULE: ./src/components/Barrage.vue
|
||||
|
||||
|
||||
|
||||
function injectStyles (context) { |
||||
|
||||
var style0 = __webpack_require__(165) |
||||
if (style0.__inject__) style0.__inject__(context) |
||||
|
||||
} |
||||
|
||||
/* normalize component */ |
||||
|
||||
var component = Object(componentNormalizer["a" /* default */])( |
||||
components_Barragevue_type_script_lang_js, |
||||
render, |
||||
staticRenderFns, |
||||
false, |
||||
injectStyles, |
||||
"c3f32de4", |
||||
"61721d3f" |
||||
|
||||
) |
||||
|
||||
/* harmony default export */ var Barrage = __webpack_exports__["default"] = (component.exports); |
||||
|
||||
/***/ }) |
||||
|
||||
};; |
||||
//# sourceMappingURL=barrage.js.map
|
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
<!doctype html> |
||||
<html {{ html_attrs }}> |
||||
<head {{ head_attrs }}> |
||||
{{ HEAD }} |
||||
</head> |
||||
<body {{ body_attrs }}> |
||||
{{ APP }} |
||||
<script src="/_nuxt/87c1552.js"></script><script src="/_nuxt/6dd7e45.js"></script><script src="/_nuxt/9d93c64.js"></script><script src="/_nuxt/9d88f11.js"></script></body> |
||||
</html> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
<!doctype html> |
||||
<html {{ html_attrs }}> |
||||
<head {{ head_attrs }}> |
||||
{{ HEAD }} |
||||
</head> |
||||
<body {{ body_attrs }}> |
||||
{{ APP }} |
||||
</body> |
||||
</html> |
||||