<template>
    <page-top-bar></page-top-bar>


    <div class="content wid1200">
        <div class="header">
            <div class="top flexflex">
                <div class="brand-abstract flexflex">
                    <div class="flexacenter" style="height: min-content;">
                        <div class="item" @click="publicJump('/')">港校租房</div>
                        <img class="arrow" src="@/assets/img/publicImage/yellow-arrow.svg">
                        <div class="item" @click="publicJump('/apartment')">品牌公寓</div>
                        <img class="arrow" src="@/assets/img/publicImage/yellow-arrow.svg">
                        <div class="item" @click="publicJump(`/apartment?companyid=${company.id}`)">{{ company.title }}
                        </div>
                    </div>

                </div>

                <img class="arc-bj" src="@/assets/img/publicImage/angle.png">
            </div>
            <div class="header-content flexflex">
                <div class="header-left">
                    <image-watch style="z-index: 1003;" arrow="never" :index="imageIndex" :show="imageShow"
                        :close="cloaseImageShow" :list="imageList"></image-watch>
                    <div class="slideshow">
                        <el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp"
                            @change="carouselChange">
                            <el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData">
                                <img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img"
                                    :src="item['image'] || item['imageurl']"
                                    @click="cloaseImageShow(allCarouselsData, carouselIndex, 'carousel')">
                            </el-carousel-item>
                        </el-carousel>
                        <div class="indicate-type flexacenter" v-if="indicateTypeState()">
                            <div class="indicate-item"
                                :class="{ 'pitch': allCarouselsData[carouselIndex]['type'] == 'lives' }"
                                v-if="info['lives'] && info['lives'].length != 0" @click="slideshowType('lives')">
                                直播</div>
                            <div class="indicate-item"
                                :class="{ 'pitch': allCarouselsData[carouselIndex]['type'] == 'videos' }"
                                v-if="info['videos'] && info['videos'].length != 0" @click="slideshowType('videos')">视频
                            </div>
                            <div class="indicate-item"
                                :class="{ 'pitch': allCarouselsData[carouselIndex]['type'] == 'attachment' }"
                                v-if="info['attachment'] && info['attachment'].length != 0"
                                @click="slideshowType('attachment')">图片</div>
                        </div>

                        <div class="indicate" v-if="allCarouselsData.length != 0">
                            {{ carouselIndex - carouselsconfig[allCarouselsData[carouselIndex]['type']]['index'] + 1 }}/{{
                                carouselsconfig[allCarouselsData[carouselIndex]['type']]['amount'] }}</div>
                    </div>
                    <div class="slideshow-across flexflex">
                        <div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
                            <img v-if="carouselIndex == 0" class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
                            <img v-else class="arrow rotate180" src="@/assets/img/publicImage/black-arrow.svg" />
                        </div>
                        <div ref="slideshowList" class="slideshow-list box no-scrollbar  flex1 flexacenter">
                            <div class="item" :class="{ 'pitch': index == carouselIndex }, `item${index}`"
                                v-for="(item, index) in allCarouselsData" @click="slideshowItem(index)">
                                <img class="img" v-lazy="item['thumbnail'] || item['imageurl']" />
                                <img class="video-icon" v-if="item['type'] != 'attachment'"
                                    src="@/assets/img/publicImage/video-icon.svg">
                            </div>
                        </div>
                        <div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
                            <img v-if="carouselIndex == allCarouselsData.length - 1" class="arrow rotate180"
                                src="@/assets/img/publicImage/gray-arrow.svg" />
                            <img v-else class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
                        </div>
                    </div>
                </div>
                <div class="header-right flex1">
                    <img class="header-bj" src="@/assets/img/apartmentDetail/apartmentDetail-header-bj.png">
                    <img class="header-shade" src="@/assets/img/apartmentDetail/apartmentDetail-header-shade.svg">
                    <div class="tab-box flexflex" v-if="info['tags'] && info['tags'].length != 0">
                        <div class="tab-item wordbreak flexcenter" v-for="item in info['tags']">{{ item }}</div>
                    </div>
                    <div class="apartment-name wordbreak" v-if="info['title']">{{ info['title'] }}</div>
                    <div class="synopsis wordbreak">{{ info['introduction'] }}</div>
                    <div class="place flexacenter" v-if="info['address']">
                        <div class="left flexacenter">
                            <img class="icon" src="@/assets/img/publicImage/location-icon.png" />
                            <div class="place-text ellipsis">{{ info['address'] }}</div>
                        </div>
                        <div class="right flexacenter" @click="handleClickNav('addressEle')">
                            位置与交通
                            <img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
                        </div>
                    </div>
                    <div class="else flexacenter" v-if="withsameapartments">
                        <div class="left flexacenter">
                            <img class="icon" src="@/assets/img/apartmentDetail/yellow-diamond.png" />
                            同品牌其他公寓
                        </div>
                        <div class="right flexacenter" @click="handleClickNav('eleseEle')">
                            <div class="quantity flexcenter">{{ withsameapartments }}</div>
                            <img class="icon" src="@/assets/img/publicImage/black-arrow.svg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="operate-box flexacenter">
            <div class="nav-box flexacenter">
                <div class="nav-item flexcenter" :class="{ 'pitch': navTab == item.value }" v-for="item in navList"
                    @click="handleClickNav(item.value)">{{ item['value'] == 'roomEle' ? `${item['name']} ${roomList.length}`
                        : item['name'] }}
                </div>
            </div>
            <div class="btn-box flexacenter">
                <div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
                    <img class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
                    转发
                    <transmit-btn :qrcode="qrcode" :title="info['title']" type="apartment"></transmit-btn>
                </div>
                <div class="btn-item consult-btn flexcenter" @click="modificationContact">咨询</div>
            </div>
        </div>
        <div class="details-box flexflex">
            <div class="details-left flex1" ref="detailsLeft">
                <!-- 房间类型 -->
                <div class="type-box" v-if="roomList.length != 0" ref="roomEle">
                    <div class="type-item flexacenter" v-for="(item, index) in roomList">
                        <img class="type-icon" v-if="item['status'] == 1"
                            src="@/assets/img/apartmentDetail/apartment-have.svg" />
                        <img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
                        <div class="type-left flex1">
                            <div class="type-name">{{ item['name'] }}</div>
                            <div class="type-tags flexacenter">
                                <div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
                                <div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
                            </div>

                            <div class="media-box flexflex" v-if="item.videos.length != 0 || item.images.length != 0">
                                <div class="media-btn flexcenter" @click="handleMediaBtn('left', index)"
                                    v-if="item.videos.length + item.images.length > 5">
                                    <img v-if="mediaBtnstate[index] && mediaBtnstate[index] != 0" class="rotate180 arrow"
                                        src="@/assets/img/publicImage/black-arrow.svg" alt="">
                                    <img v-else="mediaBtnstate[index] == 0" class="arrow"
                                        src="@/assets/img/publicImage/gray-arrow.svg" alt="">
                                </div>
                                <div class="media-list flexacenter no-scrollbar" :class="`element${index}`">
                                    <div class="media-item flexcenter" v-for="(it, i) in item['videos']"
                                        @click="cloaseImageShow([...item['videos'], ...item['images']], i, `media${index}`)">
                                        <img class="media-img" v-lazy="it['thumbnail']">
                                        <img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
                                    </div>
                                    <div class="media-item flexcenter" v-for="(it, i) in item['images']"
                                        @click="cloaseImageShow([...item['videos'], ...item['images']], item['videos'].length + i, `media${index}`)">
                                        <img class="media-img" v-lazy="it['thumbnail']">
                                    </div>
                                </div>
                                <div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
                                    v-if="item.videos.length + item.images.length > 5">
                                    <img v-show="mediaBtnstate[index] != 1" class="arrow"
                                        src="@/assets/img/publicImage/black-arrow.svg" alt="">
                                    <img v-show="mediaBtnstate[index] == 1" class="rotate180 arrow"
                                        src="@/assets/img/publicImage/gray-arrow.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="type-right flexacenter">
                            <div class="price-box flexflex">
                                <div class="former" v-if="item['discountprice']">HK$ {{ item['price'] }}/月</div>
                                <div class="new flexacenter">
                                    <div class="unit">HK$</div>
                                    <div class="cost">{{ item['discountprice'] || item['price'] }}</div>
                                    /月
                                </div>
                            </div>
                            <div class="consult-btn flexcenter" v-if="item['status'] == 1" @click="modificationContact">咨询
                            </div>
                            <div class="full-occupancy flexcenter" v-else>已租满</div>
                        </div>
                    </div>
                </div>

                <!-- 优惠活动 -->
                <div class="details-item special-offer" v-if="info['promotionalactivities']" ref="specialEle">
                    <div class="details-header flexacenter">
                        <img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg">
                        优惠活动
                    </div>
                    <div class="text" v-html="info['promotionalactivities']"></div>
                </div>

                <!-- 地址 -->
                <div class="details-item location" v-if="info.address" ref="addressEle">
                    <div class="details-header flexacenter">
                        <img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
                        {{ info.location || '位置' }}
                    </div>
                    <view-map :latlng="{ latitude: info['coordinate'][0], longitude: info['coordinate'][1] }"
                        :name="info['address']"></view-map>

                    <!-- 交通 -->
                    <div class="traffic-box" v-if="info['traffic']">
                        <div class="traffic-title item-title flexcenter">交通</div>
                        <div class="traffic-content" v-html="info['traffic']"></div>
                    </div>
                </div>

                <!-- 房源详情 -->
                <div class="details-item special-offer" v-if="info['message']" ref="messageEle">
                    <div class="details-header flexacenter">
                        <img class="icon" src="@/assets/img/apartmentDetail/listing-details.png">
                        房源详情
                    </div>
                    <div class="text" v-html="info['message']"></div>
                </div>

                <!-- 公寓设施 -->
                <div class="details-item apartment-facilities" v-if="info['facilities']" ref="facilitiesEle">
                    <div class="details-header flexacenter">
                        <img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg">
                        公寓设施
                    </div>
                    <div class="facilities-box">
                        <template v-for="(item, key) of facilitiesKeyValue">
                            <div class="facilities-item flexflex" v-if="info['facilities'][key].length != 0">
                                <div class="facilities-header flexflex">
                                    <div class="item-title">{{ item }}</div>
                                </div>
                                <div class="facilities-list flexflex flex1">
                                    <div class="item flexcenter" v-for="it in info['facilities'][key]">
                                        <img class="icon" src="@/assets/img/apartmentDetail/blue-tick.svg" />
                                        {{ it }}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- 生活 -->
                <div class="details-item life" v-if="info['life']" ref="lifeEle">
                    <div class="details-header flexacenter">
                        <img class="icon" src="@/assets/img/apartmentDetail/live.png">
                        生活
                    </div>
                    <div class="text" v-html="info['life']"></div>
                </div>

                <!-- 品牌介绍 -->
                <div class="details-item company" v-if="company" ref="companyEle">
                    <div class="details-header flexacenter">
                        <img class="icon" style="width: 20px;height: 20px;"
                            src="@/assets/img/apartmentDetail/introduce-icon.png">
                        品牌介绍
                    </div>
                    <img class="company-img flexflex" v-lazy="company['imageurl']">
                    <div class="text" v-html="company['introduction']"></div>
                </div>

                <div class="details-item hint-box">
                    <div class="hint-item">
                        温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
                    </div>
                    <div class="hint-item"></div>
                    <div class="hint-item flexacenter">
                        公寓/酒店/中介房源推广合作请联系：<a @click="copy('ad@gter.net')">ad@gter.net</a>
                    </div>
                </div>
            </div>
            <div class="details-right flexacenter">
                <phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode>
                <groupqrcode></groupqrcode>
                <!-- 同品牌公寓 -->
                <div class="same-brand-title flexcenter" v-if="dualBrandList.length != 0" ref="eleseEle">
                    <img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png">
                    同品牌其他公寓
                </div>

                <div class="same-brand-list" v-if="dualBrandList.length != 0">
                    <div class="same-brand-item" v-for="item in dualBrandList" @click="gobrand(item)">
                        <div class="same-brand-header">
                            <img class="same-brand-img" v-lazy="item['image']" />
                            <div class="apartment-name ellipsis">{{ item['title'] }}</div>
                            <div class="apartment-synopsis ellipsis">{{ item['propaganda'] }}</div>
                        </div>

                        <div class="site flexacenter">
                            <img class="site-icon" src="@/assets/img/publicImage/location-icon.png">
                            <div class="site-text ellipsis">{{ item['address'] }}</div>
                        </div>

                        <div class="price-box">
                            <div class="price-item flexacenter" v-for="it in item['roomlist']">
                                <div class="room-name ellipsis">{{ it['name'] }}</div>
                                <div class="flexacenter">
                                    <div class="unit">HK$</div>
                                    <div class="quantity">{{ it['price'] }}</div>/月
                                </div>
                            </div>
                        </div>

                        <div class="same-brand-quantity flexcenter">
                            共<div class="quantity">{{ item['roomnum'] }}</div>个房型
                            <img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- 添加客服 - 弹窗 -->
    <div class="add-customer-mask flexcenter" v-if="contactReservationState">
        <div class="add-customer-box flexcenter" :class="{ 'two': customerservicelist.length != 1 }">
            <img class="close" @click="modificationContact" src="@/assets/img/publicImage/circle-close.png">
            <img class="add-customer-violet" src="@/assets/img/apartmentDetail/add-customer-violet.svg">
            <img class="add-customer-violet violet2" src="@/assets/img/apartmentDetail/add-customer-violet2.svg">
            <div class="add-customer-interior flexflex">

                <img class="add-customer-interior-bj bj2" src="@/assets/img/apartmentDetail/add-customer-map2.png">
                <img class="add-customer-interior-bj bj2"
                    src="@/assets/img/apartmentDetail/add-customer-interior-bj2.svg" />
                <img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-map.svg">
                <img class="add-customer-interior-bj" src="@/assets/img/apartmentDetail/add-customer-interior-bj.svg" />

                <img class="title" src="@/assets/img/apartmentDetail/add-customer-title.png">

                <div class="QR-code-list flexflex">
                    <div class="QR-code-item" v-for="item in customerservicelist">
                        <div class="QR-code-box flexcenter">
                            <div class="top-right-corner"></div>
                            <div class="bottom-left-corner"></div>
                            <div class="bottom-right-corner"></div>
                            <div class="QR-code-chunk flexcenter">
                                <img class="QR-code-img" :src="item['image']">
                            </div>
                        </div>

                        <div class="name flexcenter">{{ item['title'] }}</div>
                        <div class="hint flexcenter">微信扫码添加，备注“寄托”</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footerpage></footerpage>
    <back-to-top></back-to-top>
</template>

<script setup>
import { ref, onMounted, onUnmounted, toRefs, watch, getCurrentInstance, nextTick } from 'vue';
import { ElMessage, valueEquals } from 'element-plus'
import { useStore } from 'vuex';

import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import footerpage from '@/components/footer/footer.vue'
import viewMap from '@/components/public/viewMap.vue'
import transmitBtn from '@/components/public/transmitBtn.vue'
import backToTop from '@/components/public/backToTop.vue'
import imageWatch from '@/components/detail/imageWatch.vue';
import phoneqrcode from '@/components/public/phoneQRcode.vue';
import groupqrcode from '@/components/public/group-QRcode.vue';

import { useRouter, useRoute } from 'vue-router'
let router = useRouter()

const route = useRoute();


watch(route, () => {
    uniqid = router.currentRoute.value.query['uniqid']
    info.value = {}
    roomList.value = []
    carouselsconfig.value = { lives: {}, videos: {}, attachment: {} }
    navList.value = []
    navTab.value = 'roomEle'
    dualBrandList.value = []
    contactReservationState.value = false
    customerservicelist.value = []
    mediaBtnstate.value = {}


    slideshowList.value = null
    detailsLeft.value = null
    token = ""

    carouselIndex.value = 0
    allCarouselsData.value = []
    // mediaBtnstate.value = {}


    init()

});

