chuGuoYuJian/AI换装/src/components/OvertimeView.vue

<template>
  <div class="crafting">
    <div class="content">
      <img class="time" src="@/assets/img/OvertimeView/time.png" alt="" />
      <img class="tip" src="@/assets/img/OvertimeView/tip.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.crafting {
  width: 100%;
  height: 100%;
  max-width: 500px;
  background: url(@/assets/img/CraftingView/craftingBg.jpg);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content {
    width: 85%;
    height: 65%;
    background: url(@/assets/img/BusyView/busyBg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: -10%;
    padding-left: 10%;
    margin-top: -10%;

    .time {
      width: 10%;
    }

    .tip {
      width: 50%;
    }
  }

  .resetBtn {
    width: 70%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(@/assets/img/BusyView/resetBtnBg.png);
    background-size: 100% 100%;
    margin-top: 20px;
  }
}
</style>