<style scoped>
.fill {
  background-image: url('../../assets/subscriber-bg.png');
  width: 100%;
  height: 301px;
  background-size: cover
}
.box {
  max-width: 1200px;
  margin: 0 auto;
}
.title {
font-size: 20px;
font-family: Microsoft JhengHei;
font-weight: bold;
color: #FFFFFF;
line-height: 26px;
text-align: center;
padding-top: 80px;
}
.desc {font-size: 12px;
font-family: Microsoft JhengHei;
font-weight: 400;
color: #FFFFFF;
margin: 10px 0 20px 0;
text-align: center;}
.email-box {
  width: 630px;
height: 56px;
margin: 0 auto;
position: relative;
}
.email-box.mobile {
  width: 100%;
}
.input {
  width: 630px;
height: 56px;
background-color: #fff;
border-radius: 28px;
}
.input.mobile {
  width: 100%;
}
.btn {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 102px;
height: 46px;
border-radius: 23px;
}
::v-deep .q-field__control-container {
  padding-left: 30px;
}
</style>>
<template>
<div class="fill">
<div class="box" :class="{'q-px-md': $q.platform.is.mobile}">
  <div class="title">
    輸入電子郵箱接收訂閱信息
  </div>
  <div class="desc">
    最高可省60%，只有订阅用户才能享受到隐藏优惠，点击“订阅”，即表示你同意我们的《訂閱條款》
  </div>
  <div class="email-box" :class="{'mobile':$q.platform.is.mobile}">
    <q-input class="input" :class="{'mobile':$q.platform.is.mobile}" rounded outlined placeholder="請輸入您在使用的電子郵件"></q-input><q-btn unelevated  color="primary" class="btn" label="提交"></q-btn>
  </div>
</div>
</div>
</template>
<script>
  export default {
    // props: ["dataList"],
    data() {
      return {
        year: ''
      };
    },
    created() {},
    mounted() {
      //获取当前年
      var myDate = new Date();
      this.year = myDate.getFullYear();
    },
    methods: {
    },
  };

</script>
