moral_edu/src/views/xsczda/xslb/bjlb/xslbxq/czda/index.vue

<template>
  <div class="content">
    <div class="d-flex mb20">
      <div class="content-box Info">
        <div style="width: 100%; height: 150px; position: relative">
          <img
            style="
              width: calc(100% - 42px);
              height: 128px;
              margin: 20px 0 0 20px;
              position: absolute;
            "
            src="@/assets/bg.png"
            alt=""
          />
          <img
            style="
              width: 105px;
              height: 105px;
              border-radius: 105px;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -52px;
            "
            :src="jcxxInfo.xdx_sczp"
            alt=""
          />
        </div>
        <div style="text-align: center; margin-top: 50px">
          <p
            style="
              font-size: 20px;
              font-family: PingFangSC, PingFangSC-Semibold;
              font-weight: 600;
            "
          >
            {{ jcxxInfo.xdx_xsxm }}
          </p>
          <p
            style="
              font-size: 14px;
              font-family: PingFang, PingFang-Bold;
              font-weight: 700;
              color: #8083a3;
              margin-bottom: 10px;
            "
          >
            学籍号：{{ jcxxInfo.xdx_xsxh }}
          </p>
        </div>
        <div>
          <ul>
            <li>性别</li>
            <li>{{ jcxxInfo.xdx_xb_option_n }}</li>
          </ul>
          <ul>
            <li>民族</li>
            <li>{{ jcxxInfo.xdx_mz }}</li>
          </ul>
          <ul>
            <li>出生年月</li>
            <li>{{ jcxxInfo.xdx_csrq }}</li>
          </ul>
          <ul>
            <li>血型</li>
            <li>{{ jcxxInfo.xdx_xx }}</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>身份证号码</li>
            <li>{{ jcxxInfo.xdx_zjhm }}</li>
          </ul>
          <ul>
            <li>户籍所在地</li>
            <li>{{ jcxxInfo.xdx_jtzz }}</li>
          </ul>
          <ul>
            <li>家庭住址</li>
            <li>{{ jcxxInfo.xdx_xxdz }}</li>
          </ul>
        </div>
      </div>
      <div class="ml20 content-box student-body-health" style="height: 709px">
        <div>
          <span>学生体质健康</span>
          <!-- <a>查看更多</a> -->
        </div>
        <div>
          <div>
            <img src="@/assets/icon-heart.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_jcxl }}</span>
              <span>基础心率</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-BMI.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_bmi }}</span>
              <span>BMI</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-scale.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_tzl }}</span>
              <span>体脂率</span>
            </div>
          </div>
          <div>
            <img src="@/assets/icon-lung.png" alt="" />
            <div>
              <span>{{ tzjkInfo.xtj_fhl }}</span>
              <span>肺活量</span>
            </div>
          </div>
        </div>
        <div>
          <span></span>
          <div>
            <div class="tzjk-info">
              <img src="@/assets/icon-vision.png" />
              <span>{{ tzjkInfo.xtj_sl }}</span>
            </div>
            <div>视力</div>
          </div>
          <div>
            <div class="tzjk-info">
              <img src="@/assets/icon-backrun.png" />
              <span>{{ tzjkInfo.xtj_wfp }}</span>
            </div>
            <div>往返跑</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-longrun.png" />
              <span>{{ tzjkInfo.xtj_nlp }}</span>
            </div>
            <div>耐力跑成绩</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-shortrun.png" />
              <span>{{ tzjkInfo.xtj_50mp }}</span>
            </div>
            <div>50米跑</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-situp.png" />
              <span>{{ tzjkInfo.xtj_1fzywqz }}</span>
            </div>
            <div>1分钟仰卧起坐</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-jump.png" />
              <span>{{ tzjkInfo.xtj_ldty }}</span>
            </div>
            <div>立定跳远</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-skip.png" />
              <span>{{ tzjkInfo.xtj_1fzts }}</span>
            </div>
            <div>1分钟跳绳</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-pullup.png" />
              <span>{{ tzjkInfo.xtj_ytxs }}</span>
            </div>
            <div>引体向上</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-sit.png" />
              <span>{{ tzjkInfo.xtj_zwtqq }}</span>
            </div>
            <div>坐位体前屈</div>
          </div>
          <div class="tzjk-info">
            <div>
              <img src="@/assets/icon-ball.png" />
              <span>{{ tzjkInfo.xtj_sxq }}</span>
            </div>
            <div>实心球</div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="d-flex mb20">
      <div class="content-box badge">
        <div class="title">徽章</div>
        <div class="badge" style="height: 300px">
          <ul>
            <li>
              <img src="@/assets/icon-badgeone.png" alt="" />
              <p>徽章一</p>
            </li>
            <li>
              <img src="@/assets/icon-btwo.png" alt="" />
              <p>徽章二</p>
            </li>
            <li>
              <img src="@/assets/icon-third.png" alt="" />
              <p>徽章三</p>
            </li>
            <li>
              <img src="@/assets/icon-forth.png" alt="" />
              <p>徽章四</p>
            </li>
            <li>
              <img src="@/assets/icon-bfive.png" alt="" />
              <p>徽章五</p>
            </li>
            <li>
              <img src="@/assets/icon-gray.png" alt="" />
              <p>徽章六</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="ml20 content-box habit-formation">
        <div class="title">习惯养成</div>
        <div class="mt15 text-right" style="height: 300px" id="radarBox"></div>
      </div>
    </div>

    <div class="d-flex mb20">
      <div class="content-box study-score">
        <div class="title">
          <span>学习及成绩</span>
          <div>
            <div class="left-icon">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="right-icon">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="student-score-content">
          <div
            v-for="(item, index) in oneToTwo(studyScoreData, 4)"
            :key="index"
            class="row-card"
          >
            <div>
              <div v-for="(item2, index2) in item" :key="index2" class="card">
                <div class="top-section">
                  <img :src="item2.image" width="74px" height="74px" alt="" />
                  <div>
                    <span>{{ item2.name }}</span>
                    <span>{{ item2.percent }}</span>
                  </div>
                </div>
                <div class="bottom-section">
                  <span>平时：{{ item2.normal }}</span>
                  <span>期末：{{ item2.final }}</span>
                  <span
                    >趋势：
                    <img :src="item2.trend" width="96px" height="48px" alt=""
                  /></span>
                  <span>总评：{{ item2.total }}</span>
                </div>
              </div>
            </div>
            <span class="split-line" v-if="index === 0"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex mb20" style="height: 500px">
      <div class="content-box social-practice">
        <div class="title" style="border-bottom: none">社会实践</div>
        <table>
          <tr>
            <th>活动名称</th>
            <th>时间</th>
            <th>评价</th>
          </tr>
          <tr>
            <td>社会实践一</td>
            <td>2021年12月28日</td>
            <td>优秀</td>
          </tr>
          <tr>
            <td>社会实践一</td>
            <td>2021年12月28日</td>
            <td>中等</td>
          </tr>
          <tr>
            <td>社会实践三</td>
            <td>2021年12月28日</td>
            <td>良好</td>
          </tr>
          <tr>
            <td>社会实践四</td>
            <td>2021年12月28日</td>
            <td>优秀</td>
          </tr>
        </table>
      </div>
      <div class="ml20 content-box class-duty">
        <div class="title">班级值日</div>
        <div style="margin-bottom: 30px">
          <el-calendar v-model="calendar"> </el-calendar>
        </div>
        <div class="date">
          <div
            style="
              width: 13px;
              height: 70px;
              display: inline-block;
              border-radius: 10px 0 0 10px;
              background-color: #e8523f;
            "
          ></div>
          <div style="display: inline-block; vertical-align: top">
            <p
              style="
                margin: 12px;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383d4a;
              "
            >
              班级值日
            </p>
            <span
              style="
                margin-left: 10px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #4d4d4d;
              "
              class="el-icon-time"
              >7 Dec, 2019 | 10:00 AM</span
            >
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex mb20" style="height: 420px">
      <div class="content-box specialty-display">
        <div class="title">特长展示</div>
        <ul>
          <li>
            <span class="dot green"></span>
            <span>特长一</span>
            <span>80%</span>
            <el-progress
              class="progress"
              :percentage="80"
              color="#5FDCB3"
              :show-text="false"
            ></el-progress>
          </li>
          <li>
            <span class="dot green"></span>
            <span>特长二</span>
            <span>75%</span>
            <el-progress
              class="progress"
              :percentage="75"
              color="#5FDCB3"
              :show-text="false"
            ></el-progress>
          </li>
          <li>
            <span class="dot orange"></span>
            <span>特长三</span>
            <span>65%</span>
            <el-progress
              class="progress"
              :percentage="65"
              color="#EF8354"
              :show-text="false"
            ></el-progress>
          </li>
          <li>
            <span class="dot orange"></span>
            <span>特长四</span>
            <span>50%</span>
            <el-progress
              class="progress"
              :percentage="50"
              color="#EF8354"
              :show-text="false"
            ></el-progress>
          </li>
          <li>
            <span class="dot pink"></span>
            <span>特长五</span>
            <span>25%</span>
            <el-progress
              class="progress"
              :percentage="25"
              color="#FBB0BF"
              :show-text="false"
            ></el-progress>
          </li>
        </ul>
      </div>
      <div class="ml20 content-box participate-activities">
        <div>
          <div class="title" style="border-bottom: none">
            参加活动 <span>查看全部</span>
          </div>
        </div>
        <table>
          <tr>
            <th>活动名称</th>
            <th>类型</th>
            <th>时间</th>
          </tr>
          <tr>
            <td>足球赛</td>
            <td>体育</td>
            <td>2021年12月28日</td>
          </tr>
          <tr>
            <td>演讲</td>
            <td>文学</td>
            <td>2021年12月28日</td>
          </tr>
          <tr>
            <td>数学竞赛</td>
            <td>竞赛</td>
            <td>2021年12月28日</td>
          </tr>
          <tr>
            <td>美术</td>
            <td>美术</td>
            <td>2021年12月28日</td>
          </tr>
        </table>
      </div>
    </div> -->
  </div>
