feat: 普惠疗休养优化3

src/main/resources/static/components/module/therapyRecuperation/NoticePreview.vue

@@ -1,18 +1,20 @@
 <template>
-    <van-popup :value="value" position="right" class="therapy-notice-preview" :close-on-click-overlay="false"
-               :close-on-popstate="true" @input="$emit('input', $event)" @opened="loadPdf" @closed="releasePdf">
-        <van-nav-bar :title="title" left-arrow left-text="返回" @click-left="$emit('input', false)"></van-nav-bar>
-        <div class="therapy-notice-preview__body">
-            <div v-if="src" ref="viewer" class="therapy-notice-preview__viewer"></div>
-            <div v-else class="therapy-notice-preview__content" v-html="content"></div>
-            <div v-if="loading" class="therapy-notice-preview__status"><van-loading vertical>正在加载须知...</van-loading></div>
-            <div v-if="failed" class="therapy-notice-preview__status">
-                <van-empty image="error" description="PDF 加载失败，请重试">
-                    <van-button round type="primary" size="small" @click="loadPdf">重新加载</van-button>
-                </van-empty>
+    <div class="therapy-notice-inline">
+        <div class="therapy-notice-preview__content" v-html="renderedContent" @click="handleContentClick"></div>
+        <van-popup :value="!!activeDocument" position="right" class="therapy-notice-preview therapy-notice-preview--attachment"
+                   :close-on-click-overlay="false" @input="closeDocument" @opened="loadDocument" @closed="releasePdf">
+            <van-nav-bar :title="activeDocument ? activeDocument.name : '文件预览'" left-arrow left-text="返回" @click-left="closeDocument"></van-nav-bar>
+            <div class="therapy-notice-preview__body">
+                <div v-show="activeDocument && activeDocument.type === 'pdf' && !failed" ref="viewer" class="therapy-notice-preview__viewer"></div>
+                <div v-if="wordContent" class="therapy-notice-preview__content" v-html="wordContent" @click="previewImage"></div>
+                <div v-if="loading" class="therapy-notice-preview__status"><van-loading vertical>正在加载文件...</van-loading></div>
+                <div v-if="failed" class="therapy-notice-preview__status">
+                    <span>文件预览暂不可用</span>
+                    <van-button round type="primary" size="small" @click="loadDocument">重新加载</van-button>
+                </div>
             </div>
-        </div>
-    </van-popup>
+        </van-popup>
+    </div>
 </template>
 
 <script>
