LJ-ancient-city-h5/pages/user/user.vue

<template>
  <view class="content">
    <u-navbar
        title="丽江古城景区"
        bgColor="#DCF9FF"
        :autoBack="false"
        :fixed="true"
    >
      <view slot="left"></view>
    </u-navbar>
    <!-- 曲面背景 -->
    <view class="mine_bg">
    </view>
    <view class="mine">
      <view v-if="!isLogin" class="mine_tip flex-column-center">
        暂未登录~
      </view>
      <view v-else class="mine_tip flex-align-center">
        <text class="iconfont icon-signal" style="font-size: 20px;color: #144752;margin-right: 5px;font-weight: 100"></text>
        {{ userInfo.phone }}
      </view>
      <!-- 主体内容 -->
      <text v-if="isLogin" style="padding: 10px 30px;height: 30px;line-height: 30px;color: #144752B2;font-size: 14px">我的服务</text>
      <view class="mine_content">
        <image :src="picUrl.mineImage"></image>
<!--        <view class="left_subscript"></view>
        <view class="right_subscript"></view>-->
        <view class="mine_content_item flex-align-center"  v-if="isLogin"  style="padding: 0 25px">
          <view class="item-card flex-column-center" @tap.stop="toOrderPage">
            <view class="t-icon t-icon-order" style="width: 32px;height: 32px"></view>
            我的订单
          </view>
          <view class="item-card flex-column-center" @tap.stop="toGuidePage">
            <view class="t-icon t-icon-guide" style="width: 19px;height: 26px"></view>
            预订须知
          </view>
          <view class="item-card flex-column-center" @tap.stop="toLoginOut">
            <view class="t-icon t-icon-back" style="width: 32px;height: 32px"></view>
            退出登录
          </view>
        </view>
      <view class="mine_content_item flex"  v-else>
        <u-button text="去登录" color="#2EDAF1" style="width: 120px;height: 40px !important;border-radius: 40px" @tap="toLogin"></u-button>
      </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      loading: true,
      isLogin: true,
      picUrl: this.$require,
    };
  },
  onLoad() {
    console.log('onLoad')
  },
  onShow() {
    console.log('onShow');
    this.userInfo = uni.getStorageSync('userInfo')
    this.userInfo = {
      ...this.userInfo,
      phone: '18322568765'
    };
    // this.isLogin = this.userInfo.username ? true : false;
    console.log('onShow', this.isLogin, 'XXX');
  },
  methods: {
    toOrderPage() {
      uni.navigateTo({
        url: '/pages/order/index'
      });
    },
    toGuidePage() {
      uni.navigateTo({
        url: '/pages/user/guide'
      });
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    // 退出登录
    toLoginOut() {
      uni.showModal({
        title: '提示',
        content: '确定退出吗?',
        success: res => {
          if (res.confirm) {
            uni.showToast({
              title: '操作成功',
              icon: 'none',
              duration: 1000,
              mask: true,
              success: () => {
                setTimeout(() => {
                  this.isLogin = false;
                  uni.removeStorageSync('userInfo'); // 移除本地的信息
                  uni.clearStorageSync();
                  /*uni.navigateTo({
                    url: '/pages/login/index',
                  })*/
                  /*uni.reLaunch({
                    url: '/pages/login/login'
                  });*/
                }, 1000)
              }
            })

          }
        }
      });
    },
  }
};
</script>
<style lang="scss">
.login-info {
  .u-cell__value {
    color: #999999 !important;
  }
}
</style>
<style lang="scss" scoped>
.t-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.content {
  width: 100vw;
  background: rgba(243, 244, 246, 1);
  //overflow: hidden;
  position: relative;

  .mine {
    width: 100%;
    top: 44px;
    position: relative;
    //min-height: calc(127px + 50px);
    //overflow: hidden;

    &_tip{
      color: #144752;
      font-size: 22px;
      height: 100px;
      font-weight: bold;
      padding: 0 20px;
    }

    &_bg {
      position: absolute;
      top: 44px;
      z-index: 0;
      width: 100%;
      height: 130px;
      overflow: hidden;

      &::after {
        content: '';
        position: absolute;
        width: 160%;
        height: 100%;
        background: linear-gradient(179.48deg, #DCF9FF 0.45%, rgba(207, 254, 242, 0) 99.55%);
        left: -30%;
        border-radius: 0 0 50% 50%;
      }
    }

    &_content {
      //box-shadow: 0px 5px 7px 0px #40B0EF29;
      height: 1px;
      width: calc(100vw - 20px);
      margin-left: 10px;
      //margin-left: 10px;
      //background: #fff;
      border-radius:10px;
      //padding: 20px;
      box-sizing: border-box;
      //display: flex;
      position: relative;
      //box-shadow: 0px 5px 7px 0px #40B0EF29;

      image {
        width: 100%;
        height: 120px;
        position: absolute;
        z-index: 1;
      }

      &_item {
        position: absolute;
        z-index: 2;
        height: 105px;
        width: 100%;
        box-sizing: border-box;

        .item-card {
          height: 60px;
          justify-content: space-between;
          padding: 0 10px;
          color: #144752;
          font-size: 14px;
        }

        .t-icon-back {
          background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMTZDMyAxOC41NzEyIDMuNzYyNDQgMjEuMDg0NiA1LjE5MDg5IDIzLjIyMjRDNi42MTkzNSAyNS4zNjAyIDguNjQ5NjcgMjcuMDI2NSAxMS4wMjUxIDI4LjAxMDRDMTMuNDAwNiAyOC45OTQ0IDE2LjAxNDQgMjkuMjUxOCAxOC41MzYyIDI4Ljc1MDJDMjEuMDU3OSAyOC4yNDg2IDIzLjM3NDMgMjcuMDEwNSAyNS4xOTI0IDI1LjE5MjRDMjcuMDEwNSAyMy4zNzQzIDI4LjI0ODYgMjEuMDU3OSAyOC43NTAyIDE4LjUzNjJDMjkuMjUxOCAxNi4wMTQ0IDI4Ljk5NDQgMTMuNDAwNiAyOC4wMTA0IDExLjAyNTFDMjcuMDI2NSA4LjY0OTY3IDI1LjM2MDIgNi42MTkzNSAyMy4yMjI0IDUuMTkwODlDMjEuMDg0NiAzLjc2MjQ0IDE4LjU3MTIgMyAxNiAzQzE2IDMgMyAzLjIzNCAzIDE2Wk0xNC42OTYxIDguNDc3MzNDMTQuNjkxNCA4LjMwMzE5IDE0LjcyMTYgOC4xMjk4NyAxNC43ODUgNy45Njc1OUMxNC44NDg0IDcuODA1MzIgMTQuOTQzNiA3LjY1NzQgMTUuMDY1MSA3LjUzMjU1QzE1LjE4NjYgNy40MDc3MSAxNS4zMzE5IDcuMzA4NDggMTUuNDkyNCA3LjI0MDcyQzE1LjY1MjkgNy4xNzI5NiAxNS44MjUzIDcuMTM4MDUgMTUuOTk5NSA3LjEzODA1QzE2LjE3MzcgNy4xMzgwNSAxNi4zNDYyIDcuMTcyOTYgMTYuNTA2NiA3LjI0MDcyQzE2LjY2NzEgNy4zMDg0OCAxNi44MTI0IDcuNDA3NzEgMTYuOTMzOSA3LjUzMjU1QzE3LjA1NTQgNy42NTc0IDE3LjE1MDcgNy44MDUzMiAxNy4yMTQgNy45Njc1OUMxNy4yNzc0IDguMTI5ODcgMTcuMzA3NiA4LjMwMzE5IDE3LjMwMjkgOC40NzczM1YxNS45MTMzQzE3LjI5MzcgMTYuMjUyOSAxNy4xNTIzIDE2LjU3NTQgMTYuOTA4OSAxNi44MTIzQzE2LjY2NTQgMTcuMDQ5MiAxNi4zMzkyIDE3LjE4MTggMTUuOTk5NSAxNy4xODE4QzE1LjY1OTggMTcuMTgxOCAxNS4zMzM2IDE3LjA0OTIgMTUuMDkwMiAxNi44MTIzQzE0Ljg0NjcgMTYuNTc1NCAxNC43MDU0IDE2LjI1MjkgMTQuNjk2MSAxNS45MTMzVjguNDc3MzNaTTE2IDIzLjM1MjJDMTQuNTM0OSAyMy4zNDE1IDEzLjEwNTcgMjIuODk4MiAxMS44OTE2IDIyLjA3ODFDMTAuNjc3NiAyMS4yNTc5IDkuNzMyODEgMjAuMDk3NSA5LjE3NTkgMTguNzQyNEM4LjYxODk5IDE3LjM4NzIgOC40NzQ3NiAxNS44OTc4IDguNzYxMyAxNC40NjFDOS4wNDc4NCAxMy4wMjQyIDkuNzUyMzkgMTEuNzA0IDEwLjc4NjUgMTAuNjY2MUMxMS4wMzgxIDEwLjQ5MDYgMTEuMzQzNSAxMC40MDk1IDExLjY0OTEgMTAuNDM3MUMxMS45NTQ2IDEwLjQ2NDcgMTIuMjQwNiAxMC41OTkxIDEyLjQ1NjcgMTAuODE2OUMxMi42NzI4IDExLjAzNDYgMTIuODA1MSAxMS4zMjE1IDEyLjgzMDQgMTEuNjI3M0MxMi44NTU3IDExLjkzMyAxMi43NzIzIDEyLjIzNzggMTIuNTk1IDEyLjQ4ODFDMTEuOTEzOSAxMy4xNjE0IDExLjQ0ODQgMTQuMDIxOSAxMS4yNTc1IDE0Ljk2MDRDMTEuMDY2NyAxNS44OTg5IDExLjE1OTEgMTYuODcyOSAxMS41MjMgMTcuNzU4N0MxMS44ODcgMTguNjQ0NSAxMi41MDYxIDE5LjQwMjIgMTMuMzAxNiAxOS45MzU0QzE0LjA5NzEgMjAuNDY4NiAxNS4wMzMyIDIwLjc1MzMgMTUuOTkwOCAyMC43NTMzQzE2Ljk0ODUgMjAuNzUzMyAxNy44ODQ2IDIwLjQ2ODYgMTguNjgwMSAxOS45MzU0QzE5LjQ3NTYgMTkuNDAyMiAyMC4wOTQ3IDE4LjY0NDUgMjAuNDU4NyAxNy43NTg3QzIwLjgyMjYgMTYuODcyOSAyMC45MTUgMTUuODk4OSAyMC43MjQyIDE0Ljk2MDRDMjAuNTMzMyAxNC4wMjE5IDIwLjA2NzggMTMuMTYxNCAxOS4zODY3IDEyLjQ4ODFDMTkuMTM3NyAxMi4yNDU0IDE4Ljk5NTMgMTEuOTEzOCAxOC45OTA4IDExLjU2NjJDMTguOTg2MyAxMS4yMTg2IDE5LjEyIDEwLjg4MzQgMTkuMzYyNyAxMC42MzQ0QzE5LjYwNTMgMTAuMzg1NCAxOS45MzY5IDEwLjI0MjkgMjAuMjg0NSAxMC4yMzg0QzIwLjYzMjIgMTAuMjMzOSAyMC45Njc0IDEwLjM2NzcgMjEuMjE2NCAxMC42MTAzQzIyLjI2NzcgMTEuNjQ1OCAyMi45ODc0IDEyLjk3MDYgMjMuMjgzOSAxNC40MTYyQzIzLjU4MDUgMTUuODYxOCAyMy40NDA1IDE3LjM2MjkgMjIuODgxNyAxOC43Mjg3QzIyLjMyMyAyMC4wOTQ1IDIxLjM3MDcgMjEuMjYzNCAyMC4xNDYxIDIyLjA4NjZDMTguOTIxNCAyMi45MDk5IDE3LjQ3OTUgMjMuMzUwNCAxNi4wMDM4IDIzLjM1MjJIMTZaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNjM5XzQzMzIpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjM5XzQzMzIiIHgxPSIxNiIgeTE9IjMiIHgyPSIxNiIgeTI9IjI5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NEQ4RjUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjhGMEUwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
        }

        .t-icon-guide {
          background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyMCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjcwNTggMjMuNDQzNlYzLjI4Mzg4QzE5LjcwNTggMS40OTA2MyAxOC4xNjEgMCAxNi40MjI3IDBIMy4yODcxMUMxLjQ5NjA0IDAgMC4wMDMyNTQxIDEuNTQxOTIgMC4wMDMyNTQxIDMuMjgzODhWMjMuNDQzNkMtMC4wNDgwMzQgMjUuMTg1NiAwLjUwNTkyOCAyNS45OTM3IDEuNzM3MjcgMjUuOTkzN0MyLjA0NTY2IDI1Ljk5MzcgMi43NDY5NCAyNi4xMDg2IDQuMDM2MSAyNS4yNjM2QzUuMDg4MzQgMjQuNjExNCA3LjEyNzg1IDIzLjQ5MTMgOC4wODk4NCAyMi45NzY0QzkuMDUxODIgMjIuNTA2OSAxMC41ODg3IDIyLjQ0MjYgMTEuNTcwOSAyMi45NzI3QzEyLjkwMDUgMjMuNjg0MSAxMy43NjkzIDI0LjE3OTUgMTUuNjcyMyAyNS4yNjM2QzE2LjQ5MzQgMjUuNzgwNyAxNy41NjA5IDI2LjA0NSAxOC4wNzQ0IDI1Ljk5MzdDMTkuMjU0NCAyNS45OTMgMTkuNzU3MSAyNS4yODg5IDE5LjcwNTggMjMuNDQzNlpNMTYuMjcxNyAxMC4wNTg5TDEzLjU4NTggMTIuNjc3NkwxNC4yMTk5IDE2LjM3NDZDMTQuMjM5IDE2LjQ4NDcgMTQuMjI2OSAxNi41OTggMTQuMTg0OSAxNi43MDE1QzE0LjE0MjkgMTYuODA1MSAxNC4wNzI4IDE2Ljg5NDggMTMuOTgyNCAxNi45NjA1QzEzLjg5MiAxNy4wMjYyIDEzLjc4NSAxNy4wNjUzIDEzLjY3MzYgMTcuMDczM0MxMy41NjIxIDE3LjA4MTMgMTMuNDUwNyAxNy4wNTc5IDEzLjM1MTggMTcuMDA1OEwxMC4wMzE4IDE1LjI2MDJMNi43MTE4NCAxNy4wMDU4QzYuNjEyOTggMTcuMDU3NSA2LjUwMTY2IDE3LjA4MDUgNi4zOTA0MSAxNy4wNzI0QzYuMjc5MTYgMTcuMDY0MyA2LjE3MjM5IDE3LjAyNTIgNi4wODIxMSAxNi45NTk3QzUuOTkxODMgMTYuODk0MiA1LjkyMTYyIDE2LjgwNDggNS44NzkzOCAxNi43MDE1QzUuODM3MTQgMTYuNTk4MyA1LjgyNDU0IDE2LjQ4NTMgNS44NDMwMSAxNi4zNzUzTDYuNDc3MTEgMTIuNjc4M0wzLjc5MDUgMTAuMDU5NkMzLjcxMDczIDkuOTgxNjEgMy42NTQzMyA5Ljg4Mjg5IDMuNjI3NjcgOS43NzQ1NkMzLjYwMTAxIDkuNjY2MjQgMy42MDUxNCA5LjU1MjYxIDMuNjM5NjEgOS40NDY1MUMzLjY3NDA4IDkuMzQwNDEgMy43Mzc1IDkuMjQ2MDUgMy44MjI3NCA5LjE3NDA3QzMuOTA3OTcgOS4xMDIwOSA0LjAxMTYyIDkuMDU1MzYgNC4xMjE5OSA5LjAzOTE0TDcuODM0MTMgOC40OTk2NUw5LjQ5NDQ5IDUuMTM2MzJDOS41NDM2MSA1LjAzNTg1IDkuNjE5OTQgNC45NTExOCA5LjcxNDgxIDQuODkxOTVDOS44MDk2OCA0LjgzMjczIDkuOTE5MjcgNC44MDEzMyAxMC4wMzExIDQuODAxMzNDMTAuMTQyOSA0LjgwMTMzIDEwLjI1MjUgNC44MzI3MyAxMC4zNDc0IDQuODkxOTVDMTAuNDQyMyA0Ljk1MTE4IDEwLjUxODYgNS4wMzU4NSAxMC41Njc3IDUuMTM2MzJMMTIuMjI3MyA4LjQ5OTY1TDE1LjkzODggOS4wMzkxNEMxNi4wNDkzIDkuMDU0OTkgMTYuMTUzMSA5LjEwMTQ0IDE2LjIzODYgOS4xNzMyNkMxNi4zMjQgOS4yNDUwNyAxNi4zODc3IDkuMzM5MzcgMTYuNDIyMyA5LjQ0NTQ4QzE2LjQ1NyA5LjU1MTYgMTYuNDYxMiA5LjY2NTI5IDE2LjQzNDYgOS43NzM3QzE2LjQwOCA5Ljg4MjEgMTYuMzUxNiA5Ljk4MDg5IDE2LjI3MTcgMTAuMDU4OUwxNi4yNzE3IDEwLjA1ODlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNjM5XzE4NjAxKSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzYzOV8xODYwMSIgeDE9IjkuODU0NjkiIHkxPSIwIiB4Mj0iOS44NTQ2OSIgeTI9IjI2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM1NEQ4RjUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjhGMEUwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==);
        }

        .t-icon-order {
          background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjA2ODggOC4wODYwN0wyMi4wNSA3LjIxNTVDMjEuNTY1NyA2LjggMjAuOTE4OCA2LjczNzM0IDIwLjMyNSA2LjkzODVDMTkuNjM0NCA3LjE2OTMzIDE4Ljg1NjMgNy4wMzQxMyAxOC4yNjI1IDYuNTI2MjlDMTcuNjY4OCA2LjAxODQ2IDE3LjM4NDQgNS4yNDM1MiAxNy40NTMyIDQuNDgxNzdDMTcuNTE1NyAzLjgyNTU1IDE3LjMyMTkgMy4xNzU5MiAxNi44Mzc1IDIuNzYwNDJMMTUuODg0NCAxLjk0OTJDMTUuMDc4MiAxLjI2MzMgMTMuOTAzMiAxLjM3NTQyIDEzLjIyODIgMi4xOTk4MkwxMS42NDM4IDQuMTMyMjNDMTEuNDQwNyA0LjM3OTU1IDExLjM4NDQgNC43MDI3MSAxMS4zNjI1IDUuMDI5MThDMTEuMzU2MyA1LjEyMTUxIDExLjMyNSA1LjIxMzg0IDExLjI2NTcgNS4yODk2OUMxMS4yIDUuMzc1NDMgMTEuMTEyNSA1LjQzMTQ5IDExLjAxODggNS40NTc4N0MxMC42Mzc1IDUuNTYwMDkgMTAuMjkwNyA1Ljc3Nzc0IDEwLjAzNDQgNi4wOTQzMUwwLjQ2ODc5MSAxNy43NjQ2Qy0wLjI0MDU4NCAxOC42MzE4IC0wLjEzMTIwOSAxOS45NDQzIDAuNzEyNTQxIDIwLjY2MzJMMS43Mzc1NCAyMS41MzdDMi4yMjE5MiAyMS45NDkyIDIuODY1NjcgMjIuMDE1MiAzLjQ1OTQyIDIxLjgxNzNDNC4xNDY5MiAyMS41ODk4IDQuOTIxOTIgMjEuNzI1IDUuNTEyNTQgMjIuMjI5NUM2LjEwMzE3IDIyLjczNDEgNi4zOTA2NyAyMy41MDU3IDYuMzI1MDQgMjQuMjY0MkM2LjI2NTY3IDI0LjkxNzEgNi40NTk0MiAyNS41NjY3IDYuOTQzNzkgMjUuOTc4OUw3LjkwMDA0IDI2Ljc5MzRDOC43MDYyOSAyNy40NzkzIDkuODgxMjkgMjcuMzY3MiAxMC41NTYzIDI2LjU0MjhMMjAuNzEyNSAxNC4xNTdMMjAuNDkzOCAxMy45NzU2QzIwLjM1NjMgMTMuODcwMSAyMC4yODEzIDEzLjY5NTMgMjAuMzA2MyAxMy41MTcyQzIwLjMyODIgMTMuMzM5MiAyMC40NDA3IDEzLjE5MDggMjAuNiAxMy4xMjgxQzIwLjc1OTQgMTMuMDY1NSAyMC45Mzc1IDEzLjEwMTcgMjEuMDY1NyAxMy4yMjA1TDIxLjMxNTcgMTMuNDI4MkwyMy4zMTU3IDEwLjk4NDdDMjQuMDI1IDEwLjExNzQgMjMuOTEyNSA4LjgwNDk1IDIzLjA2ODggOC4wODYwN1pNMTIuMDAzMiA1LjY2NTYyQzEyLjE1NjMgNS42MDI5NiAxMi4zMjgyIDUuNjI5MzQgMTIuNDU2MyA1LjczODE2TDEzLjM0MzggNi40NzY4M0MxMy40NDA3IDYuNTU1OTcgMTMuNSA2LjY3NDY5IDEzLjUxNTcgNi44MDMyOUMxMy41MjgyIDYuOTMxOSAxMy40OTM4IDcuMDYwNTEgMTMuNDE1NyA3LjE1OTQ0QzEzLjQxNTcgNy4xNTk0NCAxMy40MTg4IDcuMTU5NDQgMTMuNDE4OCA3LjE1NjE0TDEzLjQxNTcgNy4xNTk0NEMxMy4zNDA3IDcuMjU4MzYgMTMuMjMxMyA3LjMyNDMyIDEzLjEwOTQgNy4zMzc1MUMxMi45ODc1IDcuMzUwNyAxMi44NjU3IDcuMzE0NDIgMTIuNzcxOSA3LjIzNTI4TDExLjg4NDQgNi40OTY2MkMxMS43NTYzIDYuMzg3NzkgMTEuNjkwNyA2LjIxNjMyIDExLjcxNTcgNi4wNDQ4NEMxMS43NDM4IDUuODc2NjYgMTEuODUzMiA1LjczMTU3IDEyLjAwMzIgNS42NjU2MlpNMTEuOTcxOSAxNy41OTY0TDEwLjg3MTkgMTkuOTQxTDkuNjg3NTQgMTcuNzUxNEw3LjM1OTQyIDE3LjQzODFMOC45NDM3OSAxNS40NDYzTDguNjAzMTcgMTIuOTAzOUwxMC43NjI1IDEzLjg0MDRMMTIuODg0NCAxMi41OTA2TDEyLjYzNDQgMTUuMTY5M0wxNC4yNzUgMTYuOTQzNUwxMS45NzE5IDE3LjU5NjRaTTE1LjU3ODIgOS4wMzI0OEMxNS41MDMyIDkuMTM0NzEgMTUuMzkwNyA5LjE5NzM2IDE1LjI3MTkgOS4yMTM4NUMxNS4xNSA5LjIyNzA0IDE1LjAyODIgOS4xOTA3NyAxNC45MzQ0IDkuMTExNjJMMTQuMDQ2OSA4LjM3Mjk2QzEzLjg0NjkgOC4yMDQ3OCAxMy44MTU3IDcuOTAxNCAxMy45NzE5IDcuNjkwMzVDMTQuMTMxMyA3LjQ3OTMgMTQuNDE4OCA3LjQ0NjMzIDE0LjYxODggNy42MTEyMUwxNS41MDYzIDguMzQ5ODdDMTUuNyA4LjUxODA1IDE1LjczMTMgOC44MjE0MyAxNS41NzgyIDkuMDMyNDhaTTE3LjczMTMgMTAuOTA4OEMxNy42NTYzIDExLjAxMTEgMTcuNTQzOCAxMS4wNzM3IDE3LjQyNSAxMS4wOTAyQzE3LjMwMzIgMTEuMTAzNCAxNy4xODEzIDExLjA2NzEgMTcuMDg3NSAxMC45ODhMMTYuMiAxMC4yNDkzQzE1Ljk5NjkgMTAuMDg3NyAxNS45NTYzIDkuNzgxMDQgMTYuMTA5NCA5LjU2NjdDMTYuMjYyNSA5LjM1MjM1IDE2LjU1MzIgOS4zMDk0OCAxNi43NTYzIDkuNDcxMDZMMTcuNjQzOCAxMC4yMDk3QzE3Ljc0MzggMTAuMjg4OSAxNy44MDk0IDEwLjQwNDMgMTcuODI1IDEwLjUzNjJDMTcuODQwNyAxMC42NjQ4IDE3LjgwNjMgMTAuNzk2NyAxNy43MjgyIDEwLjkwMjJMMTcuNzMxMyAxMC45MDg4Wk0xOS44ODc1IDEyLjc4MTlDMTkuODEyNSAxMi44ODQxIDE5LjcgMTIuOTQ2OCAxOS41ODEzIDEyLjk2MzJDMTkuNDU5NCAxMi45NzY0IDE5LjMzNzUgMTIuOTQwMiAxOS4yNDM4IDEyLjg2MUwxOC4zNTYzIDEyLjEyMjNDMTguMTUzMiAxMS45NjA4IDE4LjExMjUgMTEuNjU0MSAxOC4yNjU3IDExLjQzOTdDMTguNDE4OCAxMS4yMjU0IDE4LjcwOTQgMTEuMTgyNSAxOC45MTI1IDExLjM0NDFMMTkuOCAxMi4wODI4QzE5Ljg5NjkgMTIuMTYxOSAxOS45NjI1IDEyLjI3NzMgMTkuOTc4MiAxMi40MDU5QzE5Ljk5MzggMTIuNTM0NSAxOS45NTk0IDEyLjY2MzIgMTkuODg0NCAxMi43Njg3TDE5Ljg4NzUgMTIuNzgxOVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8zMF83NTkzKSIvPgo8cGF0aCBkPSJNMzEuOTEyNSAxOS4zMzg5TDMwLjY5MzggMTYuNTMyNkMzMC41NDM4IDE2LjE4NjQgMzAuMjE4OCAxNS45MzkgMjkuODU5NCAxNS45NDg5QzI4Ljk2MjUgMTUuOTc1MyAyOC4xMTI1IDE1LjQzNzggMjcuNzI1IDE0LjU0NDFDMjcuMzM3NSAxMy42NTA1IDI3LjUwOTQgMTIuNjIxNiAyOC4xMTI1IDExLjkyMjVDMjguMzU2MyAxMS42NDIyIDI4LjM4NzUgMTEuMjIwMSAyOC4yNDA3IDEwLjg3MzlMMjcuMDk2OSA4LjIyOTIxQzI2Ljg4NDQgNy43Mzc4NiAyNi4zMzc1IDcuNTEwMzMgMjUuODY1NyA3LjcyMTM3QzI1LjIwOTQgOC4wMTE1NiAyNS4wNzgyIDguOTM0OSAyNS42MjE5IDkuNDE2MzVMMjUuNjgxMyA5LjQ2OTExQzI2LjA4NzUgOS44MjUyNSAyNi4xMzc1IDEwLjQ2NSAyNS43OTM4IDEwLjg5MDRMMjMuNjM3NSAxMy41NTgyQzIzLjczNDQgMTMuNjA3NiAyMy44MTI1IDEzLjY5MDEgMjMuODU5NCAxMy43OTIzTDI0LjM2ODggMTQuOTA2OUMyNC40NTYzIDE1LjA3MTggMjQuNDUgMTUuMjcyOSAyNC4zNTMyIDE1LjQyNzlDMjQuMjU2MyAxNS41ODYyIDI0LjA4MTMgMTUuNjcxOSAyMy45MDMyIDE1LjY0ODhDMjMuNzI1IDE1LjYyOTEgMjMuNTc1IDE1LjUwMzcgMjMuNTEyNSAxNS4zMjU3TDIzLjAzNzUgMTQuMjkwMkwxOS4zNSAxOC44MTQ2QzE5LjMxODggMTguODUwOCAxOS4yOTM4IDE4Ljg5MDQgMTkuMjY4OCAxOC45MzMzTDE4Ljk4NDQgMTkuNDA4MUMxOC44MzEzIDE5LjY2MiAxOC43OTY5IDE5Ljk3MiAxOC44ODQ0IDIwLjI1ODlMMTguOTkwNyAyMC41OTg2QzE5LjIxODggMjEuMzMwNiAxOC42MTI1IDIyLjA0NjIgMTcuOSAyMS44OTQ1TDE3LjA5MzggMjEuNzIzTDE2Ljg0MzggMjEuOTIwOUwxMi43OTY5IDI2LjgzNDRDMTIuMTM3NSAyNy42MzU3IDEyLjk1MzIgMjguODI2MSAxMy44ODEzIDI4LjQxNzJMMjYuNjU2MyAyMi43NzVMMjYuNTMxMyAyMi41MDQ2QzI2LjQ1MzIgMjIuMzQzIDI2LjQ2ODggMjIuMTQ4NCAyNi41NjU3IDIxLjk5NjdDMjYuNjYyNSAyMS44NDg0IDI2LjgzMTMgMjEuNzY1OSAyNy4wMDMyIDIxLjc4MjRDMjcuMTc1IDIxLjc5ODkgMjcuMzI1IDIxLjkxNDMgMjcuMzkwNyAyMi4wODI1TDI3LjUzNDQgMjIuMzk1OEwzMS40MTg4IDIwLjY4MUMzMS45MTI1IDIwLjQ2MzQgMzIuMTM3NSAxOS44NTMzIDMxLjkxMjUgMTkuMzM4OVpNMjQuNjg3NSAxOC4wNzkyTDI0LjE3ODIgMTYuOTcxMkMyNC4wOTA3IDE2LjcyNzIgMjQuMTk2OSAxNi40NTM1IDI0LjQyMTkgMTYuMzQ0NkMyNC42NDY5IDE2LjIzNTggMjQuOTEyNSAxNi4zMjQ5IDI1LjAzNDQgMTYuNTUyNEwyNS41NDM4IDE3LjY2MDRDMjUuNjMxMyAxNy44MjUzIDI1LjYyNSAxOC4wMjY0IDI1LjUyODIgMTguMTgxNEMyNS40MzEzIDE4LjMzOTcgMjUuMjU2MyAxOC40MjU0IDI1LjA3ODIgMTguNDAyM0MyNC45IDE4LjM3OTMgMjQuNzUgMTguMjU3MyAyNC42ODc1IDE4LjA3OTJaTTI2LjQ5MzggMjEuMDk2NUMyNi4yNTYzIDIxLjIxMTkgMjUuOTc4MiAyMS4xMDMxIDI1Ljg2NTcgMjAuODU1OEwyNS4zNTYzIDE5Ljc0MTJDMjUuMjY4OCAxOS40OTcyIDI1LjM3NSAxOS4yMjM1IDI1LjYgMTkuMTE0NkMyNS44MjUgMTkuMDA1OCAyNi4wOTA3IDE5LjA5NDggMjYuMjEyNSAxOS4zMjI0TDI2LjcxMjUgMjAuNDMzN0MyNi44MjUgMjAuNjc3NyAyNi43MjgyIDIwLjk3NDUgMjYuNDkzOCAyMS4wOTY1WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzMwXzc1OTMpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzBfNzU5MyIgeDE9IjExLjg5MTYiIHkxPSIxLjUiIHgyPSIxMS44OTE2IiB5Mj0iMjcuMjQyNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNTREOEY1Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzY4RjBFMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMzBfNzU5MyIgeDE9IjIyLjI3ODgiIHkxPSI3LjY0MjU4IiB4Mj0iMjIuMjc4OCIgeTI9IjI4LjUwMDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzU0RDhGNSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2OEYwRTAiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K);
        }
      }

      .left_subscript {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 8px solid #f3f4f6;
        position: absolute;
        top: calc((105px - 100px) / 2);
        left: -4px;
        //box-shadow: 0px  -3px 3px rgba(0, 0, 0, .11);
      }

      .right_subscript {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 8px solid #f3f4f6;
        position: absolute;
        top: calc((105px - 100px) / 2);
        right: -4px;
      }
    }
  }
}
</style>