绘制完成产品页面相关模块

assets/css/common.scss

@@ -56,14 +56,15 @@
   h2 {
     max-width: 19.125rem;
     height: 100%;
+    display: flex;
+    align-items: center;
     position: relative;
-    line-height: 3.6875rem;
     background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
     font-size: 1rem;
     &::after {
       content: '';
       width: 5.875rem;
-      height: 3.6875rem;
+      height: 100%;
       position: absolute;
       top: 0;
       right: -5.8125rem;

components/header.vue

@@ -48,7 +48,7 @@ export default {
       menuList: [
         { name: this.$t('menu.Home'), href: '/' },
         { name: this.$t('menu.AboutUs'), href: '/abou-us' },
-        { name: this.$t('menu.Products'), href: '/' },
+        { name: this.$t('menu.Products'), href: '/products' },
         { name: this.$t('menu.News'), href: '/news' },
         { name: this.$t('menu.Exhibition'), href: '/exhibition' },
         { name: this.$t('menu.ContactUs'), href: '/contact-us' },

locales/en.json

@@ -4,6 +4,11 @@
     "viewDetails": "view details",
     "truckModel": "Truck Model",
     "dimension": "Dimension (LxWxH)(mm)",
+    "overhang": "Overhang (front/rear)(mm)",
+    "wheelBase": "Wheelbase (mm)",
+    "maxSpeed": "Max speed (km/h)",
+    "curbWeight": "Curb weight (kg)",
+    "loadingWeight": "Loading weight (kg)",
     "approachingAngle/Departure": "Approaching angle/Departure angle (º)",
     "products": "PRODUCTS",
     "companyProducts": "COMPANY PRODUCTS",
@@ -18,7 +23,9 @@
     "enterEail": "Enter your email here",
     "addressLabel": "Address",
     "fax": "Fax",
-    "submit": "SUBMIT"
+    "submit": "SUBMIT",
+    "sendInquiry": "Send Inquiry",
+    "chatNow": "Chat Now"
   },
   "menu": {
     "Home": "Home",
@@ -43,6 +50,12 @@
     "relatedExhibition": "Related Exhibition",
     "relatedProducts": "Related Products"
   },
+  "products": {
+    "products": "PRODUCTS",
+    "allProducts": "ALL PRODUCTS",
+    "productDetails": "Product Details",
+    "inquiry": "Inquiry"
+  },
   "index": {
     "companyProfile": "COMPANY PROFILE",
     "corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",

locales/zh.json

@@ -4,6 +4,11 @@
     "viewDetails": "查看详情",
     "truckModel": "卡车型号",
     "dimension": "尺寸（长x宽x高）（毫米）",
+    "overhang": "悬垂（前/后）（mm）", 
+    "wheelBase": "轴距（mm）",
+    "maxSpeed": "最高速度（公里/小时）",
+    "curbWeight": "整备质量（kg）",
+    "loadingWeight": "装载重量（kg）",
     "approachingAngle/Departure": "接近角/离开角（º）",
     "products": "产品",
     "companyProducts": "公司产品",
@@ -18,7 +23,9 @@
     "enterEail": "在此处输入您的电子邮件",
     "addressLabel": "地址",
     "fax": "传真",
-    "submit": "提交"
+    "submit": "提交",
+    "sendInquiry": "发送咨询",
+    "chatNow": "立即聊天"
   },
   "menu": {
     "Home": "首页",
@@ -58,6 +65,12 @@
     "relatedExhibition": "相关展览",
     "relatedProducts": "相关产品"
   },
+  "products": {
+    "products": "产品",
+    "allProducts": "所有产品",
+    "productDetails": "产品详情",
+    "inquiry": "询价"
+  },
   "aboutUs": {
     "AboutUs": "关于我们",
     "company": "中车豪沃销售有限公司",

nuxt.config.js

@@ -60,6 +60,8 @@ export default {
     { src: "~plugins/router.js", ssr: true },
     { src: "~plugins/i18n.js", ssr: true },
     { src: "~plugins/element-tree.js", ssr: true },
+    { src: "~plugins/vue-piczoom.js", ssr: false },
+    { src: "~plugins/swiper.js", ssr: false },
   ],
   /*
   ** Nuxt.js modules

package-lock.json

@@ -4577,6 +4577,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -10985,6 +10993,11 @@
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -11293,6 +11306,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -11913,6 +11935,31 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
+          "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+        },
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue-client-only": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/vue-client-only/-/vue-client-only-2.1.0.tgz",
@@ -11983,6 +12030,14 @@
       "resolved": "https://registry.npmmirror.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-photo-zoom-pro": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/vue-photo-zoom-pro/-/vue-photo-zoom-pro-2.5.0.tgz",
+      "integrity": "sha512-IL32nslKZUJxq8WI1EpoR6R9Hjj72/isLgJG6yEyXTLvD1a8UGYuTc3Avam87rbdnl5TnP+cZRT9Xye/uiU+Fg==",
+      "requires": {
+        "core-js": "^3.0.0"
+      }
+    },
     "vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

package.json

@@ -25,6 +25,9 @@
     "nuxt": "2.15.0",
     "nuxt-sass-resources-loader": "^2.0.5",
     "patch-package": "^6.4.7",
+    "swiper": "^5.4.5",
+    "vue-awesome-swiper": "^3.1.3",
+    "vue-photo-zoom-pro": "^2.5.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {

pages/exhibition/_id.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 新闻详情 -->
+  <!-- 展览详情 -->
   <div class="exhibition-info">
     <div class="info-top">
       <h2 class="exhibition-title">How To Maintain The Chassis Of A Truck?</h2>

pages/exhibition/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 新闻列表 -->
+  <!-- 展览列表 -->
   <section class="exhibition-list">
     <nuxt-link 
       class="exhibition-item box_shadow row mt-4" 

pages/products.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- 新闻 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container pt-4 pb-4">
+      <div class="row">
+        <AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('products.allProducts')"/>
+        <main class="col-md-9">
+          <div class="pretty-header">
+            <h2>Low Bed Trailer</h2>
+          </div>
+          <nuxt-child />
+        </main>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'products',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('products.products'),
+        subTitle: this.$t('products.allProducts'),
+        img: require('../assets/image/banner/products-banner.png')
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

pages/products/_id.vue

@@ -0,0 +1,378 @@
+<template>
+  <!-- 产品详情 -->
+  <div class="products-info">
+    <div class="row pl-0">
+      <div class="products-preview col-md-5">
+        <div class="preview-img">
+          <no-ssr>
+            <vuePhotoZoomPro :url="currentImgUrl" :width="100" :scale="3"/>
+          </no-ssr>
+        </div>
+        <div class="products-scroll-box">
+          <no-ssr>
+            <swiper :options="swiperOptions">
+              <swiper-slide
+                v-for="src in productsImages"
+                :key="src"
+                class="products-img-item"
+                :class="src===currentImgUrl ? 'is-products-img-active' : ''" 
+              >
+                <img @click="() => {currentImgUrl = src}"  :src="src" alt="产品图片" />
+              </swiper-slide>
+              <div class="swiper-button-prev" slot="button-prev"></div>
+              <div class="swiper-button-next" slot="button-next"></div>
+            </swiper>
+          </no-ssr>
+        </div>
+      </div>
+      <article class="prod-details col-md-7">
+        <h2 class="products-title">SINOTRUK HOWO Tractor Truck Head</h2>
+        <div class="parameter">
+          <p>
+            <label>{{ $t('common.truckModel') }}:</label>
+            <span>ZZ4257N3247C1</span>
+          </p>
+          <p>
+            <label>{{ $t('common.dimension') }}:</label>
+            <span>6800x2490x3668</span>
+          </p>
+          <p>
+            <label>{{ $t('common.approachingAngle/Departure') }}:</label>
+            <span>16/70</span>
+          </p>
+          <p>
+            <label>{{ $t('common.overhang') }}:</label>
+            <span>1500/700725</span>
+          </p>
+          <p>
+            <label>{{ $t('common.wheelBase') }}:</label>
+            <span>3200+1400、3225+1350</span>
+          </p>
+          <p>
+            <label>{{ $t('common.maxSpeed') }}:</label>
+            <span>102</span>
+          </p>
+          <p>
+            <label>{{ $t('common.curbWeight') }}:</label>
+            <span>11930</span>
+          </p>
+          <p>
+            <label>{{ $t('common.loadingWeight') }}:</label>
+            <span>40000</span>
+          </p>
+        </div>
+
+        <div class="visit">
+          <a class="box_shadow" href="javascript:;">
+            <img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
+            {{ $t('common.sendInquiry') }}
+          </a>
+          <a class="box_shadow" href="javascript:;">
+            <img src="~assets/image/icon/msg-highlight.png" :alt="$t('common.chatNow')" />
+            {{ $t('common.chatNow') }}
+          </a>
+        </div>
+
+        <ContactFooter />
+      </article>
+    </div>
+
+    <div class="mt-4">
+      <div class="pretty-header">
+        <h2>{{ $t('products.productDetails') }}</h2>
+      </div>
+      <div class="desc pt-3 pb-3">
+        富文本内容
+      </div>
+      <div class="guide">
+        <nuxt-link to="/">
+          Previous: How To Maintain The Chassis Of A Truck?
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          Next: Flatbed Trailer Buying Guide
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="mt-5">
+      <div class="pretty-header">
+        <h2>{{ $t('products.inquiry') }}</h2>
+      </div>
+
+      <div class="form-box box_shadow mt-3">
+        <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import vuePhotoZoomPro from 'vue-photo-zoom-pro';
+import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css';
+if (process.client) {
+  var { swiper, swiperSlide } = require("vue-awesome-swiper");
+}
+import "swiper/css/swiper.min.css";
+
+export default {
+  name: 'products-info',
+  components: {
+    swiper,
+    swiperSlide,
+    vuePhotoZoomPro,
+  },
+  data() {
+    return {
+      currentImgUrl: '',
+      dataForm: {
+        name: '',
+        email: '',
+        phone: '',
+        message: ''
+      },
+      swiperOptions: {
+        slidesPerView :'auto',
+        spaceBetween: 10,
+        slidesPerGroupAuto:true,
+        grabCursor: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+    }
+  },
+  asyncData({$axios, params}) {
+    let productsImages = [
+      require('../../assets/image/banner/home-pord1.png'),
+      require('../../assets/image/banner/home1.png'),
+    ];
+    let currentImgUrl = productsImages[0];
+
+    return {
+      currentImgUrl,
+      productsImages
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      console.log(this.dataForm);
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.is-products-img-active {
+  border: 1px solid #CC0001;
+}
+.swiper-button-next, .swiper-button-prev {
+  width: 1.1875rem;
+  height: 3.75rem;
+  top: 38%;
+  color: #ffffff;
+  background-color: rgba(198, 198, 198, 0.6);
+  opacity: 1 !important;
+  &::after{
+    font-size: unset;
+  }
+}
+.swiper-button-prev {
+  left: 0;
+}
+.swiper-button-next {
+  right: 0;
+}
+</style>
+
+<style lang="scss" scoped>
+.products-info {
+  padding-top: .9375rem;
+  .products-preview {
+    height: min-content;
+    .preview-img {
+      width: 100%;
+      max-height: 25.625rem;
+      border: 1px solid #d9dde0;
+      ::v-deep .vue-photo-zoom-pro {
+        max-height: 25rem;
+        .img-region {
+          max-width: 100% !important;
+          max-height: 25rem;
+        }
+      }
+    }
+    .products-scroll-box {
+      width: 100%;
+      height: 6.25rem;
+      margin-top: .625rem;
+      .products-img-item {
+        width: 3.75rem !important;
+        height: 3.75rem !important;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+  .prod-details {
+    .products-title {
+      width: 100%;
+      height: min-content;
+      min-height: 3.5rem;
+      margin-bottom: 1.4375rem;
+      padding: 0 1.4375rem;
+      display: flex;
+      align-items: center;
+      color: #fff;
+      background: url('~assets/image/backGroundImg/products-title.png') no-repeat;
+      background-size: 100% 100%;
+      font-family: 'SourceHanSansCN-Heavy';
+      font-size: 1rem;
+    }
+    .parameter {
+      height: min-content;
+      min-height: 17.5rem;
+      p {
+        color: #2d2d30;
+        font-size: .875rem;
+      }
+    }
+    .visit {
+      display: flex;
+      align-items: center;
+      a {
+        flex: 1;
+        height: 2.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        border-radius: 1.25rem;
+        font-size: .875rem;
+        &:first-child {
+          margin-right: .75rem;
+          background-color: #015fe8;
+        }
+        &:last-child {
+          background-color: #fc8815;
+        }
+        img {
+          width: 1rem;
+          height: 1rem;
+          margin-right: .5rem;
+        }
+      }
+    }
+  }
+  .guide {
+    padding-top: .625rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #515760;
+    border-top: 1px solid #d8dde1;
+    font-size: .875rem;
+  }
+  .form-box {
+    padding: 2.125rem 7.8125rem;
+    border: 1px solid #ebeef0;
+    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
+    border-radius: .5rem;
+  }
+}
+
+// 特殊样式小屏幕处理
+@media screen and (max-width:400px) {
+  .form-box {
+    padding: 1.25rem !important;
+  }
+}
+</style>

pages/products/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- 产品列表 -->
+  <section class="products-list">
+    <ul class="row pl-0">
+      <li class="col-12 col-md-4"  v-for="item in 6" :key="item">
+        <nuxt-link 
+          class="products-item box_shadow mt-2" 
+          to="/products/123123"
+        >
+          <article class="product-card box_shadow">
+            <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+            <div class="product-card-content">
+              <h4 class="text-ellipsis">SINOTRUK HOWO Tractor Truck Head</h4>
+              <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+              <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+              <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+            </div>
+          </article>
+        </nuxt-link>
+      </li>
+    </ul>
+    <SeoPagination class="mt-4" />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'products-list',
+  data() {
+    return {
+      bannerTopOptions: {
+        
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.products-list {
+  box-sizing: border-box;
+  ul {
+    margin: 0;
+    li {
+      padding: 0 .3125rem;
+      .products-item {
+        border: 1px solid #e6e8ec;
+        .product-card-content {
+          padding: 1.125rem 1rem;
+          border-top: .0625rem solid #e6e8ec;
+          font-size: .875rem;
+          h4 {
+            margin-bottom: .8125rem;
+            color: #212222;
+            -webkit-line-clamp: 1;
+            font-size: .875rem;
+          }
+          p {
+            color: #878b90;
+          }
+          .view-details {
+            margin: 0 auto;
+            margin-top: 2rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>

plugins/swiper.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import VueAwesomeSwiper from "vue-awesome-swiper";
+
+Vue.use(VueAwesomeSwiper);

plugins/vue-piczoom.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import piczoom from "vue-photo-zoom-pro";
+
+Vue.use(piczoom)