let { uniqid } = router.currentRoute.value.query

import { copyToClipboard } from '@/utils/util.js'

const { proxy } = getCurrentInstance()
const store = useStore();

let imageShow = ref(false)  // 查看大图弹窗的状态
let imageList = ref([])  // 查看大图弹窗的状态
let imageIndex = ref(0)  // 查看大图弹窗的状态
let imageType = ""  // 查看大图弹窗的状态
const cloaseImageShow = (list, index, type) => {
    if (list && imageType != type) {
        imageList.value = list
        imageIndex.value = index
        imageType = type
    }
    imageShow.value = !imageShow.value
}

// 房间类型
let roomList = ref([])
let info = ref({})

let facilitiesKeyValue = {  // 设施的键值对
    public: "公共",
    kitchen: "餐厨",
    lavatory: "洗手间",
}

let withsameapartments = ref(0) // 其他公寓数量
let attachment = ref([])  // 轮播图数据

let company = {} // 品牌数据
let token = ""
let qrcode = ref("") // 小程序详情二维码

let allCarouselsData = ref([])



onMounted(() => {
    init()
})

const init = () => {
    proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
        if (res.code != 200) {
            ElMessage.error(res['message'])
            return
        }
        let data = res.data

        data['roomList'].forEach(element => {
            element['images'].forEach(element => {
                element['type'] = 'attachment'
            })
            element['videos'].forEach(element => {
                element['type'] = 'videos'
            })
        })

        roomList.value = data['roomList']
        data['info']['coordinate'] = data['info']['coordinate'].split(',').map(item => {
            return +item
        })

        info.value = data['info']
        attachment.value = data['info']['attachment']
        withsameapartments.value = data['withsameapartments']
        company = data['company']
        token = data['token']
        qrcode.value = data['qrcode']

        handleAllCarouselsData()


        nextTick(() => handleNavData())

        if (data.withsameapartments > 0) dualBrandData()
    })
}



