From ed310093e317def46fd1ad52a12eaf521787d8cf Mon Sep 17 00:00:00 2001 From: gengby <858962040@qq.com> Date: Thu, 20 Jun 2024 08:58:46 +0800 Subject: [PATCH] =?UTF-8?q?rev=EF=BC=9A=E5=89=8D=E7=AB=AF=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nladmin-ui/public/favicon.ico | Bin 67646 -> 622 bytes nladmin-ui/src/assets/styles/btn.scss | 198 +++---- nladmin-ui/src/assets/styles/eladmin.scss | 460 +++++++-------- nladmin-ui/src/assets/styles/element-ui.scss | 244 ++++---- .../src/assets/styles/element-variables.scss | 62 +- nladmin-ui/src/assets/styles/index.scss | 366 ++++++------ nladmin-ui/src/assets/styles/mixin.scss | 132 ++--- nladmin-ui/src/assets/styles/sidebar.scss | 418 ++++++------- nladmin-ui/src/assets/styles/transition.scss | 96 +-- nladmin-ui/src/assets/styles/variables.scss | 96 +-- nladmin-ui/src/views/acs/device/config.vue | 2 + .../device/driver/strip_conveyor_device.vue | 556 ++++++++++++++++++ 12 files changed, 1594 insertions(+), 1036 deletions(-) create mode 100644 nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue diff --git a/nladmin-ui/public/favicon.ico b/nladmin-ui/public/favicon.ico index fcb69992e5f0777989b89db9a6318b3621eff240..63a15850348b3f5fd0713efd31939bd593883814 100644 GIT binary patch literal 622 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 U$^5!t50tOVCyZ47oXe;G53^4nod5s; diff --git a/nladmin-ui/src/assets/styles/btn.scss b/nladmin-ui/src/assets/styles/btn.scss index 8f47f2c..f8103d0 100644 --- a/nladmin-ui/src/assets/styles/btn.scss +++ b/nladmin-ui/src/assets/styles/btn.scss @@ -1,99 +1,99 @@ -@import 'variables'; - -@mixin colorBtn($color) { - background: $color; - - &:hover { - color: $color; - - &:before, - &:after { - background: $color; - } - } -} - -.blue-btn { - @include colorBtn($blue) -} - -.light-blue-btn { - @include colorBtn($light-blue) -} - -.red-btn { - @include colorBtn($red) -} - -.pink-btn { - @include colorBtn($pink) -} - -.green-btn { - @include colorBtn($green) -} - -.tiffany-btn { - @include colorBtn($tiffany) -} - -.yellow-btn { - @include colorBtn($yellow) -} - -.pan-btn { - font-size: 14px; - color: #fff; - padding: 14px 36px; - border-radius: 8px; - border: none; - outline: none; - transition: 600ms ease all; - position: relative; - display: inline-block; - - &:hover { - background: #fff; - - &:before, - &:after { - width: 100%; - transition: 600ms ease all; - } - } - - &:before, - &:after { - content: ''; - position: absolute; - top: 0; - right: 0; - height: 2px; - width: 0; - transition: 400ms ease all; - } - - &::after { - right: inherit; - top: inherit; - left: 0; - bottom: 0; - } -} - -.custom-button { - display: inline-block; - line-height: 1; - white-space: nowrap; - cursor: pointer; - background: #fff; - color: #fff; - -webkit-appearance: none; - text-align: center; - box-sizing: border-box; - outline: 0; - margin: 0; - padding: 10px 15px; - font-size: 14px; - border-radius: 4px; -} +@import 'variables'; + +@mixin colorBtn($color) { + background: $color; + + &:hover { + color: $color; + + &:before, + &:after { + background: $color; + } + } +} + +.blue-btn { + @include colorBtn($blue) +} + +.light-blue-btn { + @include colorBtn($light-blue) +} + +.red-btn { + @include colorBtn($red) +} + +.pink-btn { + @include colorBtn($pink) +} + +.green-btn { + @include colorBtn($green) +} + +.tiffany-btn { + @include colorBtn($tiffany) +} + +.yellow-btn { + @include colorBtn($yellow) +} + +.pan-btn { + font-size: 14px; + color: #fff; + padding: 14px 36px; + border-radius: 8px; + border: none; + outline: none; + transition: 600ms ease all; + position: relative; + display: inline-block; + + &:hover { + background: #fff; + + &:before, + &:after { + width: 100%; + transition: 600ms ease all; + } + } + + &:before, + &:after { + content: ''; + position: absolute; + top: 0; + right: 0; + height: 2px; + width: 0; + transition: 400ms ease all; + } + + &::after { + right: inherit; + top: inherit; + left: 0; + bottom: 0; + } +} + +.custom-button { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #fff; + color: #fff; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: 0; + margin: 0; + padding: 10px 15px; + font-size: 14px; + border-radius: 4px; +} diff --git a/nladmin-ui/src/assets/styles/eladmin.scss b/nladmin-ui/src/assets/styles/eladmin.scss index 9eed7c5..5575c74 100644 --- a/nladmin-ui/src/assets/styles/eladmin.scss +++ b/nladmin-ui/src/assets/styles/eladmin.scss @@ -1,230 +1,230 @@ -.head-container { - padding-top: 4px; - padding-bottom: 6px; - background-color: #ffffff; - border-radius: 4px; - - .filter-item { - display: inline-block; - vertical-align: middle; - margin: 0 3px 10px 0; - - input { - height: 30.5px; - line-height: 30.5px; - } - } - - .el-form-item-label { - margin: 0 3px 9px 0; - display: inline-block; - text-align: right; - vertical-align: middle; - font-size: 14px; - color: #606266; - line-height: 30.5px; - padding: 0 7px 0 7px; - } - - .el-button + .el-button { - margin-left: 0 !important; - } - - .el-select__caret.el-input__icon.el-icon-arrow-up { - line-height: 30.5px; - } - - .date-item { - display: inline-block; - vertical-align: middle; - margin-bottom: 10px; - height: 30.5px !important; - width: 230px !important; - } -} - -.el-avatar { - display: inline-block; - text-align: center; - background: #ccc; - color: #fff; - white-space: nowrap; - position: relative; - overflow: hidden; - vertical-align: middle; - width: 32px; - height: 32px; - line-height: 32px; - border-radius: 16px; -} - -.logo-con { - height: 60px; - padding: 13px 0 0; - - img { - height: 32px; - width: 135px; - display: block; - //margin: 0 auto; - } -} - -#el-login-footer { - height: 40px; - line-height: 40px; - position: fixed; - bottom: 0; - width: 100%; - text-align: center; - color: #fff; - font-family: Arial, serif; - font-size: 12px; - letter-spacing: 1px; -} - -#el-main-footer { - background: none repeat scroll 0 0 white; - border-top: 1px solid #e7eaec; - overflow: hidden; - padding: 10px 6px 0 6px; - height: 33px; - font-size: 0.7rem !important; - color: #7a8b9a; - letter-spacing: 0.8px; - font-family: Arial, sans-serif !important; - position: fixed; - bottom: 0; - z-index: 99; - width: 100%; -} - -.eladmin-upload { - border: 1px dashed #c0ccda; - border-radius: 5px; - height: 45px; - line-height: 45px; - width: 368px; -} - -.my-blockquote { - margin: 0 0 10px; - padding: 15px; - line-height: 22px; - border-left: 5px solid #00437B; - border-radius: 0 2px 2px 0; - background-color: #f2f2f2; -} - -.my-code { - position: relative; - padding: 15px; - line-height: 20px; - border-left: 5px solid #ddd; - color: #333; - font-family: Courier New, serif; - font-size: 12px -} - -.el-tabs { - margin-bottom: 25px; -} - - -//修改侧边栏菜单颜色和高度 -.el-menu-item, .el-submenu__title { - height: 40px !important; - //background-color: #776020 !important; -} - -#app .sidebar-container .el-submenu .el-menu-item { -} - -#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { -} - -#app .sidebar-container { - //background-color: #544b32 !important; -} - -.el-form-item--small.el-form-item { - margin-bottom: 12px !important; -} - -.el-form-item--mini.el-form-item { - margin-bottom: 10px !important; -} - -//去除编辑文本框为数字时的上下箭头start -.el-form--inline .el-form-item__content { - width: auto !important; -} - -input[type="number"] { - -moz-appearance: textfield; -} - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; -} - -//去除编辑文本框为数字时的上下箭头end - -//设置计数器文字居左 -.el-input-number--mini .el-input__inner { - text-align: left; -} - -.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { - height: 100% !important; -} - -// 修改弹出框距离 -.el-dialog__body { - padding-top: 0px !important; -} - -//表格标题样式 -.el-table { - .el-table__header-wrapper, - .el-table__fixed-header-wrapper { - th { - word-break: break-word; - background-color: #f5f5f5; - color: #515a6e; - height: 35px; - font-size: 13px; - } - - td { - color: #f8f8f9; - } - } - - .el-table__body-wrapper { - .el-button [class*="el-icon-"] + span { - margin-left: 1px; - } - } -} - -//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ) -.el-table__fixed-right { - height: 100% !important; -} - -//表头与内容错位 -.el-table--scrollable-y .el-table__body-wrapper { - overflow-y: overlay !important; -} -//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240 -.el-table__row td:not(.is-hidden):last-child { - right: -1px; -} - -thead th:not(.is-hidden):last-child { - right: -1px; -} -//左侧边框不显示end - +.head-container { + padding-top: 4px; + padding-bottom: 6px; + background-color: #ffffff; + border-radius: 4px; + + .filter-item { + display: inline-block; + vertical-align: middle; + margin: 0 3px 10px 0; + + input { + height: 30.5px; + line-height: 30.5px; + } + } + + .el-form-item-label { + margin: 0 3px 9px 0; + display: inline-block; + text-align: right; + vertical-align: middle; + font-size: 14px; + color: #606266; + line-height: 30.5px; + padding: 0 7px 0 7px; + } + + .el-button + .el-button { + margin-left: 0 !important; + } + + .el-select__caret.el-input__icon.el-icon-arrow-up { + line-height: 30.5px; + } + + .date-item { + display: inline-block; + vertical-align: middle; + margin-bottom: 10px; + height: 30.5px !important; + width: 230px !important; + } +} + +.el-avatar { + display: inline-block; + text-align: center; + background: #ccc; + color: #fff; + white-space: nowrap; + position: relative; + overflow: hidden; + vertical-align: middle; + width: 32px; + height: 32px; + line-height: 32px; + border-radius: 16px; +} + +.logo-con { + height: 60px; + padding: 13px 0 0; + + img { + height: 32px; + width: 135px; + display: block; + //margin: 0 auto; + } +} + +#el-login-footer { + height: 40px; + line-height: 40px; + position: fixed; + bottom: 0; + width: 100%; + text-align: center; + color: #fff; + font-family: Arial, serif; + font-size: 12px; + letter-spacing: 1px; +} + +#el-main-footer { + background: none repeat scroll 0 0 white; + border-top: 1px solid #e7eaec; + overflow: hidden; + padding: 10px 6px 0 6px; + height: 33px; + font-size: 0.7rem !important; + color: #7a8b9a; + letter-spacing: 0.8px; + font-family: Arial, sans-serif !important; + position: fixed; + bottom: 0; + z-index: 99; + width: 100%; +} + +.eladmin-upload { + border: 1px dashed #c0ccda; + border-radius: 5px; + height: 45px; + line-height: 45px; + width: 368px; +} + +.my-blockquote { + margin: 0 0 10px; + padding: 15px; + line-height: 22px; + border-left: 5px solid #00437B; + border-radius: 0 2px 2px 0; + background-color: #f2f2f2; +} + +.my-code { + position: relative; + padding: 15px; + line-height: 20px; + border-left: 5px solid #ddd; + color: #333; + font-family: Courier New, serif; + font-size: 12px +} + +.el-tabs { + margin-bottom: 25px; +} + + +//修改侧边栏菜单颜色和高度 +.el-menu-item, .el-submenu__title { + height: 40px !important; + //background-color: #776020 !important; +} + +#app .sidebar-container .el-submenu .el-menu-item { +} + +#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item { +} + +#app .sidebar-container { + //background-color: #544b32 !important; +} + +.el-form-item--small.el-form-item { + margin-bottom: 12px !important; +} + +.el-form-item--mini.el-form-item { + margin-bottom: 10px !important; +} + +//去除编辑文本框为数字时的上下箭头start +.el-form--inline .el-form-item__content { + width: auto !important; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +//去除编辑文本框为数字时的上下箭头end + +//设置计数器文字居左 +.el-input-number--mini .el-input__inner { + text-align: left; +} + +.el-table:not(.el-table–scrollable-x) .el-table__fixed-right { + height: 100% !important; +} + +// 修改弹出框距离 +.el-dialog__body { + padding-top: 0px !important; +} + +//表格标题样式 +.el-table { + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + th { + word-break: break-word; + background-color: #f5f5f5; + color: #515a6e; + height: 35px; + font-size: 13px; + } + + td { + color: #f8f8f9; + } + } + + .el-table__body-wrapper { + .el-button [class*="el-icon-"] + span { + margin-left: 1px; + } + } +} + +//表格固定列最后一行显示不全(https://mp.weixin.qq.com/s/HpoykJNtsynsW4UMHitZbQ) +.el-table__fixed-right { + height: 100% !important; +} + +//表头与内容错位 +.el-table--scrollable-y .el-table__body-wrapper { + overflow-y: overlay !important; +} +//左侧边框不显示start https://blog.csdn.net/m0_37922443/article/details/126487240 +.el-table__row td:not(.is-hidden):last-child { + right: -1px; +} + +thead th:not(.is-hidden):last-child { + right: -1px; +} +//左侧边框不显示end + diff --git a/nladmin-ui/src/assets/styles/element-ui.scss b/nladmin-ui/src/assets/styles/element-ui.scss index 5c72fb9..a35cfe8 100644 --- a/nladmin-ui/src/assets/styles/element-ui.scss +++ b/nladmin-ui/src/assets/styles/element-ui.scss @@ -1,122 +1,122 @@ -// 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; -} - -.cell { - .el-tag { - margin-right: 0px; - } -} - -.small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; - } -} - -.fixed-width { - .el-button--mini { - padding: 7px 10px; - width: 60px; - } -} - -.status-col { - .cell { - padding: 0 10px; - text-align: center; - - .el-tag { - margin-right: 0px; - } - } -} - -// 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; - } -} - -// fix date-picker ui bug in filter-item -.el-range-editor.el-input__inner { - display: inline-flex !important; -} - -// to fix el-date-picker css style -.el-range-separator { - box-sizing: content-box; -} - -.el-menu--collapse -> div -> .el-submenu -> .el-submenu__title -.el-submenu__icon-arrow { - display: none; -} - -.el-form-search { - float: right; - .el-form-search-item { - margin-bottom: 0px; - .el-input__inner { - width: 140px; - } - } -} - -el-table .el-table__cell { - padding: 8px 0; -} - -.el-table--medium .el-table__cell { - padding: 6px 0; -} - -.el-table--small .el-table__cell { - padding: 3px 0; -} - -.el-table--mini .el-table__cell { - padding: 1px 0; -} - -.el-dialog__body { - padding: 20px 20px; -} +// 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; +} + +.cell { + .el-tag { + margin-right: 0px; + } +} + +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} + +.fixed-width { + .el-button--mini { + padding: 7px 10px; + width: 60px; + } +} + +.status-col { + .cell { + padding: 0 10px; + text-align: center; + + .el-tag { + margin-right: 0px; + } + } +} + +// 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; + } +} + +// fix date-picker ui bug in filter-item +.el-range-editor.el-input__inner { + display: inline-flex !important; +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} + +.el-menu--collapse +> div +> .el-submenu +> .el-submenu__title +.el-submenu__icon-arrow { + display: none; +} + +.el-form-search { + float: right; + .el-form-search-item { + margin-bottom: 0px; + .el-input__inner { + width: 140px; + } + } +} + +el-table .el-table__cell { + padding: 8px 0; +} + +.el-table--medium .el-table__cell { + padding: 6px 0; +} + +.el-table--small .el-table__cell { + padding: 3px 0; +} + +.el-table--mini .el-table__cell { + padding: 1px 0; +} + +.el-dialog__body { + padding: 20px 20px; +} diff --git a/nladmin-ui/src/assets/styles/element-variables.scss b/nladmin-ui/src/assets/styles/element-variables.scss index a4f8c4a..9a646ff 100644 --- a/nladmin-ui/src/assets/styles/element-variables.scss +++ b/nladmin-ui/src/assets/styles/element-variables.scss @@ -1,31 +1,31 @@ -/** -* I think element-ui's default theme color is too light for long-term use. -* So I modified the default color and you can modify it to your liking. -**/ - -/* theme color */ -$--color-primary: #1890ff; -$--color-success: #13ce66; -$--color-warning: #FFBA00; -$--color-danger: #ff4949; -// $--color-info: #1E1E1E; - -$--button-font-weight: 400; - -// $--color-text-regular: #1f2d3d; - -$--border-color-light: #dfe4ed; -$--border-color-lighter: #e6ebf5; - -$--table-border:1px solid#dfe6ec; - -/* icon font path, required */ -$--font-path: '~element-ui/lib/theme-chalk/fonts'; - -@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - theme: $--color-primary; -} +/** +* I think element-ui's default theme color is too light for long-term use. +* So I modified the default color and you can modify it to your liking. +**/ + +/* theme color */ +$--color-primary: #1890ff; +$--color-success: #13ce66; +$--color-warning: #FFBA00; +$--color-danger: #ff4949; +// $--color-info: #1E1E1E; + +$--button-font-weight: 400; + +// $--color-text-regular: #1f2d3d; + +$--border-color-light: #dfe4ed; +$--border-color-lighter: #e6ebf5; + +$--table-border:1px solid#dfe6ec; + +/* icon font path, required */ +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + +@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + theme: $--color-primary; +} diff --git a/nladmin-ui/src/assets/styles/index.scss b/nladmin-ui/src/assets/styles/index.scss index 35a5c8e..a6212e7 100644 --- a/nladmin-ui/src/assets/styles/index.scss +++ b/nladmin-ui/src/assets/styles/index.scss @@ -1,183 +1,183 @@ -@import 'variables'; -@import 'mixin'; -@import 'transition'; -@import 'element-ui'; -@import 'sidebar'; -@import 'btn'; -@import 'eladmin'; - -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; - background-color: #eeeeee; -} - -#app { - height: 100%; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -.no-padding { - padding: 0 !important; -} - -.padding-content { - padding: 4px 0; -} - -a:focus, -a:active { - outline: none; -} - -a, -a:focus, -a:hover { - cursor: pointer; - color: inherit; - text-decoration: none; -} - -div:focus { - outline: none; -} - -.fr { - float: right; -} - -.fl { - float: left; -} - -.pr-5 { - padding-right: 5px; -} - -.pl-5 { - padding-left: 5px; -} - -.block { - display: block; -} - -.pointer { - cursor: pointer; -} - -.inlineBlock { - display: block; -} - -.clearfix { - &:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; - } -} - -aside { - background: #d40c70; - padding: 8px 24px; - margin-bottom: 20px; - border-radius: 2px; - display: block; - line-height: 32px; - font-size: 16px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - color: #2c3e50; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - a { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } - } -} - -//main-container全局样式 -.app-container { - padding: 10px 20px 45px 10px; -} - -.components-container { - margin: 30px 50px; - position: relative; -} - -.pagination-container { - margin-top: 30px; -} - -.text-center { - text-align: center -} - -.sub-navbar { - height: 50px; - line-height: 50px; - position: relative; - width: 100%; - text-align: right; - padding-right: 20px; - transition: 600ms ease position; - background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); - - .subtitle { - font-size: 20px; - color: #fff; - } - - &.draft { - background: #d0d0d0; - } - - &.deleted { - background: #d0d0d0; - } -} - -.link-type, -.link-type:focus { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } -} - -//refine vue-multiselect plugin -.multiselect { - line-height: 16px; -} - -.multiselect--active { - z-index: 1000 !important; -} +@import 'variables'; +@import 'mixin'; +@import 'transition'; +@import 'element-ui'; +@import 'sidebar'; +@import 'btn'; +@import 'eladmin'; + +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; + //background-color: #eeeeee; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +.no-padding { + padding: 0 !important; +} + +.padding-content { + padding: 4px 0; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.fr { + float: right; +} + +.fl { + float: left; +} + +.pr-5 { + padding-right: 5px; +} + +.pl-5 { + padding-left: 5px; +} + +.block { + display: block; +} + +.pointer { + cursor: pointer; +} + +.inlineBlock { + display: block; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +aside { + background: #d40c70; + padding: 8px 24px; + margin-bottom: 20px; + border-radius: 2px; + display: block; + line-height: 32px; + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + color: #2c3e50; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + a { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } + } +} + +//main-container全局样式 +.app-container { + padding: 10px 20px 45px 10px; +} + +.components-container { + margin: 30px 50px; + position: relative; +} + +.pagination-container { + margin-top: 30px; +} + +.text-center { + text-align: center +} + +.sub-navbar { + height: 50px; + line-height: 50px; + position: relative; + width: 100%; + text-align: right; + padding-right: 20px; + transition: 600ms ease position; + background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); + + .subtitle { + font-size: 20px; + color: #fff; + } + + &.draft { + background: #d0d0d0; + } + + &.deleted { + background: #d0d0d0; + } +} + +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } +} + +//refine vue-multiselect plugin +.multiselect { + line-height: 16px; +} + +.multiselect--active { + z-index: 1000 !important; +} diff --git a/nladmin-ui/src/assets/styles/mixin.scss b/nladmin-ui/src/assets/styles/mixin.scss index 06fa061..64d9cf6 100644 --- a/nladmin-ui/src/assets/styles/mixin.scss +++ b/nladmin-ui/src/assets/styles/mixin.scss @@ -1,66 +1,66 @@ -@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%; -} - -@mixin pct($pct) { - width: #{$pct}; - position: relative; - margin: 0 auto; -} - -@mixin triangle($width, $height, $color, $direction) { - $width: $width/2; - $color-border-style: $height solid $color; - $transparent-border-style: $width solid transparent; - height: 0; - width: 0; - - @if $direction==up { - border-bottom: $color-border-style; - border-left: $transparent-border-style; - border-right: $transparent-border-style; - } - - @else if $direction==right { - border-left: $color-border-style; - border-top: $transparent-border-style; - border-bottom: $transparent-border-style; - } - - @else if $direction==down { - border-top: $color-border-style; - border-left: $transparent-border-style; - border-right: $transparent-border-style; - } - - @else if $direction==left { - border-right: $color-border-style; - border-top: $transparent-border-style; - border-bottom: $transparent-border-style; - } -} +@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%; +} + +@mixin pct($pct) { + width: #{$pct}; + position: relative; + margin: 0 auto; +} + +@mixin triangle($width, $height, $color, $direction) { + $width: $width/2; + $color-border-style: $height solid $color; + $transparent-border-style: $width solid transparent; + height: 0; + width: 0; + + @if $direction==up { + border-bottom: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==right { + border-left: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } + + @else if $direction==down { + border-top: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==left { + border-right: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } +} diff --git a/nladmin-ui/src/assets/styles/sidebar.scss b/nladmin-ui/src/assets/styles/sidebar.scss index 17381fc..7f62c5d 100644 --- a/nladmin-ui/src/assets/styles/sidebar.scss +++ b/nladmin-ui/src/assets/styles/sidebar.scss @@ -1,209 +1,209 @@ -#app { - - .main-container { - min-height: 100%; - transition: margin-left .28s; - margin-left: $sideBarWidth; - position: relative; - } - - .sidebar-container { - transition: width 0.28s; - width: $sideBarWidth !important; - background-color: $menuBg; - height: 100%; - position: fixed; - font-size: 0; - top: 0; - bottom: 0; - left: 0; - z-index: 1001; - overflow: hidden; - - // 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 { - overflow-x: hidden !important; - } - - .el-scrollbar__bar.is-vertical { - right: 0; - } - - .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; - } - - .el-menu { - border: none; - height: 100%; - width: 100% !important; - } - - // menu hover - .submenu-title-noDropdown, - .el-submenu__title { - &:hover { - background-color: $menuHover !important; - } - } - - .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; - } - } - } - - .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; - } - } - } - - .el-submenu { - overflow: hidden; - - &>.el-submenu__title { - padding: 0 !important; - - .svg-icon { - margin-left: 20px; - } - - .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: 0; - } - - .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; - } - } - - .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; - } - } -} +#app { + + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: 100%; + position: fixed; + font-size: 0; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // 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 { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0; + } + + .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; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + + .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; + } + } + } + + .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; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .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: 0; + } + + .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; + } + } + + .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/nladmin-ui/src/assets/styles/transition.scss b/nladmin-ui/src/assets/styles/transition.scss index 4cb27cc..25e7e18 100644 --- a/nladmin-ui/src/assets/styles/transition.scss +++ b/nladmin-ui/src/assets/styles/transition.scss @@ -1,48 +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; -} +// 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/nladmin-ui/src/assets/styles/variables.scss b/nladmin-ui/src/assets/styles/variables.scss index 1d1c7bf..49d4d5c 100644 --- a/nladmin-ui/src/assets/styles/variables.scss +++ b/nladmin-ui/src/assets/styles/variables.scss @@ -1,48 +1,48 @@ -// base color -$blue:#324157; -$light-blue:#3A71A8; -$red:#C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow:#FEC171; -$panGreen: #30B08F; - -$base-logo-title-color: #ffffff; -$base-logo-light-title-color: #001529; -$base-menu-light-background:#ffffff; - -// sidebar -$menuText: #ffffff; -$menuActiveText:#409EFF; -$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951 - -$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773 -$menuHover:#4e5465; - -$base-menu-light-color:rgba(0,0,0,.70); - -$subMenuBg:#000c17; -$subMenuHover:#4e5465; - -$sideBarWidth: 205px; - -// 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; - menuLightBackground: $base-menu-light-background; - menuLightColor: $base-menu-light-color; - menuHover: $menuHover; - subMenuBg: $subMenuBg; - subMenuHover: $subMenuHover; - sideBarWidth: $sideBarWidth; - - logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color -} - -$base-sidebar-width: 2010px; +// base color +$blue:#324157; +$light-blue:#3A71A8; +$red:#C03639; +$pink: #E65D6E; +$green: #30B08F; +$tiffany: #4AB7BD; +$yellow:#FEC171; +$panGreen: #30B08F; + +$base-logo-title-color: #ffffff; +$base-logo-light-title-color: #001529; +$base-menu-light-background:#ffffff; + +// sidebar +$menuText: #ffffff; +$menuActiveText:#409EFF; +$subMenuActiveText: #ffffff; // https://github.com/ElemeFE/element/issues/12951 + +$menuBg: #001529; //https://cloud.tencent.com/developer/article/1753773 +$menuHover:#4e5465; + +$base-menu-light-color:rgba(0,0,0,.70); + +$subMenuBg:#000c17; +$subMenuHover:#4e5465; + +$sideBarWidth: 205px; + +// 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; + menuLightBackground: $base-menu-light-background; + menuLightColor: $base-menu-light-color; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; + + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: $base-logo-light-title-color +} + +$base-sidebar-width: 2010px; diff --git a/nladmin-ui/src/views/acs/device/config.vue b/nladmin-ui/src/views/acs/device/config.vue index cc5f310..d009175 100644 --- a/nladmin-ui/src/views/acs/device/config.vue +++ b/nladmin-ui/src/views/acs/device/config.vue @@ -134,6 +134,7 @@ import xg_agv_car from '@/views/acs/device/driver/agv/xg_agv_car.vue' import oven_inspect_site from '@/views/acs/device/driver/oven_inspect_site.vue' import standard_stacker_device from '@/views/acs/device/driver/standard_stacker_device.vue' import appearance_inspection_scanner_conveyor_device from '@/views/acs/device/driver/appearance_inspection_scanner_conveyor_device.vue' +import strip_conveyor_device from '@/views/acs/device/driver/strip_conveyor_device.vue' export default { name: 'DeviceConfig', components: { @@ -194,6 +195,7 @@ export default { volume_two_manipulator, manipulator_cache, standard_stacker_device, + strip_conveyor_device, appearance_inspection_scanner_conveyor_device }, dicts: ['device_type'], diff --git a/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue b/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue new file mode 100644 index 0000000..59f34e6 --- /dev/null +++ b/nladmin-ui/src/views/acs/device/driver/strip_conveyor_device.vue @@ -0,0 +1,556 @@ + + + + +