ghjg-digital-twin/src/views/home/cpns/tools/HuiFangArea.vue

<template>
  <div class="huiFangArea" >
    <div class="cb-time">
      <div>
          <i class="cbt-icon"></i>
          <el-date-picker
                  v-model="timeRange.time1"
                  type="datetime"
                  placeholder="请选择"
                  size="small"
                  popper-class="date-popper"
                  class="date-picker-custom1"
                  value-format="YYYY-MM-DD HH:mm:ss"
          />
      </div>
      <div>
          <i class="cbt-icon"></i>
          <el-date-picker
                  v-model="timeRange.time2"
                  type="datetime"
                  placeholder="请选择"
                  size="small"
                  popper-class="date-popper"
                  class="date-picker-custom1"
                  value-format="YYYY-MM-DD HH:mm:ss"
          />
      </div>
      <div>
        <span>确定</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'huiFangArea'
}
</script>

<script setup>
  import {reactive} from "vue";
  import { ElDatePicker,ElMessage } from 'element-plus'
  import 'element-plus/es/components/message/style/css'
  import 'element-plus/es/components/date-picker/style/css'

  const timeRange = reactive({
    time1: '2023-05-06 12:30:00',
    time2: '2023-08-06 12:30:00',
  })
</script>

<style lang="scss" scoped>
.huiFangArea{
  position: absolute;
  top: 10vh;
  right: 30vh;
  width: 20vh;
  height: 150px;
  background: url('@/assets/imgs/area/bg.png') no-repeat;
  background-size: 100% 100%;
  .cb-time {
    width: 100%;
    height: 30%;
    div{
      margin: 0 auto;
      height: 100%;
      width: 80%;
      display: flex;
      align-items: center;
      align-content: center;
      .cbt-icon{
          display: block;
          width: 20px;
          height: 13px;
          background: url('@/assets/imgs/area/time.png') no-repeat;
          background-size: 100% 100%;
         }
    }
    span{
      margin: 0 auto;
      height: 30px;
      width: 40%;
        text-align: center;
      line-height:30px;
      font-size: 11px;
      background: url('@/assets/imgs/area/button.png') no-repeat;
      background-size: 100% 100%;
    }

  }
}
</style>