let carouselsconfig = ref({ lives: {}, videos: {}, attachment: {} })

// 处理 轮播图大图的索引 tab 
const handleAllCarouselsData = () => {
    let targetInfo = { ...info.value }

    let accumulativeTotal = 0  // 累计
    for (const key in carouselsconfig.value) {
        carouselsconfig.value[key] = {
            amount: targetInfo[key].length,
            index: accumulativeTotal
        }
        accumulativeTotal += targetInfo[key].length
    }

    targetInfo['lives'].forEach(element => {
        element['type'] = 'lives'
        allCarouselsData.value.push(element)
    })

    targetInfo['videos'].forEach(element => {
        element['type'] = 'videos'
        allCarouselsData.value.push(element)
    })

    let thumbnailList = targetInfo['thumbnailList']

    targetInfo['attachment'].forEach((element, index) => {
        element = {
            imageurl: element,
            thumbnail: thumbnailList[index]
        }
        element['type'] = 'attachment'
        allCarouselsData.value.push(element)
    })

}


const roomEle = ref(null)
const specialEle = ref(null)
const addressEle = ref(null)
const messageEle = ref(null)
const facilitiesEle = ref(null)
const lifeEle = ref(null)
const companyEle = ref(null)
const eleseEle = ref(null)

let navconfig = [{
    name: "房间类型",
    value: "roomEle"
}, {
    name: "优惠活动",
    value: "specialEle"
}, {
    name: "位置与交通",
    value: "addressEle"
}, {
    name: "房源详情",
    value: "messageEle"
}, {
    name: "公寓设施",
    value: "facilitiesEle"
}, {
    name: "生活",
    value: "lifeEle"
}, {
    name: "品牌介绍",
    value: "companyEle"
}]
let navList = ref([])

let navTab = ref("roomEle")

// 处理 navList 数据
const handleNavData = () => {
    navconfig.forEach(element => {
        if (eval(element['value']).value) navList.value.push(element)
    })
}

// 处理点击nav 滚动事件
const handleClickNav = value => {
    let scrollTop = eval(value).value.offsetTop + 136
    window.scrollTo({ top: scrollTop, behavior: 'smooth' });
}


let dualBrandList = ref([]) // 同品牌数据
// 同品牌请求数据
const dualBrandData = () => {
    proxy.$get("/tenement/pc/api/apartment", { token }).then(res => {
        if (res.code != 200) return
        let data = res.data
        dualBrandList.value = data.data
    })
}

// 点击转发的复制链接按钮
const copy = (value) => copyToClipboard(value).then(() => ElMessage.success("复制成功！！！"))

let contactReservationState = ref(false)  // 联系预订客服的弹窗状态
let customerservicelist = ref([])  // 联系预订客服的弹窗状态

// 修改 客服 弹窗状态
const modificationContact = () => {
    if (customerservicelist.value.length == 0) contactReservationService()
    else contactReservationState.value = !contactReservationState.value
}

// 联系预订客服 请求数据
const contactReservationService = () => {
    proxy.$get("/tenement/pc/api/apartment/customerservice", {
        customerservice: info.value['customerservice'],
        token
    }).then(res => {
        if (res.code != 200) return
        let data = res.data
        customerservicelist.value = data['customerservicelist']
        contactReservationState.value = !contactReservationState.value
    })
}

let mediaBtnstate = ref({})  // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击

const handleMediaBtn = (type, index) => {
    const element = document.querySelector(`.element${index}`);
    if (element) {
        let left
        if (type == 'left') left = element.scrollLeft - 86
        else left = element.scrollLeft + 86
        const scrollOptions = {
            left,
            behavior: 'smooth'
        };
        element.scrollTo(scrollOptions);

        nextTick(() => {
            setTimeout(() => {
                if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
                else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
                else mediaBtnstate.value[index] = 2
            }, 150);
        })
    }
}


