nsgk_mobile/src/views/sunVillage_info/otherOpen/otherOpenDetail.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
           {{title}}
             <div class="return_btn" @click="back"></div>
         </div>

       <van-form  ref="formData" :readonly="true">
         <div class="list_main">

           <van-field name="otherName" :value="form.otherName" label="公开名称" input-align="right" :border="false" />
           <van-field name="openAt" :value="form.openAt" label="公开时间" input-align="right" :border="false" />

           <van-field name="openContent" label="公开内容" input-align="right" :border="false" />
           <div class="open-content" v-html="form.openContent"></div>

           <van-field
             name="openPic"
             label="公开图片"
             input-align="right"
             :border="false"
           >
           </van-field>
           <CommonUpload name="openPic" :value="form.openPic" multiple :deletable="false" :show-upload="false"/>

           <van-field
             name="openFile"
             label="公开文件"
             input-align="right"
             :border="false"
           >
           </van-field>
           <CommonUpload name="openFile" :value="form.openFile" multiple :deletable="false" :show-upload="false"/>

           <van-field name="remake" :value="form.remark" label="备注" input-align="left" :border="false"/>

         </div>

       </van-form>
     </div>
 </template>
 <script>
   import CommonUpload from "@/components/form/CommonUpload.vue";
 import {getRegistration} from "@/api/sunVillage_info/registration";
   import {getOther} from "@/api/sunVillage_info/otherOpen";
   export default {
     name: "otherOpenDetail",
     components: {CommonUpload},
     data() {
       return {
         form: {
           id: null,
           bookId: null,
           deptId: null,
           deptName: null,
           otherName: null,
           otherType: '1',
           openYear: null,
           openAt: null,
           openContent: null,
           openFile: null,
           openPic: null,
           remark: null,
           createBy: null,
           createTime: null,
           updateBy: null,
           updateTime: null,
         },
         id:'',
         title: '综合公开',
       };
     },
     created() {
        this.id = this.$route.query.id;
        this.getDetail();
     },
     methods: {
       getDetail() {
         if(!this.id)
         {
           this.back();
           return;
         }

         getOther(this.id).then((resp) => {
           this.form = resp.data;
           this.getDicts('other_gk_type').then((resp) => {
             const dict = resp.data.find((x) => x.dictValue == this.form.otherType);
             if(dict)
               this.title = dict.dictLabel;
           });
         });
       },
       back() {
         this.$router.back();
       },
     },
   }
 </script>
 <style scoped lang="scss">
   /deep/ .van-button--primary{
     background: url("../../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
     background-size: 100% 100%;
     border: none;
   }
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }

        .add_btn {
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .titBox{
      display: flex;
      align-items: center;
    }
    .tit{
      font-size: 36px;
      font-weight: bold;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: 8.2em;
    }
    /deep/ .van-cell--required::before{
      left: 0;
    }

}

  .open-content {
    padding: .2rem .3rem;
    max-height: 8rem;
  }
 </style>