绘制完成首页静态图页面，移动端样式调试80%

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": [
+    "locales"
+  ],
+  "i18n-ally.keystyle": "nested"
+}

assets/css/base.css

@@ -1,3 +1,17 @@
+@font-face {  
+  font-family: 'SourceHanSansCN-Heavy'; /* 自定义字体的名称 */  
+  src: url('../fonts/SourceHanSansCN-Heavy.otf') format('opentype'); /* 字体文件的路径 */  
+  font-weight: normal; /* 字体的粗细 */  
+  font-style: normal; /* 字体的样式 */  
+}  
+
+@font-face {  
+  font-family: 'SourceHanSansCN-Regular'; /* 自定义字体的名称 */  
+  src: url('../fonts/SourceHanSansCN-Regular.otf') format('opentype'); /* 字体文件的路径 */  
+  font-weight: normal; /* 字体的粗细 */  
+  font-style: normal; /* 字体的样式 */  
+}  
+
 address, caption, cite, code, dfn, em, th, var { font-style:normal; font-weight:normal;}
 a { display: inline-block; color:#555; text-decoration:none; }
 a:hover { text-decoration:none; }
@@ -9,6 +23,9 @@ table { border-collapse:collapse; }
 p {
   margin: 0;
 }
+section {
+  box-sizing: border-box;
+}
 /*html {overflow-y: scroll;}*/
 html{
   width: 100%;
@@ -24,4 +41,11 @@ body{
   width: 100%;
   height: 100%;
   overflow: auto;
+  font-family: 'SourceHanSansCN-Regular';
+}
+
+@media (min-width: 1200px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl {
+    max-width: 1200px;
+  }
 }

components/header.vue

@@ -17,6 +17,11 @@
           >
             {{ item }}
           </b-nav-item>
+
+          <b-nav-item-dropdown class="nav-link-item d-flex align-items-center" text="demo" right>
+            <b-dropdown-item href="#">Account</b-dropdown-item>
+            <b-dropdown-item href="#">Settings</b-dropdown-item>
+          </b-nav-item-dropdown>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
@@ -70,14 +75,14 @@ export default {
           height: .125rem;
           background: #015fe8;
         }
-        a {
+        >a {
           color: #015fe8;
         }
       }
     }
-    .nav-link-item {
+    ::v-deep .nav-link-item {
       padding: 0 1.4375rem;
-      a {
+      >a {
         color: #151516;
       }
       @include activeNav;
@@ -108,13 +113,16 @@ export default {
     }
   }
   @media screen and (max-width: 400px) {
-    .nav-item {
+    ::v-deep .nav-item {
       background-color: rgba(0,0,0,0.6);
       border-bottom: 1px solid #FFFFFF;
       a {
         color: #FFFFFF !important;
       }
     }
+    ::v-deep .dropdown-menu {
+      background-color: rgba(0,0,0,0.6);
+    }
   }
 
   .nav-item {

locales/en.json

@@ -1,4 +1,37 @@
 {
+  "common": {
+    "readMore": "READ MORE",
+    "viewDetails": "view details",
+    "truckModel": "Truck Model",
+    "dimension": "Dimension (LxWxH)(mm)",
+    "approachingAngle/Departure": "Approaching angle/Departure angle (º)",
+    "products": "PRODUCTS",
+    "companyProducts": "COMPANY PRODUCTS",
+    "brand": "Brand",
+    "driveWheel": "Drive Wheel",
+    "drivingStyle": "Driving Style",
+    "placeofOrigin": "Place of Origin",
+    "tel": "Tel",
+    "Mob/Whatsapp/Wechat": "Mob/Whatsapp/Wechat",
+    "E-mail": "E-mail",
+    "send": "SEND",
+    "enterEail": "Enter your email here"
+  },
+  "index": {
+    "companyProfile": "COMPANY PROFILE",
+    "corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",
+    "companyProfileContent": "SINOTRUCK HOWO SALES CO.,LTD.is located in Jinan city, Shandong Province, P.R. China. It is the cradle and leading production base of the heavy-duty truck industry in China. It is famous for developing and manufacturing SINOTRUK HOWO tractor trucks, dump trucks, fuel tanker trucks and concrete mixer truck, water spraying trucks etc.",
+    "highQuality": "HIGH QUALITY",
+    "LEadingbBraNd": "LEADING BRAND",
+    "experiencedStaff": "EXPERIENCED STAFF",
+    "advancedEquipment": "ADVANCED EQUIPMENT",
+    "popularProduct": "POPULAR PRODUCT",
+    "productDesc": "The company's popular products are on display. Welcome to purchase",
+    "pressCenter": "PRESS CENTER",
+    "realTimeNewsReadingOnline": "Real-time news reading online",
+    "joinOurNewsletter": "JOIN OUR NEWSLETTER",
+    "signUpOurNewsletter": "Sign up our newsletter and get more events & promotions!"
+  },  
   "footer": {
     "contactUs": "Contact us"
   }

locales/zh.json

@@ -1,4 +1,37 @@
 {
+  "common": {
+    "readMore": "阅读更多",
+    "viewDetails": "查看详情",
+    "truckModel": "卡车型号",
+    "dimension": "尺寸（长x宽x高）（毫米）",
+    "approachingAngle/Departure": "接近角/离开角（º）",
+    "products": "产品",
+    "companyProducts": "公司产品",
+    "brand": "品牌",
+    "driveWheel": "驱动轮",
+    "drivingStyle": "驾驶方式",
+    "placeofOrigin": "产地",
+    "tel": "电话",
+    "Mob/Whatsapp/Wechat": "手机/Whatsapp/微信",
+    "E-mail": "电子邮件",
+    "send": "发送",
+    "enterEail": "在此处输入您的电子邮件"
+  },
+  "index": {
+    "companyProfile": "公司简介",
+    "corporateName": "中国重汽豪沃销售有限公司",
+    "companyProfileContent": "中国重汽豪沃销售有限公司位于中国山东省济南市。它是中国重型卡车行业的摇篮和领先的生产基地。以开发和制造中国重汽豪沃牵引车、自卸卡车、油罐车和混凝土搅拌车、洒水车等而闻名。",
+    "highQuality": "高品质",
+    "LEadingbBraNd": "领先品牌",
+    "experiencedStaff": "经验丰富的员工",
+    "advancedEquipment": "先进设备",
+    "popularProduct": "热门产品",
+    "productDesc": "该公司的热门产品正在展出。欢迎购买",
+    "pressCenter": "新闻中心",
+    "realTimeNewsReadingOnline": "实时新闻在线阅读",
+    "joinOurNewsletter": "加入我们的实时通讯",
+    "signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！"
+  },
   "footer": {
     "contactUs": "联系我们"
   }

nuxt.config.js

@@ -53,7 +53,6 @@ export default {
     '~plugins/main',
     '~plugins/axios',
     { src: "~plugins/router.js", ssr: true },
-    { src: "~plugins/vue-awesome-swiper.js", ssr: false },
     { src: "~plugins/i18n.js", ssr: true },
   ],
   /*

package-lock.json

@@ -4364,14 +4364,6 @@
         }
       }
     },
-    "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.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -10509,11 +10501,6 @@
         "tweetnacl": "~0.14.0"
       }
     },
-    "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": "7.1.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-7.1.0.tgz",
@@ -10893,15 +10880,6 @@
         }
       }
     },
-    "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.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -11534,11 +11512,6 @@
         "extsprintf": "^1.2.0"
       }
     },
-    "viewerjs": {
-      "version": "1.11.7",
-      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.7.tgz",
-      "integrity": "sha512-0JuVqOmL5v1jmEAlG5EBDR3XquxY8DWFQbFMprOXgaBB0F7Q/X9xWdEaQc59D8xzwkdUgXEMSSknTpriq95igg=="
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -11549,31 +11522,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
-    "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.0.0",
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz",

package.json

@@ -26,9 +26,6 @@
     "nuxt": "^2.14.0",
     "nuxt-sass-resources-loader": "^2.0.5",
     "patch-package": "^6.4.7",
-    "swiper": "^5.4.5",
-    "viewerjs": "^1.11.3",
-    "vue-awesome-swiper": "^3.1.3",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {

pages/index.vue

@@ -12,13 +12,171 @@
       img-height="480"
     >
       <b-carousel-slide
-        v-for="item in bannerList"
-        :key="item.id"
-        :img-src="item.url"
-        @click.native="goPage(item)"
+        v-for="(item,index) in bannerList"
+        :key="index"
+        :img-src="item"
       >
+        <!-- @click.native="goPage(item)" -->
       </b-carousel-slide>
     </b-carousel>
+
+    <!-- company profile -->
+    <section>
+      <div class="company-profiler container">
+        <h5 class="title">{{ $t('index.companyProfile') }}</h5>
+        <h4 class="sub-title">{{ $t('index.corporateName') }}</h4>
+        <p class="describe">{{ $t('index.companyProfileContent') }}</p>
+        <ul class="advantage row pl-0">
+          <li 
+            v-for="item in advantageList" 
+            :key="item.title" 
+            class="col-3 d-flex flex-column align-items-center"
+          >
+            <b-img :src="item.icon" fluid :alt="item.title"></b-img>
+            <nuxt-link class="mt-3" style="color: #878b90;font-size: .875rem;" :to="item.link">
+              {{ item.title }}
+            </nuxt-link>
+          </li>
+        </ul>
+        <nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
+        <b-img class="word-img" src="../assets/image/backGroundImg/home-world.png" fluid ></b-img>
+      </div>
+    </section>
+
+    <!-- popular product -->
+    <section class="popular-product" style="background-color: #f5f7f9;">
+      <div class="company-profiler container mb-4">
+        <h5 class="title">{{ $t('index.popularProduct') }}</h5>
+        <h4 class="sub-title">{{ $t('index.productDesc') }}</h4>
+      </div>
+      <b-carousel
+        id="carousel-2"
+        class="container"
+        :interval="4000"
+        controls
+        indicators
+      >
+        <b-carousel-slide v-for="item in 3" :key="item">
+          <template v-slot:img>
+            <ul class="row justify-content-around pl-0">
+              <li class="col-6 col-md-3 mb-4" v-for="son in 4" :key="son">
+                <article class="product-card box_shadow">
+                  <b-img src="~assets/image/banner/home-pord1.png" fluid ></b-img>
+                  <div class="product-card-content">
+                    <h4>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>
+                    <nuxt-link class="view-details" to="/">
+                      {{ $t('common.viewDetails') }}
+                      <img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
+                    </nuxt-link>
+                  </div>
+                </article>
+              </li>
+            </ul>
+          </template>
+        </b-carousel-slide>
+      </b-carousel>
+      <nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
+    </section>
+
+    <!-- Products -->
+    <section>
+      <div class="products container mb-4">
+        <h5 class="title">{{ $t('common.products') }}</h5>
+        <h4 class="sub-title">{{ $t('common.companyProducts') }}</h4>
+        <ul style="margin-top: 1.25rem;" class="row pl-0">
+          <li class="col-12 col-md-6 mb-4" v-for="item in 4" :key="item">
+              <article class="products-item box_shadow">
+                <nuxt-link to="/" class="row">
+                  <div class="col-7 col-md-6">
+                    <b-img src="~assets/image/banner/home-pord1.png" fluid></b-img>
+                  </div>
+                  <div class="products-info col-5 col-md-6">
+                    <h3>Foton 8x4 Dump Truck</h3>
+                    <p>{{ $t('common.brand') }}: Foton</p>
+                    <p>{{ $t('common.driveWheel') }}: 8x4</p>
+                    <p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
+                    <p>{{ $t('common.placeofOrigin') }}: China</p>
+                    <div class="view-details d-md-block d-none">
+                      {{ $t('common.viewDetails') }}
+                      <img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
+                    </div>
+                  </div>
+                </nuxt-link>
+              </article>
+          </li>
+        </ul>
+        <nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
+      </div>
+    </section>
+    
+    <!-- press center -->
+    <section style="background-color: #f5f7f9;">
+      <div class="press-center container">
+        <h5 class="title">{{ $t('index.pressCenter') }}</h5>
+        <h4 class="sub-title">{{ $t('index.realTimeNewsReadingOnline') }}</h4>
+        <div class="row mb-4 pl-0">
+          <article class="pc-news box_shadow col-md-6 d-none d-md-block">
+            <b-img src="~assets/image/banner/home-pord1.png" fluid-grow></b-img>
+            <div class="pc-news-info">
+              <h4>Advantages Of Front Shovel And Backhoe For Excavators</h4>
+              <p>
+                Everyone should be very familiar with excavators, but are you familiar with excavator buckets?
+                Whether it is a crawler excavator or a wheeled excavator, the backhoe we usually see most is the backhoe, and the front shovel is rare....
+              </p>
+              <div class="pc-news-footer">
+                <nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
+                <span>- Aug 19, 2022-</span>
+              </div>
+            </div>
+          </article>
+          <ul class="col-12 col-md-6">
+            <li class="new-item box_shadow mb-3" v-for="item in 3" :key="item">
+              <article>
+                <nuxt-link class="row" to="/">
+                  <b-img class="col-5" src="~assets/image/banner/home-pord1.png" fluid-grow></b-img>
+                  <div class="news-info col-7">
+                    <h4>Advantages Of Front Shovel And Backhoe For Excavators</h4>
+                    <p>Everyone should be very familiar with excavators, but are you familiar with excavator buckets ....</p>
+                    <footer class="d-flex justify-content-between align-items-center">
+                      <time>- Aug 19, 2022-</time>
+                      <img width="27" src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')" />
+                    </footer>
+                  </div>
+                </nuxt-link>
+              </article>
+            </li>
+          </ul>
+        </div>
+        <nuxt-link class="more box_shadow mb-4" to="/">{{ $t('common.readMore') }}</nuxt-link>
+      </div>
+    </section>
+
+    <!-- Join our newsletter -->
+    <section style="background-color: #0070de;">
+      <div class="join-our-newsletter container">
+        <h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5>
+        <h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4>
+        <b-input-group class="email-input">
+          <b-form-input :placeholder="$t('common.enterEail')"></b-form-input>
+          <b-input-group-append>
+            <b-button variant="outline-secondary">
+              <img src="~assets/image/icon/email.png" :alt="$t('common.E-mail')" />
+              {{ $t('common.send') }}
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+        <ul class="d-flex justify-content-center mb-5">
+          <li class="mr-4" v-for="(item,index) in contactList" :key="index">
+            <a href="javascript:;">
+              <b-img :src="item.icon" :alt="item.alt" fluid></b-img>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -28,16 +186,62 @@ export default {
   name: 'index',
   data() {
     return {
-      solutionList: [],
+      // 优势
+      advantageList: [
+        {
+          title: this.$t('index.highQuality'),
+          icon: require('../assets/image/icon/high-quality.png'),
+          link: '/'
+        },
+        {
+          title: this.$t('index.LEadingbBraNd'),
+          icon: require('../assets/image/icon/LEading-braNd.png'),
+          link: '/'
+        },
+        {
+          title: this.$t('index.experiencedStaff'),
+          icon: require('../assets/image/icon/experienced-staff.png'),
+          link: '/'
+        },
+        {
+          title: this.$t('index.advancedEquipment'),
+          icon: require('../assets/image/icon/advanced-equipment.png'),
+          link: '/'
+        }
+      ],
+      // 联系
+      contactList: [
+        {
+          alt: 'facebook',
+          icon: require('../assets/image/icon/facebook.png'),
+        },
+        {
+          alt: 'X',
+          icon: require('../assets/image/icon/X.png'),
+        },
+        {
+          alt: 'google',
+          icon: require('../assets/image/icon/google.png'),
+        },
+        {
+          alt: 'in',
+          icon: require('../assets/image/icon/in.png'),
+        },
+        {
+          alt: 'YouTube',
+          icon: require('../assets/image/icon/YouTube.png'),
+        }
+      ],
+      bannerList: [ require('../assets/image/banner/home1.png')], // 轮播图
     }
   },
-  async asyncData({app}) {
-    const {data: bannerList} = await app.$axios.get('/index/bannerList')
+  // async asyncData({app}) {
+  //   const {data: bannerList} = await app.$axios.get('/index/bannerList')
 
-    return {
-      bannerList, // 轮播图
-    }
-  },
+  //   return {
+  //     bannerList, // 轮播图
+  //   }
+  // },
   mounted() {
   },
   methods: {
@@ -54,14 +258,215 @@ export default {
 .content {
   width: 100%;
   height: 100%;
-  .carousel:hover {
-    cursor: pointer;
-  }
-  .container {
+  section {
     overflow: hidden;
   }
-  .fonts {
-    font-size: 1rem;
+  @mixin commonSector {
+    .title {
+      margin: 1.625rem 0 .9375rem;
+      color: #015fe8;
+      font-size: 1.5rem;
+      text-align: center;
+      font-family: 'SourceHanSansCN-Heavy';
+    }
+    .sub-title {
+      color: #015fe8;
+      text-align: center;
+      font-size: .875rem;
+      font-weight: 400;
+    }
+    .more {
+      margin-top: 3.75rem;
+      padding: .5rem 2.1875rem;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background-color: #015fe8;
+      border-radius: 1.875rem;
+      font-size: .875rem;
+    }
+    .view-details {
+      width: max-content;
+      padding: .375rem 1.5625rem;
+      display: flex;
+      align-items: center;
+      color: #0070de;
+      border: .0625rem solid #0070de;
+      border-radius: 1.875rem;
+      img {
+        width: 1.0625rem;
+        height: 1.0625rem;
+      }
+    }
+  }
+  .company-profiler {
+    @include commonSector;
+    .describe {
+      margin-top: 1.125rem;
+      margin-bottom: 3.25rem;
+      color: #575757;
+      font-size: .875rem;
+    }
+    .word-img {
+      margin-top: -11.25rem;
+      pointer-events: none;
+    }
+  }
+  .popular-product {
+    @include commonSector;
+    #carousel-2 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      background-color: #fff;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+    .more {
+      margin: 2.75rem 0;
+    }
+  }
+  .products {
+    @include commonSector;
+    .products-item {
+      border: .0625rem solid #e4e6ea;
+      .products-info {
+        padding: 1.3125rem 1rem;
+        border-left: .0625rem solid #e6e8ec;
+        h3 {
+          margin-bottom: 1.75rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+          font-size: .875rem;
+        }
+        .view-details {
+          margin-top: 5.1875rem;
+        }
+      }
+    }
+  }
+  .press-center {
+    @include commonSector;
+    .pc-news {
+      background-color: #ffffff;
+      .pc-news-info {
+        padding: 1.25rem 1.0625rem;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: 1.25rem;
+          color: #212222;
+        }
+        p {
+          color: #878b90;
+        }
+        .pc-news-footer {
+          margin-top: 3.8125rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .more {
+            position: unset;
+            left: 0;
+            transform: translateX(0);
+          }
+          span {
+            color: #878b90;
+          }
+        }
+      }
+    }
+    .new-item {
+      background-color: #fff;
+      .news-info {
+        padding: 1.625rem 1.125rem .875rem;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: 1.25rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p, footer {
+          color: #878b90;
+        }
+        footer {
+          margin-top: 1.625rem;
+          img {
+            margin-right: .625rem;
+          }
+        }
+      }
+    }
+  }
+  .join-our-newsletter {
+    @include commonSector;
+    .title, .sub-title {
+      color: #fff;
+    }
+    .email-input {
+      margin: 2.6875rem auto 1.875rem;
+      width: 23.9375rem;
+      ::v-deep .form-control {
+        color: #fff;
+        background-color: #0070de;
+        border: .0625rem solid #ffffff;
+        border-radius: 3.125rem;
+        font-size: .875rem;
+        z-index: 10;
+        &::placeholder {
+          color: #a6cdf4;
+          font-size: .875rem;
+        }
+      }
+      ::v-deep .btn {
+        margin-left: -3.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #0070de;
+        border: none;
+        background-color: #fff;
+        border-radius: 3.125rem;
+        z-index: 99;
+        img {
+          width: 1.125rem;
+          height: 1.125rem;
+          margin-right: .375rem;
+        }
+      }
+    }
+  }
+  .more {
+    margin-top: 0 !important;
   }
 }
 

plugins/swiper.js

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

plugins/vue-awesome-swiper.js

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

plugins/vue2-viewer.js

@@ -1,3 +0,0 @@
-import Vue from "vue";
-import vue2Viewer from "vue2-viewer";
-Vue.use(vue2Viewer);