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 :soan="24"> <el-image :src="gongqiuImage" class="gongqiuImage" style="width:100%;height:160px;"></el-image></el-col>
          <el-col :span="24"  > </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>{{ item.ceng }}&nbsp;&nbsp;{{ item.date }}</p>
                  </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: {},
    gongqiuImage: require('@/assets/live/111.png'),
    squareImage: require('@/assets/live/circle.png'),
    inputInfo: '',
    fabiaolist: [{ name: '测试1', context: '测试内容', ceng: '1楼', 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: 190px;
  margin: 0 0 30px 0;
}
.list {
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  min-height: 200px;
  background-color: #e5e5e5;
  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;
  width: 80%;
  background-color: #fff;
  min-height: 160px;
}
.under p:first-child {
  float: left;
  width: 100%;
  font-size: 18px;
  height: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 26px;
}
.under p:last-child {
  text-align: right;
  font-size: 16px;
}
.chatInfo .input {
  float: left;
  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>