n20-common-lib 1.3.9 → 1.3.12

package/treme/blue.umd.min.js

@@ -0,0 +1 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["dev-corelib-blue.umd.min"]=t():e["dev-corelib-blue.umd.min"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s="fae3")}({"1eb2":function(e,t,r){"use strict";if("undefined"!==typeof window){var n=window.document.currentScript,o=r("8875");n=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var u=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);u&&(r.p=u[1])}},8875:function(e,t,r){var n,o,u;(function(r,c){o=[],n=c,u="function"===typeof n?n.apply(t,o):n,void 0===u||(e.exports=u)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(s){var r,n,o,u=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,c=/@([^@]*):(\d+):(\d+)\s*$/gi,i=u.exec(s.stack)||c.exec(s.stack),f=i&&i[1]||!1,d=i&&i[2]||!1,p=document.location.href.replace(document.location.hash,""),a=document.getElementsByTagName("script");f===p&&(r=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(d-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=r.replace(n,"$1").trim());for(var l=0;l<a.length;l++){if("interactive"===a[l].readyState)return a[l];if(a[l].src===f)return a[l];if(f===p&&a[l].innerHTML&&a[l].innerHTML.trim()===o)return a[l]}return null}}return e}))},9536:function(e,t,r){},fae3:function(e,t,r){"use strict";r.r(t);r("1eb2");var n=r("9536");for(var o in n)["default"].indexOf(o)<0&&function(e){r.d(t,e,(function(){return n[e]}))}(o)}})}));

package/treme/css/normalize.scss

