
<template>
    <div id="_drag-container_"> <!-- 卡片展示 -->
        <div class="card-pos-box">
            <div class="content">
                <div class="card1" v-for="(item, idx) in 3">
                    <div class="show-wrapper">
                        <div class="pic-wrapper">
                            <img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png">
                        </div>
                        <h2 class="title">Mario</h2>
                        <div class="show-info">
                            <div class="show-info-item">
                                <svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
                                    <path
                                        d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
                                        fill="" p-id="1643"></path>
                                    <path
                                        d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
                                        fill="#FF5F5F" p-id="1644"></path>
                                    <path
                                        d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
                                        fill="#FFFFFF" p-id="1645"></path>
                                </svg>
                                132k
                            </div>
                            <div class="show-info-item">
                                <svg t="1690023393353" class="icon Watch-icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1798" width="128" height="128">
                                    <path
                                        d="M512 853.333333c-263.9872 0-477.866667-284.672-477.866667-341.230933C34.133333 471.3472 248.0128 170.666667 512 170.666667c263.918933 0 477.866667 303.445333 477.866667 341.435733C989.7984 568.900267 775.850667 853.333333 512 853.333333z m-6.144-521.1136c-127.658667 0-276.5824 60.279467-276.5824 187.938134s148.8896 174.318933 276.548267 174.318933 279.005867-46.660267 279.005866-174.318933-151.3472-187.938133-279.005866-187.938134z m2.594133 93.7984a79.325867 79.325867 0 0 0 79.223467 79.291734c10.376533 0 19.968-2.1504 29.013333-5.563734 0.341333 3.6864 1.297067 7.202133 1.297067 11.0592a113.220267 113.220267 0 1 1-226.542933 0 113.322667 113.322667 0 0 1 113.220266-113.3568c3.1744 0 6.178133 0.7168 9.216 0.989867-3.345067 8.6016-5.4272 17.749333-5.4272 27.579733z"
                                        fill="#85C2FF" p-id="1799"></path>
                                </svg>
                                12k
                            </div>
                        </div>
                    </div>
                    <div class="hover-wrapper">
                        <div class="hover-info">
                            <div class="info-item">
                                <span>13k</span>
                                <span class="info-item-title">Loveing</span>
                            </div>
                            <div class="line"></div>
                            <div class="info-item">
                                <span>14k</span>
                                <span class="info-item-title">Watching</span>
                            </div>
                        </div>
                        <button class="btn">查看更多</button>
                    </div>
                    <div class="background"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 心愿清单 -->
    <div id="checklist">
        <input id="01" type="checkbox" name="r" value="1" checked>
        <label for="01">Bread</label>
        <input id="02" type="checkbox" name="r" value="2">
        <label for="02">Cheese</label>
        <input id="03" type="checkbox" name="r" value="3">
        <label for="03">Coffee</label>
    </div>


</template>
            
<script lang="ts" setup >

</script>
<style lang="scss" scoped>
.card-pos-box {
    width: 100%;
    margin: 150px 0;
}

.content {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.content .card1 {
    position: relative;
    cursor: pointer;
    height: 500px;
    margin: 0 80px;
}

.content .card1 .show-wrapper {
    z-index: 10;
    transition: 0.4s;
}

.content .card1 .show-wrapper .pic-wrapper {
    width: 300px;
    height: 300px;
    transition: 0.4s;
}

.content .card1 .show-wrapper .pic-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.content .card1 .show-wrapper .title {
    margin: 10px 0;
}

.content .card1 .show-wrapper .show-info {
    display: flex;
    flex-direction: row;
    color: #cccccc;
    justify-content: space-between;
}

.content .card1 .show-wrapper .show-info .show-info-item svg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.content .card1 .hover-wrapper {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transition: 0.5s;
}

.content .card1 .hover-wrapper .hover-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    font-size: 2vw;
}

.content .card1 .hover-wrapper .hover-info .info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
    font-size: 0.8vw;
    color: #cccccc;
}

.content .card1 .hover-wrapper .hover-info .line {
    width: 2px;
    height: 4vh;
    margin: 0 1vw;
    background: #cccccc;
}

.content .card1 .hover-wrapper .btn {
    width: 90%;
    margin-top: 1.5vh;
    border-radius: 50px;
    background-color: rgb(67, 119, 216);
    border: 0;
    font-size: 1vw;
    cursor: pointer;
    color: #fff;
}

