qw_customer/src/views/Fuzeren/FuzerenView.vue

<template>
  <div id="FuzeRen">
    <!-- 背景渐变 -->
    <div class="top-color">
      <div class="top-fuzeren">
        <span class="top-fuzeren-fs">负责人 | <ww-open-data type="userName"
                                                         :openid=myId></ww-open-data> </span>
      </div>
    </div>

    <!-- 个人信息模块 -->
    <div class="PersonalInformation">
      <!-- 内块 -->
      <div class="PI-bodyInnerblock">
        <!-- 弹性盒布局 -->
        <div class="PI-Bflex">
          <div class="PI-Bleft">
            <div class="OneCeng">
              <!-- 用户名 -->
              <div class="wx_password">
                <span>{{ wx_password }}</span>
              </div>
            </div>
            <!-- 关键词 -->
            <!-- <div class="KeyWordss"> -->
            <!--  first -->
            <!-- <div class="First-kw">
                <span>微信</span>
              </div> -->
            <!-- second -->
            <!-- <div class="Second-kw">
                <span>我负责的</span>
              </div> -->
            <!-- </div> -->
          </div>
          <!-- icon -->
          <div class="PI-Bright">
            <div class="PSicon">
              <img :src="userimg"
                   alt=""
                   style="width: 100%; height: 100%;">
              <!-- <span class="iconfont icon-24gf-user2"></span> -->
            </div>
          </div>
        </div>
        <!-- 联系信息 -->
        <!-- <div class="ContactDetails">
          <span class="iconfont icon-xinxi span1"></span>
          <span class="span2">{{ xinxipass }}</span>
        </div> -->
        <!-- 电话单聊 -->
        <div class="TelephoneChat">
          <div class="Telephone"
               @click="callPhone">
            <span class="iconfont icon-dianhua span1"></span>
            <span class="Tp-text">电话</span>
          </div>
          <!-- <span>|</span> -->
          <!-- <div class="Chat">
            <span class="iconfont icon-xiaoxi span2"></span>
            <span class="Ch-text">单聊</span>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 标签模块 -->
    <div class="TagsModule">
      <!-- 内块 -->
      <div class="TagsModuleInnerblock">
        <!-- 标题 -->
        <p class="TagsModule-p">标签</p>
        <!-- 标签 -->
        <div class="label">
          <!-- first -->
          <div class="First-label"
               v-for="(item,index) in labelList"
               :key="index">
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 关系分析模块 -->
    <div class="RelationshipAnalysis">
      <!-- 内块 -->
      <div class="RA-body">
        <!-- 关系 -->
        <div class="RA-body-guanxi">
          <div class="RBG-tit">
            <span class="GX-tit">关系</span>
          </div>
          <div class="RBG-bd">
            <span class="GX-bd">{{relationship}}个 企业好友</span>
            <!-- <span class="GX-bd-fgx">|</span>
            <span class="GX-bd">0个 群聊</span> -->
          </div>
        </div>
        <!-- 分析 -->
        <!-- <div class="RA-body-fenxi">
          <div class="RBF-tit">
            <span class="FX-tit">分析</span>
          </div>
          <div class="RBF-bd">
            <span class="FX-bd">低意向客户</span>
          </div>
        </div> -->
      </div>
    </div>

    <!-- 标签栏模块 -->
    <div class="LabelBarModule">
      <tabs v-model="active"
            class="vanttabs"
            @click="onClick">
        <tab title="详情">
          <div class="TabsXiangqing">
            <!-- 基础信息 -->
            <div class="BasicInformation">
              <!-- 标题 -->
              <div class="BI-title">
                <span>基础信息</span>
              </div>
              <!-- 基础信息内容 -->
              <div class="BI-body">
                <!-- 顶层 -->
                <div class="BI-body-top">
                  <div class="BI-flex">
                    <span class="span1">昵称</span>
                    <span class="span2">{{ LabelBarModule.nickName }}</span>
                  </div>
                </div>
                <div class="BI-body-bottom">
                  <div class="BI-flex">
                    <span class="span1">性别</span>
                    <span class="span2">{{ LabelBarModule.sex }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 联系方式 -->
            <div class="ContactInformation">
              <!-- 标题 -->
              <div class="CI-title">
                <span>联系方式</span>
              </div>
              <!-- 联系方式内容 -->
              <div class="CI-body">
                <!-- first -->
                <div class="CI-body-first">
                  <div class="CI-flex">
                    <span class="span1">手机号</span>
                    <div> <span class="span2"
                                v-for="(item ,index ) in PhoneNumber"
                                :key="index"
                                @click="telPhoneNumber(item)">{{item}} </span></div>
                  </div>
                </div>
                <!-- second -->
                <div class="CI-body-second">
                  <div class="CI-flex">
                    <span class="span1">邮箱</span>
                    <span class="span2">{{LabelBarModule.email}}</span>
                  </div>
                </div>
                <!-- third -->
                <!-- <div class="CI-body-third">
                  <div class="CI-flex">
                    <span class="span1">地区</span>
                    <span class="span2">-</span>
                  </div>
                </div> -->
                <!-- fouth -->
                <div class="CI-body-fouth">
                  <div class="CI-flex">
                    <span class="span1">详细地址</span>
                    <div>
                      <span class="span2"
                            v-for="(item,index) in address"
                            :key="index">{{ item }}</span>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 身份信息 -->
            <div class="IdentityInformation">
              <!-- 标题 -->
              <div class="II-title">
                <span>身份信息</span>
              </div>
              <!-- 基础信息内容 -->
              <div class="II-body">
                <!-- 顶层 -->
                <!-- <div class="II-body-top">
                  <div class="II-flex">
                    <span class="span1">性别</span>
                    <span class="span2">-</span>
                  </div>
                </div> -->
                <div class="II-body-bottom">
                  <div class="II-flex">
                    <span class="span1">生日</span>
                    <span class="span2">{{ LabelBarModule.birthday }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tab>
        <tab title="动态">
          <div class=TrendsDongTai>
            <Steps direction="vertical"
                   :active="0">
              <Step v-for="(item , index) in action " :key="index">
                <h3 style="font-size: 1.4rem;" v-if="item.type == 1">
                  添加了
                  <span v-if="item.handover_user_d.name">{{ item.handover_user_d.name }}</span>
                  <ww-open-data v-else type="userName" :openid="item.handover_user_d.userid"></ww-open-data>
                </h3>
                <h3 v-if="item.type == 2">
                  删除了
                  <span v-if="item.handover_user_d.name">{{ item.handover_user_d.name }}</span>
                  <ww-open-data v-else type="userName" :openid="item.handover_user_d.userid"></ww-open-data>
                </h3>
                <h3 v-if="item.type == 3">
                  被
                  <span v-if="item.handover_user_d.name">{{ item.handover_user_d.name }}</span>
                  <ww-open-data v-else type="userName" :openid="item.handover_user_d.userid"></ww-open-data>
                  删除了
                </h3>
                <h3 v-if="item.type == 4">
                  由
                  <span v-if="item.handover_user_d.name">{{ item.handover_user_d.name }}</span>
                  <ww-open-data v-else type="userName" :openid="item.handover_user_d.userid"></ww-open-data>
                  分配给
                  <span v-if="item.takeover_user_d.name">{{ item.takeover_user_d.name }}</span>
                  <ww-open-data v-else type="userName" :openid="item.takeover_user_d.userid"></ww-open-data>
                </h3>
                <h3 v-if="item.type == 5">
                  浏览了
                  <span>{{ item.article_title }}</span>
                </h3>
                <p>{{ item.create_datetime }}</p>
              </Step>
            </Steps>
          </div>
        </tab>
        <tab title="订单">
          <div class="OrderDingdan">
            <table>
              <tr>
                <th class="FontSize" >活动</th>
                <th class="FontSize">金额</th>
                <th class="FontSize">状态</th>
                <th class="FontSize">创建时间</th>
              </tr>
              <tr v-for="(item,index) in orderData"
                  :key="index">
                <th class="FontSize">{{ item.activity_name}}</th>
                <th class="FontSize">{{ item.amount }}</th>
                <th class="FontSize">{{ item.state_t }}</th>
                <th class="FontSize">{{ item.create_datetime }}</th>
              </tr>
            </table>
          </div>
        </tab>
      </tabs>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, Step, Steps } from "vant";
import { getTrends, getOrder, getUpperhalfpage, getDetails, getparameter,getUser_Id } from '../../../serves/prove';//, getUser_Id
import sessionStorage from '../../util/sessionStorage'
export default {
  data () {
    return {
      wx_password: "",
      xinxipass: "",
      active: 0,
      userimg: '', //头像
      labelList: [], //标签
      relationship: null, //关系
      LabelBarModule: {
        nickName: null, //昵称
        sex: null,//性别
        birthday: null,//生日
        email: null,//邮箱
      },//标签栏模块
      PhoneNumber: [], //联系方式手机号
      address: [], //详细地址
      action: '',//动态
      tel: '15225791048',//拨打电话的phone
      myId: '',
      //获取当前外部联系人userid  参数
      contactsUserId: 'wmWY7dCwAAzqzS7erFMYh_ofnZ_sVaHw',
      userIdparameter: {
        corpid: '',//企业微信的corpid
        agentid: '',//企业微信应用id
        timestamp: '',//生成签名的时间
        nonceStr: '',//生产签名的随机串
        signature: '',//签名
        agent_signature: ''
      },
      orderData: '',
    };
  },
  components: {
    Tab, Tabs, Step, Steps
  },
  async created () {
    let auth_code = "";
    if (this.$route.query.auth_code) {
        auth_code = this.$route.query.auth_code
    }
    if (!auth_code) {
        let userid = sessionStorage.getLocalstorage("user_id");
        if (userid && userid !== undefined && userid !== "") {
            this.myId = userid
            this.getConfigParams({'url': location.href.split('#')[0]});
        } else {
            this.$router.push({ name: 'GetMyId' })
        }
    } else {
        let result = await getUser_Id(auth_code);
        if (result.code !== 2000) {
            alert(result.msg)
            return false
        }
        let { user_id } = result.data;
        this.myId = user_id;
        sessionStorage.setLocalstorage('user_id', user_id);
        this.getConfigParams({'url': location.href.split('#')[0]});
    }
    // this.myId ="WeiQiJia"
  },
  methods: {
    onClick (name, title) {
      if (name == 1) {
        //动态
        getTrends(this.myId,this.contactsUserId ).then(res => {
          if (res.code == 2000) {
            this.action = res.data.reverse()
          }
        })
      } else if (name == 2) {
        //订单
        // wmWY7dCwAAJbsYIgpmdD991EvM2NbAcA
        getOrder(this.myId, this.contactsUserId).then(res => {
          if (res.code === 2000) {
            this.orderData = res.data
          }
        })
      }
    },
    //带icon的拨打电话
    callPhone () {
      window.location.href ='tel:' +this.tel
    },
    //数组拨打电话
    telPhoneNumber (item) {
      window.location.href = 'tel:' +item
    },

      //获取参数信息
    async getConfigParams (url) {
        let result = await getparameter(url);
        if (result.code !== 2000) {
            alert(result.msg)
            return false;
        }
        let { appId, agentid, timestamp, nonceStr, signature, agent_signature } = result.data;
        this.userIdparameter.corpid = appId;
        this.userIdparameter.agentid = agentid;
        this.userIdparameter.timestamp = timestamp;
        this.userIdparameter.nonceStr = nonceStr;
        this.userIdparameter.signature = signature;
        this.userIdparameter.agent_signature = agent_signature;
        this._Config(appId, timestamp, nonceStr, signature)
            .then(data => {
                return this._agentConfig(appId, agentid, timestamp, nonceStr, agent_signature)
            })
            .then(data => {
                return this._getContext()
            })
            .then(data => {
                return this._getCurExternalContact()
            })
            .then(data => {
                this.contactsUserId = data;
                window.WWOpenData.bind(document.querySelector('ww-open-data'));
                this.getUpperHalfPage();
                this.getDetails();
            })
            .catch(data => {
                alert(data)
            })
    },
    _Config (appId, timestamp, nonceStr, signature) {
        return new Promise(function (resolve, reject) {
            const wx = window.wx;
            if (!wx) {
                reject("企业微信apk引入失败，尝试刷新页面！")
            }
            wx.config({
                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，企业微信的corpID
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                jsApiList: ['agentConfig'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
                resolve()
            });
            wx.error(function (res) {
                reject("注入权限验证失败")
            })
        })
    },
    _agentConfig(appId, agentid, timestamp, nonceStr, agent_signature) {
        return new Promise(function (resolve, reject) {
        const wx = window.wx;
          if (!wx) {
              reject("企业微信apk引入失败，尝试刷新页面！")
          }
          wx.agentConfig({
              corpid: appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: agentid, // 必填，企业微信的应用id （e.g. 1000247）
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: agent_signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: ['getContext', 'getCurExternalContact'], //必填，传入需要使用的接口名称
              success: function (res) {
                  resolve()
              },
              fail: function (res) {
                  if (res.errMsg.indexOf('function not exist') > -1) {
                      reject("版本过低请升级")
                  } else {
                      reject("应用注入权限验证失败")
                  }
              }
          })
        })
    },
    _getContext() {
      return new Promise(function (resolve, reject) {
        window.wx.invoke('getContext', {}, function (res) {
            if (res.err_msg !== "getContext:ok") {
              reject(res)
            }
            if (res.entry !== 'single_chat_tools') {
              reject("请从单聊会话工具栏进入!")
            }
            resolve()
        });
      })
    },
    _getCurExternalContact() {
      return new Promise(function (resolve, reject) {
        window.wx.invoke('getCurExternalContact', {}, function (res) {
          if (res.err_msg !== "getCurExternalContact:ok") {
              reject("获取当前联系人id失败!")
          }
          resolve(res.userId)
        });
      })
    },

    async getUpperHalfPage() {
      if (!this.myId || !this.contactsUserId)  {
          alert("参数缺失！")
          return false
      }
      let result = await getUpperhalfpage(this.myId, this.contactsUserId);
      if (result.code !== 2000) {
          alert(result.msg)
          return false
      }
      let { nick_name, avatar, tag, service_count, tel } = result.data;
      this.wx_password = nick_name;
      this.userimg = avatar;
      this.labelList = tag;
      this.relationship = service_count;
      this.tel = tel;
    },

    async getDetails() {
      if (!this.myId || !this.contactsUserId) {
          alert("参数缺失！")
          return false
      }
      let result = await getDetails(this.myId, this.contactsUserId);
      if (result.code !== 2000) {
          alert(result.msg)
          return false
      }
      let { nick_name, gender_f, birthday, email, tel, address } = result.data;
      this.LabelBarModule.nickName = nick_name;
      this.LabelBarModule.sex = gender_f;
      this.LabelBarModule.birthday = birthday;
      this.LabelBarModule.email = email;
      this.PhoneNumber = tel;
      this.address = address;
    },
  },
  mounted () {},

};
</script>

<style lang="scss" scoped>
.FontSize{
  font-size: 1.4rem;
}
#FuzeRen {
  width: 37.5rem;
  //   height: 100%;
  background-color: #f2f4f8;
  box-sizing: border-box;

  .top-color {
    width: 37.5rem;
    height: 10rem;
    background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
    // position: fixed;
    padding: 0 1rem;
    padding-top: 2rem;
    box-sizing: border-box;

    .top-fuzeren {
      height: 2rem;
      overflow: hidden;

      /* font-size: 14px !important;
                  font-weight: 500; */
      .top-fuzeren-fs {
        color: #fff;
        font-size: 1.4rem !important;
        font-weight: 500;
      }
    }
  }

  .PersonalInformation {
    width: 35.5rem;
    height: 11rem;
    background-color: #fff;
    border-radius: 0.6rem;
    position: relative;
    z-index: 1;
    top: -8rem;
    margin: 0 auto;

    .PI-bodyInnerblock {
      width: 33.5rem;
      height: 16rem;
      // background-color: #ffeaea;
      box-sizing: border-box;
      margin: 2rem auto;
      padding-top: 3rem;

      .PI-Bflex {
        display: flex;
        height: 3rem;
        line-height: 1rem;
        .PI-Bleft {
          width: 24.5rem;
          height: 3rem;
          padding-left: 1rem;

          .OneCeng {
            width: 19.1rem;
            height: 2.1rem;
            // background-color: #ffe5c8;
            // font-size: 10px;
            margin-bottom: 1rem;

            .wx_password {
              //   margin-bottom: 1rem;
              span {
                color: #333;
                font-size: 1.6rem;
              }
            }
          }

          .KeyWordss {
            width: 24rem;
            height: 2rem;
            // background-color: #ff6565;
            margin-top: 1rem;
            display: flex;

            .First-kw {
              width: 10.7vw;
              height: 3rem;
              background-color: #eff9ed;
              border-radius: 0.5rem;
              text-align: center;
              margin-right: 1vw;

              span {
                color: #68c452;
                line-height: 3rem;
                font-size: 1.2em;
              }
            }

            .Second-kw {
              width: 18vw;
              height: 3rem;
              background-color: #fff5e5;
              border-radius: 0.5rem;
              text-align: center;
              margin-right: 1vw;

              span {
                color: #ff9e00;
                line-height: 3rem;
                font-size: 1.2em;
              }
            }
          }
        }

        .PI-Bright {
          width: 9rem;
          height: 8rem;
          display: flex;
          justify-content: right;

          .PSicon {
            width: 12.8vw;
            height: 12.8vw;
            background-color: #e7ebff;
            // float: right;
            border-radius: 1.5rem;
            text-align: center;
            line-height: 7rem;

            span {
              font-size: 1rem;
              color: #7698eb;
            }
          }
        }
      }

      .ContactDetails {
        width: 85vw;
        height: 3.9rem;
        background-color: #f8f9fb;
        // background-color: #9cbdff;
        margin-top: 1.5rem;
        border-radius: 0.5rem;
        padding: 0 2.5vw;
        display: flex;
        align-items: center;

        .span1 {
          color: #cdd4da;
          font-size: 1.2rem;
        }

        .span2 {
          color: #adadad;
          font-size: 1.2rem;
          margin-left: 1.5vw;
        }
      }

      .TelephoneChat {
        width: 90vw;
        height: 1rem;
        display: flex;
        // justify-content: center;
        align-items: center;

        .Telephone {
          width: 44vw;
          height: 1.3rem;
          background-color: #fff;
          display: flex;
          // justify-content: center;
          align-items: center;

          .span1 {
            font-size: 1.6rem;
            color: #3dc063;
          }

          .Tp-text {
            color: #333;
            font-size: 1.4rem;
            margin-left: 1rem;
          }
        }

        .Chat {
          width: 44vw;
          height: 7.3rem;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;

          .span2 {
            font-size: 1.6rem;
            color: #2b60dd;
          }

          .Ch-text {
            color: #333;
            font-size: 1.4rem;
            margin-left: 1rem;
          }
        }

        span {
          font-size: 1.6rem;
          color: #ececec;
        }
      }
    }
  }
}

.TagsModule {
  width: 95vw;
  height: 11rem;
  background-color: #fff;
  border-radius: 1rem;
  position: relative;
  top: -8rem;
  margin: 0 auto;
  margin-top: 1.5rem;

  .TagsModuleInnerblock {
    width: 90vw;
    height: 8.5vh;
    // background-color: #ffeaea;
    margin: 0 auto;
    padding-top: 2.5rem;

    .TagsModule-p {
      color: #999;
      font-size: 1.4rem;
    }

    .label {
      width: 90vw;
      height: 3rem;
      // background-color: #ff6565;
      margin-top: 1.2rem;
      display: flex;

      .First-label {
        // width: 10.7vw;
        height: 3rem;
        background-color: #e9effc;
        border-radius: 0.5rem;
        text-align: center;
        margin-right: 1vw;
        padding: 0 1.5vw;
        margin-right: 5px;

        span {
          color: #2b60dd;
          line-height: 3rem;
          font-size: 1.2rem;
        }
      }

      .Second-label {
        width: 18vw;
        height: 3rem;
        background-color: #fff5e5;
        border-radius: 0.5rem;
        text-align: center;
        margin-right: 1vw;

        span {
          color: #ff9e00;
          line-height: 3rem;
          font-size: 1.2em;
        }
      }
    }
  }
}

.RelationshipAnalysis {
  width: 91vw;
  height: 7rem;
  background-color: #fff;
  border-radius: 1rem;
  position: relative;
  top: -8rem;
  margin: 0 auto;
  margin-top: 1.5rem;
  padding: 0 2vw;

  .RA-body {
    width: 91vw;
    height: 10rem;

    // background-color: #ffeded;
    .RA-body-guanxi {
      width: 91vw;
      height: 7rem;
      border-bottom: 0.1rem solid #f6f6f6;
      // background-color: #ffe8c9;
      display: flex;

      .RBG-tit {
        width: 14vw;
        height: 7rem;
        display: flex;
        align-items: center;

        // background-color: #ffb6b6;
        .GX-tit {
          font-size: 1.4rem;
          color: #999;
        }
      }

      .RBG-bd {
        width: 77vw;
        height: 7rem;
        display: flex;
        align-items: center;

        // background-color: #ff9a9a;
        .GX-bd {
          color: #333;
          font-size: 1.2rem;
        }

        .GX-bd-fgx {
          color: #d5d5d5;
          margin: 0 1rem;
          font-size: 1.2rem;
        }
      }
    }

    .RA-body-fenxi {
      width: 91vw;
      height: 6.8rem;
      // background-color: #ffd6a0;
      display: flex;

      .RBF-tit {
        width: 14vw;
        height: 6.8rem;
        display: flex;
        align-items: center;

        // background-color: #ffb6b6;
        .FX-tit {
          color: #999;
        }
      }

      .RBF-bd {
        width: 77vw;
        height: 6.8rem;
        display: flex;
        align-items: center;

        // background-color: #ff9a9a;
        .FX-bd {
          color: #333;
          font-size: 1.2rem;
        }
      }
    }
  }
}

.LabelBarModule {
  width: 100vw;
  height: 60rem;
  // background-color: #fff;
  border-radius: 1rem;
  position: relative;
  top: -8rem;
  margin: 0 auto;
  margin-top: 1.5vh;
  // padding: 0 2vw;
  // .van-tabs__nav--line{
  //     height: 10vh;
  // }
  .van-tabs__wrap {
    // padding: 10px 0;
    // line-height: 0;
    width: 100vw;
    height: 5rem;
    background-color: #fff;
    .van-tab {
      line-height: 5rem;
      color: #8c8c8c;
    }
    .van-tab--active {
      color: #2b60dd;
    }
  }
  .van-tabs__line {
    width: 6vw;
    height: 0.2rem;
    background-color: #2b60dd;
  }
  .TabsXiangqing {
    width: 100vw;
    background-color: #f2f4f8;
    .BasicInformation {
      width: 96vw;
      height: 22rem;
      background-color: #f2f4f8;
      padding: 0 2vw;
      .BI-title {
        width: 96vw;
        height: 4rem;
        display: flex;
        align-items: center;
        span {
          color: #999;
          font-size: 1.2rem;
        }
      }
      .BI-body {
        width: 88vw;
        height: 15rem;
        border-radius: 1rem;
        background-color: #fff;
        padding: 0 4vw;
        .BI-body-top {
          width: 92vw;
          height: 7rem;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;
          .BI-flex {
            .span1{
              font-size: 1.4rem;
              line-height: 1rem;
            }
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
             margin-top:-1vw ;
             line-height: 3rem;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
              line-height: 3rem;
            }
          }
        }
        .BI-body-bottom {
          width: 92vw;
          height: 7rem;
          display: flex;
          align-items: center;
          .BI-flex {
            .span1{
              font-size: 1.4rem;
            }
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1rem;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }
    .ContactInformation {
      width: 96vw;
      height: 40rem;
      background-color: #f2f4f8;
      padding: 0 2vw;
      .CI-title {
        width: 96vw;
        height: 4rem;
        display: flex;
        align-items: center;
        span {
          color: #999;
          font-size: 1.2rem;
        }
      }
      .CI-body {
        width: 88vw;
        height: 44rem;
        border-radius: 1rem;
        background-color: #fff;
        padding: 0 4vw;
        .CI-body-first {
          width: 92vw;
          height: 12rem;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;
          .CI-flex {
            div {
              width: 92vw;
              height: 7rem;
              overflow-y: auto;
            }
            .span1{
              font-size: 1.4rem;
              color: #999;
              margin-bottom: 1vh;
            }
            .span1,
            .span2 {
              display: block;
              color: #666;
              // font-size: 1.4rem;
            }

            .span2 {
              // color: #2b60dd;
              font-size: 1.4rem;
            }
          }
        }
        .CI-body-second {
          width: 92vw;
          height: 8rem;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;
          .CI-flex {
            .span1{
              font-size: 1.4rem;
              line-height: 2rem;
            }
            .span1,
            .span2 {
              display: block;
              line-height: 2rem;
            }

            .span1 {
              color: #999;
              margin-bottom: 1rem;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
        .CI-body-third {
          width: 92vw;
          height: 10rem;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;
          .CI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
        .CI-body-fouth {
          width: 92vw;
          height: 14rem;
          display: flex;
          align-items: center;
          .CI-flex {
            div {
              width: 92vw;
              height: 8rem;
              overflow: auto;
            }
            .span1{
              font-size: 1.4rem;
            }
            .span1,
            .span2 {
              display: block;
              margin-top: 1vw;
            }

            .span1 {
              margin-top: 9vw;
              color: #999;
              margin-bottom: 1vh;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }
    .IdentityInformation {
      width: 96vw;
      height: 18rem;
      background-color: #f2f4f8;
      padding: 0 2vw;
      .II-title {
        width: 96vw;
        height: 4rem;
        display: flex;
        align-items: center;
        span {
          color: #999;
          font-size: 1.2rem;
        }
      }
      .II-body {
        width: 88vw;
        height: 13rem;
        border-radius: 1vh;
        background-color: #fff;
        padding: 0 4vw;
        .II-body-top {
          width: 92vw;
          height: 11vh;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;
          .II-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
        .II-body-bottom {
          width: 92vw;
          height: 10rem;
          display: flex;
          align-items: center;
          .II-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #666;
              margin-bottom: 1vh;
            }
            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.van-tab {
  font-size: 1.37rem;
}
.van-icon:before{
  font-size: 1.6rem  !important;
}
.van-steps--vertical{
padding: 1rem 0 0 1.11rem;
}
.van-step__circle{
 display: block;
 width: 0.5rem !important;
 height: 0.5rem !important;
 background-color: #969799;
 border-radius: 50%;

}
.TrendsDongTai {
  width: 88vw;
  height: 61rem;
  margin-top: 2vw;
  padding: 0 4vw;
  background: #fff;
  margin-left: 2vw;
  border-radius: 1vh;
  overflow: auto;
  p {
    width: 88vw;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.4rem;
  }
  h3 {
    width: 88vw;
    height: 4rem;
    line-height: 4rem;
    margin-top: 2vw;
    font-size: 1.6rem;
    white-space: nowrap;
  }
}
.OrderDingdan {
  width: 88vw;
  height: 61rem;
  margin-top: 2vw;
  padding: 0 4vw;
  background: #fff;
  margin-left: 2vw;
  border-radius: 1vh;
  overflow: auto;
  font-size: 1.6rem;
  table {
    margin-top: 1rem;
    font-size: 0.6rem;
    color: #8c8c8c;
    margin-left: 1rem;
    border-collapse: collapse; //设置表格的边框是否被合并为一个单框
    th {
      border: 0.1rem solid #8c8c8c;
      padding: 1rem;
      td {
        border-radius: 0.1rem solid #8c8c8c;
        padding: 1.5rem;
      }
    }
  }
}
</style>

  <!-- vantui -->
<style lang="scss">
.LabelBarModule {
  width: 100vw;
  // height: 60vh;
  // background-color: #fff;
  border-radius: 1vh;
  position: relative;
  top: -8vh;
  margin: 0 auto;
  margin-top: 1.5vh;

  // padding: 0 2vw;
  // .van-tabs__nav--line{
  //     height: 10vh;
  // }
  .van-tabs__wrap {
    // padding: 10px 0;
    // line-height: 0;
    width: 100vw;
    height: 5rem;
    background-color: #fff;

    .van-tab {
      line-height: 5rem;
      color: #8c8c8c;
    }

    .van-tab--active {
      color: #2b60dd;
    }
  }

  .van-tabs__line {
    width: 6vw;
    height: 0.2rem;
    background-color: #2b60dd;
  }

  .TabsXiangqing {
    width: 100vw;
    background-color: #f2f4f8;

    .BasicInformation {
      width: 96vw;
      height: 29vh;
      background-color: #f2f4f8;
      padding: 0 2vw;

      .BI-title {
        width: 96vw;
        height: 7vh;
        display: flex;
        align-items: center;

        span {
          color: #999;
          font-size: 1.2rem;
        }
      }

      .BI-body {
        width: 88vw;
        height: 22vh;
        border-radius: 1vh;
        background-color: #fff;
        padding: 0 4vw;

        .BI-body-top {
          width: 92vw;
          height: 11vh;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;

          .BI-flex {
            .span2 {
              color: #666;
              font-size: 1.4rem;
              line-height: 3rem;
            }
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
             line-height: 3rem;
            }


          }
        }

        .BI-body-bottom {
          width: 92vw;
          height: 10.7vh;
          display: flex;
          align-items: center;

          .BI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }

    .ContactInformation {
      width: 96vw;
      height: 40rem;
      background-color: #f2f4f8;
      padding: 0 2vw;

      .CI-title {
        width: 96vw;
        height: 7vh;
        display: flex;
        align-items: center;

        span {
          color: #999;
          font-size: 1.2rem;
        }
      }

      .CI-body {
        width: 88vw;
        height: 44vh;
        border-radius: 1vh;
        background-color: #fff;
        padding: 0 4vw;

        .CI-body-first {
          width: 92vw;
          height: 7rem;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;

          .CI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #2b60dd;
              font-size: 1.4rem;
            }
          }
        }

        .CI-body-second {
          width: 92vw;
          height: 11vh;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;

          .CI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }

        .CI-body-third {
          width: 92vw;
          height: 11vh;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;

          .CI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }

        .CI-body-fouth {
          width: 92vw;
          height: 10.7vh;
          display: flex;
          align-items: center;

          .CI-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }

    .IdentityInformation {
      width: 96vw;
      height: 18rem;
      background-color: #f2f4f8;
      padding: 0 2vw;

      .II-title {
        width: 96vw;
        height: 7vh;
        display: flex;
        align-items: center;

        span {
          color: #999;
          font-size: 1.2rem;
        }
      }

      .II-body {
        width: 88vw;
        height: 22vh;
        border-radius: 1vh;
        background-color: #fff;
        padding: 0 4vw;

        .II-body-top {
          width: 92vw;
          height: 11vh;
          border-bottom: 0.1rem solid #f6f6f6;
          display: flex;
          align-items: center;

          .II-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #999;
              margin-bottom: 1vh;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }

        .II-body-bottom {
          width: 92vw;
          height: 10.7vh;
          display: flex;
          align-items: center;

          .II-flex {
            .span1,
            .span2 {
              display: block;
            }

            .span1 {
              color: #666;
              margin-bottom: 1vh;
              font-size: 1.4rem;
            }

            .span2 {
              color: #666;
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}
</style>