proginn-frontend/pages/type/partners.vue

<template>
  <div>
    <template v-if="screenWidth > 960">
      <div class="pc-wrapper wrapper">
        <div class="header">
          <div class="topImage">
            <img src="@/assets/img/partners/head_background.png" alt="">
          </div>
          <div class="topContent">
            <div class="header-title">
              <span>解决方案</span>
            </div>
            <div class="header-subtitle">为企业方提供优质可靠的行业解决方案</div>
            <div class="btn-list">
              <a class="publish-btn" @click="freeSubmitHandler()">免费发布需求</a>
              <div class="apply-btn" @click="handleApplyBtnClick()">申请入驻</div>
            </div>
          </div>
        </div>
        <div class="module">
          <div class="module-title">全行业解决方案</div>
          <div class="module-line"></div>
          <div class="solution-list">
            <div class="solution-item">
              <img class="solution-img" src="~@/assets/img/partners/solution_fitst.png" alt/>
              <div class="solution-title">教育行业解决方案</div>
              <div
                class="solution-content">以现今教育产品的差异化需求，从智慧教学、大数据协作管理、云资源共享、教育安全等多层面入手，打造覆盖教育行业全环节的智能技术解决方案。程序员客栈将携手教育行业，重塑教育+互利网的“智能化、信息化”定义，赋予教育行业智慧转型更高价值。
              </div>
            </div>
            <div class="solution-item">
              <img class="solution-img" src="~@/assets/img/partners/solution_second.png" alt/>
              <div class="solution-title">区块链解决方案</div>
              <div
                class="solution-content">通过稳定而丰富的技术储备和产品设计能力，程序员客栈为全球区块链合作伙伴探索应用实现和商业模式，提供高效低成本、数据追踪、持续稳定性、智能合约等智能解决方案。携手合作伙伴直面风险和商业挑战，全面提升综合竞争力。
              </div>
            </div>
            <div class="solution-item">
              <img class="solution-img" src="~@/assets/img/partners/solution_third.png" alt/>
              <div class="solution-title">在线电商解决方案</div>
              <div class="solution-content">程序员客栈结合丰富的行业平台服务，提供端到端的电商解决方案，构建企业自有电商生态；企业可快速搭建电商平台，快速完成所有资源的创建和配置。</div>
            </div>
            <div class="solution-item">
              <img class="solution-img" src="~@/assets/img/partners/solution_fourth.png" alt/>
              <div class="solution-title">企业服务解决方案</div>
              <div
                class="solution-content">程序员客栈结合进制数据，将人脸识别、文字识别、语音交互等多项AI能力应用于电销、客服、语音质检、协同办公、员工考勤、单据识别等业务场景，提高企业内部管理效率，通过智能化企业服务降低成本，增加竞争力。
              </div>
            </div>
            <div class="solution-item">
              <img class="solution-img" src="~@/assets/img/partners/solution_fifth.png" alt/>
              <div class="solution-title">小程序解决方案</div>
              <div
                class="solution-content">小程序是运行在手机微信上的轻量App，小程序已经成为企业移动互联网战略上不可忽视的组成部分。程序员客栈结合企业业务需求和小程序自身特点，为您提供最合适的小程序产品开发方案。
              </div>
            </div>
          </div>
        </div>
        <div class="module module-footer">
          <div class="module-title">服务咨询</div>
          <div class="module-line"></div>
          <div class="consult-wrapper">
            <img class="wechat-img" src="~@/assets/img/partners/wechat.png" alt/>
            <img class="wechat-img" src="~@/assets/img/partners/wechat.jpeg" alt/>
            <div class="wechat-tips">扫码联系客户经理</div>
            <div class="phone-label">咨询电话</div>
            <div class="phone-text">
              <img src="~@/assets/img/partners/phone.png" alt/>
              <span>0571-28120931 转1</span>
            </div>
          </div>
        </div>

        <div class="toastBox" v-if="isShowToast">
          <div class="toastArea">
            <div class="title">行业解决方案专属客服</div>
            <div class="tips">填写联系方式 立即与专属客服进行沟通</div>
            <div class="nameCell">
              <p class="label">联系人</p>
              <input type="text" v-model="name" maxlength="10">
            </div>
            <div class="phoneCell">
              <p class="label">电话</p>
              <input type="number" v-model="phone" oninput="if(value.length>5)value=value.slice(0,11)">
            </div>
            <div class="submitBtn" @click="handleSubmit">
              <p>提 交</p>
            </div>
            <div class="closeIcon" @click="isShowToast=false"/>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="mobile-wrapper wrapper">
        <div class="header">
          <div class="header-title">优选技术服务商</div>
          <div class="header-subtitle">为企业方提供优质可靠的行业解决方案</div>
          <div class="btn-list">
            <a class="publish-btn" @click="freeSubmitHandler()">免费发布需求</a>
            <div class="apply-btn" @click="handleApplyBtnClick()">申请入驻</div>
          </div>
        </div>
        <div class="module">
          <div class="screenTop">
            <div class="title">全行业解决方案</div>
            <div class="line"/>
          </div>

          <div class="list">
            <div class="cell" v-for="(item, index) in list" :key="'ll'+index">
              <img class="img" :src="item.img"/>
              <div class="wordBody">
                <div class="wordTitle">{{item.title}}</div>
                <div class="wordTips">{{item.subTitle}}</div>
              </div>
            </div>
          </div>

        </div>

        <div class="module module-footer">
          <div class="module-title">服务咨询</div>
          <div class="module-line"></div>
          <div class="consult-wrapper">
            <img class="wechat-img" src="~@/assets/img/partners/wechat.png" alt/>
            <div class="wechat-tips">扫码联系客户经理</div>
            <div class="phone-label">咨询电话</div>
            <div class="phone-text">
              <img src="~@/assets/img/partners/phone.png" alt/>
              <span>0571-28120931 转1</span>
            </div>
          </div>
        </div>
        <div class="toastBox" v-if="isShowToast">
          <div class="toastArea">
            <div class="title">行业解决方案专属客服</div>
            <div class="tips">填写联系方式 立即与专属客服进行沟通</div>
            <div class="nameCell">
              <p class="label">联系人</p>
              <input type="text" v-model="name" maxlength="10">
            </div>
            <div class="phoneCell">
              <p class="label">电话</p>
              <input type="number" v-model="phone" oninput="if(value.length>5)value=value.slice(0,11)">
            </div>
            <div class="submitBtn" @click="handleSubmit">
              <p>提 交</p>
            </div>
            <div class="closeIcon" @click="isShowToast=false"/>
          </div>
        </div>
      </div>
    </template>

  </div>
