<template>
  <!-- 支付管理后台-->
  <div class="payManagement">

    <!-- --------商品列表------- -->

    <el-row>
      <el-col :span="6">
        <div class="ProductList">
      <div class="left">
            <!-- <i class="i igl-folderOpen"></i>           -->
          </div>
          <div class="right">
            <p>565656</p>
            <p>今日新增用户数</p>
          </div>
        </div>

      </el-col>
      <el-col :span="5" style="margin-left: 10px;">
        <div class="ProductList">
      <div class="left">
            <!-- <i class="i igl-folderOpen"></i>           -->
          </div>
          <div class="right">
            <p>565656</p>
            <p>今日新增用户数</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <section class="ProductListBox">
      <template  >    
        <div class="ProductList"  v-for="item in productList" :key="item.label">
          <div class="left">
            <!-- <i class="i igl-folderOpen"></i>           -->
          </div>
          <div class="right">
            <p>{{ item.num }}</p> 
            <p>{{ item.label }}</p> 
          </div>
        </div>
      </template>
    </section>



    <!-- 分析图表 -->
    <el-row class="chartTitleBox">
      <el-col >
        <!-- 每日历史图表 -->
        <h5> {{$t(`pay.chart`)}}</h5>        
      </el-col>
      <el-col :span="6">
        <div>
          <el-date-picker
            v-model="time"
            size="small"
            style="width:250px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

        </div>       
      </el-col> 
    </el-row>
    <div
          class="chart"
          id="MessageBoardBox"
          style="width: 100%; height: 400px"
        >
          图表
      </div>
 
  
  </div>
</template>

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

<style lang="scss" scoped>
.payManagement {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  min-height: 100vh;
  width: 80%;
  margin: 0 auto;
}
.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;
}
// --------商品列表-------
.ProductListBox{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  // outline: 1px solid red; 
  justify-content: space-between;
  // .ProductList:nth-last-child(-n+4){
  //   background: #f7a177;
    
  // } 
  // .ProductList:nth-child(4n) {
  //     background-color: lightgray;
  //   } 
    .ProductList:nth-child(-n+8) {
      background-color: #f7a177;
    } 

}
 
.ProductList{ 
  // outline: 1px solid red;
  height: 50px;
  width: 200px;
  display: flex;
  background: #7fc7e2;
  color: #fff;
  padding: 5px 10px;
  box-shadow:  3px 3px 5px rgb(139, 135, 135);
  // margin: 8px  27px;
  margin-top: 20px;
  // margin-right: 55px;
  margin-right: 80px;

  .left{
     width:30%;
    //  outline: 1px solid red;
    //  height: 100%;
    padding: 10px;
     i{
      
      font-size: 30px;
      color: #fff;
     }

  }
  .right{
    // outline: 1px solid red;
    // background: red;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
    p{
      width: 100%;
      height: 30%;
      margin: 0px;
      text-align: right;  
         
    }
    p:nth-of-type(1){ 	
      font-size: 18px;
    } 
    p:nth-of-type(2){ 	
      font-size: 12px;
      margin-top: 5px;
    } 



  }
  
 
}

//-----------------------
.chartTitleBox{
  // outline: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0px  10px;
}
</style>
<style >

</style>
