From da7fe3a0650038f07ad407562669ec53c008798f Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Fri, 29 Mar 2024 09:11:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=A3=E6=95=99=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/propaganda/index.vue | 613 ++++++++++++++++++++++----
 1 file changed, 517 insertions(+), 96 deletions(-)

diff --git a/src/views/manage/propaganda/index.vue b/src/views/manage/propaganda/index.vue
index d6238c0..96ae538 100644
--- a/src/views/manage/propaganda/index.vue
+++ b/src/views/manage/propaganda/index.vue
@@ -17,8 +17,8 @@
           @change="changecreateTimeStart"
           :picker-options="pickerStartTime"
         >
-        </el-date-picker
-        > -
+        </el-date-picker>
+        -
         <el-date-picker
           v-model="queryParams.createTimeEnd"
           type="date"
@@ -243,7 +243,7 @@
                 size="mini"
                 type="text"
                 icon="el-icon-aim"
-                v-if="scope.row.propagandaStatus=='CREATE_COMPLETE'"
+                v-if="scope.row.propagandaStatus == 'CREATE_COMPLETE'"
                 @click="examine(scope.row)"
                 >审核</el-button
               >
@@ -273,37 +273,47 @@
             </template>
           </el-table-column>
         </el-table>
-      </el-col>
-    </el-row>
-
-    <pagination
+        <pagination
       v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+      </el-col>
+    </el-row>
+
+ 
 
     <!-- 添加或修改患者宣教信息对话框 -->
     <el-dialog
       :title="title"
       :visible.sync="open"
-      width="500px"
+      width="1000px"
       append-to-body
       v-if="open"
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+        :inline="true"
+      >
         <el-form-item label="宣教标题" prop="propagandaTitle">
           <el-input
             v-model="form.propagandaTitle"
             placeholder="请输入宣教标题"
           />
         </el-form-item>
+        <el-form-item label="宣教ID" prop="propagandaCode">
+          <el-input v-model="form.propagandaCode" placeholder="请输入宣教ID" />
+        </el-form-item>
         <el-form-item label="宣教类型" prop="propagandaType">
           <el-select
             v-model="form.propagandaType"
             placeholder="请选择"
-            style="width: 378px"
+            style="width: 206px"
           >
             <el-option
               v-for="item in optionstype"
@@ -315,24 +325,54 @@
           </el-select>
         </el-form-item>
         <el-form-item label="医院名称" prop="hospitalAgencyName">
-          <el-input
+          <el-select
+            v-model="form.hospitalAgencyName"
+            filterable
+            placeholder="请选择医院"
+            style="width: 200px"
+            clearable
+            @change="changehospitalAgency"
+          >
+            <el-option
+              v-for="item in hospitalAgencylist"
+              :key="item.id"
+              :label="item.agencyName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <!-- <el-input
             v-model="form.hospitalAgencyName"
             placeholder="请输入医院名称"
-          />
+          /> -->
         </el-form-item>
-        <!-- <el-form-item label="医生名称" prop="departmentName">
-          <el-input
-            v-model="form.departmentName"
-            placeholder="请输入医生名称"
-          />
-        </el-form-item> -->
+
         <el-form-item label="科室名称" prop="departmentId">
-          <el-button
+     
+          <el-select
+            v-model="form.departmentName"
+            filterable
+            placeholder="请选择医院"
+            style="width: 200px"
+            clearable
+            @change="changeDepartment"
+            @focus="onBlur"
+          >
+            <el-option
+              v-for="item in Departmentdata"
+              :key="item.id"
+              :label="item.departmentName"
+              :value="item.departmentCode"
+            >
+            </el-option>
+          </el-select>
+    
+          <!-- <el-button
             type=""
             v-if="departmentName == '请选择科室'"
             @click="clickinnerVisible()"
             style="
-              width: 379px;
+              width: 206px;
               text-align: left;
               height: 36px;
               color: #c0c4cc;
@@ -345,14 +385,14 @@
             type=""
             v-else
             style="
