<script setup>
import navBar from '@/components/navBar.vue';

const ASSETS = Object.freeze({
  bg: '/static/second/bg.webp',
  info: '/static/second/info.webp',
  title: '/static/second/title.webp',
  jdt: '/static/second/jdt.webp',
  next: '/static/second/next.webp',
});

const handleNext = () => {
  uni.navigateTo({
    url: '/pages/second/part1'
  });
};
</script>

<template>
  <view class="container">
    <navBar />
    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 背景 -->
      <image class="bg-img" :src="ASSETS.bg" mode="aspectFill" />

      <!-- 标题 -->
      <view class="title-area">
        <image class="title-img" :src="ASSETS.title" mode="widthFix" />
      </view>

      <!-- 右侧信息区域 -->
      <view class="info-area">
        <image class="info-img" :src="ASSETS.info" mode="scaleToFill" />
      </view>

      <!-- 底部区域 -->
      <view class="bottom-area">
        <image class="progress-bar" :src="ASSETS.jdt" mode="scaleToFill" />
        
        <view class="next-btn-wrapper" @click="handleNext">
          <image class="next-btn" :src="ASSETS.next" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.main-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.title-area {
  position: absolute;
  top: 7vh;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;

  .title-img {
    width: 240rpx;
    height: auto;
  }
}

.info-area {
  position: absolute;
  top: 48%;
  right: 22rpx;
  transform: translateY(-45%);
  z-index: 10;
  display: flex;
  justify-content: flex-end;

  .info-img {
    width: 440rpx;
    height: 780rpx;
  }
}

.bottom-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 180rpx;
  padding: 40rpx;
  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  background: linear-gradient(180deg, #73D8FF 0%, #3498F4 100%);
  border-radius: 40rpx 40rpx 0 0;
  border-top: 4rpx solid #CCECFD;

  .progress-bar {
    position: absolute;
    left: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 428rpx;
    height: 56rpx;
  }

  .next-btn-wrapper {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 230rpx;
    height: 72px;
    transition: transform 0.2s ease;
    align-self: auto;
    margin: 0;

    .next-btn {
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (min-width: 768px) {
  .title-area {
    top: 10vh;
    .title-img {
      width: 20vw;
    }
  }

  .info-area {
    right: 10vw;
    .info-img {
      width: 440rpx;
      height: 740rpx;
    }
  }

  .bottom-area {
    bottom: 10vh;
    
    .progress-bar {
      width: 30vw;
    }

    .next-btn-wrapper {
      right: 10vw;
      .next-btn {
        width: 15vw;
      }
    }
  }
}
</style>
