pbl-app/src/views/eva/studentDetail.vue

<template>
  <!-- 学生详情 -->
  <div class="studentDetail" ref="tabs">
    <bar :tit="'学生记录'" :backPage="1"></bar>
    <div style="height: 50px;"></div>
    <!-- 顶部学生信息开始 -->

    <div class="top">
      <div class="UserInfo" style="flex: 1;">
        <div class="sInfo">
          <!-- {{ stuDetailList }} -->

          <!-- <van-dropdown-menu>
            <van-dropdown-item @change="handleUpdateStudent" v-model="studentInfo.userid" :options="stuDetailList" />
          </van-dropdown-menu> -->
          <div class="userName" @click="cutStuShowBtn">
            {{ studentInfo.name }}
            <img
              style="position: absolute;right: 0px;top: 50%;width: 25px; transform: translate(0,-50%);"
              src="../../assets/images/eva/arrow.png"
              alt=""
            />
            <!-- <van-icon size="14px" :name="cutListShow ? 'arrow-left' : 'arrow-down'" /> -->
          </div>

          <div class="sInfoList" v-if="cutListShow">
            <div class="stuBlock">
              <div
                class="stuCss"
                :style="{
                  background: studentInfo.userid == i.value ? '#3271ae' : '',
                  color: studentInfo.userid == i.value ? '#fff' : ''
                }"
                v-for="i in stuDetailList"
                @click="cutStu(i.value)"
                :key="i.value"
              >
                {{ i.text }}
              </div>
            </div>

            <!-- <div v-for="i in stuDetailList" :key="i.value">{{ i.text }}</div> -->
          </div>
        </div>
        <div class="cla">{{ studentInfo.cname }}</div>
        <!-- <div class="shade"></div> -->
        <!-- 遮罩层 -->
        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>

        <!-- <selectStyle
          ref="claSel"
          @shadeIsShow="shadeIsShow"
          @update-search="handleUpdateSearch"
          :listCont="termList"
          :tit="'请选择学期'"
          :choose="termData"
        ></selectStyle> -->
      </div>

      <div class="rig" v-if="!cutListShow">
        <div class="topBtnS" v-if="this.stuList.length">
          <div>
            <div class="btnBack" v-if="num" @click="upStu">
              <img class="img" src="../../assets/images/eva/zuo01.png" alt="" />
            </div>
            <div class="btnBack" v-else>
              <img class="img" src="../../assets/images/eva/zuo01.png" alt="" />
            </div>
          </div>
          <div>
            <div class="btnBack" v-if="num != stuList.length - 1" @click="nextStu">
              <img class="img" src="../../assets/images/eva/you02.png" alt="" />
            </div>
            <div class="btnBack" v-else>
              <img class="img" src="../../assets/images/eva/you02.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 顶部学生信息结束 -->

    <!-- 观察记录开始 -->
    <div style="position: relative;top: -15px;" v-if="!cutListShow">
      <div class="observe_tit">
        <div class="left">
          <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
          <div><span style="margin-right: 5px;">观察记录</span>({{ conList.length }})</div>
        </div>
        <div class="weiSelectCss">
          <van-dropdown-menu>
            <van-dropdown-item @change="handleUpdateSearch" v-model="filtrateData" title="维度" :options="filtrate" />
          </van-dropdown-menu>

          <van-dropdown-menu>
            <van-dropdown-item @change="handleUpdateSearch" v-model="termId" title="学期" :options="termList" />
          </van-dropdown-menu>

          <!-- <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" /> -->
        </div>
      </div>
      <!-- <div class="observe_box">
        <div
          class="observe_boxCon"
          v-for="(i, index) in filtrate"
          @click="addFil(i.id, index)"
          :class="{ active: activeItem === index }"
          :key="index"
        >
          <div class="txt">{{ i.name }}</div>
        </div>
        </div>
      </div> -->
      <!-- 观察内容开始 -->
      <van-swipe-cell :swipeable="true" v-show="TermRecord.length" v-for="(i, index) in TermRecord" :key="index">
        <div class="observe_content" @click.stop="recordContinue(i.rid)">
          <div class="observe_contentTit">
            {{ i.recordTit ? i.recordTit : '暂未设置标题' }}
            <!-- 观察内容 -->
          </div>
          <div class="observe_contentBir">
            <div>{{ i.username }}</div>
            <div>{{ i.recordDate }}</div>
          </div>
          <div class="observe_contentTxt">
            {{ i.recordContent }}
          </div>
        </div>
        <template #right>
          <div class="observe_contentDel" @click="delPop(i.rid)">
            <img src="../../assets/images/eva/del.png" style="width: 20px;height: 20px;" alt="" />
          </div>
          <!-- <van-button square text="删除" type="danger" class="delete-button" /> -->
        </template>
      </van-swipe-cell>
      <div v-show="!TermRecord.length" style="width: 100%;height: 10px;background-color: #F0F2F5;"></div>
      <div v-show="!TermRecord.length" class="observe_content observe_content2">
        <img src="../../assets//images/eva/rqq.png" alt="" />
        <div class="tit">暂无内容</div>
        <div class="tit2" @click="addRecord">快去添加新记录吧 ></div>
      </div>

      <!-- 观察内容结束 -->
    </div>

    <!-- 观察记录结束 -->

    <pop v-show="isShowMask">
      <template v-slot:tit>确定</template>
      <template v-slot:con>确定删除吗</template>
      <template v-slot:btn1>
        <div class="btn" style="color: rgba(136,136,136,1);" @click="isShowMask = false">取消</div>
      </template>
      <template v-slot:btn2>
        <div class="btn" style="color: rgba(251,67,25,1);" @click="delCon">确认</div>
      </template>
    </pop>

    <!-- 添加记录按钮开始 -->
    <div class="addRecord" @click="addRecord">
      <img src="../../assets/images/eva/add.png" alt="" />
    </div>
    <!-- 添加记录按钮结束 -->
  </div>
