You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
507 lines
27 KiB
Vue
507 lines
27 KiB
Vue
3 years ago
|
<template>
|
||
|
|
|
||
|
|
<el-container class="wrapper">
|
||
|
|
|
||
|
|
<el-header class="header">
|
||
|
|
<div class="header-logo">
|
||
|
|
<!--<img alt="element-logo"-->
|
||
|
|
<!--src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1
|
||
|
|
<span>后台管理系统</span>
|
||
|
|
</div>
|
||
|
|
<div class="header-left">
|
||
|
|
<div class="header-toggle" @click="menuShow = !menuShow">
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="header-tabs-box">
|
||
|
|
<div class="header-tabs">
|
||
|
|
<tabs-view v-on:listenChildParentMenuHide="menuShow = false"></tabs-view>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header-right">
|
||
|
|
<el-dropdown trigger="click">
|
||
|
|
<!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
|
||
|
|
<span>{{username}}</span><i class="el-icon-arrow-down el-icon--right"></i>
|
||
|
|
<el-dropdown-menu slot="dropdown">
|
||
|
|
<el-dropdown-item><span @click="loginOut">退出登录</span></el-dropdown-item>
|
||
|
|
<el-dropdown-item disabled divided>主题切换</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</el-dropdown>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--新增界面-->
|
||
|
|
<el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="85%" top="5vh"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
:close-on-press-escape="false">
|
||
|
|
<el-form :model="passwordFormData" :rules="passwordFormDataRules" ref="passwordFormData">
|
||
|
|
<el-form-item label="原始密码" prop="old_password">
|
||
|
|
<el-input type="password" v-model="passwordFormData.old_password" auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="新密码" prop="new_password">
|
||
|
|
<el-input type="password" v-model="passwordFormData.new_password" auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="确认密码" prop="check_new_password">
|
||
|
|
<el-input type="password" v-model="passwordFormData.check_new_password" auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<div slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click.native="passwordFormVisible = !passwordFormVisible">取消</el-button>
|
||
|
|
<el-button type="primary" @click.native="addSubmit('passwordFormData')" :loading="passwordLoading">提交</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
</el-header>
|
||
|
|
|
||
|
|
<el-container class="container-box" v-bind:class="{ 'slide-in-left': menuShow,'slide-hide': isCollapse}">
|
||
|
|
<el-aside style="background-color: rgb(238, 241, 246)" class="menu" width="">
|
||
|
|
<div class="slide-toggle" :class="{'slide-toggle-open': isCollapse}" @click="toggleSideBar">
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
</div>
|
||
|
|
<el-menu
|
||
|
|
:default-active="onRoutes"
|
||
|
|
:collapse="isCollapse"
|
||
|
|
class="el-menu-vertical-demo"
|
||
|
|
theme="dark"
|
||
|
|
unique-opened
|
||
|
|
router>
|
||
|
|
<sidebar-item :routes='routers'></sidebar-item>
|
||
|
|
</el-menu>
|
||
|
|
</el-aside>
|
||
|
|
|
||
|
|
<el-main class="main">
|
||
|
|
<!--遮板-->
|
||
|
|
<div class="main-mask"
|
||
|
|
v-show="menuShow"
|
||
|
|
@click="menuShow = !menuShow"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<el-breadcrumb class="app-levelbar" separator="/">
|
||
|
|
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||
|
|
<span v-if='item.redirect==="noredirect"||index==levelList.length-1'
|
||
|
|
class="no-redirect">{{item.name}}</span>
|
||
|
|
<router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
|
||
|
|
</el-breadcrumb-item>
|
||
|
|
</el-breadcrumb>
|
||
|
|
|
||
|
|
<transition name="move" mode="out-in">
|
||
|
|
<router-view></router-view>
|
||
|
|
</transition>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</el-container>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from "vuex";
|
||
|
|
import SidebarItem from "./SidebarItem.vue";
|
||
|
|
import TabsView from "./TabsView.vue";
|
||
|
|
import { password } from "../../api/auth/login";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
let validatePass = (rule, value, callback) => {
|
||
|
|
if (value === "") {
|
||
|
|
callback(new Error("请输入密码"));
|
||
|
|
} else {
|
||
|
|
if (this.passwordFormData.check_new_password !== "") {
|
||
|
|
this.$refs.passwordFormData.validateField(
|
||
|
|
"check_new_password"
|
||
|
|
);
|
||
|
|
}
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
let validatePass2 = (rule, value, callback) => {
|
||
|
|
if (value === "") {
|
||
|
|
callback(new Error("请再次输入密码"));
|
||
|
|
} else if (value !== this.passwordFormData.new_password) {
|
||
|
|
callback(new Error("两次输入密码不一致!"));
|
||
|
|
} else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
menuShow: false,
|
||
|
|
levelList: null,
|
||
|
|
passwordLoading: false,
|
||
|
|
passwordFormVisible: false,
|
||
|
|
passwordFormData: {
|
||
|
|
old_password: "",
|
||
|
|
new_password: "",
|
||
|
|
check_new_password: ""
|
||
|
|
},
|
||
|
|
passwordFormDataRules: {
|
||
|
|
old_password: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入原始密码",
|
||
|
|
trigger: "blur"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
new_password: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请输入新密码",
|
||
|
|
trigger: "blur"
|
||
|
|
},
|
||
|
|
{ validator: validatePass, trigger: "blur" }
|
||
|
|
],
|
||
|
|
check_new_password: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请再次输入密码",
|
||
|
|
trigger: "blur"
|
||
|
|
},
|
||
|
|
{ validator: validatePass2, trigger: "blur" }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
SidebarItem,
|
||
|
|
TabsView
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters({
|
||
|
|
routers: "routers"
|
||
|
|
}),
|
||
|
|
onRoutes() {
|
||
|
|
return this.$route.path;
|
||
|
|
},
|
||
|
|
username() {
|
||
|
|
let username = this.$store.state.admin.userName;
|
||
|
|
return !username ? this.name : username;
|
||
|
|
},
|
||
|
|
isCollapse() {
|
||
|
|
return this.$store.state.app.sidebar.opened;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
methods: {
|
||
|
|
toggleSideBar() {
|
||
|
|
this.$store.dispatch("ToggleSideBar");
|
||
|
|
},
|
||
|
|
getBreadcrumb() {
|
||
|
|
let matched = this.$route.matched.filter(item => item.name);
|
||
|
|
const first = matched[0];
|
||
|
|
if (first && (first.name !== "首页" || first.path !== "")) {
|
||
|
|
matched = [{ name: "首页", path: "/" }].concat(matched);
|
||
|
|
}
|
||
|
|
this.levelList = matched;
|
||
|
|
},
|
||
|
|
loginOut() {
|
||
|
|
this.$confirm("此操作将退出系统, 是否继续?", "提示", {
|
||
|
|
confirmButtonText: "确定",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning"
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.$store.dispatch("loginOut").then(() => {
|
||
|
|
location.reload(); // 为了重新实例化vue-router对象 避免bug
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$message({
|
||
|
|
type: "error",
|
||
|
|
message: "操作失败"
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 显示修改密码界面
|
||
|
|
handlePassword() {
|
||
|
|
this.passwordFormVisible = true;
|
||
|
|
this.passwordFormData = {
|
||
|
|
old_password: "",
|
||
|
|
new_password: "",
|
||
|
|
check_new_password: ""
|
||
|
|
};
|
||
|
|
},
|
||
|
|
addSubmit(formName) {
|
||
|
|
this.$refs[formName].validate(valid => {
|
||
|
|
if (valid) {
|
||
|
|
this.passwordLoading = true;
|
||
|
|
let data = Object.assign({}, this.passwordFormData);
|
||
|
|
password(data)
|
||
|
|
.then(res => {
|
||
|
|
this.passwordLoading = false;
|
||
|
|
if (res.code) {
|
||
|
|
this.$message({
|
||
|
|
message: res.message,
|
||
|
|
type: "error"
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$message({
|
||
|
|
message: "修改成功",
|
||
|
|
type: "success"
|
||
|
|
});
|
||
|
|
// 刷新表单
|
||
|
|
this.$refs["passwordFormData"].resetFields();
|
||
|
|
this.passwordFormVisible = false;
|
||
|
|
this.$store.dispatch("loginOut").then(() => {
|
||
|
|
location.reload(); // 为了重新实例化vue-router对象 避免bug
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$message({
|
||
|
|
type: "error",
|
||
|
|
message: "操作失败"
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getBreadcrumb();
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route() {
|
||
|
|
this.getBreadcrumb();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style type="text/scss" lang="scss">
|
||
|
|
@import "../../styles/mixin";
|
||
|
|
|
||
|
|
.el-header {
|
||
|
|
background-color: #b3c0d1;
|
||
|
|
/*background-color: #eef1f6;*/
|
||
|
|
color: #333;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-aside {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-main {
|
||
|
|
padding: 25px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.main-mask {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 200%;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.move-enter-active,
|
||
|
|
.move-leave-active {
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.move-enter,
|
||
|
|
.move-leave {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper {
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-box {
|
||
|
|
height: 100%;
|
||
|
|
transition: -webkit-transform 0.3s ease-in-out;
|
||
|
|
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
width: 200px;
|
||
|
|
padding-left: 0;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*.menu::-webkit-scrollbar{*/
|
||
|
|
/*display: none;*/
|
||
|
|
/*}*/
|
||
|
|
|
||
|
|
.header {
|
||
|
|
position: relative;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header .el-dropdown {
|
||
|
|
@include fxied-center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-logo {
|
||
|
|
float: left;
|
||
|
|
height: 100%;
|
||
|
|
width: 190px;
|
||
|
|
line-height: 60px;
|
||
|
|
text-align: center;
|
||
|
|
img {
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-left {
|
||
|
|
height: 100%;
|
||
|
|
/*width: 10%;*/
|
||
|
|
float: left;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-tabs-box {
|
||
|
|
height: 100%;
|
||
|
|
max-width: 60%;
|
||
|
|
float: left;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-tabs {
|
||
|
|
overflow-y: hidden;
|
||
|
|
overflow-x: scroll;
|
||
|
|
width: 100%;
|
||
|
|
float: left;
|
||
|
|
height: 130%;
|
||
|
|
line-height: 60px;
|
||
|
|
@include clearfix;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-right {
|
||
|
|
position: absolute;
|
||
|
|
right: 5px;
|
||
|
|
display: flex;
|
||
|
|
width: 80px;
|
||
|
|
height: 100%;
|
||
|
|
margin-left: 10px;
|
||
|
|
.el-dropdown {
|
||
|
|
display: flex;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
display: inline-block;
|
||
|
|
@include text-overflow;
|
||
|
|
}
|
||
|
|
i {
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-levelbar {
|
||
|
|
height: 25px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-bottom: 1px solid #d8dce5;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*宽屏时出现*/
|
||
|
|
.slide-toggle {
|
||
|
|
display: block;
|
||
|
|
border-radius: 4px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
outline: none;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-toggle span {
|
||
|
|
display: inline-block;
|
||
|
|
width: 1px;
|
||
|
|
height: 12px;
|
||
|
|
background-color: rgba(135, 141, 153, 0.8);
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.slide-toggle-open span {
|
||
|
|
display: block;
|
||
|
|
margin: 5px auto;
|
||
|
|
width: 12px;
|
||
|
|
height: 1px;
|
||
|
|
}
|
||
|
|
.slide-toggle-open {
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 768px) {
|
||
|
|
.main-mask {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-hide {
|
||
|
|
.menu {
|
||
|
|
width: 64px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 768px) {
|
||
|
|
.slide-hide {
|
||
|
|
.menu {
|
||
|
|
left: -64px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.slide-hide.slide-in-left {
|
||
|
|
-webkit-transform: translate3d(64px, 0, 0) !important;
|
||
|
|
transform: translate3d(64px, 0, 0) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
left: -60%;
|
||
|
|
margin-right: 0;
|
||
|
|
opacity: 1;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
width: 60%;
|
||
|
|
z-index: 10;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-in-left {
|
||
|
|
min-width: 0;
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(60%, 0, 0);
|
||
|
|
transform: translate3d(60%, 0, 0);
|
||
|
|
overflow: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-toggle {
|
||
|
|
display: block;
|
||
|
|
/*background-color: #26a2ff;*/
|
||
|
|
border-radius: 4px;
|
||
|
|
/*border: 1px solid #fff;*/
|
||
|
|
height: 40px;
|
||
|
|
margin: 10px 0;
|
||
|
|
padding: 2px 6px;
|
||
|
|
outline: none;
|
||
|
|
width: 40px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-toggle span {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 4px;
|
||
|
|
margin: 5px auto;
|
||
|
|
background-color: rgba(135, 141, 153, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-logo {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|