qjkankan_shibadongcun/packages/qjkankan-kankan-view/src/components/Information/View.Pc.vue

<template>
    <div class="title" @click="onShowDescription" :class="{ 'pull-up': showDescription, }">
        <div class="text">
            <div>{{ metadata.title }}</div>
        </div>
        <div class="icon">
            <i class="iconfont icon-pull-down"></i>
        </div>
    </div>
    <div v-if="showTitle" class="description" :class="{ show: showDescription }" @click="onShowDescription">
        <div class="text" v-html="metadata.description"></div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'

import { useStore } from 'vuex'
const store = useStore()
const metadata = computed(() => store.getters['scene/metadata'])
const showDescription = ref(false)
const showTitle = ref(true)

const onShowDescription = () => {
    showDescription.value = !showDescription.value
}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    transition: all 0.1s;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    &.collapse {
        // width: 34px;
        padding-right: 0;
        .back-btn {
            .iconfont {
                transform: rotate(180deg);
            }
            &::after {
                display: none;
            }
        }
        .text {
            display: none;
        }
        .icon {
            display: none;
        }
    }
    .back-btn {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        transition: all 0.1s;
        &::after {
            content: '';
            position: absolute;
            width: 1px;
            height: 65%;
            background: linear-gradient(transparent, #fff, transparent);
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
    }
    .text {
        // width: 190px;
        text-align: center;
        min-width: 240px;
        transition: width 0.3s;
        padding: 0 20px;

        > div {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .icon {
        i {
            transition: transform 0.2s ease-in-out;
        }
    }

    &.pull-up {
        background: rgba($color: #000000, $alpha: 0.5);
        border-radius: 17px;
        // .text {
        //     width: 240px;
        //     padding-left: 20px;

        //     > div {
        //         // width: 100%;
        //         // overflow: hidden;
        //         // text-overflow: ellipsis;
        //         // white-space: nowrap;
        //     }
        // }
        .icon {
            i {
                transform: rotate(180deg);
            }
        }
    }
}

.description {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    background: rgba(15, 15, 15, 0.5);
    border-radius: 10px;
    &.show {
        display: block;
    }
    .text {
        padding: 20px;
        width: 400px;
        letter-spacing: 1px;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        line-height: 1.5;
    }
}
</style>