platform-customsdeclaration-ssr/components/main/brand.vue

<template>
  <div class="w-brand">
    <div class="container">
      <div class="brand-bg">
        <h3>优软云关务服务</h3>
        <p>快捷、精确、节省</p>
        <p>为您提供一站式进出口综合服务</p>
        <a href="javascript:void(0)" @click="logUser">立即申请</a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MainPage',
    methods: {
      logUser () {
        if (this.$store.state.option.user.logged) {
          this.$router.push('/clientPage')
        } else {
          this.$message({
            message: '请先登录您的账户信息！',
            type: 'warning'
          })
        }
      }
    }
  }
</script>

<style type="text/scss" scoped lang="scss">
  .w-brand{
    background: url(/banner.png)no-repeat center center;
    height:700px;
    .brand-bg{
      padding-top:210px;
      margin-left:50px;
      h3{
        font-size: 40px;
        color:#fff;
        font-weight: bold;
        margin-bottom:35px;
      }
      p{
        font-size: 24px;
        color:#fff;
        margin-bottom:10px;
      }
      a{
        margin-top:75px;
        display:block;
        width:220px;
        height:44px;
        text-align: center;
        line-height: 44px;
        background: #16cd41;
        color:#fff;
        border-radius:5px;
      }
    }
  }
</style>