feat: 疗休养优化

src/main/resources/static/assets/staffbenefit/therapyRecuperation/component.js

@@ -1,9 +1,9 @@
 Vue.component('vi-title', {
     props: ['title'],
     template: `
-              <div style="display: flex;flex-direction:row;color: var(--color-primary);font-weight: bolder;margin-bottom: 20px">
-              <div style="width: 5px;height: 24px;background-color: var(--color-primary);border-radius: 2px"></div>
-              <div style="margin-left: 20px;line-height: 24px;font-size: 15px;letter-spacing: 1px">
+              <div class="therapy-title" style="display: flex;flex-direction:row;color: var(--color-primary);font-weight: bolder;margin-bottom: 20px">
+              <div class="therapy-title-marker" style="width: 5px;height: 24px;background-color: var(--color-primary);border-radius: 2px"></div>
+              <div class="therapy-title-text" style="margin-left: 20px;line-height: 24px;font-size: 15px;letter-spacing: 1px">
                 {{ title }}
               </div>
               </div>
@@ -79,7 +79,7 @@ Vue.component('table-tool', {
         this.getColumns()
     },
     template: `
-    <el-row type="flex" justify="space-between" align="middle" style="margin-bottom: 15px">
+    <el-row class="therapy-table-tool" type="flex" justify="space-between" align="middle" style="margin-bottom: 15px">
     
     <div style="display: flex;justify-content: center;align-items: center">
        <vi-title :title="label" style="margin-bottom: 0"></vi-title><slot name="label_end"></slot>

src/main/resources/static/assets/staffbenefit/therapyRecuperation/css/desktop.css

@@ -0,0 +1,189 @@
+.therapy-desktop {
+    font-family: "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
+    font-size: 14px;
+    color: #303133;
+}
+
+.therapy-desktop #app {
+    height: auto;
+    min-height: 100%;
+    overflow: visible;
+    background: transparent;
+}
+
+.therapy-desktop #app .el-card__header {
+    padding: 16px 20px;
+    color: #303133;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.therapy-desktop #app .el-form-item__label {
+    color: #606266;
+    font-weight: 400;
+}
+
+.therapy-desktop #app .search {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px 24px;
+    margin: 0;
+}
+
+.therapy-desktop #app .search .search-item {
+    width: auto;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+}
+
+.therapy-desktop #app .search .search-item-label {
+    flex: 0 0 90px;
+    width: 90px;
+    min-width: 0;
+    margin-right: 12px;
+    color: #606266;
+    text-align: right;
+    line-height: 20px;
+    overflow: visible;
+}
+
+.therapy-desktop #app .search .search-item-option {
+    flex: 1;
+    width: 0;
+    min-width: 0;
+    overflow: visible;
+}
+
+.therapy-desktop #app .search-item-option > .el-input,
+.therapy-desktop #app .search-item-option > .el-select,
+.therapy-desktop #app .search-item-option > .el-date-editor {
+    width: 100%;
+    max-width: 100%;
+}
+
+.therapy-desktop #app .search-item-option > .el-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 0;
+}
+
+.therapy-desktop #app .search .search-query {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: auto;
+    margin: 0;
+    padding-left: 102px;
+    overflow: visible;
+}
+
+.therapy-desktop #app .query-row {
+    height: auto;
+    min-height: 56px;
+    padding: 12px 0;
+}
+
+.therapy-desktop #app .query-row > .query-row-title:empty {
+    display: none;
+}
+
+.therapy-desktop #app .query-row .el-col {
+    min-width: 0;
+    overflow: visible;
+}
+
+.therapy-desktop #app .query-row-content {
+    flex: 1;
+}
+
+.therapy-desktop #app .query-row-content > .el-row {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 12px;
+}
+
+.therapy-desktop #app .query-row-content > .el-row > .el-col {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-right: 24px;
+}
+
+.therapy-desktop #app .query-row-content > .el-row > .el-col > span:first-child {
+    flex: 0 0 90px;
+    color: #606266;
+    text-align: right;
+}
+
+.therapy-desktop #app .query-row-content > .el-row > .el-col > .el-input,
+.therapy-desktop #app .query-row-content > .el-row > .el-col > .el-select {
+    flex: 1;
+    width: 0 !important;
+    min-width: 0;
+}
+
+.therapy-desktop .therapy-table-tool {
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.therapy-desktop .therapy-table-tool > div {
+    min-width: 0;
+    max-width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.therapy-desktop .therapy-title {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    margin-bottom: 16px;
+    color: #303133 !important;
+    font-size: 16px;
+    font-weight: 600 !important;
+    line-height: 24px;
+    overflow-wrap: anywhere;
+}
+
+.therapy-desktop .therapy-title .therapy-title-marker {
+    flex: 0 0 3px;
+    height: 16px !important;
+}
+
+.therapy-desktop .therapy-title .therapy-title-text {
+    margin-left: 10px !important;
+    font-size: 16px !important;
+    letter-spacing: normal !important;
+}
+
+.therapy-desktop #app .chart-title,
+.therapy-desktop #app .col-title {
+    color: #303133;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+@media (max-width: 1199px) {
+    .therapy-desktop #app .search {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 767px) {
+    .therapy-desktop #app .search {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .therapy-desktop #app .query-row-content > .el-row > .el-col {
+        width: 100%;
+        padding-right: 0;
+    }
+
+    .therapy-desktop .therapy-table-tool > div {
+        width: 100%;
+    }
+}

