diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..474244d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "i18n-ally.localesPaths": [ + "locales" + ], + "i18n-ally.keystyle": "nested" +} \ No newline at end of file diff --git a/assets/css/base.css b/assets/css/base.css index 8c289d6..6b4e79d 100644 --- a/assets/css/base.css +++ b/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; + } } \ No newline at end of file diff --git a/assets/fonts/SourceHanSansCN-Heavy.otf b/assets/fonts/SourceHanSansCN-Heavy.otf new file mode 100644 index 0000000..58e1ca5 Binary files /dev/null and b/assets/fonts/SourceHanSansCN-Heavy.otf differ diff --git a/assets/fonts/SourceHanSansCN-Regular.otf b/assets/fonts/SourceHanSansCN-Regular.otf new file mode 100644 index 0000000..886f82f Binary files /dev/null and b/assets/fonts/SourceHanSansCN-Regular.otf differ diff --git a/assets/image/backGroundImg/home-world.png b/assets/image/backGroundImg/home-world.png new file mode 100644 index 0000000..bcb759a Binary files /dev/null and b/assets/image/backGroundImg/home-world.png differ diff --git a/assets/image/banner/home-pord1.png b/assets/image/banner/home-pord1.png new file mode 100644 index 0000000..7c4d8eb Binary files /dev/null and b/assets/image/banner/home-pord1.png differ diff --git a/assets/image/banner/home1.png b/assets/image/banner/home1.png new file mode 100644 index 0000000..a48efbe Binary files /dev/null and b/assets/image/banner/home1.png differ diff --git a/assets/image/icon/Facebook.png b/assets/image/icon/Facebook.png new file mode 100644 index 0000000..2f2e11d Binary files /dev/null and b/assets/image/icon/Facebook.png differ diff --git a/assets/image/icon/LEading-braNd.png b/assets/image/icon/LEading-braNd.png new file mode 100644 index 0000000..e41ec76 Binary files /dev/null and b/assets/image/icon/LEading-braNd.png differ diff --git a/assets/image/icon/X.png b/assets/image/icon/X.png new file mode 100644 index 0000000..05cd7e6 Binary files /dev/null and b/assets/image/icon/X.png differ diff --git a/assets/image/icon/YouTube.png b/assets/image/icon/YouTube.png new file mode 100644 index 0000000..0b45724 Binary files /dev/null and b/assets/image/icon/YouTube.png differ diff --git a/assets/image/icon/advanced-equipment.png b/assets/image/icon/advanced-equipment.png new file mode 100644 index 0000000..3f030f0 Binary files /dev/null and b/assets/image/icon/advanced-equipment.png differ diff --git a/assets/image/icon/email.png b/assets/image/icon/email.png new file mode 100644 index 0000000..0d3be8d Binary files /dev/null and b/assets/image/icon/email.png differ diff --git a/assets/image/icon/experienced-staff.png b/assets/image/icon/experienced-staff.png new file mode 100644 index 0000000..19d39f4 Binary files /dev/null and b/assets/image/icon/experienced-staff.png differ diff --git a/assets/image/icon/google.png b/assets/image/icon/google.png new file mode 100644 index 0000000..fdd258c Binary files /dev/null and b/assets/image/icon/google.png differ diff --git a/assets/image/icon/goto.png b/assets/image/icon/goto.png new file mode 100644 index 0000000..7bb1ed6 Binary files /dev/null and b/assets/image/icon/goto.png differ diff --git a/assets/image/icon/goto1.png b/assets/image/icon/goto1.png new file mode 100644 index 0000000..e64d2e1 Binary files /dev/null and b/assets/image/icon/goto1.png differ diff --git a/assets/image/icon/high-quality.png b/assets/image/icon/high-quality.png new file mode 100644 index 0000000..103beda Binary files /dev/null and b/assets/image/icon/high-quality.png differ diff --git a/assets/image/icon/in.png b/assets/image/icon/in.png new file mode 100644 index 0000000..7997ba7 Binary files /dev/null and b/assets/image/icon/in.png differ diff --git a/components/header.vue b/components/header.vue index 2c69eb6..3420896 100644 --- a/components/header.vue +++ b/components/header.vue @@ -17,6 +17,11 @@ > {{ item }} + + + Account + Settings + @@ -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 { diff --git a/locales/en.json b/locales/en.json index 243a473..8860fd6 100644 --- a/locales/en.json +++ b/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" } diff --git a/locales/zh.json b/locales/zh.json index 41ca407..cfd18c6 100644 --- a/locales/zh.json +++ b/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": "联系我们" } diff --git a/nuxt.config.js b/nuxt.config.js index e6ba143..0b31919 100644 --- a/nuxt.config.js +++ b/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 }, ], /* diff --git a/package-lock.json b/package-lock.json index a54bfe5..b00ae56 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 17dd6c0..1c58442 100644 --- a/package.json +++ b/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": { diff --git a/pages/index.vue b/pages/index.vue index f901723..c282de7 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -12,13 +12,171 @@ img-height="480" > + v-for="(item,index) in bannerList" + :key="index" + :img-src="item" + > + + + +
+
+
{{ $t('index.companyProfile') }}
+

{{ $t('index.corporateName') }}

+

{{ $t('index.companyProfileContent') }}

+ + {{ $t('common.readMore') }} + +
+
+ + +
+
+
{{ $t('index.popularProduct') }}
+

{{ $t('index.productDesc') }}

+
+ + + + + + {{ $t('common.readMore') }} +
+ + +
+
+
{{ $t('common.products') }}
+

{{ $t('common.companyProducts') }}

+ + {{ $t('common.readMore') }} +
+
+ + +
+
+
{{ $t('index.pressCenter') }}
+

{{ $t('index.realTimeNewsReadingOnline') }}

+
+
+ +
+

Advantages Of Front Shovel And Backhoe For Excavators

+

+ 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.... +

+
+ {{ $t('common.readMore') }} + - Aug 19, 2022- +
+
+
+
    +
  • +
    + + +
    +

    Advantages Of Front Shovel And Backhoe For Excavators

    +

    Everyone should be very familiar with excavators, but are you familiar with excavator buckets ....

    +
    + + +
    +
    +     +
    +
    • +
+
+ {{ $t('common.readMore') }} +
+
+ + +
+
+
{{ $t('index.joinOurNewsletter') }}
+

{{ $t('index.signUpOurNewsletter') }}

+ + +
+
@@ -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; } } diff --git a/plugins/swiper.js b/plugins/swiper.js deleted file mode 100644 index 67aedb6..0000000 --- a/plugins/swiper.js +++ /dev/null @@ -1,3 +0,0 @@ -import Vue from "vue"; -import swiper from "swiper"; -Vue.use(swiper); diff --git a/plugins/vue-awesome-swiper.js b/plugins/vue-awesome-swiper.js deleted file mode 100644 index 6a40f57..0000000 --- a/plugins/vue-awesome-swiper.js +++ /dev/null @@ -1,3 +0,0 @@ -import Vue from "vue"; -import VueAwesomeSwiper from "vue-awesome-swiper"; -Vue.use(VueAwesomeSwiper); diff --git a/plugins/vue2-viewer.js b/plugins/vue2-viewer.js deleted file mode 100644 index 1f8a758..0000000 --- a/plugins/vue2-viewer.js +++ /dev/null @@ -1,3 +0,0 @@ -import Vue from "vue"; -import vue2Viewer from "vue2-viewer"; -Vue.use(vue2Viewer);