de-net/src/view/iframe/treasure-hunt/invite.vue

<template>
    <!-- 邀请页 -->
    <div class="area-process">
        <v-head></v-head>
        <div class="box-process">
            <div class="item">
                <hover-tip></hover-tip>
                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" @mouseenter="mouseItem($event)" />
            </div>
            <div class="item">
                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
            </div>
            <div class="item">
                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
            </div>
            <div class="line">
                <div class="full"></div>
            </div>
        </div>
        <div class="area-success-message">
            <div class="success-message">
                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
                <span>@JACK1985 </span> &nbsp;
                <span>Opened Treasure Chest</span>
            </div>
            <div class="success-message">
                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
                <span>@JACK1985 </span> &nbsp;
                <span>Opened Treasure Chest</span>
            </div>
        </div>
    </div>

    <div class="area-nav">
        <div class="item" :class="{ active: state.tab == 1 }" @click="clickSwicthTab(1)">invite friends</div>
        <div class="item" :class="{ active: state.tab == 2 }" @click="clickSwicthTab(2)">invited</div>
    </div>
    <div class="area-info">
        <invite-friends v-show="state.tab == 1"></invite-friends>
        <invite-list v-show="state.tab == 2"></invite-list>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import VHead from '@/view/iframe/treasure-hunt/head.vue'
import InviteList from '@/view/iframe/treasure-hunt/invite-list.vue'

import HoverTip from '@/view/iframe/treasure-hunt/hover-tip.vue'
import InviteFriends from '@/view/iframe/treasure-hunt/invite-friends.vue'
let state = reactive({
    page: '封面',
    tab: 1
})
const clickSwicthTab = (tab) => {
    state.tab = tab
}

const mouseItem = (e) => {
    console.log(e)
}
</script>
<style lang="scss"  scoped>
.area-process {
    width: 375px;
    height: 170px;
    background: linear-gradient(179.96deg, #735931 0.04%, #0E0803 53.64%);
    position: relative;

    .box-process {
        width: 350px;
        height: 90px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        position: absolute;
        top: 32px;
        left: 13px;

        .item {
            z-index: 2;
        }

        img {
            width: 60px;
            height: 60px;
        }

        .item:nth-child(1) {

            margin-left: 56px;
        }

        .item:nth-child(2) {
            width: 60px;
            height: 60px;
            margin-left: 40px;
        }

        .item:nth-child(3) {
            img {
                width: 90px;
                height: 90px;
            }

            margin-left: 40px;
        }

        .line {
            width: 330px;
            height: 4px;
            background: rgba(255, 210, 59, 0.2);
            position: absolute;
            border-radius: 100px;
            overflow: hidden;
            left: 13px;
            top: 38px;

            .full {
                position: absolute;
                left: 0;
                top: 0;
                height: 4px;
                width: 100px;
                background: #FFD23B;
            }
        }

    }

    .area-success-message {
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 13px;
        display: flex;
        overflow: hidden;
        /* align-items: center; */
        flex-direction: column-reverse;
        flex-wrap: wrap;

        .success-message {
            width: fit-content;
            height: 30px;
            padding: 0 9px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
                border-radius: 100px;
                margin-right: 8px;

            }

            span {
                font-style: normal;
                font-weight: 500;
                font-size: 12px;
                line-height: 14px;
            }

            span:nth-child(2) {
                color: #1D9BF0;
            }

            span:nth-child(3) {
                color: #A8A8A8;
            }
        }

    }
}

.area-nav {
    width: 375px;
    height: 38px;
    display: flex;

    .item {
        user-select: none;
        color: #757575;
        background: #F0F0F0;
        text-align: center;
        width: 50%;
        font-weight: 500;
        font-size: 14px;
        line-height: 38px;
        cursor: pointer;
    }

    .active {
        background: #FFFFFF;
        color: #000000;
    }
}

.area-info {
    width: 375px;


}
</style>