</template>

<script>
import { xjk_list, xslb_list, xs_detail, xjk_detail, xslb_detail } from "./api";
import * as echarts from "echarts";
export default {
  name: "index",
  data() {
    return {
      calendar: new Date(),
      limit: 10,
      total: 12,
      cur_page: 1,
      keyword: "",
      jcxxInfo: {},
      tzjkInfo: {},
      xsInfo: {},
      firstForm: {
        grade: "",
        class: "",
      },

      xtj_xsxh: "",
      xdx_xsxh: "",
      xdxx_xsxh: "",
      studyScoreData: [
        {
          image: new URL("../../../../../../assets/Pie.png", import.meta.url),
          percent: "75%",
          name: "语文",
          normal: "良好",
          final: "优秀",
          trend: new URL("../../../../../../assets/Graph.png", import.meta.url),
          total: "优秀",
        },
        {
          image: new URL("../../../../../../assets/Pie_2.png", import.meta.url),
          percent: "25%",
          name: "数学",
          normal: "优秀",
          final: "--",
          trend: new URL(
            "../../../../../../assets/Graph_2.png",
            import.meta.url
          ),
          total: "--",
        },
        {
          image: new URL("../../../../../../assets/Pie_1.png", import.meta.url),
          percent: "50%",
          name: "外语",
          normal: "良好",
          final: "良好",
          trend: new URL(
            "../../../../../../assets/Graph_1.png",
            import.meta.url
          ),
          total: "良好",
        },
        {
          image: new URL("../../../../../../assets/Pie_3.png", import.meta.url),
          percent: "50%",
          name: "体育",
          normal: "优秀",
          final: "优秀",
          trend: new URL(
            "../../../../../../assets/Graph_3.png",
            import.meta.url
          ),
          total: "优秀",
        },
        {
          image: new URL("../../../../../../assets/Pie_1.png", import.meta.url),
          percent: "50%",
          name: "物理",
          normal: "良好",
          final: "良好",
          trend: new URL(
            "../../../../../../assets/Graph_1.png",
            import.meta.url
          ),
          total: "良好",
        },
        {
          image: new URL("../../../../../../assets/Pie_3.png", import.meta.url),
          percent: "50%",
          name: "化学",
          normal: "良好",
          final: "优秀",
          trend: new URL(
            "../../../../../../assets/Graph_3.png",
            import.meta.url
          ),
          total: "优秀",
        },
        {
          image: new URL("../../../../../../assets/Pie.png", import.meta.url),
          percent: "75%",
          name: "生物",
          normal: "良好",
          final: "优秀",
          trend: new URL("../../../../../../assets/Graph.png", import.meta.url),
          total: "优秀",
        },
        {
          image: new URL("../../../../../../assets/Pie_2.png", import.meta.url),
          percent: "25%",
          name: "地理",
          normal: "优秀",
          final: "--",
          trend: new URL(
            "../../../../../../assets/Graph_2.png",
            import.meta.url
          ),
          total: "--",
        },
      ],
    };
  },
  methods: {
    oneToTwo(arr, size) {
      let arr2 = [];
      for (let i = 0; i < arr.length; i = i + size) {
        arr2.push(arr.slice(i, i + size));
      }
      return arr2; // 新的二维数组
    },

    getRadar() {
      var chartDom = document.getElementById("radarBox");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        radar: {
          center: ["50%", "50%"], //位置
          radius: "75%", //大小
          indicator: [
            { text: "9分认真听课" },
            { text: "5分自我形象" },
            { text: "5分礼貌" },
            { text: "8分勤奋" },
            { text: "4分卫生" },
          ],
          axisName: {
            color: "#000000",
            fontSize: "14px",
            fontFamily: "SourceHanSansCN, SourceHanSansCN-Normal",
          },
        },
        series: [
          {
            name: "",
            type: "radar",

            data: [
              {
                value: [130, 60, 100, 50, 60],
                name: "",
              },
            ],
            symbol: "none",
            lineStyle: {
              width: 4,
              color: "#00BF7B",
            }, //设置线
            areaStyle: {
              color: "#00BF7B",
              opacity: "0.3",
            }, // 设置封闭区域阴影面积,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    jcxxData() {
      let data = {
        xdx_xsxh: this.xdxx_xsxh,
      };

      xjk_detail(data).then((res) => {
        if (res.code == 1) {
          if (Object.keys(res.data.one_info).length != 0) {
            this.jcxxInfo = res.data.one_info;
            let a = this.jcxxInfo.xdx_sczp.indexOf("|");
            this.jcxxInfo.xdx_sczp = this.jcxxInfo.xdx_sczp.substring(0, a);
            if (Object.keys(res.data.one_info.tzxx_info).length != 0) {
              this.tzjkInfo = res.data.one_info.tzxx_info;
            } else {
              this.$message({
                message: "暂未上传该生体质健康信息",
                type: "error",
              });
            }
          } else {
            this.$message({
              message: "暂未上传该生学籍卡信息",
              type: "error",
            });
          }
        }
      });
    },

    // tzjkData() {
    //   let data = {
    //     xtj_xsxh: this.xdxx_xsxh,
    //   };

    //   xslb_detail(data).then((res) => {
    //     if (res.code == 1) {
    //       this.tzjkInfo = res.data.one_info;
    //     }
    //   });
    // },
  },
  mounted() {
    if (this.$route.params.xdxx_xsxh != "") {
      this.xdxx_xsxh = this.$route.params.xdxx_xsxh;
      // this.tzjkData();
      this.jcxxData();
      // this.getRadar();
    }
  },
};
</script>

<style lang="scss" scoped>
//基本信息
.Info div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;

  ul {
    width: calc(50% - 47px);
    height: 50px;
    border: 1px dashed #dadada;
    border-radius: 12px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0px 0 0 15px;
    & :nth-child(1) {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #9a9a9a;
      margin-bottom: 5px;
    }
    &:nth-child(2) {
      font-size: 14px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      color: #000000;
    }
  }
}
.Info div:nth-child(4) {
  ul {
    width: calc(100% - 57px);
    height: 50px;
    border: 1px dashed #dadada;
    border-radius: 12px;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0px 0 0 15px;
    & :nth-child(1) {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #9a9a9a;
      margin-bottom: 5px;
    }
    &:nth-child(2) {
      font-size: 14px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      color: #000000;
    }
  }
}

//体质健康
.student-body-health {
  & > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px 15px 20px;
    border-bottom: 1px solid #e4e6e8;
    & :nth-child(1) {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #171721;
    }
    & :nth-child(2) {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #265cd4;
    }
  }
  & > div:nth-child(2) {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    & > div:nth-child(1) {
      margin-left: 20px;
      border-bottom: 1px solid #5f5f5f53;
      border-right: 1px solid #5f5f5f53;
    }
    & > div:nth-child(3) {
      margin-left: 20px;
    }
    & > div:nth-child(4) {
      border-top: 1px solid #5f5f5f53;
      border-left: 1px solid #5f5f5f53;
    }

    & > div {
      padding: 45px;
      display: flex;
      width: calc(50% - 112px);
      align-items: center;
      justify-content: center;
      div {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
        & :nth-child(1) {
          display: inline-block;
          width: 100px;
          font-size: 20px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          color: #171721;
        }
        & :nth-child(2) {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #8083a3;
        }
      }
    }
  }

  & > div:nth-child(3) {
    & > span {
      height: 1px;
      display: block;
      background-color: #5f5f5f53;
      width: 90%;
      margin: 0 5%;
    }
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    & > div:nth-child(even) {
      padding-left: 35px;
      & > div:nth-child(2) {
        padding-right: 20px;
        border-right: 1px solid #5f5f5f53;
      }
    }

    & > div {
      display: flex;
      flex-direction: row;
      padding: 20px 5px;
      justify-content: space-between;
      width: calc(50% - 45px);
      align-items: center;
      & > div:nth-child(1) {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: #171721;
      }
      & > div:nth-child(2) {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #8083a3;
      }
    }
  }
}
//通用
.content {
  background: #f2f6fc;
  // height: 2500px;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.content-box {
  width: 100%;
  background: #fff;
  border-radius: 6px;

  .title {
    box-sizing: border-box;
    width: 100%;
    font-size: 18px;
    border-bottom: 1px solid #e4e6e8;
    padding: 15px 0 15px 20px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #171721;
  }
}
//布局
.Info,
.class-duty,
.specialty-display {
  width: 40%;
}
.student-body-health,
.social-practice,
.participate-activities {
  width: 60%;
}

