公共样式 #8

Merged
juzi merged 1 commits from zjl into test 2023-08-03 11:18:18 +08:00
15 changed files with 178 additions and 78 deletions

View File

@ -121,7 +121,7 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 16px;
} }
.components-container { .components-container {
@ -129,10 +129,6 @@ aside {
position: relative; position: relative;
} }
.pagination-container {
margin-top: 30px;
}
.text-center { .text-center {
text-align: center text-align: center
} }

View File

@ -112,13 +112,13 @@
} }
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { // .pagination-container {
position: relative; // position: relative;
height: 25px; // height: 25px;
margin-bottom: 10px; // margin-bottom: 10px;
margin-top: 15px; // margin-top: 15px;
padding: 10px 20px !important; // padding: 10px 20px !important;
} // }
/* tree border */ /* tree border */
.tree-border { .tree-border {

View File

@ -105,6 +105,10 @@
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
} }
} }
& .theme-dark .el-submenu .el-menu-item.is-active {
background-color: #0b50ff !important;
}
} }
.hideSidebar { .hideSidebar {

View File

@ -9,20 +9,20 @@ $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; // $base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5; // $base-menu-color-active:#f4f4f5;
$base-menu-background:#304156; // $base-menu-background:#304156;
$base-logo-title-color: #ffffff; // $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); // $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; // $base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529; // $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; // $base-sub-menu-background:#1f2d3d;
$base-sub-menu-hover:#001528; // $base-sub-menu-hover:#001528;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /*
$base-menu-color:hsla(0,0%,100%,.65); $base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff; $base-menu-color-active:#fff;
$base-menu-background:#001529; $base-menu-background:#001529;
@ -35,8 +35,20 @@ $base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17; $base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#001528;
*/ */
$base-menu-color: #fff;
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-sidebar-width: 280px; $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#0B253F;
$base-sub-menu-hover:#0b50ff;
$base-sidebar-width: 248px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

View File

@ -68,8 +68,12 @@ export default {
margin-left: 8px; margin-left: 8px;
.no-redirect { .no-redirect {
color: #97a8be; color: rgba(0, 0, 0, 0.65);
cursor: text; cursor: text;
} }
} }
.app-breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
color: rgba(0, 0, 0, 0.45);
}
</style> </style>

View File

