<template>
  <div class="callnames">
    <m-header />

    <van-cell class="title" title-class="title-content">
      <template slot="default">孙老师</template>
      <template slot="title">武汉小学乐团·长笛基础课</template>
      <template slot="label">
        <p class="time">09月12日(星期一) 13:00-13:45</p>
        <p class="address">
          <van-icon name="location" />
          湖北省武汉市红领巾小学
        </p>
      </template>
    </van-cell>

    <div class="name-info">
      <span>共有：30</span>
      <span>实有：30</span>
      <span>请假：30</span>
    </div>

    <div class="section">
      <van-cell-group v-for="i in 6" :key="i">
        <van-cell class="btn-group" :center="true" :border="false">
          <template slot="icon">
            <!-- <img class="logo" src="http://dev.dayaedu.com/img/teacher1.91bf990d.png" alt=""> -->
          </template>
          <template slot="title">阿曼湾</template>
          <template slot="label"><span>长笛</span><span>合奏课1班</span></template>
        </van-cell>
        <van-cell class="btn-group">
          <van-button round type="danger">请假</van-button>
          <van-button round type="primary">未到</van-button>
          <van-button round type="info">到课</van-button>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="button-group">
      <van-button type="default">全到</van-button>
      <van-button type="primary">点名完成</van-button>
    </div>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
export default {
  name: "callnames",
  components: { MHeader },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.title {
  padding: 0.16rem;
}
.title-content {
  font-size: 0.18rem !important;
  font-weight: bold;
  .van-cell__label {
    font-weight: 400;
    color: @mFontColor;
    margin-top: 0.06rem;
    .time {
      font-size: 0.16rem;
    }
    .address {
      padding-top: 0.03rem;
      font-size: 0.14rem;
      display: flex;
      align-items: center;
    }
  }
  .van-icon-location {
    margin-right: 0.03rem;
    color: @mColor;
  }
}
/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}
/deep/.van-cell__value,
/deep/.van-cell__label {
  color: @sFontColor;
}
/deep/.van-cell__label {
  margin-top: 0;
  span {
    padding-right: 0.1rem;
  }
}
.name-info {
  color: @mFontColor;
  padding: 0.09rem 0.16rem;
  span {
    padding-right: 0.15rem;
  }
}
.logo {
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.12rem;
}
.btn-group {
  &:first-child {
    padding-bottom: 0.12rem;
  }
  &:last-child {
    padding-top: 0;
    padding-left: 0.63rem;
  }
  .van-button {
    padding: 0.04rem 0.24rem;
    height: auto;
    line-height: 1.5;
    font-size: 0.16rem;
    margin-right: 0.16rem;
    &:last-child {
      margin-right: 0;
    }
  }
  .van-button--danger {
    background-color: @redColor;
    border: 1px solid @redColor;
  }
  .van-button--primary {
    background-color: #ffc10d;
    border: 1px solid #ffc10d;
  }
}
.section {
  margin-bottom: 0.82rem;
}

.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  box-shadow: 0 0.02rem 0.07rem 0 rgba(0, 0, 0, 0.16);
  display: flex;
  .van-button {
    flex: 1;
    height: 0.52rem;
    line-height: 0.5rem;
    font-size: 0.16rem;
  }
  .van-button--default {
    color: @mFontColor;
  }
  .van-button--primary {
    background: @mColor;
    border-color: @mColor;
  }
}
</style>
