<template>
  <div class="preview-box">
    <!--<div class="title">{{ value.title }}</div>-->
    <div class="preview-content">
      <div style="font-size: 16px;margin-bottom: 20px;">{{ value.title }}</div>
      <div v-if="value.author"><span>作者 : </span><span>{{ value.author }}</span></div>
      <div class="detail" v-if="value.discussionsNumber>=0">
        <div class="publishTime">{{ value.releaseTime*1000 | parseTime }}</div>
        <div class="count">阅读<span id="reading">{{ value.reading }}</span>评论{{ value.discussionsNumber }}</div></div>
      <video v-if="value.videoUrl" :src="value.videoUrl" style="width: 100%;object-fit:fill;" :poster="value.audioImage" controls></video>
      <div v-html="value.content"></div>
      <div v-if="value.likeNumber||value.likeNumber>=0" class="like"></div>
      <div v-if="value.likeNumber||value.likeNumber>=0" class="likeNumber"><span id="likeNumber">{{ value.likeNumber }}</span>人点赞</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style scoped>
.preview-box{
  background: url('./image/phone.png');
  background-size: 100% 100%;
  width: 350px;
  height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  color: initial;
}
.preview-content{
  width: 326px;
  height: 560px;
  background: #fff;
  overflow: hidden;
  overflow-y: auto;
  padding: 15px;
}
.preview-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.preview-content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
  background   : #535353;
}
.preview-content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
}
.detail {
  font-size: 12px;
  color: #838383;
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
}
#reading{
  margin-right: 5px;
}
.publishTime {
  width: 50%;
  float: left;
  text-align: left;
}
.count {
  width: 50%;
  float: right;
  text-align: right;
}
.like {
  width: 75px;
  height: 75px;
  margin: 36px auto 12px auto;
  background: url("./image/dianzan.png")no-repeat;
  background-size: cover;
  display: flex;
}
.likeNumber {
  text-align: center;
}
</style>