let slideshowList = ref(null)  // 轮播图小图的节点


let carouselIndex = ref(0) // 轮播图的索引

const remarkCaruselUp = ref(null)

const carouselChange = value => {
    carouselIndex.value = value
    const element = slideshowList.value
    const elementchild = element.querySelector(`.item${value}`);

    let left = elementchild.offsetLeft - element.offsetLeft
    const scrollOptions = {
        left,
        behavior: 'smooth'
    };
    element.scrollTo(scrollOptions);
}

// 顶部轮播图的左右按钮
const handleslideshow = (type) => {
    if (type == 'left' && carouselIndex.value != 0) remarkCaruselUp.value.prev()
    if (type != 'left' && carouselIndex.value != allCarouselsData.value.length - 1) remarkCaruselUp.value.next()
}

// 直接点击轮播图的小图就行切换
const slideshowItem = index => remarkCaruselUp.value.setActiveItem(index)
// 直接点击大图的 类型
const slideshowType = type => slideshowItem(carouselsconfig.value[type].index)

let detailsLeft = ref(null)


onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

const gobrand = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)


const handleScroll = () => {
    if (Math.random() > 0.3) return
    for (let i = 0; i < navList.value.length; i++) {
        let element = navList.value[i]

        const rect = eval(element.value).value.getBoundingClientRect();
        const distanceToTop = rect.top;
        if (distanceToTop >= 0) {
            navTab.value = element.value
            break;
        }

    }
}

const indicateTypeState = () => {
    let total = 0  // 累计
    for (const key in carouselsconfig.value) {
        if (carouselsconfig.value[key]['amount'] > 0) total++
    }

    return total > 1 ? true : false
}

// 公共跳转
const publicJump = path => router.push(path)


</script>

