绘制完成联系我们静态页面

components/header.vue

@@ -51,7 +51,7 @@ export default {
         { name: this.$t('menu.Products'), href: '/' },
         { name: this.$t('menu.News'), href: '/' },
         { name: this.$t('menu.Exhibition'), href: '/' },
-        { name: this.$t('menu.ContactUs'), href: '/' },
+        { name: this.$t('menu.ContactUs'), href: '/contact-us' },
         { name: this.$t('menu.Feedback'), href: '/' },
       ]
     }

locales/en.json

@@ -15,7 +15,10 @@
     "Mob/Whatsapp/Wechat": "Mob/Whatsapp/Wechat",
     "E-mail": "E-mail",
     "send": "SEND",
-    "enterEail": "Enter your email here"
+    "enterEail": "Enter your email here",
+    "addressLabel": "Address",
+    "fax": "Fax",
+    "submit": "SUBMIT"
   },
   "menu": {
     "Home": "Home",
@@ -46,6 +49,17 @@
     "company": "Sinotruck Howo Sales Co.,Ltd",
     "address": "Room 2403, No.1 Yinzuo Jingdu Mansion, Shunhe East Street No.66, District Shizhong, Jinan city, shandong province, China"
   },
+  "contactUs": {
+    "contactUs": "Contact Us",
+    "contacts": "Alice",
+    "way": "Find us through some contact information",
+    "contact": "Contact",
+    "name": "Your name",
+    "mail": "Mail",
+    "contactWay": "Phone/WhatsApp",
+    "desc": "Please fill in the form with details so we can send you a quotation correctly",
+    "address": "Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China"
+  },
   "footer": {
     "contactUs": "Contact us"
   }

locales/zh.json

@@ -15,7 +15,10 @@
     "Mob/Whatsapp/Wechat": "手机/Whatsapp/微信",
     "E-mail": "电子邮件",
     "send": "发送",
-    "enterEail": "在此处输入您的电子邮件"
+    "enterEail": "在此处输入您的电子邮件",
+    "addressLabel": "地址",
+    "fax": "传真",
+    "submit": "提交"
   },
   "menu": {
     "Home": "首页",
@@ -46,6 +49,17 @@
     "company": "中车豪沃销售有限公司",
     "address": "中国山东省济南市市中区顺河东街66号银座京都大厦1号2403室"
   },
+  "contactUs": {
+    "contactUs": "联系我们",
+    "contacts": "艾丽斯",
+    "way": "通过一些联系方式找到我们",
+    "contact": "联系",
+    "name": "你的名字",
+    "mail": "邮件",
+    "contactWay": "电话/WhatsApp",
+    "desc": "请详细填写表格，以便我们正确地向您发送报价",
+    "address": "山东省济南市历下区19楼善港新天地8号"
+  },
   "footer": {
     "contactUs": "联系我们"
   }

pages/contact-us.vue

@@ -0,0 +1,238 @@
+<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 :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 {
+    position: relative;
+    bottom: 0;
+  }
+  
+  // 特殊样式小屏幕处理
+  @media screen and (max-width:400px) {
+    .form-container {
+      width: 100% !important;
+      .header {
+        .title {
+          margin-top: .625rem;
+          justify-content: center;
+        }
+      }
+      .form-box {
+        padding: 1.25rem;
+      }
+    }
+  }
+}
+
+</style>