<template>
    <div class="page">
        <div class="contet">
            <div class="title">元宇宙视频</div>

            <div class="video-box">
                <video class="video" :src="video" playsinline="true" webkit-playsinline="true" loop autoplay controls>
                    您的浏览器不支持 video 标签。
                </video>
                <div class="video-tips">
                    <div class="text1" v-if="tips.length > 0">{{ tips[0] }}</div>

                    <div class="text2" v-if="tips.length > 1">{{ tips[1] }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { http } from '@/plugins/http.js'
import { onMounted, ref } from 'vue'

const video = ref('')
const tips = ref([])
onMounted(() => {
    http.get('/sysConfig/get/hc_pc_video,hc_pc_video_tips').then(res => {
        video.value = res.hc_pc_video.value
        tips.value = res.hc_pc_video_tips.value.split(';')
    })
})
</script>

<style lang="less" scoped>
.page {
    background-color: #f3f3f3;
    box-sizing: border-box;
    padding: 39px 135px 0;
}

.contet {
    background-color: #fff;
    padding: 84px 100px 100px;
}

.detail {
    font-size: 18px;
    color: #000000;
    line-height: 55px;
}

.title {
    font-size: 32px;
    font-weight: bold;
    color: #11140a;
    line-height: 32px;
}

.video {
    width: 100%;
    display: block;
    box-shadow: 0px 0px 10px 0px rgba(218, 218, 218, 0.73);
}

.video-box {
    margin-top: 64px;
}
.video-tips {
    height: 185px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(218, 218, 218, 0.73);
    .f();
    padding: 0 35px;
    .text1 {
        flex-grow: 1;
        font-size: 30px;
        font-weight: bold;
        color: #333333;
        line-height: 48px;
        margin-right: 30px;
    }

    .text2 {
        font-size: 24px;
        color: #9c9c9c;
        white-space: nowrap;
    }
}

@media screen and(max-width:1600px) {
    .page {
        padding: 39px 60px;
    }

    .contet {
        padding: 50px 50px 50px;
    }
}
</style>
