大屏展示

vue/src/assets/bigScreen/css/index.scss

@@ -0,0 +1,361 @@
+@import "./modules/reset.scss";
+@import "./modules/variables.scss";
+@import './theme/index.css';
+@import '../iconfont//iconfont.css';
+
+[class*=" blq-icon-"],
+[class^=blq-icon-] {
+  font-family: iconfont !important;
+  speak: none;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+*,
+:after,
+:before {
+  box-sizing: content-box;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+.contents {
+  width: 100%;
+  display: flex;
+  min-height: calc(100% - 60px);
+  justify-content: space-between;
+}
+
+.beautify-scroll-def {
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-thumb {
+    //滚动条的设置
+    background-color: rgba(14, 59, 150, 0);
+    background-clip: padding-box;
+    border-radius: 4px;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      //滚动条的设置
+      background-color: rgba(14, 59, 150, 0.5);
+      background-clip: padding-box;
+      border-radius: 4px;
+    }
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    //滚动条凹槽的颜色，还可以设置边框属性
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    //滚动条的宽度
+    width: 8px;
+    height: 8px;
+  }
+
+
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 59, 150, .8);
+  }
+}
+
+
+.orderNum {
+  // min-width: 22px;
+  // height: 22px;
+  // background: #00b8ff;
+  // border-radius: 50%;
+  // text-align: center;
+  // line-height: 22px;
+  // font-size: 13px;
+  // font-weight: 900;
+  // color: #0f2854;
+  color: #00b8ff;
+}
+
+.yh-big-input {
+  width: 253px;
+  height: 14px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, .53);
+  border-radius: 4px;
+  color: #fff;
+  padding: 6px 10px;
+  font-size: 14px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &:focus {
+    outline: none;
+    border-color: #31abe3;
+  }
+}
+
+.yh-big-el-input {
+  width: 253px;
+  font-size: 14px;
+
+  .el-input__inner {
+    padding: 6px 10px;
+    border: 1px solid rgba(255, 255, 255, .53);
+    background-color: transparent;
+    font-size: 14px;
+    line-height: 1;
+    color: #fff;
+    &:hover{
+      border-color: rgba(255, 255, 255, .8);
+    }
+    &:focus {
+      outline: none;
+      border-color: #31abe3;
+    }
+
+  }
+
+}
+
+.yh-big-button {
+  width: 53px;
+  height: 26px;
+  background: #00b1d6;
+  border-radius: 4px;
+  // border-color: #00b1d6;
+  border-width: 1px;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  font-size: 15px;
+
+  &:hover,
+  &:focus {
+    // border-color: #0597b4;
+    background: #0597b4;
+  }
+}
+
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+//表格样式重置
+.ve-table {
+  $border-color: #525371;
+  // $border-color: rgba(255, 255, 255, .43);
+  box-sizing: border-box;
+
+  .ve-table-container {
+    &::-webkit-scrollbar-track-piece {
+      //滚动条凹槽的颜色，还可以设置边框属性
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      //滚动条的宽度
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      //滚动条的设置
+      background-color: rgba(14, 59, 150, 0.5);
+      background-clip: padding-box;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(14, 59, 150, .8);
+    }
+
+    .ve-table-content {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0px;
+        width: 1px;
+        height: 100%;
+        background-color: $border-color;
+        z-index: 20;
+
+      }
+    }
+
+  }
+
+  &.ve-table-border-around {
+    border-color: $border-color;
+  }
+
+  .ve-table-container table.ve-table-content thead.ve-table-header tr.ve-table-header-tr {
+    height: 34px;
+    box-sizing: border-box;
+
+    th.ve-table-header-th {
+      background: #04004E;
+      color: #FFF;
+      border-color: $border-color;
+      box-sizing: border-box;
+      line-height: 1;
+    }
+  }
+
+  .ve-table-container table.ve-table-content tbody.ve-table-body {
+
+    tr.ve-table-body-tr td.ve-table-body-td,
+    tr.ve-table-expand-tr td.ve-table-body-td,
+    tr.ve-table-body-tr td.ve-table-expand-td,
+    tr.ve-table-expand-tr td.ve-table-expand-td {
+      background: transparent;
+      color: #FFF;
+      border-color: $border-color;
+      box-sizing: border-box;
+    }
+
+    tr.ve-table-body-tr,
+    tr.ve-table-expand-tr {
+      height: 34px;
+      box-sizing: border-box;
+    }
+
+    &.ve-table-row-hover tr.ve-table-body-tr:hover td {
+      background-color: rgba(0, 0, 0, .22);
+      box-sizing: border-box;
+    }
+  }
+
+
+
+  .ve-table-container .ve-table-border-x th,
+  .ve-table-container .ve-table-border-x td {
+    border-color: $border-color;
+    box-sizing: border-box;
+  }
+
+}
+
+
+
+//颜色
+@each $colorkey,
+$color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key,
+$value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key,
+$value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey,
+$fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey,
+$type in $spacing-types {
+
+  //.m-1
+  @each $sizekey,
+  $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey,
+  $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey,
+  $direction in $spacing-directions {
+
+    @each $sizekey,
+    $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+}

vue/src/assets/bigScreen/css/modules/reset.scss

@@ -0,0 +1,200 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-weight: normal;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* custom */
+
+a {
+  color: #7e8c8d;
+  -webkit-backface-visibility: hidden;
+  text-decoration: none;
+}
+
+li {
+  list-style: none;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.olControlScaleLineBottom {
+  display: none;
+}
+
+.olControlScaleLineTop {
+  color: #000 !important;
+  border-bottom: solid 3px #000 !important;
+  border-left: solid 2px #000 !important;
+  border-right: solid 2px #000 !important;
+  background-color: rgba(255, 255, 255, .4);
+  font-size: 10px;
+  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+}
+
+.olControlScaleLine {
+  z-index: 900 !important;
+}
+/*清除浮动*/
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.clearfix {display: inline-block;}
+/* 点击搜索框获取焦点 placeholder消失-开始 */
+/* WebKit browsers */
+
+// input:focus::-webkit-input-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Mozilla Firefox 4 to 18 */
+
+// input:focus:-moz-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Mozilla Firefox 19+ */
+
+// input:focus::-moz-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Internet Explorer 10+ */
+
+// input:focus:-ms-input-placeholder {
+//   color: transparent;
+// }
+
+/* 点击搜索框获取焦点 placeholder消失-结束 */

vue/src/assets/bigScreen/css/modules/variables.scss

@@ -0,0 +1,98 @@
+// 颜色
+$colors: (
+  "primary": #1A5CD7,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+  "icon": #5cd9e8
+);
+
+// 字体大小
+$base-font-size: 0.2rem;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 0.5rem;
+$spacing-sizes: (
+  0: 0,
+  1: 0.5,
+  2: 1,
+  3: 1.5,
+  4: 2,
+  5: 2.5,
+);

vue/src/assets/bigScreen/css/public.scss

@@ -0,0 +1,156 @@
+.flex {
+	display: flex;
+}
+
+.flex-direction {
+	flex-direction: column;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.align-start {
+	align-items: flex-start;
+}
+
+.align-end {
+	align-items: flex-end;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.self-start {
+	align-self: flex-start;
+}
+
+.self-center {
+	align-self: flex-center;
+}
+
+.self-end {
+	align-self: flex-end;
+}
+
+.self-stretch {
+	align-self: stretch;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.justify-start {
+	justify-content: flex-start;
+}
+
+.justify-end {
+	justify-content: flex-end;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-between {
+	justify-content: space-between;
+}
+
+.justify-around {
+	justify-content: space-around;
+}
+@for $i from 0 through 12 {
+  .rdx-flex-#{$i} {
+    flex: $i;
+  }
+}
+
+@for $i from 9 to 50 {
+  .rdx-font-#{$i} {
+    font-size: $i + px;
+  }
+}
+
+@for $i from 2 to 50 {
+  .rdx-radius-#{$i} {
+    border-radius: $i + px;
+  }
+}
+@for $i from 10 to 50 {
+  .rdx-line-height-#{$i} {
+    line-height: $i + px;
+  }
+}
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2 == 0 or $i % 5 == 0 {
+    // 得出：u-margin-30或者u-m-30
+    .rdx-m-#{$i} {
+      margin: $i + px !important;
+    }
+    // 得出：u-padding-30或者u-p-30
+    .rdx-p-#{$i} {
+      padding: $i + px !important;
+    }
+
+    @each $short, $long in l left, t top, r right, b bottom {
+      // 缩写版，结果如： u-m-l-30
+      // 定义外边距
+      .rdx-m-#{$short}-#{$i} {
+        margin-#{$long}: $i + px !important;
+      }
+
+      // 定义内边距
+      .rdx-p-#{$short}-#{$i} {
+        padding-#{$long}: $i + px !important;
+      }
+
+	 //自定义左右内边距
+	  .rdx-p-lr-#{$i} {
+		padding-left:$i + px !important;
+		padding-right:$i + px !important;
+	  }
+	  //自定义上下内边距
+	   .rdx-p-tb-#{$i} {
+	  		padding-top:$i + px !important;
+	  		padding-bottom:$i + px !important;
+	   }
+    }
+  }
+}
+i{font-style: normal;}
+.position-re{position: relative;}
+.position-ab{position: absolute; z-index: 9;}
+.position-fixed{position: fixed; background: rgba(92, 116, 143, 0.45); width: 100%; height: 100%; left: 0px; top: 0px; z-index: 10;}
+.round{border-radius: 50%;}
+.font-strong{font-weight: bold;}
+// .color-del{color:$del-color}
+// .color-primary{color: $primary-color;}
+.color-remark{color: #666666;}
+.color-9{color: #999999;}
+.color-green{color: #38a800;}
+.bg-white{background-color: white;}
+.line-bottom{border-bottom: 1px solid #eeeeee;}
+.button-pointer{cursor: pointer;}
+.box-shadow-item{box-shadow: 0px 0px 4px 0px rgba(45, 45, 46, 0.1);}
+.search-form .search-form-item label {text-align: right; padding-right: 6px;}
+
+
+.break-all{
+  word-break: break-all;
+}
+.blocks{
+  width: 100%;
+  height: 100%;
+}
+.cursor-pointer{
+  cursor: pointer;
+}

vue/src/assets/bigScreen/css/variable.scss

@@ -0,0 +1,50 @@
+// 颜色
+$primary-color: #1890ff;
+$primary-color-hl: rgb(41, 52, 67);
+$default-color: #006569;
+$link: #1890ff;
+$active-color: rgb(0, 101, 105);
+$del-color: #ff1839;
+$content-background: #f3f5fa;
+$table-header-background: #d8eaff;
+
+$primary-color-rgba: rgba($color: $primary-color,
+  $alpha: 0.1,
+);
+//表格上面button按钮颜色
+$table-header-button: #18d1ff;
+// 阴影
+$primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
+0 0 6px rgba(0, 0, 0, 0.04);
+$primary-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$baidu-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
+$gaode-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+0 2px 6px 0 rgba(0, 0, 0, 0.19);
+
+// box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
+
+$primary-border: $primary-color solid 1px;
+
+$tool-top: 20px;
+
+//header 的高度
+$index-height: 60px;
+$index-content-height: calc(100% - 60px);
+$index-tags-height: 36px;
+// 宽度侧边栏
+$aside-width: 200px;
+$content-padding: 16px;
+
+$default-zindex: 99;
+
+/*文本格式化，超出范围，显示省略号*/
+@mixin text-overflow($num: 1) {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+

vue/src/assets/bigScreen/css/webfont/index.css

@@ -0,0 +1,18 @@
+/* @font-face {
+    font-family: 'webfont';
+    font-display: swap;
+    src: url('//at.alicdn.com/t/webfont_c14qx7m7htb.eot');
+    src: 
+    url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff2') format('woff2'),
+    url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff') format('woff'), 
+
+
+  }
+
+.number-font{
+    font-family:"webfont" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+} */

vue/src/assets/bigScreen/iconfont/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2995337 */
+  src: url('iconfont.woff2?t=1638871675242') format('woff2'),
+       url('iconfont.woff?t=1638871675242') format('woff'),
+       url('iconfont.ttf?t=1638871675242') format('truetype');
+}
+
+/* .iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} */
+
+.blq-icon-shezhi01:before {
+  content: "\e610";
+}
+
+.blq-icon-shezhi02:before {
+  content: "\e611";
+}
+