@@ -0,0 +1,726 @@
+$--font-size-base: 14px !default;
+$--border-color-base: #dcdfe6 !default;
+$--border-radius-base: 4px !default;
+$--input-width: 224px !default;
+
+// 项目中可以直接使用
+// .input-w {width: $--input-width;}
+// .button-4em{min-width: 72px;}
+/* 格式化样式
+---------------- */
+html {
+  height: 100%;
+}
+body {
+  height: 100%;
+  font-size: $--font-size-base;
+}
+li {
+  list-style: none;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+iframe {
+  border: 0;
+  outline: none;
+}
+
+/* 滚动条样式
+--------------- */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  border-color: transparent;
+  border-style: solid;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  background-color: rgba(0, 0, 0, 0.07);
+  border-width: 0;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+// ::-webkit-scrollbar-track:hover {
+//   background-color: rgba(0, 0, 0, 0.03);
+// }
+
+// ::-webkit-scrollbar-track:active {
+//   background-color: rgba(0, 0, 0, 0.03);
+// }
+
+:root {
+  --client-height: calc(100vh - 116px);
+}
+
+/* 内外边距
+--------------- */
+@mixin set-pm($m, $p) {
+  .p-a#{$m} {
+    padding: $p;
+  }
+
+  .p-t#{$m} {
+    padding-top: $p;
+  }
+
+  .p-b#{$m} {
+    padding-bottom: $p;
+  }
+
+  .p-l#{$m} {
+    padding-left: $p;
+  }
+
+  .p-r#{$m} {
+    padding-right: $p;
+  }
+
+  .m-a#{$m} {
+    margin: $p;
+  }
+
+  .m-t#{$m} {
+    margin-top: $p;
+  }
+
+  .m-b#{$m} {
+    margin-bottom: $p;
+  }
+
+  .m-l#{$m} {
+    margin-left: $p;
+  }
+
+  .m-r#{$m} {
+    margin-right: $p;
+  }
+}
+
+/* 内外边距 */
+.m-l-auto {
+  margin-left: auto !important;
+}
+.m-r-auto {
+  margin-right: auto !important;
+}
+.m-lr-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+@include set-pm('', 12px !important);
+@include set-pm('-xl', 32px !important);
+@include set-pm('-lg', 24px !important);
+@include set-pm('-m', 16px !important);
+@include set-pm('-s', 8px !important);
+@include set-pm('-b', 6px !important);
+@include set-pm('-ss', 4px !important);
+@include set-pm('-0', 0 !important);
+
+/* 内外边距
+--------------- */
+@mixin pm-fn($n) {
+  .pa-#{$n} {
+    padding: #{$n}px;
+  }
+  .pt-#{$n} {
+    padding-top: #{$n}px;
+  }
+  .pl-#{$n} {
+    padding-left: #{$n}px;
+  }
+  .pr-#{$n} {
+    padding-right: #{$n}px;
+  }
+  .pb-#{$n} {
+    padding-bottom: #{$n}px;
+  }
+  .px-#{$n} {
+    padding-left: #{$n}px;
+    padding-right: #{$n}px;
+  }
+  .py-#{$n} {
+    padding-top: #{$n}px;
+    padding-bottom: #{$n}px;
+  }
+  .ma-#{$n} {
+    margin: #{$n}px;
+  }
+  .mt-#{$n} {
+    margin-top: #{$n}px;
+  }
+  .ml-#{$n} {
+    margin-left: #{$n}px;
+  }
+  .mr-#{$n} {
+    margin-right: #{$n}px;
+  }
+  .mb-#{$n} {
+    margin-bottom: #{$n}px;
+  }
+  .mx-#{$n} {
+    margin-left: #{$n}px;
+    margin-right: #{$n}px;
+  }
+  .py-#{$n} {
+    margin-top: #{$n}px;
+    margin-bottom: #{$n}px;
+  }
+}
+
+@include pm-fn(0);
+@include pm-fn(2);
+@include pm-fn(4);
+@include pm-fn(6);
+@include pm-fn(8);
+@include pm-fn(10);
+@include pm-fn(12);
+@include pm-fn(14);
+
+/* 浮动布局
+--------------- */
+.left,
+.float-left {
+  float: left;
+}
+
+.right,
+.float-right {
+  float: right;
+}
+
+.overflow {
+  height: auto;
+  overflow: hidden;
+}
+
+.overflow-y {
+  overflow-y: auto;
+}
+.overflow-x {
+  overflow-x: auto;
+}
+
+// 清除浮动
+.overflow-clear {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+/* 清除左侧浮动，将元素放置在任何先前的左浮动元素的下方 */
+.clear-left {
+  clear: left;
+}
+/* 清除右侧浮动，将元素放置在任何先前的右浮动元素的下方 */
+.clear-right {
+  clear: right;
+}
+
+/* 行内块元素水平垂直对齐方式
+--------------- */
+.b-center {
+  text-align: center;
+  & > * {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.b-vertical {
+  font-size: 0;
+  & > * {
+    vertical-align: middle;
+    display: inline-block;
+    font-size: 14px;
+  }
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 0;
+    height: 100%;
+  }
+}
+
+/* 文字居中
+--------------- */
+.text {
+  &-c {
+    text-align: center !important;
+  }
+  &-l {
+    text-align: left !important;
+  }
+  &-r {
+    text-align: right !important;
+  }
+  &-lr {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+  &-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* 弹性盒模型
+--------------- */
+.flex-box {
+  display: flex;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-box > *,
+.flex-column > * {
+  flex: none;
+}
+
+.flex {
+  &-v {
+    align-items: center;
+  }
+  &-s {
+    align-items: flex-start;
+  }
+  &-e {
+    align-items: flex-end;
+  }
+  &-l {
+    justify-content: flex-start;
+  }
+  &-r {
+    justify-content: flex-end;
+  }
+  &-c {
+    justify-content: center;
+  }
+  &-lr {
+    justify-content: space-between;
+  }
+  &-sa {
+    justify-content: space-around;
+  }
+}
+
+.flex-item {
+  flex: auto;
+}
+
+@for $n from 0 to 10 {
+  .flex-#{$n} {
+    flex: $n $n auto;
+  }
+}
+
+/* 旋转图标90度
+-------------- */
+.rotate90 {
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+/* 清除背景色
+-------------- */
+.bg {
+  &-none {
+    background: none !important;
+  }
+}
+
+/* 阴影 */
+.box-shadow {
+  box-shadow: 0px 4px 16px 0px rgba($--color-black, 0.1);
+}
+.box-shadow-mini {
+  box-shadow: 0px 2px 8px 0px rgba($--color-black, 0.08);
+}
+.page-footer-shadow {
+  position: relative;
+  height: 38px;
+  margin-bottom: -12px;
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    left: -12px;
+    right: -12px;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+.page-button-shadow {
+  position: relative;
+  height: 44px;
+  margin-bottom: -12px;
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    left: -12px;
+    right: -12px;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+/* 边框
+-------------- */
+.bd {
+  &-none {
+    border: none !important;
+  }
+  &-a {
+    border: 1px solid $--border-color-base;
+  }
+  &-t {
+    border-top: 1px solid $--border-color-base;
+  }
+  &-l {
+    border-left: 1px solid $--border-color-base;
+  }
+  &-r {
+    border-right: 1px solid $--border-color-base;
+  }
+  &-b {
+    border-bottom: 1px solid $--border-color-base;
+  }
+}
+.bd-rs {
+  border-radius: $--border-radius-base;
+}
+
+/* 设置弹窗内容区内边距
+-------------- */
+.el-dialog__wrapper {
+  &.p-a-0 {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  &.p-t-0 {
+    .el-dialog__body {
+      padding-top: 0;
+    }
+  }
+  &.p-b-0 {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+}
+
+/* 通用字号
+-------------- */
+.font-size-base {
+  font-size: var(--font-size-base);
+}
+.font-size-small {
+  font-size: var(--font-size-small);
+}
+
+/* 通用颜色
+-------------- */
+.color-primary {
+  color: var(--color-primary) !important;
+}
+.color-success {
+  color: var(--color-success);
+}
+.color-warning {
+  color: var(--color-warning);
+}
+.color-danger {
+  color: var(--color-danger);
+}
+.color-placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.linear-grad {
+  background: var(--background-linear-gradient);
+}
+
+.color-white {
+  color: white;
+}
+.color-ccc {
+  color: #ccc;
+}
+.color-999 {
+  color: #999;
+}
+.color-666 {
+  color: #666;
+}
+.color-333 {
+  color: #333;
+}
+
+/* 鼠标默认样式
+--------------- */
+.cursor-d {
+  cursor: default;
+}
+/* 鼠标小手
+--------------- */
+.pointer {
+  cursor: pointer;
+}
+
+/* 鼠标禁止
+---------------- */
+.cursor-not {
+  cursor: not-allowed;
+}
+
+/* 字重
+--------------- */
+.font {
+  &-w600 {
+    font-weight: var(--font-weight-primary);
+  }
+}
+
+/* 字号
+--------------- */
+.f-s {
+  &-s {
+    /* 12号字 */
+    font-size: var(--font-size-small);
+  }
+  &-b {
+    /* 14号字 */
+    font-size: var(--font-size-base);
+  }
+  &-m {
+    /*  16号字 */
+    font-size: var(--font-size-medium);
+  }
+  &-l {
+    /* 18号 */
+    font-size: var(--font-size-large);
+  }
+  &-xl {
+    font-size: var(--font-size-extra-large);
+  }
+}
+
+/* 宽高范围是 60-1000
+---------------- */
+$list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
+  300, 400, 500, 600, 700, 800, 900, 1000;
+@each $n in $list {
+  .w-#{$n} {
+    width: #{$n}px !important;
+  }
+  .h-#{$n} {
+    height: #{$n}px !important;
+  }
+}
+
+/* 宽百分比 */
+@for $i from 1 through 10 {
+  .w-#{$i}0p {
+    width: #{$i + '0%'} !important;
+  }
+}
+
+.n20-page-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 边框圆角
+-------------- */
+.b {
+  &-r {
+    border-radius: 50%;
+  }
+  &-r-4 {
+    border-radius: 4px;
+  }
+  &-r-5 {
+    border-radius: 5px;
+  }
+  &-r-6 {
+    border-radius: 6px;
+  }
+  &-r-7 {
+    border-radius: 7px;
+  }
+  &-r-8 {
+    border-radius: 8px;
+  }
+  &-r-9 {
+    border-radius: 9px;
+  }
+  &-r-10 {
+    border-radius: 10px;
+  }
+}
+
+/* 垂直对齐
+--------------- */
+.align {
+  &-baseline {
+    vertical-align: baseline; // 将一个元素的基线与其父元素的基线对齐。
+  }
+  &-top {
+    vertical-align: top; // 将一个元素的顶部和它的子代与整个行的顶部对齐。
+  }
+  &-middle {
+    vertical-align: middle; // 将元素的中间与基线加父元素的一半高度对齐。
+  }
+  &-bottom {
+    vertical-align: bottom; // 将一个元素的底部和它的子代与整个行的底部对齐。
+  }
+  &-text-top {
+    vertical-align: text-top; // 使元素的顶部与父元素的字体顶部对齐。
+  }
+  &-text-bottom {
+    vertical-align: text-bottom; // 使元素的底部与父元素的字体底部对齐。
+  }
+}
+
+/* 本文选择 */
+
+.select {
+  &-none {
+    user-select: none; // 防止选择元素及其子元素中的文本。
+  }
+  &-text {
+    user-select: text; // 允许选择元素及其子元素中的文本。
+  }
+  &-all {
+    user-select: all; // 在用户点击时自动选择元素中的所有文本。
+  }
+  &-auto {
+    user-select: auto; // 使用默认的浏览器行为来选择文本
+  }
+}
+
+/* 文本溢出显示省略号 */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 本文转换 */
+/* 使用 uppercase 功能类对文本进行大写转换 */
+.uppercase {
+  text-transform: uppercase;
+}
+/* 使用 lowercase 功能类对文本进行小写转换 */
+.lowercase {
+  text-transform: lowercase;
+}
+/* 使用 capitalize 功能类对文本进行首字母大写转换 */
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* 下划线 */
+.underline {
+  text-decoration: underline;
+}
+/*  删除线 */
+.line-through {
+  text-decoration: line-through;
+}
+/*  移除文本装饰 */
+.no-underline {
+  text-decoration: none;
+}
+
+/* 动画 */
+.animate {
+  &-none {
+    animation: none;
+  }
+  &-spin {
+    animation: spin 1s linear infinite;
+  }
+  &-ping {
+    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+  &-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  &-bounce {
+    animation: bounce 1s infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ping {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}