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> <template>
<a-config-provider :locale="locale"> <a-config-provider :locale="locale">
<div id="app"> <div id="app" class="app app1">
<router-view/> <router-view class="scrollbar"/>
</div> </div>
</a-config-provider> </a-config-provider>
</template> </template>
@ -22,3 +22,26 @@ export default {
} }
} }
</script> </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 <a-layout-header
v-if="visible" v-if="visible"
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]" :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"> <div v-if="mode === 'sidemenu'" class="header">
<a-menu <a-menu
style="height: 55px"
mode="horizontal" mode="horizontal"
:default-selected-keys="this.defApp" :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-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-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 }} {{ item.name }}
</a-menu-item> </a-menu-item>
<user-menu></user-menu> <user-menu></user-menu>

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

@ -1,7 +1,7 @@
<template> <template>
<a-layout-sider <a-layout-sider
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]" :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
width="256px" width="230px"
:collapsible="collapsible" :collapsible="collapsible"
v-model="collapsed" v-model="collapsed"
:trigger="null"> :trigger="null">
@ -12,7 +12,7 @@
:theme="theme" :theme="theme"
:mode="mode" :mode="mode"
@select="onSelect" @select="onSelect"
style="padding: 16px 0px;"></s-menu> ></s-menu>
</a-layout-sider> </a-layout-sider>
</template> </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-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </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-list>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="消息" key="2"> <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>
<a-tab-pane tab="待办" key="3"> <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-tab-pane>
</a-tabs> </a-tabs>
</a-spin> </a-spin>
@ -63,7 +115,7 @@ export default {
this.loading = true this.loading = true
setTimeout(() => { setTimeout(() => {
this.loading = false this.loading = false
}, 2000) }, 100)
} else { } else {
this.loading = false this.loading = false
} }

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

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

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

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

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

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

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

@ -40,7 +40,7 @@
/> />
<!-- layout content --> <!-- 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> <multi-tab v-if="multiTab"></multi-tab>
<transition name="page-transition"> <transition name="page-transition">
<route-view /> <route-view />
@ -99,7 +99,7 @@ export default {
return '0' return '0'
} }
if (this.sidebarOpened) { if (this.sidebarOpened) {
return '256px' return '230px'
} }
return '80px' return '80px'
} }
@ -145,7 +145,7 @@ export default {
paddingCalc () { paddingCalc () {
let left = '' let left = ''
if (this.sidebarOpened) { if (this.sidebarOpened) {
left = this.isDesktop() ? '256px' : '80px' left = this.isDesktop() ? '230px' : '80px'
} else { } else {
left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0') 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"> <div slot="content" v-if="!this.$slots.headerContent && description">
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p> <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
<div class="link"> <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>
</div> </div>
<slot slot="extra" name="extra"> <slot slot="extra" name="extra">
@ -44,7 +38,7 @@
<keep-alive v-if="multiTab"> <keep-alive v-if="multiTab">
<router-view ref="content" /> <router-view ref="content" />
</keep-alive> </keep-alive>
<router-view v-else ref="content" /> <router-view v-else ref="content" style="margin: -12px -14px 0;"/>
</slot> </slot>
</div> </div>
</div> </div>

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

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