feat: 普惠疗休养优化5

src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/lineList.html

@@ -125,7 +125,7 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
 
     #app.therapy-mobile .line-toolbar {
-        padding: 22px 12px 1px;
+        padding: 10px 12px 10px;
         box-sizing: border-box;
     }
 
@@ -461,7 +461,6 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .line-image-placeholder .van-icon { margin-bottom: 8px; font-size: 28px; }
     @media (max-width: 350px) {
         #app.therapy-mobile .line-type-selector { flex-basis: 100px; }
-        #app.therapy-mobile .line-toolbar { padding-right: 10px; padding-left: 10px; }
         #app.therapy-mobile .list-card > .line-card-layout { --line-header-height: 76px; }
         #app.therapy-mobile .line-summary { margin-left: 10px; }
         #app.therapy-mobile .line-card-title { font-size: 16px; line-height: 23px; }

src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/myRecuperation.html

@@ -32,9 +32,7 @@ layout("/layouts/platform_h5.html"){
     }
 
     .list-card > .content {
-        padding: 16px 10px 8px;
         display: flex;
-        max-height: 100px;
     }
 
     .content-right {
@@ -183,7 +181,7 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .van-sticky--fixed { background: #fff; }
     #app.therapy-mobile .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
 
-    #app.therapy-mobile .recuperation-toolbar { padding: 22px 12px 10px; }
+    #app.therapy-mobile .recuperation-toolbar { padding: 10px 12px 10px; }
     #app.therapy-mobile .recuperation-filters {
         overflow: hidden;
         border-radius: 12px;
@@ -213,19 +211,55 @@ layout("/layouts/platform_h5.html"){
     }
     #app.therapy-mobile .list-card {
         margin: 4px 10px 10px;
-        border: 0;
+        padding: 15px;
-        border-radius: 16px;
+        border: 1px solid #edf0f5;
-        box-shadow: 0 8px 24px rgba(49, 85, 145, .06);
+        border-radius: 18px;
+        box-shadow: 0 1px 2px rgba(49, 85, 145, .02);
     }
-    #app.therapy-mobile .list-card > .content { padding: 12px; }
+    #app.therapy-mobile .list-card > .content { padding: 0; }
-    #app.therapy-mobile .list-card > .content > .van-image {
+    #app.therapy-mobile .recuperation-thumb { flex: 0 0 28%; min-width: 0; }
-        flex: 0 0 28%;
+    #app.therapy-mobile .recuperation-thumb .van-image {
-        width: 28% !important;
+        display: block;
+        width: 100% !important;
         height: auto !important;
         aspect-ratio: 4 / 3;
         overflow: hidden;
-        border-radius: 12px;
+        border-radius: 11px;
     }
+    #app.therapy-mobile .recuperation-thumb img { object-fit: cover; }
+    #app.therapy-mobile .list-card > .recuperation-line-card {
+        --recuperation-header-height: 84px;
+        flex-wrap: wrap;
+        align-items: stretch;
+    }
+    #app.therapy-mobile .recuperation-line-card .recuperation-thumb {
+        flex: 0 0 auto;
+        width: auto;
+        height: var(--recuperation-header-height);
+        aspect-ratio: 4 / 3;
+    }
+    #app.therapy-mobile .recuperation-line-card .recuperation-thumb .van-image { height: 100% !important; }
+    #app.therapy-mobile .recuperation-summary {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 0;
+        height: var(--recuperation-header-height);
+        margin-left: 12px;
+    }
+    #app.therapy-mobile .recuperation-summary .cr-title { margin: 0; color: #243249; font-size: 18px; line-height: 26px; }
+    #app.therapy-mobile .recuperation-summary .cr-title > span { font-size: inherit !important; }
+    #app.therapy-mobile .recuperation-summary-meta { display: flex; align-items: center; justify-content: space-between; min-width: 0; }
+    #app.therapy-mobile .recuperation-period { flex: 1; min-width: 0; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7d8da7; font-size: 13px; line-height: 20px; }
+    #app.therapy-mobile .recuperation-summary .recuperation-type { flex-shrink: 0; max-width: 100%; padding: 3px 7px; border-radius: 5px; background: #eef4ff; color: #5489d3; font-size: 12px; line-height: 20px; box-sizing: border-box; }
+    #app.therapy-mobile .recuperation-meta { flex: 0 0 100%; min-width: 0; margin-top: 10px; }
+    #app.therapy-mobile .recuperation-meta .concat { display: flex; align-items: center; color: #7d8da7; }
+    #app.therapy-mobile .recuperation-meta .concat .van-icon { flex-shrink: 0; margin-right: 6px; color: #9aaec8; font-size: 15px; }
+    #app.therapy-mobile .recuperation-meta .concat span { overflow: hidden; text-overflow: ellipsis; }
+    #app.therapy-mobile .recuperation-meta .mobile { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eff2f7; white-space: normal; overflow-wrap: anywhere; }
+    #app.therapy-mobile .recuperation-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: #f0f5fc; color: #afc5df; font-size: 11px; }
+    #app.therapy-mobile .recuperation-image-placeholder .van-icon { margin-bottom: 8px; font-size: 28px; }
     #app.therapy-mobile .content-right { padding-left: 12px; }
     #app.therapy-mobile .cr-title {
         display: -webkit-box;
