|
|
exports.ids = [6,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___; |
|
|
|
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 177: |
|
|
/***/ (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__(209); |
|
|
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("099a4246", content, true, context) |
|
|
}; |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 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); |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 203: |
|
|
/***/ (function(module, exports, __webpack_require__) { |
|
|
|
|
|
module.exports = __webpack_require__.p + "img/chatbot_audio_feature.458e9b3.png"; |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 204: |
|
|
/***/ (function(module, exports, __webpack_require__) { |
|
|
|
|
|
module.exports = __webpack_require__.p + "img/play_chatbot_audio.87713b4.png"; |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 205: |
|
|
/***/ (function(module, exports, __webpack_require__) { |
|
|
|
|
|
module.exports = __webpack_require__.p + "img/pause_chatbot_audio.48f50e9.png"; |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 206: |
|
|
/***/ (function(module, exports) { |
|
|
|
|
|
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA4JJREFUWEfVmO+LFVUYx7/f2Uv+AaE2cyl8EfUiMWkNg3BnxDSlCLWZa0GhICqYJb1YDCXoRSJoEAoG3YgKFevOZNGLDEt3Zn2h4C8INyp6Vd4Z3YVAeqXunSfORZd19/44M3vvcp1XlzvP83k+58w5Z84Zoscv9rgfHmzB5DVnQa0Gpw9ii6AA8JJQRop+9HOeno/dgVUA+0k+LZT/mOLUQynPPXwivNaM17AHr7vOy0LZI8BzjRIF+AvEyUJfYe/846dvtJK98fqK+eO18T0QrCHweKNYAudSwWfFIPpi6v37BIccp/DE3PRjgjt0ekiAXykyaAXDpxrFqx4T8gCBRTo8Amf+xdiap/zfbt+LnxCsesufJNLfdUDTWikomUHkT/4/cW1PiEoe3u1aai04cTZRuZME7SoBKw+wDpokORO5u1Ijph8tnBCMXbsMYkteOZVXH5cixwxwNCXebTbetGsI37eC8ENWPXslgYZjSBvWrUCRFxmX7HcgONitGjPhkhxk7NmfAtg6E1AXc48owYsA+rtYJDe6vozFni25CbOQyMQbOC/g0lmolbmEAFdYLdmHKHg7c/asJPBz9YjVBFETpecuoexg/KqzBIZc6Dk7JZTy2fqrLnbtIyDe6ClJwVEriN6sC1ZLzgsUybXH61ajhFxZrIS/TGwWYs/+DsDabhXMyP3e8qN1E5sF9ePvDc7CQiqnAczLCOt0+Oi4wRWPfRNevU+wPhZ7Y0Zvs/yofK/V07b8iet8KZSNne4WHR6FX5lBuGly7HRBb9lcgfETgGd0oB2MuUykq03/7FhLQXXzH9dx+ihKck4HBVqhbtWEqx8NwnBqUNNzceLa24U4PBuCFLxlBtEnjWq1PLjH3sA+gO91VVKw2wqifc1qtP2ykJTswyLY3g1J9a4tVoZbPqW2gvU3jWfvJzDYSUm1nTcr4UftmFqCCpJ4ziaBTDv5tyvQ8D6x06pEh3RytQUVbNRzFo9DruiAm44pyktmZfhHXUYmQQUdW7/MvNNHH+DzukXuxv0pMF4p+kN/ZMnLLKjg8gGMZMQpA7JZpxiBHx7BvPX0/ZpOfNuFWhcSu/ZeELtbxZPYb1aiXbpM7YVaFxh7y/uBVB0bpp6ty4BRtvyhS7qszAt1FvA1z1lsMN0oKW5SjK+tb8NcX8o63oNZGpEnNtckyVMob07PC/4PRJ4btbS2eHQAAAAASUVORK5CYII=" |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 207: |
|
|
/***/ (function(module, exports, __webpack_require__) { |
|
|
|
|
|
module.exports = __webpack_require__.p + "img/public.3e79446.png"; |
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 208: |
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) { |
|
|
|
|
|
"use strict"; |
|
|
__webpack_require__.r(__webpack_exports__); |
|
|
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(177); |
|
|
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__); |
|
|
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__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_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_3_node_modules_sass_resources_loader_lib_loader_js_ref_7_oneOf_1_4_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_id_vue_vue_type_style_index_0_id_4a21580c_prod_lang_scss__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__)); |
|
|
|
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 209: |
|
|
/***/ (function(module, exports, __webpack_require__) { |
|
|
|
|
|
// Imports |
|
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3); |
|
|
var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__(6); |
|
|
var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__(8); |
|
|
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]}); |
|
|
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); |
|
|
// Module |
|
|
___CSS_LOADER_EXPORT___.push([module.i, "*{border:none;margin:0;padding:0}html{height:100%}body{background:#fff;font-family:MicrosoftYaHei;font-size:0;min-height:100%;min-width:320px;position:relative}body .outer-container{min-width:1258px}body .outer-container.isMobile{min-width:auto}body .outer-container.isMobile .content-container{padding:60px 0 62px;width:100%}body .outer-container.isMobile .content-container .left-content{display:block!important;margin-right:0!important;width:100%!important}body .outer-container.isMobile .content-container .footer-outer{min-width:auto!important;position:absolute!important}body .outer-container.isMobile .content-container .load-more{width:100%!important}body .outer-container.isMobile .content-container .common-flex{display:block!important}body .outer-container.isMobile .content-container .common-other-content{margin:0!important}body .outer-container.isMobile .content-container .common-other-content h6{font-size:20px!important;line-height:28px!important;margin-bottom:10px!important}body .outer-container.isMobile .content-container .common-other-content .font-content b,body .outer-container.isMobile .content-container .common-other-content .font-content h5,body .outer-container.isMobile .content-container .common-other-content .font-content h6,body .outer-container.isMobile .content-container .common-other-content .font-content p{font-size:16px!important;line-height:24px!important;margin-bottom:8px!important;word-break:break-all}body .outer-container.isMobile .content-container .common-other-content .font-content h5{font-size:18px!important}body .outer-container.isMobile.hasLoginBottom{padding-bottom:calc(env(safe-area-inset-bottom) + 55px)}body .outer-container.isMobile.hasLoginBottom .bottom-outer,body .outer-container.isMobile.hasLoginBottom .footer-outer{bottom:calc(constant(safe-area-inset-bottom) + 55px);bottom:calc(env(safe-area-inset-bottom) + 55px)}body .outer-container.isMobile.hasLoginBottom .fixed-box{bottom:calc(constant(safe-area-inset-bottom) + 65px)!important;bottom:calc(env(safe-area-inset-bottom) + 65px)!important}body .content-container{margin:0 auto;width:1080px}body img{-o-object-fit:cover;object-fit:cover;vertical-align:top}body a{-webkit-text-decoration:none;text-decoration:none}.article-detail-page .comment-model-popup .content>div>div>div>div body p,body .article-detail-page .comment-model-popup .content>div>div>div>div p,body .text-ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body .left-content{display:inline-block;margin-right:32px;width:723px}body .right-content{display:inline-block;float:right;width:325px}body .common-flex{display:grid;grid-template-columns:repeat(4,25%)}body .load-more{background:#f5f5f8;border-radius:4px;color:#939aa7;font-family:PingFangSC-Regular,PingFang SC;font-size:18px;font-weight:400;height:50px;line-height:50px;margin:0 auto;text-align:center;width:357px}body .footer-outer{background:#f5f5f8;bottom:0;left:0;min-width:1258px;position:fixed;width:100%;z-index:9}body .common-title{color:#001965;font-family:PingFangSC-Medium,PingFang SC;font-size:24px;font-weight:500;line-height:33px;padding:20px 0 10px;text-align:left}body .common-title a{color:#5d6269;float:right;font-family:PingFangSC-Regular,PingFang SC;font-size:16px;font-weight:400}body .common-title a i{color:#001965}body p.go-follow{background:#e6553f;border-radius:4px;color:#fff;cursor:pointer;font-family:PingFangSC-Medium,PingFang SC;font-size:18px;font-weight:500;height:50px;line-height:50px;margin-bottom:23px;text-align:center}body .common-other-content{box-sizing:border-box;margin:44px 0;padding:30px}body .common-other-content h6{color:#001965;font-family:PingFangSC-Medium,PingFang SC;font-size:24px;font-weight:500;line-height:33px;margin-bottom:20px}body .common-other-content .font-content b,body .common-other-content .font-content h5,body .common-other-content .font-content h6,body .common-other-content .font-content p{color:#5d6269;font-size:18px;line-height:30px;margin-bottom:12px}body .common-other-content .font-content h5{font-size:20px}body .el-message{top:50%!important}body .el-message i{font-size:16px}@media screen and (max-width:500px){body .el-message{max-width:80%;min-width:200px}}body .video-player-box .vjs-big-play-button{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") 50% no-repeat;background-color:transparent!important;background-size:68px 67px;border:none;height:67px;left:50%;outline:none;top:50%;transform:translate(-50%,-50%);width:68px}body .video-player-box .vjs-big-play-button .vjs-icon-placeholder:before{display:none}body .video-player-box .vjs-control-bar button{outline:none}body .el-avatar>img{width:100%}.article-detail-page{position:relative}.article-detail-page .left-content div.top{border-bottom:1px solid #f5f5f8;margin-bottom:20px;padding-bottom:30px}.article-detail-page .left-content div.top img{border-radius:4px;height:407px;width:100%}.article-detail-page .left-content div.top h4{color:#292b2c;font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;font-size:32px;font-weight:700;line-height:44px}.article-detail-page .left-content>p:nth-child(2){color:#bac0c2;font-family:Apis-Regular,Apis;font-size:16px;font-weight:400;line-height:28px;margin-bottom:20px}.article-detail-page .left-content .video-box{margin-bottom:20px}.article-detail-page .left-content .video-box video{width:100%}.article-detail-page .left-content .chatbot-audio{background:#f5f5f8;border-radius:8px;box-sizing:border-box;height:105px;margin-bottom:20px;padding:16px 16px 0 85px;position:relative;width:100%}.article-detail-page .left-content .chatbot-audio>img{height:87px;left:12px;position:absolute;top:12px;width:57px}.article-detail-page .left-content .chatbot-audio>div h6{color:#333;font-family:PingFangSC-Semibold,PingFang SC;font-size:18px;font-weight:600;line-height:25px}.article-detail-page .left-content .chatbot-audio>div>div{margin-top:25px;padding-left:48px;position:relative}.article-detail-page .left-content .chatbot-audio>div>div>img{cursor:pointer;height:60px;left:-10px;position:absolute;top:-17px;width:60px}.article-detail-page .left-content .chatbot-audio>div>div div{display:flex}.article-detail-page .left-content .chatbot-audio>div>div div>span{color:#939aa7;font-family:PingFangSC-Regular,PingFang SC;font-size:12px;font-weight:400;line-height:17px;width:38px}.article-detail-page .left-content .chatbot-audio>div>div div p{background:#e3e3e3;border-radius:2px;height:3px;margin-top:7px;position:relative;width:calc(100% - 76px)}.article-detail-page .left-content .chatbot-audio>div>div div p span{background:linear-gradient(90deg,#3b97de,#38b0ff);border-radius:2px;height:3px;left:0;position:absolute;top:0}.article-detail-page .left-content .chatbot-audio>div>div div>span:last-child{text-align:right}.article-detail-page .left-content .article-content{border-bottom:1px solid #f5f5f8;color:#292b2c;font-size:18px;line-height:30px;padding:23px 0}.article-detail-page .left-content .article-content img{border-radius:4px;max-width:100%}.article-detail-page .left-content .bottom-box{padding-top:20px}.article-detail-page .left-content .bottom-box div.comment-box{position:relative}.article-detail-page .left-content .bottom-box div.comment-box h6{height:50px}.article-detail-page .left-content .bottom-box div.comment-box h6 span:first-child{color:#001965;font-family:PingFangSC-Medium,PingFang SC;font-size:24px;font-weight:500;line-height:50px}.article-detail-page .left-content .bottom-box div.comment-box h6 span:last-child{background:#3099ea;border-radius:4px;color:#fff;cursor:pointer;float:right;font-family:PingFangSC-Regular,PingFang SC;font-size:18px;font-weight:400;height:50px;line-height:50px;text-align:center;width:208px}.article-detail-page .left-content .bottom-box div.comment-box .comment-content{box-sizing:border-box;height:365px;margin-top:24px;position:relative}.article-detail-page .left-content .bottom-box div.comment-box .comment-content .baberrage-item{padding:0}.article-detail-page .left-content .bottom-box div.comment-box .comment-content .baberrage-item .barrage-items{background:#fff;border:1px solid #ededed;border-radius:30px;box-sizing:border-box;display:inline-block;height:60px;padding:0 20px 0 10px}.article-detail-page .left-content .bottom-box div.comment-box .comment-content .baberrage-item .barrage-items img{border-radius:20px;height:40px;margin:9px 10px 0 0;width:40px}.article-detail-page .left-content .bottom-box div.comment-box .comment-content .baberrage-item .barrage-items span{color:#939aa7;font-family:AppleColorEmoji;font-size:18px;line-height:58px}.article-detail-page .left-content .bottom-box div.comment-box>p{color:#292b2c;font-size:20px;line-height:100px;position:absolute;text-align:center;top:100px;width:100%}.article-detail-page .right-content{position:fixed;top:116px}.article-detail-page .right-content .common-title{color:#292b2c;font-size:18px;line-height:25px;padding:0 0 8px}.article-detail-page .right-content .common-title img{height:20px;margin:3px 0 0 4px;width:20px}.article-detail-page .right-content .list .list-item{border-bottom:1px solid #f5f5f8;box-sizing:border-box;display:block;height:120px;padding:20px 0 0 124px;position:relative}.article-detail-page .right-content .list .list-item img{border-radius:4px;height:80px;left:0;position:absolute;width:110px}.article-detail-page .right-content .list .list-item p{color:#292b2c;display:-webkit-box;font-size:16px;line-height:24px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.article-detail-page .right-content .list .list-item div.bottom{bottom:19px;position:absolute;right:0;text-align:right}.article-detail-page .right-content .list .list-item div.bottom span{color:#bac0c2;font-family:Apis-Regular,Apis;font-size:16px;font-weight:400;line-height:28px}.article-detail-page .right-content .list .list-item div.bottom span i{margin-left:3px}.article-detail-page .right-content .stack-bottom{background-color:#f5f5f8;border-radius:6px;bottom:0;color:#000;font-size:16px;height:117px;left:0;padding:0 20px 10px;position:sticky}.article-detail-page .right-content .stack-bottom .s-container{align-items:flex-end;bottom:10px;display:flex;gap:24px;left:32px;position:absolute}.article-detail-page .right-content .stack-bottom .s-container .s-left{flex-shrink:0;height:178px;width:121px}.article-detail-page .right-content .stack-bottom .s-container .s-right{flex:1;text-align:center}.article-detail-page .right-content .stack-bottom .s-container .s-right .code{background-color:#fff;border-radius:7px;box-shadow:0 2px 12px rgba(0,0,0,.102);height:80px;padding:4px;width:80px}.article-detail-page .right-content .stack-bottom .s-container .s-right .name{color:#292b2c;font-size:14px;line-height:20px;margin-top:10px}.article-detail-page .comment-model-popup{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.article-detail-page .comment-model-popup .mask{height:100%;left:0;position:absolute;top:0;width:100%}.article-detail-page .comment-model-popup .content{background:#fff;border:1px solid #e3e3e3;border-radius:4px 4px 0 0;bottom:0;box-shadow:0 -10px 10px 0 rgba(0,0,0,.08);left:0;padding:44px 0 42px;position:absolute;text-align:center;width:100%}.article-detail-page .comment-model-popup .content>div{margin:0 auto 39px;max-height:300px;max-width:1044px;overflow-y:scroll}.article-detail-page .comment-model-popup .content>div>div>div{display:flex;flex-wrap:wrap}.article-detail-page .comment-model-popup .content>div>div>div>div{padding:0 14px}.article-detail-page .comment-model-popup .content>div>div>div>div p{background:#f5f5f8;border:1px solid #f5f5f8;border-radius:30px;box-sizing:border-box;color:#292b2c;cursor:pointer;font-family:AppleColorEmoji;font-size:16px;height:60px;line-height:58px;margin-bottom:20px;min-width:320px;padding:0 20px}.article-detail-page .comment-model-popup .content>div>div>div>div p.chosen{background:rgba(48,153,234,.1);border-color:#3099ea}.article-detail-page .comment-model-popup .content>p{background:#3099ea;border-radius:4px;color:#fff;cursor:pointer;font-family:PingFangSC-Regular,PingFang SC;font-size:18px;font-weight:400;height:50px;line-height:50px;margin:0 auto;width:325px}.isMobile .article-detail-page{background:#fff;padding:11px 15px 400px!important}.isMobile .article-detail-page .left-content div.top{margin-bottom:10px;padding-bottom:10px}.isMobile .article-detail-page .left-content div.top h4{font-size:24px;line-height:30px}.isMobile .article-detail-page .left-content>p:nth-child(2){font-size:14px;margin-bottom:10px}.isMobile .article-detail-page .left-content .chatbot-audio{margin-top:20px;padding:25px 15px 10px 70px}.isMobile .article-detail-page .left-content .chatbot-audio>img{left:10px;top:-15px}.isMobile .article-detail-page .left-content .chatbot-audio>div>div{margin-left:-55px;padding:0;width:calc(100% + 55px)}.isMobile .article-detail-page .left-content .chatbot-audio>div>div>img{left:auto;right:-13px;top:-62px}.isMobile .article-detail-page .left-content .bottom-box{bottom:20px;box-sizing:border-box;left:0;padding:0 15px;position:absolute;width:100%}.isMobile .article-detail-page .left-content .bottom-box div.comment-box h6{height:40px}.isMobile .article-detail-page .left-content .bottom-box div.comment-box h6 span:first-child{display:none}.isMobile .article-detail-page .left-content .bottom-box div.comment-box h6 span:last-child{height:40px;line-height:40px;width:150px}.isMobile .article-detail-page .left-content .bottom-box div.comment-box .comment-content{height:290px}.isMobile .article-detail-page .left-content .bottom-box div.comment-box .comment-content .z_barrage{left:-15px}.isMobile .article-detail-page .right-content{float:none;padding-top:10px;width:100%}.isMobile .article-detail-page .right-content>div>div{background:#f1f1f1;border:none;border-radius:10px;box-sizing:border-box;height:auto;margin-bottom:10px;padding:15px 15px 12px}.isMobile .article-detail-page .right-content>div>div img{display:none}.isMobile .article-detail-page .right-content>div>div div.bottom{margin-top:4px;position:static;text-align:left}.isMobile .article-detail-page .comment-model-popup{z-index:10}.isMobile .article-detail-page .comment-model-popup .mask{background:rgba(0,0,0,.5)}.isMobile .article-detail-page .comment-model-popup .content{border:none;border-radius:20px 20px 0 0;box-shadow:0 0 10px 0 rgba(0,0,0,.05);box-sizing:border-box;padding:62px 15px 15px}.isMobile .article-detail-page .comment-model-popup .content>div{margin:0;max-width:none;width:100%}.isMobile .article-detail-page .comment-model-popup .content>div>div>div{display:block}.isMobile .article-detail-page .comment-model-popup .content>div>div>div>div{padding:0}.isMobile .article-detail-page .comment-model-popup .content>div>div>div>div p{background:#eef5fb;border:none;border-radius:10px;box-sizing:border-box;color:#292b2c;font-family:AppleColorEmoji;font-size:16px;height:auto;line-height:26px;margin-bottom:10px;min-width:auto;padding:11px 15px;text-align:left}.isMobile .article-detail-page .comment-model-popup .content>div>div>div>div p.chosen{color:#3099ea}.isMobile .article-detail-page .comment-model-popup .content>p{font-size:16px;height:32px;line-height:32px;position:absolute;right:15px;top:15px;width:100px}", ""]); |
|
|
// Exports |
|
|
___CSS_LOADER_EXPORT___.locals = {}; |
|
|
module.exports = ___CSS_LOADER_EXPORT___; |
|
|
|
|
|
|
|
|
/***/ }), |
|
|
|
|
|
/***/ 231: |
|
|
/***/ (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/pages/article/_id.vue?vue&type=template&id=4a21580c |
|
|
var render = function render() { |
|
|
var _vm = this, |
|
|
_c = _vm._self._c; |
|
|
return _c('div', { |
|
|
staticClass: "article-detail-page", |
|
|
staticStyle: { |
|
|
"padding": "30px 0" |
|
|
} |
|
|
}, [_vm._ssrNode("<div class=\"left-content\">", "</div>", [_vm._ssrNode("<div class=\"top\">" + (!_vm.articleData.thumb ? "<img" + _vm._ssrAttr("src", __webpack_require__(66)) + " alt style=\"display: none\">" : "<img" + _vm._ssrAttr("src", _vm.articleData.thumb) + _vm._ssrAttr("alt", _vm.articleData.title) + " style=\"display: none\">") + " <h4>" + _vm._ssrEscape(_vm._s(_vm.articleData.title)) + "</h4></div> <p>" + _vm._ssrEscape("\n " + _vm._s(_vm.articleData.hit) + " ") + "<i class=\"el-icon-view\"></i>" + _vm._ssrEscape(" " + _vm._s(_vm.articleData.published_at) + "\n ") + "</p> " + (_vm.showNovoTeacher ? "<div class=\"chatbot-audio\"><img" + _vm._ssrAttr("src", __webpack_require__(203)) + " alt> <div><h6>保护双眼，听小诺朗读</h6> <div><img" + _vm._ssrAttr("src", __webpack_require__(204)) + " alt" + _vm._ssrStyle(null, { |
|
|
display: _vm.audioPause ? '' : 'none' |
|
|
}, null) + "> <img" + _vm._ssrAttr("src", __webpack_require__(205)) + " alt" + _vm._ssrStyle(null, { |
|
|
display: !_vm.audioPause ? '' : 'none' |
|
|
}, null) + "> <div><span" + _vm._ssrStyle(null, { |
|
|
color: _vm.playTime != '00:00' ? '#3099EA' : '' |
|
|
}, null) + ">" + _vm._ssrEscape(_vm._s(_vm.playTime)) + "</span> <p><span" + _vm._ssrStyle(null, { |
|
|
width: _vm.playWidth + '%' |
|
|
}, null) + "></span></p> <span>" + _vm._ssrEscape(_vm._s(_vm.allTime)) + "</span></div></div> <audio" + _vm._ssrAttr("src", _vm.articleData.audio_url) + "></audio></div></div>" : "<!---->") + " " + (_vm.articleData.video_url ? "<div class=\"video-box\"><video x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\" x-webkit-airplay=\"true\" x5-playsinline=\"true\" webkit-playsinline=\"true\" playsinline=\"true\" width=\"100%\" controls=\"controls\"" + _vm._ssrAttr("poster", _vm.articleData.thumb) + _vm._ssrAttr("src", _vm.articleData.video_url) + " style=\"object-fit: fill\"></video></div>" : "<!---->") + " <div class=\"article-content\">" + _vm._s(_vm.articleData.content) + "</div> "), _vm._ssrNode("<div class=\"bottom-box\">", "</div>", [_vm._ssrNode((!_vm.isLogin && _vm.deviceType === 'pc' ? "<p class=\"go-follow\">\n 点击关注微信公众号，查看更多专业资讯\n </p>" : "<!---->") + " "), _vm._ssrNode("<div class=\"comment-box\">", "</div>", [_vm._ssrNode("<h6><span>最新看法</span> <span>发表你的看法</span></h6> "), _vm._ssrNode("<div class=\"comment-content\">", "</div>", [_c('Barrage', { |
|
|
ref: "barrage", |
|
|
staticClass: "barrage", |
|
|
attrs: { |
|
|
"barrage-list": _vm.barrageList, |
|
|
"speed": _vm.deviceType === 'pc' ? 4 : 3, |
|
|
"loop": true, |
|
|
"channels": 3, |
|
|
"border-color": '#ededed', |
|
|
"background": '#fff', |
|
|
"barrage-height": 120, |
|
|
"device-type": _vm.deviceType |
|
|
} |
|
|
})], 1), _vm._ssrNode(" " + (!_vm.barrageIsShow ? "<p>还没有人发表看法</p>" : "<!---->"))], 2)], 2)], 2), _vm._ssrNode(" <div class=\"right-content\"" + _vm._ssrStyle(null, { |
|
|
position: _vm.isFixed ? 'fixed' : 'static', |
|
|
right: _vm.right + 'px' |
|
|
}, null) + "><h6 class=\"common-title\">\n 猜你喜欢<img" + _vm._ssrAttr("src", __webpack_require__(206)) + " alt></h6> <div class=\"list\" style=\"min-height: 100vh\">" + _vm._ssrList(_vm.recommendArticles, function (item) { |
|
|
return "<div class=\"list-item\">" + (!item.thumb ? "<img" + _vm._ssrAttr("src", __webpack_require__(66)) + " alt>" : "<img" + _vm._ssrAttr("src", item.thumb) + _vm._ssrAttr("alt", item.title) + ">") + " <p>" + _vm._ssrEscape(_vm._s(item.title)) + "</p> <div class=\"bottom\"><span>" + _vm._ssrEscape(_vm._s(item.hit)) + "<i class=\"el-icon-view\" style=\"margin-right: 8px\"></i>" + _vm._ssrEscape(_vm._s(item.collect)) + "<i class=\"el-icon-star-on\"></i></span></div></div>"; |
|
|
}) + "</div> <div class=\"stack-bottom\"><div class=\"s-container\"><img" + _vm._ssrAttr("src", __webpack_require__(207)) + " alt class=\"s-left\"> <div class=\"s-right\"><img" + _vm._ssrAttr("src", _vm.isPro ? _vm.qrcodeUrl : _vm.qrcodeUrlTest) + " alt class=\"code\"> <div class=\"name\">\n 微信扫一扫\n <br>\n 获取最新糖尿病展示\n </div></div></div></div></div> " + (_vm.commentModelPopupShow ? "<div class=\"comment-model-popup\"><div class=\"mask\"></div> <div class=\"content\"><div" + _vm._ssrStyle(null, { |
|
|
maxHeight: _vm.commentMaxHeight + 'px' |
|
|
}, null) + "><div><div>" + _vm._ssrList(_vm.commentModelList, function (item, index) { |
|
|
return "<div><p" + _vm._ssrClass(null, item.chosen ? 'chosen' : '') + ">" + _vm._ssrEscape("\n " + _vm._s(item.content) + "\n ") + "</p></div>"; |
|
|
}) + "</div> " + (_vm.commentLoading ? "<p class=\"load-more\">\n 加载更多<i class=\"el-icon-loading\"></i></p>" : "<!---->") + "</div></div> <p>立即发布</p></div></div>" : "<!---->") + " "), _c('BottomRightFixed', { |
|
|
attrs: { |
|
|
"show-share": true, |
|
|
"show-collect": true, |
|
|
"is-login": _vm.isLogin, |
|
|
"is-collect": _vm.articleData.is_collected, |
|
|
"show-comment": true |
|
|
}, |
|
|
on: { |
|
|
"commentClick": function ($event) { |
|
|
return _vm.getCommentCorpus(1, 2); |
|
|
}, |
|
|
"collectClick": _vm.collectArticle |
|
|
} |
|
|
})], 2); |
|
|
}; |
|
|
var staticRenderFns = []; |
|
|
|
|
|
// CONCATENATED MODULE: ./src/pages/article/_id.vue?vue&type=template&id=4a21580c |
|
|
|
|
|
// EXTERNAL MODULE: external "vuex" |
|
|
var external_vuex_ = __webpack_require__(5); |
|
|
|
|
|
// 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/pages/article/_id.vue?vue&type=script&lang=js |
|
|
|
|
|
const { |
|
|
mapActions, |
|
|
mapGetters |
|
|
} = Object(external_vuex_["createNamespacedHelpers"])('user'); |
|
|
/* harmony default export */ var _idvue_type_script_lang_js = ({ |
|
|
name: 'ArticleDetailPage', |
|
|
layout: 'detail', |
|
|
validate({ |
|
|
params |
|
|
}) { |
|
|
return /^\d+$/.test(params.id); |
|
|
}, |
|
|
async asyncData({ |
|
|
$axios, |
|
|
params, |
|
|
req, |
|
|
redirect |
|
|
}) { |
|
|
// if (!process.server) return; |
|
|
const data = await $axios.$get('/article/detail/' + params.id, $axios.genSSROptions(req)); |
|
|
// data.detail.articleData.audio_url = 'https://app.diabetes.com.cn/uploadfile/article/audio/8160-16395833618215.mp3'; |
|
|
// console.log('dafa:', data); |
|
|
if (data.success === false) { |
|
|
redirect('/error?code=' + 404); |
|
|
} |
|
|
return { |
|
|
...data.detail |
|
|
}; |
|
|
}, |
|
|
data() { |
|
|
return { |
|
|
audioPause: true, |
|
|
playTime: '00:00', |
|
|
allTime: '00:00', |
|
|
canPlayAudio: false, |
|
|
playWidth: 0, |
|
|
barrageIsShow: false, |
|
|
barrageList: [], |
|
|
commentModelPopupShow: false, |
|
|
commentModelList: [], |
|
|
inComment: false, |
|
|
commentPage: 1, |
|
|
commentLoading: false, |
|
|
commentHasMore: true, |
|
|
chosenCommentId: 0, |
|
|
inCollect: false, |
|
|
isFixed: false, |
|
|
right: 89, |
|
|
commentMaxHeight: 300, |
|
|
isPro: false, |
|
|
qrcodeUrl: __webpack_require__(67), |
|
|
qrcodeUrlTest: __webpack_require__(68) |
|
|
}; |
|
|
}, |
|
|
head() { |
|
|
return { |
|
|
title: this.articleData.title, |
|
|
meta: [{ |
|
|
hid: 'description', |
|
|
name: 'description', |
|
|
content: 'Home page description' |
|
|
}] |
|
|
}; |
|
|
}, |
|
|
computed: { |
|
|
...mapGetters({ |
|
|
isLogin: 'isLogin' |
|
|
}), |
|
|
deviceType() { |
|
|
return this.$store.state.device.deviceType; |
|
|
}, |
|
|
env() { |
|
|
return this.$store.state.device.env; |
|
|
} |
|
|
}, |
|
|
mounted() { |
|
|
this.isPro = "production" === 'production'; |
|
|
const that = this; |
|
|
this.getComment(); |
|
|
this.$nextTick(() => { |
|
|
if (that.deviceType === 'pc') { |
|
|
window.addEventListener('scroll', function () { |
|
|
that.isFixed = true; |
|
|
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; |
|
|
if (document.documentElement.offsetWidth < 1258) { |
|
|
that.right = 89 - (1258 - document.documentElement.offsetWidth) + scrollLeft; |
|
|
} else { |
|
|
that.right = (document.documentElement.offsetWidth - 1080) / 2; |
|
|
} |
|
|
}); |
|
|
} else { |
|
|
that.commentMaxHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6; |
|
|
if (this.deviceType === 'ios') { |
|
|
if (that.env === 'wechat') { |
|
|
document.addEventListener('WeixinJSBridgeReady', function () { |
|
|
that.$refs.chatbotAudio.play(); |
|
|
that.$refs.chatbotAudio.pause(); |
|
|
that.$refs.chatbotAudio.currentTime = 0; |
|
|
}, false); |
|
|
} else { |
|
|
window.onload = function () { |
|
|
that.$refs.chatbotAudio.play(); |
|
|
that.$refs.chatbotAudio.pause(); |
|
|
that.$refs.chatbotAudio.currentTime = 0; |
|
|
if (!isNaN(that.$refs.chatbotAudio.duration)) { |
|
|
const duration = that.$refs.chatbotAudio.duration; |
|
|
let minutes = parseInt(duration / 60, 10); |
|
|
let seconds = parseInt(duration % 60); |
|
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
|
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
|
|
that.allTime = minutes + ':' + seconds; |
|
|
that.canPlayAudio = true; |
|
|
} else { |
|
|
that.canPlayAudio = true; |
|
|
} |
|
|
}; |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}, |
|
|
methods: { |
|
|
...mapActions({ |
|
|
showLoginDialog: 'showLoginDialog' |
|
|
}), |
|
|
getDuration() { |
|
|
const duration = this.$refs.chatbotAudio.duration; |
|
|
let minutes = parseInt(duration / 60, 10); |
|
|
let seconds = parseInt(duration % 60); |
|
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
|
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
|
|
this.allTime = minutes + ':' + seconds; |
|
|
this.canPlayAudio = true; |
|
|
}, |
|
|
playPauseAudio() { |
|
|
if (this.canPlayAudio) { |
|
|
if (this.audioPause) { |
|
|
this.baiduStat('文章详情页', 'click', '小诺老师语音控件'); |
|
|
this.$refs.chatbotAudio.play(); |
|
|
} else { |
|
|
this.$refs.chatbotAudio.pause(); |
|
|
} |
|
|
this.audioPause = !this.audioPause; |
|
|
} |
|
|
}, |
|
|
updateTime(e) { |
|
|
const currentTime = e.target.currentTime; |
|
|
const duration = e.target.duration; |
|
|
let minutes = parseInt(currentTime / 60, 10); |
|
|
let seconds = parseInt(currentTime % 60); |
|
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
|
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
|
|
this.playWidth = currentTime / duration * 100; |
|
|
this.playTime = minutes + ':' + seconds; |
|
|
}, |
|
|
audioEnd() { |
|
|
this.audioPause = true; |
|
|
this.playTime = '00:00'; |
|
|
this.playWidth = 0; |
|
|
}, |
|
|
async getComment() { |
|
|
const data = await this.$axios.$get('/article/comment-list?aid=' + this.$route.params.id); |
|
|
for (const item of data.detail.commentList) { |
|
|
item.time = Math.random() * 15 + 9; |
|
|
} |
|
|
this.barrageIsShow = data.detail.commentList.length > 0; |
|
|
const _list = []; |
|
|
for (const comment of data.detail.commentList) { |
|
|
_list.push({ |
|
|
content: comment.comment_content, |
|
|
color: '#939AA7', |
|
|
icon: comment.headimgurl |
|
|
}); |
|
|
} |
|
|
this.barrageList = _list; |
|
|
}, |
|
|
async getCommentCorpus(page, type) { |
|
|
if (!this.isLogin) { |
|
|
this.showLoginDialog(true); |
|
|
} else { |
|
|
const that = this; |
|
|
if (page === 1) { |
|
|
this.baiduStat('文章详情页', 'click', type === 1 ? '文章内发表你的想法-点击' : '文章内评论'); |
|
|
this.chosenCommentId = 0; |
|
|
this.commentModelList = []; |
|
|
this.commentPage = 1; |
|
|
this.commentHasMore = true; |
|
|
this.commentModelPopupShow = true; |
|
|
setTimeout(function () { |
|
|
that.$refs.commentCorpus.addEventListener('scroll', function () { |
|
|
// 变量scrollTop是滚动条滚动时，距离顶部的距离 |
|
|
const scrollTop = that.$refs.commentCorpus.scrollTop; |
|
|
// 变量windowHeight是可视区的高度 |
|
|
const contentHeight = that.$refs.commentCorpus.clientHeight; |
|
|
// 变量scrollHeight是滚动条的总高度 |
|
|
const allHeight = that.$refs.commentCorpusContent.clientHeight; |
|
|
// 滚动条到底部的条件 |
|
|
if (scrollTop + contentHeight > allHeight - 20) { |
|
|
// 写后台加载数据的函数 一定要用that |
|
|
that.getCommentCorpus(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
if (this.commentHasMore && !this.commentLoading) { |
|
|
this.commentLoading = true; |
|
|
const data = await this.$axios.$get('/article/comment-corpus?page=' + this.commentPage); |
|
|
for (const item of data.detail.list) { |
|
|
item.chosen = false; |
|
|
} |
|
|
this.commentPage = this.commentPage + 1; |
|
|
this.commentModelList = this.commentModelList.concat(data.detail.list); |
|
|
this.commentHasMore = data.detail.hasMore; |
|
|
this.commentLoading = false; |
|
|
} |
|
|
} |
|
|
}, |
|
|
chooseCorpus(id, index) { |
|
|
for (const item of this.commentModelList) { |
|
|
item.chosen = false; |
|
|
} |
|
|
this.chosenCommentId = id; |
|
|
this.commentModelList[index].chosen = true; |
|
|
}, |
|
|
async commentArticle() { |
|
|
if (this.chosenCommentId === 0) { |
|
|
this.$message({ |
|
|
message: '请选择看法模版', |
|
|
type: 'warning' |
|
|
}); |
|
|
} else { |
|
|
const loading = this.$loading({ |
|
|
lock: true, |
|
|
text: 'Loading', |
|
|
spinner: 'el-icon-loading', |
|
|
background: 'rgba(0, 0, 0, 0.7)' |
|
|
}); |
|
|
const data = await this.$axios.$post('/article/user-comment', { |
|
|
aid: this.$route.params.id, |
|
|
comment_template_id: this.chosenCommentId |
|
|
}); |
|
|
if (data && data.success) { |
|
|
this.baiduStat('文章详情页', 'click', '文章内发表你的想法-发表成功'); |
|
|
} |
|
|
console.log(data); |
|
|
loading.close(); |
|
|
this.commentModelPopupShow = false; |
|
|
this.getComment(); |
|
|
} |
|
|
}, |
|
|
async collectArticle() { |
|
|
if (!this.isLogin) { |
|
|
this.showLoginDialog(true); |
|
|
} else if (this.inCollect) { |
|
|
this.$message({ |
|
|
message: '您的操作太快了', |
|
|
type: 'warning' |
|
|
}); |
|
|
} else { |
|
|
this.baiduStat('文章详情页', 'click', '文章内收藏'); |
|
|
this.inCollect = true; |
|
|
const data = await this.$axios.$post('/article/user-collect', { |
|
|
aid: this.$route.params.id |
|
|
}); |
|
|
console.log(data); |
|
|
this.articleData.is_collected = data.detail.curState; |
|
|
this.inCollect = false; |
|
|
} |
|
|
}, |
|
|
goHref(url) { |
|
|
let openNew = false; |
|
|
if (this.deviceType === 'pc') { |
|
|
openNew = true; |
|
|
} |
|
|
url = this.$router.resolve({ |
|
|
path: url |
|
|
}); |
|
|
if (openNew) { |
|
|
window.open(url.href, '_blank'); |
|
|
} else { |
|
|
window.location.href = url.href; |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
// CONCATENATED MODULE: ./src/pages/article/_id.vue?vue&type=script&lang=js |
|
|
/* harmony default export */ var article_idvue_type_script_lang_js = (_idvue_type_script_lang_js); |
|
|
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js |
|
|
var componentNormalizer = __webpack_require__(1); |
|
|
|
|
|
// CONCATENATED MODULE: ./src/pages/article/_id.vue |
|
|
|
|
|
|
|
|
|
|
|
function injectStyles (context) { |
|
|
|
|
|
var style0 = __webpack_require__(208) |
|
|
if (style0.__inject__) style0.__inject__(context) |
|
|
|
|
|
} |
|
|
|
|
|
/* normalize component */ |
|
|
|
|
|
var component = Object(componentNormalizer["a" /* default */])( |
|
|
article_idvue_type_script_lang_js, |
|
|
render, |
|
|
staticRenderFns, |
|
|
false, |
|
|
injectStyles, |
|
|
null, |
|
|
"733e848e" |
|
|
|
|
|
) |
|
|
|
|
|
/* harmony default export */ var _id = __webpack_exports__["default"] = (component.exports); |
|
|
|
|
|
/* nuxt-component-imports */ |
|
|
installComponents(component, {Barrage: __webpack_require__(181).default,BottomRightFixed: __webpack_require__(69).default}) |
|
|
|
|
|
|
|
|
/***/ }) |
|
|
|
|
|
};; |
|
|
//# sourceMappingURL=_id.js.map
|
