signal_web/src/views/Setting.vue

<template>
    <div class="pages">
        <div class="image-border image-border1"></div>
        <div class="image-border image-border2"></div>
        <div class="image-border image-border3"></div>
        <div class="image-border image-border4"></div>
        <div class="tabs">
            <ul>
                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
                    {{tab.name}}
                </li>
            </ul>
        </div>
        <div class="content">
            <ul>
                <li>
                    <em>报警声音</em>
                    <el-switch
                            v-model="setting.sound"
                            active-color="#6DC1FF"
                            inactive-color="#DCDFE6">
                    </el-switch>
                </li>
                <li>
                    <em>设备固件自动升级</em>
                    <el-switch
                            v-model="setting.update"
                            active-color="#6DC1FF"
                            inactive-color="#DCDFE6">
                    </el-switch>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabIndex: 3,
                tabs: [
                    {name: '固件管理', url: 'hardware'},
                    {name: '警务通管理', url: 'police'},
                    {name: '密码修改', url: 'pwd'},
                    {name: '系统设置', url: 'setting'},
                ],
                setting:{
                  sound:true,
                  update:false,
                },
            }
        },
        methods: {
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
        },
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";

    .tabs ul {
        width: 800px;
    }
    .pages {
        width: 96%;
        min-height: 600px;
        overflow: hidden;
        display: block;
        margin-left: 20px;
    }
    .content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .content li {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(27,86,200,0.14);
        color:#6DC1FF;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        padding-left: 37px;
        margin-bottom: 5px;
    }
    .content li em {
        float: left;
        font-style: normal;
        margin-right: 27px;
    }
    .content li .el-switch {
        float: left;
        margin-top: 20px;
    }

    .image-border {
        position: absolute;
        width: 20px;
        height: 20px;
    }

    .image-border1 {
        top: 0px;
        left: 25px;
        border-left: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border2 {
        top: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-top: 2px solid #6DC1FF;
    }

    .image-border3 {
        bottom: 0;
        left: 25px;
        border-bottom: 2px solid #6DC1FF;
        border-left: 2px solid #6DC1FF;
    }

    .image-border4 {
        bottom: 0;
        right: 12px;
        border-right: 2px solid #6DC1FF;
        border-bottom: 2px solid #6DC1FF;
    }
</style>