</template>

<script>
import { selectStudentDetail } from '@/api/eva'
import { selectClassStudent } from '@/api/eva'
// import { selectVeiDoo } from '@/api/eva'
import { selectSTEType } from '@/api/eva'

import { selectRecord } from '@/api/eva'
import { selectTerm } from '@/api/eva'

import { updateRecord } from '@/api/eva'
// 单选
// import selectStyle from './components/selectStyle.vue'
import bar from './components/bar.vue'
// 弹窗组件
import pop from './components/pop.vue'
export default {
  components: {
    bar,
    pop
    // selectStyle
  },
  data() {
    return {
      // value1: 0,
      // option1: [
      //   { text: '全部商品', value: 0 },
      //   { text: '新款商品', value: 1 },
      //   { text: '活动商品', value: 2 }
      // ],
      // 遮罩层
      isSelectShow: false,

      // 切换学生list
      cutListShow: false,

      // activeItem: null,
      // 这个是本学期总条数,单独写一个是因为他不因为观察记录的选择而改变
      conList: [],
      // 筛选项
      filtrate: [],
      // 纬度筛选项选择数据
      filtrateData: '',
      // 学生信息
      studentInfo: {},

      // 请求筛选条件
      fil: [],

      // 班级学生列表，左右切换用
      stuList: [],
      stuDetailList: [],

      // 学生id
      stuId: '',
      classId: '',

      // 传参班级数据
      classInfo: this.$route.query,
      num: null,

      // 弹窗的
      isShowMask: false,
      delRid: '',

      // 学期列表
      termList: [],
      // 学期筛选框所选择的数据
      termId: '',
      // 学期重置储存
      termData: '',

      // 记录渲染数据
      TermRecord: [],

      timeOutEvent: 0,
      scorllTaps: null
    }
  },
  methods: {
    // 获取学生信息
    getData() {
      const data = {
        uid: this.stuId
      }

      selectStudentDetail(data).then(res => {
        this.studentInfo = res[0][0]
        console.log('获取学生信息', this.studentInfo)
      })

      // 获取所有学生记录总条数
      this.selectCordS()
    },

    // 获取学期记录总条数
    selectCordS() {
      const data4 = {
        uid: this.stuId,
        trm: this.termId,
        txt: ''
      }
      // console.log('data4', data4)
      selectRecord(data4).then(res => {
        // console.log('获取所有学生记录', res[0])
        this.conList = res[0]
      })
    },

    // 获取筛选框
    selectVei() {
      const data3 = {
        org: this.$store.state.user.userinfo.org,
        oid: this.$store.state.user.userinfo.organizeid
      }
      // console.log('获取筛选项22222222', data3)
      selectSTEType(data3).then(res => {
        // this.filtrate = res[0]
        var ftype = res[0] // 公共父级分类
        var stype = res[1] // 公共子级分类
        var sctype = res[2] // 该学校子级分类
        var fctype = res[3] // 该学校父级分类
        var fotype = res[4] // 组织父级分类
        var sotype = res[5] // 组织子级分类
        var allfType = []
        var allsType = []
        if (fotype.length == 0 && sotype.length == 0) {
          if (fctype.length == 0 && sctype.length == 0) {
            for (var i = 0; i < ftype.length; i++) {
              allfType.push(ftype[i])
            }
            for (var i = 0; i < stype.length; i++) {
              allsType.push(stype[[i]])
            }
          } else {
            for (var i = 0; i < fctype.length; i++) {
              allfType.push(fctype[i])
            }
            for (var i = 0; i < sctype.length; i++) {
              allsType.push(sctype[[i]])
            }
          }
        } else {
          for (var i = 0; i < fotype.length; i++) {
            allfType.push(fotype[i])
          }
          for (var i = 0; i < sotype.length; i++) {
            allsType.push(sctysotypepe[[i]])
          }
        }
        allsType.forEach((e, index) => {
          let a = { value: '', text: '' }
          a.value = e.id
          a.text = e.name
          this.filtrate.push(a)
        })
        this.filtrate.unshift({ value: '', text: '全部' })
        // this.filtrate = allsType
        // this.filtrate.forEach(e => {
        //   e.name=text
        //   e.id=value
        // }
        console.log('filtrate', this.filtrate)
      })
    },

    // 获取班学生列表
    getStuList() {
      this.stuList = []
      const data2 = {
        cid: this.classId
      }
      selectClassStudent(data2).then(res => {
        res[0].forEach(e => {
          this.stuList.push(e.id)
        })
        // console.log('学生列表', res[0])
        res[0].forEach(e => {
          let a = { value: '', text: '' }
          a.value = e.id
          a.text = e.name
          this.stuDetailList.push(a)
        })
        // console.log('学生列表', this.stuDetailList)
        // console.log('获取班学生列表', this.stuList)
        // 查询学生在数组中的位置
        this.num = this.stuList.indexOf(this.stuId)
      })
    },

    // 获取学期筛选框
    selTerm() {
      this.termList = []
      selectTerm().then(res => {
        console.log('获取学期筛选框', res[0])
        res[0].forEach(e => {
          if (e.defaultC === 1) {
            this.termData = e.id
            this.termId = e.id
          }
          const a = { value: '', text: '' }
          a.value = e.id
          a.text = e.name
          this.termList.push(a)
        })
        // console.log('this.termData', this.termData)
        // this.termList = res[0]
        // res[0].forEach((e, index) => {
        //   var val = { value: '', text: '' }
        //   val.value = e.id
        //   val.value.text = e.name
        //   this.termList.push(val)
        // })
        // console.log('this.termList', this.termList)
        this.getData()
        this.getTermRecord()

        // 获取左右切换的学生列表
        // console.log('this.classId', this.classId)
        if (this.classId) {
          this.getStuList()
        }

        // console.log('this.termList', this.termList)
      })
    },
    // 上一个
    upStu() {
      this.filtrateData = ''
      // 判断学生在数组中的位置，获取班学生列表有初始值
      // this.activeItem = null
      // 刷新学期
      // this.termData.splice(0, 1, this.termId)
      this.termId = this.termData

      this.num = this.num - 1
      if (this.num >= 0) {
        this.stuId = this.stuList[this.num]
        localStorage.setItem('userId', this.stuList[this.num])

        this.getTermRecord()
        // 更新学生信息
        selectStudentDetail({ uid: this.stuId }).then(res => {
          this.studentInfo = res[0][0]
        })
      }
      this.selectCordS()
    },
    // 下一个
    nextStu() {
      this.filtrateData = ''

      // this.activeItem = null
      // 刷新学期
      // this.termData.splice(0, 1, this.termId)
      this.termId = this.termData

      this.num = this.num + 1
      if (this.num <= this.stuList.length - 1) {
        this.stuId = this.stuList[this.num]
        // console.log(this.stuId)
        localStorage.setItem('userId', this.stuList[this.num])

        this.getTermRecord()

        selectStudentDetail({ uid: this.stuId }).then(res => {
          this.studentInfo = res[0][0]
          // console.log(this.studentInfo)
        })
      }
      this.selectCordS()
    },
    // 左滑动删除弹框显示
    delPop(e) {
      this.delRid = e
      this.isShowMask = true
    },
    // 删除数据
    delCon() {
      // return console.log(this.delRid)
      const data = [{ rid: this.delRid }]
      updateRecord(data).then(res => {
        // console.log('删除数据', res)

        if (res === 1) {
          this.$toast({
            message: '删除成功',
            type: 'success'
          })
          this.isShowMask = false
          this.getTermRecord()

          setTimeout(() => {
            this.getData()
          }, 500)
        } else {
          this.$toast({
            message: '删除失败',
            type: 'fail'
          })
        }
      })
    },
    // 筛选按钮
    // addFil(e, index) {
    //   // 同一个点击第二次时取消选择
    //   if (this.activeItem === index) {
    //     this.activeItem = null
    //     e = ''
    //   } else {
    //     this.activeItem = index
    //   }

    //   const data4 = {
    //     uid: this.stuId,
    //     trm: this.termData[0],
    //     txt: e
    //   }
    //   // console.log(data4)
    //   selectRecord(data4).then(res => {
    //     // console.log('获取所有学生记录', res)
    //     this.TermRecord = res[0]
    //   })
    // },
    // 父组件调用子组件方法，选择学期后关闭select框
    fuClick1() {
      this.isSelectShow = false
      this.cutListShow = false

      // this.selectCordS()
      // this.$refs.claSel.close()
      // this.$refs.weiSel.close()
    },

    // 子组件调用父组件方法显示遮罩层
    shadeIsShow() {
      this.isSelectShow = true
    },
    // 子组件调用父组件，进行学期查询
    handleUpdateSearch() {
      this.isSelectShow = false
      // 获取筛选学生记录
      this.getTermRecord()
      // 获取学期记录总条数
      this.selectCordS()
    },
    cutStuShowBtn() {
      this.cutListShow = true
      this.isSelectShow = true
    },
    cutStu(e) {
      this.filtrateData = ''
      // this.activeItem = null
      // 刷新学期
      // this.termData.splice(0, 1, this.termId)
      this.termId = this.termData

      // this.num = this.num + 1
      // if (this.num <= this.stuList.length - 1) {

      this.stuId = e
      this.num = this.stuList.indexOf(this.stuId)

      // console.log(this.stuId)
      localStorage.setItem('userId', e)
      this.getTermRecord()
      selectStudentDetail({ uid: this.stuId }).then(res => {
        this.studentInfo = res[0][0]
        this.cutListShow = false
        this.isSelectShow = false
        // console.log(this.studentInfo)
      })
      // }
      this.selectCordS()
    },

    // handleUpdateStudent() {
    //   console.log('切换学生')
    //   this.filtrateData = ''

    //   // this.activeItem = null
    //   // 刷新学期
    //   this.termData.splice(0, 1, this.termId)

    //   // this.num = this.num + 1
    //   // if (this.num <= this.stuList.length - 1) {
    //   this.stuId = this.studentInfo.userid
    //   // console.log(this.stuId)
    //   localStorage.setItem('userId', this.studentInfo.userid)

    //   this.getTermRecord()

    //   selectStudentDetail({ uid: this.stuId }).then(res => {
    //     this.studentInfo = res[0][0]
    //     // console.log(this.studentInfo)
    //   })
    //   // }
    //   this.selectCordS()
    // },
    // 获取所有学生记录
    getTermRecord() {
      const data4 = {
        uid: this.stuId,
        trm: this.termId,
        txt: this.filtrateData
      }
      // return console.log('getTermRecord', data4)
      // console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
      selectRecord(data4).then(res => {
        // console.log('获取所有学生记录', res)
        this.TermRecord = res[0]
      })
    },
    // 添加记录按钮跳转
    addRecord() {
      // this.$router.push(`/studentEvaluate?shareShow=${0}&cid=${this.$route.query.cid}`)
      this.$router.push(`/studentEvaluate?shareShow=${0}`)
    },
    // 已经写过的记录卡片点击跳转
    recordContinue(e) {
      // this.$router.push(`/studentEvaluate?shareShow=${1}&rid=${e}&cid=${this.$route.query.cid}`)
      this.$router.push(`/studentEvaluate?shareShow=${1}&rid=${e}`)
    }
    // touchStart(e) {
    //   this.timeOutEvent = setTimeout(() => {
    //     this.timeOutEvent = 0
    //     const target = this.$refs.loop[e]
    //     target.style.display = 'block'
    //     if (e % 4 !== 0) {
    //       console.log(0)
    //       target.style.right = '0'
    //     }
    //   }, 500)
    //   return false
    // },
    // // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    // gtouchmove() {
    //   clearTimeout(this.timeOutEvent) // 清除定时器
    //   this.timeOutEvent = 0
    //   // alert('取消了')
    // },
    // touchend(e) {
    //   // 清除定时器

    //   clearTimeout(this.timeOutEvent)
    //   console.log(this.timeOutEvent)
    //   if (this.timeOutEvent !== 0) {
    //     // 这里写要执行的内容（尤如onclick事件）
    //     console.log('你这是点击，不是长按')
    //   } else {
    //     setTimeout(() => {
    //       const target = this.$refs.loop[e]
    //       target.style.display = 'none'
    //     }, 1000)
    //   }
    // },

    //   selectRecord(data4).then(res => {
    //     console.log('获取所有学生记录', res[0])
    //     this.conList = res[0]
    //   })
    //   // this.getTermRecord()
    // },
  },
  // beforeRouteEnter(to, from, next) {
  //   document.addEventListener(
  //     'touchmove',
  //     function(event) {
  //       console.log('event', event)
  //       event.preventDefault()
  //     },
  //     false
  //   )
  //   next(vm => {})
  // },
  mounted() {},
  created() {
    this.stuId = localStorage.getItem('userId')
    this.classId = localStorage.getItem('classId')
    // console.log(this.classId)
    this.selTerm()
    // 获取筛选框
    this.selectVei()
    // console.log('this.$route.query', this.$route.query)
  }
}
</script>

