<script setup>
const ASSETS = Object.freeze({
    bg: '/static/second/part4/start/bg.webp',
    battery1: '/static/second/part4/start/1.webp',
    battery2: '/static/second/part4/start/2.webp',
    battery3: '/static/second/part4/start/3.webp',
    battery4: '/static/second/part4/start/4.webp',
    Info1: '/static/second/part4/start/1-info.webp',
    Info2: '/static/second/part4/start/2-info.webp',
    Info3: '/static/second/part4/start/3-info.webp',
    Info4: '/static/second/part4/start/4-info.webp',
    battery: '/static/second/part4/start/battery.webp',
    dragBg: '/static/second/part4/start/drag-bg.webp',
    right: '/static/second/part4/start/right.webp',
    sz: '/static/sz.webp',
    jt: '/static/second/part4/start/jt.webp',
});
</script>

<template>
    <view class="container">
        <image class="bg-img" :src="ASSETS.bg" mode="aspectFill" />
        <view class="title">滤芯排序游戏</view>
        <view class="info">
            <view class="info-battery">
                <image class="battery-item1" :src="ASSETS.battery1" mode="scaleToFill" />
                <image class="info-icon1" :src="ASSETS.Info1" mode="scaleToFill" />
                <image class="battery-item2" :src="ASSETS.battery2" mode="scaleToFill" />
                <image class="info-icon2" :src="ASSETS.Info2" mode="scaleToFill" />
                <image class="battery-item3" :src="ASSETS.battery3" mode="scaleToFill" />
                <image class="info-icon3" :src="ASSETS.Info3" mode="scaleToFill" />
                <image class="battery-item4" :src="ASSETS.battery4" mode="scaleToFill" />
                <image class="info-icon4" :src="ASSETS.Info4" mode="scaleToFill" />
            </view>
            <!-- 右侧交互区域 -->
            <image class="drag-battery" :src="ASSETS.battery" mode="scaleToFill" />
            <image class="arrow-icon" :src="ASSETS.jt" mode="scaleToFill" />
            <image class="finger-icon" :src="ASSETS.sz" mode="scaleToFill" />
            <view class="battery-container"></view>
            <image class="drag-bg" :src="ASSETS.dragBg" mode="scaleToFill" />
            <view class="hint-text">拖到这里！</view>
            <image class="right-icon" :src="ASSETS.right" mode="scaleToFill" />
        </view>
        <view class="desc">
            <view class="desc-text">后置碳棒在第四层！</view>
            <view class="desc-text">它能改善水的口感，让水更甘甜！</view>
            <view class="desc-text">按照水流方向排列</view>
            <view class="desc-text">每一层都很重要</view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

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

.title {
    margin-top: 228rpx;
    margin-bottom: 30rpx;
    justify-content: space-between;
    align-items: center;
    color: #2D4B5D;
    font-size: 48rpx;
    font-weight: 600;
    text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;
    z-index: 1;
}

.info {
    width: 686rpx;
    height: 720rpx;
    background: #FFF;
    border-radius: 24rpx;
    border: 4rpx solid #000;
    margin-top: 20rpx;
    z-index: 1;
    position: relative;

    .info-battery {
        margin: 32rpx auto 32rpx 10rpx;
        border-radius: 12rpx;
        width: 420rpx;
        height: 654rpx;
        background: #E4F6FD;
        position: relative;

        .battery-item1 {
            position: absolute;
            left: 40%;
            transform: translateX(-50%);
            top: -100rpx;
            width: 364rpx;
            height: 362rpx;
        }

        .battery-item2 {
            position: absolute;
            left: 38%;
            transform: translateX(-50%);
            top: 186rpx;
            width: 312rpx;
            height: 106rpx;
        }

        .battery-item3 {
            position: absolute;
            left: 38%;
            transform: translateX(-50%);
            top: 276rpx;
            width: 330rpx;
            height: 248rpx;
        }

        .battery-item4 {
            position: absolute;
            left: 40%;
            transform: translateX(-50%);
            top: 388rpx;
            width: 356rpx;
            height: 354rpx;
        }

        .info-icon1 {
            position: absolute;
            right: 20rpx;
            top: 40rpx;
            width: 70rpx;
            height: 70rpx;
        }

        .info-icon2 {
            position: absolute;
            right: 20rpx;
            top: 200rpx;
            width: 72rpx;
            height: 72rpx;
        }

        .info-icon3 {
            position: absolute;
            right: 20rpx;
            top: 350rpx;
            width: 66rpx;
            height: 78rpx;
        }

        .info-icon4 {
            position: absolute;
            right: 16rpx;
            top: 518rpx;
            width: 74rpx;
            height: 82rpx;
        }
    }

    .drag-battery {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        width: 220rpx;
        height: 200rpx;
        z-index: 2;
    }

    .arrow-icon {
        position: absolute;
        right: 148rpx;
        top: 176rpx;
        width: 52rpx;
        height: 148rpx;
        z-index: 3;
    }

    .finger-icon {
        position: absolute;
        top: 100rpx;
        right: 0;
        width: 170rpx;
        height: 170rpx;
        z-index: 2;
    }

    .battery-container {
        background: #B1B5B7;
        box-shadow: 0 10rpx 0 0 #00000040 inset;
        border: 4rpx solid #000;
        border-radius: 12rpx;
        position: absolute;
        right: 24rpx;
        top: 290rpx;
        width: 184rpx;
        height: 86rpx;
        z-index: 2;
    }

    .drag-bg {
        position: absolute;
        right: 24rpx;
        top: 408rpx;
        width: 184rpx;
        height: 86rpx;
        z-index: 2;
    }

    .hint-text {
        color: #000000;
        font-weight: 600;
        font-size: 32rpx;
        position: absolute;
        right: 30rpx;
        top: 432rpx;
        z-index: 3;
    }

    .right-icon {
        position: absolute;
        right: 58rpx;
        top: 524rpx;
        width: 140rpx;
        height: 140rpx;
        z-index: 3;
    }
}

.desc {
    margin-top: 28rpx;
    row-gap: 12rpx;
    border-radius: 24rpx;
    border: 4rpx solid #000;
    background: #E4F6FD;
    width: 528rpx;
    height: 260rpx;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .desc-text {
        color: #2D4B5D;
        font-size: 34rpx;
        font-weight: 600;
        text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;
    }
}
</style>
