From 1ebb24476575f9b144899104451c32fa0abddad7 Mon Sep 17 00:00:00 2001
From: xiangcongshuai <xiangcongshuai@supervision.ltd>
Date: Tue, 11 Jun 2024 17:42:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=97=85=E4=BE=8B=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/caseManagement.ts          |   2 +-
 src/views/caseManagement/list/add.vue         | 229 +++++++++++++-
 .../caseManagement/list/details/index.vue     |   6 +-
 .../edit/compontents/ElectronicCase/index.vue |  39 +++
 src/views/caseManagement/list/edit/index.vue  |  87 ++++++
 src/views/caseManagement/list/index.vue       |   6 +-
 src/views/digitalHuman/addEdit.vue            | 290 ++++++++++++++++++
 src/views/digitalHuman/index.vue              | 133 ++++++++
 8 files changed, 780 insertions(+), 12 deletions(-)
 create mode 100644 src/views/caseManagement/list/edit/compontents/ElectronicCase/index.vue
 create mode 100644 src/views/caseManagement/list/edit/index.vue
 create mode 100644 src/views/digitalHuman/addEdit.vue

diff --git a/src/router/modules/caseManagement.ts b/src/router/modules/caseManagement.ts
index b432624..11d828d 100644
--- a/src/router/modules/caseManagement.ts
+++ b/src/router/modules/caseManagement.ts
@@ -95,7 +95,7 @@ export default {
         {
           path: "/caseManagement/edit",
           name: "caseManagementEdit",
-          component: () => import("@/views/caseManagement/list/edit.vue"),
+          component: () => import("@/views/caseManagement/list/edit/index.vue"),
           meta: {
             title: "编辑病历",
             showLink: false,
diff --git a/src/views/caseManagement/list/add.vue b/src/views/caseManagement/list/add.vue
index ad3a210..0ce053e 100644
--- a/src/views/caseManagement/list/add.vue
+++ b/src/views/caseManagement/list/add.vue
@@ -1,15 +1,232 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
-import MainView from "./page/index.vue";
-import { useCaseStoreHooks } from "@/store/modules/caseManagement";
+import { nextTick, reactive, ref } from "vue";
+import { FormInstance } from "element-plus";
+import { message } from "@/utils/message";
+// import { useRoute } from "vue-router";
+defineOptions({
+  name: "AddEdit"
+});
+const isEditFlag = ref(false);
+const diseaseList = ref([]);
+const id = ref("");
+const dialogVisible = ref(false);
 
-onMounted(() => {
-  useCaseStoreHooks().changeIsEditFlag(false);
+const formData = reactive({
+  patientGender: "",
+  directoryDesc: "",
+  patientSelfDesc: "",
+  patientAge: "",
+  diseaseId: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const rules = {
+  patientGender: [{ required: true, message: "请选择", trigger: "change" }],
+  directoryDesc: [{ required: true, message: "请输入", trigger: "change" }]
+};
+defineExpose({
+  async open(item) {
+    dialogVisible.value = true;
+    await nextTick();
+    if (item) {
+      for (const key in item) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (formData.hasOwnProperty(key)) {
+          formData[key] = item[key];
+        }
+      }
+      isEditFlag.value = true;
+      id.value = item.id;
+    }
+  }
 });
+const resetForm = () => {
+  ruleFormRef.value.resetFields();
+};
+const closeDialog = () => {
+  dialogVisible.value = false;
+  isEditFlag.value = false;
+  resetForm();
+};
+const emit = defineEmits(["update"]);
+const reset = () => {
+  ruleFormRef.value.resetFields();
+};
+
+const save = (formEl: FormInstance | undefined) => {
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+      // formData.result = refWangEditor.value.valueHtml;
+      // const params = {
+      //   ...formData,
+      //   result: refWangEditor.value.valueHtml,
+      //   diseaseId: route.query.id
+      // };
+      if (isEditFlag.value) {
+        // const res: any = await updateSupportInspect({
+        //   ...params,
+        //   id: id.value
+        // });
+        if (res.code === 200) {
+          message("修改成功", { type: "success" });
+          id.value = "";
+        }
+      } else {
+        // const res: any = await addSupportInspect(params);
+        // if (res.code === 200) {
+        //   message("新增成功", { type: "success" });
+        // }
+      }
+      dialogVisible.value = false;
+      emit("update");
+    } else {
+      return fields;
+    }
+  });
+};
 </script>
 
 <template>
   <div>
-    <MainView />
+    <el-drawer
+      :size="650"
+      append-to-body
+      v-model="dialogVisible"
+      :show-close="false"
+      :with-header="false"
+      :before-close="closeDialog"
+      custom-class="AddEdit"
+    >
+      <div class="AddEdit">
+        <div class="header-title">
+          <div class="tip" />
+          <span>新建病历</span>
+        </div>
+        <div class="line" />
+        <el-form
+          ref="ruleFormRef"
+          :model="formData"
+          :rules="rules"
+          label-width="80px"
+        >
+          <el-form-item label="姓名" prop="directoryDesc">
+            <el-input
+              size="large"
+              placeholder="请输入"
+              v-model="formData.directoryDesc"
+            />
+          </el-form-item>
+          <el-form-item label="性别" prop="patientGender">
+            <el-radio-group size="large" v-model="formData.patientGender">
+              <el-radio label="男" />
+              <el-radio label="女" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="主诉" prop="patientSelfDesc">
+            <el-input size="large" v-model="formData.patientSelfDesc" />
+          </el-form-item>
+          <el-form-item label="年龄" prop="patientAge">
+            <el-input
+              size="large"
+              maxLength="3"
+              v-model="formData.patientAge"
+            />
+          </el-form-item>
+          <el-form-item label="初步诊断:" prop="diseaseId">
+            <el-select
+              size="large"
+              filterable
+              clearable
+              v-model="formData.diseaseId"
+              class="form_select"
+              style="width: 100%"
+              placeholder="请选择初步诊断"
+            >
+              <el-option
+                v-for="item in diseaseList"
+                :key="item.id"
+                :label="item.diseaseName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="footer_btn">
+          <div class="reset" @click="reset()">重置</div>
+          <div class="main" @click="save(ruleFormRef)">确定</div>
+        </div>
+      </template>
+    </el-drawer>
   </div>
 </template>
+<style lang="scss" scoped>
+.AddEdit {
+  :deep(.el-form-item__label) {
+    font-weight: 400;
+    color: #333;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    // border-left: 6px solid #4287ff;
+
+    font-size: 20px;
+    font-weight: bold;
+    color: #2b3f54;
+
+    .tip {
+      width: 6px;
+      height: 20px;
+      margin-right: 10px;
+      line-height: 20px;
+      background: #4287ff;
+    }
+  }
+
+  .line {
+    position: relative;
+    left: -20px;
+    width: 605px;
+    height: 1px;
+    margin: 24px 0;
+    background: rgb(91 139 255 / 30%);
+  }
+
+  .footer_btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 16px;
+
+    .reset {
+      width: 188px;
+      height: 48px;
+      margin-right: 24px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 48px;
+      color: #4287ff;
+      text-align: center;
+      cursor: pointer;
+      background: #fff;
+      border: 1px solid #4287ff;
+      border-radius: 6px;
+    }
+
+    .main {
+      width: 188px;
+      height: 48px;
+      font-size: 16px;
+      line-height: 48px;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+      background: #4287ff;
+      border: 1px solid #4287ff;
+      border-radius: 6px;
+    }
+  }
+}
+</style>
diff --git a/src/views/caseManagement/list/details/index.vue b/src/views/caseManagement/list/details/index.vue
index 77932a2..d01b5bc 100644
--- a/src/views/caseManagement/list/details/index.vue
+++ b/src/views/caseManagement/list/details/index.vue
@@ -35,7 +35,7 @@ const columns: TableColumnList = [
   },
   {
     label: "回复",
-    prop: "defaultAnswer"
+    prop: "medicalRecAnswer"
   }
 ];
 const planColumns: TableColumnList = [
@@ -117,7 +117,7 @@ onMounted(() => {
         </div>
       </div>
       <pure-table
-        style="width: 100%; max-height: 500px"
+        style="width: 100%; height: 500px"
         align-whole="center"
         showOverflowTooltip
         adaptive
@@ -137,7 +137,7 @@ onMounted(() => {
         </div>
       </div>
       <pure-table
-        style="width: 100%; max-height: 500px"
+        style="width: 100%; height: 500px"
         align-whole="center"
         showOverflowTooltip
         adaptive
diff --git a/src/views/caseManagement/list/edit/compontents/ElectronicCase/index.vue b/src/views/caseManagement/list/edit/compontents/ElectronicCase/index.vue
new file mode 100644
index 0000000..936377e
--- /dev/null
+++ b/src/views/caseManagement/list/edit/compontents/ElectronicCase/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="ElectronicCase">
+    <div class="header">
+      <div class="header_left">
+        <span>电子病历</span>
+      </div>
+      <div class="header_right">
+        <el-button size="large" class="btn" @click="add" type="primary"
+          >添加病例项</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.ElectronicCase {
+  flex: 1;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 88px;
+    padding: 0 40px;
+    border-bottom: 1px solid #d9d9d9;
+
+    .header_left {
+      font-size: 20px;
+      color: #333;
+
+      span {
+        padding-left: 8px;
+        border-left: 6px solid #4287ff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/caseManagement/list/edit/index.vue b/src/views/caseManagement/list/edit/index.vue
new file mode 100644
index 0000000..bf44147
--- /dev/null
+++ b/src/views/caseManagement/list/edit/index.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import ElectronicCase from "./compontents/ElectronicCase/index.vue";
+import { ref } from "vue";
+const activedIndex = ref(0);
+const navList = ref([
+  {
+    name: "电子病历"
+  },
+  {
+    name: "临床问诊"
+  },
+  {
+    name: "临床诊断"
+  },
+  {
+    name: "诊断依据"
+  },
+  {
+    name: "处置计划"
+  }
+]);
+</script>
+
+<template>
+  <div class="editCase main-table">
+    <div class="editCase_nav">
+      <div
+        class="editCase_nav_item"
+        :class="[activedIndex === index ? 'actived' : '']"
+        v-for="(item, index) in navList"
+        :key="index"
+      >
+        <div class="line" />
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+    <ElectronicCase v-if="activedIndex === 0" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.editCase {
+  display: flex;
+  flex-direction: row !important;
+  width: 100%;
+  padding: 0;
+
+  .editCase_nav {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 168px;
+    // justify-content: center;
+    height: 100%;
+    padding-top: 24px;
+    border-right: 1px solid #d9d9d9;
+
+    .editCase_nav_item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 120px;
+      height: 53px;
+      font-size: 16px;
+      color: #999;
+      cursor: pointer;
+      border-radius: 8px;
+
+      .line {
+        width: 4px;
+        height: 17px;
+        margin-right: 12px;
+        background: #999;
+        border-radius: 2px;
+      }
+    }
+
+    .actived {
+      color: #4287ff;
+      background: linear-gradient(90deg, rgb(66 135 255 / 10%) 0%, #fff 100%);
+
+      .line {
+        background: #4287ff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/caseManagement/list/index.vue b/src/views/caseManagement/list/index.vue
index a4cecd8..79c14f1 100644
--- a/src/views/caseManagement/list/index.vue
+++ b/src/views/caseManagement/list/index.vue
@@ -9,6 +9,7 @@ import {
 import { onMounted } from "vue";
 import { clearObject } from "@/utils/auth";
 import { useCaseStoreHooks } from "@/store/modules/caseManagement";
+import AddEdit from "./add.vue";
 
 defineOptions({
   name: "CaseManagement"
@@ -23,6 +24,7 @@ const seachForm = reactive({
   selfDescKeyword: ""
 });
 const diseaseList = ref([]);
+const AddEditRef = ref();
 const pagination = reactive<PaginationProps>({
   total: 0,
   pageSize: 10,
@@ -90,8 +92,7 @@ const reset = () => {
   search();
 };
 const add = () => {
-  router.push("/caseManagement/add");
-  useCaseStoreHooks().changeIsEditFlag(false);
+  AddEditRef.value.open();
 };
 const getDiseaseListByDropList = async () => {
   const res: any = await queryDiseaseListByDropList();
@@ -228,5 +229,6 @@ onMounted(() => {
         </template>
       </pure-table>
     </div>
+    <AddEdit ref="AddEditRef" />
   </div>
 </template>
diff --git a/src/views/digitalHuman/addEdit.vue b/src/views/digitalHuman/addEdit.vue
new file mode 100644
index 0000000..1df5364
--- /dev/null
+++ b/src/views/digitalHuman/addEdit.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { nextTick, reactive, ref } from "vue";
+import { ElMessage, FormInstance, UploadProps } from "element-plus";
+import { Plus, Delete } from "@element-plus/icons-vue";
+import { message } from "@/utils/message";
+// import { useRoute } from "vue-router";
+import { getToken } from "@/utils/auth";
+defineOptions({
+  name: "AddEdit"
+});
+const fileList = ref([]);
+
+const isEditFlag = ref(false);
+const id = ref("");
+const dialogVisible = ref(false);
+
+const formData = reactive({
+  iconBase64: "",
+  directoryDesc: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const rules = {
+  iconBase64: [{ required: true, message: "请选择", trigger: "change" }],
+  directoryDesc: [{ required: true, message: "请输入", trigger: "change" }]
+};
+const handleSuccess: UploadProps["onSuccess"] = response => {
+  formData.iconBase64 = `/virtual-patient-manage/fileManage/downloadFile?fileId=${response.data.id}`;
+};
+const handleRemove = () => {
+  formData.iconBase64 = "";
+  fileList.value = [];
+};
+const beforeUpload: UploadProps["beforeUpload"] = async rawFile => {
+  //上传图片格式和大小要求  png|jpg  10M
+  if (
+    rawFile.type !== "image/png" ||
+    rawFile.type == "image/jpg" ||
+    rawFile.type == "image/jpeg"
+  ) {
+    ElMessage.error("上传文件格式务必PNG|JPG|JPEG");
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error("图片大小不能大于10M");
+    return false;
+  }
+
+  return true;
+};
+defineExpose({
+  async open(item) {
+    dialogVisible.value = true;
+    await nextTick();
+    if (item) {
+      for (const key in item) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (formData.hasOwnProperty(key)) {
+          formData[key] = item[key];
+        }
+      }
+      isEditFlag.value = true;
+      id.value = item.id;
+    }
+  }
+});
+const resetForm = () => {
+  ruleFormRef.value.resetFields();
+};
+const closeDialog = () => {
+  dialogVisible.value = false;
+  isEditFlag.value = false;
+  resetForm();
+};
+const emit = defineEmits(["update"]);
+const reset = () => {
+  if (isEditFlag.value) {
+    ruleFormRef.value.resetFields([
+      "diagnosticCriteria",
+      "diagnosisAssessmentFlag",
+      "requireCheckFlag",
+      "expectedDiagnosisResult",
+      "normalResult"
+    ]);
+  } else {
+    ruleFormRef.value.resetFields();
+  }
+
+  // refWangEditor.value.valueHtml = "";
+};
+
+const save = (formEl: FormInstance | undefined) => {
+  formEl.validate(async (valid, fields) => {
+    if (valid) {
+      // formData.result = refWangEditor.value.valueHtml;
+      // const params = {
+      //   ...formData,
+      //   result: refWangEditor.value.valueHtml,
+      //   diseaseId: route.query.id
+      // };
+      if (isEditFlag.value) {
+        // const res: any = await updateSupportInspect({
+        //   ...params,
+        //   id: id.value
+        // });
+        if (res.code === 200) {
+          message("修改成功", { type: "success" });
+          id.value = "";
+        }
+      } else {
+        // const res: any = await addSupportInspect(params);
+        // if (res.code === 200) {
+        //   message("新增成功", { type: "success" });
+        // }
+      }
+      dialogVisible.value = false;
+      emit("update");
+    } else {
+      return fields;
+    }
+  });
+};
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      :size="800"
+      append-to-body
+      v-model="dialogVisible"
+      :show-close="false"
+      :with-header="false"
+      :before-close="closeDialog"
+      custom-class="AddEdit"
+    >
+      <div class="AddEdit">
+        <div class="header-title">
+          <div class="tip" />
+          <span>生成数字人</span>
+        </div>
+        <div class="line" />
+        <el-form
+          ref="ruleFormRef"
+          :model="formData"
+          :rules="rules"
+          label-width="120px"
+        >
+          <el-form-item label="选择数字人形象" prop="code">
+            <div class="upload_img">
+              <el-upload
+                :limit="1"
+                :headers="{
+                  token: getToken()
+                }"
+                action="/virtual-patient-manage/fileManage/uploadFile"
+                list-type="picture-card"
+                :file-list="fileList"
+                :on-success="handleSuccess"
+                :before-upload="beforeUpload"
+                :class="{ hide: formData.iconBase64 !== '' }"
+              >
+                <el-icon><Plus /></el-icon>
+
+                <template #file="{ file }">
+                  <div>
+                    <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="formData.iconBase64"
+                      alt=""
+                    />
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <el-icon><Delete /></el-icon>
+                      </span>
+                    </span>
+                  </div>
+                </template>
+              </el-upload>
+              <div class="tip">仅支持JPG、PNG格式图片，尺寸420*746</div>
+            </div>
+          </el-form-item>
+          <el-form-item label="说明 " prop="directoryDesc">
+            <el-input
+              :rows="4"
+              :maxLength="500"
+              type="textarea"
+              placeholder="请输入"
+              v-model="formData.directoryDesc"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <div class="footer_btn">
+          <div class="reset" @click="reset()">重置</div>
+          <div class="main" @click="save(ruleFormRef)">确定</div>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+<style lang="scss" scoped>
+.AddEdit {
+  :deep(.el-form-item__label) {
+    font-weight: 400;
+    color: #333;
+  }
+
+  :deep(.hide .el-upload--picture-card) {
+    display: none;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    // border-left: 6px solid #4287ff;
+
+    font-size: 20px;
+    font-weight: bold;
+    color: #2b3f54;
+
+    .tip {
+      width: 6px;
+      height: 20px;
+      margin-right: 10px;
+      line-height: 20px;
+      background: #4287ff;
+    }
+  }
+
+  .line {
+    position: relative;
+    left: -20px;
+    width: 755px;
+    height: 1px;
+    margin: 24px 0;
+    background: rgb(91 139 255 / 30%);
+  }
+
+  .footer_btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 16px;
+
+    .reset {
+      width: 188px;
+      height: 48px;
+      margin-right: 24px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 48px;
+      color: #4287ff;
+      text-align: center;
+      cursor: pointer;
+      background: #fff;
+      border: 1px solid #4287ff;
+      border-radius: 6px;
+    }
+
+    .main {
+      width: 188px;
+      height: 48px;
+      font-size: 16px;
+      line-height: 48px;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+      background: #4287ff;
+      border: 1px solid #4287ff;
+      border-radius: 6px;
+    }
+  }
+
+  .upload_img {
+    position: relative;
+    width: 100%;
+
+    .tip {
+      position: absolute;
+      top: 50px;
+      left: 200px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #b4b4b4;
+    }
+  }
+}
+</style>
diff --git a/src/views/digitalHuman/index.vue b/src/views/digitalHuman/index.vue
index e69de29..b3b5daa 100644
--- a/src/views/digitalHuman/index.vue
+++ b/src/views/digitalHuman/index.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import AddEdit from "./addEdit.vue";
+import { Edit, Delete } from "@element-plus/icons-vue";
+import { downLoadUrl } from "@/utils/auth";
+const dataList = ref([]);
+const activedId = ref("");
+const AddEditRef = ref();
+const add = () => {
+  AddEditRef.value.open();
+};
+
+const onMouseenter = id => {
+  activedId.value = id;
+};
+const onMouseleave = () => {
+  activedId.value = "";
+};
+const handleCommand = async (e: any) => {
+  if (e === "edit") {
+    // EditMaterialsRef.value.open(0, item);
+  } else {
+    // const res: any = await deleteMaterial({
+    //   id: item.id
+    // });
+    // if (res.code === 200) {
+    //   message("删除成功", { type: "success" });
+    //   getData();
+    // }
+  }
+};
+const getData = () => {};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="digitalHuman main-table">
+    <div class="main-table-title">
+      <div class="title">
+        <div class="line" />
+        <span> 数字人生成器 </span>
+      </div>
+    </div>
+    <el-row class="mb-6">
+      <el-button size="large" class="btn" @click="add" type="primary"
+        >生成数字人</el-button
+      >
+    </el-row>
+    <div v-show="dataList.length > 0" class="img_card_list">
+      <div
+        class="img_card_item"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @mouseenter.prevent="onMouseenter(item.id)"
+        @mouseleave.prevent="onMouseleave()"
+      >
+        <div class="folder_img">
+          <img :src="downLoadUrl(item.fileResourceId)" alt="" />
+        </div>
+        <div :title="item.materialName" class="name">
+          {{ item.materialName }}
+        </div>
+        <el-dropdown
+          @command="e => handleCommand(e, item)"
+          trigger="click"
+          class="icon"
+        >
+          <moreIcon v-show="activedId === item.id" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="edit" :icon="Edit">
+                编辑
+              </el-dropdown-item>
+              <el-dropdown-item command="del" :icon="Delete">
+                删除
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <AddEdit ref="AddEditRef" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.digitalHuman {
+  .img_card_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .img_card_item {
+      position: relative;
+      width: 190px;
+      height: 230px;
+      margin-right: 16px;
+      margin-bottom: 16px;
+      cursor: pointer;
+      background: #fff;
+      border-radius: 0 0 12px 12px;
+      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
+
+      .icon {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+
+      .folder_img {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 190px;
+        background: #f5f5f5;
+
+        img {
+          width: 130px;
+          height: 130px;
+        }
+      }
+
+      .name {
+        width: 200px;
+        padding: 8px 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>