@ -28,11 +28,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
/* 50= navbar 50 */ /* 48= navbar 48 */
min-height: calc(100vh - 56px); min-height: calc(100vh - 56px);
width: 100%; min-width: calc(100vh - 280px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 8px 14px 0px 16px;
border-radius: 8px;
background-color: #fff;
} }
.fixed-header + .app-main { .fixed-header + .app-main {
@ -41,8 +44,8 @@ export default {
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 56 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 128px); min-height: calc(100vh - 120px - 8px);
} }
.fixed-header + .app-main { .fixed-header + .app-main {

View File

@ -7,16 +7,16 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" /> <!-- <search id="header-search" class="right-menu-item" /> -->
<!-- 站内信 --> <!-- 站内信 -->
<!-- <notify-message class="right-menu-item hover-effect" /> --> <!-- <notify-message class="right-menu-item hover-effect" /> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
</template> </template>
@ -30,9 +30,9 @@
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item @click.native="setting = true"> <!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span> <span>布局设置</span>
</el-dropdown-item> </el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span>退出登录</span> <span>退出登录</span>
</el-dropdown-item> </el-dropdown-item>
@ -104,7 +104,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 56px; height: 48px; // 56
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #fff;

View File

@ -23,7 +23,7 @@
: variables.menuLightColor : variables.menuLightColor
" "
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" active-text-color="#fff"
:collapse-transition="false" :collapse-transition="false"
mode="vertical"> mode="vertical">
<!-- 根据 sidebarRouters 路由生成菜单 --> <!-- 根据 sidebarRouters 路由生成菜单 -->

View File

@ -78,8 +78,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.scroll-container { .scroll-container {
background: #f9f9f9; // background: #f9f9f9;
box-shadow: inset 0 0 8px 1px #e8e8e8; // box-shadow: inset 0 0 8px 1px #e8e8e8;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
overflow: hidden; overflow: hidden;

View File

@ -259,7 +259,7 @@ export default {
height: 42px; height: 42px;
width: 100%; width: 100%;
background: #fff; background: #fff;
border-bottom: 1px solid #d8dce5; // border-bottom: 1px solid #d8dce5;
border-top: 1px solid #d8dce5; border-top: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
@ -270,17 +270,16 @@ export default {
cursor: pointer; cursor: pointer;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
border: 1px solid #d8dce5; color: rgba(0, 0, 0, 0.45);
color: #495060; background: #F4F4F4FF;
background: #fff;
padding: 0 8px 0 12px; padding: 0 8px 0 12px;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
margin-left: 4px; margin-left: 8px;
border-radius: 0; border-radius: 4px;
&:first-of-type { &:first-of-type {
margin-left: 15px; margin-left: 32px;
padding-right: 12px; padding-right: 12px;
} }

View File

@ -8,7 +8,7 @@
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<app-main /> <app-main />
<div class="main-footer" style="color: #777; border-top: 1px solid #eee; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">&copy; 中建材智能自动化2023</div> <div class="main-footer" style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">&copy; 中建材智能自动化研究院有限公司</div>
<right-panel> <right-panel>
<settings /> <settings />
</right-panel> </right-panel>

View File

@ -2,7 +2,7 @@ $editorTabsborderColor: #121315;
body, html{ body, html{
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #fff; background: #F2F4F9;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -138,4 +138,41 @@ input, textarea{
} }
.el-upload__tip{ .el-upload__tip{
line-height: 1.2; line-height: 1.2;
}
// 滚动条
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color:rgba(144,147,153,0);
}
::-webkit-scrollbar-corner {
background-color:rgba(144,147,153,0);
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(144,147,153,0);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(144,147,153,.5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color .3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144,147,153,.3);
} }

View File

@ -1,5 +1,5 @@
import axios from 'axios' import axios from 'axios'
import {Message, MessageBox, Notification} from 'element-ui' import {Message, MessageBox, Notification, Loading} from 'element-ui'
import store from '@/store' import store from '@/store'
import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth' import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'
import errorCode from '@/utils/errorCode' import errorCode from '@/utils/errorCode'
@ -30,8 +30,44 @@ const service = axios.create({
// 禁用 Cookie 等信息 // 禁用 Cookie 等信息
withCredentials: false, withCredentials: false,
}) })
/*
当页面有两个接口时第一个接口loading的close事件会直接将第二个接口的loading实例也close
每次创建Loading实例的时候判断当前是否存在如果当前还没有Loading实例就创建一个
如果有就不会再创建而是计数每次关闭的时候判断当前的计数
如果是0了就关闭否则也计数减一直到为0的时候表示当前所有页面所有接口都返回结束了
此时执行关闭Loading.close()操作
*/
let loadingInstance = null
function startLoading() {
loadingInstance = Loading.service({
fullscreen: false,
text: '拼命加载中...',
background: 'rgba(0, 0, 0, 0.1)'
})
}
function endLoading() {
loadingInstance.close()
}
let needLoadingRequestCount = 0
function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
// request拦截器 // request拦截器
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
showFullScreenLoading()
// 是否需要设置 token // 是否需要设置 token
const isToken = (config.headers || {}).isToken === false const isToken = (config.headers || {}).isToken === false
if (getAccessToken() && !isToken) { if (getAccessToken() && !isToken) {
@ -68,12 +104,14 @@ service.interceptors.request.use(config => {
} }
return config return config
}, error => { }, error => {
tryHideFullScreenLoading()
console.log(error) console.log(error)
Promise.reject(error) Promise.reject(error)
}) })
// 响应拦截器 // 响应拦截器
service.interceptors.response.use(async res => { service.interceptors.response.use(async res => {
tryHideFullScreenLoading()
// 未设置状态码则默认成功状态 // 未设置状态码则默认成功状态
const code = res.data.code || 200; const code = res.data.code || 200;
// 获取错误信息 // 获取错误信息
@ -151,6 +189,7 @@ service.interceptors.response.use(async res => {
return res.data return res.data
} }
}, error => { }, error => {
tryHideFullScreenLoading()
console.log('err' + error) console.log('err' + error)
let {message} = error; let {message} = error;
if (message === "Network Error") { if (message === "Network Error") {

View File

@ -76,20 +76,6 @@ const tableProps = [
label: '备注' label: '备注'
} }
] ]
const tableBtn = [
{
type: 'edit',
btnName: '编辑'
},
{
type: 'cancel',
btnName: '作废'
},
{
type: 'delete',
btnName: '删除'
}
]
export default { export default {
name: "GroupClass", name: "GroupClass",
components: { GroupClassAdd }, components: { GroupClassAdd },
@ -120,8 +106,25 @@ export default {
} }
], ],
tableProps, tableProps,
tableBtn, tableBtn: [
tableH: this.tableHeight(275), this.$auth.hasPermi('base:group-classes:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
{
type: 'cancel',
btnName: '作废'
},
this.$auth.hasPermi('base:group-classes:delete')
? {
type: 'delete',
btnName: '删除'
}
: undefined
].filter((v) => v),
tableH: this.tableHeight(260),
// //
total: 0, total: 0,
// //
@ -140,7 +143,7 @@ export default {
}, },
created() { created() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = this.tableHeight(275) this.tableH = this.tableHeight(260)
}) })
this.getList() this.getList()
}, },

View File

@ -79,16 +79,6 @@ const tableProps = [
subcomponent: StatusBtn subcomponent: StatusBtn
} }
] ]
const tableBtn = [
{
type: 'edit',
btnName: '编辑'
},
{
type: 'delete',
btnName: '删除'
}
]
export default { export default {
name: "GroupTeam", name: "GroupTeam",
components: { GroupTeamAdd }, components: { GroupTeamAdd },
@ -125,8 +115,21 @@ export default {
} }
], ],
tableProps, tableProps,
tableBtn, tableBtn: [
tableH: this.tableHeight(275), this.$auth.hasPermi('base:group-team:update')
? {
type: 'edit',
btnName: '编辑'
}
: undefined,
this.$auth.hasPermi('base:group-team:delete')
? {
type: 'delete',
btnName: '删除'
}
: undefined
].filter((v) => v),
tableH: this.tableHeight(260),
// //
total: 0, total: 0,
// //
@ -146,7 +149,7 @@ export default {
}, },
created() { created() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = this.tableHeight(275) this.tableH = this.tableHeight(260)
}) })
this.getList(); this.getList();
}, },