-              width: 379px;
+              width: 206px;
               text-align: left;
               height: 36px;
               padding-left: -10px;
               overflow: hidden;
             "
             >{{ departmentName }}</el-button
-          >
+          > -->
         </el-form-item>
         <el-form-item label="病种名称" prop="diseaseTypeName">
           <el-button
@@ -360,7 +400,7 @@
             v-if="diseaseTypeName == '请选择病种'"
             @click="clickdisease()"
             style="
-              width: 379px;
+              width: 206px;
               text-align: left;
               height: 36px;
               color: #c0c4cc;
@@ -373,7 +413,7 @@
             type=""
             v-else
             style="
-              width: 379px;
+              width: 206px;
               text-align: left;
               height: 36px;
               padding-left: -10px;
@@ -382,6 +422,23 @@
             >{{ diseaseTypeName }}</el-button
           >
         </el-form-item>
+
+        <el-form-item label="语音播报" prop="voicebroadcast">
+          <el-input
+            v-model="form.voicebroadcast"
+            type="textarea"
+            style="width: 206px"
+            placeholder="请输入语音播报"
+          />
+        </el-form-item>
+        <el-form-item label="宣教正文内容" prop="propagandaContent">
+          <el-input
+            v-model="form.propagandaContent"
+            type="textarea"
+            style="width: 206px"
+            placeholder="请输入宣教正文内容"
+          />
+        </el-form-item>
         <el-form-item label="添加封面" prop="propagandaCoverPath">
           <stationAcatar
             @imgUrl="imgUrl"
@@ -389,19 +446,27 @@
             :type="'propagandaCoverUrl'"
           />
         </el-form-item>
-        <el-form-item label="语音播报" prop="voicebroadcast">
-          <el-input
-            v-model="form.voicebroadcast"
-            type="textarea"
-            placeholder="请输入语音播报"
-          />
-        </el-form-item>
-        <el-form-item label="宣教正文内容" prop="propagandaContent">
-          <el-input
-            v-model="form.propagandaContent"
-            type="textarea"
-            placeholder="请输入宣教正文内容"
+        <el-form-item label="素材选择" prop="imgPath">
+          <div class="propagandaselect" @click="material" v-if="!form.imgPath">
+            <div class="add">+</div>
+          </div>
+          <img
+            @click="material"
+            class="propagandaselect"
+            :src="baseUrl + form.imgPath"
+            alt=""
+            v-else-if="
+              form.imgPath && querymaterial.materialsType == 'IMAGE_TEXT'
+            "
           />
+          <video
+            @click="material"
+            style="height: 200px; width: 300px"
+            v-else-if="form.imgPath && querymaterial.materialsType == 'VIDEO'"
+            ref="myVideo"
+            :src="baseUrl + form.imgPath"
+            controls
+          ></video>
         </el-form-item>
         <el-form-item label="文章摘要" prop="articleSummary">
           <editor v-model="form.articleSummary" :min-height="192" />
@@ -593,7 +658,7 @@
           <audio controls="controls" ref="audio"></audio>
         </div> -->
         <div>
-          <img src="@/assets/system/userinfo.jpg" alt="" />
+          <img :src="baseUrl + formview.propagandaCoverPath" alt="" />
           <div class="know">知识卡片</div>
           <div class="knowlist">
             {{ formview.propagandaContent }}
