| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         width="100%" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm" | 
|     > | 
|         <div class="desc"> | 
|             <div class="desc_item"> | 
|                 <div class="desc_item_label" v-if="userInfo.type === 1 &&(model.statusCollect === 2 || model.statusCollect === 3)"> | 
|                     <div class="desc_item_label_left"> | 
|                         <span>保险到期还有 <b style="color: #F95601;">{{model.loseEfficacyDays ? model.loseEfficacyDays : '-'}}</b> 天</span> | 
|                         <el-button type="primary" v-if="model.statusCollect === 2 || model.statusCollect === 3" @click="$refs.OperaInsuranceApply.open('投保申请', { id: dataId })">一键续保</el-button> | 
|                         <el-button type="primary" v-if="model.statusCollect === 2" @click="$refs.additionSubtractionApplication.open('加减保申请', { id: dataId })">加减保申请</el-button> | 
|                         <el-button type="primary" v-if="model.statusCollect === 2" @click="$refs.factoryChange.open('换厂申请', { id: dataId })">换厂申请</el-button> | 
|                     </div> | 
|                 </div> | 
|                 <div class="desc_item_label"> | 
|                     <div class="desc_item_label_left"> | 
|                         <span>投保企业:{{ model.companyName }}</span> | 
|                         <span>保单状态:{{ model.statusInfo }}</span> | 
|                         <span>提交时间:{{ model.createDate }}</span> | 
|                     </div> | 
|                   <div class="desc_item_label_right"> | 
|                       <template v-if="userInfo.type === 1"> | 
|                           <el-button v-if="[0, 2, 3, 10].includes(model.status)" type="danger" @click="$refs.applyReturn.open('申请退回', {id: dataId})">申请退回</el-button> | 
|                           <el-button v-if="model.status == 4" type="primary" @click="$refs.OperaInsuranceApply.open('投保申请', {id: dataId})">再次投保</el-button> | 
|                           <el-button type="primary" @click="$refs.InsuranceDetails.open('投保详情单',model,0)">导出详单</el-button> | 
|                           <el-button v-if="[2, 3, 5, 7, 8].includes(model.status)" type="primary" @click="viewToubaodan">查看投保单</el-button> | 
|                           <el-button v-if="model.status == 5" type="primary" @click="viewBaoxiandan">查看保险单</el-button> | 
|                           <el-button v-if="model.status == 2" type="primary" @click="goSign">签署投保单</el-button> | 
|                       </template> | 
|                     <template v-else> | 
|                       <el-button type="primary" @click="$refs.InsuranceDetails.open('投保详情单',model,0)">导出详单</el-button> | 
|                       <el-button v-if="[2, 3, 5, 7, 8].includes(model.status)" type="primary" @click="viewToubaodan">查看投保单</el-button> | 
|                       <el-button v-if="model.status == 5" type="primary" @click="viewBaoxiandan">查看保险单</el-button> | 
|                       <el-button v-if="model.status == 10" type="primary" @click="$refs.OperaInsuranceApplyCheckWindow.open('上传投保单',model,2)">上传投保单</el-button> | 
|                       <el-button v-if="model.status == 3" type="primary" @click="$refs.OperaInsuranceApplyCheckWindow.open('上传保险单',model,3)">上传保险单</el-button> | 
|                       <el-button  v-if="model.status == 6 || model.status == 7|| model.status == 8" type="primary" @click="$refs.OperaInsuranceApplyCheckWindow.open('驳回退回申请',model,5)">驳回退回申请</el-button> | 
|                       <el-button v-if="model.status == 0" type="primary" @click="$refs.InsuranceDetails.open('投保审核',model,1)">投保审核</el-button> | 
|                       <el-button v-if="model.status != 5 && model.status != 4 && model.status != 1" type="danger" @click="$refs.OperaInsuranceApplyCheckWindow.open('退回投保',model,1)">退回投保</el-button> | 
|                       <el-button v-if="model.status == 5" type="danger" @click="$refs.OperaInsuranceApplyCheckWindow.open('修改保险单',model,4)">修改保险单</el-button> | 
|                     </template> | 
|                   </div> | 
|                 </div> | 
|                 <div class="desc_item_from"> | 
|                     <el-table | 
|                         :data="tableData" | 
|                         border | 
|                         style="width: 100%"> | 
|                         <el-table-column | 
|                             prop="code" | 
|                             align="center" | 
|                             label="保单号"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="solutionsName" | 
|                             label="保险方案" | 
|                             align="center" | 
|                             width="180"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="startTime" | 
|                             align="center" | 
|                             label="保险生效起期"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="endTime" | 
|                             align="center" | 
|                             label="保险生效止期"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="insureNum" | 
|                             align="center" | 
|                             label="投保人数"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="serviceDays" | 
|                             align="center" | 
|                             label="在保时长(天)"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="currentFee" | 
|                             align="center" | 
|                             label="当前费用(元)"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="fee" | 
|                             align="center" | 
|                             label="总费用(元)"> | 
|                         </el-table-column> | 
|                     </el-table> | 
|                 </div> | 
|                 <div class="desc_item_cate"> | 
|                     <el-tabs v-model="activeName" @tab-click="handleClick"> | 
|                         <el-tab-pane label="在保人员" name="0"></el-tab-pane> | 
|                         <el-tab-pane label="加/减保记录" name="1"></el-tab-pane> | 
|                         <el-tab-pane label="换厂记录" name="2"></el-tab-pane> | 
|                     </el-tabs> | 
|                 </div> | 
|                 <div class="desc_item_search"> | 
|                     <el-form :inline="true" :model="formInline" ref="sou" class="demo-form-inline"> | 
|                         <el-form-item label="在保状态" prop="applyStatus"> | 
|                             <el-select v-model="formInline.applyStatus" @change="search" placeholder="请选择"> | 
|                                 <el-option label="全部" value="0"></el-option> | 
|                                 <el-option label="保障中" value="1"></el-option> | 
|                                 <el-option label="不在保" value="2"></el-option> | 
|                             </el-select> | 
|                         </el-form-item> | 
|                         <el-form-item label="派遣单位" prop="duId"> | 
|                             <el-select v-model="formInline.duId" placeholder="请选择" @change="search"> | 
|                                 <el-option | 
|                                     v-for="item in dwList" | 
|                                     :key="item.id" | 
|                                     :label="item.name" | 
|                                     :value="item.id"> | 
|                                 </el-option> | 
|                             </el-select> | 
|                         </el-form-item> | 
|                         <el-form-item label="所属工种" prop="workTypeId"> | 
|                             <el-select v-model="formInline.workTypeId" placeholder="请选择" @change="search"> | 
|                                 <el-option | 
|                                     v-for="item in gzList" | 
|                                     :key="item.id" | 
|                                     :label="item.name" | 
|                                     :value="item.id"> | 
|                                 </el-option> | 
|                             </el-select> | 
|                         </el-form-item> | 
|                         <el-form-item label="员工姓名" prop="memberName"> | 
|                             <el-input v-model="formInline.memberName" placeholder="请输入" @keypress.enter.native="search"></el-input> | 
|                         </el-form-item> | 
|                         <el-form-item label="保险生效起期" prop="end"> | 
|                             <el-date-picker | 
|                                 @change="changeStart" | 
|                                 v-model="formInline.end" | 
|                                 type="daterange" | 
|                                 format="yyyy 年 MM 月 dd 日" | 
|                                 value-format="yyyy-MM-dd" | 
|                                 range-separator="至" | 
|                                 start-placeholder="开始日期" | 
|                                 end-placeholder="结束日期"> | 
|                             </el-date-picker> | 
|                         </el-form-item> | 
|                         <el-form-item label="保险生效止期" prop="start"> | 
|                             <el-date-picker | 
|                                 @change="changeEnd" | 
|                                 v-model="formInline.start" | 
|                                 type="daterange" | 
|                                 format="yyyy 年 MM 月 dd 日" | 
|                                 value-format="yyyy-MM-dd" | 
|                                 range-separator="至" | 
|                                 start-placeholder="开始日期" | 
|                                 end-placeholder="结束日期"> | 
|                             </el-date-picker> | 
|                         </el-form-item> | 
|                         <section> | 
|                             <el-button type="primary" @click="search">查询</el-button> | 
|                             <el-button @click="resetting">重置</el-button> | 
|                             <el-button type="primary" @click="exportExcel">导出名单</el-button> | 
|                         </section> | 
|                     </el-form> | 
|                 </div> | 
|                 <div class="desc_item_from"> | 
|                     <el-table | 
|                         :data="list" | 
|                         border | 
|                         style="width: 100%"> | 
|                         <el-table-column label="序号"> | 
|                             <template slot-scope="scope"> | 
|                                 <span>{{scope.$index + 1}}</span> | 
|                             </template> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="memberName" | 
|                             label="员工姓名"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             label="性别"> | 
|                             <template slot-scope="{row}"> | 
|                                 <span v-if="row.sex === 0">男</span> | 
|                                 <span v-else>女</span> | 
|                             </template> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="idcardNo" | 
|                             label="身份证号"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="duName" | 
|                             label="派遣单位"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="workTypeName" | 
|                             label="所属工种"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="startTime" | 
|                             label="保险生效起期"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="endTime" | 
|                             label="保险生效止期"> | 
|                         </el-table-column> | 
|                         <el-table-column | 
|                             prop="fee" | 
|                             label="产生费用(元)"> | 
|                         </el-table-column> | 
|                     </el-table> | 
|                     <div class="desc_item_from_page"> | 
|                         <el-pagination | 
|                             @current-change="handleCurrentChange" | 
|                             :current-page="currentPage" | 
|                             :page-size="10" | 
|                             layout="total, prev, pager, next, jumper" | 
|                             :total="total"> | 
|                         </el-pagination> | 
|                     </div> | 
|                 </div> | 
|                 <div class="desc_item_review"> | 
|                     <div class="desc_item_review_label">审核流程</div> | 
|                   <el-timeline :reverse="reverse"> | 
|                     <el-timeline-item | 
|                         v-for="(activity, index) in activities" | 
|                         :key="index"> | 
|                       <div style="display: flex; flex-direction: column;"> | 
|                                 <span style="font-size: 16px; font-weight: 400; color: black;"> | 
|                                     {{activity.title}} | 
|                                     <span style="font-size: 16px; font-weight: 400; color: black; margin-left: 10px;" v-if="activity.objType === 5 || activity.objType === 6 || activity.objType === 1 || activity.objType === 2"> | 
|                                        提交意见:{{activity.content}} | 
|                                     </span> | 
|                                 </span> | 
|                         <span style="margin-top: 5px; font-size: 12px; font-weight: 400; color: #999999;"> | 
|                                     操作员-{{activity.creatorName}}({{activity.creatorType==1? activity.companyName: "平台端"}}){{activity.createDate}} | 
|                                 </span> | 
|                       </div> | 
|                     </el-timeline-item> | 
|                   </el-timeline> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <InsuranceDetails ref="InsuranceDetails" @success="successEvent" /> | 
|         <OperaInsuranceApplyCheckWindow ref="OperaInsuranceApplyCheckWindow" @success="successEvent" /> | 
|         <!--    企业申请退回    --> | 
|         <applyReturn ref="applyReturn" @success="successEvent" /> | 
|         <!--    新增投保    --> | 
|         <OperaInsuranceApply ref="OperaInsuranceApply" @success="successEvent" /> | 
|         <!--    加减保申请    --> | 
|         <additionSubtractionApplication ref="additionSubtractionApplication" @success="successEvent" /> | 
|         <!--    换厂申请    --> | 
|         <factoryChange ref="factoryChange" @success="successEvent" /> | 
|     </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import BaseOpera from '@/components/base/BaseOpera' | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import InsuranceDetails from '@/components/business/InsuranceDetails' | 
| import OperaInsuranceApplyCheckWindow from '@/components/business/OperaInsuranceApplyCheckWindow' | 
| import additionSubtractionApplication from '@/components/enterprise/additionSubtractionApplication' | 
| import factoryChange from '@/components/enterprise/factoryChange' | 
|   | 
| import applyReturn from '@/components/enterprise/applyReturn' | 
| import { getDetail, getSignLink, applyDetailPage, applyChagneDetailPage, exportExcel, applyChagneDetailExcel } from "@/api/business/insuranceApply"; | 
| import { findListByDTO } from "@/api/business/dispatchUnit"; | 
| import { findListByDTO as worktypeFindListByDTO } from "@/api/business/worktype"; | 
| import OperaInsuranceApply from '@/components/enterprise/OperaInsuranceApplyWindow' | 
| import { mapState } from 'vuex' | 
|   | 
| export default { | 
|   name: 'OperaInsuranceApplyWindow', | 
|   extends: BaseOpera, | 
|   components: { | 
|       GlobalWindow, | 
|       InsuranceDetails, | 
|       OperaInsuranceApplyCheckWindow, | 
|       applyReturn, | 
|       OperaInsuranceApply, | 
|       additionSubtractionApplication, | 
|       factoryChange | 
|   }, | 
|   data () { | 
|     return { | 
|       // 表单数据 | 
|       dataId:null, | 
|       model: {}, | 
|       form: { | 
|           id: null, | 
|           editDate: '' | 
|       }, | 
|       // 验证规则 | 
|       rules: { | 
|       }, | 
|       formInline: { | 
|           applyStatus: '', | 
|           duId: '', | 
|           workTypeId: '', | 
|           memberName: '', | 
|           end: [], | 
|           start: [], | 
|           endTimeE: '', | 
|           endTimeS: '', | 
|           startTimeE: '', | 
|           startTimeS: '', | 
|           types: '' | 
|       }, | 
|       visible1: false, | 
|       visible2: false, | 
|       visible3: false, | 
|       visible4: false, | 
|       visible5: false, | 
|       reverse: true, | 
|       radio: 0, | 
|       activities: [], | 
|       tableData: [], | 
|         list: [], | 
|         dwList: [], | 
|         gzList: [], | 
|       activeName: '0', | 
|         total: 0, | 
|       currentPage: 1 | 
|     } | 
|   }, | 
|   created () { | 
|       this.config({ | 
|           api: '/business/insuranceApply', | 
|           'field.id': 'id' | 
|       }) | 
|   }, | 
|     computed: { | 
|       ...mapState(['userInfo']) | 
|     }, | 
|   methods: { | 
|      open(title,target){ | 
|         this.visible = true; | 
|         this.title = title | 
|         this.dataId = target.id | 
|         this.getDetail() | 
|         this.getList() | 
|         this.getDW() | 
|         this.getGZ() | 
|      }, | 
|       // 派遣单位 | 
|       getDW() { | 
|           findListByDTO({ applyId: this.dataId }) | 
|             .then(res => { | 
|                 this.dwList = res | 
|             }) | 
|       }, | 
|       // 工种 | 
|       getGZ() { | 
|           worktypeFindListByDTO({ | 
|               id: this.dataId, | 
|               queryType: 2 | 
|           }).then(res => { | 
|               this.gzList = res | 
|           }) | 
|       }, | 
|       resetting() { | 
|             this.formInline.end = [] | 
|             this.formInline.end = [] | 
|             this.formInline.endTimeE = '' | 
|             this.formInline.endTimeS = '' | 
|             this.formInline.startTimeE = '' | 
|             this.formInline.startTimeS = '' | 
|             this.$refs.sou.resetFields(); | 
|             this.search() | 
|       }, | 
|       search() { | 
|           this.currentPage = 1 | 
|           this.getList() | 
|       }, | 
|       changeStart(e) { | 
|             if (e.length > 0) { | 
|                 this.formInline.startTimeE = e[0] | 
|                 this.formInline.startTimeS = e[1] | 
|             } else { | 
|                 this.formInline.startTimeE = '' | 
|                 this.formInline.startTimeS = '' | 
|             } | 
|             this.search() | 
|       }, | 
|       changeEnd(e) { | 
|          if (e.length > 0) { | 
|              this.formInline.endTimeE = e[0] | 
|              this.formInline.endTimeS = e[1] | 
|          } else { | 
|              this.formInline.endTimeE = '' | 
|              this.formInline.endTimeS = '' | 
|          } | 
|           this.search() | 
|       }, | 
|       exportExcel() { | 
|           if (this.activeName === '0') { | 
|               exportExcel({ | 
|                   capacity: 10, | 
|                   page: this.currentPage, | 
|                   model: { | 
|                       solutionName: this.tableData[0].solutionsName, | 
|                       applyId: this.dataId, | 
|                       applyStatus: this.formInline.applyStatus, | 
|                       duId: this.formInline.duId, | 
|                       workTypeId: this.formInline.workTypeId, | 
|                       memberName: this.formInline.memberName, | 
|                       endTimeE: this.formInline.endTimeE, | 
|                       endTimeS: this.formInline.endTimeS, | 
|                       startTimeE: this.formInline.startTimeE, | 
|                       startTimeS: this.formInline.startTimeS | 
|                   } | 
|               }).then(response => { | 
|                   this.download(response) | 
|               }) | 
|           } else { | 
|               applyChagneDetailExcel({ | 
|                   capacity: 10, | 
|                   page: this.currentPage, | 
|                   model: { | 
|                       applyId: this.dataId, | 
|                       applyStatus: this.formInline.applyStatus, | 
|                       duId: this.formInline.duId, | 
|                       workTypeId: this.formInline.workTypeId, | 
|                       memberName: this.formInline.memberName, | 
|                       endTimeE: this.formInline.endTimeE, | 
|                       endTimeS: this.formInline.endTimeS, | 
|                       startTimeE: this.formInline.startTimeE, | 
|                       startTimeS: this.formInline.startTimeS, | 
|                       types: this.formInline.types | 
|                   } | 
|               }).then(response => { | 
|                   this.download(response) | 
|               }) | 
|           } | 
|       }, | 
|       getList() { | 
|          if (this.activeName === '0') { | 
|              applyDetailPage({ | 
|                  capacity: 10, | 
|                  page: this.currentPage, | 
|                  model: { | 
|                      applyId: this.dataId, | 
|                      applyStatus: this.formInline.applyStatus, | 
|                      duId: this.formInline.duId, | 
|                      workTypeId: this.formInline.workTypeId, | 
|                      memberName: this.formInline.memberName, | 
|                      endTimeE: this.formInline.endTimeE, | 
|                      endTimeS: this.formInline.endTimeS, | 
|                      startTimeE: this.formInline.startTimeE, | 
|                      startTimeS: this.formInline.startTimeS | 
|                  } | 
|              }).then(res => { | 
|                  this.list = res.records | 
|                  this.total = res.total | 
|              }) | 
|          } else { | 
|              applyChagneDetailPage({ | 
|                  capacity: 10, | 
|                  page: this.currentPage, | 
|                  model: { | 
|                      applyId: this.dataId, | 
|                      applyStatus: this.formInline.applyStatus, | 
|                      duId: this.formInline.duId, | 
|                      workTypeId: this.formInline.workTypeId, | 
|                      memberName: this.formInline.memberName, | 
|                      endTimeE: this.formInline.endTimeE, | 
|                      endTimeS: this.formInline.endTimeS, | 
|                      startTimeE: this.formInline.startTimeE, | 
|                      startTimeS: this.formInline.startTimeS, | 
|                      types: this.formInline.types | 
|                  } | 
|              }).then(res => { | 
|                  this.list = res.records | 
|                  this.total = res.total | 
|              }) | 
|          } | 
|       }, | 
|       handleClick(e) { | 
|         this.activeName = e.index | 
|           if (e.index === '1') { | 
|             this.formInline.types = [0, 1] | 
|           } else if (e.index === '2') { | 
|             this.formInline.types = [2] | 
|           } | 
|           this.resetting() | 
|       }, | 
|     goSign(){ | 
|       getSignLink(this.dataId).then(res => { | 
|         setTimeout(() => { | 
|           window.open(res) | 
|         }, 500); | 
|       }).catch(err => { | 
|        this.$tip.apiFailed(err) | 
|       }) | 
|     }, | 
|     viewToubaodan(){ | 
|        if(this.model.toubaodanSignedFile && this.model.toubaodanSignedFile.fileurlFull){ | 
|          setTimeout(() => { | 
|            window.open(this.model.toubaodanSignedFile.fileurlFull) | 
|          }, 500); | 
|   | 
|        } else if(this.model.toubaodanFile && this.model.toubaodanFile.fileurlFull){ | 
|          setTimeout(() => { | 
|            window.open(this.model.toubaodanFile.fileurlFull) | 
|              },500) | 
|        } | 
|     }, | 
|     viewBaoxiandan(){ | 
|       if(this.model.baoxiandanFile && this.model.baoxiandanFile.fileurlFull){ | 
|         window.open(this.model.baoxiandanFile.fileurlFull) | 
|       } | 
|     }, | 
|     handleSizeChange(val){ | 
|         console.log(val) | 
|     }, | 
|     handleCurrentChange(val){ | 
|         console.log(val) | 
|         this.page = val | 
|         this.getList() | 
|     }, | 
|     onSubmit(){ | 
|   | 
|     }, | 
|     getDetail(){ | 
|       getDetail(this.dataId).then(res => { | 
|         this.model = res | 
|         this.tableData = new Array() | 
|         this.tableData.push(res) | 
|         console.log(this.tableData) | 
|         this.activities = res.applyLogList | 
|       }).catch(err => { | 
|       }) | 
|     }, | 
|     successEvent(){ | 
|        // this.visible=false | 
|       this.getDetail() | 
|       this.$emit('success') | 
|     } | 
|   } | 
| } | 
| </script> | 
| <style> | 
|   | 
| </style> | 
| <style lang="scss" scoped> | 
|     .form { | 
|         width: 100%; | 
|         display: flex; | 
|         align-items: center; | 
|         flex-direction: column; | 
|         .form_span { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: start; | 
|             flex-direction: column; | 
|             margin-bottom: 20px; | 
|             span { | 
|                 font-size: 14px; | 
|                 &:nth-child(1) { | 
|                     color: black; | 
|                     margin-bottom: 5px; | 
|                 } | 
|                 &:nth-child(2) { | 
|                     color: #8c939d; | 
|                 } | 
|             } | 
|         } | 
|         .form_item { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             margin-bottom: 20px; | 
|             &:last-child { | 
|                 margin: 0 !important; | 
|             } | 
|             .form_item_label { | 
|                 flex-shrink: 0; | 
|                 width: 170px; | 
|                 color: black; | 
|                 font-size: 14px; | 
|                 span { | 
|                     color: red; | 
|                     font-size: 14px; | 
|                 } | 
|             } | 
|             .form_item_val { | 
|                 flex: 1; | 
|                 /*height: 40px;*/ | 
|                 margin-left: 20px; | 
|                 textarea { | 
|                     width: 100%; | 
|                     height: 70px; | 
|                     border: 1px solid #cbcbcb; | 
|                     padding: 10px; | 
|                     outline: none; | 
|                     box-sizing: border-box; | 
|                 } | 
|                 input { | 
|                     width: 100%; | 
|                     height: 40px; | 
|                     outline: none; | 
|                     border-radius: 5px; | 
|                     border: 1px solid #cbcbcb; | 
|                     padding: 0 20px; | 
|                     box-sizing: border-box; | 
|                 } | 
|             } | 
|         } | 
|     } | 
|     .desc { | 
|         width: 100%; | 
|         .desc_item { | 
|             width: 100%; | 
|             display: flex; | 
|             flex-direction: column; | 
|             .desc_item_label { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 margin-bottom: 10px; | 
|                 span { | 
|                     font-size: 14px; | 
|                     color: black; | 
|                     margin-right: 30px; | 
|                 } | 
|             } | 
|             .desc_item_from { | 
|                 width: 100%; | 
|                 margin-bottom: 10px; | 
|                 .desc_item_from_page { | 
|                     width: 100%; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: end; | 
|                     margin-top: 10px; | 
|                 } | 
|             } | 
|             .desc_item_cate { | 
|                 width: 100%; | 
|                 margin-bottom: 10px; | 
|             } | 
|             .desc_item_search { | 
|                 width: 100%; | 
|                 margin-bottom: 20px; | 
|             } | 
|             .desc_item_review { | 
|                 width: 100%; | 
|                 .desc_item_review_label { | 
|                     font-size: 20px; | 
|                     color: black; | 
|                     font-weight: bold; | 
|                     margin-bottom: 15px; | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |