优化界面

src/pages.json

@@ -3,13 +3,13 @@
   {
    "path": "pages/index/index",
    "style": {
-    "navigationBarTitleText": "NDT Bot"
+    "navigationBarTitleText": "项目登记"
    }
   },
   {
    "path": "pages/query/index",
    "style": {
-    "navigationBarTitleText": "查询记录"
+    "navigationBarTitleText": "项目记录"
    }
   },
   {

src/pages/index/index.vue

 <template>
-  <view class="queryRecords" @tap="toQueryPage"><text>登记记录</text></view>
+  <view class="queryRecords" @tap="toQueryPage"><text>项目工时登记</text></view>
   <view class="container">
     <view class="header">
       <text class="title">登记项目工时</text>

src/pages/query/index.vue

 <template>
-    <view class='query-container'>
-        <view class="query-list">
-            <uni-collapse>
-                <uni-collapse-item v-for="(item, index) in list" :key="item.FID" :open="false"
-                    :border="index === list.length - 1 ? false : true" show-animation
-                    :title-border="index === list.length - 1 ? 'none' : 'auto'">
-                    <template #title>
-                        <view class="header">
-                            <view class="title">
-                                {{ item.F_LQKJ_FNAME }}
-                            </view>
-                            <view v-if="item.F_LQKJ_BILLSTATUS != 'C'" class="button" @tap.stop="edit(item)">修改</view>
-                        </view>
-                    </template>
+    <view class="card" v-for="(item, index) in list" :key="item.FID">
         <view class="query-item">
             <view class="item">
-                            <text>项目编号：</text>
-                            <text>{{ item.F_LQKJ_FITEM }}</text>
+                <text>项目名称：</text>
+                <text>{{ item.FNAME }}</text>
             </view>
             <view class="item">
                 <text>工时：</text>
                 <text>{{ item.F_LQKJ_WORKTIME }}</text>
             </view>
             <view class="item">
-                            <text>创建时间：</text>
-                            <!-- <text>{{ item.F_LQKJ_DATE2 }}</text> -->
-                            <uni-dateformat :date="item.F_LQKJ_DATE2"></uni-dateformat>
+                <text>登记时间：</text>
+                <uni-dateformat :date="item.F_LQKJ_DATE2" format="yyyy/MM/dd"></uni-dateformat>
             </view>
             <view class="item">
                 <text>审核状态：</text>
-                            <uni-tag v-if="item.F_LQKJ_BILLSTATUS == 'C'" text="已审核" type="success" size="small"
-                                :circle="true" />
+                <uni-tag v-if="item.F_LQKJ_BILLSTATUS == 'C'" text="已审核" type="success" size="small" :circle="true" />
                 <uni-tag v-else text="未审核" size="small" :circle="true" />
             </view>
         </view>
-                </uni-collapse-item>
-            </uni-collapse>
+        <view class="line" />
+        <view class="footer">
+            <view v-if="item.F_LQKJ_BILLSTATUS != 'C'" class="button" @tap.stop="edit(item)">修改</view>
         </view>
     </view>
 </template>
@@ -78,22 +64,47 @@ const edit = (row: number) => {
 </script>
  
 <style lang="scss" scoped>
-.query-container {
-    padding: 20rpx;
-}
+.card {
+    box-sizing: border-box;
+    margin: 16rpx;
+    padding: 10rpx 0;
+    border-radius: 8rpx;
+    border: 1px solid #e4e7ed;
+    background-color: #ffffff;
+    overflow: hidden;
+    color: #303133;
+    transition: .3s;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, .05);
 
-.query-list {
-    border: 1rpx solid rgba(204, 204, 204, 0.797);
-    border-radius: 6rpx;
-    padding: 6rpx;
+    .query-item {
+        padding: 0 30rpx 20rpx;
+        font-size: 28rpx;
+
+        .item {
+            padding: 10rpx 0;
+        }
+
+        & .item:last-child {
+            padding: 0;
+        }
+    }
+
+    .line {
+        border-bottom: 1px solid #ddd;
+        width: 100%;
+        transform: scaleY(0.5);
+    }
 
-    .header {
+    .footer {
+        box-sizing: border-box;
+        padding: 10rpx;
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16rpx;
+        justify-content: flex-end;
+        width: 100%;
 
         .button {
+            width: 60rpx;
+            text-align: center;
             border: 1px solid rgba(0, 0, 0, .2);
             border-radius: 6rpx;
             padding: 6rpx 20rpx;
@@ -103,17 +114,5 @@ const edit = (row: number) => {
             color: #fff;
         }
     }
-
-    :deep(.uni-button:after) {
-        height: 20px;
-    }
-
-    .query-item {
-        padding: 0 30rpx 30rpx;
-
-        .item {
-            padding: 10rpx 0;
-        }
-    }
 }
 </style>
\ No newline at end of file