FE_bankTeaching/src/pages/manage/index/index.vue

<template>
    <div class="box" :style="full?'height:calc(100vh - 60px);':'height: 80vh;'">
        <div class="nav">
            <!-- <div class="top" :style="full?'border-radius:0':'border-top-left-radius: 20px;'"> -->
            <div class="top" :style="full?'border-radius:0':'border-top-left-radius: 20px;'">
                <p style="margin:auto">商业银行系统</p>
            </div>
            <navbar class="body"></navbar>
        </div>
        <div class="manage-layout">
            <div class="top" :style="full?'border-radius:0':'border-top-right-radius: 20px;'">
                <img v-show="!full" src="../../../assets/svg/fullscreen.svg" alt="" @click="handleFullscreen">
                <img v-show="full" src="../../../assets/svg/shrink.svg" alt="" @click="shrink">
                <i @click="close" class="el-icon-close"></i>
            </div>
            <div class="manage-content">
                <transition name="fade">
                    <router-view class="manage-view"></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
import navbar from '../navbar'
import { mapState } from 'vuex'
export default {
    name: 'index',
    data() {
        return {
            fullscreen:this.$store.state.system.fullScreen,// 是否全屏--store读取
        }
    },
    components: {
        navbar,
    },
    computed:{
        full:function(){
            return this.$store.state.system.fullScreen
        }
    },
    created() {

    },
    methods: {
        close(){
            this.$router.push('/counter/list/')
        },
        handleFullscreen(){
            this.fullscreen = true
            this.$store.commit('system/changeFullscreen',true)
        },
        shrink(){
            this.fullscreen = false
            this.$store.commit('system/changeFullscreen',false)
        },
    }
};
</script>

<style lang="scss" scoped>
    .box{
        display: flex;
        min-width: 1300px;
        margin-top: 70px;
        overflow: auto;
        .nav{
            width: 270px;
            height: 100%;
            border-top-left-radius: 20px;
            display: flex;
            flex-direction: column;
            .top{
                height: 50px;
                font-size: 20px;
                display: flex;
                align-items: center;
                text-align: center;
                border-top-left-radius: 15px;
                color: #B3B3B3;
                background: #222428;
            }
            .body{
                flex: 1;
            }
        }
        .manage-layout{
            width: calc(100% - 270px);
            // background: #fff;
            background:transparent;
            display: flex;
            flex-direction: column;
            .top{
                height: 50px;
                font-size: 30px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                text-align: center;
                color: #000;
                background: #e6e6e6;
                border-top-right-radius: 20px;
                i{
                    margin-right: 10px;
                    cursor: pointer;
                }
            }
            .manage-content{
                flex: 1;
                position: relative;
                border-bottom-right-radius: 20px;
                overflow: hidden;
                .manage-view{
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    background: #fff;
                }
            }
        }
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0.5;
    }
    // el-input变红
    /deep/ .el-input input{
        &:focus {
            border-color: skyblue;
        }
    }

    // 校验错误变红
    /deep/ .is-error input {
        border-color: #f40!important;;
    }
    /deep/ .text-xl p {
        font-size: 18px!important;
    }
    /deep/ .el-form-item .el-form-item__label {
        font-size: 18px!important;
    }
    /deep/ .el-menu-item {
        font-size: 18px;
    }
    // /deep/ .el-form-item__error {
    //     top: 105%;
    //     left: auto;
    //     right: 0;
    //     color: #FFA94E;
    // }

    @media screen and (min-width: 1200px) and (max-width: 1900px) {
        .box{
            display: flex;
            min-width: 80vw;
            margin-top: 6vh;
            overflow: auto;
            height: 80vh;
            .nav{
                width: 25vw;
                height: 80vh;
                overflow: auto;
                border-top-left-radius: 20px;
                display: flex;
                flex-direction: column;
                .top{
                    min-height: 10vh;
                    font-size: 3vh;
                    line-height: 3vh;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    border-top-left-radius: 15px;
                    color: #B3B3B3;
                    background: #222428;
                }
                .body{
                    flex: 1;
                }
            }
            .manage-layout{
                width: calc(100% - 270px);
                height: 80vh;
                overflow: auto;
                // background: #fff;
                background:transparent;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                .top{
                    min-height: 10vh;
                    font-size: 30px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    text-align: center;
                    color: #000;
                    background: #e6e6e6;
                    border-top-right-radius: 20px;
                    i{
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
                .manage-content{
                    flex: 1;
                    position: relative;
                    .manage-view{
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        background: #fff;
                    }
                }
            }
        }
    }
</style>