|  |  | 
 |  |  | <template> | 
 |  |  |   <div>患者回访</div> | 
 |  |  |   <div class="app-container"> | 
 |  |  |     <el-row :gutter="20"> | 
 |  |  |       <!--用户数据--> | 
 |  |  |       <el-col :span="24" :xs="24"> | 
 |  |  |         <el-form | 
 |  |  |           :model="queryParams" | 
 |  |  |           ref="queryForm" | 
 |  |  |           size="small" | 
 |  |  |           :inline="true" | 
 |  |  |           v-show="showSearch" | 
 |  |  |           label-width="98px" | 
 |  |  |         > | 
 |  |  |           <el-form-item label="姓名" | 
 |  |  |           width="100" prop="name"> | 
 |  |  |             <el-input | 
 |  |  |               v-model="queryParams.name" | 
 |  |  |               placeholder="请输入姓名" | 
 |  |  |               clearable | 
 |  |  |               style="width: 200px" | 
 |  |  |               @keyup.enter.native="handleQuery" | 
 |  |  |             /> | 
 |  |  |           </el-form-item> | 
 |  |  |  | 
 |  |  |           <!-- <el-form-item label="患者范围" prop="tagId"> | 
 |  |  |             <el-select | 
 |  |  |               v-model="queryParams.searchscope" | 
 |  |  |               placeholder="请选择" | 
 |  |  |             > | 
 |  |  |               <el-option | 
 |  |  |                 v-for="item in Patientrange" | 
 |  |  |                 :key="item.value" | 
 |  |  |                 :label="item.label" | 
 |  |  |                 :value="item.value" | 
 |  |  |               > | 
 |  |  |               </el-option> | 
 |  |  |             </el-select> | 
 |  |  |           </el-form-item> --> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |           <el-row> | 
 |  |  |  | 
 |  |  |             <el-form-item> | 
 |  |  |               <el-button | 
 |  |  |                 type="primary" | 
 |  |  |                 icon="el-icon-search" | 
 |  |  |                 size="medium" | 
 |  |  |                 @click="handleQuery" | 
 |  |  |                 >搜索</el-button | 
 |  |  |               > | 
 |  |  |               <el-button | 
 |  |  |                 icon="el-icon-refresh" | 
 |  |  |                 size="medium" | 
 |  |  |                 @click="resetQuery" | 
 |  |  |                 >重置</el-button | 
 |  |  |               > | 
 |  |  |             </el-form-item> | 
 |  |  |           </el-row> | 
 |  |  |         </el-form> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |         <el-table | 
 |  |  |           v-loading="loading" | 
 |  |  |           :data="userList" | 
 |  |  |           @selection-change="handleSelectionChange" | 
 |  |  |         > | 
 |  |  |           <el-table-column type="selection" width="50" align="center" /> | 
 |  |  |           <!-- <el-table-column | 
 |  |  |             label="序号" | 
 |  |  |             align="center" | 
 |  |  |             key="id" | 
 |  |  |             prop="id" | 
 |  |  |           /> --> | 
 |  |  |           <el-table-column | 
 |  |  |             fixed | 
 |  |  |             label="姓名" | 
 |  |  |           width="100" | 
 |  |  |             align="center" | 
 |  |  |             key="name" | 
 |  |  |             prop="name" | 
 |  |  |           /> | 
 |  |  |           <el-table-column label="性别"width="100" align="center" key="sex" prop="sex"> | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             label="年龄" | 
 |  |  |             align="center" | 
 |  |  |             key="age" | 
 |  |  |             prop="age" | 
 |  |  |             width="60" | 
 |  |  |           /> | 
 |  |  |           <el-table-column | 
 |  |  |             label="出生年月" | 
 |  |  |             align="center" | 
 |  |  |             key="birthdate" | 
 |  |  |             prop="birthdate" | 
 |  |  |             width="160" | 
 |  |  |           > | 
 |  |  |           </el-table-column> | 
 |  |  |  | 
 |  |  |           <!-- <el-table-column | 
 |  |  |             label="过滤类型" | 
 |  |  |             align="center" | 
 |  |  |             key="notrequiredreason" | 
 |  |  |             prop="notrequiredreason" | 
 |  |  |             width="120" | 
 |  |  |           > | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <dict-tag | 
 |  |  |                 :options="dict.type.futter_patient" | 
 |  |  |                 :value="scope.row.notrequiredreason" | 
 |  |  |               /> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> --> | 
 |  |  |           <el-table-column | 
 |  |  |             label="过滤原因" | 
 |  |  |             align="center" | 
 |  |  |             key="notrequiredreason" | 
 |  |  |             prop="notrequiredreason" | 
 |  |  |             width="190" | 
 |  |  |           /> | 
 |  |  |           <el-table-column | 
 |  |  |             label="居住地" | 
 |  |  |             align="center" | 
 |  |  |             key="placeOfResidence" | 
 |  |  |             prop="placeOfResidence" | 
 |  |  |             width="180" | 
 |  |  |             :show-overflow-tooltip="true" | 
 |  |  |           /> | 
 |  |  |           <el-table-column | 
 |  |  |             label="患者标签" | 
 |  |  |             align="center" | 
 |  |  |             key="tagList" | 
 |  |  |             prop="tagList" | 
 |  |  |             width="160" | 
 |  |  |             :show-overflow-tooltip="true" | 
 |  |  |           > | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <span v-for="item in scope.row.tagList">{{ item.tagname }} </span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             label="证件号码" | 
 |  |  |             align="center" | 
 |  |  |             key="idcardno" | 
 |  |  |             prop="idcardno" | 
 |  |  |             width="190" | 
 |  |  |           /> | 
 |  |  |  | 
 |  |  |           <el-table-column | 
 |  |  |             label="联系方式" | 
 |  |  |             align="center" | 
 |  |  |             key="telcode" | 
 |  |  |             prop="telcode" | 
 |  |  |             width="120" | 
 |  |  |           /> | 
 |  |  |           <el-table-column | 
 |  |  |             label="建档日期" | 
 |  |  |             align="center" | 
 |  |  |             key="createTime" | 
 |  |  |             prop="createTime" | 
 |  |  |             width="160" | 
 |  |  |           > | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <span>{{ formatTime(scope.row.createTime) }}</span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |  | 
 |  |  |           <el-table-column | 
 |  |  |             label="操作" | 
 |  |  |             align="center" | 
 |  |  |             fixed="right" | 
 |  |  |             width="190" | 
 |  |  |             class-name="small-padding fixed-width" | 
 |  |  |           > | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <el-button | 
 |  |  |                 size="medium" | 
 |  |  |                 type="text" | 
 |  |  |                 @click=" | 
 |  |  |                   $router.push({ | 
 |  |  |                     path: '/patient/patient/profile/', | 
 |  |  |                     query: { id: scope.row.id }, | 
 |  |  |                   }) | 
 |  |  |                 " | 
 |  |  |  | 
 |  |  |                 ><span class="button-textsc" | 
 |  |  |                   ><i class="el-icon-zoom-in"></i>查看</span | 
 |  |  |                 ></el-button | 
 |  |  |               > | 
 |  |  |               <el-button | 
 |  |  |                 size="medium" | 
 |  |  |                 type="text" | 
 |  |  |                 @click="handleDelete(scope.row)" | 
 |  |  |  | 
 |  |  |                 ><span class="button-textxga" | 
 |  |  |                   ><i class="el-icon-edit"></i>取消过滤</span | 
 |  |  |                 ></el-button | 
 |  |  |               > | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |         </el-table> | 
 |  |  |  | 
 |  |  |         <pagination | 
 |  |  |           v-show="total > 0" | 
 |  |  |           :total="total" | 
 |  |  |           :page.sync="queryParams.pageNum" | 
 |  |  |           :limit.sync="queryParams.pageSize" | 
 |  |  |           @pagination="getList" | 
 |  |  |         /> | 
 |  |  |       </el-col> | 
 |  |  |     </el-row> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import { delUser } from "@/api/system/user"; | 
 |  |  |  | 
 |  |  | import { | 
 |  |  |   patarchivelist, | 
 |  |  |   alterpatient, | 
 |  |  |   addfiltration, | 
 |  |  |   particularpatient, | 
 |  |  |   delfiltration, | 
 |  |  |   Exporterrorpatient, | 
 |  |  |   toleadpatient, | 
 |  |  | } from "@/api/patient/homepage"; | 
 |  |  | import { listtag } from "@/api/system/label"; | 
 |  |  | import { getToken } from "@/utils/auth"; | 
 |  |  | import Treeselect from "@riophae/vue-treeselect"; | 
 |  |  | import store from "@/store"; | 
 |  |  | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; | 
 |  |  |  | 
 |  |  | export default { | 
 |  |  |   name: "Userhuanze", | 
 |  |  |   dicts: ["sys_normal_disable", "sys_user_sex", "futter_patient"], | 
 |  |  |   components: { Treeselect }, | 
 |  |  |   data() { | 
 |  |  |     return {}; | 
 |  |  |     return { | 
 |  |  |       // 遮罩层 | 
 |  |  |       loading: true, | 
 |  |  |       // 选中数组 | 
 |  |  |       ids: [], | 
 |  |  |       // 非单个禁用 | 
 |  |  |       single: true, | 
 |  |  |       // 非多个禁用 | 
 |  |  |       multiple: true, | 
 |  |  |       // 显示搜索条件 | 
 |  |  |       showSearch: true, | 
 |  |  |       // 总条数 | 
 |  |  |       total: 0, | 
 |  |  |       // 用户表格数据 | 
 |  |  |       userList: null, | 
 |  |  |       // 弹出层标题 | 
 |  |  |       title: "", | 
 |  |  |       // 部门树选项 | 
 |  |  |       deptOptions: undefined, | 
 |  |  |       // 是否显示弹出层 | 
 |  |  |       open: false, | 
 |  |  |       // 部门名称 | 
 |  |  |       deptName: undefined, | 
 |  |  |       // 默认密码 | 
 |  |  |       initPassword: undefined, | 
 |  |  |       amendtag: false, //是否修改 | 
 |  |  |       // 日期范围 | 
 |  |  |       dateRange: [], | 
 |  |  |       paperstypes: [ | 
 |  |  |         { papersname: "身份证" }, | 
 |  |  |         { papersname: "护照" }, | 
 |  |  |         { papersname: "中国港澳居民身份证" }, | 
 |  |  |         { papersname: "中国台湾居民身份证" }, | 
 |  |  |       ], | 
 |  |  |       // 表单参数 | 
 |  |  |       form: { | 
 |  |  |         name: "", | 
 |  |  |         age: "", | 
 |  |  |         sex: "", | 
 |  |  |         tagList: [], | 
 |  |  |         idcardno: "", | 
 |  |  |         telcode: "", | 
 |  |  |         idcardtype: "", | 
 |  |  |         relativetelcode: "", | 
 |  |  |       }, | 
 |  |  |       //导入进度 | 
 |  |  |       dractive: 1, | 
 |  |  |       // 导入展示表单 | 
 |  |  |       uploadingData: {}, | 
 |  |  |       total: 0, // 总条数 | 
 |  |  |       ImportQuantity: 999, //导入患者数量 | 
 |  |  |       Labelchange: false, //修改新增弹窗 | 
 |  |  |       propss: { multiple: true }, | 
 |  |  |       optionstag: [], //标签列表 | 
 |  |  |       Patientrange: [ | 
 |  |  |       { | 
 |  |  |           value: 0, | 
 |  |  |           label: "所属患者", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           value: 1, | 
 |  |  |           label: "科室患者", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           value: 2, | 
 |  |  |           label: "病区患者", | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |       whether: [ | 
 |  |  |         { | 
 |  |  |           name: "是", | 
 |  |  |           id: 1, | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           name: "否", | 
 |  |  |           id: 2, | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |       Filterreason: [], | 
 |  |  |       defaultProps: { | 
 |  |  |         children: "children", | 
 |  |  |         label: "label", | 
 |  |  |       }, | 
 |  |  |       // 用户导入参数 | 
 |  |  |       upload: { | 
 |  |  |         // 是否显示弹出层(用户导入) | 
 |  |  |         open: false, | 
 |  |  |         // 弹出层标题(用户导入) | 
 |  |  |         title: "", | 
 |  |  |         // 是否禁用上传 | 
 |  |  |         isUploading: false, | 
 |  |  |         // 是否更新已经存在的用户数据 | 
 |  |  |         updateSupport: 0, | 
 |  |  |         // 设置上传的请求头部 | 
 |  |  |         headers: { Authorization: "Bearer " + getToken() }, | 
 |  |  |         // 上传的地址 | 
 |  |  |         url: process.env.VUE_APP_BASE_API + "/system/user/importData", | 
 |  |  |       }, | 
 |  |  |       // 查询参数 | 
 |  |  |       queryParams: { | 
 |  |  |         pageNum: 1, | 
 |  |  |         pageSize: 10, | 
 |  |  |         allhosp: "1", | 
 |  |  |         notrequiredFlag: 1, | 
 |  |  |         idcardno: undefined, | 
 |  |  |         name: undefined, | 
 |  |  |         status: undefined, | 
 |  |  |         tagIds: undefined, | 
 |  |  |         telcode: undefined, | 
 |  |  |       }, | 
 |  |  |       // 表单校验 | 
 |  |  |       rules: {}, | 
 |  |  |     }; | 
 |  |  |   }, | 
 |  |  |   watch: { | 
 |  |  |     // 根据名称筛选部门树 | 
 |  |  |     deptName(val) { | 
 |  |  |       this.$refs.tree.filter(val); | 
 |  |  |     }, | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.getList(); | 
 |  |  |     this.gettabList(); | 
 |  |  |     this.Filterreason = store.getters.Filterreason; | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     /** 查询患者列表 */ | 
 |  |  |     getList() { | 
 |  |  |       this.loading = true; | 
 |  |  |       patarchivelist(this.queryParams).then((response) => { | 
 |  |  |         console.log(response); | 
 |  |  |         this.userList = response.rows; | 
 |  |  |         this.total = response.total; | 
 |  |  |         this.loading = false; | 
 |  |  |       }); | 
 |  |  |     }, | 
 |  |  |     /** 查询标签列表 */ | 
 |  |  |     gettabList() { | 
 |  |  |       const tagqueryParams = { | 
 |  |  |         pageNum: 1, | 
 |  |  |         pageSize: 1000, | 
 |  |  |         tagname: undefined, | 
 |  |  |         tagdescription: undefined, | 
 |  |  |         tagcategoryid: "0", | 
 |  |  |       }; | 
 |  |  |       listtag(tagqueryParams).then((response) => { | 
 |  |  |         console.log(response); | 
 |  |  |         this.optionstag = response.rows; | 
 |  |  |       }); | 
 |  |  |     }, | 
 |  |  |     // 查询导入展示列表 | 
 |  |  |     geterryList() { | 
 |  |  |       this.loading = true; | 
 |  |  |       listJob(this.queryParams).then((response) => { | 
 |  |  |         this.jobList = 1; | 
 |  |  |         this.total = 1; | 
 |  |  |         this.loading = false; | 
 |  |  |       }); | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |   created() {}, | 
 |  |  |     // 筛选节点 | 
 |  |  |     filterNode(value, data) { | 
 |  |  |       if (!value) return true; | 
 |  |  |       return data.label.indexOf(value) !== -1; | 
 |  |  |     }, | 
 |  |  |     // 节点单击事件 | 
 |  |  |     handleNodeClick(data) { | 
 |  |  |       this.queryParams.deptId = data.id; | 
 |  |  |       this.handleQuery(); | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |   methods: {}, | 
 |  |  |     // 取消按钮 | 
 |  |  |     cancel() { | 
 |  |  |       this.Labelchange = false; | 
 |  |  |       this.reset(); | 
 |  |  |     }, | 
 |  |  |     // 表单重置 | 
 |  |  |     reset() { | 
 |  |  |       this.form = { | 
 |  |  |         name: "", | 
 |  |  |         age: "", | 
 |  |  |         sex: "", | 
 |  |  |         tagList: [], | 
 |  |  |         idcardno: "", | 
 |  |  |         telcode: "", | 
 |  |  |         idcardtype: "", | 
 |  |  |         relativetelcode: "", | 
 |  |  |       }; | 
 |  |  |       // this.resetForm("form"); | 
 |  |  |     }, | 
 |  |  |     /** 搜索按钮操作 */ | 
 |  |  |     handleQuery() { | 
 |  |  |       this.queryParams.pageNum = 1; | 
 |  |  |       this.getList(); | 
 |  |  |     }, | 
 |  |  |     /** 重置按钮操作 */ | 
 |  |  |     resetQuery() { | 
 |  |  |       this.queryParams={ | 
 |  |  |         pageNum: 1, | 
 |  |  |         pageSize: 10, | 
 |  |  |         allhosp: "1", | 
 |  |  |         notrequiredFlag: 1, | 
 |  |  |       }, | 
 |  |  |       this.handleQuery(); | 
 |  |  |     }, | 
 |  |  |     // 多选框选中数据 | 
 |  |  |     handleSelectionChange(selection) { | 
 |  |  |       this.ids = selection.map((item) => item.patid); | 
 |  |  |       this.single = selection.length != 1; | 
 |  |  |       this.multiple = !selection.length; | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |     /** 新增按钮操作 */ | 
 |  |  |     handleAdd() { | 
 |  |  |       this.reset(); | 
 |  |  |       this.Labelchange = true; | 
 |  |  |       this.amendtag = false; | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |     //修改/新增患者 | 
 |  |  |     submitForm() { | 
 |  |  |       if (this.amendtag) { | 
 |  |  |         alterpatient(this.form) | 
 |  |  |           .then((response) => { | 
 |  |  |             console.log(response); | 
 |  |  |           }) | 
 |  |  |           .then(() => { | 
 |  |  |             this.getList(); | 
 |  |  |             this.$modal.msgSuccess("修改成功"); | 
 |  |  |           }); | 
 |  |  |       } else { | 
 |  |  |         addfiltration(this.form) | 
 |  |  |           .then((response) => { | 
 |  |  |             console.log(response); | 
 |  |  |           }) | 
 |  |  |           .then(() => { | 
 |  |  |             this.getList(); | 
 |  |  |             this.$modal.msgSuccess("添加成功"); | 
 |  |  |           }); | 
 |  |  |       } | 
 |  |  |       this.reset(); | 
 |  |  |       // this.idds = ""; | 
 |  |  |       this.Labelchange = false; | 
 |  |  |     }, | 
 |  |  |  | 
 |  |  |     /** 删除按钮操作 */ | 
 |  |  |     handleDelete(row) { | 
 |  |  |       const userIds = row.id || this.ids; | 
 |  |  |       this.$modal | 
 |  |  |         .confirm('是否确认取消用户编号为"' + userIds + '"的数据项过滤?') | 
 |  |  |         .then( ()=> { | 
 |  |  |           row.notrequiredFlag=0 | 
 |  |  |           alterpatient(row) | 
 |  |  |           .then((response) => { | 
 |  |  |             console.log(response); | 
 |  |  |           }) | 
 |  |  |           .then(() => { | 
 |  |  |             this.getList(); | 
 |  |  |             this.$modal.msgSuccess("修改成功"); | 
 |  |  |           }); | 
 |  |  |         }) | 
 |  |  |  | 
 |  |  |         .catch(() => {}); | 
 |  |  |     }, | 
 |  |  |     /** 导出按钮操作 */ | 
 |  |  |     handleExport() { | 
 |  |  |       this.download( | 
 |  |  |         "smartor/patarchive/export", | 
 |  |  |         { | 
 |  |  |           ...this.queryParams, | 
 |  |  |         }, | 
 |  |  |         `user_${new Date().getTime()}.xlsx` | 
 |  |  |       ); | 
 |  |  |     }, | 
 |  |  |     /** 导入按钮操作 */ | 
 |  |  |     handleImport() { | 
 |  |  |       this.upload.title = "用户导入"; | 
 |  |  |       this.upload.open = true; | 
 |  |  |     }, | 
 |  |  |     /** 下载模板操作 */ | 
 |  |  |     importTemplate() { | 
 |  |  |       this.download( | 
 |  |  |         "smartor/import/getImportPatTemplate", | 
 |  |  |         {}, | 
 |  |  |         `user_template_${new Date().getTime()}.xlsx` | 
 |  |  |       ); | 
 |  |  |     }, | 
 |  |  |     // 文件上传中处理 | 
 |  |  |     handleFileUploadProgress(event, file, fileList) { | 
 |  |  |       this.upload.isUploading = true; | 
 |  |  |     }, | 
 |  |  |     // 文件上传成功处理 | 
 |  |  |     handleFileSuccess(response, file, fileList) { | 
 |  |  |       this.upload.open = false; | 
 |  |  |       this.upload.isUploading = false; | 
 |  |  |       this.$refs.upload.clearFiles(); | 
 |  |  |       this.$alert( | 
 |  |  |         "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + | 
 |  |  |           response.msg + | 
 |  |  |           "</div>", | 
 |  |  |         "导入结果", | 
 |  |  |         { dangerouslyUseHTMLString: true } | 
 |  |  |       ); | 
 |  |  |       this.getList(); | 
 |  |  |     }, | 
 |  |  |     // 提交上传文件 | 
 |  |  |     submitFileForm() { | 
 |  |  |       // 上传 | 
 |  |  |       if (this.dractive == 1) { | 
 |  |  |         this.$refs.upload.submit(); | 
 |  |  |         this.dractive++; | 
 |  |  |       } else { | 
 |  |  |         this.dractive++; | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     submitclose() { | 
 |  |  |       this.upload.open = false; | 
 |  |  |       this.dractive = 1; | 
 |  |  |     }, | 
 |  |  |   }, | 
 |  |  | }; | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss" scoped></style> | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | .el-button--primary.is-plain { | 
 |  |  |   color: #ffffff; | 
 |  |  |   background: #409eff; | 
 |  |  |   border-color: #4fabe9; | 
 |  |  | } | 
 |  |  | .document { | 
 |  |  |   width: 100px; | 
 |  |  |   height: 50px; | 
 |  |  | } | 
 |  |  | .documentf { | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: flex-end; | 
 |  |  | } | 
 |  |  | .download { | 
 |  |  |   text-align: center; | 
 |  |  |   .el-upload__tip { | 
 |  |  |     font-size: 23px; | 
 |  |  |   } | 
 |  |  |   .el-upload__text { | 
 |  |  |     font-size: 23px; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .uploading { | 
 |  |  |   margin-top: 20px; | 
 |  |  |   margin: 20px; | 
 |  |  |   padding: 30px; | 
 |  |  |   background: #ffffff; | 
 |  |  |   border: 1px solid #dcdfe6; | 
 |  |  |   -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), | 
 |  |  |     0 0 6px 0 rgba(0, 0, 0, 0.04); | 
 |  |  | } | 
 |  |  | .drexamine { | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   justify-content: center; | 
 |  |  |   padding: 30px; | 
 |  |  |   background: #daeaf5; | 
 |  |  |   img { | 
 |  |  |     width: 100px; | 
 |  |  |     height: 100px; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .button-textsc { | 
 |  |  |   color: #28cfe6; | 
 |  |  | } | 
 |  |  | </style> |