<style lang="scss" scoped>
.loopList {
  height: 20px;
  line-height: 20px;
  display: none;
  position: absolute;
  min-width: 80px;
  text-wrap: nowrap;
  font-size: 12px;
  border-radius: 5px;
  padding: 0 5px;
  background-color: #309cd6;
  top: -80%;
  color: #fff;
  // left: 0;
}
.btnBack {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.weiSelectCss {
  width: 100%;
  display: flex;
  font-size: 22px !important;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15%;
  border-bottom: 1px solid #e7e7e7;
}
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
  // padding-right: 20px;
  background: none;
  height: 1rem;
  // margin-left: 30px !important;
}

/deep/ .van-dropdown-item__content {
  border-radius: 0 0 10px 10px;
}

/deep/ .van-ellipsis {
  font-size: 14px;
}
/deep/ .van-dropdown-menu__title::after {
  border-color: transparent transparent #000 #000;
  opacity: 0.5;
}
/deep/ .van-dropdown-menu__title--active::after {
  border-color: transparent transparent currentColor currentColor;
}
/deep/ .van-cell__title,
.van-cell__value {
  font-weight: normal;
}

/deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #3b84fc;
}
/deep/ .van-dropdown-item__option--active {
  color: #3b84fc;
}
/deep/ .van-dropdown-menu__title {
  padding-left: 0;
}
/deep/ .van-dropdown-menu__title--active {
  color: #3b84fc;
}

