87613

src/mods/AppIntegralApply/add.vue

@@ -22,10 +22,17 @@
           <u-select v-model="showStstus" :list="$dict.getDict('atWillReportType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
         </u-form-item>
 
-        <u-form-item label="申请描述" prop="description" required :border-bottom="false" label-position="top" class="contents">
+        <div class="form-item form-item__textarea">
-          <u-input v-model="forms.description" placeholder="请输入描述信息" type="textarea" :auto-height="true" maxlength="500" />
+          <div class="form-item__wrapper">
-        </u-form-item>
+            <div class="form-item__title">
-        <div class="wordLength">{{ forms.description.length }}/500</div>
+              <i>*</i>
+              <h2>事件描述</h2>
+            </div>
+            <div class="form-item__right">
+              <textarea v-model="forms.content" class="textareas" :maxlength="500" placeholder="请输入描述信息"></textarea>
+            </div>
+          </div>
+        </div>
 
         <div class="line"></div>
 
@@ -167,6 +174,98 @@ export default {
         }
       }
 
+      .form-item {
+        padding-left: 28px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 128px;
+          padding-right: 28px;
+
+          input {
+            flex: 1;
+            height: 100%;
+            text-align: right;
+            padding-right: 10px;
+          }
+
+          .form-item__right {
+            display: flex;
+            align-items: center;
+            font-size: 32px;
+
+            span {
+              max-width: 400px;
+              margin-right: 8px;
+              color: #333333;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            i {
+              margin-right: 8px;
+              color: #999999;
+            }
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border-bottom: none;
+          }
+        }
+
+        .form-item__title {
+          display: flex;
+          align-items: center;
+
+          i {
+            font-size: 32px;
+            color: #fa3534;
+            opacity: 0.65;
+          }
+
+          span {
+            font-size: 28px;
+            color: #999999;
+          }
+
+          h2 {
+            padding: 0 4px;
+            font-size: 28px;
+            color: #303133;
+          }
+        }
+
+        &.form-item__imgs,
+        &.form-item__textarea {
+          .form-item__wrapper {
+            display: block;
+            height: auto;
+            padding-bottom: 32px;
+          }
+
+          textarea {
+            width: 100%;
+            height: 160px;
+          }
+
+          .form-item__title {
+            padding: 32px 0;
+          }
+
+          .form-item__right {
+            padding-left: 18px;
+            .textareas {
+              color: #303133;
+            }
+          }
+        }
+      }
+
       .contents {
         padding-bottom: 20px !important;
         .u-form-item__body {
@@ -199,12 +298,6 @@ export default {
       }
     }
   }
-  .wordLength {
-    color: #999;
-    text-align: right;
-    padding: 10px 40px;
-    background-color: #ffffff;
-  }
 
   .btn {
     position: fixed;