yxt_group
/
supervise
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

仓库集控页面样式的修改

master
fengdong777 2 years ago
parent
55cb6bf2ab
commit
e004cb68eb
7 changed files with 291 additions and 126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      warehousing-system/project_web/package.json
  2. BIN
      warehousing-system/project_web/public/favicon.ico
  3. 2
      warehousing-system/project_web/public/index.html
  4. 4
      warehousing-system/project_web/src/App.vue
  5. BIN
      warehousing-system/project_web/src/assets/images/logo.png
  6. BIN
      warehousing-system/project_web/src/assets/logo.png
  7. 410
      warehousing-system/project_web/src/components/Home.vue

1
warehousing-system/project_web/package.json
View File

@ -32,6 +32,7 @@
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1", "less": "^4.1.1",
"sass-loader": "^13.2.2",
"vue-cli-plugin-element": "^1.0.1", "vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
} }

BIN
warehousing-system/project_web/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 55 KiB

2
warehousing-system/project_web/public/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>汇融云眼贷后监管平台</title>
</head> </head>
<body> <body>
<noscript> <noscript>

4
warehousing-system/project_web/src/App.vue
View File

@ -12,5 +12,7 @@ export default {
</script> </script>
<style> <style>
body{
overflow:hidden
}
</style> </style>

BIN
warehousing-system/project_web/src/assets/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
warehousing-system/project_web/src/assets/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 55 KiB

410
warehousing-system/project_web/src/components/Home.vue
View File

@ -1,20 +1,35 @@
<template> <template>
<el-container class="home-container" > <el-container class="home-container">
<el-header class="navigation"> <el-header>
<div> <div class="navbar">
<!-- <img src="../assets/images/logo.png" /> --> <p class="breadcrumb-container">
<span>贷后监管系统</span> <img
src="@/assets/logo.png"
style="
width: 45px;
height: 45px;
margin-right: 10px;
margin-top: 2px;
"
/>汇融云眼贷后监管平台
</p>
<!-- <h3 class="breadcrumb-container">汇融供应链贷后监管平台h3> -->
<div class="right-menu">
<!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
<p>欢迎您, &nbsp;系统管理员</p>
<img src="@/assets/images/info.png" />
<!-- <img src="@/assets/images/dy.png" @click="logout"> -->
<span class="backToHome" @click="logout"
><i class="el-icon-back"></i>返回首页</span
>
</div>
</div> </div>
<el-button type="info" @click="logout" class="butt">退出</el-button>
</el-header> </el-header>
<el-container > <el-container>
<!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值--> <!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
<el-aside :width="isCollapse ? '64px' : '200px' " class="sidemenu"> <el-aside width="212px" class="sidemenu">
<!-- 这是左侧菜单--> <!-- 这是左侧菜单-->
<!--定义折叠项-->
<div class="leftCollapse" @click="collspseClick" style="background-color: #55557f ;color: #000000;">|||</div>
<!-- <!--
1.background-color="#2C3E50" 1.background-color="#2C3E50"
2.text-color="#fff" 文本颜色 2.text-color="#fff" 文本颜色
@ -25,185 +40,332 @@
7.default-active 默认选中的菜单 7.default-active 默认选中的菜单
8.router 启动以path路径当做请求地址 8.router 启动以path路径当做请求地址
--> -->
<div class="home-box">
<el-menu background-color="#55557f" text-color="#ffffff" <a
active-text-color="#ffff00" href="javascript:window.opener=null;window.open('','_self');window.close();"
unique-opened class="text-center"
:collapse="isCollapse" :collapse-transition="isCollapseTransition" router :default-active="defaultActive"> >平台首页</a
>
<a href="javascript:void(0);" class="text-center">仓库集控</a>
</div>
<el-menu
background-color="#0294d7"
text-color="#ffffff"
active-text-color="#fff"
unique-opened
router
:default-active="defaultActive"
class="home-left"
>
<!-- 定义一级菜单 --> <!-- 定义一级菜单 -->
<el-submenu :index="menu.id+''" v-for="menu in menuList" :key="menu.id"> <div class="one-title">
<el-submenu
:index="menu.id + ''"
v-for="menu in menuList"
:key="menu.id"
>
<!-- 定义一级菜单模版 --> <!-- 定义一级菜单模版 -->
<template slot="title"> <template slot="title">
<!-- 定义左侧图标--> <!-- 定义左侧图标-->
<!-- <i :class="menuIcon[menu.id]"></i> --> <!-- <i :class="menuIcon[menu.id]"></i> -->
<i class="el-icon-star-on"></i> <i class="el-icon-menu"></i>
<!-- 定义菜单名称--> <!-- 定义菜单名称-->
<span>{{menu.name}}</span> <span>{{ menu.name }}</span>
</template> </template>
<!-- 定义二级菜单 --> <!-- 定义二级菜单 -->
<el-menu-item :index="childrenMenu.path" v-for="childrenMenu in menu.children" :key="childrenMenu.id" <el-menu-item
@click="defaultActiveMenu(childrenMenu.path)"> :index="childrenMenu.path"
v-for="childrenMenu in menu.children"
:key="childrenMenu.id"
@click="defaultActiveMenu(childrenMenu.path)"
>
<template slot="title"> <template slot="title">
<i class="el-icon-menu"></i> <i class="el-icon-help "></i>
<span>{{childrenMenu.name}}</span> <span>{{ childrenMenu.name }}</span>
</template> </template>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</div>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container>
<!-- 定义主页面结构--> <!-- 定义主页面结构-->
<el-main> <el-main style="margin-top: -10px">
<!-- <el-container class="home-container"> <!-- <el-container class="home-container">
</el-container> --> </el-container> -->
<!-- 定义路由展现页面--> <!-- 定义路由展现页面-->
<router-view></router-view> <router-view></router-view>
</el-main> </el-main>
<el-footer class="footer" height="40px"
>Copyright © 技术支持集团 All Rights Reserved</el-footer
>
</el-container>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
<script> <script>
export default { export default {
// 初始化函数 // 初始化函数
created () { created() {
this.getMenuList() this.getMenuList();
// 设定模式选中按钮 // 设定模式选中按钮
this.defaultActive = window.sessionStorage.getItem('activeMenu') this.defaultActive = window.sessionStorage.getItem("activeMenu");
}, },
data () { data() {
return { return {
menuList: [], menuList: [],
menuIcon: { menuIcon: {
1: 'iconfont iconuser', 1: "iconfont iconuser",
3: 'iconfont iconshangpin', 3: "iconfont iconshangpin",
5: 'iconfont iconicon--copy', 5: "iconfont iconicon--copy",
7: 'iconfont iconquanxian', 7: "iconfont iconquanxian",
8: 'iconfont iconziyuan' 8: "iconfont iconziyuan",
}, },
// 定义是否折叠
isCollapse: false,
// 是否展现折叠动态效果
isCollapseTransition: false,
// 定义默认高亮 // 定义默认高亮
defaultActive: '', defaultActive: "",
user: '' user: "",
};
}
}, },
methods: { methods: {
logout () { logout() {
// 1.删除session中的记录 // 1.删除session中的记录
window.sessionStorage.clear() window.sessionStorage.clear();
// 2.要求跳转到用户登录页面 // 2.要求跳转到用户登录页面
this.$router.push('/login') this.$router.push("/login");
}, },
async getMenuList () { async getMenuList() {
// 1.查询左侧菜单 // 1.查询左侧菜单
const { data: result } = const { data: result } = await this.$http.get("/rights/getRightsList");
await this.$http.get('/rights/getRightsList') if (result.status !== 200) return this.$message.error("获取权限列表失败");
if (result.status !== 200) return this.$message.error('获取权限列表失败') this.menuList = result.data;
this.menuList = result.data
}, },
// 设定左侧折叠展开效果 // 设定左侧折叠展开效果
collspseClick () { collspseClick() {
this.isCollapse = !this.isCollapse this.isCollapse = !this.isCollapse;
}, },
defaultActiveMenu (activeMenu) { defaultActiveMenu(activeMenu) {
// 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
window.sessionStorage.setItem('activeMenu', activeMenu) window.sessionStorage.setItem("activeMenu", activeMenu);
this.defaultActive = activeMenu this.defaultActive = activeMenu;
} },
}, },
mounted () { mounted() {
// this.user = window.sessionStorage.getItem('token').substr(32) // this.user = window.sessionStorage.getItem('token').substr(32)
this.user = "9a3860f0f2af471982e919657099913dddd" this.user = "9a3860f0f2af471982e919657099913dddd";
} },
} };
</script> </script>
<!-- 防止样式重叠 --> <!-- 防止样式重叠 -->
<style lang="less" scoped> <style lang="less" scoped>
.el-header { /deep/ [data-v-8dc7cce2] .el-submenu__title {
background-color: #55ffff; height: 40px;
display: flex; //灵活的盒子容器 line-height: 40px;
justify-content: space-between; //左右对齐 font-size: 16px;
align-items: center; //文本元素居中对齐 color: #303133;
color: #232323; //设定字体颜色 cursor: pointer;
padding-left: 1px; transition: border-color 0.3s, background-color 0.3s, color 0.3s;
box-sizing: border-box;
>div { }
display: flex; /deep/ .el-submenu .el-menu-item {
align-items: center; height: 40px;
line-height: 40px;
span { padding: 0 45px;
margin-left: 15px; min-width: 200px;
font-size: 25px; //设定字体高度 }
} /deep/ .el-menu-item.is-active {
} color: #fff;
background-color: #087dba!important;
}
/deep/ .el-submenu__title i {
color: #fff;
}
.el-aside {
background-color: #55007f;
.el-menu {
border-right: none;
} }
}
.el-aside { .el-main {
background-color: #55007f; background-color: #eeeeee;
}
.home-container {
height: 100%;
width: 100%;
}
.iconfont {
margin-right: 8px;
}
// 导航栏渐变
.navbar {
width: 100%;
height: 60px;
overflow: hidden;
position: relative;
margin-left: -20px;
background-color: #0294d7;
padding: 0 30px;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
.el-menu { &:hover {
border-right: none; background: rgba(0, 0, 0, 0.025);
} }
} }
.el-main { .breadcrumb-container {
background-color: #EEEEEE; display: flex;
align-items: center;
color: #fff;
font-size: 26px;
line-height: 58px;
margin: 0;
float: left;
} }
.home-container { .right-menu {
float: right;
height: 100%; height: 100%;
width: 100%; margin-right: 20px;
line-height: 55px;
color: #fff;
} &:focus {
outline: none;
}
p {
display: inline-block;
margin: 0;
padding: 0;
padding: 0 15px;
}
img {
vertical-align: middle;
margin: 0 10px;
cursor: pointer;
}
.iconfont { .backToHome {
margin-right: 8px; display: inline-block;
vertical-align: middle;
padding: 0 15px;
cursor: pointer;
}
.backToHome:hover {
background: #087dba;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
} }
// 导航栏渐变
.navigation{
background:linear-gradient(45deg,#55557f,#ffffff);
color: #ffffff;
} }
// 按钮 // 按钮
.butt{ .butt {
background-color: #cecece; background-color: #cecece;
border-color: #cecece; border-color: #cecece;
} }
.sidemenu{ .sidemenu {
background-color: #55557f; background-color: #55557f;
} }
//定义折叠项 //定义折叠项
.leftCollapse { .leftCollapse {
//设定背景色 //设定背景色
background-color: #708090; background-color: #708090;
//定义字体大小 //定义字体大小
font-size: 10px; font-size: 10px;
//定义行高 //定义行高
line-height: 30px; line-height: 30px;
//定义颜色 //定义颜色
color: #FFFFFF; color: #ffffff;
//设置居中 //设置居中
text-align: center;
//设定字符间距
letter-spacing: 4px;
//鼠标放上之后设置为小手
cursor: pointer;
}
.el-icon-star-on {
color: white;
}
.el-icon-menu {
color: white;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
line-height: 40px;
background: #e9f1f7;
text-align: center;
font-size: 14px;
color: #666;
margin-left: -211px;
}
.home-box {
position: fixed;
top: 60px;
left: 0;
background-color: #0294d7;
border: 1px solid #087dba;
line-height: 40px;
width: 210px;
z-index: 1000;
a {
display: inline-block;
line-height: 40px;
box-sizing: border-box;
width: 50%;
text-align: center; text-align: center;
//设定字符间距 font-size: 16px;
letter-spacing: 4px; font-weight: 500;
//鼠标放上之后设置为小手 color: #ffffff;
cursor: pointer; text-decoration: none;
} }
.el-icon-star-on{ a:last-child {
color: white; border: 0;
} background-color: #087dba;
.el-icon-menu{ }
color: white; }
} .home-left{
height: 100%;
.one-title{
margin-top: 40px;
.el-menu-item i {
color: #fff;
}
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save