<template>
  <div class="download flex" v-if="show == 1">
    <img class="close" @click="close" src="/img/home/nav/close.png" alt="极度证券">
    <img class="logo" src="/logo.png" alt="极度证券">
    <div class="right">
      <div class="left">
        <!-- <div class="tip">下载 <span class="green">极度证券</span> 手机APP 2.0</div> -->
        <div class="tip">{{ $t('home.l1') }} <span class="green">{{ $t('common.l63') }}</span> {{ $t('home.l2') }} 2.0</div>
        <div>
          <!-- 50倍全市场免息融资融券 -->
          {{ $t('home.l3') }}
        </div>
      </div>
      <div class="install" @click="$router.push('/download')">
        <!-- 立即安装 -->
        {{ $t('home.l4') }}
      </div>
    </div>
  </div>
</template>
<script>
import { getSession, setSession } from "@/utils/sessionStorage";
export default {
  data () {
    return {
      show: getSession('home_download_show') || 1
    }
  },
  methods: {
    close() {
      this.show = 2
      setSession('home_download_show', 2)
    }
  }
}
</script>
<style lang="less" scoped>
.download {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 10px;
  background-color: #fff;
  z-index: 20;
  box-shadow: 0px 2px 18px 0px rgba(167,167,167,0.27);
  .logo {
    width: 44px;
  }
  .right {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    padding-left: 8px;
  }
  .left {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    padding-right: 8px;
    font-size: 14px;
    color: var(--color-1-);
  }
  .tip {
    margin-bottom: 8px;
  }
  .green {
    color: var(--color-);
  }
  .install {
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--color-);
    color: var(--color-);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
  }
  .close {
    position: absolute;
    right: 12px;
    top: 2px;
    cursor: pointer;
    width: 8px;
  }
}
</style>