@@ -25,32 +27,147 @@ module.exports = {
         content: { type: String, default: '' }
     },
     data() {
-        return { loading: false, failed: false }
+        return { documents: [], renderedContent: '', activeDocument: null, loading: false, failed: false, wordContent: '' }
+    },
+    watch: {
+        content: {immediate: true, handler: 'prepareContent'},
+        src: 'prepareContent',
+        value(visible) {
+            if (!visible && this.activeDocument) this.closeDocument()
+        }
     },
     methods: {
-        loadPdf() {
+        prepareContent() {
+            this.closeDocument()
+            const doc = new DOMParser().parseFromString(this.content || '', 'text/html')
+            const files = []
+            const makeCard = (href, name, mime) => {
+                try {
+                    const url = new URL(href, location.href)
+                    if (!['http:', 'https:'].includes(url.protocol)) return null
+                    const extension = (name.match(/\.(pdf|docx?)(?:[?#]|$)/i) || url.pathname.match(/\.(pdf|docx?)$/i) || [])[1]
+                    const type = extension ? extension.toLowerCase() : mime === 'application/pdf' ? 'pdf' : /word|officedocument\.wordprocessingml/.test(mime || '') ? 'docx' : ''
+                    if (!type) return null
+                    let index = files.findIndex(file => file.url === url.href)
+                    if (index === -1) {
+                        index = files.length
+                        files.push({url: url.href, name: name || '须知附件.' + type, type})
+                    }
+                    const file = files[index]
+                    const card = doc.createElement('button')
+                    card.type = 'button'
+                    card.className = 'therapy-notice-preview__file-card'
+                    card.setAttribute('data-notice-file', index)
+                    const cover = doc.createElement('img')
+                    cover.className = 'therapy-notice-preview__file-cover'
+                    cover.src = '/assets/staffbenefit/therapyRecuperation/img/home-notice-cover-v2.png?v=flat-20261105'
+                    cover.alt = ''
+                    card.appendChild(cover)
+                    const copy = doc.createElement('span')
+                    copy.className = 'therapy-notice-preview__file-copy'
+                    const filename = doc.createElement('strong')
+                    filename.textContent = file.name
+                    copy.appendChild(filename)
+                    const label = doc.createElement('span')
+                    label.className = 'therapy-notice-preview__file-type'
+                    label.textContent = type === 'pdf' ? 'PDF 文档 · 点击预览' : 'Word 文档 · 点击预览'
+                    copy.appendChild(label)
+                    card.appendChild(copy)
+                    const icon = doc.createElement(type === 'pdf' ? 'img' : 'i')
+                    icon.className = 'therapy-notice-preview__file-icon' + (type === 'pdf' ? '' : ' van-icon van-icon-description')
+                    if (type === 'pdf') {
+                        icon.src = '/assets/platform/img/svg/pdf.svg'
+                        icon.alt = 'PDF'
+                    }
+                    card.appendChild(icon)
+                    return card
+                } catch (error) {
+                    return null
+                }
+            }
+            doc.querySelectorAll('a[href], iframe[src], embed[src], object[data]').forEach(element => {
+                const href = element.getAttribute('href') || element.getAttribute('src') || element.getAttribute('data')
+                const name = element.textContent.trim() || element.getAttribute('title') || ''
+                const card = makeCard(href, name, element.getAttribute('type'))
+                if (card) element.replaceWith(card)
+            })
+            if (this.src && !files.some(file => file.url === new URL(this.src, location.href).href)) {
+                const card = makeCard(this.src, this.title, 'application/pdf')
+                if (card) doc.body.appendChild(card)
+            }
+            this.documents = files
+            this.renderedContent = doc.body.innerHTML
+        },
+        handleContentClick(event) {
+            const button = event.target.closest('[data-notice-file]')
+            if (button && event.currentTarget.contains(button)) {
+                event.preventDefault()
+                this.activeDocument = this.documents[Number(button.getAttribute('data-notice-file'))]
+                this.$emit('input', true)
+                return
+            }
+            this.previewImage(event)
+        },
+        async loadDocument() {
             this.releasePdf()
-            if (!this.value || !this.src) return
+            const file = this.activeDocument
+            if (!file) return
+            const request = {}
+            this._documentRequest = request
             this.loading = true
-            try {
-                const viewer = new Pdfh5(this.$refs.viewer, { pdfurl: this.src, URIenable: false })
-                this._pdfViewer = viewer
-                viewer.on('complete', (status) => {
-                    if (this._pdfViewer !== viewer) return
-                    this.loading = false
-                    this.failed = status !== 'success'
-                })
-                viewer.on('error', () => {
-                    if (this._pdfViewer !== viewer) return
+            this.failed = false
+            this.wordContent = ''
+            await this.$nextTick()
+            if (this._documentRequest !== request) return
+            if (file.type === 'pdf') {
+                try {
+                    const viewer = new Pdfh5(this.$refs.viewer, {pdfurl: file.url, URIenable: false})
+                    this._pdfViewer = viewer
+                    viewer.on('complete', status => {
+                        if (this._documentRequest !== request) return
+                        this.loading = false
+                        this.failed = status !== 'success'
+                    })
+                    viewer.on('error', () => {
+                        if (this._documentRequest !== request) return
+                        this.loading = false
+                        this.failed = true
+                    })
+                } catch (error) {
                     this.loading = false
                     this.failed = true
-                })
+                }
+                return
+            }
+            try {
+                const response = await fetch(file.url, {credentials: 'same-origin'})
+                if (!response.ok) throw new Error('文件读取失败')
+                const body = new FormData()
+                body.append('file', await response.blob(), /\.docx?$/i.test(file.name) ? file.name : 'notice.' + file.type)
+                const converted = await fetch('/platform/sys/file/convertHtml', {method: 'POST', credentials: 'same-origin', headers: {'x-requested-with': 'XMLHttpRequest'}, body})
+                if (!converted.ok) throw new Error('文件转换失败')
+                const result = await converted.json()
+                if (result.code !== 0) throw new Error(result.msg)
+                if (this._documentRequest === request) this.wordContent = result.data || ''
             } catch (error) {
-                this.loading = false
-                this.failed = true
+                if (this._documentRequest === request) this.failed = true
+            } finally {
+                if (this._documentRequest === request) this.loading = false
             }
         },
+        closeDocument() {
+            this.$emit('input', false)
+            this.activeDocument = null
+            this.wordContent = ''
+            this.releasePdf()
+        },
+        previewImage(event) {
+            if (event.target.tagName !== 'IMG' || event.target.closest('a')) return
+            const images = Array.from(event.currentTarget.querySelectorAll('img')).map(image => image.src)
+            vant.ImagePreview({images, startPosition: images.indexOf(event.target.src), closeable: true})
+        },
         releasePdf() {
+            this._documentRequest = null
             const viewer = this._pdfViewer
             this._pdfViewer = null
             if (viewer) viewer.destroy()
@@ -74,7 +191,7 @@ module.exports = {
         height: 100%;
         height: 100dvh;
         overflow: hidden;
-        background: #f3f7fd;
+        background: #edf6ff;
         box-sizing: border-box;
         padding-top: env(safe-area-inset-top);
         padding-bottom: env(safe-area-inset-bottom);
@@ -82,28 +199,33 @@ module.exports = {
 
     .therapy-notice-preview > .van-nav-bar {
         flex-shrink: 0;
-        background: #fff;
+        background: #e4f1ff;
     }
 
     .therapy-notice-preview .van-nav-bar__title {
         max-width: 60%;
+        color: #243249;
+        font-size: 19px;
+        font-weight: 600;
     }
 
     .therapy-notice-preview__body {
         position: relative;
         flex: 1;
         min-height: 0;
-        overflow: hidden;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .therapy-notice-preview__viewer {
         width: 100%;
         height: 100%;
+        min-height: 260px;
     }
 
     .therapy-notice-preview__content {
-        height: 100%;
-        padding: 16px;
+        max-width: 100%;
+        padding: 0;
         overflow: auto;
         box-sizing: border-box;
         background: #fff;
@@ -117,12 +239,27 @@ module.exports = {
         height: auto !important;
     }
 
-    .therapy-notice-preview__status {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #f3f7fd;
-    }
+    .therapy-notice-preview__content p,
+    .therapy-notice-preview__content div { max-width: 100% !important; box-sizing: border-box; }
+    .therapy-notice-preview__content iframe,
+    .therapy-notice-preview__content embed,
+    .therapy-notice-preview__content object { max-width: 100% !important; }
+    .therapy-notice-preview__content table { max-width: 100%; border-collapse: collapse; }
+    .therapy-notice-preview__content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+    .therapy-notice-preview__content a { color: #287cf5; overflow-wrap: anywhere; }
+    .therapy-notice-preview__content { color: #404854; font-size: 15px; }
+    .therapy-notice-preview__content h1,
+    .therapy-notice-preview__content h2 { margin: 0 0 16px; color: #243249; font-size: 21px; font-weight: 600; line-height: 1.5; }
+    .therapy-notice-preview__content img { border-radius: 5px; }
+    .therapy-notice-preview__file-card { position: relative; display: block; width: 100%; padding: 0; margin: 12px 0; overflow: hidden; box-sizing: border-box; border: 1px solid #e1e9f6; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(65, 115, 183, .06); text-align: left; white-space: normal; font: inherit; cursor: pointer; }
+    .therapy-notice-preview__file-card:active { opacity: .85; }
+    .therapy-notice-preview__file-card:focus-visible { outline: 2px solid #1989fa; outline-offset: 2px; }
+    .therapy-notice-preview__content .therapy-notice-preview__file-cover { display: block; width: 100%; height: clamp(110px, 32vw, 150px) !important; margin: 0; border-radius: 0; object-fit: cover; }
+    .therapy-notice-preview__file-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px 46px 12px 14px; }
+    .therapy-notice-preview__file-copy strong { color: #243249; font-size: 14px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
+    .therapy-notice-preview__file-type { margin-top: 8px; color: #8a98ac; font-size: 11px; line-height: 18px; }
+    .therapy-notice-preview__content .therapy-notice-preview__file-icon { position: absolute; right: 14px; bottom: 32px; width: 26px; height: 32px !important; margin: 0; border-radius: 0; object-fit: contain; color: #5489d3; font-size: 28px; }
+    .therapy-notice-preview__status { padding: 20px; color: #8999af; font-size: 13px; line-height: 22px; text-align: center; }
+    .therapy-notice-preview__status .van-button { margin-left: 8px; }
+    .therapy-notice-preview--attachment .therapy-notice-preview__content { padding: 16px; }
 </style>

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

@@ -5,14 +5,9 @@ layout("/layouts/platform_h5.html"){
 <style>
     #app.therapy-home {
         padding-bottom: calc(20px + env(safe-area-inset-bottom));
-        background: #edf4ff !important;
         color: #142544;
     }
 
-    #app.therapy-home .van-nav-bar {
-        background: #f0f6ff;
-    }
-
     #app.therapy-home .van-nav-bar__title {
         color: #142544;
         font-size: 19px;
@@ -112,50 +107,9 @@ layout("/layouts/platform_h5.html"){
         display: block;
         width: 100%;
         height: auto;
-        aspect-ratio: 1.82;
         object-fit: contain;
     }
 
-    .therapy-home .therapy-notice-file {
-        display: block;
-        width: 100%;
-        padding: 0;
-        overflow: hidden;
-        border: 1px solid #e1e9f6;
-        border-radius: 12px;
-        background: #fff;
-        text-align: left;
-        font: inherit;
-        cursor: pointer;
-        box-shadow: 0 4px 12px rgba(65, 115, 183, .07);
-    }
-
-    .therapy-home .therapy-notice-cover {
-        display: block;
-        width: 100%;
-        height: clamp(116px, 34vw, 190px);
-        object-fit: cover;
-    }
-
-    .therapy-home .therapy-notice-file-info {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 14px;
-    }
-
-    .therapy-home .therapy-notice-file-copy { flex: 1; min-width: 0; }
-    .therapy-home .therapy-notice-filename {
-        display: block;
-        margin: 0 0 5px;
-        color: #23334d;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 22px;
-        overflow-wrap: anywhere;
-    }
-
-    .therapy-home .therapy-pdf-icon { width: 30px; height: 36px; object-fit: contain; }
     .therapy-home .therapy-notice-empty { padding: 12px 0; }
     .therapy-home .therapy-notice-loading { padding: 25px 0; text-align: center; }
 
@@ -186,7 +140,7 @@ layout("/layouts/platform_h5.html"){
             <button type="button" class="therapy-route"
                     :aria-label="item.label + (Number(item.value) === 0 ? '，校内/本省疗休养' : '，跨省疗休养')"
                     @click="toLineList(item.value)" v-for="item in chooseButton" :key="item.value">
-                <img class="therapy-route-image" :src="Number(item.value) === 0 ? '/assets/staffbenefit/therapyRecuperation/img/home-route-in-card-v2.png' : '/assets/staffbenefit/therapyRecuperation/img/home-route-out-card-v2.png'" alt="">
+                <img class="therapy-route-image" :src="Number(item.value) === 0 ? '/assets/staffbenefit/therapyRecuperation/img/home-route-in-card-v3.png' : '/assets/staffbenefit/therapyRecuperation/img/home-route-out-card-v3.png'" alt="">
             </button>
         </div>
     </div>
@@ -201,21 +155,11 @@ layout("/layouts/platform_h5.html"){
         <van-empty v-else-if="configError" class="therapy-notice-empty" image="error" description="须知加载失败">
             <van-button size="small" round type="primary" @click="getConfigData">重新加载</van-button>
         </van-empty>
-        <button v-else-if="configData.notice" type="button" class="therapy-notice-file" @click="noticeVisible = true">
-            <img class="therapy-notice-cover" src="/assets/staffbenefit/therapyRecuperation/img/home-notice-cover-v2.png?v=flat-20261105" alt="疗休养须知文件封面">
-            <span class="therapy-notice-file-info">
-                <span class="therapy-notice-file-copy">
-                    <span class="therapy-notice-filename">{{noticeTitle}}</span>
-                    <span class="therapy-section-caption">{{noticePdfUrl ? 'PDF 文档 · 点击预览' : '通知文件 · 点击查看'}}</span>
-                </span>
-                <img class="therapy-pdf-icon" src="/assets/platform/img/svg/pdf.svg" alt="PDF" v-if="noticePdfUrl">
-                <van-icon name="arrow" v-else></van-icon>
-            </span>
-        </button>
+        <therapy-notice-preview v-else-if="configData.notice" v-model="noticeVisible" :src="noticePdfUrl"
+                                :title="noticeTitle" :content="configData.notice"></therapy-notice-preview>
         <van-empty v-else class="therapy-notice-empty" description="暂无疗休养须知"></van-empty>
     </div>
 
-    <therapy-notice-preview v-model="noticeVisible" :src="noticePdfUrl" :title="noticeTitle" :content="configData.notice || ''"></therapy-notice-preview>
 </div>
 <script>
     const vue = new Vue({
@@ -277,7 +221,7 @@ layout("/layouts/platform_h5.html"){
                     const notice = this.configData.notice || ''
                     const doc = new DOMParser().parseFromString(notice, 'text/html')
                     const links = Array.from(doc.querySelectorAll('a[href]'))
-                    const link = links.find(item => /\.pdf(?:[?#]|$)/i.test(item.getAttribute('href')) || /pdf/i.test(item.textContent)) || links[0]
+                    const link = links.find(item => /\.pdf(?:[?#]|$)/i.test(item.getAttribute('href')) || /\.pdf$/i.test(item.textContent.trim()))
                     const href = link ? link.getAttribute('href') : notice.trim()
                     if (link || /^https?:\/\/.*\.pdf(?:[?#]|$)/i.test(href) || /^\/[^<>]*\.pdf(?:[?#]|$)/i.test(href)) {
                         const url = new URL(href, location.href)

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

@@ -8,38 +8,14 @@ layout("/layouts/platform_h5.html"){
         font-family: 微软雅黑,serif;
     }
 
-    .container img {
-        background-size: contain;
-        width: 100%;
-        height: auto;
-        margin: 5px auto;
-        display: block;
-    }
 
     .backTop {
         display: none !important;
     }
 
-    .header {
-        padding: 10px 10px 10px 10px;
-    }
 
-    .content {
-        line-height: 26px;
-        padding: 0px 10px 56px 10px;
-    }
 
-    .pdf_div {
-        padding-bottom: 70px;
-        height: 800px;
-    }
 
-    .title {
-        font-weight: bold;
-        font-size: 19px;
-        color: #505050;
-        margin-bottom: 10px;
-    }
 
     .van-divider {
         border-color: grey;
@@ -173,13 +149,7 @@ layout("/layouts/platform_h5.html"){
         color: grey;
     }
 
-    .header div span {
-        color: grey;
-    }
 
-    .header :last-child {
-        font-size: 14px;
-    }
 
     .van-empty {
         position: relative;
@@ -213,111 +183,169 @@ layout("/layouts/platform_h5.html"){
         color: white !important;
     }
 
-    table {
-        width: 100%
+    #app.therapy-line-detail .van-nav-bar__title { color: #142544; font-size: 18px; font-weight: 700; }
+    #app.therapy-line-detail .container { padding: 16px 12px calc(90px + env(safe-area-inset-bottom)); }
+    #app.therapy-line-detail .detail-card { margin-bottom: 14px; padding: 18px 16px; border: 1px solid #fff; border-radius: 18px; background: #fbfdff; color: #52627b; box-shadow: 0 7px 22px rgba(65, 115, 183, .06); }
+    #app.therapy-line-detail .detail-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
+    #app.therapy-line-detail .detail-title-row h1 { flex: 1 1 180px; min-width: 0; margin: 0; color: #142544; font-size: 21px; font-weight: 700; line-height: 30px; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-badge { flex-shrink: 0; max-width: 100%; margin: 2px 0 0; padding: 4px 9px; border-radius: 8px; background: #eef4ff; color: #4387e6; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-muted { color: #929fb4; font-size: 12px; line-height: 22px; }
+    #app.therapy-line-detail .detail-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 14px 12px; border-radius: 12px; background: #eef5ff; }
+    #app.therapy-line-detail .detail-price { color: #1989fa; font-size: 30px; font-weight: 700; line-height: 42px; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-price small { margin-right: 4px; font-size: 18px; }
+    #app.therapy-line-detail .detail-price > span { margin-left: 4px; color: #929fb4; font-size: 14px; font-weight: 400; }
+    #app.therapy-line-detail .detail-group { flex: 1 1 120px; min-width: 0; text-align: right; font-size: 13px; line-height: 24px; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-group strong { color: #35465e; font-size: 20px; }
+    #app.therapy-line-detail .detail-enrollment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 12px; border-top: 1px solid #e4ecf8; font-size: 13px; line-height: 24px; }
+    #app.therapy-line-detail .detail-enrollment .van-icon { margin-right: 6px; color: #9db2cd; vertical-align: middle; font-size: 18px; }
+    #app.therapy-line-detail .detail-enrollment strong { color: #243249; font-size: 17px; }
+    #app.therapy-line-detail .detail-section-title { display: flex; align-items: center; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #dce8fb; color: #142544; font-size: 17px; font-weight: 700; line-height: 26px; }
+    #app.therapy-line-detail .detail-period-year { margin-left: auto; padding-left: 8px; color: #7d8da7; font-size: 13px; font-weight: 400; white-space: nowrap; }
+    #app.therapy-line-detail .detail-section-title::before { content: ''; width: 3px; height: 14px; margin-right: 8px; border-radius: 2px; background: #1989fa; }
+    #app.therapy-line-detail .detail-time-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 4px 0 14px; }
+    #app.therapy-line-detail .detail-time-row + .detail-time-row { border-top: 1px solid #e4ecf8; padding-top: 14px; padding-bottom: 0; }
+    #app.therapy-line-detail .detail-time-label { grid-column: 1 / -1; color: #7d8da7; font-size: 13px; line-height: 20px; }
+    #app.therapy-line-detail .detail-date { display: flex; flex-direction: column; min-width: 0; }
+    #app.therapy-line-detail .detail-date strong { color: #243249; font-size: 24px; font-weight: 600; line-height: 32px; white-space: nowrap; }
+    #app.therapy-line-detail .detail-date span { margin-top: 8px; color: #929fb4; font-size: 12px; line-height: 20px; }
+    #app.therapy-line-detail .detail-date-end { text-align: right; }
+    #app.therapy-line-detail .detail-time-to { align-self: flex-start; margin: 0 8px; color: #b6c8e0; font-size: 28px; line-height: 32px; }
+    #app.therapy-line-detail .detail-contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: #f2f7ff; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-contact-row + .detail-contact-row { margin-top: 10px; }
+    #app.therapy-line-detail .detail-contact-row > div { min-width: 0; }
+    #app.therapy-line-detail .detail-contact-name { margin-top: 4px; color: #243249; font-size: 15px; font-weight: 600; line-height: 24px; }
+    #app.therapy-line-detail .detail-contact-phone { color: #8999af; font-size: 13px; line-height: 24px; }
+    #app.therapy-line-detail .detail-call { display: flex; flex: 0 0 42px; align-items: center; justify-content: center; height: 42px; border-radius: 12px; background: #fff; color: #1989fa; font-size: 23px; }
+    #app.therapy-line-detail .detail-rich-content { color: #52627b; font-size: 14px; min-width: 0; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; line-height: 1.7; -webkit-overflow-scrolling: touch; }
+    #app.therapy-line-detail .detail-rich-content img { max-width: 100% !important; height: auto !important; object-fit: contain; }
+    #app.therapy-line-detail .detail-rich-content p,
+    #app.therapy-line-detail .detail-rich-content div { max-width: 100% !important; box-sizing: border-box; }
+    #app.therapy-line-detail .detail-rich-content video,
+    #app.therapy-line-detail .detail-rich-content iframe,
+    #app.therapy-line-detail .detail-rich-content embed,
+    #app.therapy-line-detail .detail-rich-content object { max-width: 100% !important; }
+    #app.therapy-line-detail .detail-rich-content video { height: auto !important; }
+    #app.therapy-line-detail .detail-rich-content table { max-width: 100%; border-collapse: collapse; }
+    #app.therapy-line-detail .detail-rich-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-rich-content a,
+    #app.therapy-line-detail .detail-pdf > a { color: #287cf5; overflow-wrap: anywhere; }
+    #app.therapy-line-detail .detail-pdf { margin-top: 14px; padding: 12px; border: 1px solid #e1e9f6; border-radius: 12px; background: #fff; }
+    #app.therapy-line-detail .pdf_div { width: 100%; height: 65vh; min-height: 260px; margin-top: 8px; overflow: hidden; }
+    #app.therapy-line-detail .detail-pdf img { max-width: 100%; }
+    #app.therapy-line-detail .footer { box-sizing: border-box; left: 50%; width: 100%; max-width: 640px; height: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid #e4ecf8; box-shadow: 0 -4px 18px rgba(65, 115, 183, .06); z-index: 10; }
+    #app.therapy-line-detail .footer .van-button { width: 100% !important; height: 46px; border: 0; border-radius: 12px; background: #1989fa; font-size: 16px; font-weight: 600; }
+    @media (max-width: 350px) {
+        #app.therapy-line-detail .container { padding-right: 10px; padding-left: 10px; }
+        #app.therapy-line-detail .detail-card { padding: 14px 12px; }
+        #app.therapy-line-detail .detail-time-row { column-gap: 8px; }
+        #app.therapy-line-detail .detail-date strong { font-size: 24px; }
+        #app.therapy-line-detail .detail-time-to { margin: 0 4px; }
     }
-
+    #app.therapy-line-detail .joinPopup { display: flex; flex-direction: column; background: #f6f7f9; }
+    #app.therapy-line-detail .joinPopup .van-nav-bar__placeholder { flex-shrink: 0; }
+    #app.therapy-line-detail .joinPopup .van-nav-bar { background: #fff; }
+    #app.therapy-line-detail .join_content { flex: 1; min-height: 0; height: auto; padding: 16px 12px calc(90px + env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto; }
+    #app.therapy-line-detail .joinPopup .van-doc-card { margin: 0 0 16px; padding: 0 14px 8px; border: 1px solid #e1e6ee; border-radius: 12px; background: #fff; box-shadow: none; }
+    #app.therapy-line-detail .joinPopup .van-doc-card > div:first-child { display: none; }
+    #app.therapy-line-detail .joinPopup .van-card-header { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #edf0f5; color: #006bff; font-size: 16px; line-height: 24px; }
+    #app.therapy-line-detail .joinPopup .van-card-header::before { content: ''; flex: 0 0 4px; height: 18px; border-radius: 2px; background: #006bff; }
+    #app.therapy-line-detail .joinPopup .van-card-body { padding: 0; }
+    #app.therapy-line-detail .joinPopup .van-field { align-items: center; min-height: 44px; padding: 7px 0; background: transparent; font-size: 14px; }
+    #app.therapy-line-detail .joinPopup .van-cell::after { right: 0; left: 0; border-color: #edf0f5; }
+    #app.therapy-line-detail .joinPopup .van-field__label { width: 6.2em; margin-right: 12px; color: #58647a; line-height: 28px; }
+    #app.therapy-line-detail .joinPopup .van-field__body { min-height: 28px; }
+    #app.therapy-line-detail .joinPopup .van-field__control { color: #172033; line-height: 26px; }
+    #app.therapy-line-detail .joinPopup .van-field__control::placeholder { color: #9aa2b2; }
+    #app.therapy-line-detail .joinPopup .van-field__control:not([readonly]):not(.van-field__control--custom),
+    #app.therapy-line-detail .joinPopup .van-cell--clickable .van-field__body { padding: 0 10px; border: 1px solid #dce1e9; border-radius: 6px; background: #f8f9fb; box-sizing: border-box; }
+    #app.therapy-line-detail .joinPopup .van-cell--clickable { position: relative; }
+    #app.therapy-line-detail .joinPopup .van-cell--clickable .van-field__body { padding-right: 26px; }
+    #app.therapy-line-detail .joinPopup .van-cell__right-icon { position: absolute; right: 8px; top: 50%; margin: 0; transform: translateY(-50%); color: #7c899e; }
+    #app.therapy-line-detail .joinPopup .van-radio { margin-right: 20px; }
+    #app.therapy-line-detail .joinPopup .van-radio__label { color: #172033; }
+    #app.therapy-line-detail .joinPopup .van-radio__icon--checked .van-icon { border-color: #006bff; background: #006bff; }
+    #app.therapy-line-detail .joinPopup .companion-add { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 0; border: 0; background: transparent; color: #006bff; font: inherit; font-size: 14px; font-weight: 500; }
+    #app.therapy-line-detail .joinPopup .companion-add .van-icon { font-size: 20px; }
+    #app.therapy-line-detail .joinPopup .companion-heading { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; padding: 8px 10px; border-radius: 6px; background: #eef3fd; color: #172033; font-size: 14px; line-height: 20px; }
+    #app.therapy-line-detail .joinPopup .companion-delete { padding: 0; border: 0; background: transparent; color: #ee3535; font: inherit; }
+    #app.therapy-line-detail .joinPopup .van-tabs__wrap { margin: 10px 0 0; }
+    #app.therapy-line-detail .joinPopup .single-companion .van-tabs__wrap { display: none; }
+    #app.therapy-line-detail .joinPopup .van-tabs__nav--card { margin: 0; background: #f3f5f9; }
+    #app.therapy-line-detail .joinPopup .van-tabs__nav--card .van-tab { color: #69768d; }
+    #app.therapy-line-detail .joinPopup .van-tabs__nav--card .van-tab--active { background: #006bff; color: #fff; }
+    #app.therapy-line-detail .joinPopup .companionList_empty_text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 138px; padding: 12px 0; color: #98a2b5; font-size: 13px; line-height: 22px; }
+    #app.therapy-line-detail .joinPopup .companionList_empty_text .van-icon { color: #b0bacb; font-size: 36px; }
+    #app.therapy-line-detail .joinPopup .companion-room-tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 10px; border-radius: 6px; background: #eef3fd; color: #7c899e; font-size: 12px; line-height: 20px; }
+    #app.therapy-line-detail .joinPopup .companion-room-tip .van-icon { flex-shrink: 0; color: #006bff; font-size: 16px; line-height: 20px; }
+    #app.therapy-line-detail .joinPopup .submitButton { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #edf0f5; box-sizing: border-box; z-index: 1; }
+    #app.therapy-line-detail .joinPopup .submitButton .van-button { width: 100% !important; height: 44px; border: 0; border-radius: 8px; background: #006bff; color: #fff; font-size: 16px; font-weight: 600; }
 </style>
 
-<div id="app" v-cloak>
+<div id="app" class="therapy-mobile therapy-line-detail" v-cloak>
 
     <van-sticky>
         <van-nav-bar @click-left="historyBack()" fixed left-arrow placeholder
-                     title="普惠疗休养-线路介绍"></van-nav-bar>
+                     title="线路详情"></van-nav-bar>
     </van-sticky>
 
     <template v-if="isLoad">
         <!--线路详情-->
         <van-skeleton title :loading="skeLoading" :row="12">
             <div class="container">
-                <div class="header">
-                    <div class="title">
-                        <van-tag size="large" color="#1867b0" style="position: relative; top: -2px">
-                            {{lineData.lotName}}
-                        </van-tag>
-                        {{lineData.lineName}}
+                <section class="detail-card detail-overview">
+                    <div class="detail-title-row">
+                        <h1>{{lineData.lineName}}</h1>
+                        <span v-if="lineData.lotName" class="detail-badge">{{lineData.lotName}}</span>
                     </div>
-                    <div style="margin-top: 10px">
-                        <div v-if="lineData.regionalNature == '省内'">
-                            <div>
-                                <span class="line_label">预计费用：</span>
-                                <label>{{lineData.estimatedCost}}元</label>
-                            </div>
-                            <div v-if="configData.familyInfo == 2">
-                                <span>当前报名：</span>
-                                {{lineData.signUpUserNum + lineData.signUpUserFamilyNum + '（家属' + lineData.signUpUserFamilyNum
-                                +
-                                '人）'}}
-                            </div>
-                            <div v-else>
-                                <span>当前报名：</span>
-                                {{lineData.signUpUserNum + lineData.familyNumber + '（家属' + lineData.familyNumber
-                                +
-                                '人）'}}
-                            </div>
-                            <div>
-                                <span class="line_label">成团人数包括家属：</span>
-                                <label v-if="lineData.estimatedFamilyNumbers">{{lineData.estimatedFamilyNumbers}}人</label>
-                                <label v-else>不限制</label>
-                            </div>
-                        </div>
-
-                        <div v-else>
-                            <div>
-                                <span class="line_label">预计费用：</span>
-                                <label>{{lineData.estimatedCost}}元</label>
-                            </div>
-                            <div v-if="configData.familyInfo == 2">
-                                <span>当前报名：</span>
-                                {{lineData.signUpUserNum + '（家属' + lineData.signUpUserFamilyNum
-                                +
-                                '人）'}}
-                            </div>
-                            <div v-else>
-                                <span>当前报名：</span>
-                                {{lineData.signUpUserNum + '（家属' + lineData.familyNumber
-                                +
-                                '人）'}}
-                            </div>
-                        </div>
-
-                        <div v-if="hasSignUpTime()">
-                            <span>报名时间：</span>
-                            {{moment(lineData.signUpStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
-                            moment(lineData.signUpEndTime).format('YYYY-MM-DD HH:mm')}}
-                        </div>
-                        <div>
-                            <span>出行时间：</span>
-                            {{moment(lineData.playStartTime).format('YYYY-MM-DD HH:mm') + ' ~ ' +
-                            moment(lineData.playEndTime).format('YYYY-MM-DD HH:mm')}}
-                        </div>
-                        <div>
-                            <span>旅&ensp;行&ensp;社：</span>
-                            {{lineData.travelAgencyName}}
-                        </div>
-                        <div>
-                            <span>联系方式：</span>
-                            {{lineData.contactMobileNumber}}
-                        </div>
-                        <div>
-                            <span class="line_label">最少成团人数（包括家属）：</span>
-                            <label>{{configData.outsideQuota}}人</label>
-                        </div>
-                        <div>
-                            <span class="line_label">联络人：</span>
-                            <label>{{lineData.principal}}</label>
-                        </div>
-                        <div>
-                            <span class="line_label">联系方式：</span>
-                            <label>{{lineData.principalContact}}</label>
+                    <div class="detail-price-row">
+                        <div><div class="detail-muted">预计费用</div><div class="detail-price"><small>¥</small>{{lineData.estimatedCost}}<span>元</span></div></div>
+                        <div class="detail-group">
+                            <div>最少 <strong>{{configData.outsideQuota}}</strong> 人成团</div>
+                            <div class="detail-muted">成团人数包含家属</div>
+                            <div class="detail-muted" v-if="lineData.regionalNature == '省内'">本线路成团人数：{{lineData.estimatedFamilyNumbers ? lineData.estimatedFamilyNumbers + '人' : '不限制'}}</div>
                         </div>
                     </div>
-                </div>
-                <van-divider :style="{ color: 'orange', fontSize: '12px' }">上下滑动翻页，单击查看，再单击返回</van-divider>
-                <!--<div v-if="lineData.content" v-html="lineData.content" class="content"></div>
-                <div v-else v-html="configData.notice" class="content"></div>-->
-                <div v-if="isPdf" v-html="lineData.content" class="content"></div>
-                <div v-else id="demo" class="pdf_div"></div>
+                    <div class="detail-enrollment">
+                        <span><van-icon name="friends-o"></van-icon>当前报名 <strong>{{detailSignUpCount()}}</strong> 人</span>
+                        <span class="detail-muted">其中家属 {{configData.familyInfo == 2 ? lineData.signUpUserFamilyNum : lineData.familyNumber}} 人</span>
+                    </div>
+                </section>
+                <section class="detail-card">
+                    <h2 class="detail-section-title">报名与出行<span class="detail-period-year">{{queryYear || (isValidDate(lineData.playStartTime) ? moment(lineData.playStartTime).format('YYYY') : new Date().getFullYear())}}年度</span></h2>
+                    <div class="detail-time-row" v-if="hasSignUpTime()">
+                        <span class="detail-time-label">报名时间</span>
+                        <div class="detail-date"><strong>{{moment(lineData.signUpStartTime).format('HH:mm')}}</strong><span>{{moment(lineData.signUpStartTime).format('M月D日')}}</span></div>
+                        <span class="detail-time-to" aria-hidden="true">⟶</span>
+                        <div class="detail-date detail-date-end"><strong>{{moment(lineData.signUpEndTime).format('HH:mm')}}</strong><span>{{moment(lineData.signUpEndTime).format('M月D日')}}</span></div>
+                    </div>
+                    <div class="detail-time-row detail-travel-time">
+                        <span class="detail-time-label">出行时间</span>
+                        <div class="detail-date"><strong>{{isValidDate(lineData.playStartTime) ? moment(lineData.playStartTime).format('HH:mm') : '待定'}}</strong><span v-if="isValidDate(lineData.playStartTime)">{{moment(lineData.playStartTime).format('M月D日')}}</span></div>
+                        <span class="detail-time-to" aria-hidden="true">⟶</span>
+                        <div class="detail-date detail-date-end"><strong>{{isValidDate(lineData.playEndTime) ? moment(lineData.playEndTime).format('HH:mm') : '待定'}}</strong><span v-if="isValidDate(lineData.playEndTime)">{{moment(lineData.playEndTime).format('M月D日')}}</span></div>
+                    </div>
+                </section>
+                <section class="detail-card">
+                    <h2 class="detail-section-title">联系信息</h2>
+                    <div class="detail-contact-row">
+                        <div><div class="detail-muted">旅行社</div><div class="detail-contact-name">{{lineData.travelAgencyName || '暂无信息'}}</div><div class="detail-contact-phone">{{lineData.contactMobileNumber}}</div></div>
+                        <a v-if="lineData.contactMobileNumber" :href="'tel:' + lineData.contactMobileNumber" class="detail-call" aria-label="拨打旅行社电话"><van-icon name="phone-o"></van-icon></a>
+                    </div>
+                    <div class="detail-contact-row">
+                        <div><div class="detail-muted">联系人</div><div class="detail-contact-name">{{lineData.principal || '暂无信息'}} <span class="detail-contact-phone">{{lineData.principalContact}}</span></div></div>
+                        <a v-if="lineData.principalContact" :href="'tel:' + lineData.principalContact" class="detail-call" aria-label="拨打联系人电话"><van-icon name="phone-o"></van-icon></a>
+                    </div>
+                </section>
+                <section class="detail-card detail-itinerary">
+                    <h2 class="detail-section-title">行程介绍</h2>
+                    <div class="content detail-rich-content" v-html="lineData.content" @click="previewItineraryImage"></div>
+                    <div v-for="(file, fileIndex) in itineraryPdfs" :key="file.url" class="detail-pdf" @click="previewItineraryImage">
+                        <a :href="file.url" target="_blank" rel="noopener">{{file.name}} <van-icon name="external"></van-icon></a>
+                        <div :id="'itinerary-pdf-' + fileIndex" v-show="!file.failed" class="pdf_div"></div>
+                        <div v-if="file.failed" class="detail-muted">预览暂不可用，请点击文件名查看</div>
+                    </div>
+                    <div v-if="!lineData.content" class="detail-muted">暂无行程介绍</div>
+                </section>
 
                 <!--<van-empty
                         v-else class="custom-image"
@@ -406,17 +434,18 @@ layout("/layouts/platform_h5.html"){
                     <div class="van-card-header"
                          style="display: flex; justify-content: space-between; align-items: center">
                         <span style="float:left;">随行人信息</span>
-                        <div v-if="configData.familyInfo === 2">
-                            <van-tag @click="delCompanion" size="large" type="primary" color="lightgrey">删除随行人
-                            </van-tag>
-                            <van-tag @click="addCompanion" size="large" type="primary" color="#1867b0">添加随行人
-                            </van-tag>
-                        </div>
+                        <button v-if="configData.familyInfo === 2" type="button" class="companion-add" @click="addCompanion">
+                            <van-icon name="plus"></van-icon>添加
+                        </button>
                     </div>
                     <template v-if="configData.familyInfo === 2">
                         <div v-if="formData.companionList.length > 0" class="van-card-body">
-                            <van-tabs v-model="active" type="card" color="#0e78c5" animated>
+                            <van-tabs v-model="active" type="card" color="#006bff" :class="{'single-companion': formData.companionList.length === 1}" animated>
                                 <van-tab v-for="(item, index) in formData.companionList" :key="item.id || index" :title="'随行人' + (index + 1)">
+                                    <div class="companion-heading">
+                                        <span>随行人 {{index + 1}}</span>
+                                        <button type="button" class="companion-delete" @click="delCompanion">删除</button>
+                                    </div>
                                     <van-field label="姓名" name="userName" placeholder="请填写姓名"
                                                v-model="item.userName"
                                                :rules="[{ required: true }]"></van-field>
@@ -427,8 +456,8 @@ layout("/layouts/platform_h5.html"){
                                                name="validator">
                                         <template #input>
                                             <van-radio-group direction="horizontal" v-model="item.sex">
-                                                <van-radio name="男" shape="square">男</van-radio>
-                                                <van-radio name="女" shape="square">女</van-radio>
+                                                <van-radio name="男">男</van-radio>
+                                                <van-radio name="女">女</van-radio>
                                             </van-radio-group>
                                         </template>
                                     </van-field>
@@ -446,8 +475,9 @@ layout("/layouts/platform_h5.html"){
                                     <van-field @click="self = false; roomVisible = true" readonly is-link label="房间"
                                                name="bedType" placeholder="请选择房间"
                                                v-model="item.bedInfo.bedType"></van-field>
-                                    <div style="font-size: 12px; color:orangered; padding-left: 16px; padding-bottom: 4px">
-                                        提醒：如果跟报名人员同一房间，无须选择！
+                                    <div class="companion-room-tip">
+                                        <van-icon name="info-o"></van-icon>
+                                        <span>提醒：如果跟报名人员同一房间，无须选择！</span>
                                     </div>
                                     <van-field v-if="item.bedInfo.bedType == '标准间'"
                                                @click="self = false; bedVisible = true"
@@ -472,6 +502,7 @@ layout("/layouts/platform_h5.html"){
                             </van-tabs>
                         </div>
                         <div v-if="formData.companionList.length == 0" class="companionList_empty_text">
+                            <van-icon name="add-o"></van-icon>
                             <span>
                                 如有随行人出行，请添加随行人
                             </span>
@@ -533,12 +564,12 @@ layout("/layouts/platform_h5.html"){
         return null;
     }
 
-    let pdfh5 = null
+    const itineraryPdfViewers = []
     const vue = new Vue({
         el: '#app',
         data() {
             return {
-                isPdf: false,
+                itineraryPdfs: [],
                 isLoad: false,
                 active: 0,
                 roomColumns: ['大床房', '标准间'],
@@ -577,6 +608,41 @@ layout("/layouts/platform_h5.html"){
         },
         methods: {
             moment,
+            detailSignUpCount() {
+                if (this.lineData.regionalNature == '省内') {
+                    return this.configData.familyInfo == 2
+                        ? this.lineData.signUpUserNum + this.lineData.signUpUserFamilyNum
+                        : this.lineData.signUpUserNum + this.lineData.familyNumber
+                }
+                return this.lineData.signUpUserNum
+            },
+            previewItineraryImage(event) {
+                if (event.target.tagName !== 'IMG' || event.target.closest('a')) return
+                const images = Array.from(event.currentTarget.querySelectorAll('img')).map(image => image.src)
+                vant.ImagePreview({images, startPosition: images.indexOf(event.target.src), closeable: true})
+            },
+            initItineraryPdfs() {
+                const doc = new DOMParser().parseFromString(this.lineData.content || '', 'text/html')
+                const files = []
+                doc.querySelectorAll('a[href], iframe[src], embed[src], object[data]').forEach(element => {
+                    const url = element.getAttribute('href') || element.getAttribute('src') || element.getAttribute('data')
+                    const name = element.textContent.trim() || element.getAttribute('title') || 'PDF行程附件'
+                    if (!url || !(/\.pdf(?:[?#]|$)/i.test(url) || /\.pdf$/i.test(name) || element.getAttribute('type') === 'application/pdf')) return
+                    if (!files.some(file => file.url === url)) files.push({url, name, failed: false})
+                })
+                this.itineraryPdfs = files
+                this.$nextTick(() => {
+                    files.forEach((file, index) => {
+                        try {
+                            const viewer = new Pdfh5('#itinerary-pdf-' + index, {pdfurl: file.url})
+                            viewer.on('error', () => { file.failed = true })
+                            itineraryPdfViewers.push(viewer)
+                        } catch (e) {
+                            file.failed = true
+                        }
+                    })
+                })
+            },
             roomCancel() {
                 if (!this.self) {
                     this.formData.companionList[this.active].bedInfo.bedType = ''
@@ -832,61 +898,14 @@ layout("/layouts/platform_h5.html"){
             }
             this.isLoad = true
 
-            try {
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(this.lineData.content, 'text/html');
-                const link = doc.querySelector('a');
-                const href = link.getAttribute('href');
-                this.$nextTick(() => {
-                    pdfh5 = new Pdfh5('#demo', {
-                        pdfurl: href,
-                    });
-                })
-            }catch (e) {
-                this.isPdf = true
-                document.addEventListener('click', function (event) {
-                    // 打印被点击的元素标签名和 class
-                    if (event.target.tagName === 'IMG' && event.target.className !== 'top_icon') {
-                        vant.ImagePreview({
-                            images: [event.target.src],
-                            closeable: true,
-                        })
-                    }
-                })
-            }
-
-            this.$nextTick(() => {
-                if (pdfh5) pdfh5.on("complete", function () {
-                    const imgDoc = document.querySelectorAll('img')
-                    let array = []
-                    let classArray = []
-                    imgDoc.forEach(o => {
-                        if(o.getAttribute('class') !== 'top_icon') {
-                            classArray.push(o.getAttribute('class'))
-                            array.push(o.getAttribute('src'))
-                        }
-                    })
-                    document.addEventListener('click', function (event) {
-                        // 打印被点击的元素标签名和 class
-                        if (event.target.tagName === 'IMG' && event.target.className !== 'top_icon') {
-                            const index = classArray.indexOf(event.target.className)
-                            if(index !== -1) {
-                                vant.ImagePreview({
-                                    images: array,
-                                    startPosition: index,
-                                    closeable: true,
-                                })
-                            }
-                        }
-                    })
-                })
-            })
+            this.initItineraryPdfs()
             loading.close()
         },
         mounted() {
             window.addEventListener('scroll', this.scrollToTop)
         },
         destroyed() {
+            itineraryPdfViewers.forEach(viewer => viewer.destroy())
             window.removeEventListener('scroll', this.scrollToTop)
         },
     })

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

@@ -4,45 +4,7 @@ layout("/layouts/platform_h5.html"){
 <link rel="stylesheet" href="${base!}/assets/staffbenefit/therapyRecuperation/mobile/pages.css">
 <style>
 
-    #app {
-        font-family: 微软雅黑, serif;
-        min-height: 100vh;
-    }
-
-    .van-doc-card {
-        margin: 0;
-        padding: 18px 18px 12px;
-        background-color: #fff;
-        border-radius: 0;
-        box-shadow: none;
-        line-height: 20px;
-        position: relative;
-    }
-
-    .van-dropdown-menu__item {
-        flex: auto;
-    }
-
-    .list-card {
-        position: relative;
-        margin: 12px 16px;
-        background-color: #fff;
-        border-radius: 12px;
-        box-shadow: 0 2px 10px rgba(31, 35, 41, 0.08);
-        width: auto;
-        overflow: hidden;
-    }
-
-    .list-card > .content {
-        padding: 14px 14px;
-        display: flex;
-        min-height: 92px;
-    }
-
     .content-right {
-        width: calc(100% - 108px);
-        max-width: calc(100% - 108px);
-        padding-left: 12px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: flex;
@@ -52,51 +14,15 @@ layout("/layouts/platform_h5.html"){
 
     .cr-title {
         /*max-height: 40px;*/
-        line-height: 18px;
         overflow: hidden;
         font-weight: bold;
-        color: #111827;
-    }
-
-    .line-title-row {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .line-title-text {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .group-tag {
-        flex: 0 0 auto;
-        margin-top: 1px;
-        border-radius: 4px;
-        font-weight: bold;
-    }
-
-    .van-grid-item__content {
-        padding: 0;
-    }
-
-    .choose_button .button_text {
-        font-size: 13px;
-        margin-top: 8px;
     }
 
     .concat, .mobile, .union {
-        font-size: 12px;
-        line-height: 19px;
         width: 100%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        color: #667085;
     }
 
     .van-tag {
@@ -106,51 +32,6 @@ layout("/layouts/platform_h5.html"){
         line-height: 15px;
     }
 
-    .van-divider {
-        margin: 8px 0;
-    }
-
-    .line-filter-dropdowns {
-        display: flex;
-        gap: 10px;
-        margin-top: 10px;
-    }
-
-    .line-filter-dropdowns .van-dropdown-menu {
-        flex: 1;
-        min-width: 0;
-        height: 36px;
-        border: 1px solid #dce1e8;
-        border-radius: 18px;
-        overflow: hidden;
-        background: #fff;
-        box-shadow: none;
-    }
-
-    .line-filter-dropdowns .van-dropdown-menu__bar {
-        height: 34px;
-        box-shadow: none;
-        background: transparent;
-    }
-
-    .line-filter-dropdowns .van-dropdown-menu__title {
-        max-width: 100%;
-        padding: 0 18px 0 8px;
-        color: #344054;
-        font-size: 13px;
-        font-weight: bold;
-    }
-
-    .active {
-        background-color: #1a73ff;
-        color: white;
-    }
-
-    .no_active {
-        background-color: transparent;
-        color: #344054;
-    }
-
     .van-list {
         padding-bottom: 10px;
     }
@@ -165,20 +46,6 @@ layout("/layouts/platform_h5.html"){
         line-height: 24px;
     }
 
-    .desc_info div {
-        font-size: 12px;
-    }
-
-    .group-count-number.grouped {
-        color: #12b76a;
-        font-weight: bold;
-    }
-
-    .group-count-number.not-grouped {
-        color: #f79009;
-        font-weight: bold;
-    }
-
     .sign_button .van-button {
         width: 72px;
         height: 26px;
@@ -197,54 +64,6 @@ layout("/layouts/platform_h5.html"){
         font-size: 13px;
     }
 
-    .line-search {
-        margin-top: 14px;
-        padding-top: 2px;
-    }
-
-    .line-search .van-search {
-        padding: 0;
-        border: 1px solid #dce1e8;
-        border-radius: 18px;
-        overflow: hidden;
-        background: #fff;
-    }
-
-    .line-search .van-search__action {
-        color: #1a73ff;
-        font-weight: bold;
-    }
-
-    .line-search .van-search__content {
-        background: #fff;
-    }
-
-    .type-icon {
-        width: 52px;
-        height: 52px;
-        margin: 0 auto;
-        border-radius: 50%;
-        background: #f2f4f7;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-    }
-
-    .type-icon.active-icon {
-        border: 2px solid #1a73ff;
-        background: #eef5ff;
-    }
-
-    .type-icon .van-image {
-        width: 30px !important;
-        height: 30px !important;
-    }
-
-    .line-thumb {
-        flex: 0 0 96px;
-    }
-
     .line-thumb .van-image {
         display: block;
     }
@@ -394,6 +213,7 @@ layout("/layouts/platform_h5.html"){
         align-items: center;
         max-width: 100%;
         height: 44px;
+        padding: 0 18px 0 8px;
         color: #66758a;
         font-size: 14px;
         font-weight: 400;
@@ -450,6 +270,8 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .line-toolbar .van-dropdown-item__icon { margin-left: 4px; }
 
     #app.therapy-mobile .list-card {
+        position: relative;
+        width: auto;
         margin: 4px 10px 14px;
         border: 0;
         border-radius: 16px;
@@ -457,8 +279,10 @@ layout("/layouts/platform_h5.html"){
     }
 
     #app.therapy-mobile .list-card > .content {
+        display: flex;
+        min-height: 92px;
         align-items: flex-start;
-        padding: 16px 14px;
+        padding: 0;
     }
 
     #app.therapy-mobile .line-thumb {
@@ -475,62 +299,94 @@ layout("/layouts/platform_h5.html"){
     }
 
     #app.therapy-mobile .line-thumb img { object-fit: cover; }
-    #app.therapy-mobile .line-title-row { align-items: center; gap: 6px; }
-    #app.therapy-mobile .line-title-text {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        white-space: normal;
-        color: #172033;
-        font-size: 16px !important;
-        line-height: 24px;
-    }
     #app.therapy-mobile .desc_info > div { font-size: 13px; line-height: 23px; color: #66758a; }
-    #app.therapy-mobile .group-tag { padding: 3px 6px; font-size: 11px; line-height: 17px; }
     #app.therapy-mobile .van-list__finished-text { font-size: 14px; color: #8c93a3; }
 
     #app.therapy-mobile .therapy-travel-sheet {
         max-height: 80vh;
-        border-radius: 16px 16px 0 0;
+        border-radius: 20px 20px 0 0;
+        padding-bottom: env(safe-area-inset-bottom);
+        background: #fff;
+    }
+
+    #app.therapy-mobile .therapy-travel-sheet::before {
+        content: '';
+        flex-shrink: 0;
+        width: 36px;
+        height: 4px;
+        margin: 4px auto 14px;
+        border-radius: 2px;
+        background: #dfe6ef;
     }
 
     #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__header {
         flex-shrink: 0;
-        color: #172033;
-        font-size: 18px;
+        padding: 0 64px 0 22px;
+        color: #243249;
+        font-size: 22px;
         font-weight: 600;
-        line-height: 52px;
+        line-height: 32px;
+        text-align: left;
+    }
+
+    #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__close {
+        top: 22px;
+        right: 18px;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        border-radius: 50%;
+        background: #f4f6f9;
+        color: #8c9bb0;
+        font-size: 18px;
+        line-height: 34px;
+        text-align: center;
     }
 
     #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__description {
         flex-shrink: 0;
-        padding: 0 20px 16px;
-        color: #66758a;
+        margin-top: 6px;
+        padding: 0 22px;
+        color: #7d8da7;
         font-size: 14px;
         line-height: 22px;
         overflow-wrap: anywhere;
+        text-align: left;
     }
 
+    #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__description::after { display: none; }
+
     #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__content {
         min-height: 0;
         overflow-y: auto;
     }
 
-    #app.therapy-mobile .travel-period-list { padding: 12px 14px 4px; }
+    #app.therapy-mobile .travel-period-list { padding: 14px 18px 10px; }
     #app.therapy-mobile .travel-period-card {
         margin-bottom: 12px;
         padding: 16px;
-        border: 1px solid #ebedf0;
-        border-radius: 12px;
-        background: #f7f8fa;
+        border: 1px solid #e4edfc;
+        border-radius: 16px;
+        background: #fff;
         text-align: left;
         overflow-wrap: anywhere;
     }
 
-    #app.therapy-mobile .travel-period-title { margin-bottom: 8px; color: #172033; font-size: 16px; font-weight: 600; line-height: 24px; }
-    #app.therapy-mobile .travel-period-date { margin-bottom: 10px; color: #35445a; font-size: 14px; line-height: 24px; }
-    #app.therapy-mobile .travel-period-meta { color: #66758a; font-size: 13px; line-height: 22px; }
-    #app.therapy-mobile .travel-period-actions { display: flex; gap: 12px; margin-top: 16px; }
+    #app.therapy-mobile .travel-period-title { display: flex; align-items: center; margin-bottom: 12px; color: #172033; font-size: 16px; font-weight: 600; line-height: 24px; }
+    #app.therapy-mobile .travel-period-title .van-icon { margin-right: 8px; color: #287cf5; font-size: 18px; }
+    #app.therapy-mobile .travel-period-date { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; border-bottom: 1px solid #eff2f7; }
+    #app.therapy-mobile .travel-date-column { min-width: 0; }
+    #app.therapy-mobile .travel-date-end { text-align: right; }
+    #app.therapy-mobile .travel-date-label { margin-bottom: 4px; color: #929fb4; font-size: 12px; line-height: 20px; }
+    #app.therapy-mobile .travel-period-year { margin-left: auto; padding-left: 8px; color: #7d8da7; font-size: 13px; font-weight: 400; }
+    #app.therapy-mobile .travel-date-time { color: #243249; font-size: 24px; font-weight: 600; line-height: 32px; }
+    #app.therapy-mobile .travel-date-day { color: #929fb4; font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; }
+    #app.therapy-mobile .travel-date-day small { margin: 0; font-size: inherit; }
+    #app.therapy-mobile .travel-date-arrow { flex-shrink: 0; margin: 0 8px; color: #b6c8e0; font-size: 28px; line-height: 32px; }
+    #app.therapy-mobile .travel-period-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 8px; color: #7d8da7; font-size: 12px; line-height: 22px; }
+    #app.therapy-mobile .travel-deadline-label { display: flex; align-items: center; margin-right: 8px; color: #929fb4; }
+    #app.therapy-mobile .travel-deadline-label .van-icon { margin-right: 6px; }
+    #app.therapy-mobile .travel-period-actions { display: flex; gap: 12px; margin-top: 12px; }
     #app.therapy-mobile .travel-period-actions .van-button {
         flex: 1;
         min-width: 0;
@@ -541,15 +397,77 @@ layout("/layouts/platform_h5.html"){
     }
     #app.therapy-mobile .travel-period-actions .van-button--info { background: #1989fa; }
     #app.therapy-mobile .travel-period-actions .van-button--plain { color: #1989fa; background: #fff; }
-    #app.therapy-mobile .therapy-travel-sheet .van-action-sheet__cancel { flex-shrink: 0; color: #66758a; font-size: 16px; }
     #app.therapy-mobile .therapy-travel-sheet .van-empty { position: static; width: auto; height: auto; transform: none; background: transparent; }
 
+    #app.therapy-mobile .list-card:has(.line-card-layout) {
+        margin: 4px 10px 10px;
+        border: 1px solid #edf0f5;
+        border-radius: 18px;
+        box-shadow: 0 1px 2px rgba(49, 85, 145, .02);
+    }
+    #app.therapy-mobile .list-card > .line-card-layout {
+        --line-header-height: 84px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
+    }
+    #app.therapy-mobile .line-card-layout .line-thumb {
+        flex: 0 0 auto;
+        width: auto;
+        height: var(--line-header-height);
+        aspect-ratio: 4 / 3;
+    }
+    #app.therapy-mobile .line-card-layout .line-thumb .van-image { height: 100% !important; border-radius: 11px; }
+    #app.therapy-mobile .line-summary {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 0;
+        height: var(--line-header-height);
+        margin-left: 12px;
+    }
+    #app.therapy-mobile .line-card-title {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        color: #243249;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 26px;
+    }
+    #app.therapy-mobile .line-price { display: flex; align-items: baseline; flex-wrap: wrap; color: #287cf5; line-height: 28px; }
+    #app.therapy-mobile .line-currency { margin-right: 2px; font-size: 14px; font-weight: 600; }
+    #app.therapy-mobile .line-price strong { font-size: 26px; font-weight: 700; }
+    #app.therapy-mobile .line-price-label { margin-left: 7px; color: #929fb4; font-size: 12px; }
+    #app.therapy-mobile .line-card-meta,
+    #app.therapy-mobile .line-card-footer { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; min-width: 0; margin-top: 10px; }
+    #app.therapy-mobile .line-card-meta { color: #7d8da7; font-size: 13px; line-height: 20px; }
+    #app.therapy-mobile .line-card-date,
+    #app.therapy-mobile .line-card-union { display: flex; align-items: center; min-width: 0; }
+    #app.therapy-mobile .line-card-date { flex-shrink: 0; }
+    #app.therapy-mobile .line-card-union { margin-left: 8px; }
+    #app.therapy-mobile .line-card-union span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #app.therapy-mobile .line-card-meta .van-icon { flex-shrink: 0; margin-right: 6px; color: #9aaec8; font-size: 15px; }
+    #app.therapy-mobile .line-card-footer { padding-top: 8px; border-top: 1px solid #eff2f7; }
+    #app.therapy-mobile .line-card-count { display: flex; align-items: baseline; flex-wrap: wrap; color: #929fb4; font-size: 13px; line-height: 22px; }
+    #app.therapy-mobile .line-card-count strong { margin: 0 4px 0 7px; font-size: 18px; }
+    #app.therapy-mobile .line-card-count .grouped { color: #10b58b; }
+    #app.therapy-mobile .line-card-count .not-grouped { color: #f58a23; }
+    #app.therapy-mobile .line-card-status { flex-shrink: 0; padding: 4px 8px; border-radius: 5px; font-size: 12px; line-height: 18px; }
+    #app.therapy-mobile .line-card-status .van-icon { margin-right: 5px; }
+    #app.therapy-mobile .line-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 .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-search-row { gap: 8px; }
         #app.therapy-mobile .line-toolbar { padding-right: 10px; padding-left: 10px; }
-        #app.therapy-mobile .line-title-row { flex-wrap: wrap; }
-        #app.therapy-mobile .line-title-text { flex-basis: 100%; }
+        #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; }
+        #app.therapy-mobile .line-price strong { font-size: 23px; }
+        #app.therapy-mobile .line-card-meta { flex-wrap: wrap; }
+        #app.therapy-mobile .line-card-union { margin: 6px 0 0; }
     }
 </style>
 
@@ -610,31 +528,52 @@ layout("/layouts/platform_h5.html"){
             finished-text="没有更多了"
             v-model="loading">
         <div @click.stop="clickLineRow(o)" class="list-card" v-for="o in tableData">
-            <div class="content">
+            <div class="content" :class="{'line-card-layout': pageForm.theRapyRecuperationType != '2' && pageForm.theRapyRecuperationType != '3'}">
                 <div class="line-thumb">
                     <van-image
                             fit="cover"
                             radius="8"
                             :src="$commonUtil.getFileUrl(o.fileId)"
                             width="100%">
+                        <template #error><div class="line-image-placeholder"><van-icon name="photo-o"></van-icon><span>暂无图片</span></div></template>
+                        <template #loading><div class="line-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'"
-                     class="content-right">
-                    <div class="cr-title line-title-row">
-                        <span class="line-title-text" style="font-size: 14px">{{o.lineName}}</span>
-                        <van-tag
-                                :color="isGrouped(o) ? '#e7f8ef' : '#fff3e6'"
-                                :text-color="isGrouped(o) ? '#12b76a' : '#f79009'"
-                                class="group-tag">
+                <template v-if="pageForm.theRapyRecuperationType != '2' && pageForm.theRapyRecuperationType != '3'">
+                    <div class="line-summary">
+                        <div class="line-card-title">{{o.lineName}}</div>
+                        <div class="line-price"><span class="line-currency">¥</span><strong>{{o.estimatedCost}}</strong><span class="line-price-label">预计费用</span></div>
+                    </div>
+                    <div class="line-card-meta">
+                        <div class="line-card-date">
+                            <van-icon name="calendar-o"></van-icon>
+                            <span v-if="isValidDate(o.playStartTime) && isValidDate(o.playEndTime)">{{moment(o.playStartTime).format('MM-DD') + ' 至 ' + moment(o.playEndTime).format('MM-DD')}}</span>
+                            <span v-else>出行时间见线路详情</span>
+                        </div>
+                        <div class="line-card-union" v-if="o.signUpMode === 2 || o.usUnionName">
+                            <van-icon name="hotel-o"></van-icon>
+                            <span>{{o.signUpMode === 2 ? '校工会' : o.usUnionName}}</span>
+                        </div>
+                    </div>
+                    <div class="line-card-footer">
+                        <div class="line-card-count" v-if="getMinimumGroupCount(o) > 0">
+                            <span>成团人数</span>
+                            <strong :class="isGrouped(o) ? 'grouped' : 'not-grouped'">{{getGroupCount(o)}}</strong>
+                            <span>/ {{getMinimumGroupCount(o)}} 人</span>
+                        </div>
+                        <div class="line-card-count" v-else>成团人数见线路详情</div>
+                        <van-tag :color="isGrouped(o) ? '#e8f8f2' : '#fff5e9'"
+                                 :text-color="isGrouped(o) ? '#10b58b' : '#f58a23'" class="line-card-status">
+                            <van-icon v-if="isGrouped(o)" name="success"></van-icon>
                             {{isGrouped(o) ? '已成团' : '未成团'}}
                         </van-tag>
                     </div>
-                    <div class="desc_info">
-                        <!--<div class="union">
+                </template>
+
+                    <!--<div class="union">
                             <span>组织形式：</span>{{o.createMode === 2 && o.signUpMode === 2 ? '校工会' : o.usUnionName}}
                         </div>-->
-                        <!--<div class="concat" v-if="modifyConfig.familyInfo == 2">
+                    <!--<div class="concat" v-if="modifyConfig.familyInfo == 2">
                             <span>已报人数：</span>{{o.signUpUserNum + o.signUpUserFamilyNum + '（家属' +
                             o.signUpUserFamilyNum  + '人）'}}
                         </div>
@@ -643,35 +582,10 @@ layout("/layouts/platform_h5.html"){
                             <span>已报人数：</span>{{o.signUpUserNum + o.familyNumber + '（家属' +
                             o.familyNumber  + '人）'}}
                         </div>-->
-
-                        <div class="concat">
-                            <span>预计费用：</span>
-                            {{o.estimatedCost}}元
-                        </div>
-
-                        <div class="concat">
-                            <span>出行时段：</span>
-                            {{moment(o.playStartTime).format('MM-DD') + ' 至 ' + moment(o.playEndTime).format('MM-DD')}}
-                        </div>
-
-                        <div class="mobile">
-                            <!--<span>出行时间：</span>{{moment(o.playStartTime).format('YYYY-MM-DD')}}-->
-                            <span>组织机构：</span>
-                            {{o.signUpMode === 2 ? '校工会' : o.usUnionName}}
-                        </div>
-
-                        <div class="mobile">
-                            <span>成团人数：</span>
-                            <span :class="['group-count-number', isGrouped(o) ? 'grouped' : 'not-grouped']">
-                                {{getGroupCount(o)}}
-                            </span>/{{getMinimumGroupCount(o)}}人
-                        </div>
-
-                        <!--<div class="mobile">
+                    <!--<span>出行时间：</span>{{moment(o.playStartTime).format('YYYY-MM-DD')}}-->
+                    <!--<div class="mobile">
                             <span>旅&ensp;行&ensp;社：</span>{{o.travelAgencyName}}
                         </div>-->
-                    </div>
-                </div>
 
                 <div v-if="pageForm.theRapyRecuperationType == '2'" class="content-right">
                     <div class="cr-title">
@@ -772,18 +686,43 @@ layout("/layouts/platform_h5.html"){
             v-model="selectLinePopup"
             class="therapy-travel-sheet"
             title="选择出行时间"
-            cancel-text="取消"
             :description="clickRow.lineName"
             close-on-click-action>
         <div class="travel-period-list">
             <div v-for="(item,index) in selectLineList" :key="item.usId || item.id || index" class="travel-period-card">
-                <div class="travel-period-title">出行时间 {{index + 1}}</div>
+                <div class="travel-period-title">
+                    <van-icon name="calendar-o"></van-icon>出行时间 {{index + 1}}
+                    <span class="travel-period-year" v-if="isValidDate(item.playStartTime)">
+                        {{moment(item.playStartTime).format('YYYY')}}<template v-if="isValidDate(item.playEndTime) && moment(item.playStartTime).year() !== moment(item.playEndTime).year()">—{{moment(item.playEndTime).format('YYYY')}}</template>年
+                    </span>
+                </div>
                 <div class="travel-period-date">
-                    {{moment(item.playStartTime).format('YYYY-MM-DD HH:mm')}}
-                    <span v-if="isValidDate(item.playEndTime)">至 {{moment(item.playEndTime).format('YYYY-MM-DD HH:mm')}}</span>
+                    <div class="travel-date-column">
+                        <div class="travel-date-label">出发时间</div>
+                        <template v-if="isValidDate(item.playStartTime)">
+                            <div class="travel-date-time">{{moment(item.playStartTime).format('HH:mm')}}</div>
+                            <div class="travel-date-day">{{moment(item.playStartTime).format('M')}}<small>月</small>{{moment(item.playStartTime).format('D')}}<small>日</small></div>
+                        </template>
+                        <div v-else class="travel-date-time">待定</div>
+                    </div>
+                    <span class="travel-date-arrow" aria-hidden="true">⟶</span>
+                    <div class="travel-date-column travel-date-end">
+                        <div class="travel-date-label">结束时间</div>
+                        <template v-if="isValidDate(item.playEndTime)">
+                            <div class="travel-date-time">{{moment(item.playEndTime).format('HH:mm')}}</div>
+                            <div class="travel-date-day">{{moment(item.playEndTime).format('M')}}<small>月</small>{{moment(item.playEndTime).format('D')}}<small>日</small></div>
+                        </template>
+                        <div v-else class="travel-date-time">待定</div>
+                    </div>
+                </div>
+                <div class="travel-period-meta" v-if="item.playTime">
+                    <span class="travel-deadline-label"><van-icon name="clock-o"></van-icon>报名截止</span>
+                    <span>{{moment(item.signUpEndTime).format('YYYY.MM.DD HH:mm')}}</span>
+                </div>
+                <div class="travel-period-meta" v-if="item.adjustPlayTime">
+                    <span class="travel-deadline-label"><van-icon name="clock-o"></van-icon>调剂报名截止</span>
+                    <span>{{moment(item.adjustSignUpEndTime).format('YYYY.MM.DD HH:mm')}}</span>
                 </div>
-                <div class="travel-period-meta" v-if="item.playTime">{{item.playTime}}</div>
-                <div class="travel-period-meta" v-if="item.adjustPlayTime">{{item.adjustPlayTime}}</div>
                 <div class="travel-period-actions">
                     <van-button @click.stop="openSignUser(item, 'line')" plain type="info">查看人员</van-button>
                     <van-button @click.stop="onSelect(item)" type="info">点击报名</van-button>

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

@@ -184,14 +184,12 @@ layout("/layouts/platform_h5.html"){
     #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-type-selector,
     #app.therapy-mobile .recuperation-filters {
         overflow: hidden;
         border-radius: 12px;
         background: #fff;
         box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
     }
-    #app.therapy-mobile .recuperation-type-selector { margin-bottom: 8px; }
     #app.therapy-mobile .recuperation-toolbar .van-dropdown-menu__bar {
         height: 44px;
         background: #fff;
@@ -214,20 +212,21 @@ layout("/layouts/platform_h5.html"){
         box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
     }
     #app.therapy-mobile .list-card {
-        margin: 4px 10px 14px;
+        margin: 4px 10px 10px;
         border: 0;
         border-radius: 16px;
         box-shadow: 0 8px 24px rgba(49, 85, 145, .06);
     }
-    #app.therapy-mobile .list-card > .content { padding: 16px 14px; }
+    #app.therapy-mobile .list-card > .content { padding: 12px; }
     #app.therapy-mobile .list-card > .content > .van-image {
-        flex: 0 0 30%;
-        width: 30% !important;
+        flex: 0 0 28%;
+        width: 28% !important;
         height: auto !important;
         aspect-ratio: 4 / 3;
         overflow: hidden;
         border-radius: 12px;
     }
+    #app.therapy-mobile .content-right { padding-left: 12px; }
     #app.therapy-mobile .cr-title {
         display: -webkit-box;
         -webkit-box-orient: vertical;
@@ -241,9 +240,9 @@ layout("/layouts/platform_h5.html"){
     #app.therapy-mobile .cr-title > span { font-size: 16px !important; }
     #app.therapy-mobile .concat,
     #app.therapy-mobile .mobile,
-    #app.therapy-mobile .union { font-size: 13px; line-height: 23px; color: #66758a; }
-    #app.therapy-mobile .operateDiv { border-top-color: #f2f4f7; }
-    #app.therapy-mobile .operateDiv .van-button { border-radius: 8px; }
+    #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 .van-list__finished-text { font-size: 14px; color: #8c93a3; }
 </style>
 
@@ -254,16 +253,14 @@ layout("/layouts/platform_h5.html"){
     </van-sticky>
 
     <div class="recuperation-toolbar">
-        <van-dropdown-menu class="recuperation-type-selector" active-color="#1989fa">
-            <van-dropdown-item :value="Number(pageForm.theRapyRecuperationType)"
-                               :options="chooseButton.map(item => ({text: item.label, value: item.value}))"
-                               @change="pageForm.theRapyRecuperationType = $event; doSearch()"></van-dropdown-item>
-        </van-dropdown-menu>
         <van-dropdown-menu class="recuperation-filters" active-color="#1989fa">
             <van-dropdown-item v-model="pageForm.year" :options="yearArray"
                                @change="doSearch"></van-dropdown-item>
             <van-dropdown-item v-model="pageForm.signUpStateId" :options="stateArray"
                                @change="doSearch"></van-dropdown-item>
+            <van-dropdown-item :value="Number(pageForm.theRapyRecuperationType)"
+                               :options="chooseButton.map(item => ({text: item.label, value: item.value}))"
+                               @change="pageForm.theRapyRecuperationType = $event; doSearch()"></van-dropdown-item>
         </van-dropdown-menu>
     </div>