From f903fbb4fa2f1f60b7dc1239ed2efcfa306f1092 Mon Sep 17 00:00:00 2001 From: guoxing <1369478551@qq.com> Date: Fri, 17 Feb 2023 14:45:11 +0800 Subject: [PATCH] 2023-02-17 --- mallplusui-web-admin/config/dev.env.js | 2 +- .../src/components/Breadcrumb/index.vue | 2 +- .../src/components/ButtonBar/index.vue | 122 ++ .../src/components/tab-search/index.vue | 87 + mallplusui-web-admin/src/main.js | 3 +- mallplusui-web-admin/src/style/e-row.scss | 291 +++ mallplusui-web-admin/src/style/e-table.scss | 40 + mallplusui-web-admin/src/style/el-form.scss | 67 + mallplusui-web-admin/src/style/el-search.scss | 20 + .../src/style/element-table.scss | 38 + .../src/style/element-tabs.scss | 25 + .../src/style/element-ui.scss | 62 + mallplusui-web-admin/src/style/index.scss | 435 ++++ mallplusui-web-admin/src/style/mixin.scss | 28 + mallplusui-web-admin/src/style/sidebar.scss | 262 +++ mallplusui-web-admin/src/style/table.scss | 48 + .../src/style/transition.scss | 48 + mallplusui-web-admin/src/style/variables.scss | 52 + mallplusui-web-admin/src/styles/sidebar.scss | 13 +- .../src/styles/variables.scss | 6 +- .../layout/components/Sidebar/SidebarItem.vue | 6 +- .../views/layout/components/Sidebar/index.vue | 6 +- .../src/views/pms/product/index.vue | 1786 +++++++++-------- 23 files changed, 2568 insertions(+), 881 deletions(-) create mode 100644 mallplusui-web-admin/src/components/ButtonBar/index.vue create mode 100644 mallplusui-web-admin/src/components/tab-search/index.vue create mode 100644 mallplusui-web-admin/src/style/e-row.scss create mode 100644 mallplusui-web-admin/src/style/e-table.scss create mode 100644 mallplusui-web-admin/src/style/el-form.scss create mode 100644 mallplusui-web-admin/src/style/el-search.scss create mode 100644 mallplusui-web-admin/src/style/element-table.scss create mode 100644 mallplusui-web-admin/src/style/element-tabs.scss create mode 100644 mallplusui-web-admin/src/style/element-ui.scss create mode 100644 mallplusui-web-admin/src/style/index.scss create mode 100644 mallplusui-web-admin/src/style/mixin.scss create mode 100644 mallplusui-web-admin/src/style/sidebar.scss create mode 100644 mallplusui-web-admin/src/style/table.scss create mode 100644 mallplusui-web-admin/src/style/transition.scss create mode 100644 mallplusui-web-admin/src/style/variables.scss diff --git a/mallplusui-web-admin/config/dev.env.js b/mallplusui-web-admin/config/dev.env.js index b64784f..f2246c7 100644 --- a/mallplusui-web-admin/config/dev.env.js +++ b/mallplusui-web-admin/config/dev.env.js @@ -4,5 +4,5 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - BASE_API: '"http://127.0.0.1:8085"' + BASE_API: '"http://mall.yyundong.com/adminapi"' }) diff --git a/mallplusui-web-admin/src/components/Breadcrumb/index.vue b/mallplusui-web-admin/src/components/Breadcrumb/index.vue index 80c1376..60f3c14 100644 --- a/mallplusui-web-admin/src/components/Breadcrumb/index.vue +++ b/mallplusui-web-admin/src/components/Breadcrumb/index.vue @@ -40,7 +40,7 @@ export default { diff --git a/mallplusui-web-admin/src/components/tab-search/index.vue b/mallplusui-web-admin/src/components/tab-search/index.vue new file mode 100644 index 0000000..88fc9d3 --- /dev/null +++ b/mallplusui-web-admin/src/components/tab-search/index.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/mallplusui-web-admin/src/main.js b/mallplusui-web-admin/src/main.js index f3afafc..b9be3c1 100644 --- a/mallplusui-web-admin/src/main.js +++ b/mallplusui-web-admin/src/main.js @@ -12,7 +12,8 @@ import '@/styles/index.scss' // global css import App from './App' import router from './router' import store from './store' - +// 全局自定义组件 +import tabsearch from '@/components/tab-search/index.vue' import '@/icons' // icon import '@/permission' // permission control import '@/components/templatePage/static/common/common.less' diff --git a/mallplusui-web-admin/src/style/e-row.scss b/mallplusui-web-admin/src/style/e-row.scss new file mode 100644 index 0000000..899a4da --- /dev/null +++ b/mallplusui-web-admin/src/style/e-row.scss @@ -0,0 +1,291 @@ +//finginvoiceapply添加部分 +.invoiceform { + .topline { + margin-bottom: 16px; + display: flex; + flex-direction: row; + justify-content: center; + + .el-form-item { + margin-bottom: 0 !important; + + .el-form-item__content { + margin-left: 0 !important; + + .el-input { + width: 120% !important; + } + } + } + + .el-input__inner { + border-style: none; + text-align: center; + } + } + + //第一行 + .lineone { + border-bottom: 2px solid #e0e3eb; + } + + .invoiceadd { + margin: 22px 28px; + border-top: 2px solid #e0e3eb; + + .el-form-item__label { + width: auto !important; + } + + .el-row { + height: 40px; + border-left: 2px solid #e0e3eb; + + .addlabel { + height: 100%; + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + + .el-form-item { + height: 100%; + margin-bottom: 0; + display: flex; + flex-direction: row-reverse; + } + } + + .addinput { + height: 100%; + padding: 0 40px 0 10px; + border-right: 2px solid #e0e3eb !important; + border-bottom: 2px solid #e0e3eb !important; + + .el-form-item { + height: 100%; + margin-bottom: 0; + + .el-form-item__content { + width: 100%; + height: 100%; + line-height: 38px; + margin: 0 !important; + + .el-input { + width: 100%; + height: 100%; + + .el-input__inner { + height: 33px; + } + } + + .el-select { + width: 100% !important; + } + } + } + } + + .addlabelTwo { + height: 100%; + border-right: 2px solid #e0e3eb; + + .el-form-item { + height: 100%; + margin-bottom: 0; + display: flex; + flex-direction: row-reverse; + } + } + + .addlabelThree { + height: 100%; + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + text-align: center; + line-height: 40px; + + .el-form-item { + height: 100%; + margin-bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + line-height: 40px; + text-align: center; + } + + .el-form-item__label { + padding: 0 !important; + } + } + + .addlabelFour { + height: 100%; + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + line-height: 40px; + padding: 0 10px; + + .el-form-item { + height: 100%; + margin-bottom: 0; + + .el-form-item__content { + margin-left: 5px !important; + } + } + } + + .addinputRadio { + height: 100%; + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + line-height: 40px; + padding: 0 10px; + } + + .lastchild { + border-bottom: 2px solid #e0e3eb; + } + + } + + } +} + +.tabletitle { + height: 40px; + width: 100%; + padding: 0 10px; + background: #018ad2; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: white; + + .el-button--primary { + background: #0476aa; + } + +} + +//finreceipt添加部分 +.receiptadd { + + .topline { + margin-bottom: 16px; + display: flex; + flex-direction: row; + justify-content: center; + + .el-form-item { + margin-bottom: 0 !important; + + .el-form-item__content { + margin-left: 0 !important; + + .el-input { + width: 120% !important; + } + } + } + + .el-input__inner { + border-style: none; + text-align: center; + } + } + + //第一行 + .lineone { + border-bottom: 2px solid #e0e3eb; + } + + //中间的部分 + .linetwo, .linethree { + .el-col-24 { + border-bottom: 2px solid #e0e3eb; + } + + .grid-content { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + } + } + + .linetwo { + .el-col { + padding: 0 32px; + } + } +} + +.tabletitle .addbtn { + width: 84px; + background: #0476aa; + border: 0; + outline: none; + padding: 9px 12px; + color: #ffffff; + font-size: 14px; + border-radius: 3px; + cursor: pointer; +} + +.tabletitle .addbtn:hover { + border-color: #0476aa; + background-color: #34a1db; +} + +.tableTotal { + padding: 20px 0; + font-weight: bold; + font-size: 14px; +} + +.tableinput .el-input__inner { + border-style: none; + text-align: center; +} + +.inforow { + height: 120px !important; + + .el-form-item { + height: 100%; + margin-bottom: 0; + display: flex; + flex-direction: row-reverse; + align-items: center; + } + + .infocol { + height: 100%; + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + display: flex; + flex-direction: column; + justify-content: space-around; + + .collineone, .collinetwo { + margin-left: 10px; + } + + .collineone, .collinetwo { + display: flex; + flex-direction: row; + } + } +} + +.blockone, .blocktwo, .blockfour, .blockfive { + min-width: 142px; +} + +.blockthree, .blocksix { + min-width: 266px; +} diff --git a/mallplusui-web-admin/src/style/e-table.scss b/mallplusui-web-admin/src/style/e-table.scss new file mode 100644 index 0000000..dcd6375 --- /dev/null +++ b/mallplusui-web-admin/src/style/e-table.scss @@ -0,0 +1,40 @@ +.e-table { + width: 100%; + padding: 0 30px; + + tr:first-child th { + background-color: #c1f4cd; + } + + tr { + td { + border: 1px solid #e6e9f0; + border-right: 0; + border-bottom: 0; + padding: 10px 20px; + } + + td:last-child { + border-right: 1px solid #e6e9f0; + } + } + + tr:last-child { + td { + border-bottom: 1px solid #e6e9f0; + } + } + + td:nth-child(2n-1) { + text-align: right; + } + + td:nth-child(2n) { + text-align: left; + } +} + +.tableinput .el-input__inner { + border-style: none; + text-align: center; +} diff --git a/mallplusui-web-admin/src/style/el-form.scss b/mallplusui-web-admin/src/style/el-form.scss new file mode 100644 index 0000000..73288e1 --- /dev/null +++ b/mallplusui-web-admin/src/style/el-form.scss @@ -0,0 +1,67 @@ +.listconadd .title { + text-align: center; + font-size: 28px; + //line-height: 90px; +} + +.listaddtop { + padding: 0 212px; + border-bottom: 2px solid #e0e3eb; + display: flex; + justify-content: space-between; + align-items: center; + line-height: 34px; + + span { + padding: 0 15px; + } +} + +.listconadd .demo-ruleForm { + padding: 22px 28px; +} + +.el-collapse-item__header { + .el-icon-arrow-right:before { + content: ""; + font-size: 20px; + } +} + +.demo-ruleForm table { + width: 100%; + border-collapse: collapse; + border: 2px solid #e0e3eb; + border-spacing: 0; + //text-align: right; + td { + border-right: 2px solid #e0e3eb; + border-bottom: 2px solid #e0e3eb; + border-top: 2px solid #e0e3eb; + } + + tr { + height: 40px; + } + + .el-form-item { + display: inline-block; + } + + .el-input { + display: inline-block; + } +} + +.tleftb { + text-align: right; + font-size: 14px; + color: #606266; + line-height: 40px !important; + font-weight: 600; +} + +.icon { + color: #e84026; + margin-right: 4px; +} diff --git a/mallplusui-web-admin/src/style/el-search.scss b/mallplusui-web-admin/src/style/el-search.scss new file mode 100644 index 0000000..e6a18fb --- /dev/null +++ b/mallplusui-web-admin/src/style/el-search.scss @@ -0,0 +1,20 @@ +//finginvoiceapply页面个别按钮 +.applyseaech { + padding: 0 34px !important; + margin-right: 0 !important; +} + +//finreceipt页面个别按钮 +.recpicker { + width: 154px !important; +} + +.recselect { + padding: 0 34px !important; +} + +// +.iteminput { + padding: 0 49px !important; +} + diff --git a/mallplusui-web-admin/src/style/element-table.scss b/mallplusui-web-admin/src/style/element-table.scss new file mode 100644 index 0000000..e79ae75 --- /dev/null +++ b/mallplusui-web-admin/src/style/element-table.scss @@ -0,0 +1,38 @@ +.el-table { + .el-table__header { + tr th { + background: #edf1f7; + color: #333333; + padding: 8px 0; + font-size: 16px; + } + } +} + +.el-table { + .el-table__row { + .cell { + line-height:15px; + } + } +} + +.el-table { + .el-table__body { + tr td { + padding: 6px 0 !important; + } + } +} + +.table-describe { + border: 1px solid #dfe4ed; + border-bottom: 0 solid #dfe4ed; + + h4 { + float: left; + margin: 0; + line-height: 34px; + padding: 0 15px; + } +} diff --git a/mallplusui-web-admin/src/style/element-tabs.scss b/mallplusui-web-admin/src/style/element-tabs.scss new file mode 100644 index 0000000..26321fb --- /dev/null +++ b/mallplusui-web-admin/src/style/element-tabs.scss @@ -0,0 +1,25 @@ +.el-tabs--card{ + .el-tabs__header{ + .el-tabs__nav-scroll{ + padding-left: 3px; + padding-bottom: 10px; + border-bottom: 1px solid #018ad2; + .el-tabs__nav { + border: none; + } + .el-tabs__item { + border: 1px solid #dfe4ed; + margin-right: 12px; + margin-left: 2px; + } + .el-tabs__item:first-child { + border-left: 1px solid #dfe4ed; + } + .el-tabs__item.is-active{ + border-bottom-color: #018ad2; + background-color: #018ad2; + color: #fff; + } + } + } +} diff --git a/mallplusui-web-admin/src/style/element-ui.scss b/mallplusui-web-admin/src/style/element-ui.scss new file mode 100644 index 0000000..50c4dc3 --- /dev/null +++ b/mallplusui-web-admin/src/style/element-ui.scss @@ -0,0 +1,62 @@ +.el-image .el-image__inner--center{ + top: 0; + left: 0; + transform: none; +} + +.tablerow-click{ + color: #007FFF; + cursor: pointer; +} +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} + + + diff --git a/mallplusui-web-admin/src/style/index.scss b/mallplusui-web-admin/src/style/index.scss new file mode 100644 index 0000000..ce38090 --- /dev/null +++ b/mallplusui-web-admin/src/style/index.scss @@ -0,0 +1,435 @@ +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; +@import './table.scss'; +@import './el-form.scss'; +@import './el-search.scss'; +@import './e-row.scss'; +@import './e-table.scss'; +@import './element-table.scss'; +@import './element-tabs.scss'; +body { + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} +.bg-primary{ + background-color: $color-primary !important; +} +// main-container global css +.container{ + min-height: 100%; + height: 100%; + background-color: #FFFFFF; + box-sizing: border-box; + padding: 10px 0; +} + +.fl{ + float: left; +} +.fr{ + float: right; +} +.text-center{ + text-align: center; +} +.color-red{ + color: red !important; +} + +.pd-b10{ + padding-bottom: 10px; +} + +.pd-y40 { + padding: 40px 0; +} + +.pd-y20 { + padding: 20px 0; +} + +.fs20 { + font-size: 20px; +} + +// 页面上的button按钮 +.app-container { + .el-button--medium { + padding: 10px 14px; + font-size: 16px; + } + + .el-button--small { + padding: 8px 12px; + font-size: 14px; + } + + .el-button--mini { + padding: 7px 10px; + font-size: 12px; + } +} +// 添加样式 +.app-container { + margin: 5px 0 5px 0; + background-color: #fff; +} +// 设置了滚动区域 +.main-content{ overflow-x: hidden;overflow-y: auto;height: calc(100vh - 200px);padding: 0 20px;} +.listcon{height: calc(100vh - 425px);overflow-y: auto;overflow-x: hidden;} +.listconadd{height: calc(100vh - 200px);overflow-y: auto;overflow-x: hidden;} +.listconadd{ + .titwu { + font-size: 28px; + text-align: center; + padding: 30px 0 20px 0; + } +} +.listconsub { + height: calc(100vh - 310px); + overflow-y: auto; + overflow-x: hidden; +} + +.listconsubjxs { + height: calc(100vh - 300px); + overflow-y: auto; + overflow-x: hidden; +} + +// 搜索的 +.webtop { + // position: fixed;top: 110px;width: calc(100% - 240px);z-index: 6000; + background-color: #fff; + display: flex !important; + flex-direction: row; + justify-content: space-between !important; + align-items: center; + margin-bottom: 0px !important; + font-size: 20px; +} + +// 设置了页面头部的内边距和背景色 +.tab-header { + font-size: 20px; + font-weight: bold; +} +// 设置了搜索条件里的样式 +.search { + .tab-header { + .el-form-item { + margin-right: 16px; + .el-form-item__label { + font-size: 16px; + font-weight: 500; + } + } + } +} +.filter-item { + padding: 0 10px; + width: 220px; + display: inline-block; +} + +// 设置列表页面内容布局 +.listtop { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0 0 0 15px; + margin-top: 0; + border: 1px solid #dfe4ed; + height: 42px; + line-height: 42px; +} + +.listtop .tit { + font-weight: bold; + font-size: 16px +} + +.listtop .pagination { + margin: 0; + padding: 0; +} + +.pages { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-end; + padding: 0 0 15px 15px; +} +.pages .tit{font-weight: bold;} +.pages .pagination{margin: 0;} +// .formadd{padding: 20px ;} +// .listeltable{overflow-y: auto;height: calc(100vh - 420px);} + +.formadd { + padding: 10px 40px 0 40px; + font-size: 16px; + // height: calc(100vh - 200px);overflow-y: auto; + .title { + padding: 12px; + font-weight: bold; + font-size: 16px; + background-color: $header-bg; + text-align: left; + color: #ffffff; + } + .first_row{ + border-top: 1px solid $table-border-color; + } + .el-row { + display: flex; + flex-wrap: wrap; + border-left: 1px solid $table-border-color; + .el-col { + border-right: 1px solid $table-border-color; + border-bottom: 1px solid $table-border-color; + padding: 0 15px; + min-height: 42px; + line-height: 1; + + .el-form-item { + margin-bottom: 0; + line-height: 42px; + // .addinputw{width: 400px;} + .addinputw { + width: 80%; + line-height: 42px; + } + .el-input__inner { + height: 36px; + } + } + } + } + .footer{margin: 20px;} +} + + +.formaddcopy02 { + padding: 10px 40px 0 40px; + .title { + padding: 12px; + font-weight: bold; + font-size: 16px; + background-color: #0294d7; + color: #ffffff; + text-align: left; + } + + .el-row { + display: flex; + flex-wrap: wrap; + border-left: 1px solid $table-border-color; + + .el-col { + border-right: 1px solid $table-border-color; + border-bottom: 1px solid $table-border-color; + min-height: 42px; + padding: 0 15px; + line-height: 42px; + position: relative; + .span-sty { + position: absolute; + top: 0; + bottom: 0; + left: 0; + line-height: 42px; + text-align: right; + font-size: 14px; + color: #606266; + font-weight: 600; + width: 70px; + padding-right: 5px; + border-right: 1px solid #e0e3eb; + } + + .el-form-item { + margin-bottom: 0; + line-height: 42px; + .addinputw { + //padding: 5px 0; + width: 65%; + margin-left: 80px; + line-height: 42px; + } + + .addinputInfo { + margin-left: 80px; + line-height: 42px; + } + + .el-input__inner { + height: 36px; + } + } + } + + } + + .footer { + margin: 20px; + } +} + +.forminfo { + padding: 10px 40px 0 40px; + font-size: 16px; + .title { + padding: 12px; + font-weight: bold; + font-size: 16px; + background-color: $header-bg; + text-align: left; + color: #ffffff; + } + .el-row { + display:flex; + flex-wrap: wrap; + border-left: 1px solid $table-border-color; + .trightb{ text-align: right;font-weight: bold;color: #606266; } + .tleft{ text-align: left; } + .el-col{ + border-right: 1px solid $table-border-color; + border-bottom: 1px solid $table-border-color; + padding: 0 15px 0 15px !important; + min-height: 50px; + line-height: 50px; + font-size: 14px; + } + + } + .footer{margin: 20px;} +} + +.el-form-item__error { + z-index: 100; +} +.bluezi{color: $header-bg; cursor: pointer} +// 经销商添加样式 +.titcon{ + display: flex; + flex-direction: row; + justify-content: space-around; + background-color: #0294d7; + flex: 3; +} + +.titcon .title { + padding: 10px; + font-weight: bold; + font-size: 20px; + text-align: center; + color: #ffffff; +} + +.titcon .baocun { + text-align: right; + flex: 2; + padding: 5px 20px; +} + +.addinputwda { + width: 600px; +} + +//.searchcon{margin: 0px 0 10px 0;} +//.searchcon .searchbtn{margin: 10px 0;border: #2cab69 1px solid;color: #2cab69;} +// 隐藏显示按钮 +.main-content { + .searchcon { + .searchbtn { + margin: 5px 0; + border: #2cab69 1px solid; + color: #2cab69; + } + } +} + + +.search .btn { + padding: 5px 0; + border: 1px solid #e0e3eb; + text-align: center; + margin-bottom: 5px; +} + + +// 弹出窗口按钮 +.btnCancel{ + background: #e84026 !important;outline: none;border: none;color: #fff !important; +} +.btnCancel:hover{ + background: #ed6651 !important; +} +.btnFalses{ + background: #2cab69 !important;outline: none;border: none; +} +.btnFalses:hover{ + background: #3dc47e !important; +} +.btntopblueline{background-color: #066bc9 !important;} +.btntopblueline:hover{background-color: #34a1db !important;} +.btntophui{background-color: #cccccc !important;} +.btntophui:hover{background-color: #d6d6d6 !important;} +.bordertopline{ border-top: 1px solid $table-border-color;} +.lookimg img{width: 250px;margin: 10px;} +.listimg{width: 80px;} diff --git a/mallplusui-web-admin/src/style/mixin.scss b/mallplusui-web-admin/src/style/mixin.scss new file mode 100644 index 0000000..36b74bb --- /dev/null +++ b/mallplusui-web-admin/src/style/mixin.scss @@ -0,0 +1,28 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} diff --git a/mallplusui-web-admin/src/style/sidebar.scss b/mallplusui-web-admin/src/style/sidebar.scss new file mode 100644 index 0000000..4d304e2 --- /dev/null +++ b/mallplusui-web-admin/src/style/sidebar.scss @@ -0,0 +1,262 @@ +#app { + background-color: #f7f9fc; + + .main-container { + height: 100vh; + transition: margin-left .28s; + padding-left: $sideBarWidth; + padding-top: 60px; + position: relative; + overflow: hidden; + } + //.TagsView{ + // height: 50px; + //} + .home-box{ + position: fixed; + top: 60px; + left: 0; + background-color: $menuBg; + border: 1px solid $menuHover; + line-height: 40px; + width: 210px; + z-index: 1000; + a{ + display: inline-block; + line-height: 40px; + box-sizing: border-box; + width: 50%; + text-align: center; + font-size: 16px; + font-weight: 500; + color: #FFFFFF; + } + a:last-child{ + border:0; + background-color: $menuHover; + } + } + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: calc(100% - 60px) ; + position: absolute; + font-size: 0px; + top: 60px; + bottom: 0; + left: 0; + z-index: 8; + overflow: hidden; + padding-top: 40px; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + height: calc(100% - 40px) ; //此高度是100%减去页面底部的栏高 + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + .el-submenu__title i{ + color: #FFFFFF; + } + .is-active>.el-submenu__title { + color: $subMenuActiveText !important; + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: $subMenuBg !important; + + &:hover { + background-color: $subMenuHover !important; + } + } + & .el-menu-item.is-active { + background-color: $subMenuHover !important; + } + } + + // .hideSidebar { + // .sidebar-container { + // width: 54px !important; + // } + + // .main-container { + // margin-left: 54px; + // } + + // .submenu-title-noDropdown { + // padding: 0 !important; + // position: relative; + + // .el-tooltip { + // padding: 0 !important; + + // .svg-icon { + // margin-left: 20px; + // } + + // .sub-el-icon { + // margin-left: 19px; + // } + // } + // } + + // .el-submenu { + // overflow: hidden; + + // &>.el-submenu__title { + // padding: 0 !important; + + // .svg-icon { + // margin-left: 20px; + // } + + // .sub-el-icon { + // margin-left: 19px; + // } + + // .el-submenu__icon-arrow { + // display: none; + // } + // } + // } + + // .el-menu--collapse { + // .el-submenu { + // &>.el-submenu__title { + // &>span { + // height: 0; + // width: 0; + // overflow: hidden; + // visibility: hidden; + // display: inline-block; + // } + // } + // } + // } + // } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/mallplusui-web-admin/src/style/table.scss b/mallplusui-web-admin/src/style/table.scss new file mode 100644 index 0000000..08e9142 --- /dev/null +++ b/mallplusui-web-admin/src/style/table.scss @@ -0,0 +1,48 @@ +.container{ + /* 头 */ + .el-table thead{ + color: $text-color; + } + .el-table .cell{ + a{ + display: block; + color: $table-a-color; + } + .el-button--text{ + color: $table-a-color; + } + } + .el-table td, .el-table th{ + padding: 8px 0; + } + .el-table.is-group th{ + background-color: $table-bg-color; + } + .el-table--enable-row-hover .el-table__body tr:hover>td { + background-color: $table-bg-color !important; + } + .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { + border-right: 1px solid $table-border-color; + } + .el-table td, .el-table th.is-leaf{ + border-bottom: 1px solid $table-border-color; + } + .table-fixed { + .el-table__fixed-right { + height: 100% !important; //设置高优先,以覆盖内联样式 + } + } +} + +.children-box { + padding: 10px; + .table-header { + padding: 0 20px 5px 20px; + border-bottom: 2px solid $border-color; + .el-page-header { + line-height: 40px; + font-weight: 500; + + } + } +} diff --git a/mallplusui-web-admin/src/style/transition.scss b/mallplusui-web-admin/src/style/transition.scss new file mode 100644 index 0000000..4cb27cc --- /dev/null +++ b/mallplusui-web-admin/src/style/transition.scss @@ -0,0 +1,48 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/mallplusui-web-admin/src/style/variables.scss b/mallplusui-web-admin/src/style/variables.scss new file mode 100644 index 0000000..9ff78c5 --- /dev/null +++ b/mallplusui-web-admin/src/style/variables.scss @@ -0,0 +1,52 @@ +// 行为色 +$color-primary: #018ad2; +$color-success: #4cd964; +$color-warning: #f0ad4e; +$color-error: #dd524d; +// header +$header-bg:#0294d7; +// sidebar +$menuText: rgba($color: #FFFFFF, $alpha: 0.9); +$menuActiveText:#ffffff; +$subMenuActiveText:#ffffff; //https://github.com/ElemeFE/element/issues/12951 + +$menuBg:#0294d7; +$menuHover:#087dba; + +$subMenuBg:#0294d7; +$subMenuHover:#087dba; + +$sideBarWidth: 210px; + +/* 表格的相关样式 */ +$search-bg:#edf1f7; // 表格搜索景色 +$table-bg-color:#edf1f7; // 表格背景 +$table-border-color:#e0e3eb; // 表格边框色 +// 文字 +$table-a-color:#018ad2; +/* 表格的相关样式 */ + +/* 边框颜色 */ +$border-color:#018ad2; +/* 文字基本颜色 */ +$text-color:#333;//基本色 +$text-color-inverse:#fff;//反色 +$text-color-grey:#999;//辅助灰色,如加载更多的提示信息 +$text-color-placeholder: #808080; +$text-color-disable:#c0c0c0; +$text-red: #d00000; + +$a-color:#018ad2; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/mallplusui-web-admin/src/styles/sidebar.scss b/mallplusui-web-admin/src/styles/sidebar.scss index d69c434..2e7cdad 100644 --- a/mallplusui-web-admin/src/styles/sidebar.scss +++ b/mallplusui-web-admin/src/styles/sidebar.scss @@ -4,7 +4,7 @@ .main-container { min-height: 100%; transition: margin-left .28s; - margin-left: 180px; + margin-left: 200px; } // 侧边栏 @@ -13,7 +13,7 @@ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; } transition: width .28s; - width: 180px !important; + width: 200px !important; height: 100%; position: fixed; font-size: 0px; @@ -28,6 +28,7 @@ } .svg-icon { margin-right: 16px; + margin-left: 5px; } .el-menu { border: none; @@ -68,14 +69,14 @@ .sidebar-container .nest-menu .el-submenu>.el-submenu__title, .sidebar-container .el-submenu .el-menu-item { - min-width: 180px !important; + min-width: 200px !important; background-color: $subMenuBg !important; &:hover { background-color: $menuHover !important; } } .el-menu--collapse .el-menu .el-submenu { - min-width: 180px !important; + min-width: 200px !important; } //适配移动端 @@ -86,12 +87,12 @@ .sidebar-container { top: 50px; transition: transform .28s; - width: 180px !important; + width: 200px !important; } &.hideSidebar { .sidebar-container { transition-duration: 0.3s; - transform: translate3d(-180px, 0, 0); + transform: translate3d(-200px, 0, 0); } } } diff --git a/mallplusui-web-admin/src/styles/variables.scss b/mallplusui-web-admin/src/styles/variables.scss index 2fee827..b88db51 100644 --- a/mallplusui-web-admin/src/styles/variables.scss +++ b/mallplusui-web-admin/src/styles/variables.scss @@ -1,4 +1,4 @@ //sidebar -$menuBg:#304156; -$subMenuBg:#1f2d3d; -$menuHover:#001528; +$menuBg:#0294D7; +$subMenuBg:#0294D7; +$menuHover:#0294D7; diff --git a/mallplusui-web-admin/src/views/layout/components/Sidebar/SidebarItem.vue b/mallplusui-web-admin/src/views/layout/components/Sidebar/SidebarItem.vue index 6f4372b..f16c558 100644 --- a/mallplusui-web-admin/src/views/layout/components/Sidebar/SidebarItem.vue +++ b/mallplusui-web-admin/src/views/layout/components/Sidebar/SidebarItem.vue @@ -6,14 +6,14 @@ :key="item.children[0].name"> - {{item.children[0].title}} + {{item.children[0].title}} diff --git a/mallplusui-web-admin/src/views/layout/components/Sidebar/index.vue b/mallplusui-web-admin/src/views/layout/components/Sidebar/index.vue index b447948..66eb5f8 100644 --- a/mallplusui-web-admin/src/views/layout/components/Sidebar/index.vue +++ b/mallplusui-web-admin/src/views/layout/components/Sidebar/index.vue @@ -5,9 +5,9 @@ :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" - background-color="#304156" - text-color="#bfcbd9" - active-text-color="#409EFF" + background-color="#0294D7" + text-color="#fff" + active-text-color="#EEEE00" > diff --git a/mallplusui-web-admin/src/views/pms/product/index.vue b/mallplusui-web-admin/src/views/pms/product/index.vue index 82c2f6b..1a95fa1 100644 --- a/mallplusui-web-admin/src/views/pms/product/index.vue +++ b/mallplusui-web-admin/src/views/pms/product/index.vue @@ -1,891 +1,951 @@ - -