diff --git a/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/lineList.html b/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/lineList.html index b8000ba..2a6751c 100644 --- a/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/lineList.html +++ b/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; } diff --git a/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/myRecuperation.html b/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/myRecuperation.html index 061bd0d..4eb9792 100644 --- a/src/main/resources/views/platform/zhghh5/staffbenefit/therapyRecuperation/myRecuperation.html +++ b/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; - border-radius: 16px; - box-shadow: 0 8px 24px rgba(49, 85, 145, .06); + padding: 15px; + border: 1px solid #edf0f5; + 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 > .van-image { - flex: 0 0 28%; - width: 28% !important; + #app.therapy-mobile .list-card > .content { padding: 0; } + #app.therapy-mobile .recuperation-thumb { flex: 0 0 28%; min-width: 0; } + #app.therapy-mobile .recuperation-thumb .van-image { + 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 .van-button { height: 30px; border-radius: 8px; } + #app.therapy-mobile .operateDiv { margin-top: 10px; padding: 8px 0 0; border-top-color: #eff2f7; gap: 0; } + #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; } + }