.content .card1 .background {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    z-index: -1;
    transition: 0.5s;
    transform: scale(0.2, 0.9);
    opacity: 0;
    height: 80%;
    box-shadow: 0px 10px 32px 1px rgb(221, 219, 219);
    background-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 20%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%), url(http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.content .card1:hover .show-wrapper {
    transform: translateY(-25%);
}

.content .card1:hover .show-wrapper .pic-wrapper {
    transform: scale(0.8);
}

.content .card1:hover .show-wrapper .title {
    animation: nameAmt 0.5s ease-in-out forwards;
}

.content .card1:hover .show-wrapper .show-info {
    opacity: 0;
}

.content .card1:hover .hover-wrapper {
    animation: hoverWrapperAmt 0.5s ease-in-out forwards;
    display: flex;
    transform: translateY(-100%);
}

.content .card1:hover .background {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes nameAmt {
    0% {
        opacity: 0;
        text-align: center;
    }

    100% {
        opacity: 1;
        text-align: center;
        transform: translateY(-55%);
    }
}

@keyframes hoverWrapperAmt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*# sourceMappingURL=style.css.map */


#checklist {
    --background: #ffffff;
    --text: #414856;
    --check: #4f29f0;
    --disabled: #c3c8de;
    --width: 100px;
    --height: 140px;
    --border-radius: 10px;
    background: var(--background);
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    position: relative;
    box-shadow: 0 10px 30px rgba(#414856, 0.05);
    padding: 30px 45px;
    display: grid;
    grid-template-columns: 30px auto;
    align-items: center;

    label {
        color: var(--text);
        position: relative;
        cursor: pointer;
        display: grid;
        align-items: center;
        width: fit-content;
        transition: color 0.3s ease;

        &::before,
        &::after {
            content: "";
            position: absolute;
        }

        &::before {
            height: 2px;
            width: 8px;
            left: -27px;
            background: var(--check);
            border-radius: 2px;
            transition: background 0.3s ease;
        }

        &:after {
            height: 4px;
            width: 4px;
            top: 8px;
            left: -25px;
            border-radius: 50%;
        }
    }

    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        height: 15px;
        width: 15px;
        outline: none;
        border: 0;
        margin: 0 15px 0 0;
        cursor: pointer;
        background: var(--background);
        display: grid;
        align-items: center;

        &::before,
        &::after {
            content: "";
            position: absolute;
            height: 2px;
            top: auto;
            background: var(--check);
            border-radius: 2px;
        }

        &::before {
            width: 0px;
            right: 60%;
            transform-origin: right bottom;
        }

        &::after {
            width: 0px;
            left: 40%;
            transform-origin: left bottom;
        }

        &:checked {
            &::before {
                animation: check-01 0.4s ease forwards;
            }

            &::after {
                animation: check-02 0.4s ease forwards;
            }

            +label {
                color: var(--disabled);
                animation: move 0.3s ease 0.1s forwards;

                &::before {
                    background: var(--disabled);
                    animation: slice 0.4s ease forwards;
                }

                &::after {
                    animation: firework 0.5s ease forwards 0.1s;
                }
            }
        }
    }
}

@keyframes move {
    50% {
        padding-left: 8px;
        padding-right: 0px;
    }

    100% {
        padding-right: 4px;
    }
}

@keyframes slice {
    60% {
        width: 100%;
        left: 4px;
    }

    100% {
        width: 100%;
        left: -2px;
        padding-left: 0;
    }
}

@keyframes check-01 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }

    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }

    51% {
        width: 0px;
        top: 8px;
        transform: rotate(45deg);
    }

    100% {
        width: 5px;
        top: 8px;
        transform: rotate(45deg);
    }
}

@keyframes check-02 {
    0% {
        width: 4px;
        top: auto;
        transform: rotate(0);
    }

    50% {
        width: 0px;
        top: auto;
        transform: rotate(0);
    }

    51% {
        width: 0px;
        top: 8px;
        transform: rotate(-45deg);
    }

    100% {
        width: 10px;
        top: 8px;
        transform: rotate(-45deg);
    }
}

@keyframes firework {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
            0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
            14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
            -14px -8px 0 0px #4f29f0;
    }
}

//--- ## BASIC #############

.socials {
    position: fixed;
    display: block;
    left: 20px;
    bottom: 20px;

    >a {
        display: block;
        width: 30px;
        opacity: 0.2;
        transform: scale(var(--scale, 0.8));
        transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);

        &:hover {
            --scale: 1;
        }
    }
}
</style>