</template>

<script>
  export default {
    layout: "opacity_header",
    data() {
      return {
        screenWidth: 1920,
        isShowToast: false,
        name: '',
        phone: '',

        list: [
          {
            img: require('@/assets/img/partners/solution_fitst.png'),
            title: '教育行业解决方案',
            subTitle: '以现今教育产品的差异化需求，从智慧教学、大数据协作管理、云资源共享、教育安全等多层面入手，打造覆盖教育行业全环节的智能技术解决方案。程序员客栈将携手教育行业，重塑教育+互利网的“智能化、信息化”定义，赋予教育行业智慧转型更高价值',
          },
          {
            img: require('@/assets/img/partners/solution_second.png'),
            title: '区块链解决方案',
            subTitle: '通过稳定而丰富的技术储备和产品设计能力，程序员客栈为全球区块链合作伙伴探索应用实现和商业模式，提供高效低成本、数据追踪、持续稳定性、智能合约等智能解决方案。携手合作伙伴直面风险和商业挑战，全面提升综合竞争力。',
          },
          {
            img: require('@/assets/img/partners/solution_third.png'),
            title: '在线电商解决方案',
            subTitle: '程序员客栈结合丰富的行业平台服务，提供端到端的电商解决方案，构建企业自有电商生态；企业可快速搭建电商平台，快速完成所有资源的创建和配置。',
          },
          {
            img: require('@/assets/img/partners/solution_fourth.png'),
            title: '企业服务解决方案',
            subTitle: '程序员客栈结合进制数据，将人脸识别、文字识别、语音交互等多项AI能力应用于电销、客服、语音质检、协同办公、员工考勤、单据识别等业务场景，提高企业内部管理效率，通过智能化企业服务降低成本，增加竞争力。',
          },
          {
            img: require('@/assets/img/partners/solution_fifth.png'),
            title: '小程序解决方案',
            subTitle: '小程序是运行在手机微信上的轻量App，小程序已经成为企业移动互联网战略上不可忽视的组成部分。程序员客栈结合企业业务需求和小程序自身特点，为您提供最合适的小程序产品开发方案。',
          },
        ]

      };
    },
    mounted() {
      this.screenWidth = window.screen.width;
    },
    methods: {
      handleApplyBtnClick() {
        location.href = "https://shimo.im/forms/XKH9DqKJrkrkytDG/fill";
      },

      freeSubmitHandler() {
        console.log('toasdf!!!')
        this.isShowToast = true
      },

      handleSubmit() {
        if (!this.name || !this.phone || this.phone.length < 6) {
          return this.$message.error('请填写完整的信息')
        }
        const { name, phone } = this
        let p = {
          name, phone, from: '技术服务商'
        }
        this.$axios.$post('/api/user/create_not_login_user', p).then(res => {
          this.$message.success(res.info || '提交成功')
          this.isShowToast = false
          if (res.status === 1) {
            this.name = ''
            this.phone = ''
          }
        }).catch(e => {
          this.$message.error('提交失败,请重试！')
        })
      }
    }
  };
