1、车险录单-添加是否脱保按钮

2、订单查询-修改查看详情页面

src/views/Letter/Letter.vue

@@ -91,6 +91,10 @@
           <span>是否过户车</span>
           <el-switch @change="transferFlagChange" v-model="carInfo.transferFlag" active-color="#ee7000"></el-switch>
         </div>
+        <div class="csstool">
+          <span>是否脱保</span>
+          <el-switch  v-model="carInfo.isOutOfInsurance" active-color="#ee7000"></el-switch>
+        </div>
       </div>
       <el-form class="demo-ruleForm" :model="carInfo" ref="carInfo" :rules="rules" label-width="130px" size="small">
         <el-row style="flex-wrap: wrap; display: flex;">
@@ -939,6 +943,8 @@
           </div>
         </div>
         <el-descriptions size="small">
+          <el-descriptions-item label="评分">{{ queryOrders.extendInfo.score }}</el-descriptions-item>
+          <el-descriptions-item label="出险信息">{{ queryOrders.extendInfo.accidentInfoStr }}</el-descriptions-item>
           <el-descriptions-item label="商业险折扣比例">{{ queryOrders.extendInfo.nirrratio }}</el-descriptions-item>
           <el-descriptions-item label="交强险折扣比例">{{ queryOrders.extendInfo.nirrratioCI }}</el-descriptions-item>
           <el-descriptions-item label="自主定价系数">{{ queryOrders.extendInfo.pricingAdjustValue }}</el-descriptions-item>
@@ -963,7 +969,6 @@
         </div>
         <el-descriptions size="small">
           <el-descriptions-item label="车牌号">{{ queryOrders.carinfo.licenseNo }}</el-descriptions-item>
-          <el-descriptions-item label="车牌号">{{ queryOrders.carinfo.licenseTypeCode }}</el-descriptions-item>
           <el-descriptions-item label="车辆识别代码">{{ queryOrders.carinfo.vinNo }}</el-descriptions-item>
           <el-descriptions-item label="品牌型号">{{ queryOrders.carinfo.modelcname }}</el-descriptions-item>
           <el-descriptions-item label="发动机号">{{ queryOrders.carinfo.engineNo }}</el-descriptions-item>
@@ -991,10 +996,7 @@
         </div>
         <el-descriptions size="small">
           <el-descriptions-item label="车主姓名">{{ queryOrders.ownerinfo.name }}</el-descriptions-item>
-          <el-descriptions-item label="证件类型">
-            {{ queryOrders.ownerinfo.identifyType == '01' ? '身份证' : ''
-            }}
-          </el-descriptions-item>
+          <el-descriptions-item label="证件类型"> {{ queryOrders.ownerinfo.identifyType}}</el-descriptions-item>
           <el-descriptions-item label="身份证号">{{ queryOrders.ownerinfo.identifyNumber }}</el-descriptions-item>
           <el-descriptions-item label="手机号">{{ queryOrders.ownerinfo.mobile }}</el-descriptions-item>
           <el-descriptions-item label="地址">{{ queryOrders.ownerinfo.addr }}</el-descriptions-item>
@@ -1010,10 +1012,7 @@
         </div>
         <el-descriptions size="small">
           <el-descriptions-item label="投保人姓名">{{ queryOrders.applyinfo.name }}</el-descriptions-item>
-          <el-descriptions-item label="证件类型">
-            {{ queryOrders.applyinfo.identifyType == '01' ? '身份证' : ''
-            }}
-          </el-descriptions-item>
+          <el-descriptions-item label="证件类型"> {{ queryOrders.applyinfo.identifyType}}</el-descriptions-item>
           <el-descriptions-item label="身份证号">{{ queryOrders.applyinfo.identifyNumber }}</el-descriptions-item>
           <el-descriptions-item label="手机号">{{ queryOrders.applyinfo.mobile }}</el-descriptions-item>
           <el-descriptions-item label="地址">{{ queryOrders.applyinfo.addr }}</el-descriptions-item>
@@ -1029,10 +1028,7 @@
         </div>
         <el-descriptions size="small">
           <el-descriptions-item label="被保人姓名">{{ queryOrders.insureinfo.name }}</el-descriptions-item>