@@ -241,9 +275,28 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .concat,
     #app.therapy-mobile .mobile,
     #app.therapy-mobile .union { font-size: 13px; line-height: 21px; color: #66758a; }
-    #app.therapy-mobile .operateDiv { padding: 8px 12px; border-top-color: #f2f4f7; }
+    #app.therapy-mobile .operateDiv { margin-top: 10px; padding: 8px 0 0; border-top-color: #eff2f7; gap: 0; }
-    #app.therapy-mobile .operateDiv .van-button { height: 30px; border-radius: 8px; }
+    #app.therapy-mobile .operateDiv .van-button {
+        min-width: 72px;
+        height: 34px;
+        margin: 0 0 0 8px;
+        padding: 0 14px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+    }
+    #app.therapy-mobile .operateDiv .van-button:first-child { margin-left: 0; }
+    #app.therapy-mobile .operateDiv .van-button--default { border-color: #dce4ef; background: #fff; color: #66758a; }
+    #app.therapy-mobile .operateDiv .van-button--info { border-color: #1989fa; background: #1989fa; color: #fff; }
+    #app.therapy-mobile .operateDiv .van-button--plain { border-color: #d8e8ff; background: #f0f6ff; color: #1989fa; }
+    #app.therapy-mobile .operateDiv .van-button--disabled { border-color: #e9eef5; background: #f5f7fa; color: #b3bfce; opacity: 1; }
+    #app.therapy-mobile .pop_footer .cus_button { height: 44px; border-color: #1989fa; border-radius: 8px; background: #1989fa; color: #fff; font-size: 16px; font-weight: 600; }
     #app.therapy-mobile .van-list__finished-text { font-size: 14px; color: #8c93a3; }
+    @media (max-width: 350px) {
+        #app.therapy-mobile .list-card > .recuperation-line-card { --recuperation-header-height: 76px; }
+        #app.therapy-mobile .recuperation-summary { margin-left: 10px; }
+        #app.therapy-mobile .recuperation-summary .cr-title { font-size: 16px; line-height: 23px; }
+    }
 </style>
 
 <div id="app" class="therapy-mobile" v-cloak>
