TV2/src/components/newStudent.vue

<template>
  <el-dialog title="" class="sss" :visible.sync="studentInfo.dialogVisible" :close-on-click-modal="false">
    <div :class="[{'newStudentContainer':true}]">
      <div class="info">
        <ul :class="[{'many':studentInfo.Rs.length > 6},{'two':studentInfo.Rs.length >= 2 && studentInfo.Rs.length  <= 6}]">
          <li v-for="(s,i) in studentInfo.Rs" v-if="i < 12"
              :class="[{'bigLi':studentInfo.Rs.length <= 4},{'smallLi':studentInfo.Rs.length > 4}]">
            <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
            <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head">
            <span class="names">{{ s.Name }}</span>
          </li>
        </ul>

      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      percent: 0,
      totalTime: 0,
      sumTime: 4,
      bg: 0,
    };
  },
  props: ['studentInfo'],
  watch: {
    studentInfo: {
      handler(newName, oldName) {
        let that = this;
        if (newName.Rs != '') {
          if (newName.Rs.length > 3) {
            that.bg = 0
          } else {
            that.bg = 1
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>

@mixin cube {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

/*成就彩蛋*/
/deep/ .el-dialog {
  width: 80%;
  height: 6rem;
  background: none;
  box-shadow: none;
  border: none;
  padding-bottom: 1rem;
}

/deep/ .el-dialog__header {
  display: none;
}

.newStudentContainer {
  height: 6rem;
  margin-top: 0;
  background: url("../assets/imgs/newStudent/bg.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

ul {
  @include cube;
  width: 70%;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-grow: 1;
  padding-top: 15%;

  &.two {
    justify-content: space-around;
    padding-top: 16%;
    width: 70%;

    .bigLi img {
      width: 1.9rem;
    }
  }

  &.many {
    justify-content: space-around;
    // justify-content: space-between;
    padding-top: 11.5%;
  }

  li {
    height: 2rem;
    overflow: hidden;

    img {
      @include cube;
      width: 1.6rem;
      border-radius: 250rem;

      &.girl {
        border: 2px solid #EA26EA;
      }

      &.boy {
        border: 2px solid #39B6FF;
      }
    }

    &.smallLi {
      height: 2rem;

      img {
        width: 1.6rem;
      }
    }

    &.bigLi {
      height: 3rem;

      img {
        width: 2.3rem;
      }
    }


  }

  .names {
    @include cube;
    width: 1.6rem;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.25rem;
    text-align: center;
    padding: 0% 1%;
    border-radius: 250rem;
    position: relative;
    bottom: 0.3rem;
    color: #fff;
    line-height: 0.3rem;
  }
}

</style>