m2pool_web_frontend/mining-pool/src/views/userDetails/index.vue

<template>
  <div v-loading="userDetailsLoading">
    <div class="main-title">用户详情 <span @click="goBack" style="color: #409EFF;cursor: pointer;font-size: 16px;">返回</span> </div>
  <section class="user-details-box">
    <section class="user-details-form">
      <el-form
        :label-position="labelPosition"
        :inline="true"
        :model="userData"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item style="width: 80%;" label="币种:" label-width="100px" prop="coin">
              <el-input disabled v-model="userData.coin"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 80%;"  label="挖矿账户:" label-width="100px" prop="user">
              <el-input disabled v-model="userData.user"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 80%;"  label="交易金额:" label-width="100px" prop="amount">
              <el-input disabled v-model="userData.amount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="收益分配日期:"
              label-width="100px"
              prop="createDate"
              style="width: 80%;" 
            >
              <el-input disabled v-model="userData.createDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 80%;"  label="最大高度:" label-width="100px" prop="maxHeight">
              <el-input disabled v-model="userData.maxHeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width: 80%;"  label="实际转账日期:" label-width="100px" prop="shouldOutDate">
              <el-input disabled v-model="userData.shouldOutDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 55%;" label="转账地址:" label-width="100px" prop="address">
              <el-input
                disabled v-model="userData.address"             
            
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        
        <el-row>
          <el-col :span="24">
            <el-form-item style="width: 55%; max-height: 300px;overflow-y: auto;" label="历史支付地址:" label-width="100px" prop="address">
                <p  class="history-balance-item" v-for="item in userData.historyBalance" :key="item.balance">{{item.balance}}</p>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
    </section>

    <section class="chartBox">
      <div class="lineChartBox">用户挖矿曲线图</div>
     <div class="barChartBox">柱状图</div>
    </section>
  </section>



      
  </div>
</template>

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

<style lang="scss" scoped>
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
  margin-bottom: 18px;
}
.user-details-box{
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  height: 73vh;
  overflow: hidden;
  overflow-y: auto;
  // background: palegoldenrod;
}

.user-details-form {
  width: 80%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  // background: palegoldenrod;
}

.no-data-tip{
  width: 80%;
  margin: 0 auto;
  font-size: 16px;
  color: #999;
  text-align: center;
  margin-top: 20px;

}

.history-balance-item{

  margin: 0;
  padding: 0;
  background:#E7DFF3 ;
  padding: 0px 20px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: rgba(0,0,0,0.6);

}

::v-deep .el-form-item__label {
  // color: #409EFF;         /* 例如设置为 Element UI 主色 */
  font-weight: bold;      /* 加粗 */
  font-size: 16px;        /* 字号 */
  letter-spacing: 1px;    /* 字间距 */
  /* 你可以根据需要添加更多样式 */
}

.chartBox{
  width: 80vw;
  box-sizing: border-box;
  // background: palegoldenrod;
  height: 800px;
  display: flex;
  align-content: center;
  justify-content: space-around;

}

.lineChartBox{
  width: 49%;
  height: 100%;
  background: palegoldenrod;
}
.barChartBox{
  width: 49%;
  height: 100%;
  background: pink;
}
</style>