src/main/resources/static/components/staffbenefit/therapyRecuperation/BaseManageInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="panel panel-default mt20" style="border: none">
+    <div class="panel panel-default" style="border: none">
       <div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
         <h3 class="panel-title">
           基地信息

src/main/resources/static/components/staffbenefit/therapyRecuperation/Enrollinfo.vue

@@ -3,7 +3,7 @@
   <div>
     <el-tabs tab-position="top" v-model="activeName" v-loading="loading">
       <el-tab-pane label="报名信息" name="1">
-        <div class="panel panel-default mt20" style="border: none">
+        <div class="panel panel-default" style="border: none">
           <div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
             <h3 class="panel-title">
               本人信息

src/main/resources/static/components/staffbenefit/therapyRecuperation/Guava.vue

@@ -8,7 +8,7 @@
       <template #header>
         <el-row type="flex">
           <el-col :span="12">
-            <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
+            <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v='index'">返回</el-button>
           </el-col>
           <el-col :span="12" class="text-right">
             <slot name="edit_func"></slot>
@@ -22,7 +22,7 @@
 
     <el-card v-show="v==='view'" key="view" shadow="never" class="animated-card">
       <template #header>
-        <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
+        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="v='index'">返回</el-button>
       </template>
       <div :class="{'card_scroll':edit_scroll}">
         <slot name="view"></slot>
@@ -31,7 +31,7 @@
 
     <el-card v-show="v==='public'" key="public" shadow="never" class="animated-card">
       <div slot="header" class="clearfix">
-        <el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="back()">返回
+        <el-button icon="el-icon-back" style="font-size: 16px; padding: 0" type="text" @click="back()">返回
         </el-button>
       </div>
       <div>
@@ -92,7 +92,7 @@ module.exports = {
 <style>
 
 .guava-main-content {
-  padding: 10px 12px;
+  padding: 0;
   background-color: #f6f6f6;
   min-height: 100%;
 }
@@ -114,8 +114,12 @@ module.exports = {
   }
 }
 
-.el-card__header {
-  padding: 5px 20px !important;
+.guava-main-content > .animated-card > .el-card__header {
+  padding: 12px 24px !important;
+}
+
+.guava-main-content > .animated-card > .el-card__body {
+  padding: 20px 24px;
 }
 
 .el-tabs--border-card {
@@ -143,4 +147,4 @@ module.exports = {
   display: none;
 }
 
-</style>
+</style>

src/main/resources/static/components/staffbenefit/therapyRecuperation/LineInfo.vue

@@ -1,16 +1,16 @@
 <template>
-  <div>
-    <div class="panel panel-default mt20" style="border: none">
-      <div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
-        <h3 class="panel-title">
+  <div class="therapy-line-info">
+    <div class="line-info-section">
+      <div class="line-info-section-header">
+        <h3 class="line-info-section-title">
           线路信息
         </h3>
       </div>
-      <el-descriptions :column="2" border class="viewTable">
-        <el-descriptions-item label="年度">{{ viewData.year }}</el-descriptions-item>
-        <el-descriptions-item label="编号">{{ viewData.serialNumber }}</el-descriptions-item>
-        <el-descriptions-item label="线路名称">{{ viewData.lineName }}</el-descriptions-item>
-        <el-descriptions-item label="区域性质">{{ viewData.regionalNature }}</el-descriptions-item>
+      <dl class="line-info-fields">
+        <div class="line-info-field"><dt>年度</dt><dd>{{ viewData.year }}</dd></div>
+        <div class="line-info-field"><dt>编号</dt><dd>{{ viewData.serialNumber }}</dd></div>
+        <div class="line-info-field"><dt>线路名称</dt><dd>{{ viewData.lineName }}</dd></div>
+        <div class="line-info-field"><dt>区域性质</dt><dd>{{ viewData.regionalNature }}</dd></div>
         <!--        <el-descriptions-item label="最少参与教工">{{ viewData.minimumGroupSize }}</el-descriptions-item>-->
         <!-- （校工会创建AND自由模式） OR （分工会创建） -->
         <!--        <template v-if="(viewData.createMode === 2 && viewData.signUpMode === 2 ) || viewData.createMode === 1">-->
@@ -25,12 +25,12 @@
         <!--        <el-descriptions-item label="预计费用（元）">{{ viewData.estimatedCost }}</el-descriptions-item>-->
         <!--        <el-descriptions-item label="预计人数（含家属）">{{ viewData.estimatedFamilyNumbers }}</el-descriptions-item>-->
         <!--        <el-descriptions-item label=""></el-descriptions-item>-->
-      </el-descriptions>
+      </dl>
     </div>
 
-    <div class="panel panel-default mt20" style="border:none" v-if="showTravelTimePeriod">
-      <div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
-        <h3 class="panel-title">
+    <div class="line-info-section" v-if="showTravelTimePeriod">
+      <div class="line-info-section-header">
+        <h3 class="line-info-section-title">
           出行时间段
         </h3>
       </div>
@@ -73,14 +73,15 @@
       </el-descriptions>
     </div>
     -->
-    <div class="panel panel-default mt20" style="border-color: #ebeef5">
-      <div class="panel-heading" style="background: #fafafa;border-color: #ebeef5">
-        <h3 class="panel-title">
+    <div class="line-info-section">
+      <div class="line-info-section-header">
+        <h3 class="line-info-section-title">
           线路内容
         </h3>
       </div>
-      <div class="panel-body">
-        <div v-html="viewData.content"></div>
+      <div class="line-info-content">
+        <div v-html="viewData.content" v-if="viewData.content"></div>
+        <div class="line-info-empty" v-else>暂无线路内容</div>
       </div>
     </div>
   </div>
@@ -134,12 +135,113 @@ module.exports = {
 }
 </script>
 
-<style scoped>
-.viewTable .el-descriptions__table {
-  table-layout: fixed !important;
+<style>
+.therapy-line-info {
+  color: #303133;
+  font-size: 14px;
+  line-height: 1.6;
 }
 
-.viewTable .el-descriptions-item__cell {
-  text-align: center !important;
+.therapy-line-info .line-info-section {
+  margin-bottom: 24px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.therapy-line-info .line-info-section:last-child {
+  margin-bottom: 0;
+}
+
+.therapy-line-info .line-info-section-header {
+  padding: 14px 20px;
+  border-bottom: 1px solid #ebeef5;
+  background: #fafafa;
+}
+
+.therapy-line-info .line-info-section-title {
+  margin: 0;
+  padding-left: 10px;
+  border-left: 3px solid var(--color-primary, #409eff);
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.therapy-line-info .line-info-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 0;
+}
+
+.therapy-line-info .line-info-field {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  min-width: 0;
+}
+
+.therapy-line-info .line-info-field:nth-child(n + 3) {
+  border-top: 1px solid #ebeef5;
+}
+
+.therapy-line-info .line-info-field:nth-child(2n) {
+  border-left: 1px solid #ebeef5;
+}
+
+.therapy-line-info .line-info-field dt,
+.therapy-line-info .line-info-field dd {
+  margin: 0;
+  padding: 14px 16px;
+  line-height: 24px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+.therapy-line-info .line-info-field dt {
+  border-right: 1px solid #ebeef5;
+  background: #fafafa;
+  color: #606266;
+  font-weight: 400;
+}
+
+.therapy-line-info .line-info-content {
+  padding: 20px 24px;
+  color: #303133;
+  line-height: 1.9;
+  overflow-wrap: anywhere;
+  overflow-x: auto;
+}
+
+.therapy-line-info .line-info-content p {
+  margin: 0 0 12px;
+}
+
+.therapy-line-info .line-info-content img,
+.therapy-line-info .line-info-content video {
+  max-width: 100%;
+  height: auto;
+}
+
+.therapy-line-info .line-info-empty {
+  padding: 12px 0;
+  color: #909399;
+  text-align: center;
+}
+
+@media (max-width: 767px) {
+  .therapy-line-info .line-info-fields {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .therapy-line-info .line-info-field + .line-info-field {
+    border-top: 1px solid #ebeef5;
+    border-left: 0;
+  }
+
+  .therapy-line-info .line-info-content {
+    padding: 16px;
+  }
 }
 </style>

src/main/resources/static/components/staffbenefit/therapyRecuperation/XghEnrollInfo.vue

@@ -3,7 +3,7 @@
   <div>
     <el-tabs tab-position="top" v-model="activeName" v-loading="loading">
       <el-tab-pane label="报名信息" name="1">
-        <div class="panel panel-default mt20" style="border: none">
+        <div class="panel panel-default" style="border: none">
           <div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
             <h3 class="panel-title">
               本人信息