fx66/src/components/ApplyContent.vue

<template>
  <div>
    <div class="banner">
      <img src="../../static/images/apply/banner.png" alt="">
    </div>
    <Steps></Steps>
    <ApplyForm></ApplyForm>
    <div class="dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%">
      <p>登录后才可申请经纪商！</p>
      <button @click="goIndex()">立即登录</button>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import Steps from '../components/Steps'
import ApplyForm from '../components/ApplyForm'

export default {
  name: 'ApplyContent',
  data () {
    return {
      dialogVisible: ''
    }
  },
  components: {Steps, ApplyForm},
  methods: {
    goIndex () {
      this.$router.push('/')
    }
  },
  mounted () {
    if (this.$store.state.logined) {
      this.dialogVisible = false
    } else {
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
  .banner {
    height: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: 75px;

  img {
    height: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  }
  .dialog{
    p{
      font-size: 24px;
      color: #1a6fa6;
    }
    button{
      border: 1px solid #e5e5e5;
      color: #1a6fa6;
      height: 35px;
      width: 120px;
      border-radius: 25px;
      margin-top: 30px;
      margin-bottom: 40px;
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>