Skip to content

V
vue-gjjs
Commit 49ef3d90 by 潘际乾
Options

页面样式更改

parent 705d2051
Showing with 466 additions and 49 deletions
src/assets/css/common.css 0 → 100644
:root {
/* 白色 */
/* --bgcolor: #fff;
--sidecolor: #fff;
--darkbgcolor: rgb(232, 232, 232); */
/* 灰灰 */
/* --bgcolor: #f8f8f5;
--sidecolor: #fafafa;
--darkbgcolor: rgb(232, 232, 232); */
/* 淺綠色 */
/* --bgcolor: #dff9fb;
--sidecolor: #c7ecee;
--darkbgcolor: rgb(232, 232, 232); */
/* 淡黄色 */
/* --bgcolor: #f5f5d5;
--sidecolor: #f5f5d5;
--darkbgcolor: rgb(232, 232, 232); */
/* 绿色 */
/* --bgcolor: #ccffcc;
--sidecolor: #ccffcc;
--darkbgcolor: rgb(232, 232, 232); */
/* --bgcolor: #ccffff;
--sidecolor: #64d7eb;
--darkbgcolor: rgb(232, 232, 232); */
/* 蓝色系 */
--bgcolor: #f7faff;
/* #E3F3FF; */
--sidecolor: #fff;
/* #E3F3FF; */
--darkbgcolor: #f4f5fa;
/* rgb(232, 232, 232); */
--lineheight: 24px;
--normalfont: 12px;
/* --themecolor: #1561E0; */
--themecolor: #409EFF;
}
#app {
font-family: Helvetica, sans-serif;
display: flex;
flex-direction: column;
}
.e-table-wrapper{
display: flex;
flex-direction: column;
}
.e-table-wrapper .el-table {
flex:1;
}
/* 配色 */
/* .fold {
background-color: var(--color);
} */
/* .unfold {
background-color: var(--color);
} */
.m-app-main {
background-color: var(--bgcolor);
}
.m-app {
background-color: var(--darkbgcolor);
}
/* sidemenu */
.el-menu {
background: var(--sidecolor);
}
.el-menu-item.is-active {
color: #fff;
background-color: var(--themecolor);
}
.eContainer-menu-search {
background: var(--sidecolor);
}
.eContainer-menu-search button {
background: var(--sidecolor);
}
.eContainer-scroller {
background: var(--sidecolor);
}
.topbtnbar{
position: absolute;
top: 20px;
right: 60px;
z-index: 90;
display: inline-block;
}
.topbtnbar > span{
display: inline-block;
}
/* 页签样式调整 */
.el-tabs .el-tabs__header {
margin: 0;
}
.el-tabs .el-tabs__content {
/* background: #fff; */
padding: 10px;
}
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-left: 1px solid #ccc;
padding: 0 10px;
height: 30px;
line-height: 30px;
font-size: var(--normalfont);
border-bottom: 1px solid var(--themecolor);
/* border-top: 1px solid #ccc; */
background-image: linear-gradient(#fff,#dedede);
}
.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
padding-left: 10px;
}
.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
padding-right: 10px;
}
.el-tabs--card>.el-tabs__header {
border-bottom: 2px solid var(--themecolor);
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
border-left: 1px solid var(--themecolor);
border-right: 1px solid var(--themecolor);
border-top: 1px solid var(--themecolor);
background-image: linear-gradient(#fff,#fff);
color: var(--themecolor);
border-bottom: 1px solid #fff;
box-sizing: content-box;
}
.el-tabs--card .el-tabs__nav-wrap {
margin-bottom: -2px;
}
.el-form-item--small .el-form-item__label {
font-size: var(--normalfont);
height: var(--lineheight);
line-height: var(--lineheight);
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 12px;
}
.el-input--small .el-input__inner {
height: var(--lineheight);
line-height: var(--lineheight);
font-size: var(--normalfont);
}
.el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
line-height: var(--lineheight);
}
.el-select .el-input .el-select__caret {
font-size: var(--normalfont);
}
.el-input--small .el-input__icon {
line-height: var(--lineheight);
}
.el-input-number--small {
line-height: var(--lineheight);
}
.el-textarea__inner {
font-size: 12px;
}
.el-button--small, .el-button--small.is-round {
padding: 0px 15px;
font-size: 12px;
line-height: 22px;
}
.el-button--small.el-button--text {
padding-left: 0;
padding-right: 0;
}
.el-card {
margin-bottom: 8px;
}
.m-inputbtn {
position: relative;
}
.m-inputbtn-input {
padding-right: 64px;
display: inline-block;
}
.m-inputbtn-btn {
position: absolute;
right: 0;
}
.m-inputbtn-double {
position: relative;
}
.m-inputbtn-input-double {
padding-right: 90px;
display: inline-block;
}
.m-inputbtn-btn-double {
position: absolute;
right: 0;
top: 0;
}
.m-inputbtn-btn-double .el-button {
padding: 0 8px;
}
.m-inputbtn-double .el-button+.el-button {
margin-left: 0;
}
.el-radio__label {
font-size: 12px;
}
.c-title {
/* color: rgba(0, 0, 0, 0.65); */
/* font-weight: 600; */
/* font-size: 12px; */
color: rgb(0, 0, 0);
font-size: 14px;
font-weight: 500;
padding-bottom: 10px;
}
.el-dialog__body {
padding: 10px 20px 20px;
}
/* form 必填项红星星靠右 */
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
content: '*';
color: #F56C6C;
margin-left: 4px;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
content: none;
}
.el-tree-node__label {
font-size: 12px;
}
.c-w-100 {
width: 100%;
}
.m-ureport-actions {
width: 100%;
text-align: center;
}
.m-ureport-actions .el-button--small {
padding: 0px 15px;
font-size: 12px;
line-height: 22px;
}
.el-table th {
user-select: initial;
}
.el-tooltip__popper.is-dark {
max-width: 600px;
}
.el-date-editor.el-range-editor--small.el-input__inner {
height: 24px;
font-size: 13px;
}
.el-date-editor.el-range-editor--small .el-range__close-icon, .el-range-editor--small .el-range__icon {
line-height: 16px;
font-size: 12px;
}
.el-date-editor.el-range-editor--small .el-range-separator {
line-height: 16px;
font-size: 12px;
}
\ No newline at end of file
src/components/BusinessButton.vue
<template>
<div class="bus-button">
<c-button type="primary" v-on:click="save">提交</c-button>
<c-button type="primary" v-on:click="pedding">暂存</c-button>
<c-button type="primary" v-on:click="check">校核</c-button>
<c-button v-on:click="exit">退出</c-button>
<c-button type="primary" v-on:click="save">提交</c-button>
<c-button type="primary" v-on:click="pedding">暂存</c-button>
<c-button type="primary" v-on:click="check">校核</c-button>
<c-button v-on:click="exit">退出</c-button>
</div>
</template>
<script>
import commonApi from "~/mixin/commonApi"
import Utils from "~/utils"
export default {
props:["$pntvm"],
data(){
......@@ -89,6 +90,10 @@ export default {
</script>
<style>
.bus-button {
text-align: center;
margin-bottom: 10px;
}
.bus-button :first-child {
margin-left: 0;
}
</style>
\ No newline at end of file
src/components/Toolbars.vue 0 → 100644
<template>
<div class="eibs-toolbar">
<el-popover
placement="left-start"
trigger="hover"
:offset="150"
popper-class="toolbars-popover"
>
<div class="toolbar-detail">
<ul>
<li id="tool-caculate">计算器</li>
<li id="tool-search">大额支付行号查询</li>
<li id="tool-telexCode">电报码查询</li>
<li id="tool-account">账户查询</li>
<li id="tool-swiftcode">SwiftCode查询</li>
<li id="tool-finishedtask">业务查询</li>
<li id="tool-exchangerate">即期牌价查询</li>
<li id="tool-forwardexchangerate">远期牌价查询</li>
<li id="tool-holiday">节假日查询</li>
<li id="tool-interestrate">利率查询</li>
<li id="tool-businessoffer">贸易金融业务报价查询</li>
<li id="tool-accttradedetails">账户交易明细查询</li>
<li id="tool-feetype">费用查询</li>
<li id="tool-sendMessageQuery">发报查询</li>
<li id="tool-receiveMessageQuery">收报查询</li>
<li id="tool-innerAccountBal">内部户可用余额查询</li>
</ul>
</div>
<div class="toolbar-core" slot="reference">工具条</div>
</el-popover>
</div>
</template>
<script>
export default {};
</script>
<style>
.eibs-toolbar {
z-index: 1000;
user-select: auto;
width: 32px;
height: 68px;
position: fixed;
top: 200px;
right: 0;
z-index: 10000;
}
.toolbars-popover {
padding: 0!important;
}
.toolbar-core {
background: var(--themecolor);
border-radius: 4px;
width: 12px;
padding: 8px;
color: #fff;
font-size: 12px;
cursor: pointer;
}
.toolbar-detail {
font-size: 12px;
}
.toolbar-detail ul {
margin: 0;
padding: 5px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
background: #fff;
cursor: pointer;
}
.toolbar-detail ul li {
list-style: none;
padding: 8px 15px;
}
.toolbar-detail li:hover {
background: var(--themecolor);
color: #fff;
}
</style>
src/components/c-page.vue
<template>
<div class="c-page-container">
<p class="title">{{title}}</p>
<div style="flex:1;padding:0.5rem">
<slot></slot>
</div>
<div class="c-page-container">
<div class="title">
<span>{{ title }}</span>
</div>
<div style="flex: 1; padding: 10px 20px; position: relative">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props:['title']
}
props: ["title"],
};
</script>
<style scoped>
.title{
margin: 0;
padding: 0.5em;
padding-left:1em ;
font-size: 1rem;
border-bottom: 2px solid #337bde;
}
.c-page-container{
height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.title {
margin: 0;
padding: 8px;
padding-left: 20px;
font-size: 14px;
border-bottom: 1px solid var(--darkbgcolor);
background-color: var(--darkbgcolor);
}
.c-page-container {
height: 100%;
display: flex;
flex-direction: column;
/* overflow-x: hidden; */
overflow: hidden;
}
</style>
\ No newline at end of file
src/main.js
......@@ -10,6 +10,8 @@ import App from './App.vue'
import RootRouter from './routers'
import store from "./store"
import '~/assets/css/common.css'
import CustomComponent from "./components"
import VueFunc from "./utils/vuefunc"
......
src/views/Business/Sptrou/Sptroup.vue
......@@ -36,7 +36,7 @@ export default {
};
},
computed: {
tableColumns() {
tableData() {
return [];
}
},
......
src/views/Layout/SideMenu.vue
......@@ -129,5 +129,59 @@ export default {
},
};
</script>
<style>
<style scoped>
.eContainer-scroller .el-scrollbar__wrap {
overflow: auto;
margin-right: 0px !important;
}
.eContainer-menu-search {
width: 100%;
position: relative;
}
.eContainer-menu-search .el-input {
width: auto;
position: absolute;
right: 20px;
top: 10px;
left: 60px;
}
.eContainer-menu-search .el-input .el-input__inner {
height: 30px;
}
.eContainer-menu-search .el-icon-search {
line-height: 30px;
}
.eContainer-scroller {
height: calc(100% - 44px);
}
.eContainer-scroller .el-scrollbar__bar {
display: none;
}
.el-icon-s-fold {
float: left;
font-size: 20px;
}
.el-icon-s-unfold {
float: left;
font-size: 20px;
}
.el-menu {
border-right: none;
}
.eContainer-refresh {
width: auto;
overflow: auto;
height: calc(100% - 44px);
}
.el-button-refresh {
width: 100%;
height: 40px;
}
.el-submenu__title,
.el-menu-item,
.el-submenu .el-menu-item {
font-size: 12px;
height: 35px;
line-height: 35px;
}
</style>
\ No newline at end of file
src/views/Layout/index.vue
<template>
<el-container style="background-color:#e8e8e8;margin:0;">
<el-header style="padding:0;" >
<headerCom></headerCom>
</el-header>
<div style="height:8px;"></div>
<el-container>
<el-aside width="200px" style="background-color:white;">
<sideMenu></sideMenu>
</el-aside>
<div style="width:8px;"></div>
<el-main style="padding:0;background-color:white;position:relative;">
<business></business>
</el-main>
</el-container>
<el-container
style="background-color: #e8e8e8; margin: 0; padding-bottom: 8px"
>
<el-header style="padding: 0">
<headerCom></headerCom>
</el-header>
<div style="height: 8px"></div>
<el-container>
<el-aside width="200px" style="background-color: white">
<sideMenu></sideMenu>
</el-aside>
<div style="width: 8px"></div>
<el-main class="m-app-main" style="background-color: var(--bgcolor)">
<business></business>
<toolbars></toolbars>
</el-main>
</el-container>
</el-container>
</template>
<script>
import headerCom from "./Header"
import sideMenu from "./SideMenu"
import business from "../Business"
import headerCom from "./Header";
import sideMenu from "./SideMenu";
import business from "../Business";
import toolbars from "~/components/Toolbars"
export default {
components:{headerCom,sideMenu,business}
}
components: { headerCom, sideMenu, business, toolbars },
};
</script>
<style>
</style>
\ No newline at end of file
.m-app-main {
padding: 0;
position: relative;
height: 100%;
/* padding-bottom: 68px; */
box-sizing: border-box;
margin-right: 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment