From 0775f9e8398916412959bd8dd58087db6de3d696 Mon Sep 17 00:00:00 2001
From: liupopo <liuzp315@tom.com>
Date: Thu, 16 Nov 2023 14:07:51 +0800
Subject: [PATCH] 11

---
 src/router/index.js         |    4 +
 src/views/mortgage/yqpb.vue | 1257 +++++++++++++++++++++++++++++++++++
 2 files changed, 1261 insertions(+)
 create mode 100644 src/views/mortgage/yqpb.vue

diff --git a/src/router/index.js b/src/router/index.js
index b6802ae..09b745d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -58,6 +58,10 @@ export const constantRoutes = [
     path:"/mortgage",
     name:'mortgage',
     component:()=>import('@/views/mortgage/index.vue')
+  },{
+    path:"/yqpb",
+    name:'yqpb',
+    component:()=>import('@/views/mortgage/yqpb.vue')
   }
   // 404 page must be placed at the end !!!
   // { path: '*', redirect: '/404', hidden: true }
diff --git a/src/views/mortgage/yqpb.vue b/src/views/mortgage/yqpb.vue
new file mode 100644
index 0000000..bc08d8f
--- /dev/null
+++ b/src/views/mortgage/yqpb.vue
@@ -0,0 +1,1257 @@
+<template>
+  <div class="yxt-containers">
+    <div class="yxt-header">
+      <h3>一起拼搏(汇融惠享项目)</h3>
+    </div>
+    <div class="yxt-main">
+      <div class="yxt-main-ha">
+        <div class="cont-vb">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>累计定货量</span>
+              </div>
+              <div>
+                米类 XX吨<br />
+                面类 XX吨<br />
+                油类 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+        <div class="cont-va">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>上月总定货量</span>
+              </div>
+              <div>
+                米类 XX吨<br />
+                面类 XX吨<br />
+                油类 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+        <div class="cont-va">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>本月总定货量</span>
+              </div>
+              <div>
+                米类 XX吨<br />
+                面类 XX吨<br />
+                油类 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+      </div>
+      <div class="yxt-main-hb">
+        <div class="cont-vc">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>仓内平面图</span>
+              </div>
+              <div>
+              </div>
+            </el-card>
+          </div>
+        </div>
+        <div class="cont-va">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>餐饮企业定货量</span>
+              </div>
+              <div>
+                米类 XX吨<br />
+                面类 XX吨<br />
+                油类 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+      </div>
+      <div class="yxt-main-ha">
+        <div class="cont-vb">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>本月目标数</span>
+              </div>
+              <div>
+                米类 XX吨<br />
+                面类 XX吨<br />
+                油类 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+        <div class="cont-va">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>现场视频</span>
+              </div>
+              <div>
+              </div>
+            </el-card>
+          </div>
+        </div>
+        <div class="cont-va">
+          <div class="cont-box">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>支行排行</span>
+              </div>
+              <div>
+                XX支行 XX吨<br />
+                XX支行 XX吨<br />
+                XX支行 XX吨<br />
+              </div>
+            </el-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/gd36524/store'
+  import barlineEachartsVue from "../echarts/barlineEacharts.vue";
+  import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
+  import {
+    getDateRang
+  } from '@/utils/index'
+  export default {
+    components: {
+      barlineEachartsVue,
+      pieLineEachartsVue
+    },
+    data() {
+      return {
+        times: getDateRang('yesterday'),
+        warehouse: [{
+          value: "选项1",
+          label: "常温仓",
+        }],
+        wareValue: "常温仓",
+        day: [{
+          value: "选项1",
+          label: "15日",
+        }],
+        dayValue: "15日",
+        dialogVisible: false,
+        videos: true,
+        lookvideo: false,
+        dialogImageJK: false,
+        info: {
+          creditLimit: "--",
+          useLimit: "--",
+          accountsBalance: "--",
+          accountsReceivable: "--",
+          stockAmount: "--",
+          transitAmount: "--",
+          advancePayment: "--",
+        },
+        chartData: {
+          pledgeRatePercent: "",
+          state: "",
+          bankPledgeRate: "",
+          data: []
+        },
+        cameraList: [],
+        cameraInfo: {
+          name: ""
+        },
+        StatusCountInfo: {
+          //offline离线  online在线
+          offline: "0",
+          online: "0"
+        },
+        spUrl: "",
+        inventoryInfo: {
+          mendian: "--",
+          changwencang: "--",
+        },
+        chartData2: {
+          date: [],
+          changwencang: [],
+          gongyinglian: [],
+        },
+        inventoryList: [
+
+        ]
+      };
+    },
+    created() {
+      this.loadList()
+      this.getOtherList();
+      this.getStatusCount();
+      this.getInventory()
+      this.getReportInventory()
+    },
+    methods: {
+      getReportInventory() {
+        req.getReportInventory().then(res => {
+          console.log('getReportInventory:', res)
+
+          this.chartData2 = {
+            date: res.data.date,
+            changwencang: res.data.changwencang,
+            gongyinglian: res.data.gongyinglian,
+            cancipin: res.data.cancipin,
+            mendian: res.data.mendian,
+            ycMendian: res.data.ycMendian,
+
+          }
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+      getInventory() {
+        req.getInventory(this.times).then(res => {
+          console.log('getInventory:', res)
+
+          this.inventoryList = res.data
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+      handleCloseJK() {
+        this.dialogImageJK = false
+      },
+      getStatusCount() {
+        req.getStatusCount().then(res => {
+          console.log('getStatusCount:', res)
+          this.StatusCountInfo = res.data
+
+
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+      getOtherList() {
+        req.getOtherList().then(res => {
+          console.log('getOtherList:', res)
+          this.cameraList = res.data
+
+          this.cameraInfo = res.data[0]
+          this.getVedioPcLiveById(res.data[0].id)
+
+
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+
+      // 实时
+      getVedioPcLiveById(id) {
+        req.getVedioPcLiveById(id).then(res => {
+          console.log('getVedioPcLiveById:', res)
+          this.spUrl = res.data
+
+
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+
+      // 回放
+      getVedioPcRecById(id) {
+        req.getVedioPcRecById(id).then(res => {
+          console.log('getVedioPcRecById:', res)
+          this.spUrl = res.data
+
+
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+
+
+      loadList() {
+
+        var params = {
+          orderDate: this.times
+        }
+
+        console.log('params:', params)
+
+        req.getProjectDaily(params).then(res => {
+          console.log('getProjectDaily:', res)
+          if (res.data) {
+            this.info = res.data
+
+            this.chartData = {
+
+              pledgeRatePercent: res.data.pledgeRatePercent,
+              state: res.data.state,
+              bankPledgeRate: res.data.bankPledgeRate,
+              data: [{
+                  value: res.data.accountsBalance,
+                  legendname: '种类01',
+                  name: "账户余额",
+                  itemStyle: {
+                    color: "#5087ec"
+                  }
+                },
+                {
+                  value: res.data.accountsReceivable,
+                  legendname: '种类02',
+                  name: "应收账款",
+                  itemStyle: {
+                    color: "#68bbc4"
+                  }
+                },
+                {
+                  value: res.data.stockAmount,
+                  legendname: '种类03',
+                  name: "物质库存价值",
+                  itemStyle: {
+                    color: "#58a55c"
+                  }
+                },
+                {
+                  value: res.data.transitAmount,
+                  legendname: '种类04',
+                  name: "在途货物价值",
+                  itemStyle: {
+                    color: "#f2bd42"
+                  }
+                },
+                {
+                  value: res.data.advancePayment,
+                  legendname: '种类05',
+                  name: "预付款",
+                  itemStyle: {
+                    color: "#ee752f"
+                  }
+                },
+              ]
+            }
+
+          } else {
+            this.info = {}
+
+            this.chartData = {
+              pledgeRatePercent: "",
+              state: "",
+              bankPledgeRate: "",
+              data: []
+            }
+          }
+
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+
+      },
+
+      selectTime(val) {
+        console.log('val:', val)
+        this.times = val
+        this.loadList()
+        this.getInventory()
+        // this.getOtherList();
+        // this.getStatusCount();
+      },
+
+      cameraClock(index) {
+        var item = this.cameraList[index]
+        this.cameraInfo = item
+        this.getVedioPcLiveById(item.id)
+
+      },
+
+      cameraType() {
+        console.log('cameraInfo:', this.cameraInfo)
+        this.videos = !this.videos
+
+        if (this.videos) {
+          this.getVedioPcLiveById(this.cameraInfo.id)
+        } else {
+          this.getVedioPcRecById(this.cameraInfo.id)
+        }
+
+
+      },
+      clivideo() {
+
+        // this.lookvideo = true
+
+        this.dialogImageJK = true
+      },
+
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .yxt-containers {
+    display: flex;
+    background-color: #040C2B;
+    color: #39D6FE;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .yxt-header {
+    display: flex;
+    width: 100%;
+    height: 60px;
+    margin: 0px;
+    padding: 5px;
+  }
+
+  .yxt-main {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .yxt-main-ha {
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    height: 100%;
+    margin: 0px;
+    padding: 10px;
+  }
+
+  .yxt-main-hb {
+    display: flex;
+    flex-direction: column;
+    width: 40%;
+    height: 100%;
+    margin: 0px;
+    padding: 10px;
+  }
+
+  .cont-va {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 33%;
+    margin: 0px;
+    padding: 10px;
+  }
+
+  .cont-vb {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 34%;
+    margin: 0px;
+    padding: 10px;
+  }
+
+  .cont-vc {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 67%;
+    margin: 0px;
+    padding: 10px;
+  }
+
+  .cont-box {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    background-color: #6082fc;
+  }
+
+  .cont-v {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .cont-box {
+    width: 100%;
+    height: 100%;
+    background-color: #6082fc;
+    margin-bottom: 5px;
+  }
+
+  .mortgage {
+    background-color: #040C2B;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0px 20px 20px 20px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .mortgage_tit {
+      line-height: 50px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #39D6FE;
+    }
+
+    .mortgage_top {
+      width: 100%;
+      height: 60%;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+
+      .mortgage_top_item {
+        height: 100%;
+        position: relative;
+        background-color: #031249;
+        padding: 15px;
+
+
+        &:nth-of-type(1) {
+          width: 26%;
+          box-sizing: border-box;
+          padding-right: 30px;
+
+          ::v-deep .el-select {
+            width: 150px;
+            color: #fff;
+
+            .el-input {
+              .el-input__inner {
+                color: #fff;
+                background: transparent;
+                border: none;
+              }
+            }
+          }
+
+          .mortgage_top_item_tit_right {
+            flex: 1;
+            position: relative;
+            justify-content: right;
+
+            .el-select {
+              color: #fff;
+            }
+
+            ::v-deep .el-date-editor {
+              width: 150px;
+
+              .el-input__inner {
+                color: #fff;
+                background: transparent;
+                border: none;
+              }
+
+              .el-input__prefix {
+                display: none;
+              }
+            }
+
+            &::before {
+              content: "";
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              bottom: 5px;
+              border-bottom: solid 4px #fff;
+            }
+          }
+        }
+
+        &:nth-of-type(2) {
+          width: 73%;
+          box-sizing: border-box;
+          padding-right: 50px;
+
+          .mortgage_top_item_tit {
+            .mortgage_top_item_tit_left {
+              width: auto;
+              margin-right: 10px;
+              color: #fff;
+            }
+          }
+
+          ::v-deep .el-select {
+            width: 150px;
+
+            .el-input {
+              .el-input__inner {
+                color: #fff;
+                background: transparent;
+                border: none;
+              }
+            }
+          }
+        }
+
+        .mortgage_top_item_tit_right {
+          flex: 1;
+          position: relative;
+          justify-content: right;
+          color: #fff;
+
+          .el-select {
+            color: #fff;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            bottom: 5px;
+            border-bottom: solid 4px #fff;
+            ;
+          }
+        }
+
+        .mortgage_top_item_tit {
+          height: 40px;
+          display: flex;
+          position: relative;
+          justify-content: space-between;
+
+          .mortgage_top_item_tit_left {
+            width: auto;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+            font-size: 20px;
+
+            span {
+              margin-right: 10px;
+            }
+
+            ::v-deep .svg-icon {
+              cursor: pointer;
+              width: 24px !important;
+              height: 24px !important;
+            }
+          }
+
+          .mortgage_top_item_tit_right {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: right;
+            align-items: center;
+
+            .el-select {
+              color: #fff;
+            }
+
+            span {
+              color: #fff;
+              margin-right: 20px;
+            }
+          }
+        }
+
+        .mortgage_top_item_coner {
+          width: 100%;
+          height: calc(100% - 40px);
+          position: relative;
+
+          .mortgage_top_item_coner_eat {
+            width: 100%;
+            height: 90%;
+          }
+
+          .mortgage_top_item_coner_con {
+            width: 100%;
+            height: 8%;
+            display: flex;
+            margin-top: -10px;
+            margin-bottom: 10px;
+            align-items: center;
+            box-sizing: border-box;
+            padding-left: 30px;
+            padding-right: 30px;
+            justify-content: space-between;
+
+            span {
+              color: #49a6e2;
+              font-weight: bold;
+              font-size: 18px;
+            }
+          }
+        }
+
+        .mortgage_top_item_top {
+          width: 100%;
+          height: 85%;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .mortgage_top_item_top_btn1 {
+            //二通道
+            // z-index: 100;
+            position: absolute;
+            top: 83%;
+            left: 71%;
+            width: 7.5%;
+            height: 9%;
+            background-color: #f0f;
+            /*设置透明度，0为完全透明，1为不透明*/
+            // opacity: 0;
+          }
+
+          .mortgage_top_item_top_btn2 {
+            //  三通道
+            // z-index: 100;
+            position: absolute;
+            top: 83.5%;
+            left: 58.5%;
+            width: 8%;
+            height: 8%;
+            background-color: #ff0;
+            /*设置透明度，0为完全透明，1为不透明*/
+            // opacity: 0;
+          }
+
+          .mortgage_top_item_top_btn3 {
+            //  四通道
+            // z-index: 100;
+            position: absolute;
+            top: 83%;
+            left: 47%;
+            width: 7%;
+            height: 9%;
+            background-color: #00f;
+            /*设置透明度，0为完全透明，1为不透明*/
+            // opacity: 0;
+          }
+
+          .mortgage_top_item_top_btn4 {
+            //  一通道
+            // z-index: 100;
+            position: absolute;
+            top: 83.5%;
+            left: 82.5%;
+            width: 7.5%;
+            height: 8%;
+            background-color: #0ff;
+            /*设置透明度，0为完全透明，1为不透明*/
+            // opacity: 0;
+          }
+        }
+
+        .mortgage_top_item_cons {
+          width: 100%;
+          height: calc(100% - 50px);
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+
+          .mortgage_top_item_cons_left {
+            width: 58%;
+            height: 100%;
+            position: relative;
+          }
+
+          .mortgage_top_item_cons_right {
+            width: 40%;
+            height: 100%;
+            box-sizing: border-box;
+            padding-left: 30px;
+            position: relative;
+
+            .mortgage_top_item_cons_right_top {
+              height: 50%;
+              width: 100%;
+              margin-bottom: 10px;
+              position: relative;
+
+              .mortgage_top_item_cons_right_top_video {
+                width: 100%;
+                height: 90%;
+                position: relative;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .mortgage_top_item_cons_right_top_foor {
+                margin-top: 35px;
+                width: 100%;
+                height: 10%;
+                display: flex;
+                position: relative;
+
+                .invie {
+                  width: auto;
+                  height: 100%;
+                  color: #fff;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .huishie {
+                  flex: 1;
+                  z-index: 100;
+                  height: 100%;
+                  display: flex;
+                  color: #fff;
+                  align-items: center;
+                  justify-content: right;
+
+                  span {
+                    margin-left: 10px;
+                  }
+                }
+              }
+            }
+
+            .mortgage_top_item_cons_right_bom {
+              height: calc(50% - 10px);
+              width: 100%;
+              position: relative;
+              margin-top: 50px;
+
+              .titele {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                align-items: center;
+
+                .titele_left {
+                  color: #fff;
+                  width: auto;
+                  height: 100%;
+                  line-height: 40px;
+                  margin-right: 5px;
+                }
+
+                .titele_right {
+                  flex: 1;
+                  position: relative;
+                  height: 100%;
+
+                  &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: 13px;
+                    left: 0px;
+                    width: 100%;
+                    height: 100%;
+                    border-bottom: solid 4px #dadada;
+                  }
+                }
+              }
+
+              .containers {
+                width: 100%;
+                height: calc(100% - 80px);
+                position: relative;
+                display: flex;
+                background: transparent;
+                justify-content: center;
+                flex-wrap: wrap;
+                margin-top: 10px;
+
+                .container_item1 {
+                  width: 100%;
+                  height: 30px;
+                  line-height: 30px;
+                  color: #E43961;
+                  font-size: 16px;
+                  font-family: '微软雅黑';
+                  box-sizing: border-box;
+                  padding-left: 20px;
+
+                  span {
+                    margin-left: 10px;
+                  }
+                }
+
+                .container_item2 {
+                  width: 100%;
+                  height: 30px;
+                  line-height: 30px;
+                  color: #A0D090;
+                  font-size: 16px;
+                  font-family: '微软雅黑';
+                  box-sizing: border-box;
+                  padding-left: 20px;
+
+                  span {
+                    margin-left: 10px;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .mortgage_top_item_bom {
+
+          height: 15%;
+          width: 100%;
+          display: flex;
+          position: relative;
+
+          .mortgage_top_item_bom_left {
+            display: flex;
+            width: auto;
+            height: 100%;
+            margin-top: -25px;
+            align-items: flex-end;
+
+            .mortgage_top_item_bom_left_item {
+              width: 130px;
+              display: flex;
+              height: 45px;
+              cursor: pointer;
+              background: #018ad2;
+              color: #fff;
+              justify-content: center;
+              align-items: center;
+              border-right: solid 1px #dadada;
+
+              ::v-deep .svg-icon {
+                cursor: pointer;
+                width: 16px !important;
+                height: 16px !important;
+              }
+
+              &:nth-of-type(1) {
+                span {
+                  width: 30px;
+                  height: 30px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  border-radius: 50%;
+                  background: #11c155;
+                  margin-right: 5px;
+                }
+              }
+
+              &:nth-of-type(2) {
+                span {
+                  width: 30px;
+                  height: 30px;
+                  border-radius: 50%;
+                  background: #f57f19;
+                  margin-right: 5px;
+                }
+              }
+
+              &:nth-of-type(3) {
+                span {
+                  width: 30px;
+                  height: 30px;
+                  border-radius: 50%;
+                  background: #5b9cf7;
+                  margin-right: 5px;
+                }
+              }
+            }
+          }
+
+          .mortgage_top_item_bom_right {
+            flex: 1;
+            margin-top: -25px;
+            height: 100%;
+            display: flex;
+            align-items: flex-end;
+            justify-content: right;
+
+            .mortgage_top_item_bom_right_item {
+              width: 130px;
+              height: 45px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              background: #e9f7fa;
+              border: solid #71b9f1 1px;
+
+              ::v-deep .svg-icon {
+                cursor: pointer;
+                width: 24px !important;
+                height: 24px !important;
+              }
+
+              &:nth-of-type(1) {
+                color: #6082fc;
+
+                span {
+                  background: #1d62e2;
+                  width: 30px;
+                  height: 30px;
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  margin: 0px 3px;
+                }
+
+                p {
+                  color: #6082fc;
+                  font-weight: bold;
+                }
+              }
+
+              &:nth-of-type(2) {
+                color: #6e7173;
+
+                span {
+                  background: #4b4b4b;
+                  width: 30px;
+                  height: 30px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  border-radius: 50%;
+                  margin: 0px 3px;
+                }
+
+                p {
+                  color: #4d4d4e;
+                  font-weight: bold;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .mortgage_bom {
+      width: 100%;
+      height: calc((100% - 75px) / 2);
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .mortgage_bom_item {
+        height: 100%;
+        background-color: #031249;
+
+        &:nth-of-type(1) {
+          width: 26%;
+          box-sizing: border-box;
+          padding: 15px;
+
+          .mortgage_bom_item_cont {
+
+            box-sizing: border-box;
+            padding: 20px;
+
+            .mortgage_bom_item_cont_item {
+              padding-left: 10px;
+              padding-right: 10px;
+              margin-top: 5px;
+
+              &:last-child {
+                border-bottom: none;
+              }
+            }
+
+
+          }
+        }
+
+        &:nth-of-type(2) {
+          width: 43%;
+          box-sizing: border-box;
+          padding: 15px;
+          margin-left: 30px;
+        }
+
+        &:nth-of-type(3) {
+          width: 28%;
+          padding: 15px;
+
+          .mortgage_bom_item_cont {
+            box-sizing: border-box;
+            padding-left: 45px;
+
+            .mortgage_bom_item_cont_item {
+              &:last-child {
+                border-bottom: none;
+              }
+            }
+          }
+        }
+
+        .mortgage_bom_item_tit {
+          height: 40px;
+          width: 100%;
+          position: relative;
+          margin-bottom: 10px;
+          display: flex;
+
+          .mortgage_bom_item_tit_left {
+            width: auto;
+            display: flex;
+            align-items: center;
+            margin-right: 5px;
+            height: 100%;
+            font-size: 20px;
+            color: #fff;
+
+            span {
+              margin-right: 10px;
+            }
+          }
+
+          .mortgage_bom_item_tit_right {
+            flex: 1;
+            position: relative;
+            display: flex;
+            justify-content: right;
+            height: 100%;
+
+            ::v-deep .el-select {
+              width: 150px;
+
+              .el-input {
+                .el-input__inner {
+                  color: #fff;
+                  background: transparent;
+                  border: none;
+                }
+              }
+            }
+          }
+
+          .mortgage_bom_item_tit_right::before {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-bottom: solid 4px #dadada;
+            bottom: 5px;
+            left: 0px;
+          }
+        }
+
+        .mortgage_bom_item_cont {
+          width: 100%;
+          height: calc(100% - 100px);
+          position: relative;
+
+          .mortgage_bom_item_cont_list {
+            width: 100%;
+            height: calc(100% / 6);
+            padding-top: 15px;
+
+            .mortgage_bom_item_cont_list_item {
+              width: 100%;
+              margin-top: 15px;
+              height: calc(100% / 5);
+              position: relative;
+              display: flex;
+              padding-bottom: 20px;
+              border-bottom: solid 1px #dadada;
+
+              .mortgage_bom_item_cont_list_item_left {
+                width: 50%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                color: #0EC0B4;
+                margin-left: 10px;
+              }
+
+              .mortgage_bom_item_cont_list_item_right {
+                margin-right: 10px;
+                width: 50%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: right;
+                color: #FF7E3F;
+              }
+            }
+          }
+
+          .mortgage_bom_item_cont_item {
+            width: 100%;
+            height: calc(100% / 5);
+            position: relative;
+            display: flex;
+            border-bottom: solid 1px #dadada;
+
+            .mortgage_bom_item_cont_item_left {
+              width: 50%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              color: #0EC0B4;
+            }
+
+            .mortgage_bom_item_cont_item_right {
+              width: 50%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: right;
+              color: #FF7E3F;
+            }
+          }
+        }
+
+        .ditus {
+          height: 160px;
+          width: 100%;
+          position: relative;
+          cursor: pointer;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    ::v-deep .svg-icon {
+      cursor: pointer;
+      width: 30px !important;
+      height: 30px !important;
+
+    }
+
+    .iframemap {
+      width: 100%;
+      height: 1000px;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .loockvideo {
+      width: 100%;
+      height: 300px;
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>