</script>

<style lang="scss" scope>

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .main {
    margin: 0 !important;
    width: 100%;
  }

  .pc-wrapper {
    position: relative;
    margin: -85px 0 0;
    width: 100%;

    .toastBox {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 888;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .toastArea {
        position: relative;
        width: 446px;
        height: 403px;
        background: rgba(255, 255, 255, 1);
        border-radius: 3px;
        padding: 30px 47px;

        .title {
          font-size: 19px;
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: 26px;
          text-align: center;
        }

        .tips {
          margin-top: 8px;
          margin-bottom: 14px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 17px;
          text-align: center;
        }

        .nameCell, .phoneCell {
          margin-top: 25px;

          .label {
            font-size: 14px;
            font-weight: 500;
            color: rgba(25, 34, 46, 1);
            line-height: 20px;
          }
          input {
            margin-top: 5px;
            padding: 10px;
            width: 352px;
            height: 48px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(221, 225, 230, 1);
          }
        }
        .nameCell {
          margin-top: 39px;
        }

        .submitBtn {
          margin-top: 18px;
          width: 352px;
          height: 48px;
          background: rgba(48, 142, 255, 1);
          box-shadow: 0 2px 6px 0 rgba(48, 142, 255, 0.3);
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          p {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
          }
        }

        .closeIcon {
          position: absolute;
          right: 20px;
          top: 34px;
          width: 16px;
          height: 16px;
          background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
      }

    }

    .header {
      position: relative;
      overflow: hidden;
      width: 100%;
      /*height: 658px;*/
      /*background: url("~@/assets/img/partners/head_background.png");*/
      /*background-size: 100% 658px;*/
      /*background-repeat: no-repeat;*/
      min-height: 200px;
      .bgImage {
        img {
          width: 100%;
          vertical-align: middle;
        }
      }
      .topContent {
        position: absolute;
        top: 85px;
        width: 1000px;
        height: calc(100% - 85px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        left: 50%;
        transform: translateX(-50%);

        .header-title {
          text-align: center;
          line-height: 77px;
          font-weight: 600;
          font-size: 58px;
          color: #ffffff;
        }

        .header-title span {
          color: #308eff;
        }

        .header-subtitle {
          margin-top: 11px;
          text-align: center;
          line-height: 77px;
          font-size: 58px;
          color: #ffffff;
        }

        .btn-list {
          margin-top: 89px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .publish-btn {
          cursor: pointer;
          width: 242px;
          height: 59.4px;
          border-radius: 3px;
          background-color: #ffffff;
          line-height: 59.4px;
          text-align: center;
          font-size: 20px;
          color: #111111;
        }

        .apply-btn {
          margin-left: 33px;
          width: 242px;
          height: 59.4px;
          border-radius: 3px;
          border: 1px solid #ffffff;
          line-height: 59.4px;
          text-align: center;
          font-size: 20px;
          color: #ffffff;
        }
      }

    }

    .module {
      overflow: hidden;
      background-color: #ffffff;
      color: #323232;
    }

    .module-title {
      margin-top: 90px;
      line-height: 53px;
      text-align: center;
      font-weight: 600;
      font-size: 38px;
    }

    .module-line {
      margin: 17px auto 0;
      width: 47px;
      height: 3px;
      background-color: #308eff;
    }

    .solution-list {
      overflow: hidden;
      padding-top: 24px;
      padding-bottom: 84px;
      margin: 0 auto;
      width: 1024px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .solution-item {
      overflow: hidden;
      margin-top: 30px;
      margin-left: 8px;
      margin-right: 8px;
      width: 324px;
      height: 420px;
      background-color: #ffffff;
      box-shadow: 0px 6px 23px 0px rgba(13, 24, 36, 0.07);
    }

    .solution-img {
      width: 100%;
      height: 220px;
    }

    .solution-title {
      margin-top: 17px;
      line-height: 25px;
      text-align: center;
      font-weight: 500;
      font-size: 18px;
      color: #111C2D;
    }

    .solution-content {
      margin: 10px auto 0;
      width: 304px;
      line-height: 21px;
      font-size: 15px;
      color: #7E8693;
    }

    .project-wrapper {
      margin-top: 42px;
    }

    .project-title {
      line-height: 27px;
      text-align: center;
      font-weight: 600;
      font-size: 19px;
      color: #323232;
    }

    .project-list {
      margin: 53px auto 0;
      width: 1060px;
      border: 1px solid #ebeff5;
    }

    .project-item {
      display: flex;
    }

    .project-item li:nth-child(1) {
      flex: 260;
      text-align: center;
    }

    .project-item li:nth-child(2) {
      flex: 400;
      border-left: 1px solid #ebeff5;
      border-right: 1px solid #ebeff5;
      text-align: center;
    }

    .project-item li:nth-child(3) {
      flex: 400;
      text-align: center;
    }

    .developer {
      margin-bottom: 40px;
      text-align: center;
    }

    .developer-img {
      width: 47px;
      height: 47px;
    }

    .developer-text {
      display: block;
      margin-top: 5px;
      line-height: 23px;
      font-weight: 600;
      font-size: 17px;
      color: #308eff;
    }

    .project-item li span {
      height: 53px;
      line-height: 53px;
      font-size: 17px;
      color: #333333;
    }

    .station-wrapper {
      margin-top: 42px;
    }

    .station-title {
      line-height: 27px;
      text-align: center;
      font-weight: 600;
      font-size: 19px;
      color: #323232;
    }

    .station-content {
      padding-top: 21px;
      padding-bottom: 106px;
      margin: 0 auto;
      width: 1024px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .station-img {
      width: 513px;
      height: 320px;
    }

    .station-right {
      margin-left: 37px;
    }

    .station-right-title {
      line-height: 51px;
      font-weight: 600;
      font-size: 36px;
      color: #222222;
    }

    .station-right-content {
      margin-top: 18px;
      line-height: 26px;
      font-size: 18px;
      color: #222222;
    }

    .process-img-list {
      padding-top: 45px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-img {
      width: 145px;
      height: 145px;
    }

    .process-line {
      width: 137px;
      height: 1px;
      background-color: #308eff;
    }

    .process-list {
      padding-bottom: 110px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-item {
      width: 282px;
      text-align: center;
    }

    .process-title {
      margin-top: 9px;
      line-height: 30px;
      font-weight: 600;
      font-size: 21px;
      color: #181a20;
    }

    .process-subtitle {
      margin-top: 4px;
      line-height: 25px;
      white-space: nowrap;
      font-size: 15px;
      color: #666666;
    }

    .module-footer {
      width: 100%;
      height: 716px;
      background: url("~@/assets/img/partners/footer_background.png");
      background-size: 100% 716px;
      background-repeat: no-repeat;
      color: #ffffff;
    }

    .consult-wrapper {
      margin-top: 85px;
      text-align: center;
    }

    .wechat-img {
      width: 241px;
      height: 241px;
      border-radius: 20px;
      margin-right: 30px;
    }

    .wechat-tips {
      margin-top: 14px;
      line-height: 21px;
      font-weight: 600;
      font-size: 15px;
      color: #ffffff;
    }

    .phone-label {
      margin-top: 65px;
      line-height: 28px;
      font-size: 20px;
      color: #ffffff;
    }

    .phone-text {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .phone-text img {
      width: 34px;
      height: 34px;
    }

    .phone-text span {
      margin-left: 7px;
      line-height: 39px;
      font-size: 28px;
      color: #ffffff;
    }

    #friend-links {
      display: none !important;
    }

  }

  .contact-tips {
    font-size: 12px;
  }

  .contact-wrapper {
    padding-top: 15px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-label {
    width: 50px;
    text-align: left;
    font-size: 14px;
  }

  .contact-input {
    margin-left: 10px;
    border: 1px solid #a0a0a0;
  }

  .contact-input input {
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }

  .mobile-wrapper {
    position: relative;

    .toastBox {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 888;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .toastArea {
        position: relative;
        width: 6.58rem;
        height: 8.46rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.07rem;
        padding: 0.94rem 0.53rem;

        .title {
          font-size: 0.36rem;
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: 0.5rem;
          text-align: center;
        }

        .tips {
          margin-top: 0.14rem;
          font-size: 0.22rem;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 0.32rem;
          text-align: center;
        }

        .nameCell, .phoneCell {
          margin-top: 0.42rem;

          .label {
            font-size:0.28rem;
            font-weight: 500;
            color: rgba(25, 34, 46, 1);
            line-height: 0.4rem;
          }
          input {
            margin-top: 0.06rem;
            padding: 0.2rem;

            width:5.52rem;
            height:0.96rem;
            background:rgba(255,255,255,1);
            border-radius:0.06rem;
            border:0.02rem solid rgba(221,225,230,1);
            font-size:0.28rem;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:0.28rem;

          }
        }
        .nameCell {
          margin-top: 0.84rem;
        }

        .submitBtn {
          margin-top: 0.4rem;
          width:5.52rem;
          height:0.96rem;
          background:rgba(48,142,255,1);
          box-shadow:0 0.04rem 0.12rem 0 rgba(48,142,255,0.3);
          border-radius:0.04rem;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          p {
            font-size:0.28rem;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:0.4rem;
          }
        }

        .closeIcon {
          position: absolute;
          right: 0.4rem;
          top: 0.4rem;
          width: 0.32rem;
          height: 0.32rem;
          background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
      }

    }

    .header {
      overflow: hidden;
      width: 100%;
      height: 9.08rem;
      background: url("~@/assets/img/partners/head_background_mobile.png");
      background-size: cover;
      background-repeat: no-repeat;

      display: flex;
      align-items: center;
      flex-direction: column;

      .header-title {
        margin-top: 1.9rem;
        text-align: center;
        font-size: 0.6rem;
        font-weight: 600;
        color: rgba(48, 142, 255, 1);
        line-height: 0.72rem;
        letter-spacing: 2px;
      }

      .header-subtitle {
        margin: 0.5rem auto 0;
        width: 7.04rem;
        line-height: 0.66rem;
        text-align: center;
        font-size: 0.52rem;
        color: #ffffff;
      }

      .btn-list {
        margin-top: 1.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .publish-btn {
          cursor: pointer;
          width: 4.62rem;
          height: 0.84rem;
          line-height: 0.84rem;
          border-radius: 0.04rem;
          background-color: #ffffff;
          text-align: center;
          font-size: 0.28rem;
          color: #111111;
        }

        .apply-btn {
          margin: 0.13rem auto 0;
          width: 4.62rem;
          height: 0.84rem;
          line-height: 0.84rem;
          border-radius: 0.04rem;
          border: 0.01rem solid #ffffff;
          text-align: center;
          font-size: 0.28rem;
          color: #ffffff;
        }
      }


    }



    .module {
      overflow: hidden;
      background-color: #ffffff;
      color: #323232;

      .screenTop {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .title {
          margin-top: 0.67rem;
          font-size:0.44rem;
          font-weight:600;
          color:rgba(50,50,50,1);
          line-height:0.6rem;
        }
        .line {
          margin-top: 0.32rem;
          width:0.79rem;
          height:0.05rem;
          background:rgba(48,142,255,1);
        }
      }

      .list {
        margin: 0.06rem auto 1.08rem auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .cell {
          margin-top: 0.4rem;
          width:6.7rem;
          min-height:8rem;
          box-shadow:0 0.12rem 0.46rem 0 rgba(13,24,36,0.07);
          border-radius:0.16rem;
          overflow: hidden;
          background-color: #fff;
          font-size: 0;

          .img {
            width: 6.7rem;
            height: 4.4rem;
          }
          .wordBody {
            width: 100%;
            min-height: 3.6rem;
            padding: 0.4rem 0.28rem;

            .wordTitle {
              font-size:0.4rem;
              font-weight:500;
              color:rgba(17,28,45,1);
              line-height:0.56rem;
              text-align: center;
            }
            .wordTips {
              margin-top: 0.2rem;
              font-size:0.28rem;
              font-weight:400;
              color:rgba(126,134,147,1);
              line-height:0.4rem;
            }
          }

        }
      }

      .module-title {
        margin-top: 0.7rem;
        line-height: 53px;
        text-align: center;
        font-weight: 600;
        font-size: 0.44rem;
      }

      .module-line {
        margin: 0.36rem auto 0;
        width: 0.78rem;
        height: 0.04rem;
        background-color: #308eff;
      }

    }



    .module-footer {
      width: 100%;
      height: 9.4rem;
      background: url("~@/assets/img/partners/footer_background.png");
      background-size: 100% 9.4rem;
      background-repeat: no-repeat;
      color: #ffffff;
    }

    .consult-wrapper {
      margin-top: 0.88rem;
      text-align: center;
    }

    .wechat-img {
      width: 3.62rem;
      height: 3.62rem;
    }

    .wechat-tips {
      margin-top: 0.14rem;
      line-height: 0.4rem;
      font-weight: 600;
      font-size: 0.28rem;
      color: #ffffff;
    }

    .phone-label {
      margin-top: 0.74rem;
      line-height: 0.38rem;
      font-size: 0.27rem;
      color: #ffffff;
    }

    .phone-text {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .phone-text img {
      width: 0.34rem;
      height: 0.34rem;
    }

    .phone-text span {
      margin-left: 0.16rem;
      line-height: 0.52rem;
      font-size: 0.37rem;
      color: #ffffff;
    }
  }
</style>