Lexus-media/src/views/data/components/UploadLinkDetail.vue

<template>
  <div class="record_detail">
    <div class="title">
      <p class="data_detail">数据详情</p>
    </div>
    <div class="content">
      <div class="content_datail">
        <div class="detail">
          <p style="width: 65px">资料名称：</p>
          <p>{{ dataObj.name }}</p>
        </div>
        <div class="detail">
          <p style="width: 65px">上传时间：</p>
          <p>{{ dataObj.time2 }}</p>
        </div>
        <div class="multiDetail">
          <div class="time">
            <span style="width: 65px">车系：</span>
            <span>{{ dataObj.time1 }}</span>
          </div>
          <div class="range">
            <p style="width: 75px">车型：</p>
            <p style="margin-right: 10px">雷克萨斯</p>
          </div>
        </div>
        <div class="multiDetail">
          <div class="time">
            <span style="width: 65px">素材时间：</span>
            <span>{{ dataObj.time1 }}</span>
          </div>
          <div class="range">
            <p style="width: 75px">经销商范围：</p>
            <p style="margin-right: 10px">{{ dataObj.range }}</p>
          </div>
        </div>
        <div class="detail">
          <p style="width: 65px">资料描述：</p>
          <p>{{ dataObj.desc }}</p>
        </div>
        <div class="files">
          <p style="width: 65px">附件：</p>
          <div class="filesName">
            <p
                v-for="(item, index) in dataObj.files" :key="index"
                @click="downloadFile(index)"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {
  },
  mounted() {},
  data() {
    return {
      dataObj: {
        name: "雷克萨斯ES上市",
        time1: "2021/04",
        range: "共通",
        time2: "2021/03/10 18:19",
        sum: 200,
        desc: "资料包内海报，主要针对此次新款车型上市卖点进行宣传。",
        files: [
          {
            id: "111",
            name: "宣传活动海报合集",
          }
        ],
      },
      
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  methods: {
    // 下载附件
    downloadFile: function(i) {
        console.log(i);
    },
  },
};
</script>

<style scoped lang="less">
.record_detail {
  .title {
    border-top: 1px solid #ccc;
    .data_detail {
      padding-left: 10px;
      font-size: 14px;
      font-weight: bolder;
      height: 30.8px;
      vertical-align: bottom;
      display: table-cell;
    }
  }
  .content {
    display: flex;
    // justify-content: ;
    border: 1px solid #ccc;
    padding: 20px;
    .content_datail {
      width: 420px;
      height: 390px;
      padding: 20px 30px 0;
      .detail {
        width: 100%;
        min-height: 50px;
        display: flex;
      }
      .multiDetail {
        display: flex;
        min-height: 50px;
        .time {
          width: 126px;
          display: flex;
        }
        .range {
          display: flex;
          width: 268px;
          span {
            color: #0056a0;
            margin: 0 10px;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .files {
        display: flex;
        .filesName {
          p {
            color: #0056a0;
          }
        }
      }
    }
    .table {
      width: 568px;
      height: 390px;
      background-color: #fff;
      padding: 10px;
      .table_option {
        height: 28px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        select {
          width: 144px;
          height: 28px;
          border: 1px solid #ccc;
          color: #555;
        }
      }
      .count {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>