train-student/src/layout/index/mainData.vue

<template>
  <div id="mainData">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="beijing">
          <el-row type="flex">
            <el-col :span="4" class="arrangeList" v-for="(i, index) in arrange" :key="index" @click.native="changeLesson(i)">
              <el-row style="text-align:center">
                <el-col :span="24">{{ i.day }}</el-col>
                <el-col :span="24">{{ i.date | getMD }}</el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-col :span="24" class="top">
            <el-col :span="12" class="time">时间</el-col>
            <el-col :span="12" class="date">
              <el-col :span="24"> {{ today.date }}</el-col>
              <el-col :span="24">{{ today.day }}</el-col>
            </el-col>
          </el-col>
          <template v-if="lesson">
            <el-col :span="24" class="context" v-for="(item, index) in lesson" :key="index">
              <el-col :span="12" class="contexttime">
                <span>{{ item.time }}</span>
              </el-col>
              <el-col :span="12" class="contextclass">
                <p>{{ item.subname }}</p>
                <p class="title">
                  <span @click="click(item)">{{ item.teaname }}</span>
                </p>
              </el-col>
              <el-col :span="24">
                <p></p>
              </el-col>
            </el-col>
          </template>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'mainData',
  props: {
    lesson: null,
    today: null,
    arrange: null,
  },
  components: {},
  data: () => ({}),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    changeLesson(date) {
      this.$emit('getLesson', date);
    },

    click(item) {
      this.$router.push({ path: 'teacherscore/index', query: { teaid: item.teaid, lessonid: item._id } });
    },
  },
  filters: {
    getMD(date) {
      let arr = date.split('-');

      //${arr[1]}-
      return `${arr[1]}-${arr[2]}`;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.info {
  text-align: center;
  padding: 7px 0 0 0;
}
.beijing {
  background-color: #f9fafc;
}
.top {
  margin: 10px 0 0 0;
}
/deep/.el-button {
  border-radius: 11px;
  padding: 10px 10px 10px 10px;
}
.time {
  background-color: #ffffff;
  height: 70px;
  font-size: 16px;
  padding: 0px 0px 0 50px;
  line-height: 60px;
  color: #222222;
}
.date {
  background-color: #ffffff;
  height: 70px;
  font-size: 16px;

  line-height: 30px;
  color: #222222;
}
.context {
  background-color: #ffffff;
  height: 102px;
  width: 92%;
  margin: 15px 15px 0 15px;
  color: #bbbbbb;
}

.contexttime {
  padding: 15px 20px 0 20px;
}
.contextclass {
  background-color: #ffffff;
}
.contextclass p {
  padding: 15px 0 0 0;
  text-align: center;
}
.title {
  color: blueviolet;
}
.arrangeList {
  background: #fff;
  padding: 10px 0;
  border-right: 1px dashed #f5f5f5;
}
.arrangeList:last-child {
  border-right: none;
}
</style>