<template>
  <view class="container">
    <view class="navigation-bar">
      <view class="back-button" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="title">赚元气小游戏合集</text>
    </view>
    <view class="content">
      <view class="button-container">
        <button class="button" @click="navigateToAbout">抽奖小游戏</button>
        <button class="button" @click="navigateToAboutt">翻牌小游戏</button>
        <button class="button" @click="navigateToAbout">小游戏</button>
        <button class="button" @click="navigateToAbout">小游戏</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/lottery/lottery'
      });
    },
	navigateToAboutt() {
	  uni.navigateTo({
	    url: '/pages/lottery/yxt'
	  });
	},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url('https://tk.illlt.com:759/api.php?type=%E6%89%8B%E6%9C%BA%E4%BA%8C%E6%AC%A1%E5%85%83/%E6%89%8B%E6%9C%BA%E7%AB%AF-%E5%8A%A8%E6%BC%AB%E5%9B%BE%E7%89%87/%E5%8A%A8%E6%BC%AB%E5%9B%BE%E7%89%871%E5%88%86%E5%8C%BA') no-repeat center center;
  background-size: cover;
  animation: fadeIn 1s ease-in-out;
}

.navigation-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.back-icon {
  font-size: 24px;
  color: #000000;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-left: 20px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button {
  padding: 12px 24px;
  font-size: 16px;
  color: #000000;
  background-color: #ffaaff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  animation: scaleIn 1s ease-in-out;
}

.button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>