JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature-ui-fix' into feature-ui-fix

Browse Source
This commit is contained in:
bupengxiang
2023-08-02 16:03:21 +08:00
parent 1c6e429fe6 d16fc829c0
commit b99ce3f987
5 changed files with 180 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/public/color.less
Vendored
+4 -2
View File
@@ -2176,7 +2176,9 @@ this.tinycolor = tinycolor;
color: rgba(0, 0, 0, 0.45);
}
.layout .header {
background-color: @primary-color !important;
//background-color: @primary-color !important;
background-color: #fff !important;
}
i.trigger:hover {
background: rgba(0, 0, 0, 0.025);
@@ -5350,7 +5352,7 @@ form .ant-upload {
}
.ant-menu-submenu > .ant-menu {
//background-color: #fff;
background: none;
background: none !important;
border-radius: 4px;
}
.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
jero-web/src/components/layouts/TabLayout.vue
+129 -80
View File
@@ -3,21 +3,24 @@
<!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
<!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multipage"
:active-key="activePage"
class="tab-layout-tabs"
style="height:52px"
:hide-add="true"
type="editable-card"
@change="changePage"
@tabClick="tabCallBack"
@edit="editPage">
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
</a-tab-pane>
</a-tabs>
<div class='topHeadertabList'>
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multipage"
:active-key="activePage"
class="tab-layout-tabs "
style="height:52px"
:hide-add="true"
type="editable-card"
@change="changePage"
@tabClick="tabCallBack"
@edit="editPage">
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" >
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title}}</span>
</a-tab-pane>
</a-tabs>
</div>
<div style="margin: 12px 12px 0;">
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
<keep-alive v-if="multipage">
@@ -298,85 +301,131 @@ export default {
</script>
<style lang="less">
.contextmenu .ant-menu li{
color: #333 !important;
}
.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab.ant-tabs-tab-active{
color: #0F6FC4;
text-shadow: none;
background-color: #fff!important;
}
.topHeadertabList .ant-tabs-nav{
/*
* The following styles are auto-applied to elements with
* transition="page-transition" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the page transition by editing
* these styles.
*/
}
.topHeadertabList .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
border-radius: 0;
line-height: 40px!important;
}
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
border-bottom: none!important;
border-top: none!important;
border-left: none!important;
border-right: 1px solid #E5E6EB!important;
}
.topHeadertabList .ant-tabs-nav-wrap{
border-right: 1px solid #E5E6EB!important;
border-left: 1px solid #E5E6EB!important;
}
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab{
padding: 0 36px 0 12px!important;
margin-right: 0!important;
background-color: #F7F8FA!important;
}
.topHeadertabList .tab-layout-tabs.ant-tabs.ant-tabs-card .ant-tabs-tab .ant-tabs-close-x{
right: 15px;
opacity: 1!important;
}
.topHeadertabList .tab-layout-tabs.ant-tabs{
border-bottom: 1px solid #E5E6EB;
height: 40px!important;
}
.topHeadertabList .ant-tabs-nav-container,.topHeadertabList .tab-layout-tabs.ant-tabs .ant-tabs-bar{
margin-top: 0;
}
.topHeadertabList .ant-tabs-nav-wrap,.topHeadertabList .tab-layout-tabs.ant-tabs{
background: #F7F8FA;
}
</style>
<style lang="less" >
.page-transition-enter {
opacity: 0;
/*
* The following styles are auto-applied to elements with
* transition="page-transition" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the page transition by editing
* these styles.
*/
.page-transition-enter {
opacity: 0;
}
.page-transition-leave-active {
opacity: 0;
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*美化弹出Tab样式*/
.ant-tabs-nav-container {
margin-top: 4px;
}
/* 修改 ant-tabs 样式 */
.tab-layout-tabs.ant-tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: white;
padding: 0 20px;
.ant-tabs-bar {
margin: 4px 0 0;
border: none;
}
.page-transition-leave-active {
opacity: 0;
}
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.tab-layout-tabs.ant-tabs {
/*美化弹出Tab样式*/
.ant-tabs-nav-container {
margin-top: 4px;
}
&.ant-tabs-card .ant-tabs-tab {
/* 修改 ant-tabs 样式 */
.tab-layout-tabs.ant-tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: white;
padding: 0 20px;
padding: 0 24px !important;
background-color: white !important;
margin-right: 10px !important;
.ant-tabs-bar {
margin: 4px 0 0;
border: none;
.ant-tabs-close-x {
width: 12px !important;
height: 12px !important;
opacity: 0 !important;
cursor: pointer !important;
font-size: 12px !important;
margin: 0 !important;
position: absolute;
top: 36%;
right: 6px;
}
&:hover .ant-tabs-close-x {
opacity: 1 !important;
}
}
.tab-layout-tabs.ant-tabs {
&.ant-tabs-card .ant-tabs-tab {
padding: 0 24px !important;
background-color: white !important;
margin-right: 10px !important;
.ant-tabs-close-x {
width: 12px !important;
height: 12px !important;
opacity: 0 !important;
cursor: pointer !important;
font-size: 12px !important;
margin: 0 !important;
position: absolute;
top: 36%;
right: 6px;
}
&:hover .ant-tabs-close-x {
opacity: 1 !important;
}
}
}
.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
.ant-tabs-tab {
border: none !important;
border-bottom: 1px solid transparent !important;
}
.tab-layout-tabs.ant-tabs.ant-tabs-card > .ant-tabs-bar {
.ant-tabs-tab {
border: none !important;
border-bottom: 1px solid transparent !important;
}
.ant-tabs-tab-active {
border-color: @primary-color!important;
}
.ant-tabs-tab-active {
border-color: @primary-color!important;
}
}
</style>
jero-web/src/components/menu/Contextmenu.vue
+6
View File
@@ -67,5 +67,11 @@ export default {
border: 1px solid #9e9e9e;
border-radius: 4px;
box-shadow: 2px 2px 10px #aaaaaa !important;
background-color: #fff;
color:#565656;
li{
color:#565656 !important;
}
}
</style>
jero-web/src/components/menu/SideMenu.vue
+31 -1
View File
@@ -17,7 +17,21 @@
:style="smenuStyle">
</s-menu>
<!-- <div style='width: 100px;height:100px;background: pink'></div>-->
<img src='../../assets/bgImg.png' alt='' class='bgImg'>
<img v-if='!collapsed' src='../../assets/bgImg.png' alt='' class='bgImg'>
<div v-else></div>
<!-- <a-icon-->
<!-- class='bgImg'-->
<!-- v-if="device==='mobile'"-->
<!-- class="trigger"-->
<!-- :type="collapsed ? 'menu-fold' : 'menu-unfold'"-->
<!-- @click="toggle"></a-icon>-->
<!-- <a-icon-->
<!-- class="bgImg trigger"-->
<!-- :type="collapsed ? 'menu-unfold' : 'menu-fold'"-->
<!-- @click="toggle"/>-->
</a-layout-sider>
</template>
@@ -152,6 +166,22 @@ export default {
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
.trigger {
width: 53px;
font-size: 22px;
line-height: 30px;
padding: 0 18px;
cursor: pointer;
transition: color 300ms, background 300ms;
bottom: 4px;
/* right: -12px; */
left: 129px;
color: #fff;
background-color: #FFFFFF14;
&:hover {
background: rgba(255, 255, 255, 0.3);
}
}
.sider.light {
background-color: #001529 !important;
}
jero-web/src/components/page/GlobalHeader.vue
+10 -5
View File
@@ -101,7 +101,7 @@ export default {
},
data () {
return {
breadList:[],
breadList: [],
headerBarFixed: false,
// update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
topMenuStyle: {
@@ -125,6 +125,9 @@ export default {
if (newVal === 'topmenu') {
this.buildTopMenuStyle()
}
},
$route () {
this.getBreadcrumb()
}
},
// update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
@@ -137,6 +140,7 @@ export default {
this.getBreadcrumb()
// update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
},
methods: {
getBreadcrumb () {
this.breadList = []
@@ -191,14 +195,14 @@ export default {
<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
@height: 59px;
@height: 56px;
.layout {
.bread {
display: inline-block;
.ant-breadcrumb {
a {
color:#efefef;
color:#898989;
}
span{
color: #1D2129;
@@ -226,9 +230,10 @@ export default {
.header {
z-index: 2;
color: white;
color: #333;
height: @height;
background-color: @primary-color;
//background-color: @primary-color;
background-color: #fff;
transition: background 300ms;
/* dark 样式 */