<script setup>
const props = defineProps({
  text: {
    type: String,
    default: "开始",
  },
});

const emit = defineEmits(["click"]);

const handleClick = () => {
  emit("click");
};
</script>

<template>
  <button
    class="difficulty-start"
    hover-class="difficulty-start--hover"
    @click="handleClick"
  >
    <image
      class="difficulty-start__button"
      src="https://static.shelingxingqiu.com/shootmini/static/training-difficulty-design/btn.png"
      mode="widthFix"
    />
  </button>
</template>

<style scoped>
.difficulty-start {
  position: relative;
  width: 302rpx;
  height: 170rpx;
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0 auto;
}

.difficulty-start::after {
  border: 0;
}

.difficulty-start--hover {
  transform: translateY(2rpx) scale(0.99);
}

.difficulty-start__mascot {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 112rpx;
  transform: translateX(-50%);
}

.difficulty-start__button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
}

.difficulty-start__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58rpx;
  z-index: 3;
  color: #9f4d00;
  font-size: 64rpx;
  line-height: 76rpx;
  text-align: center;
  font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
  font-weight: 800;
  text-shadow: 0 3rpx 0 rgba(255, 245, 205, 0.78);
}
</style>
