centaline-data-driven 1.5.20 → 1.5.22

package/src/centaline/dynamicDetail/src/dynamicEstateBuildingDetail.vue

@@ -0,0 +1,1659 @@
+<template>
+  <div ref="main" class="main" v-if="model !== null">
+    <div class="details-content">
+      <div ref="header" class="details-head base-box mb10">        
+        <div class="head-info">
+          <div class="title">
+            <!-- <span>{{ model.fields1Dic.StatusName.value }}</span> -->
+            <!-- <span class="head-line"></span> -->
+            <!-- <span class="cursorLink" @click="fieldClickHandler(model.actionRouterEstate, $event)">{{ model.fields1Dic.EstateName.value }}</span> -->
+            <span>{{ model.fields1Dic.BuildingName.value }}</span>
+            <span v-if="model.fields1Dic.BuildingRightsName.value">{{ model.fields1Dic.BuildingRightsName.value }}</span>
+            <!-- <img v-if="model.actionRouterFavorite" :src="model.actionRouterFavorite.imgUrl" alt="" @click="fieldClickHandler(model.actionRouterFavorite, $event)" class="collection" /> -->
+            <component v-if="model.otherTradeActionRouter !== null" v-bind="model.otherTradeActionRouter" class="max-default w93"
+              :is="model.otherTradeActionRouter.is" :vmodel="model.otherTradeActionRouter" :api="model.optionApi" style="margin-left: 10px;"
+              @click="fieldClickHandler(model.otherTradeActionRouter, $event)"></component>
+          </div>
+          <div class="title-other">
+            <span v-if="model.fields1Dic.Address1.value">{{ model.fields1Dic.Address1.label }}{{ model.fields1Dic.Address1.value }}</span>
+            <!-- <span>{{ model.fields1Dic.GovNo.label }}{{ model.fields1Dic.GovNo.value }}</span> -->
+            <!-- <span class="mr10">{{model.fields1Dic["DistrictName"].value + model.fields1Dic.AreaName.value}}</span> -->
+            <img v-if="model.actionRouterMap" @click="fieldClickHandler(model.actionRouterMap, $event)" :src="model.actionRouterMap.imgUrl || model.fields1Dic.LocationUrl.value" alt="" class="location cursor"/>
+          </div>
+          <div class="title-tags">
+            <div class="t-tag" v-for="(tag, index) in model.actionRouterLabel" :key="index" 
+            :style="{color: tag.textColor,backgroundColor: tag.bgColor,borderColor: tag.borderColor,}">
+              {{ tag.label }}
+            </div>
+          </div>
+          <div v-if="model.fields1Dic.PropertyDepict && model.fields1Dic.PropertyDepict.value !== ''" v-html="model.fields1Dic.PropertyDepict.value"
+            style="font-weight: bold; font-size: 13px; margin-top: 10px; background: rgb(236, 249, 255); flex: 1; align-items: center; padding: 5px; border-radius: 5px;">
+          </div>
+        </div>
+        <div class="head-but" :key="actionRoutersKey">
+          <div>
+            <component class="max-report w93"
+              v-if="model.actionRouters !== null && model.actionRouters[0]"
+              :is="model.actionRouters[0].is" :vmodel="model.actionRouters[0]" :api="model.optionApi"
+              @click="fieldClickHandler(model.actionRouters[0], $event)">
+            </component>
+            <component class="max-report w93"
+              v-if="model.actionRouters !== null && model.actionRouters[1]"
+              :is="model.actionRouters[1].is" :vmodel="model.actionRouters[1]" :api="model.optionApi"
+              @click="fieldClickHandler(model.actionRouters[1], $event)">
+            </component>
+            <button type="button" class="el-button el-button--info el-button--mini max-report rel w93"
+              v-if="model.actionRoutersMoreList !== null && model.actionRoutersMoreList.length > 0">
+              <!-- <img src="../../../assets/dian.png" alt="" class="report" /> -->
+              <i class="el-icon-more"></i> 
+              <ul class="report-cont">
+                <li v-for="(col, index) in model.actionRoutersMoreList" :key="index" v-if="col.show !== false">
+                  <component class="max-report w93" :is="col.is" :vmodel="col" :api="model.optionApi"
+                    @click="fieldClickHandler(col, $event)"></component>
+                </li>
+              </ul>
+            </button>
+            <component v-else-if="model.actionRouters !== null && model.actionRouters.length === 3" class="max-report w93"
+              :is="model.actionRouters[2].is" :vmodel="model.actionRouters[2]" :api="model.optionApi"
+              @click="fieldClickHandler(model.actionRouters[2], $event)">
+            </component>
+            <img :class="{domDisabled:flagDisabledPrev,}" @click="clickPrevHandler"
+              src="../../../assets/T1.png" alt="" style="width: 26px;height: 26px;vertical-align: bottom;margin-left: 10px;cursor: pointer;"/>
+            <img :class="{domDisabled:flagDisabledNext,}" @click="clickNextHandler"
+              src="../../../assets/B1.png" alt="" style="width: 26px;height: 26px;vertical-align: bottom;margin-left: 10px;margin-right: 13px;cursor: pointer;"/>
+          </div>
+        </div>
+      </div>
+      <div v-if="model.flagHiddenSensitiveInfo" :style="{height:flagHiddenSensitiveInfoHeight+'px'}" style="display: flex;align-items: center;justify-content: center;">
+        <div v-html="model.hiddenSensitiveInfoReason"></div>
+      </div>
+      <div v-if="!model.flagHiddenSensitiveInfo" ref="detail" class="details-mid y-auto" @scroll="scrollHandle($event)" :style="{height: model.detailHeight ? model.detailHeight + 'px' : '780px',}">
+        <div ref="midl" class="mid-l" :style="{width: model.midlWidth ? model.midlWidth + 'px' : '1200px',}">
+          <!-- 图片内容部分 -->
+          <div class="hous-info base-box">
+            <div class="info-conten">
+              <div class="hous-t">
+                <ct-albums :mediaAlbums="model.mediaAlbums" :noMediaUrl="model.noMediaUrl" @addMedia="addMedia" :title="model.title">
+                </ct-albums>
+              </div>
+              <div class="hous-b">
+                <el-popover  v-if="model.routerForQRCode !== null" placement="left-start" trigger="hover" @show="fieldClickHandler(model.routerForQRCode, $event)">
+                  <div style="border-bottom:none">
+                    <div style="text-align: center;margin-bottom:10px;">APP扫码</div>
+                    <div style="width:200px; height:200px;"><img :src="model.QRCode"  @click="fieldClickHandler(model.routerForQRCode, $event)" /></div>
+                    <div style="text-align: center;margin-top:10px;">点击二维码刷新</div>
+                  </div>
+                  <img class="code-ewm" slot="reference" :src="model.fields1Dic.ewmUrl.value" />
+                </el-popover>
+                <div class="info-row">
+                  <div v-if="model.fields1Dic.Price" class="row-i">
+                    <div class="rowLable">{{ model.fields1Dic.Price.label }}</div>
+                    <div style="height:26px;">
+                    <span class="base-clolr expand-f" v-html="model.fields1Dic.Price.value"></span>
+                    <span class="base-clolr">{{model.fields1Dic.Price.unitName}}</span>                    
+                    <component v-if="model.actionRouterPrice" class="ml10"
+                      :is="model.actionRouterPrice.is" :vmodel="model.actionRouterPrice" :api="model.optionApi" 
+                      @click="fieldClickHandler(model.actionRouterPrice, $event)">
+                    </component>
+                   </div>
+                  </div>
+                  <div v-if="model.fields1Dic.PriceUnit" class="row-i">
+                    <div class="rowLable">{{ model.fields1Dic.PriceUnit.label }}</div>
+                    <div>
+                      <span class="base-clolr expand-f" v-html="model.fields1Dic.PriceUnit.value"></span>
+                      <span class="base-clolr">{{model.fields1Dic.PriceUnit.unitName}}</span>
+                    </div>
+                  </div>
+                  <div v-if="model.fields1Dic.PriceLine" class="row-i row-b">
+                    <div class="rowLable">{{ model.fields1Dic.PriceLine.label }}</div>
+                    <div>
+                      {{ model.fields1Dic.PriceLine.value}}{{ model.fields1Dic.PriceLine.unitName }}
+                    </div>
+                  </div>
+                </div>
+                <div class="info-row" style="padding: 10px 0;">
+                  <div v-if="model.fields1Dic.PriceLine" class="row-i row-b">
+                    <div class="rowLable">{{ model.fields1Dic.MarketRateOfReturn.label }}</div>
+                    <div>
+                      <span>{{ model.fields1Dic.MarketRateOfReturn.value }} </span>
+                    <span>{{ model.fields1Dic.MarketRateOfReturn.unitName }}</span>
+                    </div>
+                  </div>
+                  <div v-if="model.fields1Dic.EstimatePriceRent" class="row-i row-b">
+                    <div class="rowLable">{{ model.fields1Dic.EstimatePriceRent.label }}</div>
+                    <div> 
+                      {{ model.fields1Dic.EstimatePriceRent.value }}
+                      <span>{{ model.fields1Dic.EstimatePriceRent.unitName }}</span>
+                    </div>
+                  </div>
+                  <div v-if="model.fields1Dic.EstimatePriceRentUnit"  class="row-i row-b">
+                    <div class="rowLable">{{ model.fields1Dic.EstimatePriceRentUnit.label }}</div>
+                    <div>
+                      <span>{{ model.fields1Dic.EstimatePriceRentUnit.value }}</span>
+                    <span>{{ model.fields1Dic.EstimatePriceRentUnit.unitName }}</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="info-mid">
+                  <div class="mid-i" v-if="model.fields1Dic.Area">
+                    <div class="rowLable">{{ model.fields1Dic.Area.label }}</div>
+                    <div>
+                      {{ model.fields1Dic.Area.value}}{{ model.fields1Dic.Area.unitName }}
+                    </div>
+                  </div>
+                  <div class="mid-i" v-if="model.fields1Dic.AreaNet">
+                    <div class="rowLable">{{ model.fields1Dic.AreaNet.label }}</div>
+                    <div>
+                      {{ model.fields1Dic.AreaNet.value}}{{ model.fields1Dic.AreaNet.unitName }}
+                    </div>
+                  </div>
+                  <div class="mid-i" v-if="model.fields1Dic.FloorName">
+                    <div class="rowLable">{{ model.fields1Dic.FloorName.label }}</div>
+                    <div>{{ model.fields1Dic.FloorName.value }}</div>
+                  </div>
+                  <div class="mid-i" v-if="model.fields1Dic.PropertyDirectionID">
+                    <div class="rowLable">{{ model.fields1Dic.PropertyDirectionID.label }}</div>
+                    <div>{{ model.fields1Dic.PropertyDirectionID.value }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-for="(col, index) in collapse" :key="index"  class="info-conten-b" v-show="allInfo">
+              <div class="info-row">
+                <div  v-for="(c, i) in col" :key="i"  :class="c.singleLine === true ? 'row-i100' : 'row-i'">
+                  <span class="rowLable">{{ c.label }}</span><span class="rowValue">{{ c.value }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="open-mero" @click="allInfo = !allInfo">
+              {{ allInfo ? "收起全部" : "查看全部" }}
+              <i :class="allInfo ? 'more-colose' : 'mero-open'"></i>
+            </div>
+          </div>
+          <div class="contacts-info base-box">
+            <ct-contactList v-if="model.contactApiRouter !== null"  :apiRouter="model.contactApiRouter" :key="'contact' + refershKey"></ct-contactList>
+          </div>
+          <div class="tablist-info base-box" style="padding-bottom: 0px;">
+            <div class="details-tabs-box">
+              <!--计算占用宽度-->
+              <div style="position: relative">
+                <div ref="tabsbox" style="position: absolute; left: -10000px">
+                  <el-tabs>
+                    <el-tab-pane v-for="(col, index) in model.tags1" :key="col.appID" :index="index.toString()" :name="index.toString()">
+                      <div slot="label" v-html="col.appName" :ref="'StatisticsItem' + index"></div>
+                    </el-tab-pane>
+                  </el-tabs>
+                </div>
+              </div>
+              <!--展示-->
+              <div>
+                <div v-if="showData.length === 1">
+                  <el-tabs :value="model.activeIndex1" @tab-click="handleSelect">
+                    <el-tab-pane v-for="(col, index) in showData[0]" :key="col.appID" :index="index.toString()" :name="index.toString()">
+                      <div slot="label" v-html="col.appName"></div>
+                    </el-tab-pane>
+                  </el-tabs>
+                </div>
+                <div v-if="showData.length > 1" style="position: relative">
+                  <el-tabs :value="model.activeIndex1" @tab-click="handleSelect">
+                    <el-tab-pane v-for="(col, index) in showData[0]" :key="col.appID" :index="index.toString()" :name="index.toString()">
+                      <div slot="label" v-html="col.appName"></div>
+                    </el-tab-pane>
+                  </el-tabs>
+                  <div class="more-dropdown">
+                    <el-dropdown trigger="click" placement="bottom">
+                      <span class="el-dropdown-link svgIcon">
+                        <!-- <div class="my-icon-more"></div> -->
+                        <img :src="iconSort" alt="" width="100%" />
+                      </span>
+                      <el-dropdown-menu slot="dropdown" class="tabsMore">
+                        <el-dropdown-item v-for="(col, index) in showData[1]" :key="col.appID" :index="index.toString()"
+                          :name="index.toString()" :class="{ 'is-active': showData[0].length + index == model.activeIndex1,}">
+                          <div @click="handleDropDown(col, index)" :value="model.activeIndex1">
+                            <div slot="label" v-html="col.appName"></div>
+                          </div>
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+                </div>
+                <ct-searchlist v-if="model.searchConditionApiTags1" :key="'list' + listKey.toString() + refershKey"
+                  :pageHeight="'450px'" :from="'detail'" :apiParam="model.paramDataTags1" :flagFocus="false"
+                  :searchConditionApi="model.searchConditionApiTags1" :searchDataApi="model.searchDataApiTags1">
+                </ct-searchlist>
+              </div>
+            </div>
+          </div>
+
+          <div class="contribute-info base-box" v-if="model._commissionList !== null">
+            <div class="title-l">贡献人信息</div>
+            <div class="contribute-list">
+              <div class="contribute-i" v-for="(m, index) in model._commissionList" :key="index">
+                <img :src="m.regEmpImgUrl" alt="图片" />
+                <div>
+                  <div style="display: flex">
+                    <div class="user-title" v-html="m.empNameCN"></div>
+                    <div class="user-title" style="margin-left: 10px" v-html="m.commissionPercentDesc"></div>
+                  </div>
+                  <div class="user-but" v-html="m.commissionRoleName"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dynamicElement from "../../mixins/dynamicElement";
+import dynamicSearchList from "../../dynamicSearchList/src/dynamicSearchList.vue";
+import dynamicContactList from "./dynamicContactList.vue";
+import dynamicAlbums from "./dynamicAlbums.vue";
+import dynamicMatchCustomer from "./dynamicMatchCustomer.vue";
+export default {
+  name: "ct-EstateBuildingDetail",
+  mixins: [dynamicElement],
+  components: {
+    "ct-searchlist": dynamicSearchList,
+    "ct-contactList": dynamicContactList,
+    "ct-albums": dynamicAlbums,
+    "ct-MatchCustomer": dynamicMatchCustomer,
+  },
+  props: {
+    vmodel: Object,
+    api: String,
+    apiParam: Object,
+    parentModel: Object,
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      allInfo: false,
+      allIn: false,
+      refershKey: 0,
+      listKey: 0,
+      flagDisabledPrev:false,
+      flagDisabledNext:false,
+	    showData: [],
+      FlagStatistics: false,
+      dropDownSelected: false,
+      iconSort: require("../../../assets/sort.png"),
+      actionRoutersKey: Math.random(),
+      flagHiddenSensitiveInfoHeight:0,
+    };
+  },
+  mounted() {
+    var self = this;
+    this.$nextTick(function () {
+      if(self.parentModel && self.parentModel.$refs && self.parentModel.$refs.table){
+        if(self.parentModel.$refs.table.model.selectIndex <= 0){
+          self.flagDisabledPrev=true;
+        }
+        if(self.parentModel.$refs.table.model.listData && self.parentModel.$refs.table.model.selectIndex ===self.parentModel.$refs.table.model.listData.length - 1){
+          self.flagDisabledNext=true;
+        }
+      }
+      else{
+        self.flagDisabledPrev=true;
+        self.flagDisabledNext=true;
+      }
+
+      if (self.vmodel) {
+        self.load(self.vmodel);
+      } 
+      else if (typeof self.source !== "undefined") {
+        self.loaderObj.Detail(self.source, null, self.load);
+      } 
+      else if (typeof self.api !== "undefined") {
+        self.loaderObj.Detail(self.api, self.apiParam, self.load);
+      }
+    });
+  },
+  activated() {
+    this.$nextTick(() => {
+      this.setDetailHeight();
+    });
+  },
+  methods: {
+    showStats() {
+      var self = this;
+      this.$nextTick(function () {
+        if (self.model.tags1.length > 0) {
+          var showIndex = 0;
+          var sumWidth = 0;
+          for (var i = 0; i < self.model.tags1.length; i++) {
+            var moreWidth = 22;
+            
+            if(self.$refs["StatisticsItem" + i][0] && self.$refs["StatisticsItem" + i][0].offsetParent){
+              sumWidth = sumWidth + self.$refs["StatisticsItem" + i][0].offsetParent.offsetWidth;
+            }
+            var nextWidth = 0;
+            if (i + 1 < self.model.tags1.length) {
+              try {
+                nextWidth =  self.$refs["StatisticsItem" + (i + 1)][0].offsetParent.offsetWidth;
+              } catch (e) { }
+            } 
+            else {
+              moreWidth = 0;
+            }
+            if (self.model.midlWidth - 42 < sumWidth + moreWidth) {
+              showIndex = i;
+              break;
+            } 
+            else if (self.model.midlWidth - 42 < nextWidth + moreWidth) {
+              showIndex = i + 1;
+              break;
+            }
+          }
+          if (showIndex > 0) {
+            self.showData = [
+              self.model.tags1.slice(0, showIndex),
+              self.model.tags1.slice(showIndex),
+            ];
+          } 
+          else {
+            self.showData = [self.model.tags1];
+          }
+        }
+      });
+    },
+    load(data) {
+      var self = this;
+      this.model = data;
+      this.model.$vue = self;
+      this.refershKey = this.refershKey + 1;
+      this.loadFields();
+      if (this.model.tags2 && this.model.tags2[0]) {
+        this.model.getTags2List(0);
+      }
+      if (typeof window.localStorage !== "undefined") {
+        var tagkey = window.localStorage.getItem("detailtagkey");
+        if(self.model.tags1){
+          for (var i = 0; i < self.model.tags1.length; i++) {
+            if (tagkey == self.model.tags1[i].appID) {
+              self.model.activeIndex1 = i.toString();
+              if (self.model.tags1 && self.model.tags1[i]) {
+                self.listKey = self.listKey + 1;
+                self.model.searchConditionApiTags1 =
+                  self.model.tags1[i].searchConditionAction || "";
+                self.model.searchDataApiTags1 =
+                  self.model.tags1[i].searchDataAction || "";
+                self.model.paramDataTags1 = self.model.tags1[i].paramData || "";
+              }
+            }
+          }
+        }
+      }
+      this.loadOperation();
+      this.loadCommission();
+      this.setDetailHeight();
+      this.$nextTick(() => {
+        window.addEventListener("resize", (ev) => {
+          self.setDetailHeight();
+        });
+      });
+      //通知父组件加载完成
+      this.$emit("loaded", this.model);
+    },
+    loadFields() {
+      var self = this;
+      if(!self.model.fields2Dic) return;
+      self.collapse = [];
+      var collapseItemArr = [];
+      var col = 0;
+      var colCount = 4;
+      self.model.fields2Dic.forEach((v, index) => {
+        if (v.type === 13) {
+          collapseItemArr = [];
+          col = 0;
+        } 
+        else if (v.singleLine) {
+          if (collapseItemArr.length > 0) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+          }
+          collapseItemArr.push(v);
+          self.collapse.push(collapseItemArr);
+          collapseItemArr = [];
+          col = 0;
+        } 
+        else if (v.spanCols) {
+          collapseItemArr.push(v);
+          col = col + v.spanCols;
+          if (col === colCount || index === self.model.fields2Dic.length - 1) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+            col = 0;
+          }
+        } 
+        else {
+          collapseItemArr.push(v);
+          col = col + 1;
+          if (col === colCount || index === self.model.fields2Dic.length - 1) {
+            self.collapse.push(collapseItemArr);
+            collapseItemArr = [];
+            col = 0;
+          }
+        }
+      });
+    },
+    loadOperation() {
+      this.model._operationList = null;
+      this.model._operationRouters = [];
+      this.model.getOperationList();
+    },
+    loadCommission() {
+      this.model.getCommissionList();
+    },
+    lookOwner() {
+      this.codeOwner = true;
+    },
+    loadBaseInfo(field) {
+      this.model.loadBaseInfo();
+      if(field.id == "PropertyChanceQuestion"){
+        this.loadOperation();
+      }
+    },
+    loadFavorite() {
+      this.model.loadFavorite();
+    },
+    loadqrCode() {
+      this.model.loadqrCode();
+    },
+    handleClick(tab, event) {
+      let i = tab.index;
+      if (this.model.tags2 && this.model.tags2[i]) {
+        this.model.getTags2List(i);
+      }
+    },
+    setDetailHeight() {
+      this.$nextTick(() => {
+        if (this.$refs.detail && this.$refs.main) {
+          var h1 = document.body.clientHeight | 0;
+          var h2 = this.$refs.detail.offsetTop | 0;
+          let detailHeight = h1 - h2 - this.top;
+          this.model.detailHeight = detailHeight < 40 ? 350 : detailHeight;
+
+          var w1 = this.$refs.detail.clientWidth | 0;
+          var w2 = this.$refs.midr.clientWidth | 0;
+          this.model.midlWidth = w1 - w2 - 10;
+
+		      this.showStats();
+        }
+        if(this.$refs.main){
+          var m1 = document.body.clientHeight | 0;
+          var m2 = this.$refs.header.clientHeight | 0;
+          this.flagHiddenSensitiveInfoHeight=m1-m2-this.top;
+        }
+      });
+    },
+    handleSelect(key, keyPath) {
+      let i = key.index;
+      this.model.activeIndex1 = i;
+      if (this.model.tags1 && this.model.tags1[i]) {
+        this.listKey = this.listKey + 1;
+        this.model.searchConditionApiTags1 =
+          this.model.tags1[i].searchConditionAction || "";
+        this.model.searchDataApiTags1 =
+          this.model.tags1[i].searchDataAction || "";
+        this.model.paramDataTags1 = this.model.tags1[i].paramData || "";
+        window.localStorage.setItem("detailtagkey", this.model.tags1[i].appID); //存储
+      }
+    },
+	  handleDropDown(key, index) {
+      let i = index;
+      this.model.activeIndex1 = (this.showData[0].length + i).toString();
+      let dropDownData = this.showData[1];
+      this.dropDownSelected = true;
+      if (dropDownData && dropDownData[i]) {
+        this.listKey = this.listKey + 1;
+        this.model.searchConditionApiTags1 = dropDownData[i].searchConditionAction || "";
+        this.model.searchDataApiTags1 = dropDownData[i].searchDataAction || "";
+        this.model.paramDataTags1 = dropDownData[i].paramData || "";
+        window.localStorage.setItem("detailtagkey", dropDownData[i].appID); //存储
+      }
+    },
+    fieldClickHandler(field) {
+      if(field == null || field==undefined){
+        return;
+      }
+
+      var self = this;
+      var callBack = null;
+      let submitData = {};
+      var router = this.model.actionRoutersAll.find((v) => {
+        return v.id === field.id;
+      });
+      if (router == undefined && this.model.otherTradeActionRouter) {
+        if (field.id === this.model.otherTradeActionRouter.id) {
+          router = this.model.otherTradeActionRouter;
+        }
+      }
+      if (router == undefined && this.model.operationRouters) {
+        router = this.model.operationRouters.find((v) => {
+          return v.id === field.id;
+        });
+        callBack = "loadOperation";
+      }
+      if (router == undefined && this.model.actionRouterFavorite) {
+        if (field.id === this.model.actionRouterFavorite.id) {
+          router = this.model.actionRouterFavorite;
+        }
+      }
+      if (router == undefined && this.model.routerForQRCode) {
+        if (field.id === this.model.routerForQRCode.id) {
+          router = this.model.routerForQRCode;
+        }
+      }
+      if (router == undefined && this.model.dutyHistoryApiRouter) {
+        if (field.id === this.model.dutyHistoryApiRouter.id) {
+          router = this.model.dutyHistoryApiRouter;
+        }
+      }
+      if (router == undefined && this.model.actionRouterMap) {
+        if (field.id === this.model.actionRouterMap.id) {
+          router = this.model.actionRouterMap;
+        }
+      }
+
+      if (router) {
+        if (field.isSubmitDataFromSelf) {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = field.list[field.listIndex].code;
+          });
+        } 
+        else {
+          router.submitFormField.forEach((v) => {
+            submitData[v] = self.model.fields1Dic[v].value;
+          });
+        }
+        if (router.id == "PropertyEdit" 
+          || router.id == "QuestionAppeal"
+          || router.id == "PropertyChanceQuestion"
+          || router.id == "TranToActive"
+          || router.id == "TranToNotActive"
+          || router.id == "PropertyChanceTipOff") {
+          callBack="loadBaseInfo"
+        }
+        else if (router.id == "Favorite") {
+          callBack = "loadFavorite"
+        }
+        else if (router.id == "qrCode") {
+          callBack = "loadqrCode"
+        }
+      }
+
+      if (callBack) {
+        if(callBack=='loadOperation'){
+          this.routerClickHandler(router, submitData, self.loadOperation);
+        }
+        else if(callBack=='loadBaseInfo'){
+          this.routerClickHandler(router, submitData, self.loadBaseInfo);
+        }
+        else if (callBack == 'loadFavorite') {
+          this.routerClickHandler(router, submitData, self.loadFavorite);
+        }
+        else if (callBack == 'loadqrCode') {
+          self.loadqrCode();
+        }
+      } 
+      else {
+        this.routerClickHandler(router, submitData);
+      }
+    },
+    addMedia() {
+      if (this.model.routerForNoMedia) {
+        this.routerClickHandler(this.model.routerForNoMedia, {});
+      }
+    },
+    routerClickHandler(field, submitData, callBack) {
+      var self = this;
+      // this.model.scripts.$fd = field.id;
+      // this.model.scripts.$result = [];
+
+      var clickAcion = function (field) {
+        //若不是客户端方法，则直接访问接口
+        if (!field.isClientFuntion) {
+          // if (typeof field.onClick !== 'undefined') {
+          //   verified = self.$common.excute.call(self.model.scripts, field.onClick);
+          // }
+          if(field.isTabInSystem){
+            if(field.isOpenBaiduMap){
+              submitData = field.getActionPara(submitData).para;
+              self.$common.getDataDrivenOpts().handler.openTabBaiduMap(submitData,field.pageTitle || field.label);
+            }
+          }
+          else if(field.isTabInBrowse){
+            
+          }
+          else if(field.isLayerInSystem){
+            if(field.isOpenBaiduMap){
+              var dialogOption = {
+                title: field.pageTitle,
+                pane: self.$common.getParentPane(self),
+                content: [
+                  {
+                    component: "ct-mapBaidu",
+                    attrs: {
+                      field: field,
+                      apiParam: field.getActionPara(submitData).para,
+                      width: field.dialogWidth + "px",
+                      height: field.dialogHeight + "px",
+                    },
+                    on: {
+                      submit(ev) {
+                        if (callBack) {
+                          callBack(field);
+                        }
+                        self.$common.closeDialog(dialogOption.dialog);
+                      },
+                      closeDialog(ev) {                      
+                      }
+                    },
+                  },
+                ],
+              };
+              self.$common.openDialog(dialogOption);
+            }
+          }
+          else if (field.isBrowseAttachment) {//浏览附件
+            var mediaviewpagetype=(field.isFormPageInTab||field.isSearchPageInTab)?2:0; 
+            var MediaAlbum = [
+              { albumName: self.model.title || "媒体", medias: [] },
+            ];
+            if (field.action) {
+              var callback = function (data) {
+                if(typeof data =='object'&&data.mediaAlbums)
+                {
+                MediaAlbum = data.mediaAlbums;
+                }
+                else
+                {
+                  MediaAlbum[0].medias = data;
+                }
+                self.$common.viewerfile(field.pageTitle, MediaAlbum, 0, 0,mediaviewpagetype);
+              }
+              var vsubmitData = {
+                ...field.getActionPara(submitData).para,
+                ...submitData
+              };
+              self.model.getAction(field.action, vsubmitData, callback);
+            }
+            else {
+              submitData.mediaData.forEach((v) => {
+                MediaAlbum[0].medias.push(v);
+              });
+              self.$common.viewerfile(field.pageTitle, MediaAlbum, 0, 0,mediaviewpagetype);
+            }
+          }
+          else if (field.isOpenForm) {
+            var dialogOption = {
+              title: field.pageTitle,
+              pane: self.$common.getParentPane(self),
+              content: [
+                {
+                  component: "ct-form",
+                  attrs: {
+                    api: field.action,
+                    apiParam: field.getActionPara(submitData).para,
+                    showTitle: false,
+                    width: field.dialogWidth + "px",
+                    height: field.dialogHeight + "px",
+                  },
+                  on: {
+                    submit(ev) {
+                      self.model.doAction(ev, field);
+                      if (callBack) {
+                        callBack(field);
+                      }
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                  },
+                },
+              ],
+            };
+            self.$common.openDialog(dialogOption);
+          } 
+          else if (field.isOpenList) {
+            var dialogOption = {
+              title: field.pageTitle,
+              pane: self.$common.getParentPane(self),
+              content: [
+                {
+                  component: "ct-searchlist",
+                  attrs: {
+                    searchConditionApi: field.actionForSearchLayout,
+                    searchDataApi: field.actionForSearch,
+                    apiParam: submitData,
+                    width: field.dialogWidth + "px",
+                    height: field.dialogHeight + "px",
+                  },
+                  on: {
+                    submit(ev) {
+                      self.model.updateFields(ev, () => {
+                        self.$refs.Fields.forEach((fd) => {
+                          fd.$forceUpdate();
+                        });
+                      });
+                      self.$common.closeDialog(dialogOption.dialog);
+                    },
+                    closeDialog(ev) {
+                      if (field.id == "Favorite" && callBack) {
+                        callBack();
+                      }
+                    }
+                  },
+                },
+              ],
+            };
+            self.$common.openDialog(dialogOption);
+          } 
+          else if (field.isFormPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$common.getDataDrivenOpts().handler.openTab(field.action,submitData,field.pageTitle,self.model,field.dialogWidth);
+          } 
+          else if (field.isSearchPageInTab) {// 外部框架tab页打开
+            submitData = field.getActionPara(submitData).para;
+            self.$common.getDataDrivenOpts().handler.openTabSearch(field, submitData);
+          }
+          else if (field.isUrlInSystemTab) {//外部框架tab页打开URl
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+              urlTab = field.action + '&' +query.substr(1, query.length);
+            }
+            self.$common.getDataDrivenOpts().handler.openTabUrl(urlTab,field.pageTitle||field.label);
+          }  
+          else if (field.isBrowserNewTab) {// 浏览器打开
+            submitData = field.getActionPara(submitData).para;
+            let query = self.$common.objectToQueryStr(submitData);
+            let urlTab = field.action + query;
+            if(field.action.indexOf('?')>-1 && query.indexOf('?')>-1){
+              urlTab = field.action + '&' +query.substr(1, query.length);
+            }
+            window.open(urlTab, "_blank");
+          } 
+          else if (field.isOpenUrlInBrowse) {// 浏览器打开
+            window.open(submitData[field.submitFormField], "_blank");
+          } 
+          else if (field.isSeeVoice) {//看视频
+            self.$common.browseVideo(field, submitData);
+          } 
+          else {
+            field.doAction(submitData, (data) => {
+              if (data.rtnCode === 200) {
+                self.model.doAction(data, field);
+                if (callBack) {
+                  callBack(field);
+                }
+              }
+            });
+          }
+        }
+        //执行客户端脚本
+        else {
+          submitData = field.getActionPara(submitData).para;
+          let title = field.pageTitle == undefined ? field.label : field.pageTitle;
+          submitData.actionType = field.actionType;
+          var fun = self.$common.getDataDrivenOpts().handler[field.action];
+          fun(submitData, title, null);
+        }
+      };
+
+      if (field.isSubmit && !self.validExcute()) {
+        return;
+      }
+
+      if (field.alert) {
+        self.$common
+          .confirm(field.alertMsg, field.alertCaption, {
+            confirmButtonText: field.alertOKButtonText,
+            cancelButtonText: field.alertCancelButtonText,
+            //type: 'warning'
+            center: field.alertCenter,
+          })
+          .then(() => {
+            clickAcion(field, submitData);
+          })
+          .catch(() => {});
+      } 
+      else {
+        clickAcion(field, submitData);
+      }
+    },
+    clickNextHandler() {
+      let key = "chanceID";
+      if (this.parentModel && this.parentModel.$refs.table) {
+        let oldValue = this.parentModel.$refs.table.model.listData[this.parentModel.$refs.table.model.selectIndex][key];
+        this.parentModel.$refs.table.rowKeyDownHandle(null, 1);
+        let newValue = this.parentModel.$refs.table.model.listData[this.parentModel.$refs.table.model.selectIndex][key];
+        if (oldValue !== newValue) {
+          let parm = this.$common.cloneObject(this.apiParam);
+          parm[key] = newValue;
+          // this.loaderObj.Detail(this.api, parm, this.load);
+          this.$common.getDataDrivenOpts().handler.refreshPropertyDetail(parm,this.parentModel,"PropertyDetailOFI");
+        }
+      }
+    },
+    clickPrevHandler() {
+      let key = "chanceID";
+      if (this.parentModel && this.parentModel.$refs.table) {
+        let oldValue = this.parentModel.$refs.table.model.listData[this.parentModel.$refs.table.model.selectIndex][key];
+        this.parentModel.$refs.table.rowKeyDownHandle(null, -1);
+        let newValue = this.parentModel.$refs.table.model.listData[this.parentModel.$refs.table.model.selectIndex][key];
+        if (oldValue !== newValue) {
+          let parm = this.$common.cloneObject(this.apiParam);
+          parm[key] = newValue;
+          // this.loaderObj.Detail(this.api, parm, this.load);
+          this.$common.getDataDrivenOpts().handler.refreshPropertyDetail(parm,this.parentModel,"PropertyDetailOFI");
+        }
+      }
+    },
+    scrollHandle(ev) {   
+      this.$emit('scrollHandle',this.$refs.detail.scrollTop,this.$refs.detail.scrollLeft)
+      ev.cancelBubble = true;
+      ev.stopPropagation();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.operation0,
+.operation20,
+.operation-1000 {
+  color: #000000;
+}
+.operation1,
+.operation10 {
+  color: #388cd3;
+}
+.operation2 {
+  color: #388cd3;
+}
+.main {
+  background: #eceff2;
+}
+.rel {
+  position: relative;
+}
+.y-auto {
+  overflow-y: auto;
+  overflow-x: auto;
+}
+.w64 {
+  width: 64px !important;
+}
+.w93 {
+  width: 93px !important;
+}
+.w300 {
+  width: 300px;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.mt15 {
+  margin-top: 15px;
+}
+.mb10 {
+  margin-bottom: 10px;
+}
+.mb20 {
+  margin-bottom: 20px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.p0 {
+  padding: 0 !important;
+}
+.pb10 {
+  padding-bottom: 10px !important;
+}
+.f-wb {
+  font-weight: bold;
+}
+.base-box {
+  background: #ffffff;
+  border-radius: 6px;
+  width: 100%;
+}
+.details-content {
+  font-size: 12px;
+  .title-l {
+    font-weight: Bold;
+    font-size: 16px;
+    color: #333333;
+  }
+  .details-head {
+    padding: 16px;
+    display: flex;
+    .head-type {
+      font-size: 20px;
+      background: var(--chinaRed);
+      color: #ffffff;
+      padding: 0 14px;
+      border-radius: 6px;
+      max-height: 40px;
+      line-height: 40px;
+      font-weight: Bold;
+    }
+    .head-info {
+      margin-left: 10px;
+    }
+    .title {
+      font-weight: Bold;
+      font-size: 16px;
+      margin-bottom: 3px;
+    }
+    .head-line {
+      display: inline-block;
+      height: 16px;
+      width: 2px;
+      background: #333333;
+      margin: 0 4px;
+      position: relative;
+      top: 1.5px;
+    }
+    .collection {
+      font-size: 18px;
+      margin-left: 10px;
+      cursor: pointer;
+      vertical-align: -2.85px;
+	  width: 18px;
+      height: 18px;
+    }
+    .title-other {
+      color: var(--centalineMediumGray);
+      margin-bottom: 14px;
+      font-size: 12px;
+      span {
+        margin-right: 20px;
+      }
+      .other-icon {
+        font-size: 16px;
+      }
+      .location {
+        font-size: 16px;
+        vertical-align: -2.85px;
+      }
+    }
+    .title-tags {
+      display: flex;
+      .t-tag {
+        color: #333333;
+        background: #E8EAED;
+        border: 1px solid #C6C6C6;
+        padding: 2px 9px;
+        border-radius: 3px;
+        margin-right: 10px;
+      }
+    }
+    .head-but {
+      margin-left: auto;
+      font-size: 12px;
+      text-align: right;
+      min-width: 400px;
+      .max-report {
+        height: 26px;
+        line-height: 26px;
+        color: var(--centalineBlack);
+        background-color: #ffffff;
+        border: 1px solid #C6C6C6;
+        border-radius: 6px;
+        font-size: 12px;
+        z-index: 1;
+      }
+      .max-report:hover{
+        background-color:var(--btnHoverRed) !important;
+   border-color: var(--btnHoverRed) !important;
+    color: #fff !important;
+      }
+      .max-report:hover .report-cont {
+        display: block;
+        color: var(--centalineBlack);
+      }
+      .report-cont {
+        display: none;
+        width: 115px;
+        background: #fff;
+        -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+        box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+        border-radius: 5px;
+        list-style: none;
+        position: absolute;
+        left: -61px;
+        top: 26px;
+        padding: 5px 0;
+        color: var(--centalineBlack);
+      }
+      .report-cont li {
+        padding: 5px 10px;
+      }
+    }
+  }
+  .details-mid {
+    display: flex;
+    justify-content: space-between;
+    .mid-l {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .hous-info {
+        padding-bottom: 10px;
+        .base-clolr {
+          color: var(--chinaRed);
+        }
+        .expand-f {
+          line-height: 15px;
+          font-size: 16px;
+          font-weight: bold;
+          img {
+            width: 15px !important;
+            margin-left: 0 !important;
+          }
+          span {
+            float: right;
+          }
+        }
+        .img-jsq {
+          width: 14px;
+          height: 14px;
+          display: inline-block;
+          margin-left: 10px;
+        }
+        .info-conten {
+          display: flex;
+          .info-row {
+            display: flex;
+          }
+
+          .hous-t {
+            width: 260px;
+			margin-top: 10px;
+            .swiper-i {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+              .hous-icon {
+                width: 60px;
+                height: 60px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
+            }
+
+            .hous-img {
+              margin-top: 10px;
+              width: 100%;
+              overflow-x: hidden;
+              overflow-y: hidden;
+              white-space: nowrap;
+              .img-i {
+                position: relative;
+                width: 82px;
+                height: 45px;
+                margin-right: 10px;
+                display: inline-block;
+                border: 2px #fff solid;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+                .img-bot {
+                  width: 100%;
+                  height: 16px;
+                  background: rgba(0, 0, 0, 0.5);
+                  color: #fff;
+                  position: absolute;
+                  bottom: 0;
+                  font-weight: Bold;
+                  .img-icon {
+                    width: 12px;
+                    height: 12px;
+                    margin: 0 5px;
+                    margin: 0 5px;
+                    vertical-align: -1.5px;
+                  }
+                }
+              }
+            }
+          }
+          .hous-b {
+            position: relative;
+            margin-left: 16px;
+            margin-top: 20px;
+            flex: 1;
+            .code-ewm {
+              width: 32px;
+              height: 32px;
+              position: absolute;
+              top: -32px;
+              right: -12px;
+            }
+
+            .row-i {
+              width: 25%;
+             text-align: left;
+            }
+            .row-i div:nth-child(1) {
+                margin-bottom: 10px;
+              }
+              .row-b div:nth-child(2) {
+                font-size: 14px;
+                font-weight: bold;
+              }
+            .info-mid {
+               // margin: 35px 0 0 0;
+              // padding: 20px;
+              border-top: 1px solid #e0e0e0;
+              border-bottom: 1px solid #e0e0e0;
+              display: flex;
+              padding: 15px 0;
+              
+              .mid-i {
+                text-align: left;
+                width: 25%;
+              }
+              .mid-i div:nth-child(1) {
+                margin-bottom: 10px;
+              }
+              .mid-i div:nth-child(2) {
+                font-size: 14px;
+                font-weight: bold;
+              }
+            }
+          }
+        }
+        .info-conten-b {
+          display: flex;
+          margin-top: 16px;
+          .info-row {
+            display: flex;
+            width: 100%;
+            padding-left: 9px;
+          }
+          .row-i {
+            width: 25%;
+          }
+          .row-i100 {
+            width: 100%;
+          }
+        }
+        .open-mero {
+          text-align: center;
+          padding: 3px 0;
+        }
+        .more-colose {
+          background: url("../../../assets/mero-colose.png") no-repeat;
+          background-size: 100% 100%;
+          width: 18px;
+          height: 9px;
+          display: inline-block;
+        }
+        .mero-open {
+          background: url("../../../assets/more-open.png") no-repeat;
+          background-size: 100% 100%;
+          width: 18px;
+          height: 9px;
+          display: inline-block;
+        }
+        .hous-mero {
+          display: flex;
+          .mero-labe {
+            min-width: 60px;
+          }
+        }
+      }
+
+      .contacts-info {
+        padding: 16px;
+        .contacts-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .contacts-but {
+            height: 30px;
+            font-weight: Bold;
+          }
+          .contacts-tips {
+            display: flex;
+          }
+        }
+        .contacts-table {
+          margin-top: 16px;
+          .table-icon {
+            font-size: 14px;
+            margin-left: 4px;
+          }
+          .el-table {
+            font-size: 12px;
+          }
+          .el-table th.el-table__cell > .cell {
+            padding-left: 16px;
+          }
+          .el-table .cell {
+            padding-left: 16px;
+          }
+          .el-table--striped
+            .el-table__body
+            tr.el-table__row--striped
+            td.el-table__cell {
+            background: 1px solid #e0e0e0;
+          }
+        }
+      }
+
+      .tablist-info {
+        .details-tabs-box {
+          .el-menu--horizontal > .el-menu-item {
+            height: 30px;
+            line-height: 30px;
+            border-radius: none;
+          }
+        }
+      }
+
+      .contribute-info {
+        .contribute-list {
+          width: 100%;
+          display: flex;
+          align-content: flex-start;
+          flex-flow: row wrap;
+          .contribute-i {
+            width: calc((100% - 16px * 3) / 4);
+            margin: 16px 16px 0 0;
+            padding: 16px 0 16px 16px;
+            border: 1px solid #e0e0e0;
+            border-radius: 6px;
+            display: flex;
+            img {
+              width: 50px;
+              height: 50px;
+              margin-right: 6px;
+            }
+            .user-title {
+              font-weight: Bold;
+              font-size: 14px;
+              margin-bottom: 8px;
+            }
+            .user-but {
+              cursor: pointer;
+              font-size: 12px;
+              color: #ffffff;
+              background: #fbd46d;
+              height: 20px;
+              line-height: 20px;
+              border-radius: 3px;
+              text-align: center;
+              padding: 0 10px;
+            }
+          }
+
+          .contribute-i:nth-child(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+    .mid-l > div {
+      margin-bottom: 10px;
+      padding: 16px;
+    }
+    .mid-r > div {
+      margin-bottom: 10px;
+      padding: 16px;
+    }
+    .mid-r {
+      width: 26.666%;
+      margin-left: 10px;
+
+      display: flex;
+      flex-direction: column;
+      .tab-conten {
+        display: flex;
+        margin-bottom: 16px;
+        img {
+          width: 50px;
+          height: 50px;
+          margin-right: 10px;
+        }
+        .user-name {
+          display: flex;
+        }
+        .text {
+          font-size: 14px;
+          font-weight: Bold;
+          margin-right: 10px;
+        }
+        .user-other {
+          min-height: 200px;
+        }
+        .user-but {
+          cursor: pointer;
+          font-size: 12px;
+          color: #ffffff;
+          background: #fbd46d;
+          height: 20px;
+          line-height: 20px;
+          border-radius: 3px;
+          text-align: center;
+          padding: 0 10px;
+        }
+      }
+      .take-info {
+        font-size: 16px;
+        .red-text {
+          font-size: 18px;
+          font-weight: bold;
+          color: var(--chinaRed);
+        }
+      }
+      .staff-info {
+        padding: 10px;
+        .open-mero {
+          text-align: center;
+          padding: 3px 0;
+        }
+        .more-colose {
+          background: url("../../../assets/mero-colose.png") no-repeat;
+          background-size: 100% 100%;
+          width: 18px;
+          height: 9px;
+          display: inline-block;
+        }
+        .mero-open {
+          background: url("../../../assets/more-open.png") no-repeat;
+          background-size: 100% 100%;
+          width: 18px;
+          height: 9px;
+          display: inline-block;
+        }
+        .hous-mero {
+          display: flex;
+          .mero-labe {
+            min-width: 60px;
+          }
+        }
+      }
+      .operation-list {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .list-item {
+          width: 120px;
+          height: 62px;
+          font-size: 14px;
+          text-align: center;
+          font-weight: bold;
+          border: none;
+        }
+        .list-item:hover {
+          color: #fff;
+          background: var(--btnHoverRed);
+        }
+        .list-item:nth-child(2) {
+          margin: 0 10px;
+        }
+        .list-item:nth-child(3) {
+          margin-left: 0;
+        }
+      }
+
+      .operation-table {
+        padding: 0;
+        .table-box {
+          display: flex;
+          border-bottom: 1px solid #e0e0e0;
+          .t-item {
+            padding: 5px 8px;
+            font-size: 14px;
+            flex: 1;
+            position: relative;
+            display: flex;
+            flex-flow: column;
+            align-items: flex-start;
+            border-right: 1px solid #e0e0e0;
+            justify-content: center;
+            min-width: 0;
+            .t-but {
+              font-size: 12px;
+              margin-left: 0;
+              width: 104px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
+              margin-top: 8px;
+              padding: 0;
+            }
+            .t-but:nth-last-child(1) {
+              margin-bottom: 8px;
+            }
+          }
+          .t-item:nth-last-child(1) {
+            border-right: 0;
+          }
+        }
+        .table-box:nth-last-child(1) {
+          border-bottom: 0;
+        }
+      }
+
+      .customer {
+        background: #fff;
+        border-radius: 6px;
+        width: 100%;
+        .customer-title {
+          font-weight: Bold;
+          font-size: 16px;
+          color: #333;
+        }
+        .customre-line {
+          width: 100%;
+          height: 1px;
+          margin-top: 10px;
+          background: #e0e0e0;
+        }
+        .match-customre {
+          display: flex;
+          margin-top: 10px;
+          .customre-name {
+            font-weight: Bold;
+            font-size: 14px;
+            color: #333333;
+            margin-right: 10px;
+          }
+          .t-tag {
+            width: 41px;
+            color: #999;
+            background: #f3f3f3;
+            border: 1px solid #d8d8d8;
+            padding: 2px 9px;
+            border-radius: 3px;
+            margin-right: 10px;
+          }
+        }
+        .user-but {
+          cursor: pointer;
+          font-size: 12px;
+          color: #ffffff;
+          background: #fbd46d;
+          height: 20px;
+          line-height: 20px;
+          border-radius: 3px;
+          text-align: center;
+          padding: 0 10px;
+        }
+        .customr-name {
+          position: absolute;
+          right: 0;
+        }
+        .clearfix {
+          clear: both;
+        }
+        .customre-l {
+          float: left;
+          width: 50%;
+          margin-top: 10px;
+          .row-i {
+            padding: 5px 0;
+          }
+        }
+
+        .customre-r {
+          float: right;
+          width: 50%;
+          margin-top: 10px;
+          .row-i {
+            padding: 5px 0;
+          }
+        }
+      }
+    }
+  }
+}
+// 按钮
+.max-info {
+  height: 26px;
+  color: #333333;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 12px;
+}
+.max-default {
+  border: 1px solid var(--chinaRed);
+  color: var(--chinaRed);
+  height: 26px;
+
+  border-radius: 6px;
+  font-size: 12px;
+}
+.max-info:hover,
+.max-default:hover {
+  background-color: var(--btnHoverRed);
+  border-color: var(--btnHoverRed);
+  color: #fff;
+}
+// .max-infon:hover.report,.max-info:active.report{
+//   color: #fff;
+// }
+.max-info:active,
+.max-default:active {
+  background-color:  var(--btnFocusRed);
+  border-color:  var(--btnFocusRed);
+  color: #fff;
+}
+.max-btn-add button {
+  /*list-button*/
+  height: 26px;
+  background: var(--chinaRed);
+  box-shadow: 0px 2px 4px 0px rgba(238, 107, 107, 0.25);
+  border-radius: 6px;
+}
+.max-btn-add button:hover {
+  background-color: var(--btnHoverRed);
+  border-color: var(--btnHoverRed);
+}
+.max-btn-add button:focus,
+.max-btn-add button:active {
+  background-color:  var(--btnFocusRed);
+  border-color:  var(--btnFocusRed);
+}
+.max-comfirm-content button {
+  height: 26px;
+  border-radius: 6px;
+}
+.follow-search-bar {
+  display: flex;
+}
+.r {
+  float: right;
+}
+.my-icon-more {
+  width: 14px;
+  height: 15px;
+  border-top: 3px solid rgb(153, 153, 153);
+  border-bottom: 3px solid rgb(153, 153, 153);
+  background-color: rgb(153, 153, 153);
+  padding: 3px 0;
+  background-clip: content-box;
+  cursor: pointer;
+}
+>>>.el-tabs__nav-prev {
+  display: none;
+}
+
+>>>.el-tabs__nav-next {
+  display: none;
+}
+
+.more-dropdown {
+  position: absolute;
+  width: 16px;
+  height: 20px;
+  text-align: left;
+  top: 13px;
+  right: -1px;
+}
+
+.el-dropdown-menu--mini .el-dropdown-menu__item {
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: #fff;
+  color: var(--chinaRed);
+  border-bottom: 3px solid var(--chinaRed);
+}
+
+.tabsMore .is-active {
+  cursor: pointer;
+  background-color: #fff;
+  color: var(--chinaRed);
+  border-bottom: 3px solid var(--chinaRed);
+}
+
+>>>.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+>>>.el-tabs--bottom .el-tabs__item.is-top:last-child,
+>>>.el-tabs--top .el-tabs__item.is-bottom:last-child,
+>>>.el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 15px;
+}
+
+.svgIcon {
+  width: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.table-box .t-item button.el-button.el-button.t-but.el-button--info.max-info.el-button--primary.el-button--mini.is-disabled {
+     cursor: not-allowed; 
+    background-image: none;
+    color: #bcbec2;
+    background-color: #f4f4f5;
+    border-color: #e9e9eb;
+}
+.rowLable,.rowValue{
+  color: var(--centalineBlack);
+}
+</style>
+
+