app-form-view 0.0.0 → 0.0.2

package/README.md

@@ -14,6 +14,6 @@ npm i app-form-view
 //引入
 
 import appFormView from 'app-form-view';
-import 'app-form-viewdist/css/style.css';
+import 'app-form-view/css/style.css';
 Vue.use(appFormView);
 ```

package/dist/css/style.css

@@ -1,291 +1,100 @@
 @charset "UTF-8";
-.checkbox-wrap,
-.radio-wrap {
-  min-height: 34px;
-}
-
-.download-btn {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-}
-
-/* 只在当前组件生效 */
-.date-time-picker-year .van-picker-column:nth-child(2) {
-  display: none !important;
-}
-
-.bottom-btn {
-  padding: 10px 10px 20px 10px;
-}
-
-.text-combination {
-  position: relative;
-  min-height: 60px;
-  padding: 16px;
-}
-.text-combination .content {
-  text-indent: 2em;
-  margin: 0;
-  line-height: 1.6;
-  color: #333;
-}
-.text-combination {
-  /* 空状态样式 */
-}
-.text-combination .empty-state {
-  border: 1px dashed #ddd;
-  text-align: center;
-  line-height: 100px;
-  font-size: 16px;
-  color: #ddd;
-  border-radius: 4px;
-}
-.text-combination {
-  /* 加载状态样式 */
-}
-.text-combination .loading {
-  text-align: center;
-  padding: 40px 0;
-  color: #666;
-}
-.text-combination .spinner {
-  width: 40px;
-  height: 40px;
-  margin: 0 auto 16px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #2196F3;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.text-combination {
-  /* 错误状态样式 */
-}
-.text-combination .error {
-  text-align: center;
-  padding: 40px 0;
-  color: #d32f2f;
-}
-.text-combination .error-icon {
-  width: 60px;
-  height: 60px;
-  margin: 0 auto 16px;
-  background-color: #ef5350;
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  font-weight: bold;
-}
-.text-combination .error-message {
-  margin-bottom: 24px;
-  color: #d32f2f;
-}
-.text-combination .refresh-btn {
-  padding: 8px 16px;
-  background-color: #2196F3;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-.text-combination .refresh-btn:hover {
-  background-color: #1976D2;
-}
-
-.sl-table-wrapper {
-  width: 100%;
-  position: relative;
-}
-
-.toolbar {
-  margin-bottom: 12px;
-  display: flex;
-  gap: 8px;
-}
-
-.empty {
-  padding: 40px 0;
-  text-align: center;
-  color: #999;
-  font-size: 14px;
-}
-
 .flex, .custom-picker-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 .inline-flex {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: -webkit-inline-flex;
   display: inline-flex;
 }
 
 .flex-row {
-  -webkit-box-orient: vertical;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
   flex-direction: row;
 }
 
 .flex-row-reverse {
-  -webkit-box-orient: vertical;
-  -ms-flex-direction: row-reverse;
-  -webkit-flex-direction: row-reverse;
   flex-direction: row-reverse;
 }
 
 .flex-column, .custom-picker-container {
-  -webkit-box-orient: vertical;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
   flex-direction: column;
 }
 
 .flex-column-reverse {
-  -webkit-box-orient: vertical;
-  -ms-flex-direction: column-reverse;
-  -webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;
 }
 
 .justify-content-center {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 .justify-content-end {
-  -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  -webkit-justify-content: flex-end;
   justify-content: flex-end;
 }
 
 .justify-content-space-between {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
 .justify-content-space-around {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  -webkit-justify-content: space-around;
   justify-content: space-around;
 }
 
 .align-items-start {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  -webkit-align-items: flex-start;
   align-items: flex-start;
 }
 
 .align-items-end {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  -webkit-align-items: flex-end;
   align-items: flex-end;
 }
 
 .align-items-center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
   align-items: center;
 }
 
 .align-items-baseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  -webkit-align-items: baseline;
   align-items: baseline;
 }
 
 .flex-wrap-nowrap {
-  -webkit-box-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }
 
 .flex-wrap-wrap {
-  -webkit-box-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
 .flex-wrap-reverse {
-  -webkit-box-wrap: reverse;
-  -ms-flex-wrap: reverse;
-  -webkit-flex-wrap: reverse;
-  flex-wrap: reverse;
+  flex-wrap: wrap-reverse;
 }
 
 .align-content-start {
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  -webkit-align-conten: flex-start;
-  justify-content: flex-start;
+  -webkit-box-lines: start;
+  align-content: flex-start;
 }
 
 .align-content-end {
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  -webkit-align-conten: flex-end;
-  justify-content: flex-end;
+  -webkit-box-lines: end;
+  align-content: flex-end;
 }
 
 .align-content-center {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-conten: center;
-  justify-content: center;
+  -webkit-box-lines: center;
+  align-content: center;
 }
 
 .align-content-between {
-  -webkit-box-align: space-between;
-  -ms-flex-align: space-between;
-  -webkit-align-conten: space-between;
-  justify-content: space-between;
+  -webkit-box-lines: justify;
+  align-content: space-between;
 }
 
 .align-content-around {
-  -webkit-box-align: space-around;
-  -ms-flex-align: space-around;
-  -webkit-align-conten: space-around;
-  justify-content: space-around;
+  -webkit-box-lines: space-around;
+  align-content: space-around;
 }
 
 .align-content-stretch {
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  -webkit-align-conten: stretch;
-  justify-content: stretch;
+  -webkit-box-lines: stretch;
+  align-content: stretch;
 }
 
 .flex-item-auto {
@@ -406,6 +215,11 @@ button[disabled] {
   height: 100%;
   overflow: hidden;
 }
+.app-page .bottom-btns {
+  gap: 15px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
 .app-page .bottom-btns .widget-button {
   display: flex;
   margin: 0;
@@ -429,6 +243,7 @@ button[disabled] {
   height: 40px;
   font-size: 14px;
   margin-right: 5px;
+  flex: 1;
   background: linear-gradient(to right, var(--primary-color-60), var(--primary-color));
 }
 .app-page .bottom-btns .widget-button:last-child .icon {
@@ -495,7 +310,6 @@ button[disabled] {
 .van-nav-bar .van-icon {
   color: var(--nav-bar-icon-color);
 }
-
 .gray-bg {
   height: 100%;
   overflow: hidden;
@@ -521,7 +335,126 @@ button[disabled] {
 .app-page .van-goods-action {
   position: static;
 }
+@charset "UTF-8";
+.text-combination {
+  position: relative;
+  min-height: 60px;
+  padding: 16px;
+}
+.text-combination .content {
+  text-indent: 2em;
+  margin: 0;
+  line-height: 1.6;
+  color: #333;
+}
+.text-combination {
+  /* 空状态样式 */
+}
+.text-combination .empty-state {
+  border: 1px dashed #ddd;
+  text-align: center;
+  line-height: 100px;
+  font-size: 16px;
+  color: #ddd;
+  border-radius: 4px;
+}
+.text-combination {
+  /* 加载状态样式 */
+}
+.text-combination .loading {
+  text-align: center;
+  padding: 40px 0;
+  color: #666;
+}
+.text-combination .spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #2196F3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.text-combination {
+  /* 错误状态样式 */
+}
+.text-combination .error {
+  text-align: center;
+  padding: 40px 0;
+  color: #d32f2f;
+}
+.text-combination .error-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+  background-color: #ef5350;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+}
+.text-combination .error-message {
+  margin-bottom: 24px;
+  color: #d32f2f;
+}
+.text-combination .refresh-btn {
+  padding: 8px 16px;
+  background-color: #2196F3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+.text-combination .refresh-btn:hover {
+  background-color: #1976D2;
+}
+
+.checkbox-wrap,
+.radio-wrap {
+    min-height: 34px;
+}
+
+
+.van-checkbox--horizontal {
+    margin-bottom: 15px;
+}
+
+
+/* 只在当前组件生效 */
+.date-time-picker-year .van-picker-column:nth-child(2) {
+    display: none !important;
+}
+
+.bottom-btn {
+    padding: 10px 10px 20px 10px
+}
+
+
+.download-btn {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
 
+@charset "UTF-8";
 .table-pro {
   font-size: 14px;
 }
@@ -638,4 +571,22 @@ button[disabled] {
 }
 .table-pro .pagination > li {
   display: flex;
-}
+}
+
+.sl-table-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.toolbar {
+    margin-bottom: 12px;
+    display: flex;
+    gap: 8px;
+}
+
+.empty {
+    padding: 40px 0;
+    text-align: center;
+    color: #999;
+    font-size: 14px;
+}