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

<template>
  <div id="semDetail">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="main">
          <el-col :span="24" class="one">
            <el-image :src="gongqiuImage"></el-image>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="24" class="twoTop">
              <el-col :span="3" class="left">
                浏览次数：1
              </el-col>
              <el-col :span="21" class="right"> [专题] {{ detail.title }} </el-col>
            </el-col>
            <el-col :span="24" class="twoInfo">
              <el-col class="list">
                <el-col :span="3" class="left">
                  <el-col :span="24" class="leftTop">
                    会员名称
                  </el-col>
                  <el-col :span="24" class="leftDown">
                    <el-image :src="squareImage"></el-image>
                    <el-col :span="24" class="jobname">
                      {{ detail.name }}
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="21" class="right">
                  <el-col :span="24" class="date">
                    <i class="el-icon-user icon"></i>
                    <span>文章发表于{{ detail.meta | getDate }}</span>
                    <span>1楼</span>
                  </el-col>
                  <el-col :span="24" class="info">
                    <p>{{ detail.content }}</p>
                  </el-col>
                  <el-col :span="24" class="jubao">
                    <span>举报</span>
                  </el-col>
                </el-col>
              </el-col>

              <el-col class="list" v-for="(item, index) in list" :key="index">
                <el-col :span="3" class="left">
                  <el-col :span="24" class="leftTop">
                    会员名称
                  </el-col>
                  <el-col :span="24" class="leftDown">
                    <el-image :src="squareImage"></el-image>
                    <el-col :span="24" class="jobname">
                      {{ item.name }}
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="21" class="right">
                  <el-col :span="24" class="date">
                    <i class="el-icon-user icon"></i>
                    <span>评论发布于{{ item.date }}</span>
                    <span>{{ index + 2 }}楼</span>
                  </el-col>
                  <el-col :span="24" class="info">
                    <p>{{ item.content }}</p>
                  </el-col>
                  <el-col :span="24" class="jubao">
                    <span>举报</span>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="twoPage">
              <page :total="total" position="right"></page>
            </el-col>
            <el-col :span="24" class="twoInput">
              <el-col :span="3" class="left"> </el-col>
              <el-col :span="21" class="right">
                <el-col :span="24" class="waneditor">
                  <wang-editor v-model="inputInfo" ref="editor"></wang-editor>
                </el-col>
                <el-col :span="24" class="btn">
                  <el-button type="primary">发表评论</el-button>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import wangEditor from '@/components/wang-editor.vue';
import page from '@/components/pagination.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'semDetail',
  props: {},
  components: { page, wangEditor },
  data: () => ({
    gongqiuImage: require('@/assets/live/111.png'),
    squareImage: require('@/assets/live/222.png'),
    detail: {},
    list: [
      {
        name: '测试人员',
        date: '2020-02-02',
        content: '测试内容',
      },
      {
        name: '测试人员',
        date: '2020-02-02',
        content: '测试内容',
      },
      {
        name: '测试人员',
        date: '2020-02-02',
        content: '测试内容',
      },
    ],
    print: { name: '管理员', date: '2020-05-02', content: '测试内容' },
    total: 0,
    inputInfo: '',
  }),
  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, `detail`, res.data);
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  min-height: 600px;
  margin: 30px 0;
}
.main .one {
  float: left;
  width: 100%;
  height: 160px;
  margin: 0 0 30px 0;
}
.main .two {
  float: left;
  width: 100%;
}
.main .two .twoTop {
  float: left;
  width: 100%;
  height: 60px;
}

.main .two .twoTop .left {
  float: left;
  height: 60px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #00316e;
  background: #a5d2f5;
  border-bottom: 10px solid #044b79;
}
.main .two .twoTop .right {
  float: left;
  height: 60px;
  line-height: 50px;
  padding: 0 15px;
  font-size: 30px;
  color: #023658;
  border-bottom: 10px solid #5096d2;
}
.main .two .twoInfo {
  float: left;
  width: 100%;
}
.main .two .twoInfo .left {
  background: #5096d2;
  border-bottom: 10px solid #044b79;
}
.main .two .twoInfo .left .leftTop {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  border-bottom: 1px dashed #ccc;
}
.main .two .twoInfo .left .leftDown {
  height: 420px;
}
.main .two .twoInfo .left .leftDown .el-image {
  margin: 40px 18px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.main .two .twoInfo .left .leftDown .jobname {
  text-align: center;
  font-size: 22px;
  color: #fffcae;
}
.main .two .twoInfo .right {
  padding: 0 20px;
}
.main .two .twoInfo .right .date {
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px dashed #ccc;
}
.main .two .twoInfo .right .date .icon {
  font-size: 30px;
  color: #b6dd59;
}
.main .two .twoInfo .right .date span:nth-child(2) {
  font-size: 20px;
  padding: 0px 10px;
  position: relative;
  top: -2px;
}
.main .two .twoInfo .right .date span:last-child {
  font-size: 20px;
  float: right;
}
.main .two .twoInfo .right .info {
  height: 300px;
  overflow: hidden;
  border: 2px solid #044b79;
  border-radius: 10px;
  margin: 30px 0;
  padding: 20px;
}
.main .two .twoInfo .right .info p {
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 32px;
}
.main .two .twoInfo .right .jubao {
  height: 70px;
  line-height: 60px;
  border-top: 1px dashed #ff8b0f;
  border-bottom: 10px solid #5096d2;
}
.main .two .twoInfo .right .jubao span {
  float: right;
  color: #ff0000;
  font-size: 20px;
}
.main .two .twoPage {
  margin: 20px 0;
}
.main .two .twoInput {
  height: 270px;
  border: 2px solid #5096d2;
}
.main .two .twoInput .left {
  height: 266px;
  background-color: #5096d2;
}
.main .two .twoInput .right {
  padding: 20px 20px 0 20px;
}
/deep/.main .two .twoInput .right .waneditor .w-e-text-container {
  height: 140px !important;
}
.main .two .twoInput .right .btn {
  margin: 10px 0;
}
/deep/.main .two .twoInput .right .btn .el-button {
  margin: 10px 0;
}
</style>