docs/.vuepress/components/Tool-Playground.vue

<template>
  <div class="wrap">
    <img class="phone hide" src="https://img.alicdn.com/tfs/TB1mvFeI7voK1RjSZFwXXciCFXa-976-1420.png" />
    <div class="download">
      <h3 class="title">Weex Playground</h3>
      <div class="desc">{{lang === 'en-US' ? 'Weex Native Runtime showcase & Weex vue file preview.' : 'Weex 示例App，可扫码预览Weex代码构建后的页面。'}}</div>
      <img src="/tool-playground-qrcode.png" width="128" />
      <div class="desc2">{{lang === 'en-US' ? 'scan the qrcode and download the app' : '扫二维码下载该APP'}}</div>
      <div><a href="https://itunes.apple.com/cn/app/weex-playground/id1130862662?mt=8" target="_blank" class="btn"><img src="/tool-playground-apple-icon.png" width="12" />{{lang === 'en-US' ? 'iOS' : 'iOS版下载'}}</a><a href="http://appdownload.alicdn.com/publish/weex_playgroud/latest/weex_playgroud_10006024.apk" class="btn" ><img src="/tool-playground-android-icon.png" width="12"/>{{lang === 'en-US' ? 'Android' : 'Android版下载'}}</a></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['lang']
}
</script>


<style scoped>
.wrap {
  display: flex;
  height: calc(100vh - 3.6rem);
  margin-top: 3.6rem !important;
  padding-left: 11rem;
  background: url(https://img.alicdn.com/tfs/TB1qzBXI7voK1RjSZFNXXcxMVXa-2438-1420.png) 10rem 0 / cover no-repeat;
}
.phone {
  height: calc(100vh - 3.6rem);
}
.download {
  margin-left: 130px;
  text-align: center;
}
.title {
  margin-top: 0;
  padding-top: 140px;
  margin-bottom: 6px;
  line-height: 56px;
  font-family: PingFangSC-Semibold;
  font-size: 40px;
  color: #373D41;
}
.desc {
  line-height: 20px;
  font-size: 14px;
  color: #373D41;
  margin-bottom: 38px;
}
.desc2 {
  margin-top: 5px;
  margin-bottom: 24px;
  line-height: 22px;
  font-size: 12px;
  color: #373D41;
}
.btn {
  display: inline-block;
  width: 158px;
  height: 48px;
  line-height: 48px;
  color: #fff;
  font-size: 16px;
  background: #00B4FF;
  border-radius: 2px;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 10px;
}
.btn:hover {
  text-decoration: none !important;
}
.btn > img {
  margin-right: 5px;
}

@media (max-width: 1050px) { 
  .hide {
    display: none;
  }
}

@media (max-width: 720px) {
  .wrap {
    display: block;
    padding-left: 0;
    background-position-x: 0;
  }
  .download {
    margin-left: 0;
  }
}
</style>