dl_site_nuxt/pages/contact-us.vue

<template>
  <!-- 联系我们 -->
  <div class="content">
    <BannerTop :options="bannerTopOptions"/>

    <section class="container mt-5 mb-5">
      <div class="form-container box_shadow w-75 m-auto">
        <article class="header">
          <div class="title d-flex align-items-center">
            <h2 class="d-none d-md-block">{{ $t('contactUs.contactUs') }}</h2>
            <b-img class="mr-4" src="~assets/image/backGroundImg/contact-us-logo.png" fluid :alt="$t('index.corporateName')"></b-img>
          </div>
          <p class="row mt-3">
            <label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ $t('contactUs.contacts') }}</label>
            <label class="col-6">{{ $t('common.tel') }}：+86-531-6998513</label>
          </p>
          <p class="row">
            <label class="col-12">{{ $t('common.addressLabel') }}：{{ $t('contactUs.address') }}</label>
          </p>
        </article>

        <main class="form-box">
          <ul class="way row pl-0 justify-content-center ">
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
              <h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
              <p>008618253112969</p>
            </li>
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
              <h5>{{ $t('common.fax') }}</h5>
              <p>+86-531-69885133</p>
            </li>
            <li class="col-4 text-center">
              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
              <h5>{{ $t('common.E-mail') }}</h5>
              <p>alicesales@scdtrailer.com</p>
            </li>
          </ul>

          <b-form @submit="onSubmit">
            <b-form-group
              id="input-name"
              label-for="input-name"
              :invalid-feedback="$t('contactUs.name')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.name') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-name"
                v-model="dataForm.name"
                required
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-mail"
              label-for="input-mail"
              :invalid-feedback="$t('contactUs.mail')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-mail"
                type="email"
                v-model="dataForm.email"
                required
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-contactWay"
              label-for="input-contactWay"
              :invalid-feedback="$t('contactUs.contactWay')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
                </div>
              </template>
              <b-form-input
                id="input-contactWay"
                v-model="dataForm.phone"
                required
              >
              </b-form-input>
            </b-form-group>

            <b-form-group
              id="input-desc"
              label-for="input-desc"
              :invalid-feedback="$t('contactUs.desc')"
            >
              <template v-solt:lable>
                <div class="mb-2 d-flex align-items-center">
                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
                  <h6 class="label-text">{{ $t('contactUs.desc') }}</h6>
                </div>
              </template>
              <b-form-textarea
                id="input-desc"
                v-model="dataForm.message"
                rows="3"
              >
              </b-form-textarea>
            </b-form-group>

            <div class="text-center">
              <b-button class="w-25" type="submit" variant="primary" pill>
                {{ $t('common.submit') }}
              </b-button>
            </div>
          </b-form>
        </main>
      </div>
    </section>
  
    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
  </div>
</template>

<script>

export default {
  name: 'abou-us',
  data() {
    return {
      bannerTopOptions: {
        title: this.$t('contactUs.contactUs'),
        subTitle: this.$t('contactUs.way'),
        img: require('../assets/image/banner/aboutus-banner.png')
      },
      dataForm: {
        name: '',
        email: '',
        phone: '',
        message: ''
      }
    }
  },
  methods: {
    onSubmit(e) {
      e.preventDefault()
      console.log(this.dataForm);
      
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .form-container {
    height: min-content;
    border-radius: 2.125rem;
    overflow: hidden;
    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
    .header {
      width: 100%;
      height: min-content;
      background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .title {
        margin-top: 2.5625rem;
        justify-content: space-between;
        h2 {
          padding: .6875rem 2.75rem .6875rem 1.625rem;
          color: #fff;
          background: rgba(255,255,255,0.44);
          border-radius: 0px 3.125rem 3.125rem 0px;
          font-size: 1.125rem;
          font-family: 'SourceHanSansCN-Heavy';
        }
      }
      p {
        padding-left: 1.875rem;
        color: #fff;
        font-size: .875rem;
      }
    }
    .form-box {
      padding: 2.25rem 5.375rem;
      .way {
        h5 {
          color: #80818a;
          font-size: .875rem;
        }
        p {
          color: #2b2b2b;
          font-size: .875rem;
          word-break: break-word;
        }
      }
      .label-text {
        margin-bottom: 0;
        color: #2b2b2b;
        font-size: .875rem;
      }
    }
  }

  .footer-img {
    margin-top: -5.625rem;
  }
  
  // 特殊样式小屏幕处理
  @media screen and (max-width:400px) {
    .form-container {
      width: 100% !important;
      .header {
        .title {
          margin-top: .625rem;
          justify-content: center;
        }
      }
      .form-box {
        padding: 1.25rem;
      }
    }
    .footer-img {
      margin-top: 0;
    }
  }
}

</style>