<template>
  <div class="layout-avatar relative">
    <v-image :src="src" class="screen" :radius="radius" :backgroundColor="backgroundColor">
      <svg-animate v-if="dressPlaySrc" :hover="true" size="100%" :default-src="dressSrc" :src="dressPlaySrc" class="absolute layout-avatar-dress"></svg-animate>
      <div v-else-if="dressSrc" class="absolute layout-avatar-dress">
        <v-image :src="dressSrc" mode="scaleToFill" backgroundColor="transparent" class="screen"></v-image>
      </div>
    </v-image>
  </div>
</template>

<script>
import {
  vImage,
  svgAnimate
} from '$components';
import props from '../props';
export default {
  name: "layout-avatar",
  props,
  components:{
    vImage,
    svgAnimate
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>