You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
945 lines
26 KiB
945 lines
26 KiB
<!-- eslint-disable vue/no-v-html--> |
|
<template> |
|
<div class="article-detail-page" style="padding: 30px 0"> |
|
<div class="left-content"> |
|
<div class="top"> |
|
<img |
|
v-if="!articleData.thumb" |
|
src="~/assets/images/article_cover.png" |
|
alt="" |
|
style="display: none" |
|
/> |
|
<img |
|
v-else |
|
:src="articleData.thumb" |
|
:alt="articleData.title" |
|
style="display: none" |
|
/> |
|
<h4>{{ articleData.title }}</h4> |
|
</div> |
|
<p> |
|
{{ articleData.hit }} <i class="el-icon-view"></i> {{ |
|
articleData.published_at |
|
}} |
|
</p> |
|
<div v-if="showNovoTeacher" class="chatbot-audio"> |
|
<img src="~/assets/images/chatbot_audio_feature.png" alt="" /> |
|
<div> |
|
<h6>保护双眼，听小诺朗读</h6> |
|
<div> |
|
<img |
|
:style="{ display: audioPause ? '' : 'none' }" |
|
src="~/assets/images/play_chatbot_audio.png" |
|
alt="" |
|
@click="playPauseAudio" |
|
/> |
|
<img |
|
:style="{ display: !audioPause ? '' : 'none' }" |
|
src="~/assets/images/pause_chatbot_audio.png" |
|
alt="" |
|
@click="playPauseAudio" |
|
/> |
|
<div> |
|
<span :style="{ color: playTime != '00:00' ? '#3099EA' : '' }">{{ |
|
playTime |
|
}}</span> |
|
<p><span :style="{ width: playWidth + '%' }"></span></p> |
|
<span>{{ allTime }}</span> |
|
</div> |
|
</div> |
|
<audio |
|
ref="chatbotAudio" |
|
:src="articleData.audio_url" |
|
@canplay="getDuration" |
|
@timeupdate="updateTime" |
|
@ended="audioEnd" |
|
></audio> |
|
</div> |
|
</div> |
|
<div v-if="articleData.video_url" 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 |
|
style="object-fit: fill" |
|
:poster="articleData.thumb" |
|
:src="articleData.video_url" |
|
></video> |
|
</div> |
|
<div class="article-content" v-html="articleData.content"></div> |
|
<div class="bottom-box"> |
|
<p |
|
v-if="!isLogin && deviceType === 'pc'" |
|
class="go-follow" |
|
@click=" |
|
baiduStat('文章详情页', 'click', '文章详情页-未登录按钮'); |
|
showLoginDialog(true); |
|
" |
|
> |
|
点击关注微信公众号，查看更多专业资讯 |
|
</p> |
|
<div class="comment-box"> |
|
<h6> |
|
<span>最新看法</span> |
|
<span @click="getCommentCorpus(1, 1)">发表你的看法</span> |
|
</h6> |
|
<div class="comment-content"> |
|
<Barrage |
|
ref="barrage" |
|
class="barrage" |
|
:barrage-list="barrageList" |
|
:speed="deviceType === 'pc' ? 4 : 3" |
|
:loop="true" |
|
:channels="3" |
|
:border-color="'#ededed'" |
|
:background="'#fff'" |
|
:barrage-height="120" |
|
:device-type="deviceType" |
|
/> |
|
</div> |
|
<p v-if="!barrageIsShow">还没有人发表看法</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div |
|
class="right-content" |
|
:style="{ position: isFixed ? 'fixed' : 'static', right: right + 'px' }" |
|
> |
|
<h6 class="common-title"> |
|
猜你喜欢<img src="~/assets/images/heart.png" alt="" /> |
|
</h6> |
|
<div> |
|
<div |
|
v-for="item in recommendArticles" |
|
:key="item.id" |
|
@click=" |
|
baiduStat( |
|
'文章详情页', |
|
'click', |
|
'文章点击猜你喜欢-' + item.id + '+' + item.title |
|
); |
|
goHref('/article/' + item.id); |
|
" |
|
> |
|
<img |
|
v-if="!item.thumb" |
|
src="~/assets/images/article_cover.png" |
|
alt="" |
|
/> |
|
<img v-else :src="item.thumb" :alt="item.title" /> |
|
<p>{{ item.title }}</p> |
|
<div class="bottom"> |
|
<span |
|
>{{ item.hit |
|
}}<i class="el-icon-view" style="margin-right: 8px"></i |
|
>{{ item.collect }}<i class="el-icon-star-on"></i |
|
></span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="commentModelPopupShow" class="comment-model-popup"> |
|
<div class="mask" @click="commentModelPopupShow = false"></div> |
|
<div class="content"> |
|
<div |
|
ref="commentCorpus" |
|
:style="{ maxHeight: commentMaxHeight + 'px' }" |
|
> |
|
<div ref="commentCorpusContent"> |
|
<div> |
|
<template v-for="(item, index) in commentModelList"> |
|
<div :key="'comment' + item.id"> |
|
<p |
|
:class="item.chosen ? 'chosen' : ''" |
|
@click="chooseCorpus(item.id, index)" |
|
> |
|
{{ item.content }} |
|
</p> |
|
</div> |
|
</template> |
|
</div> |
|
<p v-if="commentLoading" class="load-more"> |
|
加载更多<i class="el-icon-loading"></i> |
|
</p> |
|
</div> |
|
</div> |
|
<p @click="commentArticle">立即发布</p> |
|
</div> |
|
</div> |
|
<BottomRightFixed |
|
:show-share="true" |
|
:show-collect="true" |
|
:is-login="isLogin" |
|
:is-collect="articleData.is_collected" |
|
:show-comment="true" |
|
@commentClick="getCommentCorpus(1, 2)" |
|
@collectClick="collectArticle" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { createNamespacedHelpers } from 'vuex'; |
|
|
|
const { mapActions, mapGetters } = createNamespacedHelpers('user'); |
|
export default { |
|
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 |
|
}; |
|
}, |
|
|
|
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() { |
|
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; |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss"> |
|
.article-detail-page { |
|
position: relative; |
|
.left-content { |
|
div.top { |
|
margin-bottom: 20px; |
|
border-bottom: 1px solid $bg-color; |
|
padding-bottom: 30px; |
|
img { |
|
width: 100%; |
|
height: 407px; |
|
border-radius: 4px; |
|
} |
|
h4 { |
|
/*margin-top: 30px;*/ |
|
font-size: 32px; |
|
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; |
|
font-weight: bold; |
|
color: $font-color1; |
|
line-height: 44px; |
|
} |
|
} |
|
& > p:nth-child(2) { |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
font-family: Apis-Regular, Apis; |
|
font-weight: 400; |
|
color: #bac0c2; |
|
line-height: 28px; |
|
} |
|
.video-box { |
|
margin-bottom: 20px; |
|
video { |
|
width: 100%; |
|
} |
|
} |
|
.chatbot-audio { |
|
position: relative; |
|
margin-bottom: 20px; |
|
padding: 16px 16px 0 85px; |
|
width: 100%; |
|
height: 105px; |
|
background: $bg-color; |
|
border-radius: 8px; |
|
box-sizing: border-box; |
|
& > img { |
|
position: absolute; |
|
top: 12px; |
|
left: 12px; |
|
width: 57px; |
|
height: 87px; |
|
} |
|
& > div { |
|
h6 { |
|
font-size: 18px; |
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
font-weight: 600; |
|
color: #333; |
|
line-height: 25px; |
|
} |
|
& > div { |
|
position: relative; |
|
margin-top: 25px; |
|
padding-left: 48px; |
|
& > img { |
|
position: absolute; |
|
top: -17px; |
|
left: -10px; |
|
width: 60px; |
|
height: 60px; |
|
cursor: pointer; |
|
} |
|
div { |
|
display: flex; |
|
& > span { |
|
width: 38px; |
|
font-size: 12px; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: $font-color3; |
|
line-height: 17px; |
|
} |
|
p { |
|
position: relative; |
|
margin-top: 7px; |
|
width: calc(100% - 76px); |
|
height: 3px; |
|
background: #e3e3e3; |
|
border-radius: 2px; |
|
span { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
height: 3px; |
|
background: linear-gradient(90deg, #3b97de 0%, #38b0ff 100%); |
|
border-radius: 2px; |
|
} |
|
} |
|
& > span:last-child { |
|
text-align: right; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.article-content { |
|
border-bottom: 1px solid $bg-color; |
|
padding: 23px 0; |
|
font-size: 18px; |
|
color: $font-color1; |
|
line-height: 30px; |
|
img { |
|
max-width: 100%; |
|
border-radius: 4px; |
|
} |
|
} |
|
.bottom-box { |
|
padding-top: 20px; |
|
div.comment-box { |
|
position: relative; |
|
h6 { |
|
height: 50px; |
|
span:first-child { |
|
font-size: 24px; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
font-weight: 500; |
|
color: $main-blue-color; |
|
line-height: 50px; |
|
} |
|
span:last-child { |
|
float: right; |
|
width: 208px; |
|
height: 50px; |
|
background: #3099ea; |
|
border-radius: 4px; |
|
text-align: center; |
|
font-size: 18px; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: $body-color; |
|
line-height: 50px; |
|
cursor: pointer; |
|
} |
|
} |
|
.comment-content { |
|
position: relative; |
|
margin-top: 24px; |
|
height: 365px; |
|
box-sizing: border-box; |
|
.baberrage-item { |
|
padding: 0; |
|
.barrage-items { |
|
display: inline-block; |
|
border: 1px solid #ededed; |
|
padding: 0 20px 0 10px; |
|
height: 60px; |
|
background: $body-color; |
|
border-radius: 30px; |
|
box-sizing: border-box; |
|
img { |
|
margin: 9px 10px 0 0; |
|
@include roundFun(40px); |
|
} |
|
span { |
|
font-size: 18px; |
|
font-family: AppleColorEmoji; |
|
color: $font-color3; |
|
line-height: 58px; |
|
} |
|
} |
|
} |
|
} |
|
& > p { |
|
position: absolute; |
|
top: 100px; |
|
width: 100%; |
|
font-size: 20px; |
|
color: $font-color1; |
|
text-align: center; |
|
line-height: 100px; |
|
} |
|
} |
|
} |
|
} |
|
.right-content { |
|
position: fixed; |
|
top: 116px; |
|
.common-title { |
|
padding: 0 0 8px; |
|
font-size: 18px; |
|
color: $font-color1; |
|
line-height: 25px; |
|
img { |
|
margin: 3px 0 0 4px; |
|
width: 20px; |
|
height: 20px; |
|
} |
|
} |
|
& > div { |
|
& > div { |
|
display: block; |
|
position: relative; |
|
border-bottom: 1px solid $bg-color; |
|
padding: 20px 0 0 124px; |
|
height: 120px; |
|
box-sizing: border-box; |
|
img { |
|
position: absolute; |
|
left: 0; |
|
width: 110px; |
|
height: 80px; |
|
border-radius: 4px; |
|
} |
|
p { |
|
font-size: 16px; |
|
color: $font-color1; |
|
line-height: 24px; |
|
@include textEllipsisMore1Line(2); |
|
} |
|
div.bottom { |
|
position: absolute; |
|
right: 0; |
|
bottom: 19px; |
|
text-align: right; |
|
span { |
|
font-size: 16px; |
|
font-family: Apis-Regular, Apis; |
|
font-weight: 400; |
|
color: #bac0c2; |
|
line-height: 28px; |
|
i { |
|
margin-left: 3px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.comment-model-popup { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 9; |
|
.mask { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.content { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
border: 1px solid #e3e3e3; |
|
padding: 44px 0 42px; |
|
width: 100%; |
|
box-shadow: 0 -10px 10px 0 rgba(0, 0, 0, 0.08); |
|
border-radius: 4px 4px 0 0; |
|
background: $body-color; |
|
text-align: center; |
|
& > div { |
|
overflow-y: scroll; |
|
margin: 0 auto 39px; |
|
max-width: 1044px; |
|
max-height: 300px; |
|
& > div { |
|
& > div { |
|
display: flex; |
|
flex-wrap: wrap; |
|
& > div { |
|
padding: 0 14px; |
|
p { |
|
margin-bottom: 20px; |
|
border: 1px solid $bg-color; |
|
padding: 0 20px; |
|
min-width: 320px; |
|
height: 60px; |
|
box-sizing: border-box; |
|
background: $bg-color; |
|
font-size: 16px; |
|
font-family: AppleColorEmoji; |
|
color: #292b2c; |
|
line-height: 58px; |
|
@extend .text-ellipsis; |
|
border-radius: 30px; |
|
cursor: pointer; |
|
} |
|
p.chosen { |
|
border-color: #3099ea; |
|
background: rgba(48, 153, 234, 0.1); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
& > p { |
|
margin: 0 auto; |
|
width: 325px; |
|
height: 50px; |
|
background: #3099ea; |
|
border-radius: 4px; |
|
font-size: 18px; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: $body-color; |
|
line-height: 50px; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
} |
|
.isMobile { |
|
.article-detail-page { |
|
padding: 11px 15px 400px !important; |
|
background: $body-color; |
|
.left-content { |
|
div.top { |
|
margin-bottom: 10px; |
|
padding-bottom: 10px; |
|
h4 { |
|
font-size: 24px; |
|
line-height: 30px; |
|
} |
|
} |
|
& > p:nth-child(2) { |
|
margin-bottom: 10px; |
|
font-size: 14px; |
|
} |
|
.chatbot-audio { |
|
margin-top: 20px; |
|
padding: 25px 15px 10px 70px; |
|
& > img { |
|
left: 10px; |
|
top: -15px; |
|
} |
|
& > div { |
|
& > div { |
|
margin-left: -55px; |
|
padding: 0; |
|
width: calc(100% + 55px); |
|
& > img { |
|
top: -62px; |
|
right: -13px; |
|
left: auto; |
|
} |
|
} |
|
} |
|
} |
|
.bottom-box { |
|
position: absolute; |
|
bottom: 20px; |
|
left: 0; |
|
padding: 0 15px; |
|
width: 100%; |
|
box-sizing: border-box; |
|
div.comment-box { |
|
h6 { |
|
height: 40px; |
|
span:first-child { |
|
display: none; |
|
} |
|
span:last-child { |
|
width: 150px; |
|
height: 40px; |
|
line-height: 40px; |
|
} |
|
} |
|
.comment-content { |
|
height: 290px; |
|
.z_barrage { |
|
left: -15px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.right-content { |
|
float: none; |
|
padding-top: 10px; |
|
width: 100%; |
|
& > div { |
|
& > div { |
|
margin-bottom: 10px; |
|
border: none; |
|
padding: 15px 15px 12px; |
|
height: auto; |
|
background: #f1f1f1; |
|
border-radius: 10px; |
|
box-sizing: border-box; |
|
img { |
|
display: none; |
|
} |
|
div.bottom { |
|
position: unset; |
|
margin-top: 4px; |
|
text-align: left; |
|
} |
|
} |
|
} |
|
} |
|
.comment-model-popup { |
|
z-index: 10; |
|
.mask { |
|
background: rgba(0, 0, 0, 0.5); |
|
} |
|
.content { |
|
border: none; |
|
padding: 62px 15px 15px; |
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); |
|
border-radius: 20px 20px 0 0; |
|
box-sizing: border-box; |
|
& > div { |
|
margin: 0; |
|
width: 100%; |
|
max-width: none; |
|
& > div { |
|
& > div { |
|
display: block; |
|
& > div { |
|
padding: 0; |
|
p { |
|
margin-bottom: 10px; |
|
border: none; |
|
padding: 11px 15px; |
|
height: auto; |
|
min-width: auto; |
|
background: #eef5fb; |
|
border-radius: 10px; |
|
box-sizing: border-box; |
|
text-align: left; |
|
font-size: 16px; |
|
font-family: AppleColorEmoji; |
|
color: $font-color1; |
|
line-height: 26px; |
|
&.chosen { |
|
color: #3099ea; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
& > p { |
|
position: absolute; |
|
top: 15px; |
|
right: 15px; |
|
width: 100px; |
|
height: 32px; |
|
line-height: 32px; |
|
font-size: 16px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|