@logwire/logwire-wms-pda-ui 1.1.19 → 1.2.0

package/src/assets/css/global.less

@@ -1,411 +1,428 @@
-
-@import "./var.less";
-
-// 修改所有标签的样式
-* {
-  padding: 0;
-  margin: 0;
-  word-break: break-all;
-}
-
-input:disabled{
-  background-color: rgba(0,0,0,0);
-}
-
-// 修改body
-body{
-  background: @pageColor;
-}
-
-// 页面box样式
-.lw-global-page-box{
-  padding: 10px;
-}
-
-
-// flex 布局
-.lw-global-flex(@a:flex-start, @b:center){
-  display: flex;
-  justify-content: @a;
-  align-items: @b;
-}
-.lw-global-flex-start{
-  .lw-global-flex();
-}
-.lw-global-flex-start-start{
-  .lw-global-flex(flex-start,flex-start);
-}
-.lw-global-flex-center{
-  .lw-global-flex(center);
-}
-.lw-global-flex-between{
-  .lw-global-flex(space-between);
-}
-.lw-global-flex-around{
-  .lw-global-flex(space-around);
-}
-.lw-global-flex-evenly{
-  .lw-global-flex(space-evenly);
-}
-
-// 底部线条
-.lw-global-bottom-border{
-  border-bottom: solid 1px @borderColor;
-}
-
-// 必填的星号
-.lw-global-required{
-
-  &:before{
-    content: '*';
-    color: #D50000;
-    font-size: 18px;
-  }
-}
-
-// 没有顶部padding的行样式
-.lw-global-row-start{
-  padding-bottom: 8px;
-  .lw-global-bottom-border();
-}
-// 行的内边距
-.lw-global-row{
-  padding: 8px 0;
-  .lw-global-bottom-border();
-}
-// 没有底部下划线和padding的行样式
-.lw-global-row-end{
-  padding-top: 8px;
-}
-
-
-// 点击反馈
-.lw-global-click-style{
-  position: relative;
-
-  &:before{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    border-color: #000;
-    border-radius: inherit;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
-
-  &:active:before{
-    opacity: 0.1;
-  }
-}
-
-//tabs 标签切换
-.lw-global-tab-box {
-  .van-tabs--card {
-    > .van-tabs__wrap {
-      height: 40px;
-      color: #fff;
-      margin-bottom: 12px;
-
-      .van-tabs__nav--card {
-        height: 100%;
-        padding: 3px;
-        box-sizing: border-box;
-        border: none;
-        border-radius: 99px;
-        overflow: auto;
-        margin: 0;
-      }
-
-      .van-tabs__nav--card .van-tab {
-        color: @baseColor;
-        //background: @tabsActiveColor;
-        border-right: none;
-        flex-grow: 1;
-      }
-
-      .van-tabs__nav--card .van-tab.van-tab--active {
-        color: @tabsActiveColor;
-        background: @tabsActiveBgColor;
-        border-radius: 99px;
-        overflow: hidden;
-      }
-    }
-
-    .van-tab {
-      flex-grow: 0;
-      flex-shrink: 0;
-      flex-basis: auto;
-      padding: 7px 22px;
-    }
-
-    .van-tab__text--ellipsis{
-      overflow: visible;
-    }
-  }
-}
-
-// 折叠框样式
-.lw-global-collapse-box{
-
-  .van-cell{
-    padding: 5px 0;
-
-    &:after{
-      border-bottom: none;
-    }
-  }
-
-  .van-hairline--top-bottom::after{
-    border-color: @borderColor;
-  }
-
-  .van-collapse-item__content{
-    padding: 5px;
-    color: #262626;
-    border-top: solid 1px @borderColor;
-  }
-
-  &+.lw-global-collapse-box{
-    border-top: solid 1px @borderColor;
-  }
-
-}
-
-// 模块样式-用于模块之间的分隔-提供圆角，背景白色，padding：10
-.lw-global-model-box {
-  padding: 10px;
-  background: #fff;
-  border-radius: 8px;
-
-  & + .lw-global-model-box {
-    margin-top: 10px;
-  }
-}
-
-// 进入动画
-@keyframes lwGlobalAdd {
-  0%{
-    transform: translateY(50px);
-    opacity: 0;
-  }
-  100%{
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-.lw-global-animation-out{
-  opacity: 0;
-  animation: lwGlobalAdd ease-in-out 1s forwards;
-}
-
-// 旋转动画
-@keyframes lwGlobalRotate {
-  0%{
-    transform: rotateX(90deg);
-  }
-  100%{
-    transform: rotateX(0);
-  }
-}
-.lw-global-animation-rotate{
-  animation: lwGlobalRotate ease-in-out 0.3s forwards;
-}
-
-// 从左边进入动画
-@keyframes lwGlobalLeft {
-  0%{
-    transform: translateX(-100%);
-  }
-  100%{
-    transform: translateX(0);
-  }
-}
-.lw-global-animation-left{
-  animation: lwGlobalLeft ease-in-out 0.3s forwards;
-}
-
-// 呼吸动画
-@keyframes lwGlobalBreathe {
-  0%{
-    transform: scale(1);
-  }
-  50%{
-    transform: scale(0.9);
-  }
-  100%{
-    transform: scale(1);
-  }
-}
-.lw-global-animation-breath{
-  animation: lwGlobalBreathe 1s forwards;
-}
-
-
-/* ---------- 描述信息样式 S ---------- */
-.lw-global-title {
-  font-size: 14px;
-  color: @titleColor;
-
-  & + .lw-global-value {
-    margin-left: 5px;
-  }
-
-  & + .lw-global-value-bold {
-    margin-left: 5px;
-  }
-}
-.lw-global-value-bold{
-  .lw-global-value();
-  font-weight: bold;
-}
-.lw-global-value-bold-red{
-  .lw-global-value-bold();
-  color: #D50000;
-}
-
-.lw-global-value {
-  font-size: 14px;
-  color: @fontColor;
-}
-/* ---------- 描述信息样式 E ---------- */
-
-
-// 输入框标题显示冒号
-.lw-global-show-colon:after{
-  content: ':';
-  margin-left: 3px;
-  font-weight: bold;
-}
-
-// 标题前的短横线
-.lw-global-title-left-line{
-  .lw-global-flex-start();
-
-  &:before{
-    content: ' ';
-    display: block;
-    width: 5px;
-    background: @baseColor;
-    height: 16px;
-    border-radius: 4px;
-    margin-right: 5px;
-  }
-}
-
-
-// 徽标
-.lw-global-tip-box{
-  position: relative;
-
-  .lw-global-tip{
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0 3px;
-    height: 15px;
-    border-radius: 999px;
-    color: #fff;
-    font-weight: 500;
-    text-align: center;
-    font-size: 12px;
-    line-height: 1.2;
-    transform: translate(90%,-40%);
-    border: 1px solid #fff;
-    display: inline-block;
-    box-sizing: border-box;
-    min-width: 16px;
-    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
-    background-color: #ee0a24;
-  }
-}
-
-
-// 溢出隐藏
-.lw-global-text-overflow{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// 分隔线
-// 水平分割线
-.lw-global-sh {
-  height: 1px;
-  background: #f0f0f0;
-}
-// 垂直分隔线
-.lw-global-sv {
-  width: 1px;
-  background: white;
-}
-
-// 属性列表样式（定位于块节点）
-.lw-global-props {
-  &.label-align-right > div > div:first-child {
-    text-align: right;
-  }
-  &.label-vertical-align > div > div:first-child {
-    flex-basis: 5.6em;
-  }
-  & > div {
-    display: flex;
-    align-items: center;
-
-    & > div:first-child {
-      margin-right: 5px;
-      color: gray;
-
-      &:after {
-        content: ':';
-      }
-    }
-
-    & > div:nth-child(2) {
-      flex: 1 0 0;
-    }
-
-    & > div:not(:first-child) {
-      color: #232323;
-    }
-  }
-}
-
-// 数字板样式（定位于块节点）
-.lw-global-board-nums {
-  display: flex;
-  justify-content: space-between;
-  margin: 10px -10px 0;
-  padding: 15px;
-  background: #0f90dd;
-  color: white;
-  text-align: center;
-  font-size: 0.9em;
-
-  &.bottom-radius {
-    margin-bottom: -10px;
-    border-radius: 0 0 8px 8px;
-  }
-
-  & > div {
-    & > div:first-child {
-      font-size: 1.2em;
-    }
-
-    & > div:last-child {
-      margin-top: 5px;
-    }
-  }
-}
-
-// 数据看板项样式
-.lw-global-data-look-item{
-  text-align: center;
-
-  >.lw-global-value,>.lw-global-value-bold,>.lw-global-value-bold-red{
-    font-size: 16px;
-  }
-}
+
+@import "./var.less";
+
+// 修改所有标签的样式
+* {
+  padding: 0;
+  margin: 0;
+  word-break: break-all;
+}
+
+input:disabled{
+  background-color: rgba(0,0,0,0);
+}
+
+// 修改body
+body{
+  background: @pageColor;
+}
+button{
+  font: caption;
+}
+
+// 页面box样式
+.lw-global-page-box{
+  padding: 10px;
+}
+
+
+// flex 布局
+.lw-global-flex(@a:flex-start, @b:center){
+  display: flex;
+  justify-content: @a;
+  align-items: @b;
+}
+.lw-global-flex-start{
+  .lw-global-flex();
+}
+.lw-global-flex-start-start{
+  .lw-global-flex(flex-start,flex-start);
+}
+.lw-global-flex-center{
+  .lw-global-flex(center);
+}
+.lw-global-flex-between{
+  .lw-global-flex(space-between);
+}
+.lw-global-flex-around{
+  .lw-global-flex(space-around);
+}
+.lw-global-flex-evenly{
+  .lw-global-flex(space-evenly);
+}
+
+// 底部线条
+.lw-global-bottom-border{
+  border-bottom: solid 1px @borderColor;
+}
+
+// 必填的星号
+.lw-global-required{
+
+  &:before{
+    content: '*';
+    color: #D50000;
+    font-size: 18px;
+  }
+}
+
+// 没有顶部padding的行样式
+.lw-global-row-start{
+  padding-bottom: 8px;
+  .lw-global-bottom-border();
+}
+// 行的内边距
+.lw-global-row{
+  padding: 8px 0;
+  .lw-global-bottom-border();
+}
+// 没有底部下划线和padding的行样式
+.lw-global-row-end{
+  padding-top: 8px;
+}
+
+
+// 点击反馈
+.lw-global-click-style{
+  position: relative;
+
+  &:before{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    border-color: #000;
+    border-radius: inherit;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active:before{
+    opacity: 0.1;
+  }
+}
+
+//tabs 标签切换
+.lw-global-tab-box {
+  .van-tabs--card {
+    > .van-tabs__wrap {
+      height: 40px;
+      color: #fff;
+      margin-bottom: 12px;
+
+      .van-tabs__nav--card {
+        height: 100%;
+        padding: 3px;
+        box-sizing: border-box;
+        border: none;
+        border-radius: 99px;
+        overflow: auto;
+        margin: 0;
+      }
+
+      .van-tabs__nav--card .van-tab {
+        color: @baseColor;
+        //background: @tabsActiveColor;
+        border-right: none;
+        flex-grow: 1;
+      }
+
+      .van-tabs__nav--card .van-tab.van-tab--active {
+        color: @tabsActiveColor;
+        background: @tabsActiveBgColor;
+        border-radius: 99px;
+        overflow: hidden;
+      }
+    }
+
+    .van-tab {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+      padding: 7px 22px;
+    }
+
+    .van-tab__text--ellipsis{
+      overflow: visible;
+    }
+  }
+}
+
+// 折叠框样式
+.lw-global-collapse-box{
+
+  .van-cell{
+    padding: 5px 0;
+
+    &:after{
+      border-bottom: none;
+    }
+  }
+
+  .van-hairline--top-bottom::after{
+    border-color: @borderColor;
+  }
+
+  .van-collapse-item__content{
+    padding: 5px;
+    color: #262626;
+    border-top: solid 1px @borderColor;
+  }
+
+  &+.lw-global-collapse-box{
+    border-top: solid 1px @borderColor;
+  }
+
+}
+
+// 模块样式-用于模块之间的分隔-提供圆角，背景白色，padding：10
+.lw-global-model-box {
+  padding: 10px;
+  background: #fff;
+  border-radius: 8px;
+
+  & + .lw-global-model-box {
+    margin-top: 10px;
+  }
+}
+
+// 进入动画
+@keyframes lwGlobalAdd {
+  0%{
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100%{
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.lw-global-animation-out{
+  opacity: 0;
+  animation: lwGlobalAdd ease-in-out 1s forwards;
+}
+
+// 旋转动画
+@keyframes lwGlobalRotate {
+  0%{
+    transform: rotateX(90deg);
+  }
+  100%{
+    transform: rotateX(0);
+  }
+}
+.lw-global-animation-rotate{
+  animation: lwGlobalRotate ease-in-out 0.3s forwards;
+}
+
+// 从左边进入动画
+@keyframes lwGlobalLeft {
+  0%{
+    transform: translateX(-100%);
+  }
+  100%{
+    transform: translateX(0);
+  }
+}
+.lw-global-animation-left{
+  animation: lwGlobalLeft ease-in-out 0.3s forwards;
+}
+
+// 呼吸动画
+@keyframes lwGlobalBreathe {
+  0%{
+    transform: scale(1);
+  }
+  50%{
+    transform: scale(0.9);
+  }
+  100%{
+    transform: scale(1);
+  }
+}
+.lw-global-animation-breath{
+  animation: lwGlobalBreathe 1s forwards;
+}
+
+
+/* ---------- 描述信息样式 S ---------- */
+.lw-global-title {
+  font-size: 14px;
+  color: @titleColor;
+
+  & + .lw-global-value,
+  & + .lw-global-value-bold,
+  & + .lw-global-value-bold-red {
+    margin-left: 5px;
+  }
+}
+
+.lw-global-value {
+  font-size: 14px;
+  color: @fontColor;
+}
+.lw-global-value-bold{
+  .lw-global-value();
+  font-weight: bold;
+}
+.lw-global-value-bold-red{
+  .lw-global-value-bold();
+  color: #D50000;
+}
+/* ---------- 描述信息样式 E ---------- */
+
+
+// 输入框标题显示冒号
+.lw-global-show-colon:after{
+  content: ':';
+  margin-left: 3px;
+  font-weight: bold;
+}
+
+// 标题前的短横线
+.lw-global-title-left-line{
+  .lw-global-flex-start();
+
+  &:before{
+    content: ' ';
+    display: block;
+    width: 5px;
+    background: @baseColor;
+    height: 16px;
+    border-radius: 4px;
+    margin-right: 5px;
+  }
+}
+
+
+// 徽标
+.lw-global-tip-box{
+  position: relative;
+
+  .lw-global-tip{
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 3px;
+    height: 15px;
+    border-radius: 999px;
+    color: #fff;
+    font-weight: 500;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.2;
+    transform: translate(90%,-40%);
+    border: 1px solid #fff;
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: 16px;
+    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+    background-color: #ee0a24;
+  }
+}
+
+
+// 溢出隐藏
+.lw-global-text-overflow{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 分隔线
+// 水平分割线
+.lw-global-sh {
+  height: 1px;
+  background: #f0f0f0;
+}
+// 垂直分隔线
+.lw-global-sv {
+  width: 1px;
+  background: white;
+}
+
+// 属性列表样式（定位于块节点）
+.lw-global-props {
+  &.label-align-right > div > div:first-child {
+    text-align: right;
+  }
+  &.label-vertical-align > div > div:first-child {
+    flex-basis: 5.6em;
+  }
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:first-child {
+      margin-right: 5px;
+      color: gray;
+
+      &:after {
+        content: ':';
+      }
+    }
+
+    & > div:nth-child(2) {
+      flex: 1 0 0;
+    }
+
+    & > div:not(:first-child) {
+      color: #232323;
+    }
+  }
+}
+
+// 数字板样式（定位于块节点）
+.lw-global-board-nums {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px -10px 0;
+  padding: 15px;
+  background: #e44b51;
+  color: white;
+  text-align: center;
+  font-size: 0.9em;
+
+  &.bottom-radius {
+    margin-bottom: -10px;
+    border-radius: 0 0 8px 8px;
+  }
+
+  & > div {
+    & > div:first-child {
+      font-size: 1.2em;
+    }
+
+    & > div:last-child {
+      margin-top: 5px;
+    }
+  }
+}
+
+// 数据看板项样式
+.lw-global-data-look-item{
+  text-align: center;
+
+  >.lw-global-value,>.lw-global-value-bold,>.lw-global-value-bold-red{
+    font-size: 16px;
+  }
+}
+
+// 外边框
+.lw-global-border-2px{
+  border: solid 2px @baseColor;
+}
+
+// 上圆角
+.lw-global-model-top-radius{
+  .lw-global-model-box();
+  border-radius: 10px 10px 0 0;
+}
+// 下圆角
+.lw-global-model-bottom-radius{
+  .lw-global-model-box();
+  border-radius: 0 0 10px 10px;
+}