Browse Source

fix: 列表样式优化

zhangying 1 year ago
parent
commit
e23eb1669a

+ 13 - 13
h5app/src/views/pages/user/myInfo.vue

@@ -9,28 +9,28 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <form class="form-table">
-        <ion-item>
+      <div class="bw-vue-form">
+        <div class="form-detail">
           <ion-label>登录名</ion-label>
           <ion-text>{{ userInfo.loginID }}</ion-text>
-        </ion-item>
-        <ion-item>
+        </div>
+        <div class="form-detail">
           <ion-label>姓名</ion-label>
           <ion-text>{{ userInfo.siteUserName }}</ion-text>
-        </ion-item>
-        <ion-item>
+        </div>
+        <div class="form-detail">
           <ion-label>性别</ion-label>
           <ion-text>{{ userInfo.genderName }}</ion-text>
-        </ion-item>
-        <ion-item>
+        </div>
+        <div class="form-detail">
           <ion-label>人员类别</ion-label>
           <ion-text>{{ userInfo.userTypeName }}</ion-text>
-        </ion-item>
-        <ion-item>
-        <ion-label>电话号码</ion-label>
+        </div>
+        <div class="form-detail">
+          <ion-label>电话号码</ion-label>
           <ion-text>{{ userInfo.userMobile }}</ion-text>
-        </ion-item>
-      </form>
+        </div>
+      </div>
     </ion-content>
 
   </ion-page>

+ 26 - 18
h5app/src/views/pages/user/updatePassword.vue

@@ -9,27 +9,33 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <form class="form-table">
-        <ion-item>
+      <div class="bw-vue-form">
+        <div class="form-detail">
           <ion-label>用户名</ion-label>
           <ion-text>{{ dataModel.userName }}</ion-text>
-        </ion-item>
-        <ion-item>
-          <ion-label>帐号</ion-label>
+        </div>
+        <div class="form-detail">
+          <ion-label>姓名</ion-label>
           <ion-text>{{ dataModel.loginID }}</ion-text>
-        </ion-item>
-        <ion-item :class="[v$.pwd_default.$error?'ion-invalid':'ion-valid']">
-          <ion-label>新密码</ion-label>
-          <ion-input v-model="dataModel.pwd_default" name="pwd_default"
-                     placeholder="请填写8到16位新密码" type="password"></ion-input>
-          <ion-note slot="error">密码必须包含字母、数字和特殊字符,且长度要在8到16位。</ion-note>
-        </ion-item>
-        <ion-item :class="[v$.pwd_confirm.$error?'ion-invalid':'ion-valid']">
-          <ion-label>确认新密码</ion-label>
-          <ion-input v-model="dataModel.pwd_confirm" name="pwd_confirm"
-                     placeholder="请填写8到16位新密码" type="password"></ion-input>
-          <ion-note slot="error">密码必须包含字母、数字和特殊字符,且长度要在8到16位。</ion-note>
-        </ion-item>
+        </div>
+      </div>
+      <form class="form-table">
+        <div class="bw-vue-form">
+          <div class="form-input">
+            <ion-label>新密码</ion-label>
+            <ion-input v-model="dataModel.pwd_default" name="pwd_default"
+                       placeholder="请填写8到16位新密码" type="password"></ion-input>
+            <ion-note style="color: #f50909" v-if="v$.pwd_default.$error" slot="error">密码必须包含字母、数字和特殊字符,且长度要在8到16位。
+            </ion-note>
+          </div>
+          <div class="form-input">
+            <ion-label>确认新密码</ion-label>
+            <ion-input v-model="dataModel.pwd_confirm" name="pwd_confirm"
+                       placeholder="请填写8到16位新密码" type="password"></ion-input>
+            <ion-note style="color: #f50909" v-if="v$.pwd_confirm.$error" slot="error">密码必须包含字母、数字和特殊字符,且长度要在8到16位。
+            </ion-note>
+          </div>
+        </div>
       </form>
     </ion-content>
     <ion-footer>