<style lang="less" scoped>
.content {
    margin: -36px auto 0;
    position: relative;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;

    .header {
        margin-bottom: 20px;

        .top {
            width: 1200px;
            height: 65px;
            background: -webkit-linear-gradient(356.899508550192deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
            background: -moz-linear-gradient(93.1004914498078deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
            background: linear-gradient(93.1004914498078deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
            border-radius: 16px 16px 0 0;
            padding: 0 30px;
            position: relative;

            .brand-name {
                height: 22px;
                background-color: rgba(128, 108, 36, 1);
                border-radius: 8px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                color: #FDDA55;
                padding: 0 11px;
                margin-top: 12px;
                margin-right: 10px;
                font-size: 14px;
            }

            .brand-abstract {
                color: #806C24;
                font-size: 14px;
                padding-top: 13px;

                .item {
                    cursor: pointer;

                    &:not(:last-of-type):hover {
                        color: rgb(51, 51, 51);
                        text-decoration: underline;
                    }
                }

                .arrow {
                    margin: 0 13px;
                    width: 7px;
                    height: 10px;
                }
            }

            .arc-bj {
                position: absolute;
                bottom: 20px;
                right: 0;
                width: 20px;
                z-index: 1;
                // height: 20px;
                // background-color: #fff;

                .arc {
                    width: 100%;
                    height: 100%;
                    background: rgba(204, 253, 191, 1);
                    border-radius: 0 0 100% 0;

                }
            }
        }

        .header-content {
            background-color: #fff;
            padding: 25px 30px;
            margin-top: -20px;
            border-radius: 16px 0 16px 16px;
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, .118);
            // .arc {
            //     position: absolute;
            //     width: 12px;
            //     height: 12px;
            //     top: -12px;
            //     right: 0;
            // }

            .header-left {
                width: 511px;

                .slideshow {
                    position: relative;
                    margin-bottom: 8px;

                    /deep/ .el-carousel {
                        .el-carousel__container {
                            width: 511px;
                            height: 340px;
                        }

                        .el-carousel__item {
                            width: 511px;
                            height: 340px;
                            display: flex;
                            align-items: center;
                            border-radius: 5px;

                            .img {
                                width: 100%;
                                object-fit: cover;
                                height: 340px;
                                display: block;
                                cursor: pointer;
                            }

                            .video-icon {}
                        }
                    }

                    .indicate-type {
                        position: absolute;
                        bottom: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        height: 24px;
                        background-color: rgba(255, 255, 255, 1);
                        border-radius: 36px;
                        font-size: 16px;
                        color: #FFFFFF;

                        .indicate-item {
                            height: 100%;
                            padding: 0 11px;
                            font-size: 14px;
                            color: #555555;
                            line-height: 24px;
                            cursor: pointer;

                            &.pitch {
                                border-radius: 36px;
                                color: #FFFFFF;
                                background-color: rgba(249, 93, 93, 1);
                            }
                        }
                    }

                    .indicate {
                        font-size: 13px;
                        color: #FFFFFF;
                        height: 20px;
                        line-height: 20px;
                        background-color: rgba(0, 0, 0, 0.494117647058824);
                        border-radius: 36px;
                        padding: 0 7px;
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                    }
                }

                .slideshow-across {
                    width: 511px;
                    height: 70px;
                    background-color: rgba(246, 246, 246, 1);
                    border: 1px solid rgba(235, 235, 235, 1);
                    border-radius: 4px;

                    .slideshow-btn {
                        width: 32px;
                        height: 100%;
                        cursor: pointer;
                        user-select: none;

                        &.left {
                            // transform: rotate(180deg);
                        }
                    }

                    .box {
                        width: 360px;
                        overflow: auto;

                        .item {
                            height: 60px;
                            margin-right: 6px;
                            position: relative;
                            cursor: pointer;

                            &::after {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background-color: rgba(255, 255, 255, 0.501960784313725);
                            }

                            &.pitch {
                                &::after {
                                    height: 0;
                                }
                            }

                            .video-icon {
                                width: 44px;
                                height: 44px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }

                            .img {
                                height: 100%;
                                border-radius: 6px;

                            }
                        }
                    }

                    .arrow {
                        width: 10px;
                        height: 17px;
                    }
                }
            }

            .header-right {
                margin-left: 59px;
                position: relative;
                z-index: 1;

                .header-bj,
                .header-shade {
                    width: 601px;
                    height: 338px;
                    position: absolute;
                    bottom: -25px;
                    right: -30px;
                    z-index: -1;
                }

                .tab-box {
                    flex-wrap: wrap;
                    margin-bottom: 9px;

                    .tab-item {
                        // height: 24px;
                        background: -webkit-linear-gradient(145.829772035587deg, rgba(224, 240, 255, 1) 0%, rgba(98, 177, 255, 1) 297%);
                        background: -moz-linear-gradient(-55.8297720355872deg, rgba(224, 240, 255, 1) 0%, rgba(98, 177, 255, 1) 297%);
                        background: linear-gradient(-55.8297720355872deg, rgba(224, 240, 255, 1) 0%, rgba(98, 177, 255, 1) 297%);
                        border-radius: 8px;
                        font-size: 14px;
                        color: #447EB3;
                        line-height: 24px;
                        padding: 0 7px;
                        margin-bottom: 12px;
                        margin-right: 10px;
                    }
                }

                .apartment-name {
                    font-size: 28px;
                    color: #000000;
                    line-height: 46px;
                    margin-bottom: 20px;
                }

                .synopsis {
                    font-size: 14px;
                    color: #7F7F7F;
                    line-height: 24px;
                    margin-bottom: 20px;
                }

                .place-text {}

                .place,
                .else {
                    height: 63px;
                    justify-content: space-between;
                    border-top: 1px solid #ebebeb;

                    .left {
                        color: #333333;
                        font-size: 14px;

                        .icon {
                            width: 18px;
                            height: 18px;
                            margin-right: 10px;
                        }
                    }

                    .right {
                        font-size: 14px;
                        color: #7F7F7F;
                        line-height: 24px;
                        cursor: pointer;

                        .icon {
                            width: 6px;
                            height: 10px;
                            margin-left: 10px;
                        }

                        .quantity {
                            width: 18px;
                            height: 18px;
                            border-radius: 50%;
                            font-size: 13px;
                            color: #333333;
                            background-color: #fdda55;
                        }
                    }
                }
            }
        }
    }

    .operate-box {
        width: 1200px;
        height: 70px;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(235, 235, 235, 1);
        border-radius: 16px;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        font-size: 14px;
        padding: 0 30px;
        margin-bottom: 20px;
        justify-content: space-between;
        position: sticky;
        top: 0px;
        z-index: 1002;

        .nav-box {
            .nav-item {
                height: 40px;
                background-color: rgba(246, 246, 246, 1);
                border-radius: 8px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #7F7F7F;
                padding: 0 17px;
                cursor: pointer;

                &.pitch {
                    background-color: #000;
                    font-weight: 650;
                    color: #fff;
                }

                &:not(:last-of-type) {
                    margin-right: 10px;
                }
            }
        }

        .btn-box {

            .btn-item {
                width: 100px;
                height: 40px;
                border-radius: 50px;
                cursor: pointer;

                &.transmit-btn {
                    border: 1px solid rgba(235, 235, 235, 1);
                    color: #333333;
                    margin-right: 10px;
                    // position: relative;

                    .transmit-icon {
                        width: 20px;
                        height: 20px;
                        margin-right: 4px;
                    }
                }

                &.consult-btn {
                    background: -webkit-linear-gradient(324.854454500294deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
                    background: -moz-linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
                    background: linear-gradient(125.145545499706deg, rgba(98, 177, 255, 1) -11%, rgba(128, 255, 255, 1) 135%);
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }
        }
    }

    .details-box {
        justify-content: space-between;
        align-items: flex-start;

        .details-left {
            .type-box {
                .type-item {
                    width: 876px;
                    background-color: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(235, 235, 235, 1);
                    border-radius: 16px;
                    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                    font-size: 14px;
                    padding: 30px;
                    margin-bottom: 20px;
                    position: relative;

                    .type-icon {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 40px;
                        height: 40px;
                        transform: rotate(270deg);
                    }

                    .type-left {

                        .type-name {
                            font-weight: 650;
                            font-size: 20px;
                            color: #000000;
                            margin-bottom: 16px;
                        }

                        .type-tags {
                            margin-bottom: 20px;

                            .tags-item {
                                height: 24px;
                                background-color: rgba(242, 242, 242, 1);
                                border-radius: 4px;
                                line-height: 26px;
                                font-size: 14px;
                                color: #7F7F7F;
                                margin-right: 8px;
                                padding: 0 9px;

                                &.first {
                                    border: 1px solid rgba(80, 227, 194, 1);
                                    color: #50e3c2;
                                    background-color: #fff;
                                }
                            }
                        }

                        .media-box {
                            .media-list {
                                max-width: 460px;
                                overflow: auto;

                            }

                            .media-item {
                                position: relative;
                                margin-right: 10px;

                                .media-img {
                                    width: 76px;
                                    height: 80px;
                                    border-radius: 10px;
                                    cursor: pointer;
                                    object-fit: cover;
                                }

                                .media-icon {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    width: 53px;
                                    height: 53px;
                                }
                            }

                            .media-btn {
                                height: 80px;
                                width: 30px;
                                cursor: pointer;
                                user-select: none;

                                .arrow {
                                    width: 10px;
                                    height: 17px;
                                }
                            }
                        }
                    }

                    .type-right {
                        .price-box {
                            flex-direction: column;
                            align-items: flex-end;
                            margin-right: 20px;

                            .former {
                                color: #AAAAAA;
                                font-size: 14px;
                                text-decoration: line-through;
                                text-decoration-color: #797979;
                                margin-bottom: 3px;
                            }

                            .new {

                                .unit {
                                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
                                    font-weight: 900;
                                    color: #000000;
                                    font-size: 16px;
                                }

                                .cost {
                                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
                                    font-weight: 900;
                                    font-size: 24px;
                                    color: #F95D5D;
                                    margin: 0 6px;
                                }

                                align-items: baseline;
                                font-size: 14px;
                                color: #555555;
                            }
                        }

                        .consult-btn {
                            width: 90px;
                            height: 40px;
                            background: -webkit-linear-gradient(321.966692522331deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
                            background: -moz-linear-gradient(128.033307477669deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
                            background: linear-gradient(128.033307477669deg, rgba(98, 177, 255, 1) -13%, rgba(128, 255, 255, 1) 137%);
                            border-radius: 36px;
                            font-weight: 400;
                            font-size: 16px;
                            color: #FFFFFF;
                            cursor: pointer;
                        }

                        .full-occupancy {
                            width: 90px;
                            height: 40px;
                            background-color: rgba(237, 246, 255, 0);
                            border: 1px solid rgba(215, 215, 215, 1);
                            border-radius: 36px;
                            font-weight: 400;
                            font-size: 16px;
                            color: #AAAAAA;
                        }
                    }

                }
            }

            .item-title {
                padding: 0 11px;
                height: 26px;
                background-color: rgba(51, 51, 51, 1);
                border-radius: 8px;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 26px;
                display: inline-block;
            }

            .details-item {
                width: 876px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(235, 235, 235, 1);
                border-radius: 16px;
                -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                font-size: 14px;
                margin-bottom: 20px;

                &.location .details-header .icon {
                    width: 20px;
                    height: 24px;
                }

                &.apartment-facilities .details-header .icon,
                &.special-offer .details-header .icon {
                    width: 20px;
                    height: 20px;
                }

                &.company .details-header .icon,
                &.life .details-header .icon {
                    width: 22px;
                    height: 22px;
                }

                .details-header {
                    height: 82px;
                    padding: 0 30px;
                    border-bottom: 1px solid #ebebeb;
                    font-size: 16px;
                    color: #000000;

                    .icon {
                        width: 20px;
                        height: 22px;
                        margin-right: 4px;
                    }
                }

                .text {
                    font-weight: 400;
                    font-size: 16px;
                    color: #555555;
                    line-height: 30px;
                    padding: 20px 30px;
                    white-space: pre-line;
                    word-break: break-word;
                }


                .traffic-box {
                    padding: 0 30px;

                    .traffic-title {
                        margin-bottom: 16px;
                    }

                    font-weight: 400;
                    font-size: 16px;
                    color: #555555;
                    line-height: 30px;
                    white-space: pre-line;
                    padding-bottom: 30px;
                }


                &.apartment-facilities {

                    .facilities-box {
                        padding: 30px;

                        .facilities-item {
                            align-items: flex-start;

                            &:not(:last-of-type) {
                                margin-bottom: 30px;
                            }

                            .facilities-header {
                                width: 100px;
                            }

                            .facilities-list {
                                flex-wrap: wrap;

                                .item {
                                    font-size: 16px;
                                    line-height: 26px;
                                    color: #333333;
                                    margin-bottom: 10px;
                                    margin-right: 50px;

                                    .icon {
                                        width: 16px;
                                        height: 16px;
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                    }
                }

                &.company {
                    .company-img {
                        width: 420px;
                        height: 254px;
                        margin: 10px auto 0;
                    }
                }

                &.hint-box {
                    color: #7F7F7F;
                    line-height: 24px;
                    font-size: 13px;
                    padding: 30px;
                    margin-bottom: 100px;

                    .hint-item {
                        min-height: 24px;

                        a {
                            cursor: pointer;
                            color: #7F7F7F;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        .details-right {
            width: 304px;
            flex-direction: column;

            .same-brand-title {
                user-select: none;
                margin-bottom: 20px;
                font-size: 18px;
                color: #000000;
                background: -webkit-linear-gradient(350.348166533196deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
                background: -moz-linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
                background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
                border-radius: 12px;
                width: 304px;
                height: 60px;
                border: 5px solid #fff;
                position: relative;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);

                &::after {
                    content: "";
                    position: absolute;
                    width: 0;
                    height: 0;
                    left: 50%;
                    bottom: -12px;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    border-top: 8px solid #fff;
                }

                .same-brand-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 4px;
                }
            }

            .same-brand-list {
                .same-brand-item {
                    width: 304px;
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 17px;
                    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
                    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
                    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
                    padding: 8px 0;
                    margin-bottom: 20px;
                    cursor: pointer;

                    .same-brand-header {
                        width: 288px;
                        height: 192px;
                        overflow: hidden;
                        border-radius: 17px;
                        margin: 0 auto 20px;
                        position: relative;

                        .same-brand-img {
                            width: 288px;
                            height: 192px;
                        }

                        .apartment-name {
                            font-weight: 650;
                            font-style: normal;
                            font-size: 16px;
                            color: #000000;
                            padding: 0 15px;
                            height: 32px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background-color: rgba(255, 255, 255, 0.7);
                            padding: 0 15px;
                            border-radius: 40px;
                            width: max-content;
                            line-height: 30px;
                            max-width: 100%;
                        }

                        .apartment-synopsis {
                            width: 100%;
                            height: 32px;
                            line-height: 32px;
                            background-color: rgba(0, 0, 0, 0.63921568627451);
                            border-radius: 0 0 10px 10px;
                            position: absolute;
                            bottom: 0;
                            font-size: 13px;
                            color: #D7D7D7;
                            padding: 0 10px;
                        }

                    }

                    .site {
                        margin: 0 20px 20px;
                        color: #555555;
                        font-size: 14px;

                        .site-icon {
                            width: 18px;
                            height: 18px;
                            margin-right: 4px;
                        }
                    }

                    .price-box {
                        font-size: 14px;
                        color: #555555;
                        margin: 0 20px 31px;

                        .price-item {
                            justify-content: space-between;
                            height: 50px;

                            &:not(:last-of-type) {
                                border-bottom: 1px solid #ebebeb;
                            }
                        }

                        .room-name {
                            font-size: 15px;
                            color: #000000;
                        }

                        .unit {
                            font-family: 'Arial-Black', 'Arial Black', sans-serif;
                            font-weight: 900;
                            color: #000000;
                            font-size: 13px;
                        }

                        .quantity {
                            font-family: 'Arial-Black', 'Arial Black', sans-serif;
                            font-weight: 900;
                            font-size: 18px;
                            color: #F95D5D;
                            margin: 0 5px;
                        }
                    }

                    .same-brand-quantity {
                        font-size: 14px;
                        color: #555555;
                        margin: 21px auto;

                        .quantity {
                            font-weight: 650;
                            font-size: 14px;
                            color: #000000;
                            line-height: 18px;
                            height: 18px;
                            background-color: #fddf6d;
                            border-radius: 9px;
                            padding: 0 8px;
                            margin: 0 8px;
                        }

                        .same-brand-quantity-icon {
                            width: 7px;
                            height: 12px;
                            margin-left: 8px;
                        }
                    }
                }
            }
        }
    }

}

.add-customer-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1002;

    .add-customer-box {
        width: 460px;
        height: 460px;
        background: -webkit-linear-gradient(315deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
        background: -moz-linear-gradient(135deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
        background: linear-gradient(135deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
        // border: 1px solid rgba(230, 221, 185, 1);
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.235294117647059);
        position: relative;

        &.two {
            width: 799px;
            height: 460px;

            .add-customer-violet {
                display: none;

                &.violet2 {
                    display: block;
                }
            }


            .add-customer-interior {
                width: 700px;

                .title {
                    width: 189px;
                    height: 31px;
                }

                .add-customer-interior-bj {
                    display: none;

                    &.bj2 {
                        display: block;
                    }
                }


            }
        }

        .close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .add-customer-violet {
            position: absolute;
            bottom: 0;
            left: 0;
            top: 0;
            right: 0;
            width: 421px;
            height: 460px;

            &.violet2 {
                width: 579px;
                height: 460px;
                display: none;
            }
        }

        .add-customer-interior {
            width: 368px;
            height: 368px;
            position: relative;
            z-index: 1;
            flex-direction: column;
            align-items: center;
            padding-top: 35px;

            .add-customer-interior-bj {
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;

                &.bj2 {
                    display: none;
                }
            }

            .title {
                width: 159px;
                height: 26px;
                margin-bottom: 35px;
            }

            .QR-code-list {
                .QR-code-item {
                    &:not(:last-child) {
                        margin-right: 160px;
                    }
                }
            }

            .QR-code-box {
                margin-bottom: 17px;
                padding: 15px;
                position: relative;

                &::after {
                    width: 15px;
                    height: 5px;

                }

                &::before {
                    width: 5px;
                    height: 15px;
                }

                &::before,
                &::after {
                    content: "";
                    background-color: rgba(255, 214, 73, 1);
                    border-radius: 11px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .top-right-corner {
                    &::after {
                        width: 15px;
                        height: 5px;
                    }

                    &::before {
                        width: 5px;
                        height: 15px;
                    }

                    &::before,
                    &::after {
                        content: "";
                        background-color: rgba(255, 214, 73, 1);
                        border-radius: 11px;
                        position: absolute;
                        top: 0;
                        right: 0;

                    }
                }

                .bottom-left-corner {
                    &::after {
                        width: 15px;
                        height: 5px;
                    }

                    &::before {
                        width: 5px;
                        height: 15px;
                    }

                    &::before,
                    &::after {
                        content: "";
                        background-color: rgba(255, 214, 73, 1);
                        border-radius: 11px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }

                .bottom-right-corner {
                    &::after {
                        width: 15px;
                        height: 5px;
                    }

                    &::before {
                        width: 5px;
                        height: 15px;
                    }

                    &::before,
                    &::after {
                        content: "";
                        background-color: rgba(255, 214, 73, 1);
                        border-radius: 11px;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }

                .QR-code-chunk {
                    width: 130px;
                    height: 130px;
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 15px;
                    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
                    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
                    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);

                    .QR-code-img {
                        width: 110px;
                        height: 110px;
                    }
                }
            }

            .name {
                margin-bottom: 6px;
            }

            .name,
            .hint {
                color: #555555;
                font-size: 14px;
            }
        }
    }
}
</style>