gitee/snowy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

【更新】更新前端布局多处细节，更协调

Browse Source
This commit is contained in:
小诺 2021-02-18 13:20:30 +08:00
parent 3840831a56
commit 69904749ea
10 changed files with 114 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
_web/src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<a-config-provider :locale="locale">
<div id="app">
<router-view/>
<div id="app" class="app app1">
<router-view class="scrollbar"/>
</div>
</a-config-provider>
</template>
@ -22,3 +22,26 @@ export default {
}
}
</script>
<style>
.app {
overflow: auto;
border : none;
}
.scrollbar {
margin: 0 auto;
}
.app1::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
}
.app1::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 6px;
background : #aaa;
}
.app1::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 8px;
background : #FFFFFF;
}
</style>

6
_web/src/components/GlobalHeader/GlobalHeader.vue
View File

@ -4,18 +4,18 @@
<a-layout-header
v-if="visible"
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
:style="{ padding: '0' }">
:style="{ padding: '0', height: '55px' }">
<div v-if="mode === 'sidemenu'" class="header">
<a-menu
style="height: 55px"
mode="horizontal"
:default-selected-keys="this.defApp"
style="border-bottom:0px;lineHeight:58px;"
>
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
<a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px;" @click="switchApp(item.code)">
<a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px; line-height: 55px; padding-left: 10px; padding-right: 10px" @click="switchApp(item.code)">
{{ item.name }}
</a-menu-item>
<user-menu></user-menu>

4
_web/src/components/Menu/SideMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<a-layout-sider
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
width="256px"
width="230px"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
@ -12,7 +12,7 @@
:theme="theme"
:mode="mode"
@select="onSelect"
style="padding: 16px 0px;"></s-menu>
></s-menu>
</a-layout-sider>
</template>

58
_web/src/components/NoticeIcon/NoticeIcon.vue
View File

@ -29,13 +29,65 @@
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-tab-pane>
<a-tab-pane tab="消息" key="2">
123
<a-list>
<a-list-item>
<a-list-item-meta title="你收到了 14 份新周报" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-tab-pane>
<a-tab-pane tab="待办" key="3">
123
<a-list>
<a-list-item>
<a-list-item-meta title="你收到了 14 份新周报" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-tab-pane>
</a-tabs>
</a-spin>
@ -63,7 +115,7 @@ export default {
this.loading = true
setTimeout(() => {
this.loading = false
}, 2000)
}, 100)
} else {
this.loading = false
}

8
_web/src/components/PageHeader/PageHeader.vue
View File

@ -65,11 +65,11 @@ export default {
<style lang="less" scoped>
.page-header {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
padding: 10px 32px 0;
border-bottom: 0px solid #e8e8e8;
.breadcrumb {
margin-bottom: 16px;
margin-bottom: 10px;
}
.detail {
@ -97,7 +97,7 @@ export default {
width: 100%;
.avatar {
margin-bottom: 16px;
margin-bottom: 10px;
}
}

32
_web/src/components/global.less
View File

@ -67,7 +67,7 @@ body {
.trigger {
font-size: 20px;
line-height: 64px;
line-height: 55px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
@ -128,7 +128,7 @@ body {
transition: width 0.2s;
&.ant-header-side-opened {
width: calc(100% - 256px);
width: calc(100% - 230px);
}
&.ant-header-side-closed {
@ -138,8 +138,8 @@ body {
}
.header {
height: 64px;
padding: 0 12px 0 0;
height: 55px;
// padding: 0 12px 0 0;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative;
@ -152,6 +152,7 @@ body {
height: 100%;
.action {
line-height: 55px;
cursor: pointer;
padding: 0 12px;
display: inline-block;
@ -164,7 +165,7 @@ body {
}
.avatar {
margin: 20px 8px 20px 0;
margin: 15px 8px 15px 0;
color: #1890ff;
background: hsla(0, 0%, 100%, 0.85);
vertical-align: middle;
@ -255,14 +256,14 @@ body {
margin: auto;
padding-left: 0;
display: flex;
height: 64px;
height: 55px;
.ant-menu.ant-menu-horizontal {
max-width: 835px;
flex: 0 1 835px;
border: none;
height: 64px;
line-height: 64px;
height: 55px;
line-height: 55px;
}
.header-index-left {
@ -272,9 +273,9 @@ body {
.logo.top-nav-header {
flex: 0 0 165px;
width: 165px;
height: 64px;
height: 55px;
position: relative;
line-height: 64px;
line-height: 55px;
transition: all 0.3s;
overflow: hidden;
@ -300,7 +301,7 @@ body {
.header-index-right {
flex: 0 0 238px;
align-self: flex-end;
height: 64px;
height: 55px;
overflow: hidden;
.content-box {
@ -333,8 +334,8 @@ body {
// 内容区
.layout-content {
margin: 24px 24px 0px;
height: 100%;
height: 64px;
//height: 100%;
//height: 64px;
padding: 0 12px 0 0;
}
@ -394,12 +395,13 @@ body {
height: 100%;
}
// logo区域样式
.logo {
position: relative;
height: 64px;
height: 55px;
padding-left: 24px;
overflow: hidden;
line-height: 64px;
line-height: 55px;
background: #002140;
transition: all .3s;

6
_web/src/components/tools/UserMenu.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="user-wrapper">
<div class="content-box">
<a href="https://www.xiaonuo.vip" target="_blank">
<!--<a href="https://www.xiaonuo.vip" target="_blank">
<span class="action">
<a-icon type="question-circle-o"></a-icon>
</span>
</a>
</a>-->
<notice-icon class="action"/>
@ -59,7 +59,7 @@
<a-menu
mode="inline"
:default-selected-keys="this.defApp"
style="border-bottom:0px;lineHeight:58px;"
style="border-bottom:0px;lineHeight:55px;"
>
<a-menu-item v-for="(item) in userInfo.apps" :key="item.code" style="top:0px;" @click="switchApp(item.code)">
{{ item.name }}

6
_web/src/layouts/BasicLayout.vue
View File

@ -40,7 +40,7 @@
/>
<!-- layout content -->
<a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
<a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '55px' : '0' }">
<multi-tab v-if="multiTab"></multi-tab>
<transition name="page-transition">
<route-view />
@ -99,7 +99,7 @@ export default {
return '0'
}
if (this.sidebarOpened) {
return '256px'
return '230px'
}
return '80px'
}
@ -145,7 +145,7 @@ export default {
paddingCalc () {
let left = ''
if (this.sidebarOpened) {
left = this.isDesktop() ? '256px' : '80px'
left = this.isDesktop() ? '230px' : '80px'
} else {
left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
}

8
_web/src/layouts/PageView.vue
View File

@ -7,12 +7,6 @@
<div slot="content" v-if="!this.$slots.headerContent && description">
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" @click="() => { link.callback && link.callback() }">
<a-icon :type="link.icon" />
<span>{{ link.title }}</span>
</a>
</template>
</div>
</div>
<slot slot="extra" name="extra">
@ -44,7 +38,7 @@
<keep-alive v-if="multiTab">
<router-view ref="content" />
</keep-alive>
<router-view v-else ref="content" />
<router-view v-else ref="content" style="margin: -12px -14px 0;"/>
</slot>
</div>
</div>

2
_web/src/views/system/dashboard/Analysis.vue
View File

@ -72,7 +72,7 @@
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{width: '256px'}" />
<a-range-picker :style="{width: '230px'}" />
</div>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-row>