-          <el-descriptions-item label="证件类型">
-            {{ queryOrders.insureinfo.identifyType == '01' ? '身份证' : ''
-            }}
-          </el-descriptions-item>
+          <el-descriptions-item label="证件类型"> {{ queryOrders.insureinfo.identifyType}}</el-descriptions-item>
           <el-descriptions-item label="身份证号">{{ queryOrders.insureinfo.identifyNumber }}</el-descriptions-item>
           <el-descriptions-item label="手机号">{{ queryOrders.insureinfo.mobile }}</el-descriptions-item>
           <el-descriptions-item label="地址">{{ queryOrders.insureinfo.addr }}</el-descriptions-item>
@@ -5068,7 +5064,6 @@ export default {
         this.transferDateShow = false;
       }
     },
-
     //影像上传
     drivingupload(file, imageIdList, imgurl, type) {
       this[imgurl].push(file)

src/views/Letter/Orderlist.vue

@@ -188,6 +188,332 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 车辆报价新页面 -->
+    <el-dialog title="车辆报价信息详情" :visible.sync="quotedetailsdialogVisible" width="90%">
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">报价信息</span>
+          </div>
+        </div>
+        <div style="padding:20px;font-weight:bold;font-size:20px;">
+          <span>总保费</span>
+          <span style="color:#ff7612;">￥{{ orderInfo.sumpremium }}</span>
+        </div>
+        <div class="headers headers_Custom" style="padding:20px;">
+          <div v-show="orderInfo.jqpremium">
+            交强险金额：
+            <span>
+              ￥{{
+                orderInfo.jqpremium }}
+            </span>
+          </div>
+          <div v-show="orderInfo.sypremium">
+            商业险金额：
+            <span>￥{{ orderInfo.sypremium }}</span>
+          </div>
+          <div v-show="orderInfo.taxamount">
+            车船税：
+            <span>￥{{ orderInfo.taxamount }}</span>
+          </div>
+          <div v-if="orderInfo.accidentInfo">
+            驾意险：
+            <span>￥{{ orderInfo.accidentInfo.sumPremium }}</span>
+          </div>
+          <div v-show="orderInfo.jqstartdate">
+            交强险起保日期：
+            <span>{{ orderInfo.jqstartdate }}</span>
+          </div>
+          <div v-show="orderInfo.systartdate">
+            商业险起保日期：
+            <span>{{ orderInfo.systartdate }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Enclosure" v-if="orderInfo.extendInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">保费因素</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="评分">{{ orderInfo.extendInfo.score }}</el-descriptions-item>
+          <el-descriptions-item label="出险信息">{{ orderInfo.extendInfo.accidentInfoStr }}</el-descriptions-item>
+          <el-descriptions-item label="商业险折扣比例">{{ orderInfo.extendInfo.nirrratio }}</el-descriptions-item>
+          <el-descriptions-item label="交强险折扣比例">{{ orderInfo.extendInfo.nirrratioCI }}</el-descriptions-item>
+          <el-descriptions-item label="自主定价系数">{{ orderInfo.extendInfo.pricingAdjustValue }}</el-descriptions-item>
+          <el-descriptions-item label="业务员交强险销售费用浮动率">
+            {{ orderInfo.extendInfo.jqFeeSaleChangeRateA4
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="交强深度定价分档">{{ orderInfo.extendInfo.deepPriceGradeCI }}</el-descriptions-item>
+          <el-descriptions-item label="业务员商业险销售费用浮动率">
+            {{ orderInfo.extendInfo.syFeeSaleChangeRateA4
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="商业深度定价分档">{{ orderInfo.extendInfo.deepPriceGradeBI }}</el-descriptions-item>
+          
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">车辆信息</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="车牌号">{{ orderInfo.carinfo.licenseNo }}</el-descriptions-item>
+          <el-descriptions-item label="车辆识别代码">{{ orderInfo.carinfo.vinNo }}</el-descriptions-item>
+          <el-descriptions-item label="品牌型号">{{ orderInfo.carinfo.modelcname }}</el-descriptions-item>
+          <el-descriptions-item label="发动机号">{{ orderInfo.carinfo.engineNo }}</el-descriptions-item>
+          <el-descriptions-item label="年款">{{ orderInfo.carinfo.caryear }}</el-descriptions-item>
+          <el-descriptions-item label="座位数">{{ orderInfo.carinfo.seatCount }}</el-descriptions-item>
+          <el-descriptions-item label="新车购置价">{{ orderInfo.carinfo.purchasePrice }}</el-descriptions-item>
+          <el-descriptions-item label="使用性质">
+            {{ orderInfo.carinfo.carnature == '8A' ? '家庭自用' : ''
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="注册日期">{{ orderInfo.carinfo.registerDate }}</el-descriptions-item>
+          <el-descriptions-item label="发证日期">{{ orderInfo.carinfo.issueDate }}</el-descriptions-item>
+          <el-descriptions-item label="是否过户">
+            {{ orderInfo.carinfo.transferFlag == true ? '是' : '否'
+            }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">车主信息</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="车主姓名">{{ orderInfo.ownerinfo.name }}</el-descriptions-item>
+          <el-descriptions-item label="证件类型">{{ orderInfo.ownerinfo.identifyType }}</el-descriptions-item>
+          <el-descriptions-item label="身份证号">{{ orderInfo.ownerinfo.identifyNumber }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ orderInfo.ownerinfo.mobile }}</el-descriptions-item>
+          <el-descriptions-item label="地址">{{ orderInfo.ownerinfo.addr }}</el-descriptions-item>
+          <el-descriptions-item label="电子邮箱">{{ orderInfo.ownerinfo.email }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">投保人信息</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="投保人姓名">{{ orderInfo.applyinfo.name }}</el-descriptions-item>
+          <el-descriptions-item label="证件类型"> {{ orderInfo.applyinfo.identifyType }}</el-descriptions-item>
+          <el-descriptions-item label="身份证号">{{ orderInfo.applyinfo.identifyNumber }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ orderInfo.applyinfo.mobile }}</el-descriptions-item>
+          <el-descriptions-item label="地址">{{ orderInfo.applyinfo.addr }}</el-descriptions-item>
+          <el-descriptions-item label="电子邮箱">{{ orderInfo.applyinfo.email }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">被保人信息</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="被保人姓名">{{ orderInfo.insureinfo.name }}</el-descriptions-item>
+          <el-descriptions-item label="证件类型"> {{ orderInfo.insureinfo.identifyType}}</el-descriptions-item>
+          <el-descriptions-item label="身份证号">{{ orderInfo.insureinfo.identifyNumber }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ orderInfo.insureinfo.mobile }}</el-descriptions-item>
+          <el-descriptions-item label="地址">{{ orderInfo.insureinfo.addr }}</el-descriptions-item>
+          <el-descriptions-item label="电子邮箱">{{ orderInfo.insureinfo.email }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">险种信息</span>
+          </div>
+        </div>
+        <div style="font-size:12px">
+          <div class="headers kindinfocss" style="justify-content: space-around">
+            <span>商业险险别</span>
+            <span>保额（元）</span>
+            <span>保费（元）</span>
+          </div>
+          <div class="headers kindinfocss" style="color:rgb(255, 118, 18); justify-content:space-around;"
+            v-for="(kindinfoitem, kindinfoindex) in orderInfo.kindinfo" :key="kindinfoindex">
+            <template v-if="kindinfoitem.coveragePremium">
+              <span>{{ kindinfoitem.kindName }}</span>
+              <span v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)">{{ kindinfoitem.unitAmount }}</span>
+              <span v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)">
+                {{
+                  kindinfoitem.deductibleRate
+                }}
+              </span>
+              <span v-else>{{ kindinfoitem.amount }}</span>
+              <span>{{ kindinfoitem.coveragePremium }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="Enclosure" v-if="orderInfo.accidentInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">驾意险</span>
+          </div>
+        </div>
+        <el-descriptions size="small">
+          <el-descriptions-item label="产品">{{ orderInfo.accidentInfo.rideRiskName }}</el-descriptions-item>
+          <el-descriptions-item label="份数">{{ orderInfo.accidentInfo.quantity }}</el-descriptions-item>
+          <el-descriptions-item label="价格">{{ orderInfo.accidentInfo.unitPremium }}/份</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">欠税明细</span>
+          </div>
+        </div>
+        <div style="font-size:12px">
+          <div class="headers kindinfocss" style="justify-content: space-around;">
+            <span>日期</span>
+            <span>欠费（元）</span>
+            <span>滞纳金（元）</span>
+          </div>
+          <div class="headers kindinfocss" style="color:rgb(255, 118, 18); justify-content:space-around;"
+            v-for="(taxArrearsitem, taxArrearsindex) in orderInfo.taxArrears" :key="taxArrearsindex">
+            <span>{{ taxArrearsitem.years }}</span>
+            <span>{{ taxArrearsitem.taxDefault }}</span>
+            <span>{{ taxArrearsitem.lateFee }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">影像</span>
+          </div>
+        </div>
+        <div style="font-size:12px;padding:10px 0">
+          <div style="margin-bottom: 10px;">
+              <el-row class="u-f-ac bodyTitle">
+                <label @click="pic1Control = !pic1Control">行驶证影像</label>
+              </el-row>
+              <el-row class="body" v-show="pic1Control">
+                <el-row style="padding:10px;">
+                  <viewer :images="carImageList">
+                    <img class="imageStyle" v-for="(imageItem, imageIndex) in carImageList" :src="imageItem"
+                      :key="imageIndex" />
+                  </viewer>
+                </el-row>
+              </el-row>
+            </div>
+            <div style="margin-bottom: 10px;">
+              <el-row class="u-f-ac bodyTitle">
+                <label @click="pic2Control = !pic2Control">车主身份证影像</label>
+              </el-row>
+              <el-row class="body" v-show="pic2Control">
+                <el-row style="padding:10px;">
+                  <viewer :images="ownerImageList">
+                    <img class="imageStyle" v-for="(imageItem, imageIndex) in ownerImageList" :src="imageItem"
+                      :key="imageIndex" />
+                  </viewer>
+                </el-row>
+              </el-row>
+            </div>
+            <div style="margin-bottom: 10px;">
+              <el-row class="u-f-ac bodyTitle">
+                <label @click="pic3Control = !pic3Control">投保人身份证影像</label>
+              </el-row>
+              <el-row class="body" v-show="pic3Control">
+                <el-row style="padding:10px;">
+                  <viewer :images="policyImageList">
+                    <img class="imageStyle" v-for="(imageItem, imageIndex) in policyImageList" :src="imageItem"
+                      :key="imageIndex" />
+                  </viewer>
+                </el-row>
+              </el-row>
+            </div>
+            <div style="margin-bottom: 10px;">
+              <el-row class="u-f-ac bodyTitle">
+                <label @click="pic4Control = !pic4Control">被保人身份证影像</label>
+              </el-row>
+              <el-row class="body" v-show="pic4Control">
+                <el-row style="padding:10px;">
+                  <viewer :images="insuredImageList">
+                    <img class="imageStyle" v-for="(imageItem, imageIndex) in insuredImageList" :src="imageItem"
+                      :key="imageIndex" />
+                  </viewer>
+                </el-row>
+              </el-row>
+            </div>
+            <div style="margin-bottom: 10px;">
+              <el-row class="u-f-ac bodyTitle">
+                <label @click="pic5Control = !pic5Control">验车照影像</label>
+              </el-row>
+              <el-row class="body" v-show="pic5Control">
+                <el-row style="padding:10px;">
+                  <viewer :images="carCheckImageList">
+                    <img class="imageStyle" v-for="(imageItem, imageIndex) in carCheckImageList" :src="imageItem"
+                      :key="imageIndex" />
+                  </viewer>
+                </el-row>
+              </el-row>
+            </div>
+        </div>
+      </div>
+      <div class="Enclosure" v-if="orderInfo">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">投保单号</span>
+          </div>
+        </div>
+        <el-descriptions size="small" :column="2">
+          <el-descriptions-item label="交强险投保单号">{{ orderInfo.jqapplyno }}</el-descriptions-item>
+          <el-descriptions-item label="商业险投保单号">{{ orderInfo.syapplyno }}</el-descriptions-item>
+          <el-descriptions-item label="交强险保单号">{{ orderInfo.jqpolicyno }}</el-descriptions-item>
+          <el-descriptions-item label="商业险保单号">{{ orderInfo.sypolicyno }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div class="Enclosure" v-if="orderInfo && orderInfo.orderstatus == 3">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">电子保单</span>
+          </div>
+        </div>
+            <el-row class="body" style="padding:10px 20px;">
+              <el-row v-for="(oldfileItem, oldfileIndex) in oldfileList" :key="oldfileIndex">
+                <el-col :span="2" style="margin-right: 15px;">
+                  <label>{{ oldfileItem.fileTitle }}:</label>
+                </el-col>
+                <el-col :span="6" class="u-f u-f-column">
+                    <div class="u-f u-f-jsb u-f-ac" style="width: 170px;">
+                      <div
+                        style="height: 36px;line-height: 36px; width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
+                        {{ licenseNo }}</div>
+                      <el-button style="cursor: pointer;" type="text" @click="viewfile(oldfileItem)">下载
+                      </el-button>
+                    </div>
+                </el-col>
+              </el-row>
+            </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="quotedetailsdialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <!-- 车辆报价旧页面 -->
     <el-dialog fullscreen lock-scroll title="车辆报价信息详情" :visible.sync="dialogVisible" width="40%" center>
       <!-- 这是报价信息区域 -->
       <el-container>
@@ -1012,6 +1338,7 @@ export default {
       optionsStatus:[],
       dialogVisible: false,
       codedialogVisible: false,
+      quotedetailsdialogVisible:false,
       loading: false,
       pageNum: 1,//页数
       pageSize: 20,//条数
@@ -1385,23 +1712,23 @@ export default {
           this.$api.letter.findByQuoteNo(dy.quoteno).then((resImage) => {
             Object.keys(resImage.data).forEach((keys) => {
               if (resImage.data[keys]) {
-                resImage.data[keys].url = process.env.BASE_URL + resImage.data[keys].url;
+                resImage.data[keys].url =resImage.data[keys].url? process.env.BASE_URL + resImage.data[keys].url:null;
                 switch (keys) {
                   case 'C01':
                   case 'D01':
-                    this.carImageList.push(resImage.data[keys].url)
+                  resImage.data[keys].url?this.carImageList.push(resImage.data[keys].url):''
                     break;
                   case 'C02':
                   case 'D02':
-                    this.ownerImageList.push(resImage.data[keys].url)
+                  resImage.data[keys].url? this.ownerImageList.push(resImage.data[keys].url):''
                     break;
                   case 'C03':
                   case 'D03':
-                    this.policyImageList.push(resImage.data[keys].url)
+                  resImage.data[keys].url?this.policyImageList.push(resImage.data[keys].url):''
                     break;
                   case 'C04':
                   case 'D04':
-                    this.insuredImageList.push(resImage.data[keys].url)
+                  resImage.data[keys].url?this.insuredImageList.push(resImage.data[keys].url):''
                     break;
                   default:
                     break;
@@ -1697,7 +2024,7 @@ export default {
             default:
           }
           this.showInsureList = false;
-          this.dialogVisible = true; //在页面上显示订单
+          this.quotedetailsdialogVisible = true; //在页面上显示订单
         } else {
           this.$message.error("订单获取失败");
         }
@@ -1850,12 +2177,21 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 /deep/ {
   .el-table .row-expand-cover .cell .el-table__expand-icon {
     display: none;
   }
-
+  .el-descriptions__body {
+    padding: 10px 50px;
+    box-sizing: border-box;
+    color: rgb(226, 118, 10);
+  }
+  .el-descriptions-item__label {
+    &:not(.is-bordered-label) {
+      color: #333;
+    }
+  }
   .saomazhifucodeClass .el-dialog__body,
   .saomazhifucodeClass .el-dialog__header {
     padding: 0;
@@ -2145,4 +2481,57 @@ export default {
 .demo-table-expand-time>div {
   margin: 0 10px;
 }
+.icon-img {
+  display: block;
+  width: 30px;
+  height: 30px;
+}
+.Enclosure {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.headers {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 5px 0;
+  font-weight: bold;
+  color: #333;
+}
+/* 内容待定 */
+.headers_Custom >div{
+  padding: 20px 40px;
+  font-size: 16px;
+}
+.headers_Custom >div>span {
+  color: rgb(226, 118, 10);
+}
+
+  .back {
+  color: #303133;
+  font-weight: 700;
+}
+.u-f-ac {
+  -webkit-box-align: center;
+  align-items: center;
+  /* padding: 10px; */
+}
+
+.bodyTitle {
+  height: 40px;
+  background: #f3f3f3;
+  border: 1px solid #dddddd;
+  line-height: 40px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
 </style>