<template>
    <div class="watching">
        <img src="@/assets/png-zhuiju-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
        <div class="watching-content">
            <van-sticky @change="changeSticky">
                <van-nav-bar
                    :class="{ isFixed: isFixed }"
                    title="消費記錄"
                    left-text=""
                    left-arrow
                    @click-left="back"
                />
            </van-sticky>

            <div class="py-[14px] px-[18px]">
                <div
                    v-for="i in 10"
                    :key="i"
                    class="wallet bg-[#20223C] flex h-[86px] items-center px-[14px] rounded-lg"
                >
                    <van-image
                        width="90"
                        height="58"
                        fit="cover"
                        src="https://p9.itc.cn/images01/20200808/f27ca5bb0a1c4e2d9b9df893f273a83c.jpeg"
                    />
                    <div class="flex-1 ml-[12px] h-[58px] flex flex-col justify-between overflow-hidden">
                        <div class="text-sm text-white van-ellipsis">
                            少帥，夫人的深你不配少帥，夫人的深你不配少帥，夫人的深你不配
                        </div>
                        <div class="text-xs text-[#797A8A]">11-20 12:10</div>
                    </div>
                    <div class="h-[58px] flex flex-col justify-between items-end ml-[12px]">
                        <div class="text-[#00FFE4] text-xs">兑换第8集</div>

                        <div class="text-[18px] text-white AlimamaShuHeiTi">-10</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
function back() {
    router.back()
}

const isFixed = ref(false)
function changeSticky(fixed) {
    isFixed.value = fixed
}
</script>

<style lang="less" scoped>
.watching {
    .watching-content {
        position: relative;
        z-index: 1;
    }
}

.van-nav-bar {
    --van-nav-bar-background: transparent;
    --van-border-width: 0;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;

    &.isFixed {
        --van-nav-bar-background: #11131e;
    }
}

.wallet + .wallet {
    margin-top: 14px;
}
</style>
