luojigou_xcx_agent/src/pages/promoted/components/SubmitDialog.vue

<template>
  <van-overlay :z-index='50' :show="submitDialogShow" class="submit-dialog" @click="$emit('close-submit-doalog')">
    <view class="wrapper">
      <view class="wrapper-box" >
        <image class="performance" :src="require('@/static/common/performance.png')" />
        <scroll-view 
          class="scroll-view"
          scroll-y
        >
           <view class="records" >
              <view class="records-item" v-for="item in babyInfoList" :key="item.id">
                <image class="ava" :src="item.headImg" />
                <view class="name" >{{item.babyName}}</view>
                <view class="school" >
                  {{item.schoolName}}-{{ item.classLevel | teferClass}}
                </view>
              </view>
            </view>
        </scroll-view>
        <view class="submit-area" >
          <view class="submit-btn" @click="$emit('submit')">
            确认提交
          </view>
        </view>
      </view>
    </view>
  </van-overlay>
</template>

<script>
export default {
  name: 'submit-dialog',
  props: {
    submitDialogShow: {
      type: Boolean,
      default: false
    },
    babyInfoList: {
      type: Array,
      require: true
    }
  },
  filters: {
    teferClass ( level ) {
      switch (level) {
        case -1:
          return '托班'
        case 0:
          return '小班'
        case 1:
          return '中班'
        case 2:
          return '大班'
      }
    }
  },
  methods: {
    onClickHide () {
      console.log('2222');
    }
  }
  
}
</script>

<style lang="less" scoped>
.submit-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  .wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .wrapper-box {
      position: relative;
      white-space: pre-wrap;
      .performance {
        width: 672rpx;
        height: 888rpx;
      }
      .submit-area {
        width: 624rpx;
        height: 164rpx;
        position: absolute;
        left: 24rpx;
        bottom: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .submit-btn {
          width: 572rpx;
          height: 84rpx;
          background: #1677FF;
          border-radius: 200rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      .scroll-view {
        width: 619rpx;
        height: 526rpx;
        position: absolute;
        top: 158rpx;
        left: 24rpx;
        padding-top: 26rpx;
        box-sizing: border-box;
        .records {
          .records-item {
            height: 44rpx;
            display: flex;
            align-items: center;
            padding-left: 40rpx;
            box-sizing: border-box;
            margin-bottom: 36rpx;
            .ava {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
            }
            .name {
              font-size: 32rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              margin-left: 24rpx;
              margin-right: 20rpx;
              max-width: 160rpx;
              min-width: 96rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
            .school {
              min-width: 244rpx;
              max-width: 300rpx;
              padding-left: 18rpx;
              padding-right: 38rpx;
              box-sizing: border-box;
              height: 36rpx;
              line-height: 36rpx;
              background: #F2F4FF;
              border-radius: 18rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(22, 119, 255, 0.8);
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
          }
        }
      }
      .scroll-view ::-webkit-scrollbar {
        width: 8rpx;  
        height: 8rpx; 
        color:#dddddd; 
      }
      .scroll-view ::-webkit-scrollbar-thumb {
        width: 4rpx;
        height: 106rpx;
        background: rgba(65, 143, 255, 0.4);
        border-radius: 2rpx;
      }
      // .scroll-view ::-webkit-scrollbar-track {
      //    width: 4rpx;
      //   height: 106rpx;
      //   // background: rgba(65, 143, 255, 0.4);
      //   background:red;
      //   border-radius: 2rpx;
      // }
    }
  }
}
</style>