//学习及成绩
.study-score {
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    span {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #171721;
    }
    & > div {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .left-icon,
    .right-icon {
      background-color: #f0f2f5;
      margin: 0 5px;
      cursor: pointer;
    }
    .right-icon {
      margin-right: 30px;
    }
  }

  .student-score-content {
    .row-card {
      display: flex;
      flex-direction: column;
      margin: 30px 30px 30px 100px;
      & > div {
        display: flex;
        flex-direction: row;
        .card {
          width: 25%;
          .top-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            div {
              display: flex;
              flex-direction: column;
              padding-left: 20px;
            }
            span:nth-child(1) {
              font-size: 20px;
              font-family: PingFangSC, PingFangSC-Semibold;
              font-weight: 600;
              color: #171721;
            }
            span:nth-child(2) {
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #8083a3;
            }
          }
          .bottom-section {
            display: flex;
            flex-direction: column;
            span {
              display: inline-block;
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #8083a3;
            }
            span:nth-last-child(1) {
              font-size: 16px;
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              color: #000000;
              line-height: 36px;
            }
          }
        }
      }
      & > span {
        margin-top: 30px;
        width: 90%;
        height: 1px;
        background-color: #e4e6e8;
      }
    }
  }
}

//徽章
.badge {
  width: 100%;
}
.badge img {
  width: 54px;
  height: 60px;
}
.badge li {
  width: 25%;
  margin-top: 30px;
  float: left;
  height: 120px;
  text-align: center;
}
//特长展示
.specialty-display li {
  height: 60px;
  width: 100%;
  text-align: left;
  margin-top: 10px;
}
.progress {
  width: 80%;
  margin-left: 40px;
  margin-right: 200px;
}

.specialty-display li span:nth-child(3) {
  padding-left: 250px;
}

//班级值日
.date {
  width: 90%;
  height: 70px;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

//参加活动
.participate-activities div {
  position: relative;
  & > span {
    position: absolute;
    right: 20px;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #9d9ab9;
    line-height: 17px;
  }
}

table {
  width: 100%;
}
tr td,
th {
  width: 33%;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #050026;
  line-height: 20px;
  padding: 25px 0;
  border-bottom: 1px dashed #9d9ab9;
  &:first-child {
    padding-left: 30px;
  }
}
tr th {
  color: #9d9ab9;
}

.dot {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin: 13px 13px 13px 27px;
  border-radius: 50%;
  &.green {
    background: #5fdcb3;
  }

  &.orange {
    background: #ef8354;
  }

  &.pink {
    background: #fbb0bf;
  }
}
</style>
<style >
/* 班级值日日历 */
.el-calendar-table .el-calendar-day {
  height: 36px;
}
.el-calendar-table thead th {
  padding: 10px 0;
  color: #606266;
  font-weight: 400;
}
.el-calendar__body {
  padding: 12px 20px 0px;
}
</style>