@@ -278,16 +331,21 @@ layout("/layouts/platform_h5.html"){
             finished-text="没有更多了"
             v-model="loading">
         <div class="list-card" v-for="o in tableData">
-            <div @click="findOne(o)" class="content">
+            <div @click="findOne(o)" class="content" :class="{'recuperation-line-card': pageForm.theRapyRecuperationType != '2' && pageForm.theRapyRecuperationType != '3'}">
 
+                <div class="recuperation-thumb">
                 <van-image
                         height="86"
                         radius="8"
                         :src="$commonUtil.getFileUrl(o.fileId)"
-                        width="130"></van-image>
+                        width="130">
+                    <template #error><div class="recuperation-image-placeholder"><van-icon name="photo-o"></van-icon><span>暂无图片</span></div></template>
+                    <template #loading><div class="recuperation-image-placeholder"><van-icon name="photo-o"></van-icon><span>图片加载中</span></div></template>
+                </van-image>
+                </div>
 
-                <div v-if="pageForm.theRapyRecuperationType != '2' && pageForm.theRapyRecuperationType != '3'"
+                <template v-if="pageForm.theRapyRecuperationType != '2' && pageForm.theRapyRecuperationType != '3'">
-                     class="content-right">
+                    <div class="recuperation-summary">
                     <div class="cr-title">
                         <span style="font-size: 14px">{{o.lineName}}</span>
                         <!--<div>
@@ -297,7 +355,12 @@ layout("/layouts/platform_h5.html"){
                             </van-tag>
                         </div>-->
                     </div>
-                    <div class="desc_info">
+                        <div class="recuperation-summary-meta">
+                            <span class="recuperation-period">{{o.lotName}}</span>
+                            <span class="recuperation-type">{{o.regionalNature}}</span>
+                        </div>
+                    </div>
+                    <div class="desc_info recuperation-meta">
                         <!--<div class="union">
                             <span>分工会：</span>{{o.signUpUnionName}}
                         </div>-->
@@ -307,13 +370,8 @@ layout("/layouts/platform_h5.html"){
                         <!--<div class="concat">
                             <span>已报人数：</span>{{o.signUpUserNum + o.signUpUserFamilyNum + '（家属' + o.signUpUserFamilyNum + '人）'}}
                         </div>-->
-                        <div class="concat">
-                            <span>线路类型：{{o.regionalNature}}</span>
-                        </div>
 
-                        <div class="concat">
+
-                            <span>出行时段：{{o.lotName}}</span>
-                        </div>
                         <div class="mobile" v-if="![2715,2725,2735].includes(o.stateId)">
                             <span v-if="configData.familyInfo == 2">随行家属：{{o.companionUserNames ? o.companionUserNames : '无'}}</span>
                             <span v-else>随行家属：{{o.familyNumber}}人</span>
@@ -322,7 +380,7 @@ layout("/layouts/platform_h5.html"){
                             <span>审核状态：</span><span :style="'color: ' + o.stateColor">{{o.stateName}}</span>
                         </div>
                     </div>
-                </div>
+                </template>
 
                 <div v-if="pageForm.theRapyRecuperationType == '2'" class="content-right">
                     <div class="cr-title">
@@ -382,7 +440,7 @@ layout("/layouts/platform_h5.html"){
 
             <div class="operateDiv">
                 <van-button v-if="canModify(o)" @click="edit(o)"
-                    type="info" size="small" color="#1867b0" :disabled="o.isTakePartIn == true || getDisabled(o)">
+                    type="info" plain size="small" :disabled="o.isTakePartIn == true || getDisabled(o)">
                     修&ensp;改
                 </van-button>
                 <!--<van-button v-if="pageForm.theRapyRecuperationType == '2'
@@ -390,11 +448,11 @@ layout("/layouts/platform_h5.html"){
                             type="info" size="small" color="#1867b0" :disabled="o.isTakePartIn == true || getDisabled(o)">
                     修&ensp;改
                 </van-button>-->
-                <van-button type="info" size="small" color="#1867b0" @click="cancel(o)"
+                <van-button type="default" size="small" @click="cancel(o)"
                             :disabled="getDisabled(o) || !canCancel(o)">
                     取&ensp;消
                 </van-button>
-                <van-button v-if="o.isTakePartIn == true" type="info" size="small" color="#1867b0"
+                <van-button v-if="o.isTakePartIn == true" type="info" size="small"
                             @click="satisfaction(o)">满意度反馈</van-button>
             </div>