@@ -602,11 +667,149 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 素材选择弹框 -->
+    <el-dialog
+      title="请选择素材"
+      :visible.sync="dialogmaterial"
+      width="900px"
+      :before-close="materialClose"
+    >
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="68px"
+      >
+        <el-form-item label="素材名称" prop="materialsName">
+          <el-input
+            v-model="querymaterial.materialsName"
+            placeholder="请输入素材名称"
+            clearable
+            @keyup.enter.native="handleQuerysc"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuerysc"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuerysc"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+
+      <el-tabs
+        v-model="querymaterial.materialsType"
+        type="card"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane label="图片" name="IMAGE_TEXT"></el-tab-pane>
+        <el-tab-pane label="视频" name="VIDEO"></el-tab-pane>
+      </el-tabs>
+      <div class="bodytopxj">
+        <div class="bodylist" v-for="item in materialsList" :key="item.id">
+          <!-- <el-checkbox
+            v-model="item.checked"
+            @change="changecheck($event, item)"
+          ></el-checkbox> -->
+          <div @click.stop="viewshow(item)">
+            <img
+              :src="baseUrl + item.materialsFilePath"
+              alt=""
+              v-if="item.materialsFilePath && !item.videoCoverFilePath"
+            />
+            <img
+              :src="baseUrl + item.videoCoverFilePath"
+              alt=""
+              v-if="item.videoCoverFilePath && item.materialsFilePath"
+            />
+            <div class="texttitle">{{ item.materialsName }}</div>
+            <div class="dataliat">
+              创建人/创建时间：<span>{{ item.createBy }}</span
+              >/<span>{{ item.createTime }}</span>
+            </div>
+            <div class="dataliat">素材来源：</div>
+            <!-- <div class="dataliat">标签：暂无</div> -->
+            <div class="dataliat bq">
+              标签：
+
+              <span v-if="item.indications">{{ item.indications }}，</span>
+              <span v-if="item.drugName">{{ item.drugName }}，</span>
+              <span v-if="item.applicableDiseases"
+                >{{ item.applicableDiseases }}，</span
+              >
+              <span v-if="item.surgicalName">{{ item.surgicalName }}，</span>
+              <span v-if="item.inspectionItems"
+                >{{ item.inspectionItems }}，</span
+              >
+              <span v-if="item.checkItems">{{ item.checkItems }}，</span>
+            </div>
+          </div>
+
+          <div class="label" @click.stop="labelchange(item)">加到文章</div>
+        </div>
+      </div>
+
+      <pagination
+        v-show="totalmaterial > 0"
+        :total="totalmaterial"
+        :page.sync="querymaterial.pageNum"
+        :limit.sync="querymaterial.pageSize"
+        @pagination="getmaterial"
+      />
+    </el-dialog>
+    <!-- 预览弹框 -->
+    <el-dialog title="预览" :visible.sync="openview" width="60%">
+      <div class="viewbody">
+        <div class="left">
+          <video
+            v-if="querymaterial.materialsType == 'VIDEO'"
+            ref="myVideo"
+            :src="baseUrl + viewform.materialsFilePath"
+            controls
+          ></video>
+          <img
+            :src="baseUrl + viewform.materialsFilePath"
+            alt=""
+            v-if="querymaterial.materialsType == 'IMAGE_TEXT'"
+          />
+        </div>
+        <div class="right">
+          <div class="nametitle">素材名称</div>
+          <div class="nameitem">{{ viewform.materialsName }}</div>
+          <div class="nametitle">创建人员</div>
+          <div class="nameitem">{{ viewform.createBy }}</div>
+          <div class="nametitle">创建时间</div>
+          <div class="nameitem">{{ viewform.createTime }}</div>
+          <div class="nametitle">素材摘要</div>
+          <div class="nameitem">{{ viewform.materialsAbstract }}</div>
+          <div class="nametitle">素材标签：</div>
+          <div class="nameitem">适用症状：{{ viewform.indications }}</div>
+          <div class="nameitem">药物名称：{{ viewform.drugName }}</div>
+          <div class="nameitem">
+            适用疾病：{{ viewform.applicableDiseases }}
+          </div>
+          <div class="nameitem">手术名称：{{ viewform.surgicalName }}</div>
+          <div class="nameitem">检验项目：{{ viewform.inspectionItems }}</div>
+          <div class="nameitem">检查项目：{{ viewform.checkItems }}</div>
+          <div class="nameitem">人群：{{ viewform.crowName }}</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listPropaganda, getPropaganda, delPropaganda, addPropaganda, updatePropaganda, selectNumByDept, copy, updateStatus } from "@/api/manage/propaganda";
+import { listMaterials } from "@/api/manage/materials";
+import { selectAgencyList, getDepartmentList } from "@/api/manage/selectAgencyList";
+
 import stationAcatar from "../../system/stationAvatar/index.vue";
 import { department, listDisease } from "@/api/manage/script";
 export default {
@@ -644,8 +847,8 @@ export default {
       querydisease: {
         pageNum: 1,
         pageSize: 10,
-        diseaseTypeName:null,
-        departmentId:null,
+        diseaseTypeName: null,
+        departmentId: null,
       },
       listdisease: [],
       diseasetotal: 0,
@@ -694,6 +897,26 @@ export default {
         value: 'REVIEW_FAILED',
         label: '审核不通过'
       }],
+      // 素材弹框
+      dialogmaterial: false,
+      // 素材信息表格数据
+      materialsList: [],
+      // 查询参数
+      querymaterial: {
+        pageNum: 1,
+        pageSize: 10,
+        materialsType: 'IMAGE_TEXT',
+        materialsName: null,
+        materialsStatus: null,
+        createTime: null,
+      },
+      totalmaterial: 0,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      openview: false,
+      viewform: [],
+      //医院list
+      hospitalAgencylist: [],
+      Departmentdata: [],
       value: '',
       // 遮罩层
       // loading: true,
@@ -736,19 +959,25 @@ export default {
         propagandaBarcodePath: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        materialsInfoList: [],
+      },
       // 表单校验
       rules: {
+        hospitalAgencyName: [
+          { required: true, message: "医院名称不能为空", trigger: "blur" }
+        ],
         departmentId: [
           { required: true, message: "科室名称不能为空", trigger: "blur" }
         ],
         propagandaType: [
           { required: true, message: "宣教类型不能为空", trigger: "blur" }
         ],
-        propagandaCoverPath:[
-        { required: true, message: "封面不能为空", trigger: "blur" }
-
-
+        propagandaCoverPath: [
+          { required: true, message: "封面不能为空", trigger: "blur" }
+        ],
+        imgPath: [
+          { required: true, message: "素材选择不能为空", trigger: "blur" }
         ],
       },
     };
@@ -778,6 +1007,7 @@ export default {
   created() {
     this.Departmentlist();
     this.getList();
+    this.selectAgencyinfo();
   },
   watch: {
     name(val) {
@@ -786,6 +1016,104 @@ export default {
     }
   },
   methods: {
+    //获取医院list
+    selectAgencyinfo() {
+      let query = {
+        nodeType: 'HOSPITAL',
+      }
+      selectAgencyList(query).then(res => {
+        this.hospitalAgencylist = res.data
+      })
+    },
+    // 医院
+    changehospitalAgency(e) {
+      this.form.hospitalAgencyName = this.hospitalAgencylist.find(f => f.id == e).agencyName
+      this.form.hospitalAgencyId=e
+
+      // hospitalAgencyId
+
+      this.form.departmentName = ''
+      this.form.departmentId = ''
+      this.diseaseTypeName = '请选择病种'
+      this.form.diseaseTypeId = '';
+      let query = {
+        nodeType: 'DEPARTMENT',
+        agencyId: e,
+      }
+      getDepartmentList(query).then(res => {
+        this.Departmentdata = res.data
+      })
+      console.log(e)
+    },
+    // 科室点击事件
+    changeDepartment(e) {
+      this.form.departmentId=e
+      this.form.departmentName = this.Departmentdata.find(f => f.departmentCode == e).departmentName
+      this.diseaseTypeName = '请选择病种'
+      this.form.diseaseTypeId = '';
+      console.log(this.form)
+
+
+
+    },
+    onBlur(){
+      console.log(this.form,'------------------')
+      if (!this.form.hospitalAgencyName) {
+        this.$modal.msgError("请先选择医院");
+      }
+
+    },
+    // 素材选择
+    material() {
+      this.dialogmaterial = true
+      this.querymaterial.materialsType = 'IMAGE_TEXT',
+        this.getmaterial()
+
+    },
+    // 关闭素材
+    materialClose() {
+      this.dialogmaterial = false
+    },
+    // 复选框点击事件
+    // changecheck(e, item) {
+    //   this.ids = this.materialsList.map(item => item.checked ? item.id : undefined).filter(e => e)
+    //   if (this.ids.length > 0) {
+    //     this.multiple = false
+    //   } else {
+    //     this.multiple = true
+    //   }
+    // },
+    // 图片/视频
+    handleClick(e) {
+      this.querymaterial.materialsType = e.name
+      this.getmaterial()
+    },
+    // 加到文章
+    labelchange(item) {
+      this.form.materialsInfoList = []
+      this.form.imgPath = item.materialsFilePath
+      this.form.materialsInfoList.push(item)
+
+      this.dialogmaterial = false
+      console.log(item)
+
+    },
+    // 预览
+    viewshow(item) {
+      this.openview = true
+      this.viewform = item
+
+    },
+    /** 查询素材信息列表 */
+    getmaterial() {
+      this.loading = true;
+      this.querymaterial.params = {};
+      listMaterials(this.querymaterial).then(response => {
+        this.materialsList = response.rows;
+        this.totalmaterial = response.total;
+        this.loading = false;
+      });
+    },
     // 开始时间
     changecreateTimeStart(e) {
       this.queryParams.createTimeStart = e
@@ -907,7 +1235,7 @@ export default {
     itemdata(item) {
       if (item) {
         this.itemname = item.id
-        this.departmentName = item.departmentName
+        // this.departmentName = item.departmentName
         this.loading = true;
         this.queryParams.departmentId = item.id
         this.getList()
@@ -979,7 +1307,7 @@ export default {
     },
     // 点击病种
     clickdisease() {
-      if (this.departmentName == '请选择科室') {
+      if (!this.form.departmentName) {
         this.$modal.msgError("请先选择科室");
       } else {
         this.diseaseshowst = true;
@@ -1013,13 +1341,17 @@ export default {
     // 表单重置
     reset() {
       this.form = {
+        imgPath: null,
+        materialsInfoList: [],
+        hospitalAgencyId:null,
         id: null,
         patientId: null,
         propagandaId: null,
-        propagandaStatus:null,
+        propagandaStatus: null,
         departmentName: null,
         propagandaTitle: null,
-        departmentId:null,
+        propagandaCode: null,
+        departmentId: null,
         propagandaType: null,
         propagandaCode: null,
         propagandaContent: null,
@@ -1042,6 +1374,16 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    handleQuerysc() {
+      this.querymaterial.pageNum = 1;
+      this.getmaterial();
+    },
+    resetQuerysc() {
+      this.querymaterial.materialsName = null
+      this.handleQuerysc()
+
+    },
+
     /** 重置按钮操作 */
     resetQuery() {
       // this.queryParams.departmentId = null;
@@ -1060,46 +1402,29 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.form.propagandaStatus='CREATE_COMPLETE'
-      if (this.itemname) {
-        this.form.departmentName = this.departmentName
-        this.form.departmentId = this.itemname
-      } else if (this.itemname == null) {
-        this.departmentName = "请选择科室"
-      }
-      else {
-        this.departmentName = "请选择科室"
-      }
+      this.selectAgencyinfo();
+      this.form.propagandaStatus = 'CREATE_COMPLETE'
       this.diseaseTypeName = "请选择病种"
-
+      this.Departmentdata=[]
       this.open = true;
       this.title = "新增宣教";
+      console.log(this.form,'90909090')
     },
     /** 修改按钮操作 */
-    // handleUpdate(row) {
-    //   this.reset();
-    //   const id = row.id || this.ids
-    //   getPropaganda(id).then(response => {
-    //     this.form = response.data;
-    //     this.open = true;
-    //     this.title = "修改患者宣教信息";
-    //   });
-    // },
-    /** 修改按钮操作 */
     handleUpdate(row) {
-      // if (!this.itemname) {
-      //   this.$modal.msgError("请先选择科室");
-      // } else {
-        // this.reset();
-        const id = row.id || this.ids
-        getPropaganda(id).then(response => {
-          this.form = response.data;
-          this.form.suitTaskTypeIds = response.data.suitTaskTypeIds
-          this.diseaseTypeName = response.data.diseaseTypeName
-          this.departmentName = response.data.departmentName
-          this.open = true;
-          this.title = "修改患者宣教信息";
-        });
+
+      this.reset();
+      const id = row.id || this.ids
+      getPropaganda(id).then(response => {
+        this.form = response.data;
+        this.form.suitTaskTypeIds = response.data.suitTaskTypeIds
+        this.diseaseTypeName = response.data.diseaseTypeName
+        // this.form.agencyName = response.data.hospitalAgencyName
+        this.form.imgPath = response.data.materialsInfoList[0].materialsFilePath
+        this.querymaterial.materialsType = response.data.materialsInfoList[0].materialsType
+        this.open = true;
+        this.title = "修改患者宣教信息";
+      });
       // }
     },
     // 上传封面
@@ -1108,11 +1433,13 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      // return
       console.log(this.form)
+
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            this.form.departmentName = this.departmentName
+
             this.form.diseaseTypeName = this.diseaseTypeName
             updatePropaganda(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
@@ -1120,20 +1447,16 @@ export default {
               this.getList();
             });
           } else {
-            if (this.diseaseTypeName == "请选择病种") {
-              this.form.diseaseTypeName == null
-            } else {
-              this.form.diseaseTypeName = this.diseaseTypeName
-            }
-            if (this.itemname) {
+            if(this.diseaseTypeName = '请选择病种'){
+              this.form.diseaseTypeName=null
 
-              this.form.departmentName = this.departmentName
-              this.form.departmentId = this.itemname
-
-            } else {
-              this.form.departmentName = this.departmentName
+            }else{
+            this.form.diseaseTypeName = this.diseaseTypeName
 
             }
+
+            console.log(this.form)
+
             addPropaganda(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -1166,7 +1489,21 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.propagandaselect {
+  width: 100px;
+  height: 100px;
+  background: #fafafa;
+  .add {
+    color: #b6b6b7;
+    font-size: 22px;
+    line-height: 100px;
+    text-align: center; //水平居中
+    // margin: 0 auto;
+  }
+}
+
 .leftpro {
+
   height: 760px;
   overflow: auto;
   .name {
@@ -1230,8 +1567,9 @@ audio {
     margin: 10px 0px 10px 30px;
   }
   img {
-    width: 362px;
-    height: 127px;
+    // width: 100%;
+    // width: 362px;
+    // height: 127px;
     margin: 0px 0px 0px 30px;
   }
   .know {
@@ -1243,4 +1581,87 @@ audio {
     font-size: 16px;
   }
 }
+
+.viewbody {
+  width: 100%;
+  height: 500px;
+  // background: #409eff;
+  display: flex;
+  .left {
+    overflow: auto;
+    width: 77%;
+    height: 500px;
+    // background: #989992;
+    video {
+      height: 500px;
+      width: 100%;
+    }
+  }
+  img {
+    // height: 100%;
+    // width: 100%;
+  }
+  .right {
+    width: 20%;
+    // background: red;
+    margin-left: 30px;
+    .nametitle {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .nameitem {
+      color: #959595;
+      margin: 5px;
+    }
+  }
+}
+.bodytopxj {
+  width: 100%;
+  display: flex;
+  white-space: wrap;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  // align-content: space-between;
+  .bodylist {
+    width: 31%;
+    height: 221px;
+    border: 2px solid #e2e3e5;
+    border-radius: 10px;
+    position: relative;
+    // margin-bottom: 10px;
+    margin: 6px;
+    .texttitle {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-weight: 700;
+      margin: 5px 0px 5px 10px;
+    }
+    //
+    .dataliat {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0px 0px 5px 10px;
+      font-size: 12px;
+      color: #989992;
+    }
+    .bq {
+      width: 155px;
+    }
+    img {
+      width: 100%;
+      height: 100px;
+    }
+    .label {
+      position: absolute;
+      right: 0px;
+      right: 18px;
+      color: #409eff;
+      bottom: 23px;
+      font-size: 13px;
+    }
+  }
+}
 </style>