eta_docs_front/src/layouts/Index.vue

<script setup>
</script>

<template>
    <div class="layout-wrap">
        <div class="header" :class="[$route.path==='/help/index'?'has-min-width':'']">
            <template v-if="!['/video/detail','/video/list'].includes($route.path)">
                <div class="logo">
                    <img src="~@/assets/img/logo.png"/>
                </div>
                <div class="title">{{ $route.meta.title }}</div>
            </template>
            <template v-else>
                <div class="logo-video">
                    <img src="~@/assets/img/logo2.png"/>
                </div>
                <div class="title-video">
                    <img src="~@/assets/img/title-icon.png" v-if="$route.path==='/video/list'"/>
                    {{ $route.meta.title }}</div>
            </template>
            <!-- teleport -->
            <div class="layout-header-other"></div>
        </div>
        <div class="container">
            <router-view v-slot="{ Component }">
                <component :is="Component" :key="$route.fullPath"/>
            </router-view>
        </div>
        
    </div>
</template>

<style lang="scss" scoped>
.layout-wrap{
    .header{
        background-color: #fff;
        height: 60px;
        box-shadow: 0 3px 6px rgba(0,0,0,.1);
        display: flex;
        justify-content:space-between;
        align-items: center;
        box-sizing: border-box;
        padding:0 20px;
        &.has-min-width{
            min-width: 1000px;
        }
        .logo{
            width:200px;
            img{
                width: 100%;
            }
        }
        .title{
            font-size: 18px;
        }
        .logo-video{
            margin-left: 100px;
            width:100px;
        }
        .title-video{
            margin-left: 70px;
            margin-right: auto;
            display: flex;
            align-items: center;
            img{
                margin-right: 10px;
            }
        }
        @media screen and (max-width:650px){
            display: none;
        }
    }
}
</style>