yuebeilian-admin/src/view/fund/message-detail.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <div class="item">
          <div class="label">发布人ID：</div>
          <div class="value">{{ info.uid }}</div>
        </div>
        <div class="item">
          <div class="label">联系方式：</div>
          <div class="value">{{ info.phone }}</div>
        </div>
        <div class="item">
          <div class="label">主题：</div>
          <div class="value">{{ info.subject }}</div>
        </div>
        <div class="item">
          <div class="label">详情：</div>
          <div class="value">{{ info.describe }}</div>
        </div>
        <div class="item item2">
          <div class="label">配图：</div>
          <div class="value">
            <!-- <img
              class="img"
              v-for="(item, index) in info.pics"
              :src="item"
              alt=""
              :key="index"
            /> -->
            <el-image
              class="img"
              v-for="(item, index) in info.pics"
              :key="index"
              :src="item"
              fit="cover"
              :preview-src-list="info.pics"
            >
            </el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
export default {
  components: {
    Header
  },
  name: 'balanceExamine',
  data() {
    return {
      title: {
        // 页面标题
        firstTitile: '消息管理',
        secondTitle: '消息管理'
      },
      loading: 0,
      info: {}
    };
  },

  mounted() {
    this.id = +this.$route.query.id;
    // 获取列表
    this.getInfo();
  },
  computed: {},
  methods: {
    // 获取列表
    getInfo() {
      this.loading++;
      this.httpGet(this.$root.getMessageDetail, {
        id: this.id
      }).then(
        (res) => {
          this.loading--;
          this.info = res;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 60px;
      border-radius: 2px;

      .item {
        flex-x(flex-start);
        word(14px, #666);
        height: 45px;

        &.item2 {
          height: auto;
          padding: 10px 0;
        }

        .label {
          width: 150px;
          line-height: 45px;
          align-self: flex-start;
        }

        .zhutu {
          width: 32px;
          height: 32px;
          border-radius: 4px;
        }

        .img {
          width: 112px;
          height: 112px;
          border-radius: 4px;
          margin-right: 15px;
          object-fit: cover;
        }

        .video {
          height: 450px;
        }
      }
    }
  }
}
</style>