@@ -70,6 +76,8 @@ const v$ = useVuelidate(rules, dataModel);
 const onSave = async () => {
   const isFormCorrect = await v$.value.$validate();
 
+  console.log(isFormCorrect)
+
   if (!isFormCorrect) {
     return null;
   }

+ 3 - 5
h5app/src/views/pages/work/log/list.vue

@@ -13,7 +13,6 @@
     </ion-header>
     <ion-content>
       <ion-item style="font-size: 10px;--border-style: none;">
-        <label>日期:</label>
         <ion-datetime-button datetime="reportDateBegin"></ion-datetime-button>
         <span style="margin:0 5px">至</span>
         <ion-modal :keep-contents-mounted="true">
@@ -36,9 +35,9 @@
         <ion-button slot="end" style="height: 33px;width:70px;margin-left: 10px;--box-shadow: none;--border-radius: 14px;" @click="onSearch">搜索</ion-button>
       </ion-item>
       <!-- 滑动数据列表 -->
-      <div class="panel-content" v-if="!loading">
-        <div v-for="(record,key) in dataList" :key="key" style="border: 1px solid rgb(242, 242, 245); margin: 10px; border-radius: 10px">
-          <ion-item-sliding>
+      <div v-if="!loading" class="bw-vue-list">
+        <div v-for="(record,key) in dataList" :key="key">
+          <ion-item-sliding style="border-bottom: 1px solid #f1f5f7;border-radius: 0px;">
             <ion-item>
               <ion-grid @click="onDetail(record.doWorkID)">
                 <ion-row>
@@ -64,7 +63,6 @@
                 <ion-icon :icon="chevronForwardOutline" slots="end"></ion-icon>
               </span>
             </ion-item>
-
             <ion-item-options>
               <ion-item-option @click="onEdit(record.doWorkID)">
                 <ion-icon :icon="buildOutline"></ion-icon>

+ 24 - 19
h5app/src/views/pages/work/task/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <ion-page class="list-page task-list-page" >
+  <ion-page class="list-page">
     <ion-header class="header-theme2">
       <ion-toolbar>
         <ion-buttons slot="start">
@@ -17,24 +17,29 @@
                    v-model="searchParamsState.taskName" style="border: 1px solid #f2f2f5;border-radius: 14px;--padding-start: 10px;height: 35px;" ></ion-input>
         <ion-button slot="end" style="height: 33px;width: 70px;margin-left: 10px;--box-shadow: none;--border-radius: 14px;" @click="reload">搜索</ion-button>
       </ion-item>
-      <ion-list class="list-content" >
-        <ion-item v-for="(record,key) in dataList" :key="key" detail @click="onDetail(record)">
-          <ion-label>
-            <h3>{{ record.doTaskName}}</h3>
-            <p style="margin-top: 8px">任务类型:{{ record.workTypeName }}</p>
-            <p>
-              要求完成时间:{{ dayjs(record.finishTime).format("YYYY-MM-DD") }}
-            </p>
-            <p v-if="record.taskStatus == 1 && record.completeTime">
-              任务完成时间:{{ dayjs(record.completeTime).format("YYYY-MM-DD") }}
-            </p>
-          </ion-label>
-          <ion-avatar aria-hidden="true" slot="end">
-            <p>{{ record.taskStatusName}}</p>
-
-          </ion-avatar>
-        </ion-item>
-      </ion-list>
+      <div class="bw-vue-list">
+        <div class="list-content">
+          <ion-list>
+            <ion-item v-for="(record,key) in dataList" :key="key" detail @click="onDetail(record)">
+              <ion-label>
+                <div class="multi-title">
+                  <h3>{{ record.doTaskName }}</h3>
+                </div>
+                <p style="margin-top: 8px">任务类型:{{ record.workTypeName }}</p>
+                <p>
+                  要求完成时间:{{ dayjs(record.finishTime).format("YYYY-MM-DD") }}
+                </p>
+                <p v-if="record.taskStatus == 1 && record.completeTime">
+                  任务完成时间:{{ dayjs(record.completeTime).format("YYYY-MM-DD") }}
+                </p>
+              </ion-label>
+              <ion-avatar aria-hidden="true" slot="end">
+                <p style="font-size: 11px; color: #8c8f93">{{ record.taskStatusName }}</p>
+              </ion-avatar>
+            </ion-item>
+          </ion-list>
+        </div>
+      </div>
       <b-empty v-if="dataList.length<=0" :loading="loading"/>
       <ion-infinite-scroll threshold="100px" @ionInfinite="onScroll($event)">
         <ion-infinite-scroll-content