<template>
  <div class="ksNew my-template" id="temp">
    <div class="bannerBox" @click="bannerClick">
      <!-- 底层banner -->
      <img class="banner" v-if="pageData.mainProduct.bannerPics[0]"
        :class="productJson.length > 0 && productJson[0].dongHua && productJson[0].dongHua == '1' ? 'cartoon1' : ''"
        :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
      <!-- json动图 -->
      <div class="svgBanner">
        <div id="lottie_box"></div>
      </div>
      <!-- 上层png -->
      <div class="banner2"
        :class="productJson.length > 0 && productJson[0].dongHua && productJson[0].dongHua == '1' ? 'cartoon2' : ''"
        v-if="pageData.mainProduct.bannerPics[2] && pageData.mainProduct.bannerPics[2] !== ''">
        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
      </div>
      <!-- 顶层png/gif -->
      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3] && pageData.mainProduct.bannerPics[3] !== ''">
        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" alt="" />
      </div>
      <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 &&
        pageData.strategyInfo.activityLogo
        " :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
      <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
        <img :src="pageData.remarks.extendImg" alt="" />
      </div>
      <!-- <div class="extend" @click="extendClick">
                <img src="../assets/huiyuan.png" alt="">
            </div>      -->
    </div>
    <div class="privacyBox">
      <van-checkbox v-model="checked" checked-color="#fc8940">我已阅读并同意</van-checkbox>
      <span class="span" style="color: #fc8940" @click="showAgreeMent = true">《隐私声明》</span>
    </div>

    <div v-if="pageData.remarks.isBuy === '1' && isBuy !== '已订购'" class="receive-btn bg-cover" @click="btnClick">
      {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
    </div>
    <div class="manual">
      <span class="hint" v-if="pageData.recommend !== null && pageData.recommend.length > 0"
        @click="recommend(pageData.recommend[0].id)">领取{{ recommendName }}</span>
      <span class="hint"
        @click="$router.push({ path: '/manual001', query: { img: pageData.mainProduct.guidancePic.p } })">流量激活指引</span>
    </div>
    <div v-if="user.userid" class="userPhone">
      {{ user.phone | formatPhone }}
      <span>({{ isBuy }})</span>
    </div>
    <div class="explain-title">使用说明</div>
    <div class="explain" v-html="pageData.mainProduct.orderingInfo"></div>
    <div class="explain-title">流量使用说明（含快手极速版）</div>
    <div class="explain" v-html="pageData.mainProduct.givePhoneInfo"></div>
    <div class="btns">
      <div v-if="pageData.remarks.jiluBtn === '1'" @click="beforeLogin('manual')">
        订购记录
      </div>
      <div v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBUy')">
        退订产品
      </div>
      <div v-if="pageData.remarks.chaxunBtn === '1' && isApplet == false" @click="chaxun">
        剩余流量查询
      </div>
      <div @click="onGo()">常见问题</div>
    </div>
    <div class="help" @click="showHelp = true">
      <img src="./assets/edit.png" alt="" />求助
    </div>
    <div class="company">联通在线信息科技有限公司</div>
    <!-- 剩余流量查询 -->
    <account-modal v-model="showQr"></account-modal>
    <van-overlay :show="showDetainer" @click.stop="">
      <div class="modal-detainer modal2">
        <div class="box">
          <div class="title">确定要放弃本服务吗？</div>
          <div class="recommend">限时优惠，不要错过!</div>
          <div class="btn-box">
            <div class="btn confirm" @click="unBuySure">确定</div>
            <div class="btn switch" @click="
              recommend(pageData.strategyInfo.unsubscribeStrategyList[0])
              ">
              去看看
            </div>
          </div>
        </div>
        <img src="./assets/close.png" alt="" class="close" @click="showDetainer = false" />
      </div>
    </van-overlay>
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" @getIsBuy="getIsBuy"></login-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
    <timeout-modal v-model="showTimeout"></timeout-modal>
    <help-modal v-model="showHelp"></help-modal>
    <!-- 轮播条 -->
    <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
    <!-- 快手隐私声明 -->
    <agreeMent v-model="showAgreeMent"></agreeMent>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
    <!-- 退订挽留 -->
    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false">
      <div class="other-modal modal" @click.stop>
        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
        <div class="text-box">确定要放弃本服务吗?</div>
        <div class="text-box">
          {{ unBuyDrainageText }}
        </div>
        <div class="text-box">不要错过！</div>
        <div class="btn-box">
          <div class="btn left" @click="unBuySure">确定</div>
          <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
            去看看
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 订购成功提示  -->
    <handel-modal v-model="handelShow" @jihuo="jihuoChange"></handel-modal>
    <!-- 退出挽留 -->
    <exit-modal v-model="exitShow" />
    <!-- 会员弹框 -->
    <member-modal v-model="memberShow" />
    <!-- 会员二维码弹框 -->
    <member-code v-model="memberCode" />
  </div>
</template>
<script>
import {
  detMainProduct,
  strategytemplate
} from "../../api";
import common from "../../common/common";
import helpModal from "../../components/helpModal.vue";
import loginModal from "../../components/login.vue";
import newZheZhao from "../../components/newZheZhao.vue";
import unbuyModal from "../../components/unbuyModal.vue";
import timeoutModal from "../../components/timeoutModal.vue";
import accountModal from "../../components/gongZongHao.vue";
import addR from "../../common/addRecord";
import agreeMent from "../../components/agreeMent.vue";
import repeatModal from "../../components/repeatModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import handelModal from "../../componentsNew/handelModal.vue";

export default {
  mixins: [common],
  data () {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      times: 0,
      loginBtn: "登录",
      loginType: "订购记录",
      showLogin: false,
      showUnbuy: false,
      unBuyDrainage: false,
      unBuyDrainageText: "",
      showQr: false,
      showHelp: false,
      showDetainer: false,
      receiveState: false,
      showPuzzle: false,
      switchStatus: false,
      showZhezhao: false,
      showScroll: false,
      ks: "ksForm",
      isBuy: "已订购",
      type: "",
      recommendName: "",
      showAgreeMent: false,
      checked: true,
      repeatShow: false,
      productJson: [],
      phone: "",
      handelShow: false
    };
  },
  filters: {
    formatPhone: (phone) => {
      phone = phone.toString();
      return phone.substr(0, 3) + "****" + phone.substr(7, 11);
    },
  },
  created () {
    document.title = this.pageData.mainProduct.remark;
    if (this.pageData.recommend.length > 0) {
      detMainProduct({
        productId: this.pageData.recommend[0].primaryProductId,
      }).then(info => {
        this.recommendName = info.data.productName;
      })
      // console.log(info)

    }
    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks.privacy !== null) {
      if (this.pageData.remarks.privacy === '1') {
        this.checked = true
      }
    }
    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
      this.productJson = this.pageData.mainProduct.cacheSeatOne;
    }
  },

  mounted () {
    addR.showSP();
    if (this.user.userid) {
      this.getIsBuy();
    } else {
      this.isBuy = "未订购";
    }
  },
  methods: {

    btnClick () {
      if (this.checked === false) {
        this.$toast.fail("请先勾选隐私声明");
      } else {
        this.openIframe();
      }
    },
    bannerClick () {
      addR.clickBanner();
    },
    chaxun () {
      addR.clickFollow();
      this.showQr = true;
    },
    async beforeLogin (type) {
      this.type = type;
      if (this.user.userid) {
        if (type === "manual") {
          addR.clickOrderRecord();
          let url = "/order001";
          this.$router.push({
            path: url
          });
        } else if (type === "unBUy") {
          addR.unBuyClick();
          if (this.pageData.strategyInfo.unsubscribeStrategyList !== null && this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
            let productId = await strategytemplate(this.pageData.strategyInfo.unsubscribeStrategyList[0]);
            let drainageRes = await detMainProduct({ productId: productId.data.primaryProductId });
            this.unBuyDrainageText = drainageRes.data.productName;
            this.unBuyDrainage = true;
          } else {
            this.showUnbuy = true;
          }
        }
      } else if (type === "unBUy") {
        addR.unBuyClick();
        if (this.pageData.strategyInfo.unsubscribeStrategyList !== null && this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
          let productId = await strategytemplate(this.pageData.strategyInfo.unsubscribeStrategyList[0]);
          let drainageRes = await detMainProduct({
            productId: productId.data.primaryProductId,
          });
          console
          this.unBuyDrainageText = drainageRes.data.productName;
          this.unBuyDrainage = true;
        } else {
          this.showUnbuy = true;
        }
      } else {
        addR.loginClick();
        this.showLogin = true;
      }
    },
    // 推荐产品跳转
    recommend (val) {
      strategytemplate(val).then(async res => {
        let info = await detMainProduct({
          productId: res.data.primaryProductId,
        });
        let productJson = JSON.parse(res.data.productJson).product
        let mainProduct = {
          activeType: info.data.activeType,
          bannerPics: [productJson.bannerImg, productJson.jsonImg, productJson.upImg, productJson.topImg,],
          bgColor: [productJson.pageBgcol, '', productJson.orderBgcol, productJson.orderBdcol],
          cacheSeatOne: [{
            dongHua: productJson.drawVal,
            memberUrl: info.data.cacheSeatOne[0].memberUrl,
            proC: {
              e: productJson.hideCol,
              s: productJson.pageTextcol
            },
            productV: productJson.productV,
            rushC: {
              e: productJson.orderTextcol,
              s: productJson.orderNumcol,
            },
            tabC: {
              e: productJson.tabVicecol,
              s: productJson.tabMaincol,
            },
            btnUrl: "",
            relationIds: info.data.cacheSeatOne[0].relationIds ? info.data.cacheSeatOne[0].relationIds : "",
            isTreaty: info.data.cacheSeatOne[0].isTreaty ? info.data.cacheSeatOne[0].isTreaty : "0"
          }],
          cpid: info.data.cpid,
          discountInfo: null,
          flowJumpUrl: info.data.flowJumpUrl,
          givePhoneInfo: info.data.givePhoneInfo,
          guidancePic: {
            c: productJson.orderImg,
            p: productJson.explainImg
          },
          id: res.data.primaryProductId,
          isCompositeProduct: 0,   //是否复合产品
          logoPic: productJson.logoPic,
          manualInfo: info.data.manualInfo,
          memberName: info.data.memberName,
          orderingInfo: info.data.orderingInfo,
          originalPrice: info.data.originalPrice,
          pageTitle: productJson.pageTitle,
          productName: info.data.productName,
          productType: info.data.productType,
          promotionPic: info.data.promotionPic,
          pushJumpUrl: info.data.pushJumpUrl,
          remark: info.data.remark,
          remark1: info.data.remark1,
          remark2: info.data.remark2,
          remark3: productJson.remark3,
          spid: info.data.spid,
          themeColor: [productJson.btnTopcol, productJson.btnBotcol],
        }
        let recommend = [];
        if (res.data.recommendStrategyIds.length > 0 && res.data.recommendStrategyIds) {
          res.data.recommendStrategyIds.forEach(async val => {
            let list = await strategytemplate(val)
            recommend.push(list.data);
          });
        }
        let pageData = {
          mainProduct: mainProduct,
          channl: {
            channelKey: this.pageData.channl.channelKey,
            channelName: this.pageData.channl.channelName,
            fullCode: this.pageData.channl.fullCode,
            edition: this.pageData.channl.edition,
          },
          recommend: recommend,
          remarks: JSON.parse(res.data.extJson), //策略信息
          otherJson: JSON.parse(res.data.otherJson), //备用json
          strategyInfo: res.data
        };
        let title = mainProduct.pageTitle !== '' ? mainProduct.pageTitle : mainProduct.productName
        document.title = title;
        MgtvApi.setWebviewTitle({
          title: title,
        });
        pageData.strategyInfo.recommendStrategyList = res.data.recommendStrategyIds
        pageData.strategyInfo.unsubscribeStrategyList = res.data.unsubscribeStrategyIds
        pageData.strategyInfo.viceProductStrategyList = res.data.viceProductIds
        if (JSON.parse(res.data.productJson).viceProduct) {
          pageData.viceJson = JSON.parse(res.data.productJson).viceProduct
        }
        pageData.mainJson = JSON.parse(res.data.productJson).product
        this.$store.commit("setPageData", pageData);
        this.getIsBuy()
        setTimeout(() => {
          this.callSvg()
        }, 200)
        this.$store.commit('setTempName', res.data.templateCode)
      })
      this.unBuyDrainage = false;
    },
    onGo () {
      this.$router.push('ksQuestion');
    },
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      this.showUnbuy = true
    },
    getChildData (data) {
      this.isBuy = data;
    },
  },
  components: {
    helpModal,
    timeoutModal,
    newZheZhao,
    unbuyModal,
    loginModal,
    accountModal,
    agreeMent,
    repeatModal,
    handelModal
  },
};
</script>
<style lang="scss">
.ksNew {
  background-color: #fff;

  .bannerBox {
    width: 100%;
    height: auto;
    background-size: 100%;
    // border-radius: 0 0 60px 60px;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: inline-flex;

    .banner {
      width: 100%;
      height: 100%;
    }

    .banner2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .svgBanner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .activity {
      position: absolute;
      right: 10px;
      width: 180px;
      height: 140px;
      bottom: 0;
      z-index: 4;
    }

    .extend {
      width: 160px;
      height: 152px;
      position: fixed;
      top: 640px;
      z-index: 4;

      img {
        width: 100%;
        height: 100%;
      }
    }

    // 主banner 动画效果  从105% 缩放到100%
    .cartoon1 {
      animation-name: scale1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes scale1 {
      from {
        transform: scale(1.1);
      }

      to {
        transform: scale(1);
      }
    }

    // 顶层banner 从100%  放大到105%
    .cartoon2 {
      animation-name: scale2;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes scale2 {
      from {
        transform: scale(1);
      }

      to {
        transform: scale(1.1);
      }
    }
  }

  .calculate {
    text-align: center;
    padding: 20px 0 0 0;
  }

  .receive-btn {
    box-sizing: border-box;
    margin: 0 auto;
    width: 710px;
    height: 120px;
    background-image: url(./assets/bt.png);
    font-size: 48px;
    text-align: center;
    padding-top: 26px;
    font-weight: 800;
    color: #ffffff;
    @include common-scale;
  }

  .manual {
    display: flex;
    justify-content: space-between;
    padding: 38px 60px;
    font-size: 32px;

    .hint {
      font-weight: bold;
      text-decoration: underline;
      color: #ff3d00;
    }
  }

  .userPhone {
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222222;
    box-sizing: border-box;
    padding-left: 62px;
    padding-bottom: 37px;
  }

  .iframe {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
  }

  .explain-title {
    font-size: 42px;
    line-height: 1;
    font-weight: bold;
    color: #222222;
    padding: 0 60px;
  }

  .explain {
    margin: 30px 60px 60px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 26px;
    line-height: 48px;
    color: #666;

    p {
      margin: 0;

      strong {
        font-size: 30px;
        color: #222222;
      }
    }
  }

  .btns {
    padding: 20px 60px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    text-decoration: underline;
    color: #d6000f;
  }

  .modal-qr {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
    width: 530px;
    background-color: #fff;
    border-radius: 10px;

    .qr {
      width: 294px;
      height: 294px;
      display: block;
      margin: 85px auto 0;
    }

    .text {
      margin: 28px 0 77px;
      text-align: center;
      font-size: 32px;
      line-height: 50px;
      font-weight: bold;
      color: #222222;
    }
  }

  .modal2 {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(./assets/modal-bg.png);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 8px;
    padding: 110px 0 32px;
    width: 630px;

    .box {
      width: 590px;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 60px 40px;
      background-color: #fff;
      box-shadow: 0 0 20px 0 rgba(148, 55, 27, 0.3);
    }
  }

  .unbuy-modal {
    top: 366px;

    .body-box {
      padding: 40px 50px 70px;

      .input-box {
        display: flex;
        line-height: 75px;
        margin-bottom: 25px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d6000f;

        .input {
          font-size: 32px;
          color: #000;
          flex: 1;
          background-color: transparent;

          input {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            width: 100%;
          }
        }

        .code {
          font-size: 28px;
          width: 150px;
          margin: 0 10px;
          color: #d6000f;

          &.number {
            color: #a7a7a7;
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 190px;
          margin-top: 20px;
          height: 80px;
          line-height: 80px;
          border-radius: 40px;
          font-size: 34px;
          font-weight: bold;
          text-align: center;
        }

        .left {
          background: #ffffff;
          border: 2px solid #bfbfbf;
          border-radius: 8px;
        }

        .right {
          color: #d6000f;
          background: #ffffff;
          border: 2px solid #d6000f;
          border-radius: 8px;
        }
      }
    }

    .btn {
      margin-top: 40px;
      height: 80px;
      line-height: 80px;
      background: #fdc51b;
      border-radius: 40px;
      font-size: 34px;
      font-weight: bold;
      color: #0d0d0d;
      text-align: center;
    }
  }

  .help {
    position: fixed;
    bottom: 230px;
    right: 0;
    width: 128px;
    height: 80px;
    border-radius: 40px 0 0 40px;
    box-sizing: border-box;
    padding-right: 15px;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 28px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #ffffff;

    img {
      display: block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      position: relative;
      top: -2px;
    }
  }

  .modal-detainer {
    .close {
      position: absolute;
      top: 30px;
      right: 20px;
      width: 45px;
      height: 45px;
    }

    .title {
      line-height: 42px;
      margin: 32px 0;
      font-size: 38px;
      text-align: center;
    }

    .recommend {
      font-size: 32px;
      line-height: 40px;
      text-align: center;
    }

    .btn-box {
      margin-top: 60px;
      display: flex;
      justify-content: space-between;

      .btn {
        width: 230px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 34px;
        border-radius: 5px;
      }

      .confirm {
        border: 2px solid #dadada;
        color: #9d9d9d;
      }

      .switch {
        color: #ffffff;
        background-color: #d6000f;
      }
    }
  }

  .company {
    text-align: center;
    line-height: 80px;
    padding-bottom: 20px;
    color: #9d9d9d;
    font-size: 20px;
  }

  .van-notice-bar {
    background-color: transparent;
    padding: 0 0;
    color: #000;

    .van-notice-bar__wrap {
      margin-top: -43rem;
    }

    .van-notice-bar__content {
      background-color: #fff;
      padding: 10px 30px;
      border-radius: 30px;
      opacity: 0.7;
    }
  }

  .van-icon {
    background-color: #f6f6f6;
    // border: 0 !important;
    transform: scale(0.75, 0.75);
    border-color: #fc8940;
  }

  .van-checkbox__label {
    margin-left: 5px;
  }

  .privacyBox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    font-size: 22px;

    .van-checkbox {
      width: 55%;
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }

    .span {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}

.other-modal {
  top: 366px;
  padding: 60px 65px;

  .input-box {
    display: flex;
    line-height: 75px;
    margin-bottom: 25px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fdc620;

    .input {
      font-size: 32px;
      color: #000;
      flex: 1;
      background-color: transparent;

      input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        width: 100%;
      }
    }

    .code {
      font-size: 28px;
      width: 150px;
      margin: 0 10px;
      color: #222222;

      &.number {
        color: #a7a7a7;
      }
    }
  }

  .text-box {
    font-family: PingFang-SC-Medium;
    text-align: center;
    line-height: 55px;
    font-size: 32px;
  }

  .btn-box {
    display: flex;
    justify-content: space-between;

    .btn {
      width: 190px;
      margin-top: 20px;
      height: 80px;
      line-height: 80px;
      border-radius: 40px;
      font-size: 34px;
      font-weight: bold;
      text-align: center;
    }

    .left {
      border: 2px #fdc51b solid;
      color: #fdc51b;
      background-color: #ffffff;
    }

    .right {
      color: #0d0d0d;
      background: #fdc51b;
    }
  }

  .btn {
    margin-top: 40px;
    height: 80px;
    line-height: 80px;
    background: #fdc51b;
    border-radius: 40px;
    font-size: 34px;
    font-weight: bold;
    color: #0d0d0d;
    text-align: center;
  }
}

.modal {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 333px;
  transform: translateX(-50%);
  width: 530px;
  background-color: #fff;
  border-radius: 8px;

  .close {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: -130px;
    left: 50%;
    transform: translateX(-50%);
  }

  .top {
    width: 100%;
    height: 96px;
  }

  .logo {
    width: 92px;
    height: 50px;
    position: absolute;
    top: 22px;
    left: 37px;
  }
}
</style>
