<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-zhiliang"></div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
//质量
@Component({
  name: 'zhiliang',
  components: {}
})
export default class zhiliang extends Vue {}
</script>

<style lang='scss' scoped>
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-zhiliang {
  background: url('~@/views/groupPage/images/进度调整策略评价.png') no-repeat;
  background-size: 100% 100%;
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-right: $size20 /* 20/192 */;
  right: 0;
  position: absolute;
  //size
  height: 2.864583rem /* 550/192 */;
  width: 2.083333rem /* 400/192 */;
  color: #eee;
}
</style>