@fangzhongya/fang-ui 0.0.96 → 0.0.98

package/dist/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --on: rgb(91, 189, 246);
   --color-primary: #409eff;
@@ -108,7 +109,7 @@
 
 .selects-select {
   height: 100%;
-  min-width: 100px;
+  min-width: 60px;
   width: 100%;
 }
 .selects-select > div {
@@ -201,6 +202,11 @@
   cursor: not-allowed;
 }
 
+.images-img {
+  width: 100%;
+  height: 100%;
+}
+
 .input-array {
   width: 100%;
   display: inline-flex;
@@ -446,6 +452,85 @@
   width: 100%;
 }
 
+.uploads {
+  display: flex;
+  align-items: center;
+}
+.uploads-upload-trigger {
+  width: 60px;
+  height: 60px;
+  border: 1px dashed #ccc;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.uploads-list-li {
+  position: relative;
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  border: 1px solid #ccc;
+}
+.uploads-list-li:hover .uploads-list-li-operation {
+  display: flex;
+}
+.uploads-list-li-operation {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  z-index: 100;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.uploads-list-li-operation > span {
+  font-size: 16px;
+  padding: 3px;
+  line-height: 1;
+  cursor: pointer;
+}
+.uploads-list-li-operation-delete {
+  color: var(--el-color-danger);
+}
+.uploads-list-li-value {
+  height: 100%;
+}
+.uploads-list-li-value-img {
+  height: 100%;
+  width: 100%;
+}
+.uploads-list-li-value-document {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list-li-value-document-bg {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+}
+.uploads-list-li-value-document-text {
+  max-height: 100%;
+  /* 换行设置 */
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  /* 多行省略 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  line-height: 1.1;
+}
+
 .forms {
   --forms-inline-right: 16px;
   --forms-row-height: 32px;
@@ -649,6 +734,18 @@
   padding: 20px 20px;
 }
 
+.full-screen {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  position: relative;
+}
+.full-screen-buts {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
 .no-data {
   text-align: center;
   margin-top: 20px;
@@ -1154,6 +1251,154 @@
   align-items: center;
 }
 
+.audios.is-playing .audios-name {
+  background-color: antiquewhite;
+}
+.audios-slider {
+  display: flex;
+  align-items: center;
+}
+.audios-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.audios-control {
+  display: flex;
+  align-items: center;
+}
+.audios-control-buts {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.audios-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.audios-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.audios-control-volume-slider {
+  min-width: 40px;
+  max-width: 160px;
+}
+.audios-list-li.is-active {
+  background-color: aqua;
+}
+
+.videos {
+  display: flex;
+  height: 100%;
+  border-radius: 8px;
+  background: #000;
+  color: #fff;
+  position: relative;
+  --videos-list-width: 20%;
+}
+.videos.is-fullscreen {
+  border-radius: 0;
+}
+.videos.is-fullscreen .videos-controls-bottom {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.videos.is-fullscreen .videos-list {
+  background-color: rgba(238, 238, 238, 0.5);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.videos.is-list .videos-controls-bottom {
+  width: calc(100% - var(--videos-list-width));
+}
+.videos-videos {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.videos-videos .videos-controls-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  padding: 5px;
+  background-color: rgba(238, 238, 238, 0.5);
+}
+.videos-videos .videos-video {
+  flex: 1;
+  margin: 0 auto;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+.videos-videos .videos-video video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+}
+.videos-videos .videos-controls-bottom .videos-slider {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-slider-slider {
+  margin-left: 10px;
+}
+.videos-videos .videos-controls-bottom .videos-slider .videos-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-buts {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-slider {
+  min-width: 40px;
+  max-width: 120px;
+  margin-right: 5px;
+}
+.videos-videos .videos-controls-bottom .videos-control-more {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-more-rate {
+  width: 60px;
+  margin: 0 10px;
+}
+.videos-list {
+  width: var(--videos-list-width);
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
 .retract {
   position: relative;
 }
@@ -1240,6 +1485,35 @@
   align-items: center;
 }
 
+.sliders {
+  width: 100%;
+  position: relative;
+}
+.sliders-slider {
+  width: 100%;
+}
+.sliders-slider.el-slider--small {
+  --el-slider-height: 4px;
+  --el-slider-button-wrapper-size: 28px;
+  --el-slider-button-size: 16px;
+  --el-slider-button-wrapper-offset: -12px;
+}
+.sliders .el-slider__bar {
+  z-index: 2;
+}
+.sliders .el-slider__button-wrapper {
+  z-index: 3;
+}
+.sliders-advance {
+  position: absolute;
+  left: 0;
+  width: var(--sliders-advance-width);
+  z-index: 1;
+  background-color: var(--sliders-advance-color, var(--el-color-success));
+  border-radius: var(--el-slider-border-radius);
+  height: var(--el-slider-height);
+}
+
 .lists {
   width: 100%;
   min-height: 100px;

package/dist/css/labels.css

@@ -22,7 +22,7 @@
 
 .selects-select {
   height: 100%;
-  min-width: 100px;
+  min-width: 60px;
   width: 100%;
 }
 .selects-select > div {

package/dist/css/page.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --on: rgb(91, 189, 246);
   --color-primary: #409eff;
@@ -108,7 +109,7 @@
 
 .selects-select {
   height: 100%;
-  min-width: 100px;
+  min-width: 60px;
   width: 100%;
 }
 .selects-select > div {
@@ -201,6 +202,11 @@
   cursor: not-allowed;
 }
 
+.images-img {
+  width: 100%;
+  height: 100%;
+}
+
 .input-array {
   width: 100%;
   display: inline-flex;
@@ -446,6 +452,85 @@
   width: 100%;
 }
 
+.uploads {
+  display: flex;
+  align-items: center;
+}
+.uploads-upload-trigger {
+  width: 60px;
+  height: 60px;
+  border: 1px dashed #ccc;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.uploads-list-li {
+  position: relative;
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  border: 1px solid #ccc;
+}
+.uploads-list-li:hover .uploads-list-li-operation {
+  display: flex;
+}
+.uploads-list-li-operation {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  z-index: 100;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.uploads-list-li-operation > span {
+  font-size: 16px;
+  padding: 3px;
+  line-height: 1;
+  cursor: pointer;
+}
+.uploads-list-li-operation-delete {
+  color: var(--el-color-danger);
+}
+.uploads-list-li-value {
+  height: 100%;
+}
+.uploads-list-li-value-img {
+  height: 100%;
+  width: 100%;
+}
+.uploads-list-li-value-document {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list-li-value-document-bg {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+}
+.uploads-list-li-value-document-text {
+  max-height: 100%;
+  /* 换行设置 */
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  /* 多行省略 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  line-height: 1.1;
+}
+
 .forms {
   --forms-inline-right: 16px;
   --forms-row-height: 32px;

package/dist/css/selects.css

@@ -14,7 +14,7 @@
 
 .selects-select {
   height: 100%;
-  min-width: 100px;
+  min-width: 60px;
   width: 100%;
 }
 .selects-select > div {

package/dist/css/sliders.css

@@ -0,0 +1,42 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.sliders {
+  width: 100%;
+  position: relative;
+}
+.sliders-slider {
+  width: 100%;
+}
+.sliders-slider.el-slider--small {
+  --el-slider-height: 4px;
+  --el-slider-button-wrapper-size: 28px;
+  --el-slider-button-size: 16px;
+  --el-slider-button-wrapper-offset: -12px;
+}
+.sliders .el-slider__bar {
+  z-index: 2;
+}
+.sliders .el-slider__button-wrapper {
+  z-index: 3;
+}
+.sliders-advance {
+  position: absolute;
+  left: 0;
+  width: var(--sliders-advance-width);
+  z-index: 1;
+  background-color: var(--sliders-advance-color, var(--el-color-success));
+  border-radius: var(--el-slider-border-radius);
+  height: var(--el-slider-height);
+}

package/dist/css/uploads.css

@@ -0,0 +1,93 @@
+@charset "UTF-8";
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.uploads {
+  display: flex;
+  align-items: center;
+}
+.uploads-upload-trigger {
+  width: 60px;
+  height: 60px;
+  border: 1px dashed #ccc;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.uploads-list-li {
+  position: relative;
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  border: 1px solid #ccc;
+}
+.uploads-list-li:hover .uploads-list-li-operation {
+  display: flex;
+}
+.uploads-list-li-operation {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  z-index: 100;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.uploads-list-li-operation > span {
+  font-size: 16px;
+  padding: 3px;
+  line-height: 1;
+  cursor: pointer;
+}
+.uploads-list-li-operation-delete {
+  color: var(--el-color-danger);
+}
+.uploads-list-li-value {
+  height: 100%;
+}
+.uploads-list-li-value-img {
+  height: 100%;
+  width: 100%;
+}
+.uploads-list-li-value-document {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploads-list-li-value-document-bg {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+}
+.uploads-list-li-value-document-text {
+  max-height: 100%;
+  /* 换行设置 */
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  /* 多行省略 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  line-height: 1.1;
+}

package/dist/css/videos.css

@@ -0,0 +1,122 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.videos {
+  display: flex;
+  height: 100%;
+  border-radius: 8px;
+  background: #000;
+  color: #fff;
+  position: relative;
+  --videos-list-width: 20%;
+}
+.videos.is-fullscreen {
+  border-radius: 0;
+}
+.videos.is-fullscreen .videos-controls-bottom {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.videos.is-fullscreen .videos-list {
+  background-color: rgba(238, 238, 238, 0.5);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.videos.is-list .videos-controls-bottom {
+  width: calc(100% - var(--videos-list-width));
+}
+.videos-videos {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.videos-videos .videos-controls-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  padding: 5px;
+  background-color: rgba(238, 238, 238, 0.5);
+}
+.videos-videos .videos-video {
+  flex: 1;
+  margin: 0 auto;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+.videos-videos .videos-video video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+}
+.videos-videos .videos-controls-bottom .videos-slider {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-slider-slider {
+  margin-left: 10px;
+}
+.videos-videos .videos-controls-bottom .videos-slider .videos-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-buts {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.videos-videos .videos-controls-bottom .videos-control-volume-slider {
+  min-width: 40px;
+  max-width: 120px;
+  margin-right: 5px;
+}
+.videos-videos .videos-controls-bottom .videos-control-more {
+  display: flex;
+  align-items: center;
+}
+.videos-videos .videos-controls-bottom .videos-control-more-rate {
+  width: 60px;
+  margin: 0 10px;
+}
+.videos-list {
+  width: var(--videos-list-width);
+  height: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+}