ylrz_his_scrm_adminUI/src/views/components/his/articleDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       健康知识详情
      </div>
<div class="contentx" >
  <div class="desct"> 健康知识详情</div>
 <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="封面图" >
                 <img :src="item.imageUrl" style="max-width: 150px;">
            </el-descriptions-item>
            <el-descriptions-item label="视频" :span="2">
                <video v-if="item.videoUrl" :src="item.videoUrl" controls style="max-width: 300px; max-height: 300px;"></video>
                <span v-else>-</span>
            </el-descriptions-item>
            <el-descriptions-item label="分类" >

             <span>{{cateName}}</span>

            </el-descriptions-item>
            <el-descriptions-item label="标题" >
                <span v-if="item!=null">{{item.title}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="浏览量" >
                <span v-if="item!=null">{{item.views}}</span>
            </el-descriptions-item>
              <el-descriptions-item label="是否推荐" >
            <dict-tag v-if="item.isTui!=null" :options="isTuiOptions" :value="item.isTui"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否最新" >
                   <dict-tag :options="isNewsOptions" :value="item.isNews"/>
            </el-descriptions-item>
            <el-descriptions-item label="发布时间"  >
                <span v-if="item!=null">{{item.publishTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间" >
                <span v-if="item!=null">{{item.updateTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="内容" >
                <span v-html="item.contents"></span>
            </el-descriptions-item>
        </el-descriptions>

 </div>
    </div>
</template>

<script>
import { listArticle, getArticle, delArticle, addArticle, updateArticle, exportArticle } from "@/api/his/article";
import { listCate} from "@/api/his/articleCate";
  export default {
    name: "articledetails",
    props:["data"],
    data() {
      return {
        cateName:null,
        // 是否推荐字典
        isTuiOptions: [],
        // 是否最新字典
        isNewsOptions: [],
        item:null,
      }
    },
    created() {
     this.getDicts("sys_company_or").then(response => {
         this.isTuiOptions = response.data;
         this.isNewsOptions = response.data;
       });
    },
    methods: {
      getDetails(orderId,name) {
        this.item=null;
        this.cateName=name;
        getArticle(orderId).then(response => {
          this.item = response.data;
        });
      },
    }
  }
</script>
<style>

  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>