@yxhl/specter-pui-vtk 1.0.0

package/src/assets/css/globals.scss

@@ -0,0 +1,250 @@
+/* 公共css样式 */
+
+/* ==================
+        初始化
+ ==================== */
+a {
+    text-decoration: none;
+}
+/* ==================
+        鼠标样式
+ ==================== */
+.g-cursor-pointer {
+    cursor: pointer;
+}
+.g-cursor-not {
+    cursor: not-allowed;
+}
+.g-cursor-default {
+    cursor: default;
+}
+
+/* ==================
+          内边距
+ ==================== */
+@for $i from 17 through 20 {
+    .g-pa-#{$i} {
+        padding: ($i * 4) px;
+    }
+    .g-px-#{$i} {
+        padding: 0 ($i * 4) px;
+    }
+    .g-py-#{$i} {
+        padding: ($i * 4) px 0;
+    }
+    .g-pl-#{$i} {
+        padding-left: ($i * 4) px;
+    }
+    .g-pr-#{$i} {
+        padding-right: ($i * 4) px;
+    }
+}
+
+/* ==================
+          外边距
+ ==================== */
+@for $i from 17 through 20 {
+    .g-ma-#{$i} {
+        margin: ($i * 4) px;
+    }
+    .g-mx-#{$i} {
+        margin: 0 ($i * 4) px;
+    }
+    .g-my-#{$i} {
+        margin: ($i * 4) px 0;
+    }
+    .g-ml-#{$i} {
+        margin-left: ($i * 4) px;
+    }
+    .g-mr-#{$i} {
+        margin-right: ($i * 4) px;
+    }
+}
+
+/* ==================
+        高度+宽度
+ ==================== */
+.g-height {
+    height: 100%;
+}
+.g-width {
+    width: 100%;
+}
+.g-wh {
+    width: 100%;
+    height: 100%;
+}
+.g-wh-v {
+    width: 100vw;
+    height: 100vh;
+}
+@for $i from 1 through 10 {
+    .g-width-#{$i} {
+        width: $i * 10%;
+    }
+}
+.g-width-nav {
+    max-width: 260px !important;
+}
+/* ==================
+          颜色
+ ==================== */
+.g-white{
+    background: white;
+}
+ .theme--dark.g-white{
+     background: #1E1E1E;
+ }
+ //渐变色
+.g-grad-blue {
+    background: linear-gradient(226deg, #3eddff 0%, #008ef0 100%);
+}
+.g-grad-cyan {
+    background: linear-gradient(226deg, #31e1c0 0%, #19a090 100%);
+}
+.g-grad-green {
+    background: linear-gradient(226deg, #79dd43 0%, #00a23d 100%);
+}
+.g-grad-orange {
+    background: linear-gradient(226deg, #ffc042 0%, #fa7414 100%);
+}
+.g-grad-yellow {
+    background: linear-gradient(226deg, #ffdd33 0%, #faa700 100%);
+}
+.g-grad-red {
+    background: linear-gradient(226deg, #ff7d7d 0%, #ca0000 100%);
+}
+.g-grad-indigo {
+    background: linear-gradient(226deg, #00b0d6 0%, #000bc0 100%);
+}
+
+/* ==================
+          文本
+ ==================== */
+@for $i from 5 through 30 {
+    .g-size-#{$i} {
+        font-size: ($i * 2) px;
+    }
+}
+.g-text-indent {
+    text-indent: 2em;
+}
+//文本超出隐藏并显示省略号
+.g-text-overflow {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+}
+@for $i from 5 through 30 {
+    .g-text-overflow-#{$i} {
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: $i;
+        line-clamp: $i;
+        -webkit-box-orient: vertical;
+    }
+}
+/* ==================
+        对齐方式
+ ==================== */
+.g-v-align-sub {
+    vertical-align: sub;
+}
+.g-v-align-super {
+    vertical-align: super;
+}
+.g-v-align-top {
+    vertical-align: top;
+}
+.g-v-align-middle {
+    vertical-align: middle;
+}
+.g-v-align-bottom {
+    vertical-align: bottom;
+}
+
+/* ==================
+        滚动条样式
+ ==================== */
+.g-scrollbar {
+    overflow-x: hidden;
+    overflow: hidden;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        background-color: rgb(212, 212, 212);
+        background-image: -webkit-linear-gradient(
+            45deg,
+            rgba(255, 255, 255, 0) 25%,
+            transparent 25%,
+            transparent 50%,
+            rgba(255, 255, 255, 0) 50%,
+            rgba(255, 255, 255, 0) 75%,
+            transparent 75%,
+            transparent
+        );
+    }
+    &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+        background: #ededed00;
+        border-radius: 10px;
+    }
+}
+
+/* ==================
+          边框
+ ==================== */
+.g-border-dotted {
+    border: rgb(228, 228, 228) 1px dotted;
+}
+.g-border-dashed {
+    border: rgb(228, 228, 228) 1px dashed;
+}
+.g-border-solid {
+    border: rgb(228, 228, 228) 1px solid;
+}
+
+/* ==================
+          背景
+ ==================== */
+.g-shadow {
+    box-shadow: #3333331a 1px 1px 8px !important;
+}
+
+/* ==================
+          图片
+ ==================== */
+
+/* ==================
+          头像
+ ==================== */
+
+/* ==================
+          加载
+ ==================== */
+
+/* ==================
+          列表
+ ==================== */
+
+/* ==================
+         表单
+ ==================== */
+
+/* ==================
+         模态窗口
+ ==================== */
+
+/* ==================
+          步骤条
+ ==================== */

package/src/assets/css/index.scss

@@ -0,0 +1,271 @@
+@charset "UTF-8";
+html {
+  height: 100%;
+  overflow-y: auto !important;
+}
+.v-bottom-black-bar {
+  // 适应底部小黑条
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+// 去除Google游览器自动填充账号出现的背景
+input {
+  background-color: transparent !important;
+}
+input:-webkit-autofill {
+  transition: background-color 1s ease-in-out 6000s;
+  -webkit-transition: background-color 1s ease-in-out 6000s;
+  -webkit-text-fill-color: #fff !important;
+}
+
+// 清除vuetify的默认pre下的code伪元素和阴影
+.v-application pre > code {
+  box-shadow: none;
+  &::before,
+  &::after {
+    content: none;
+  }
+}
+.container,
+footer,
+.v-application--wrap,
+header {
+  min-width: 1200px !important;
+}
+pre[class*="language-"] {
+  margin: auto 0 !important;
+}
+// 分页
+.v-pagination .v-pagination__item {
+  outline: none;
+}
+.title_icon {
+  width: 5px;
+  height: 28px;
+  border-radius: 8px;
+  margin-right: 12px;
+  vertical-align: bottom;
+  margin-bottom: 2px;
+}
+
+//渐变色样式
+.grad_blue {
+  background: linear-gradient(226deg, #3eddff 0%, #008ef0 100%);
+}
+.grad_cyan {
+  background: linear-gradient(226deg, #31e1c0 0%, #19a090 100%);
+}
+.grad_green {
+  background: linear-gradient(226deg, #79dd43 0%, #00a23d 100%);
+}
+.grad_amber {
+  background: linear-gradient(226deg, #ffca51 0%, #ff9400 100%);
+}
+.grad_red {
+  background: linear-gradient(226deg, #ff7d7d 0%, #ca0000 100%);
+}
+.v-theme--light.grad_darkBlue {
+  color: white !important;
+  background: linear-gradient(90deg, #1b87fd 0%, #3147c9 100%) !important;
+}
+.v-theme--dark.grad_darkBlue{
+  background: linear-gradient(90deg, #030092 0%, #020c4d 100%) !important;
+}
+//宽高
+.height_100 {
+  height: 100%;
+}
+.width_100 {
+  width: 100%;
+}
+.width_65 {
+  width: 65%;
+}
+.width_60 {
+  width: 60%;
+}
+.width_40 {
+  width: 40%;
+}
+.width_30 {
+  width: 30%;
+}
+.width_20 {
+  width: 20%;
+}
+.wh_100 {
+  width: 100%;
+  height: 100%;
+}
+
+//边距
+.pa_15 {
+  padding: 60px !important;
+}
+.pa_20 {
+  padding: 80px !important;
+}
+.px_20 {
+  padding: 0 80px !important;
+}
+.mt_n24 {
+  margin-top: -96px !important;
+}
+
+//字体大小
+.size_28 {
+  font-size: 28px !important;
+}
+.size_24 {
+  font-size: 24px !important;
+}
+.size_20 {
+  font-size: 20px !important;
+}
+.size_16 {
+  font-size: 16px !important;
+}
+
+//定位
+.position_f_top {
+  position: fixed !important;
+  top: 0;
+}
+
+//对齐方式
+.v_align_top {
+  vertical-align: top;
+}
+.v_align_middle {
+  vertical-align: middle;
+}
+
+//初始化基本样式
+a {
+  text-decoration: none;
+}
+.pointer {
+  cursor: pointer;
+}
+.shadow {
+  box-shadow: #3333331a 1px 1px 8px !important;
+}
+.text-overflow {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+.text-overflow-1 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.text-overflow-2 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  height: 3em;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.text-overflow-3 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+//标题
+.g_title_bg {
+  position: absolute;
+  top: 36px;
+  font-variant: all-petite-caps;
+  &::before {
+    content: "";
+    width: 60px;
+    height: 6px;
+    background: #2973ff40;
+    border-radius: 6px;
+    position: absolute;
+    top: -5px;
+    z-index: 0;
+  }
+}
+//标题前小圆柱
+.g_title_icon {
+  display: inline-block;
+  margin-right: 8px;
+  width: 4px;
+  height: 100%;
+  min-height: 18px;
+  background: linear-gradient(180deg, #1b87fd 0%, #3147c9 100%);
+  border-radius: 2px;
+}
+
+//文本颜色
+.text_color {
+  .black_text {
+    color: #000 !important;
+  }
+}
+
+//顶部叠层
+.g_card_fold {
+  &::before {
+    content: "";
+    width: 98%;
+    border-radius: 8px 8px 0 0;
+    display: inline-block;
+    height: 14px;
+    background: #fff;
+    position: absolute;
+    top: -14px;
+    left: 1%;
+    opacity: 0.3;
+  }
+  &::after {
+    content: "";
+    width: 96%;
+    border-radius: 8px 8px 0 0;
+    display: inline-block;
+    height: 26px;
+    background: #fff;
+    position: absolute;
+    top: -26px;
+    left: 2%;
+    opacity: 0.1;
+  }
+}
+
+
+div::-webkit-scrollbar {
+  width: 6px;
+}
+/* 滚动条轨道 */
+div::-webkit-scrollbar-track {
+  background: rgb(239, 239, 239);
+  border-radius: 2px;
+}
+/* 小滑块 */
+div::-webkit-scrollbar-thumb {
+  background: #676767c3;
+  border-radius: 10px;
+}
+div::-webkit-scrollbar-thumb:hover {
+  background: #40a0ff;
+}
+
+.v-container {
+  padding: 0 24px;
+}

package/src/assets/css/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );