coinbus/yq/src/views/subscriptionLetter/index.vue

<template>
  <!-- 支付历史  转账记录-->
  <div class="payHistories" v-loading="payHistories">
    <el-row>
      <el-col :span="24">
        <div style="display: flex; align-items: center">
          <h2>{{ $t(`login.subscriptionLetter`) }}</h2>
          <i @click="handelRefresh" class="i ishuaxin1 Refresh"></i>
        </div>
      </el-col>
    </el-row>
    <!-- 标签页 -->
    <el-tabs v-model="activeName">
      <!-- 未读通知    style="width: 100%;min-height: 500px;"-->
      <el-tab-pane label="未读通知" name="Unread">
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
        
          max-height="600"
         
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column prop="title" label="消息标题" > </el-table-column>
          <el-table-column prop="source" label="消息来源" width="150"> </el-table-column>
          <el-table-column prop="date"   sortable label="发布时间" width="180">
            <!-- <template slot-scope="scope">
              <span>{{ handelTime(scope.row.createTime) }}</span>
            </template> -->
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 15px">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="pageSizes"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit1"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!-- 全部通知  style="width: 100%;min-height: 500px;"-->
      <el-tab-pane label="全部通知" name="whole">
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
         
          max-height="600"
         
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column prop="title" label="消息标题" > </el-table-column>
          <el-table-column prop="source" label="消息来源"  width="150"> </el-table-column>
          <el-table-column prop="date"   sortable label="发布时间"  width="180">
            <!-- <template slot-scope="scope">
              <span>{{ handelTime(scope.row.createTime) }}</span>
            </template> -->
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 15px">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="pageSizes"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit1"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

   
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.Refresh {
  // outline: 1px solid red;
  // height: 20px;
  // position: absolute;
  // left: 100px;
  // top: 0px;
  margin-left: 10px;
  cursor: pointer;
  display: inline-block;
}
.Refresh:hover {
  color: #f7931a;
}
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  height: 100vh;
  width: 100%;
}
.chart {
  outline: 1px solid rgba(0, 0, 0, 0.5);

  text-align: center;
}
.table {
  // outline: 1px solid red;
  // margin-top: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
//留言数量
.information {
  //  outline: 1px solid rgba(0,0,0,0.5);
  padding: 5px 10px;
  // outline: 1px solid red;
  width: 100%;
  font-size: 15px;
  display: flex;
  margin-top: 5px;
  font-weight: 600;
  // span{

  //   display: inline-block;
  //   width: 100px;
  //   //  outline: 1px solid red;
  //    text-align: right;

  // }
  span:nth-of-type(1) {
    display: inline-block;
    //  outline: 1px solid red;
    width: 150px;
  }
  .num {
    color: #21a0ff;
    display: inline-block;
    width: 100px;
    text-align: left;
    //  outline: 1px solid red;
    font-weight: 600;
  }
}

.replyDialog {
  // border: 1px solid red;
  width: 60%;
  margin: 0 auto;
}
</style>
<style >
</style>