web-test/src/views/detail/semDetail.vue

<template>
  <div id="semDetail">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="semDetail">
          <el-col :span="24" class="messInfo">
            <el-col :span="6" class="left">
              <el-image style="width:100%;height:238px;" v-if="detailinfo.picture" :src="detailinfo.picture"></el-image>
              <el-image v-else style="width:100%;height:238px;" :src="pic"></el-image>
              <p>{{ detailinfo.title }}</p>
              <p>发布时间：{{ detailinfo.publish_time }}</p>
              <p>来源：{{ detailinfo.orgin }}</p>
            </el-col>
            <el-col :span="18" class="right">
              {{ detailinfo.content }}
            </el-col>
          </el-col>
          <el-col :span="24" class="chatInfo">
            <el-col :span="24" class="message">
              <el-col :span="24" class="info chat_frame" id="chat">
                <el-col :span="24" v-for="(item, index) in fabiaolist" :key="index" class="list">
                  <el-col :span="4" class="lefts">
                    <el-image :src="squareImage" style="width:65%;height: 128px;"></el-image>
                    <p>
                      <span>{{ item.name }}</span>
                    </p></el-col
                  ><el-col :span="19" class="under">
                    <p>{{ item.context }}</p>
                    <p>
                      <span class="date">{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}&nbsp;&nbsp;{{ item.time }}</span>
                    </p></el-col
                  >
                  <el-col></el-col
                ></el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="input">
              <el-col :span="24" class="title"><i class="el-icon-edit"></i> 发布评论 </el-col>
              <wang-editor v-model="inputInfo" ref="editor" class="huifu"></wang-editor>
              <el-button type="primary">发布评论</el-button>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import wangEditor from '@/components/wang-editor.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'semDetail',
  props: {},
  components: {
    wangEditor,
  },
  data: () => ({
    detailinfo: {},
    pic: require('@/assets/live/1.jpg'),
    squareImage: require('@/assets/live/circle.png'),
    inputInfo: '',
    fabiaolist: [
      { name: '测试1', context: 'ddasdadssssssssssssssssssssssssssssssssssssssssssssssssad', ceng: '1楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },

      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
      { name: '测试1', context: 'dasdsadasd', ceng: '2楼', time: '23:11', date: '2020-03-05' },
    ],
  }),
  created() {
    this.search();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  methods: {
    ...news(['fetch']),
    async search() {
      const res = await this.fetch(this.id);
      this.$set(this, `detailinfo`, res.data);
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.semDetail {
  float: left;
  width: 100%;
  min-height: 600px;
  margin: 30px 0;
}
.semDetail .messInfo {
  float: left;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.messInfo .left p {
  float: left;
  width: 100%;
  font-size: 18px;
  padding: 5px 0 10px 0;
  color: gold;
  letter-spacing: 0;
}
.messInfo .left p:nth-child(2) {
  font-weight: bold;
}
.messInfo .right {
  font-size: 18px;
  line-height: 35px;
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 11;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding: 0 30px;
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  height: 380px;
}
.semDetail .chatInfo {
  float: left;
  width: 100%;
  min-height: 400px;
}
.chatInfo .message {
  float: left;

  min-height: 400px;
  margin: 0 0 30px 0;
}
.list {
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  min-height: 200px;
  background-color: #e5e5e5;
  /* width: 99.9%; */
  padding: 15px 0 0 0;

  margin: 1px 0 0 1px;
}
.lefts {
  padding: 20px 0 0 20px;
}
.lefts p {
  text-align: center;
  width: 70%;
}

.under {
  padding: 20px 0 20px 20px;
  width: 80%;
  background-color: #fff;
  min-height: 160px;
}
.date {
  text-align: center;
  position: relative;
  width: 100%;
  font-size: 18px;
  top: 80px;
  left: 1050px;
}
.chatInfo .input {
  float: left;
  // height: 290px;
  height: 340px;

  overflow: hidden;
  text-align: center;
  padding: 0 10%;
  background-color: #e5e5e5;
}
.huifu {
  background-color: #ffffff;
}
.title {
  text-align: left;
  padding: 5px 0 10px 0;
  background-color: #e5e5e5;
  color: #ff7f42;
}
.chatInfo .input .el-button {
  margin: 20px 0 0 0;
}
</style>