<template>
    <el-dialog title="谷歌浏览器设置" :visible="visible" @close="close">
        <div class="step">
            步骤1: 在谷歌浏览器中地址栏输入chrome://flags/,搜索secure。
        </div>
        <div class="step">
            步骤2: 找到Allow invalid certificates for resources loaded from
            localhost并启用此选项。
        </div>
        <div class="step">
            步骤3: 找到Block insecure private network requests并禁用此选项。
        </div>
        <div class="step">步骤4: 关闭浏览器，重新启动页面。</div>
        <div class="step-img"><img :src="require('@/assets/img/chrome_settings.png')" alt="浏览器设置"></div>
    </el-dialog>
</template>

<script>
export default {
    name: 'VideoPluginBrowserSetting',
    data() {
        return {
            visible: false,
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        close() {
            this.visible = false
        },
    },
}
</script>

<style lang="scss" scoped>
.step{
    font-size: 16px;
    margin-bottom: 6px;
}
.step-img{
    text-align: center;
    margin-top: 10px;
    img{
        width: 80%;
    }
}
</style>