.goods-card {
  margin: 0;
  background-color: #fff;
}
.backPage {
  // background-color: aquamarine;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  z-index: 98;
}
// .shade {
//   background-color: #005ccd;
//   position: absolute;
//   width: 100%;
//   height: 100vh;
// }
.delete-button {
  height: 100%;
}
.observe_contentDel {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.observe_content {
  // margin: 0 10px;
  width: 100%;
  min-height: 100px;
  // max-height: 95px;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  padding: 0 15px;
  overflow: hidden;
  background-color: #fff;

  .observe_contentTit {
    //   line-height: 20px;
    box-sizing: border-box;
    padding: 8px 0;
    font-weight: 550;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir {
    display: flex;
    // color: rgba(79, 79, 79, 1);
    color: rgba(0, 0, 0, 0.4);
    font-size: 10px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .observe_contentBir :first-child {
    margin-right: 10px;
  }
  .observe_contentTxt {
    margin-top: 5px;
    // color: rgba(16, 16, 16, 1);
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.studentDetail {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  //   顶部学生信息开始
  .top {
    margin: auto;
    width: 100vw;
    height: 140px;
    background-color: #005ccd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    color: #fff;
    .rig {
      display: flex;
      // width: 30%;
      height: 100%;
      justify-content: space-between;

      .topBtnS {
        width: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .UserInfo {
      display: flex;
      flex-direction: column;
      // height: 55px;
      justify-content: space-between;
      .sInfo {
        position: relative;
        display: flex;
        margin-bottom: 5px;
        /deep/.van-ellipsis {
          color: #fff;
          font-size: 18px;
        }
        .userName {
          width: 140px;
          position: relative;
          color: #ffffff;
          font-size: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: PingFangSC-regular;
          box-sizing: border-box;
          padding-right: 35px;
          display: flex;
          align-items: center;
        }
        .sInfoList {
          position: absolute;
          width: 100vw;
          bottom: -70px;
          transform: translate(0, calc(100% - 65px));
          left: -15px;
          z-index: 99;
          height: 90vh;
          color: #000;
          // opacity: 0.5;
          box-sizing: border-box;
          background-color: #fff;
          padding-bottom: 80px;
          overflow-y: scroll;
          .stuBlock {
            display: flex;
            width: 93%;
            margin: auto;
            // justify-content: space-between;
            flex-wrap: wrap;
            .stuCss {
              width: calc((100% - 20px) / 3);
              height: 30px !important;
              margin-top: 10px;
              display: flex;
              height: 30px;
              box-sizing: border-box;
              // padding: 4px 5px;
              justify-content: center;
              align-items: center;
              border-radius: 4px;
              margin-right: 10px;
              background: #f6fafb;
              color: rgba(0, 0, 0, 0.9);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-style: normal;
            }
            .stuCss:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }
      .cla {
        overflow: hidden;
        width: 100%;
        font-weight: 200;
        // overflow-wrap: break-word;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 20px;
        line-height: 30px;
        font-size: 12px;
        color: #ffffff;
      }
      .dataNum {
        // width: 150px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        font-size: 16px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
  }
  //   顶部学生信息结束
  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    .img {
      width: 28px;
    }
  }

  //   观察记录开始
  .observe_tit {
    // position: relative;
    // top: -15px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
    align-items: center;
    border-radius: 15px 15px 0 0;
    // transform: translate(0, -10px);
    background-color: #fff;
    justify-content: space-between;
    font-weight: bold;
  }
  .observe_box {
    width: 100%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .observe_boxCon {
      position: relative;
      // width: calc(100% / 4 - (5px * 3));
      // width: calc(100% / 5);
      width: auto;
      height: 30px;
      border-radius: 4px;
      background-color: #fff;
      color: rgba(153, 152, 152, 1);
      font-size: 12px;
      font-family: Roboto;
      border: 1px solid rgba(231, 231, 231, 1);
      margin-bottom: 8px;
      margin-right: 10px;
      box-sizing: border-box;
      padding: 5px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    // .observe_boxCon:nth-child(4n) {
    //   margin-right: 0;
    // }
    .active {
      background-color: #e0eafb;
      color: #0061ff;
    }
    // .observe_boxSelect {
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   flex-wrap: wrap;

    //   //   height: 100%;
    // }
  }
  //   观察记录结束

  //    观察内容开始

  .observe_content2 {
    margin-top: 10px;
    border: none;
    height: 250px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    .tit {
      margin: 5px 0;
      color: rgba(0, 0, 0, 0.4);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
    }
    .tit2 {
      color: #3681fc;
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
    }

    img {
      width: 80px;
      height: 80px;
    }
  }
  // 观察内容结束

  // 添加记录按钮开始
  .addRecord {
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 14px;
    font-family: Microsoft Yahei;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    img {
      width: 16px;
      height: 16px;
    }
  }
  //  添加记录按钮结束
}
</style>