绘制完成产品页面相关模块
This commit is contained in:
hejin
parent
4ff8fbe60a
commit
48a2972383
@ -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;
|
||||
@ -76,4 +77,4 @@
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: '>>';
|
||||
}
|
||||
}
|
||||
BIN
assets/image/backGroundImg/products-title.png
Normal file
BIN
assets/image/backGroundImg/products-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
assets/image/banner/products-banner.png
Normal file
BIN
assets/image/banner/products-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
assets/image/icon/email-highlight.png
Normal file
BIN
assets/image/icon/email-highlight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
BIN
assets/image/icon/msg-highlight.png
Normal file
BIN
assets/image/icon/msg-highlight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 B |
@ -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' },
|
||||
|
||||
@ -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.",
|
||||
|
||||
@ -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": "中车豪沃销售有限公司",
|
||||
|
||||
@ -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
|
||||
|
||||
55
package-lock.json
generated
55
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 新闻列表 -->
|
||||
<!-- 展览列表 -->
|
||||
<section class="exhibition-list">
|
||||
<nuxt-link
|
||||
class="exhibition-item box_shadow row mt-4"
|
||||
|
||||
44
pages/products.vue
Normal file
44
pages/products.vue
Normal file
@ -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>
|
||||
378
pages/products/_id.vue
Normal file
378
pages/products/_id.vue
Normal file
@ -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>
|
||||
74
pages/products/index.vue
Normal file
74
pages/products/index.vue
Normal file
@ -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>
|
||||
4
plugins/swiper.js
Normal file
4
plugins/swiper.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from "vue";
|
||||
import VueAwesomeSwiper from "vue-awesome-swiper";
|
||||
|
||||
Vue.use(VueAwesomeSwiper);
|
||||
4
plugins/vue-piczoom.js
Normal file
4
plugins/vue-piczoom.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Vue from "vue";
|
||||
import piczoom from "vue-photo-zoom-pro";
|
||||
|
||||
Vue.use(piczoom)
|
||||
Loading…
Reference in New Issue
Block a user