centaline-data-driven 1.1.55 → 1.1.59

package/src/centaline/dynamicDetail/src/dynamicPropertyDetailRET.vue

@@ -1,1293 +1,1346 @@
-<template>
-    <div class="main" v-if="model!==null">
-      <div class="details-content">
-        <div class="details-head base-box mb10">
-            <div class="head-type">{{model.fields1Dic.Trade.value}}</div>
-            <div class="head-info">
-                <div class="title">
-                  <span>{{model.fields1Dic.StatusName.value}}</span>
-                  <span class="head-line"></span>
-                  <span>{{model.fields1Dic.EstateName.value}}</span>
-                  <span> {{model.fields1Dic.BuildingName.value}}</span>
-                  <span>{{model.fields1Dic.RoomNo.value}}</span>
-                  <img :src="model.fields1Dic.FavoriteUrl.value" alt="" class="collection">
-                </div>
-                <div class="title-other">
-                  <span>{{model.fields1Dic.PropertyNo.label}}{{model.fields1Dic.PropertyNo.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 :src="model.fields1Dic.LocationUrl.value" alt="" class="location">
-                </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>
-           
-            <div class="head-but">
-              <div>
-                <component v-if="model.otherTradeActionRouter!==null" v-bind="model.otherTradeActionRouter" class="max-default"
-                :is="model.otherTradeActionRouter.is" :vmodel="model.otherTradeActionRouter" :api="model.optionApi"></component>
-                <component class="max-report" v-if="model.actionRouters!==null && model.actionRouters[0]!==null"
-                :is="model.actionRouters[0].is" :vmodel="model.actionRouters[0]" :api="model.optionApi"></component>
-              </div>
-              <div class="mt5">
-                <component class="max-report" v-if="model.actionRouters!==null && model.actionRouters[1]!==null"
-                :is="model.actionRouters[1].is" :vmodel="model.actionRouters[1]" :api="model.optionApi"></component>                
-              </div>
-              <div class="mt5">
-                <button type="button" class="el-button el-button--info el-button--mini max-report rel"
-                v-if="model.actionRoutersMoreList !== null">
-                  <img src="../../../assets/dian.png" alt="" class="report">
-                  <ul class="report-cont">
-                      <li v-for="(col, index) in model.actionRoutersMoreList" :key="index"  v-if="col.show !== false">
-                        <component class="max-report" :is="col.is" :vmodel="col" :api="model.optionApi"></component>
-                      </li>
-                  </ul>
-                </button> 
-                 <component v-else-if="model.actionRouters!==null && model.actionRouters[2]!==null" class="max-report"
-                :is="model.actionRouters[2].is" :vmodel="model.actionRouters[2]" :api="model.optionApi"></component>   
-              </div>
-            </div>
-        </div>
-        
-        <div class="details-mid y-auto" style="height:570px">
-          <div class="mid-l">
-            <!-- 图片内容部分 -->
-            <div class="hous-info base-box">
-              <div class="info-conten">
-                <div class="hous-t">
-                  <div>
-                    <el-carousel
-                      arrow="hover"
-                      height="140px"
-                      :autoplay="false"
-                      indicator-position="none"
-                    >
-                      <el-carousel-item
-                        v-for="(item,index) in PropertyInfo.swiper"
-                        :key="index"
-                      >
-                        <div class="swiper-i">
-                          <img :src="item.url">
-                          <img src="../../../assets/Mvr.png" alt="" class="hous-icon">
-                          
-                        </div>
-                      </el-carousel-item>
-                    </el-carousel>
-
-                    <div class="hous-img">
-                      <div
-                        class="img-i"
-                        v-for="(item,index) in PropertyInfo.swiper"
-                        :key="index"
-                      > <img :src="item.url">
-                        <div class="img-bot">
-                          <div v-if="item.type.includes('vr')">
-                            <img src="../../../assets/VR.png" alt="" class="img-icon">
-                            <span>VR</span>
-                          </div>
-                          <div v-if="item.type.includes('img')">
-                            <img src="../../../assets/image.png" alt="" class="img-icon">
-                            <span>图片</span>
-                          </div>
-                          <div v-if="item.type.includes('video')">
-                            <img src="../../../assets/video.png" alt="" class="img-icon">
-                            <span>视频</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="hous-b">
-                  <img :src="model.fields1Dic.ewmUrl.value" alt="" class="code-ewm">
-                    <div class="info-row mb20 mt5">
-                      <div class="row-i"><span>{{model.fields1Dic.Price.label}}</span><span class="base-clolr expand-f">{{model.fields1Dic.Price.value}}</span><span class="base-clolr">{{model.fields1Dic.Price.unitName}}</span>
-                      <img src="" alt="">
-                      </div>
-                      <div class="row-i"><span>{{model.fields1Dic.PriceUnit.label}}</span><span class="base-clolr">{{model.fields1Dic.PriceUnit.value}}</span><span class="base-clolr">{{model.fields1Dic.PriceUnit.unitName}}</span></div>
-                      <div class="row-i"><span>{{model.fields1Dic.PriceLine.label}}</span><div>{{model.fields1Dic.PriceLine.value}}{{model.fields1Dic.PriceLine.unitName}}</div></div></div>
-                   <div class="info-row">
-                      <div class="row-i">
-                        <span >{{model.fields1Dic.AssessPrice.label}}</span><span>{{model.fields1Dic.AssessPrice.value}} </span><span>{{model.fields1Dic.AssessPrice.unitName}}</span>
-                      </div>                     
-                      <div class="row-i"><span>{{model.fields1Dic.EstimatePriceRent.label}}</span><div>{{model.fields1Dic.EstimatePriceRent.value}}<span>{{model.fields1Dic.EstimatePriceRent.unitName}}</span></div></div>
-                      <div class="row-i"><span>{{model.fields1Dic.EstimatePriceRentUnit.label}}</span><span>{{model.fields1Dic.EstimatePriceRentUnit.value}}</span><span>{{model.fields1Dic.EstimatePriceRentUnit.unitName}}</span></div>
-                  </div>
-                  
-                    <div class="info-mid">
-                      <div class="mid-i">
-                        <div>{{model.fields1Dic.Area.label}}</div><div>{{model.fields1Dic.Area.value}}{{model.fields1Dic.Area.unitName}}</div></div>
-                        <div class="mid-i"><div>{{model.fields1Dic.AreaNet.label}}</div><div>{{model.fields1Dic.AreaNet.value}}{{model.fields1Dic.AreaNet.unitName}}</div></div>
-                        <div class="mid-i"><div>{{model.fields1Dic.FloorName.label}}</div><div>{{model.fields1Dic.FloorName.value}}</div></div>
-                        <div class="mid-i"><div>{{model.fields1Dic.PropertyDirectionID.label}}</div><div>{{model.fields1Dic.PropertyDirectionID.value}}</div></div>
-                      </div>
-                </div>
-              </div>
-              <div class="info-conten-b" v-show="allInfo">
-                  <div class="info-row mb20">
-                    <div class="row-i"><span>建筑用途：</span><span>写字楼</span></div>
-                    <div class="row-i"><span>产权：</span><span>公司</span></div> 
-                    <div class="row-i"><span>产权状况：</span><span>拍卖</span></div>
-                    <div class="row-i"><span>现状：</span><span>空房</span></div>
-                    <div class="row-i"><span>付费：</span><span>各付各税</span></div>
-                    <div class="row-i"><span>佣金：</span><span>600元</span></div>
-                  </div>
-              </div>
-              <div class="info-conten-b" v-show="allInfo">  
-                  <div class="info-row mb20">
-                    <div class="row-i"><span>可以分割：</span><span>是</span></div> 
-                    <div class="row-i"><span>看楼方式：</span><span>提前预约</span></div>
-                    <div class="row-i"><span>装修：</span><span>豪装</span></div>
-                    <div class="row-i"><span>租赁期：</span><span>半年</span></div>
-                    <div class="row-i"><span>付款方式：</span><span>一次性全款</span></div>
-                    <div class="row-i"><span>可否注册公司：</span><span>是</span></div>
-                  </div>
-              </div>
-              <div class="info-conten-b" v-show="allInfo">
-                   <div class="info-row mb20">
-                    <div class="row-i"><span>按揭银行：</span><span>中国农行</span></div> 
-                    <div class="row-i"><span>欠款额度：</span><span>0.00万</span></div> 
-                    <div class="row-i"><span>管理费：</span><span></span></div>
-                    <div class="row-i"><span>使用年限：</span><span>3年</span></div>
-                    <div class="row-i"><span>来源：</span><span></span></div>
-                    <div class="row-i"><span> </span><span> </span></div>
-                  </div>
-              </div>
-              <div class="info-conten-b" v-show="allInfo">
-                  <div class="info-row mb20">                    
-                    <div class="row-i"><span>房源描述：</span><span></span></div>
-                  </div>
-              </div>
-              <div class="open-mero" @click="allInfo=!allInfo">{{allInfo?'收起全部':'查看全部'}}
-                <img src="../../../assets/mero.png" alt="" class="mero" >  <!--:class="allInfo?'more-colose':'more-open'" -->
-              </div>
-            </div>
-            <div class="contacts-info base-box">
-              <!-- 联系人 -->
-              <div class="contacts-head">
-                    <div class="title-l">联系人信息</div>
-                    <button type="button"  v-if="!codeOwner"  @click="lookOwner" class="el-button contacts-but el-button--info el-button--mini max-info">查看业主</button>
-                    <div class="contacts-tips" v-else>
-                      <button class="el-button el-button--primary el-button--mini max-btn-add">新增联系人</button>
-                      <button class="el-button el-button--primary el-button--mini max-btn-add">通话记录</button>
-                      <button class="el-button el-button--primary el-button--mini max-btn-add">查看历史号码</button>
-                    </div>
-
-              </div>
-              <!-- 表格 -->
-              <div class="contacts-table" v-show="codeOwner">
-                  <el-table
-                     :data="tableData"
-                      stripe
-                      fit
-                      style="width: 100%"
-                      :header-cell-style="{background:'#f3f3f3',color:'#333333'}">
-                   <el-table-column
-                  v-for="(item,index) in columnList"
-                  :key="index"
-                  :property="item.prop"
-                  :label="item.label"
-                  :min-width="item.width"
-                >
-                  <template slot-scope="scope">
-                    <span v-if="scope.column.property=='phone'">{{ scope.row.phone }}
-                      
-                    </span>
-                    <span v-else-if="scope.column.property=='tel'">
-                      {{scope.row.tel}}
-                     
-                    </span>
-                    <span v-else>
-                      {{scope.row[scope.column.property]}}
-                    </span>
-                  </template>
-                </el-table-column>
-                  </el-table>
-              </div>
-            </div>
-            <div class="tablist-info base-box">
-                <div class="details-tabs-box">
-                    <el-tabs v-model="follow">
-                      <el-tab-pane label="跟进" name="first">
-                        <el-form
-                          class="follow-search-bar"
-                        >
-                              <!-- <el-select
-                                v-model="value"
-                                placeholder="跟进类型"
-                                class="mr10"
-                              >
-                                <el-option
-                                  v-for="item in options"
-                                  :key="item.value"
-                                  :label="item.label"
-                                  :value="item.value"
-                                >
-                                </el-option>
-                              </el-select> -->
-                              <el-input
-                                class="w300 mr10"
-                                placeholder="请输入"
-                                maxlength="500"
-                              ></el-input>
-                              <el-button
-                                type="primary"
-                                @click="onSearch"
-                              >保存</el-button>
-                              <button class="el-button el-button--primary el-button--mini max-btn-add">新增跟进</button>
-                        </el-form>
-
-                        <el-table
-                          :data="followData"
-                          stripe
-                          style="width: 100%;margin-top:20px;height:200px;overflow:auto"
-                          :header-cell-style="{background:'#f3f3f3',color:'#333333'}"
-                          >
-                          <el-table-column
-                            prop="date"
-                            label="日期"
-                            width="180">
-                          </el-table-column>
-                          <el-table-column
-                            prop="name"
-                            label="状态"
-                            width="180">
-                          </el-table-column>
-                          <el-table-column
-                            prop="address"
-                            label="跟进人">
-                          </el-table-column>
-                          <el-table-column
-                            prop="address"
-                            label="跟进人部门">
-                          </el-table-column>
-                          <el-table-column
-                            prop="address"
-                            label="跟进时间">
-                          </el-table-column>
-                        </el-table>
-                      </el-tab-pane>
-                      <el-tab-pane label="委托" name="second">委托</el-tab-pane>
-                      <el-tab-pane label="钥匙" name="third">钥匙</el-tab-pane>
-                      <el-tab-pane label="交易变更" name="fourth">交易变更</el-tab-pane>
-                      <el-tab-pane label="多媒体记录" name="">多媒体记录</el-tab-pane>
-                      <el-tab-pane label="业绩分配" name="">业绩分配</el-tab-pane>
-                      <el-tab-pane label="楼主历史" name="">楼主历史</el-tab-pane>
-                      <el-tab-pane label="租户信息" name="">租户信息</el-tab-pane>
-                      <el-tab-pane label="合并盘" name="">合并盘</el-tab-pane>
-                      <el-tab-pane label="佐证" name="">佐证</el-tab-pane>
-                      <el-tab-pane label="销控表" name="">销控表</el-tab-pane>
-                    </el-tabs>
-                </div>
-            </div>
-              <div class="contribute-info base-box">
-                  <div class="title-l">贡献人信息</div>
-                  <div class="contribute-list">
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                      <div class="contribute-i">
-                        <img src="" alt="图片">
-                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
-                      </div>
-                  </div>
-              </div>
-          </div>
-          <!-- 右侧委托信息 -->
-          <div class="mid-r">
-              <div class="take-info  base-box">
-                  <div>该房源共<span class="red-text">2</span>位客户看房</div>
-                  <div>最近7天带看<span class="red-text">22</span>次,总带看<span class="red-text">33</span>次。</div>
-              </div>
-              <div class="staff-info base-box">
-                  <el-tabs v-model="opening " @tab-click="handleClick">
-                    <el-tab-pane label="开盘人" name="first">
-                        <div class="el-tabs__content">
-                            <div role="tabpanel" id="pane-first" aria-labelledby="tab-first" class="el-tab-pane">
-                                <div class="tab-conten">
-                                  <img src="/static/img/user-head.d2916812.png">
-                                  <div>
-                                    <div class="user-name">
-                                      <div class="text">柳晓青</div><span class="user-but">系统管理组</span>
-                                    </div>
-                                  <div class="text">13736376666</div>
-                                  <div v-show="allIn"><div class="user-other">其它信息</div></div>
-                                </div>
-                              </div>
-                            </div>
-                        </div>
-
-                    </el-tab-pane>
-                    <el-tab-pane label="楼主" name="second">楼主</el-tab-pane>
-                  </el-tabs>
-                  <div class="open-mero" @click="allIn=!allIn">{{allIn?'收起全部':'查看全部'}}
-                    <img src="../../../assets/mero.png" alt="" class="mero" >  <!--:class="allIn?'more-colose':'more-open'" -->
-                  </div>
-              </div>
-              <!-- <div class="operation-list p0">
-                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">编辑房源</button>
-                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">转潜盘</button>
-                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">激活房源</button>
-              </div> -->
-              <div class="operation-table base-box">
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">住建委卖委托</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">独家委托</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">普通委托</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">踩盘</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>踩盘</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">普通实勘</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增实勘</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">VR实勘</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>VR预约</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">钥匙</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增钥匙</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">发布房源</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>发布</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">经理推荐</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>推荐</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">总房源</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>推荐</span></button></div>
-                  </div>
-                  <div class="table-box">
-                    <div class="t-item">
-                      <span class="i">推广资料</span>
-                    </div>
-                    <div class="t-item"><span class="i">无委托</span></div>
-                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增</span></button></div>
-                  </div>
-              </div>
-              <div class="customer">
-                  <div class="customer-title">
-                      匹配客户
-                  </div>
-                  <div class="mt10 clearfix">
-                      <div class="customre-line"></div>
-                  <div class="match-customre rel">
-                      <div class="customre-name">
-                        崔新河先生 
-                      </div><div class="t-tag">A级</div>
-                      <div class="user-but customr-name">私客</div>
-                  </div>
-                  <div style="width:100%">
-                      <div class="customre-l"> 
-                          <div class="row-i"><span>交易：</span><span>求购</span></div>
-                          <div class="row-i"><span>意向物业：</span><span>商铺</span></div>
-                          <div class="row-i"><span>意向售价：</span><span>100.00-150.00</span></div>
-                          <div class="row-i"><span>下次联络：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>租期到期：</span><span>求购</span></div>
-                          <div class="row-i"><span>最后跟进时间：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>最后跟进内容：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i mt10"><span>员工：</span><span>中原找房 蔡传兴</span></div>
-                          <div class="row-i pb10"><span>备注：</span><span></span></div>
-                      </div>
-                       <div class="customre-r"> 
-                          <div class="row-i"><span>交易：</span><span>预定</span></div>
-                          <div class="row-i"><span>意向面积：</span><span>商铺</span></div>
-                          <div class="row-i"><span>意向租价：</span><span>100.00-150.00</span></div>
-                          <div class="row-i"><span>委托日期：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>推荐项目：</span><span>求购</span></div>
-                      </div>
-                  </div>
-                  </div>
-                  
-                  <div class=" clearfix">
-                      <div class="customre-line"></div>
-                  <div class="match-customre rel">
-                      <div class="customre-name">
-                        崔新河先生 
-                      </div><div class="t-tag">A级</div>
-                      <div class="user-but customr-name">私客</div>
-                  </div>
-                  <div style="width:100%">
-                      <div class="customre-l"> 
-                          <div class="row-i"><span>交易：</span><span>求购</span></div>
-                          <div class="row-i"><span>意向物业：</span><span>商铺</span></div>
-                          <div class="row-i"><span>意向售价：</span><span>100.00-150.00</span></div>
-                          <div class="row-i"><span>下次联络：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>租期到期：</span><span>求购</span></div>
-                          <div class="row-i"><span>最后跟进时间：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>最后跟进内容：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i mt10"><span>员工：</span><span>中原找房 蔡传兴</span></div>
-                          <div class="row-i"><span>备注：</span><span></span></div>
-                      </div>
-                       <div class="customre-r"> 
-                          <div class="row-i"><span>交易：</span><span>预定</span></div>
-                          <div class="row-i"><span>意向面积：</span><span>商铺</span></div>
-                          <div class="row-i"><span>意向租价：</span><span>100.00-150.00</span></div>
-                          <div class="row-i"><span>委托日期：</span><span>2020/11/16 14:30</span></div>
-                          <div class="row-i"><span>推荐项目：</span><span>求购</span></div>
-                      </div>
-                  </div>
-                  </div>
-              </div>
-          </div>
-        </div>
-      </div>
-    </div>
-</template>
-
-<script>
-  import dynamicElement from '../../mixins/dynamicElement';
-  export default {
-    name: 'ct-PropertyDetailRET',
-    mixins: [dynamicElement],
-    props: {
-      vmodel: Object,
-      api: String,
-      apiParam: Object,
-    },
-    data() {
-      return {
-        PropertyInfo: {
-        swiper: [
-          { name: '客厅', url: 'http://10.5.10.44:13031/Images/20210705/112133_b62d7a78-96b3-4801-b94c-47b83263a001.jpg?width=140&height=135&mode=stretch', isVr: true, type: 'vr' },
-          { name: '餐厅', url: 'http://10.5.10.44:13031/Images/20210705/112124_4f83c6d5-36bd-444f-9ea1-fa4e3f4de5e0.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'img' },
-          { name: '户型图', url: 'http://10.5.10.44:13031/Images/20210705/112505_6a3cb2d4-c773-4aba-91af-df6721eadb34.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'video' },
-          { name: '其它', url: 'http://10.5.10.44:13031/Images/20210705/112133_b62d7a78-96b3-4801-b94c-47b83263a001.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'video' },
-        ],},
-        allInfo: false,
-        allIn:false,
-        codeOwner: false,
-        columnList: [
-        {
-          prop: 'name',
-          label: '联系人',
-          width: '80'
-        },
-        {
-          prop: 'type',
-          label: '类型',
-          width: '60'
-        },
-        {
-          prop: 'phone',
-          label: '手机',
-          width: '125'
-        },
-        {
-          prop: 'tel',
-          label: '座机',
-          width: '170'
-        },
-        {
-          prop: 'wx',
-          label: '微信',
-          width: '150'
-        },
-        {
-          prop: 'entTime',
-          label: '录入时间',
-          width: '150'
-        },
-        {
-          prop: 'entUser',
-          label: '录入人',
-          width: '80'
-        },
-        {
-          prop: 'remarks',
-          label: '操作',
-          // width:'180'
-        },
-        ],
-        tableData: [
-          {
-            name: '王建国先生',
-            type: '业主',
-            phone: '13866668888',
-            tel: '0275-55556666-5896',
-            wx: '555566665896',
-            entTime: '2021-10-26 29:27:25',
-            entUser: '王天',
-            remarks: '删除',
-            isIcon: true,
-          },
-        ],
-        follow:'first',
-        followData:[
-          {
-            date:'20/12/2020',
-            name:'出售',
-            address:'kenly',
-
-          }
-        ],
-        options: [{
-          value: '选项1',
-          label: '本盘跟进'
-        }, {
-          value: '选项2',
-          label: '全部跟进'
-        }, {value: '选项3',
-          label: '合开盘跟进'
-        },
-        
-        ],
-        opening:'first',      
-      }
-    },
-    mounted() {
-      var self = this;
-      this.$nextTick(function () {        
-        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);
-        }
-      });
-    },
-    methods: {
-      load(data) {
-        this.model = data;
-      },
-      lookOwner() {
-        this.codeOwner = true
-      },
-      onSearch() {
-        console.log('submit!');
-      },
-      handleClick(tab, event) {
-          console.log(tab, event);
-        }
-      },
-  }
-</script>
-<style lang="scss" scoped>
-.main{
-  background: #ECEFF2;
-  
-}
-.rel{
-  position: relative;
-}
-.y-auto {
-    overflow-y: auto;
-    overflow-x: auto;
-}
-.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: #EE6B6B;
-          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;
-        }
-        .title-other {
-          color: #999999;
-          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: #999999;
-            background: #F3F3F3;
-            border: 1px solid #d8d8d8;
-            padding: 2px 9px;
-            border-radius: 3px;
-            margin-right: 10px;
-          }
-        }
-        .head-but{
-          margin-left: auto;
-          font-size: 12px;
-          text-align: right;
-          .max-report{
-            height: 26px;
-            color: #333333;
-            background-color: #FFFFFF;
-            border: 1px solid #E0E0E0;
-            border-radius: 6px;
-            font-size: 12px;
-          }
-          .max-report:hover .report-cont{
-              display: block;
-              color: #333;
-          }
-          .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: #333;
-          }
-          .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: #EE6B6B;
-          }
-          .expand-f {
-            line-height: 15px;
-            font-size: 18px;
-            font-weight: bold;
-          }
-          .info-conten {
-            display: flex;
-            .info-row {
-              display: flex;
-            }
-           
-            .hous-t {
-              width: 260px;
-              .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: 80px;
-                  height: 44px;
-                  margin-right: 10px;
-                  display: inline-block;
-                  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: 33.3%;
-                display: flex;
-              }
-              .info-mid {
-                margin: 35px 0 0 0;
-                padding: 20px;
-                border-top: 1px solid #e0e0e0;
-                border-bottom: 1px solid #e0e0e0;
-                display: flex;
-                justify-content: space-between;
-                .mid-i {
-                  text-align: center;
-                }
-                .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: 15px;
-            .info-row {
-              display: flex;
-              width: 100%;
-              padding-left: 9px;
-            }
-            .row-i{
-              width: 25%;
-            }
-          }
-          .open-mero{
-            text-align: center;
-            padding: 3px 0;
-          }
-          .mero{
-              width: 12px;
-              height: 6px;
-              vertical-align: 2px;
-              overflow: hidden;
-              margin-left: 5px;
-          }
-          .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 {
-        }
-
-        .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 {
-              margin-top: 5px;
-              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: #EE6B6B;
-          }
-        }
-        .staff-info {
-          padding-bottom: 10px;
-          .open-mero{
-            text-align: center;
-            padding: 3px 0;
-          }
-          .mero{
-              width: 12px;
-              height: 6px;
-              vertical-align: 2px;
-              overflow: hidden;
-              margin-left: 5px;
-          }
-          .hous-mero {
-            display: flex;
-            .mero-labe {
-              min-width: 60px;
-            }
-          }
-         
-         
-        }
-        .operation-list {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .list-item {
-            width: 33.3%;
-            height: 62px;
-            font-size: 14px;
-            text-align: center;
-            font-weight: bold;
-            border: none;
-          }
-          .list-item:hover {
-            color: #fff;
-            background: #FF9393;
-          }
-          .list-item:nth-child(2) {
-            margin: 0 10px;
-          }
-          .list-item:nth-child(3) {
-            margin-left: 0;
-          }
-        }
-
-        .operation-table {
-          padding: 0;
-          .table-box {
-            display: flex;
-            // align-items: center;
-            border-bottom: 1px solid #e0e0e0;
-            .t-item {
-              padding: 0 16px;
-              font-size: 14px;
-              flex: 1;
-              position: relative;
-              display: flex;
-              flex-flow: column;
-              align-items: flex-start;
-              border-right: 1px solid #e0e0e0;
-              .i {
-                position: absolute;
-                top: 50%;
-                // left: 50%;
-                transform: translateY(-50%);
-              }
-              .t-but {
-                font-size: 12px;
-                margin-left: 0;
-                width: 104px;
-                // height: 100%;
-                // margin: 12px 16px 0 16px;
-                margin-top: 12px;
-                padding: 0;
-              }
-              .t-but:nth-last-child(1) {
-                margin-bottom: 12px;
-              }
-            }
-            .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 #EE6B6B;
-          color: #EE6B6B;
-          height: 26px;
-          
-          border-radius: 6px;
-          font-size: 12px;
-        }
-        .max-info:hover,.max-default:hover{
-           background-color:#FF9393;
-            border-color: #FF9393;
-            color: #fff;
-        }
-        // .max-infon:hover.report,.max-info:active.report{
-        //   color: #fff;
-        // }
-        .max-info:active,.max-default:active{
-            background-color: #B33136;
-            border-color: #B33136;
-            color: #fff;
-        }
-        .max-btn-add button{ /*list-button*/
-    height: 26px;
-    background: #EE6B6B;
-    box-shadow: 0px 2px 4px 0px rgba(238,107,107,0.25);
-    border-radius: 6px;
-}
-.max-btn-add button:hover{
-    background-color:#FF9393;
-    border-color: #FF9393;
-}
-.max-btn-add button:focus,.max-btn-add button:active{
-    background-color: #B33136;
-    border-color: #B33136;
-}
-.max-comfirm-content button{
-    height: 26px;
-    border-radius: 6px;
-}
-.follow-search-bar{
-  display: flex;
-}
-.r{
-  float: right;
-}
-</style>
-
-
+<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-type">{{model.fields1Dic.Trade.value}}</div>
+            <div class="head-info">
+                <div class="title">
+                  <span>{{model.fields1Dic.StatusName.value}}</span>
+                  <span class="head-line"></span>
+                  <span>{{model.fields1Dic.EstateName.value}}</span>
+                  <span> {{model.fields1Dic.BuildingName.value}}</span>
+                  <span>{{model.fields1Dic.RoomNo.value}}</span>
+                  <img :src="model.fields1Dic.FavoriteUrl.value" alt="" class="collection">
+                </div>
+                <div class="title-other">
+                  <span>{{model.fields1Dic.PropertyNo.label}}{{model.fields1Dic.PropertyNo.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 :src="model.fields1Dic.LocationUrl.value" alt="" class="location">
+                </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>
+           
+            <div class="head-but">
+              <div>
+                <component v-if="model.otherTradeActionRouter!==null" v-bind="model.otherTradeActionRouter" class="max-default"
+                :is="model.otherTradeActionRouter.is" :vmodel="model.otherTradeActionRouter" :api="model.optionApi"></component>
+                <component class="max-report" v-if="model.actionRouters!==null && model.actionRouters[0]!==null"
+                :is="model.actionRouters[0].is" :vmodel="model.actionRouters[0]" :api="model.optionApi"></component>
+              </div>
+              <div class="mt5">
+                <component class="max-report" v-if="model.actionRouters!==null && model.actionRouters[1]!==null"
+                :is="model.actionRouters[1].is" :vmodel="model.actionRouters[1]" :api="model.optionApi"></component>                
+              </div>
+              <div class="mt5">
+                <button type="button" class="el-button el-button--info el-button--mini max-report rel"
+                v-if="model.actionRoutersMoreList !== null">
+                  <img src="../../../assets/dian.png" alt="" class="report">
+                  <ul class="report-cont">
+                      <li v-for="(col, index) in model.actionRoutersMoreList" :key="index"  v-if="col.show !== false">
+                        <component class="max-report" :is="col.is" :vmodel="col" :api="model.optionApi"></component>
+                      </li>
+                  </ul>
+                </button> 
+                 <component v-else-if="model.actionRouters!==null && model.actionRouters[2]!==null" class="max-report"
+                :is="model.actionRouters[2].is" :vmodel="model.actionRouters[2]" :api="model.optionApi"></component>   
+              </div>
+            </div>
+        </div>
+        <div ref="detail" class="details-mid y-auto" :style="{'height':model.detailHeight?model.detailHeight+'px':'780px'}">
+          <div class="mid-l">
+            <!-- 图片内容部分 -->
+            <div class="hous-info base-box">
+              <div class="info-conten">
+                <div class="hous-t">
+                  <div>
+                    <el-carousel
+                      arrow="hover"
+                      height="140px"
+                      :autoplay="false"
+                      indicator-position="none"
+                    >
+                      <el-carousel-item
+                        v-for="(item,index) in PropertyInfo.swiper"
+                        :key="index"
+                      >
+                        <div class="swiper-i">
+                          <img :src="item.url">
+                          <img src="../../../assets/Mvr.png" alt="" class="hous-icon">
+                          
+                        </div>
+                      </el-carousel-item>
+                    </el-carousel>
+
+                    <div class="hous-img">
+                      <div
+                        class="img-i"
+                        v-for="(item,index) in PropertyInfo.swiper"
+                        :key="index"
+                      > <img :src="item.url">
+                        <div class="img-bot">
+                          <div v-if="item.type.includes('vr')">
+                            <img src="../../../assets/VR.png" alt="" class="img-icon">
+                            <span>VR</span>
+                          </div>
+                          <div v-if="item.type.includes('img')">
+                            <img src="../../../assets/image.png" alt="" class="img-icon">
+                            <span>图片</span>
+                          </div>
+                          <div v-if="item.type.includes('video')">
+                            <img src="../../../assets/video.png" alt="" class="img-icon">
+                            <span>视频</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="hous-b">
+                  <img :src="model.fields1Dic.ewmUrl.value" alt="" class="code-ewm">
+                    <div class="info-row mb20 mt5">
+                      <div class="row-i"><span>{{model.fields1Dic.Price.label}}</span><span class="base-clolr expand-f">{{model.fields1Dic.Price.value}}</span><span class="base-clolr">{{model.fields1Dic.Price.unitName}}</span>
+                      <img src="" alt="">
+                      </div>
+                      <div class="row-i"><span>{{model.fields1Dic.PriceUnit.label}}</span><span class="base-clolr">{{model.fields1Dic.PriceUnit.value}}</span><span class="base-clolr">{{model.fields1Dic.PriceUnit.unitName}}</span></div>
+                      <div class="row-i"><span>{{model.fields1Dic.PriceLine.label}}</span><div>{{model.fields1Dic.PriceLine.value}}{{model.fields1Dic.PriceLine.unitName}}</div></div></div>
+                   <div class="info-row">
+                      <div class="row-i">
+                        <span >{{model.fields1Dic.MarketRateOfReturn.label}}</span><span>{{model.fields1Dic.MarketRateOfReturn.value}} </span><span>{{model.fields1Dic.MarketRateOfReturn.unitName}}</span>
+                      </div>                     
+                      <div class="row-i"><span>{{model.fields1Dic.EstimatePriceRent.label}}</span><div>{{model.fields1Dic.EstimatePriceRent.value}}<span>{{model.fields1Dic.EstimatePriceRent.unitName}}</span></div></div>
+                      <div class="row-i"><span>{{model.fields1Dic.EstimatePriceRentUnit.label}}</span><span>{{model.fields1Dic.EstimatePriceRentUnit.value}}</span><span>{{model.fields1Dic.EstimatePriceRentUnit.unitName}}</span></div>
+                  </div>
+                  
+                    <div class="info-mid">
+                      <div class="mid-i">
+                        <div>{{model.fields1Dic.Area.label}}</div><div>{{model.fields1Dic.Area.value}}{{model.fields1Dic.Area.unitName}}</div></div>
+                        <div class="mid-i"><div>{{model.fields1Dic.AreaNet.label}}</div><div>{{model.fields1Dic.AreaNet.value}}{{model.fields1Dic.AreaNet.unitName}}</div></div>
+                        <div class="mid-i"><div>{{model.fields1Dic.FloorName.label}}</div><div>{{model.fields1Dic.FloorName.value}}</div></div>
+                        <div class="mid-i"><div>{{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 mb20">
+                    <div v-for="(c, i) in col" :key="i" :class="c.singleLine===true?'row-i100':'row-i'"><span>{{c.label}}</span><span>{{c.value}}</span></div>                    
+                  </div>
+              </div>
+              <div class="open-mero" @click="allInfo=!allInfo">{{allInfo?'收起全部':'查看全部'}}
+                <img src="../../../assets/mero.png" alt="" class="mero" >  <!--:class="allInfo?'more-colose':'more-open'" -->
+              </div>
+            </div>
+            <div class="contacts-info base-box">
+              <!-- 联系人 -->
+              <div class="contacts-head">
+                    <div class="title-l">联系人信息</div>
+                    <button type="button"  v-if="!codeOwner"  @click="lookOwner" class="el-button contacts-but el-button--info el-button--mini max-info">查看业主</button>
+                    <div class="contacts-tips" v-else>
+                      <button class="el-button el-button--primary el-button--mini max-btn-add">新增联系人</button>
+                      <button class="el-button el-button--primary el-button--mini max-btn-add">通话记录</button>
+                      <button class="el-button el-button--primary el-button--mini max-btn-add">查看历史号码</button>
+                    </div>
+
+              </div>
+              <!-- 表格 -->
+              <div class="contacts-table" v-show="codeOwner">
+                  <el-table
+                     :data="tableData"
+                      stripe
+                      fit
+                      style="width: 100%"
+                      :header-cell-style="{background:'#f3f3f3',color:'#333333'}">
+                   <el-table-column
+                  v-for="(item,index) in columnList"
+                  :key="index"
+                  :property="item.prop"
+                  :label="item.label"
+                  :min-width="item.width"
+                >
+                  <template slot-scope="scope">
+                    <span v-if="scope.column.property=='phone'">{{ scope.row.phone }}
+                      
+                    </span>
+                    <span v-else-if="scope.column.property=='tel'">
+                      {{scope.row.tel}}
+                     
+                    </span>
+                    <span v-else>
+                      {{scope.row[scope.column.property]}}
+                    </span>
+                  </template>
+                </el-table-column>
+                  </el-table>
+              </div>
+            </div>
+            <div class="tablist-info base-box">
+                <div class="details-tabs-box">
+                  <el-menu :default-active="model.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                    <el-menu-item v-for="(col, index) in model.tags1" :key="col.appID" :index="index.toString()">
+                      {{col.appName}}
+                    </el-menu-item>
+                  </el-menu>
+                  <ct-searchlist v-if="model.searchConditionApiTags1" :key="model.searchlistKey"
+                  :apiParam="model.paramDataTags1"
+                  :searchConditionApi="model.searchConditionApiTags1" 
+                  :searchDataApi="model.searchDataApiTags1"></ct-searchlist>
+                    <!-- <el-tabs v-model="follow">
+                      <el-tab-pane label="跟进" name="first">
+                        <el-form
+                          class="follow-search-bar"
+                        >
+                              <!-- <el-select
+                                v-model="value"
+                                placeholder="跟进类型"
+                                class="mr10"
+                              >
+                                <el-option
+                                  v-for="item in options"
+                                  :key="item.value"
+                                  :label="item.label"
+                                  :value="item.value"
+                                >
+                                </el-option>
+                              </el-select>
+                              <el-input
+                                class="w300 mr10"
+                                placeholder="请输入"
+                                maxlength="500"
+                              ></el-input>
+                              <el-button
+                                type="primary"
+                                @click="onSearch"
+                              >保存</el-button>
+                              <button class="el-button el-button--primary el-button--mini max-btn-add">新增跟进</button>
+                        </el-form>
+
+                        <el-table
+                          :data="followData"
+                          stripe
+                          style="width: 100%;margin-top:20px;height:200px;overflow:auto"
+                          :header-cell-style="{background:'#f3f3f3',color:'#333333'}"
+                          >
+                          <el-table-column
+                            prop="date"
+                            label="日期"
+                            width="180">
+                          </el-table-column>
+                          <el-table-column
+                            prop="name"
+                            label="状态"
+                            width="180">
+                          </el-table-column>
+                          <el-table-column
+                            prop="address"
+                            label="跟进人">
+                          </el-table-column>
+                          <el-table-column
+                            prop="address"
+                            label="跟进人部门">
+                          </el-table-column>
+                          <el-table-column
+                            prop="address"
+                            label="跟进时间">
+                          </el-table-column>
+                        </el-table>
+                      </el-tab-pane>
+                      <el-tab-pane label="委托" name="second">委托</el-tab-pane>
+                      <el-tab-pane label="钥匙" name="third">钥匙</el-tab-pane>
+                      <el-tab-pane label="交易变更" name="fourth">交易变更</el-tab-pane>
+                      <el-tab-pane label="多媒体记录" name="">多媒体记录</el-tab-pane>
+                      <el-tab-pane label="业绩分配" name="">业绩分配</el-tab-pane>
+                      <el-tab-pane label="楼主历史" name="">楼主历史</el-tab-pane>
+                      <el-tab-pane label="租户信息" name="">租户信息</el-tab-pane>
+                      <el-tab-pane label="合并盘" name="">合并盘</el-tab-pane>
+                      <el-tab-pane label="佐证" name="">佐证</el-tab-pane>
+                      <el-tab-pane label="销控表" name="">销控表</el-tab-pane>
+                    </el-tabs> -->
+                </div>
+            </div>
+              <div class="contribute-info base-box">
+                  <div class="title-l">贡献人信息</div>
+                  <div class="contribute-list">
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                      <div class="contribute-i">
+                        <img src="" alt="图片">
+                        <div><div class="user-title">柳晓青（离职）</div><div class="user-but w56">收钥人</div></div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <!-- 右侧委托信息 -->
+          <div class="mid-r">
+              <div class="take-info  base-box">
+                  <div>该房源共<span class="red-text">{{model.fields1Dic.LookCustomerCount.value}}</span>位客户看房</div>
+                  <div>最近7天带看<span class="red-text">{{model.fields1Dic.CustomerLookCount7.value}}</span>次,总带看<span class="red-text">{{model.fields1Dic.CustomerLookCountAll.value}}</span>次。</div>
+              </div>
+              <div class="staff-info base-box">
+                  <el-tabs v-model="opening " @tab-click="handleClick">
+                    <el-tab-pane label="开盘人" name="first">
+                        <div class="el-tabs__content">
+                            <div role="tabpanel" id="pane-first" aria-labelledby="tab-first" class="el-tab-pane">
+                                <div class="tab-conten">
+                                  <img src="/static/img/user-head.d2916812.png">
+                                  <div>
+                                    <div class="user-name">
+                                      <div class="text">柳晓青</div><span class="user-but">系统管理组</span>
+                                    </div>
+                                  <div class="text">13736376666</div>
+                                  <div v-show="allIn"><div class="user-other">其它信息</div></div>
+                                </div>
+                              </div>
+                            </div>
+                        </div>
+
+                    </el-tab-pane>
+                    <el-tab-pane label="楼主" name="second">楼主</el-tab-pane>
+                  </el-tabs>
+                  <div class="open-mero" @click="allIn=!allIn">{{allIn?'收起全部':'查看全部'}}
+                    <img src="../../../assets/mero.png" alt="" class="mero" >  <!--:class="allIn?'more-colose':'more-open'" -->
+                  </div>
+              </div>
+              <!-- <div class="operation-list p0">
+                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">编辑房源</button>
+                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">转潜盘</button>
+                  <button data-v-6fe32525="" type="button" class="el-button list-item base-box el-button--default">激活房源</button>
+              </div> -->
+              <div class="operation-table base-box">
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">住建委卖委托</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">独家委托</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">普通委托</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增委托</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">踩盘</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>踩盘</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">普通实勘</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增实勘</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">VR实勘</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>VR预约</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">钥匙</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增钥匙</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">发布房源</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>发布</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">经理推荐</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>推荐</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">总房源</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>推荐</span></button></div>
+                  </div>
+                  <div class="table-box">
+                    <div class="t-item">
+                      <span class="i">推广资料</span>
+                    </div>
+                    <div class="t-item"><span class="i">无委托</span></div>
+                    <div class="t-item"><button type="button" class="el-button t-but el-button--info max-info"><span>新增</span></button></div>
+                  </div>
+              </div>
+              <div class="customer">
+                  <div class="customer-title">
+                      匹配客户
+                  </div>
+                  <div class="mt10 clearfix">
+                      <div class="customre-line"></div>
+                  <div class="match-customre rel">
+                      <div class="customre-name">
+                        崔新河先生 
+                      </div><div class="t-tag">A级</div>
+                      <div class="user-but customr-name">私客</div>
+                  </div>
+                  <div style="width:100%">
+                      <div class="customre-l"> 
+                          <div class="row-i"><span>交易：</span><span>求购</span></div>
+                          <div class="row-i"><span>意向物业：</span><span>商铺</span></div>
+                          <div class="row-i"><span>意向售价：</span><span>100.00-150.00</span></div>
+                          <div class="row-i"><span>下次联络：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>租期到期：</span><span>求购</span></div>
+                          <div class="row-i"><span>最后跟进时间：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>最后跟进内容：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i mt10"><span>员工：</span><span>中原找房 蔡传兴</span></div>
+                          <div class="row-i pb10"><span>备注：</span><span></span></div>
+                      </div>
+                       <div class="customre-r"> 
+                          <div class="row-i"><span>交易：</span><span>预定</span></div>
+                          <div class="row-i"><span>意向面积：</span><span>商铺</span></div>
+                          <div class="row-i"><span>意向租价：</span><span>100.00-150.00</span></div>
+                          <div class="row-i"><span>委托日期：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>推荐项目：</span><span>求购</span></div>
+                      </div>
+                  </div>
+                  </div>
+                  
+                  <div class=" clearfix">
+                      <div class="customre-line"></div>
+                  <div class="match-customre rel">
+                      <div class="customre-name">
+                        崔新河先生 
+                      </div><div class="t-tag">A级</div>
+                      <div class="user-but customr-name">私客</div>
+                  </div>
+                  <div style="width:100%">
+                      <div class="customre-l"> 
+                          <div class="row-i"><span>交易：</span><span>求购</span></div>
+                          <div class="row-i"><span>意向物业：</span><span>商铺</span></div>
+                          <div class="row-i"><span>意向售价：</span><span>100.00-150.00</span></div>
+                          <div class="row-i"><span>下次联络：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>租期到期：</span><span>求购</span></div>
+                          <div class="row-i"><span>最后跟进时间：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>最后跟进内容：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i mt10"><span>员工：</span><span>中原找房 蔡传兴</span></div>
+                          <div class="row-i"><span>备注：</span><span></span></div>
+                      </div>
+                       <div class="customre-r"> 
+                          <div class="row-i"><span>交易：</span><span>预定</span></div>
+                          <div class="row-i"><span>意向面积：</span><span>商铺</span></div>
+                          <div class="row-i"><span>意向租价：</span><span>100.00-150.00</span></div>
+                          <div class="row-i"><span>委托日期：</span><span>2020/11/16 14:30</span></div>
+                          <div class="row-i"><span>推荐项目：</span><span>求购</span></div>
+                      </div>
+                  </div>
+                  </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  import dynamicElement from '../../mixins/dynamicElement';
+  import dynamicSearchList from '../../dynamicSearchList/src/dynamicSearchList.vue';
+  export default {
+    name: 'ct-PropertyDetailRET',
+    mixins: [dynamicElement],
+    components: {
+      'ct-searchlist': dynamicSearchList,
+    },
+    props: {
+      vmodel: Object,
+      api: String,
+      apiParam: Object,
+    },
+    data() {
+      return {
+        PropertyInfo: {
+        swiper: [
+          { name: '客厅', url: 'http://10.5.10.44:13031/Images/20210705/112133_b62d7a78-96b3-4801-b94c-47b83263a001.jpg?width=140&height=135&mode=stretch', isVr: true, type: 'vr' },
+          { name: '餐厅', url: 'http://10.5.10.44:13031/Images/20210705/112124_4f83c6d5-36bd-444f-9ea1-fa4e3f4de5e0.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'img' },
+          { name: '户型图', url: 'http://10.5.10.44:13031/Images/20210705/112505_6a3cb2d4-c773-4aba-91af-df6721eadb34.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'video' },
+          { name: '其它', url: 'http://10.5.10.44:13031/Images/20210705/112133_b62d7a78-96b3-4801-b94c-47b83263a001.jpg?width=140&height=135&mode=stretch', isVr: false, type: 'video' },
+        ],},
+        allInfo: false,
+        allIn:false,
+        codeOwner: false,
+        columnList: [
+        {
+          prop: 'name',
+          label: '联系人',
+          width: '80'
+        },
+        {
+          prop: 'type',
+          label: '类型',
+          width: '60'
+        },
+        {
+          prop: 'phone',
+          label: '手机',
+          width: '125'
+        },
+        {
+          prop: 'tel',
+          label: '座机',
+          width: '170'
+        },
+        {
+          prop: 'wx',
+          label: '微信',
+          width: '150'
+        },
+        {
+          prop: 'entTime',
+          label: '录入时间',
+          width: '150'
+        },
+        {
+          prop: 'entUser',
+          label: '录入人',
+          width: '80'
+        },
+        {
+          prop: 'remarks',
+          label: '操作',
+          // width:'180'
+        },
+        ],
+        tableData: [
+          {
+            name: '王建国先生',
+            type: '业主',
+            phone: '13866668888',
+            tel: '0275-55556666-5896',
+            wx: '555566665896',
+            entTime: '2021-10-26 29:27:25',
+            entUser: '王天',
+            remarks: '删除',
+            isIcon: true,
+          },
+        ],
+        follow:'first',
+        followData:[
+          {
+            date:'20/12/2020',
+            name:'出售',
+            address:'kenly',
+
+          }
+        ],
+        options: [{
+          value: '选项1',
+          label: '本盘跟进'
+        }, {
+          value: '选项2',
+          label: '全部跟进'
+        }, {value: '选项3',
+          label: '合开盘跟进'
+        },
+        
+        ],
+        opening:'first',      
+      }
+    },
+    mounted() {
+      var self = this;
+      this.$nextTick(function () {
+        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: {
+      load(data) {
+        this.model = data; 
+        this.loadFields();
+      },
+      loadFields() {
+        var self = this;
+        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;
+            }
+          }
+        });
+      },
+      lookOwner() {
+        this.codeOwner = true
+      },
+      onSearch() {
+        console.log('submit!');
+      },
+      handleClick(tab, event) {
+          console.log(tab, event);
+      },
+      setDetailHeight() {
+        this.$nextTick(() => {
+          if (this.$refs.detail) {
+            var h1 = this.$refs.main.offsetHeight | 0;
+            var h2 = this.$refs.detail.offsetTop | 0;
+            let detailHeight = h1 - h2 - 5;
+            this.model.detailHeight = detailHeight < 40 ? 350 : detailHeight;
+            console.log(h1);
+            console.log(h2);
+            console.log(this.model.detailHeight);
+          }
+        });
+      }, 
+      handleSelect(key, keyPath) {
+        if(this.model.tags1 && this.model.tags1[key]){
+          this.model.searchlistKey=this.model.searchlistKey+1;
+          this.model.searchConditionApiTags1=this.model.tags1[key].searchConditionApiUrl||'';
+          this.model.searchDataApiTags1=this.model.tags1[key].searchDataApiUrl||'';
+          this.model.paramDataTags1=this.model.tags1[key].paramData||'';
+        }
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+.main{
+  background: #ECEFF2;
+  
+}
+.rel{
+  position: relative;
+}
+.y-auto {
+    overflow-y: auto;
+    overflow-x: auto;
+}
+.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: #EE6B6B;
+          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;
+        }
+        .title-other {
+          color: #999999;
+          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: #999999;
+            background: #F3F3F3;
+            border: 1px solid #d8d8d8;
+            padding: 2px 9px;
+            border-radius: 3px;
+            margin-right: 10px;
+          }
+        }
+        .head-but{
+          margin-left: auto;
+          font-size: 12px;
+          text-align: right;
+          .max-report{
+            height: 26px;
+            color: #333333;
+            background-color: #FFFFFF;
+            border: 1px solid #E0E0E0;
+            border-radius: 6px;
+            font-size: 12px;
+          }
+          .max-report:hover .report-cont{
+              display: block;
+              color: #333;
+          }
+          .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: #333;
+          }
+          .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: #EE6B6B;
+          }
+          .expand-f {
+            line-height: 15px;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          .info-conten {
+            display: flex;
+            .info-row {
+              display: flex;
+            }
+           
+            .hous-t {
+              width: 260px;
+              .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: 80px;
+                  height: 44px;
+                  margin-right: 10px;
+                  display: inline-block;
+                  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: 33.3%;
+                display: flex;
+              }
+              .info-mid {
+                margin: 35px 0 0 0;
+                padding: 20px;
+                border-top: 1px solid #e0e0e0;
+                border-bottom: 1px solid #e0e0e0;
+                display: flex;
+                justify-content: space-between;
+                .mid-i {
+                  text-align: center;
+                }
+                .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: 15px;
+            .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;
+          }
+          .mero{
+              width: 12px;
+              height: 6px;
+              vertical-align: 2px;
+              overflow: hidden;
+              margin-left: 5px;
+          }
+          .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 {
+        }
+
+        .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 {
+              margin-top: 5px;
+              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: #EE6B6B;
+          }
+        }
+        .staff-info {
+          padding-bottom: 10px;
+          .open-mero{
+            text-align: center;
+            padding: 3px 0;
+          }
+          .mero{
+              width: 12px;
+              height: 6px;
+              vertical-align: 2px;
+              overflow: hidden;
+              margin-left: 5px;
+          }
+          .hous-mero {
+            display: flex;
+            .mero-labe {
+              min-width: 60px;
+            }
+          }
+         
+         
+        }
+        .operation-list {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .list-item {
+            width: 33.3%;
+            height: 62px;
+            font-size: 14px;
+            text-align: center;
+            font-weight: bold;
+            border: none;
+          }
+          .list-item:hover {
+            color: #fff;
+            background: #FF9393;
+          }
+          .list-item:nth-child(2) {
+            margin: 0 10px;
+          }
+          .list-item:nth-child(3) {
+            margin-left: 0;
+          }
+        }
+
+        .operation-table {
+          padding: 0;
+          .table-box {
+            display: flex;
+            // align-items: center;
+            border-bottom: 1px solid #e0e0e0;
+            .t-item {
+              padding: 0 16px;
+              font-size: 14px;
+              flex: 1;
+              position: relative;
+              display: flex;
+              flex-flow: column;
+              align-items: flex-start;
+              border-right: 1px solid #e0e0e0;
+              .i {
+                position: absolute;
+                top: 50%;
+                // left: 50%;
+                transform: translateY(-50%);
+              }
+              .t-but {
+                font-size: 12px;
+                margin-left: 0;
+                width: 104px;
+                // height: 100%;
+                // margin: 12px 16px 0 16px;
+                margin-top: 12px;
+                padding: 0;
+              }
+              .t-but:nth-last-child(1) {
+                margin-bottom: 12px;
+              }
+            }
+            .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 #EE6B6B;
+          color: #EE6B6B;
+          height: 26px;
+          
+          border-radius: 6px;
+          font-size: 12px;
+        }
+        .max-info:hover,.max-default:hover{
+           background-color:#FF9393;
+            border-color: #FF9393;
+            color: #fff;
+        }
+        // .max-infon:hover.report,.max-info:active.report{
+        //   color: #fff;
+        // }
+        .max-info:active,.max-default:active{
+            background-color: #B33136;
+            border-color: #B33136;
+            color: #fff;
+        }
+        .max-btn-add button{ /*list-button*/
+    height: 26px;
+    background: #EE6B6B;
+    box-shadow: 0px 2px 4px 0px rgba(238,107,107,0.25);
+    border-radius: 6px;
+}
+.max-btn-add button:hover{
+    background-color:#FF9393;
+    border-color: #FF9393;
+}
+.max-btn-add button:focus,.max-btn-add button:active{
+    background-color: #B33136;
+    border-color: #B33136;
+}
+.max-comfirm-content button{
+    height: 26px;
+    border-radius: 6px;
+}
+.follow-search-bar{
+  display: flex;
+}
+.r{
+  float: right;
+}
+</style>
+
+