compdfkit_web_cn/components/Service.vue

<template>
  <div v-if="$config.date" v-show="show" class="service">
    <div class="container">
      <span class="close" @click="show = false"></span>
      <img src="~assets/images/service/banner_pic_weihu.png" alt="">
      <div class="content">
        <div class="text">Our website is under maintenance at <b>{{ $config.date }}</b>, lasting about <b>{{ $config.time }}</b>.</div>
        <div class="text">If there are something wrong, please try later. Thanks for your support.</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .service {
    position: fixed;
    z-index: 9;
    bottom: 20px;
    width: 100%;
  }
  .container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 870px;
    width: 100%;
    margin: 0 auto;
    padding: 23px 36px 23px 36px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.12);
  }
  .content {
    display: inline-block;
    margin-left: 26px;
    vertical-align: middle;
  }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(~assets/images/service/banner_btn_close.png) center no-repeat;
    cursor: pointer;
  }
  .text {
    font-size: 16px;
    color: #333;
    line-height: 22px;
  }
  .clear {
    clear: both;
  }
  @media screen and (max-width: 575px){
    .container {
      padding: 15px 10px;
    }
    .content {
      margin-left: 15px;
    }
    .text {
      font-size: 14px;
      line-height: 20px;
    }
    .close {
      width: 24px;
      height: 24px;
    }
  }
</style>