调整完成wz类型页面、询盘栏目类型页面、产品类型页面、询盘类型页面
This commit is contained in:
hejin
parent
24462c2abb
commit
3f4754c763
BIN
assets/image/icon/company.png
Normal file
BIN
assets/image/icon/company.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/image/icon/title.png
Normal file
BIN
assets/image/icon/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
@ -7,12 +7,13 @@
|
||||
<nav class="tree-box">
|
||||
<no-ssr>
|
||||
<el-tree
|
||||
v-if="refresh"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:props="props"
|
||||
current-node-key="43bb1e22091c0f674453c8db7e89b4a3"
|
||||
:current-node-key="currentNodeKey"
|
||||
@current-change="handleNodeClick"
|
||||
/>
|
||||
</no-ssr>
|
||||
@ -72,14 +73,20 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentNodeKey: ''
|
||||
currentNodeKey: '',
|
||||
refresh: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query.catgId': {
|
||||
handler (val) {
|
||||
this.refresh = false
|
||||
this.currentNodeKey = val
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.refresh = true
|
||||
})
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<dl class="introduce col-6 col-md-2">
|
||||
<dt>{{ $t('footer.contactUs') }}</dt>
|
||||
<dl>
|
||||
<div v-html="footerInfo.contactUs"></div>
|
||||
<div class="desc" v-html="footerInfo.contactUs"></div>
|
||||
</dl>
|
||||
<!-- <dl>
|
||||
Detailed address
|
||||
@ -90,6 +90,12 @@ export default {
|
||||
color: #ffffff;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
::v-deep .desc {
|
||||
p, a {
|
||||
color: #b0b6b9 !important;
|
||||
background-color: #152235 !important;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #b0b6b9;
|
||||
}
|
||||
|
||||
@ -130,6 +130,36 @@ nav {
|
||||
.mob-nav {
|
||||
height: 2.5rem;
|
||||
overflow-y: auto;
|
||||
@mixin activeNav {
|
||||
&:hover {
|
||||
position: relative;
|
||||
color: #015fe8;
|
||||
background: linear-gradient( 180deg, rgba(1,95,232,0) 0%, rgba(1,95,232,0.08) 100%);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: .125rem;
|
||||
background: #015fe8;
|
||||
}
|
||||
>a {
|
||||
color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link-item {
|
||||
height: 100%;
|
||||
padding: 0 1.4375rem;
|
||||
>a {
|
||||
color: #151516;
|
||||
}
|
||||
@include activeNav;
|
||||
}
|
||||
.active-item {
|
||||
@include activeNav;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
<div class="p-4">
|
||||
<img class="mb-3" src="../assets/image/mob-logo.png" alt="logo" />
|
||||
<el-tree
|
||||
:data="menuList"
|
||||
:data="menuTree"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
label: 'label'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
@ -22,36 +22,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'MenuDrawer',
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
menuList: [
|
||||
{ name: this.$t('menu.Home'), href: '/' },
|
||||
{ name: this.$t('menu.AboutUs'), href: '/abou-us' },
|
||||
{
|
||||
name: this.$t('menu.Products'),
|
||||
href: undefined,
|
||||
children: [
|
||||
{ name: this.$t('menu.Products'), href: '/products' },
|
||||
{ name: this.$t('menu.Products'), href: '/products' },
|
||||
{ name: this.$t('menu.Products'), href: '/products' },
|
||||
{ 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' },
|
||||
{ name: this.$t('menu.Feedback'), href: '/feedback' },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['menuTree'])
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
if (data.href) {
|
||||
this.$router.push(data.href)
|
||||
if (data.to) {
|
||||
this.$router.push(data.to)
|
||||
this.drawer = false
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
"menu": "Menu",
|
||||
"search": "Search",
|
||||
"next": "Next",
|
||||
"prev": "Prev"
|
||||
"prev": "Prev",
|
||||
"submitSuccess": "Submit success"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "Home",
|
||||
@ -86,6 +87,8 @@
|
||||
"way": "Find us through some contact information",
|
||||
"contact": "Contact",
|
||||
"name": "Your name",
|
||||
"title": "Title",
|
||||
"company": "Company",
|
||||
"mail": "Mail",
|
||||
"contactWay": "Phone/WhatsApp",
|
||||
"desc": "Please fill in the form with details so we can send you a quotation correctly",
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
"menu": "菜单",
|
||||
"search": "搜索",
|
||||
"next": "下一个",
|
||||
"prev": "上一个"
|
||||
"prev": "上一个",
|
||||
"submitSuccess": "提交成功"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "首页",
|
||||
@ -86,6 +87,8 @@
|
||||
"way": "通过一些联系方式找到我们",
|
||||
"contact": "联系",
|
||||
"name": "你的名字",
|
||||
"title": "你的职位",
|
||||
"company": "你的公司",
|
||||
"mail": "邮件",
|
||||
"contactWay": "电话/WhatsApp",
|
||||
"desc": "请详细填写表格，以便我们正确地向您发送报价",
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<!-- 个人中心 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'abou-us',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('aboutUs.AboutUs'),
|
||||
subTitle: this.$t('aboutUs.company'),
|
||||
img: require('../assets/image/banner/aboutus-banner.png')
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 新闻 -->
|
||||
<!-- 文章类型页面 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
class="col-md-3 mb-4 mb-md-0"
|
||||
:headerTitle="$t('news.allNews')"
|
||||
:treeData="categoryTree"
|
||||
baseUrl="/news"
|
||||
baseUrl="/article-page"
|
||||
/>
|
||||
<main class="col-md-9">
|
||||
<div class="pretty-header">
|
||||
@ -24,27 +24,30 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news',
|
||||
name: 'article-page',
|
||||
watchQuery: ['maxCatgId', 'title'],
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('news.news'),
|
||||
subTitle: this.$t('news.newsCenter'),
|
||||
img: require('../assets/image/banner/news-banner.png')
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
async asyncData({$axios, query}) {
|
||||
// 获取新闻分类
|
||||
const categoryTree = await $axios.$get('/web/prodCategory')
|
||||
|
||||
const categoryTree = await $axios.$get(`/web/prodCategory?catgId=${query.maxCatgId}`)
|
||||
const bannerTopOptions = {
|
||||
title: query.title,
|
||||
// subTitle: $t('news.newsCenter'),
|
||||
img: require('../assets/image/banner/news-banner.png')
|
||||
}
|
||||
|
||||
return {
|
||||
categoryTree
|
||||
categoryTree,
|
||||
bannerTopOptions
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t('seo.news.title'), // 页面标题
|
||||
title: this.bannerTopOptions.title, // 页面标题
|
||||
meta: [
|
||||
{
|
||||
hid: 'keywords',
|
||||
@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<!-- 新闻详情 -->
|
||||
<div class="news-info">
|
||||
<div class="article-page-info">
|
||||
<div class="info-top">
|
||||
<h2 class="news-title">{{ detais.title }}</h2>
|
||||
<p class="news-date">{{ detais.createTime }}</p>
|
||||
<h2 class="article-page-title">{{ detais.title }}</h2>
|
||||
<p class="article-page-date">{{ detais.createTime }}</p>
|
||||
</div>
|
||||
|
||||
<div class="news-content">
|
||||
<div class="article-page-content">
|
||||
<div class="rich-text" v-html="detais.content"></div>
|
||||
<ContactFooter />
|
||||
<div class="guide">
|
||||
<nuxt-link :to="`/news/${prevNews.id}`" v-if="prevNews">
|
||||
{{ $t('common.prev') }}: {{ prevNews.title }}
|
||||
<nuxt-link :to="`/article-page/${prevarticle.id}`" v-if="prevarticle">
|
||||
{{ $t('common.prev') }}: {{ prevarticle.title }}
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link :to="`/news/${nextNews.id}`" v-if="nextNews">
|
||||
{{ $t('common.next') }}: {{ nextNews.title }}
|
||||
<nuxt-link :to="`/article-page/${nextarticle.id}`" v-if="nextarticle">
|
||||
{{ $t('common.next') }}: {{ nextarticle.title }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="related-news mb-4">
|
||||
<!-- <div class="related-article-page mb-4">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('news.relatedNews') }}</h2>
|
||||
<h2>{{ $t('article.relatedarticle') }}</h2>
|
||||
</div>
|
||||
<nuxt-link
|
||||
class="news-related-item box_shadow"
|
||||
class="article-page-related-item box_shadow"
|
||||
to="/"
|
||||
v-for="item in 6"
|
||||
:key="item"
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news-info',
|
||||
name: 'article-page-info',
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -86,8 +86,8 @@ export default {
|
||||
let {
|
||||
data:{
|
||||
busiProdNew:detais,
|
||||
next:nextNews,
|
||||
previous:prevNews,
|
||||
next:nextarticle,
|
||||
previous:prevarticle,
|
||||
randomList
|
||||
}
|
||||
} = await $axios.get(`/web/prodNewsInfo?id=${params.id}`)
|
||||
@ -99,8 +99,8 @@ export default {
|
||||
|
||||
return {
|
||||
detais,
|
||||
nextNews,
|
||||
prevNews,
|
||||
nextarticle,
|
||||
prevarticle,
|
||||
relatedProductList
|
||||
}
|
||||
},
|
||||
@ -128,24 +128,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news-info {
|
||||
.article-page-info {
|
||||
.info-top {
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 1px solid #d8dde1;
|
||||
.news-title {
|
||||
.article-page-title {
|
||||
margin: 1.5625rem 0;
|
||||
margin-bottom: .9375rem;
|
||||
color: #444444;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.news-date {
|
||||
.article-page-date {
|
||||
color: #9e9e9e;
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.news-content {
|
||||
.article-page-content {
|
||||
margin-bottom: 2.6875rem;
|
||||
.guide {
|
||||
padding-top: .625rem;
|
||||
@ -157,7 +157,7 @@ export default {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.related-news {
|
||||
.related-article-page {
|
||||
.news-related-item {
|
||||
padding: 1.125rem 0;
|
||||
display: flex;
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<!-- 新闻列表 -->
|
||||
<section class="news-list">
|
||||
<!-- 文章模块 -->
|
||||
<section class="article-page-list">
|
||||
<nuxt-link
|
||||
class="news-item box_shadow row mt-4"
|
||||
:to="`/news/${item.id}`"
|
||||
class="article-page-item box_shadow row mt-4"
|
||||
:to="`/article-page/${item.id}`"
|
||||
v-for="item in pordObj.records"
|
||||
:key="item.id"
|
||||
>
|
||||
@ -17,7 +17,7 @@
|
||||
<h3 class="title text-ellipsis">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="news-content text-ellipsis" v-html="item.description"></p>
|
||||
<p class="article-page-content text-ellipsis" v-html="item.description"></p>
|
||||
<div>
|
||||
<span>{{ item.createTime }}</span>
|
||||
<img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news-list',
|
||||
watchQuery: ['pageNum', 'catgId'],
|
||||
name: 'article-page-list',
|
||||
watchQuery: ['pageNum', 'catgId', 'maxCatgId'],
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
let params = {
|
||||
pageNum: query.pageNum || 1,
|
||||
pageSize: 6,
|
||||
catgId: query.catgId || '',
|
||||
catgId: query.catgId || query.maxCatgId ||'',
|
||||
}
|
||||
let {data: pordObj} = await $axios('/web/newsPageList', {params})
|
||||
|
||||
@ -60,9 +60,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.news-list {
|
||||
.article-page-list {
|
||||
box-sizing: border-box;
|
||||
.news-item {
|
||||
.article-page-item {
|
||||
margin: 0;
|
||||
height: min-content;
|
||||
min-height: 12.875rem;
|
||||
@ -75,7 +75,7 @@ export default {
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.news-content {
|
||||
.article-page-content {
|
||||
margin: 1.25rem 0;
|
||||
height: 5rem;
|
||||
color: #878b90;
|
||||
@ -1,240 +0,0 @@
|
||||
<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-grow :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 {
|
||||
margin-top: -5.625rem;
|
||||
}
|
||||
|
||||
// 特殊样式小屏幕处理
|
||||
@media screen and (max-width:400px) {
|
||||
.form-container {
|
||||
width: 100% !important;
|
||||
.header {
|
||||
.title {
|
||||
margin-top: .625rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.form-box {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
.footer-img {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<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('exhibition.exhibitionCenter')"/>
|
||||
<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: 'exhibition',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('exhibition.exhibition'),
|
||||
subTitle: this.$t('exhibition.exhibitionCenter'),
|
||||
img: require('../assets/image/banner/news-banner.png')
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<!-- 展览详情 -->
|
||||
<div class="exhibition-info">
|
||||
<div class="info-top">
|
||||
<h2 class="exhibition-title">How To Maintain The Chassis Of A Truck?</h2>
|
||||
<p class="exhibition-date">- Oct 25, 2024-</p>
|
||||
</div>
|
||||
|
||||
<div class="exhibition-content">
|
||||
<div></div>
|
||||
<ContactFooter />
|
||||
<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="related-exhibition mb-4">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('exhibition.relatedExhibition') }}</h2>
|
||||
</div>
|
||||
<nuxt-link
|
||||
class="exhibition-related-item box_shadow"
|
||||
to="/"
|
||||
v-for="item in 6"
|
||||
:key="item"
|
||||
>
|
||||
<p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
|
||||
<span>- Oct 25, 2024-</span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
<div class="related-products">
|
||||
<div class="pretty-header">
|
||||
<h2>{{ $t('exhibition.relatedProducts') }}</h2>
|
||||
</div>
|
||||
<b-carousel
|
||||
class="mt-3"
|
||||
id="carousel-1"
|
||||
: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-4 mb-4" v-for="son in 3" :key="son">
|
||||
<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>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>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'exhibition-info',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exhibition-info {
|
||||
.info-top {
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: 1px solid #d8dde1;
|
||||
.exhibition-title {
|
||||
margin: 1.5625rem 0;
|
||||
margin-bottom: .9375rem;
|
||||
color: #444444;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.exhibition-date {
|
||||
color: #9e9e9e;
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.exhibition-content {
|
||||
margin-bottom: 2.6875rem;
|
||||
.guide {
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #515760;
|
||||
border-top: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.related-exhibition {
|
||||
.exhibition-related-item {
|
||||
padding: 1.125rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
p {
|
||||
flex: 1;
|
||||
color: #444444;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
span {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.related-products {
|
||||
#carousel-1 {
|
||||
@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 {
|
||||
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;
|
||||
font-size: .875rem;
|
||||
}
|
||||
p {
|
||||
color: #878b90;
|
||||
}
|
||||
.view-details {
|
||||
margin: 0 auto;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<!-- 展览列表 -->
|
||||
<section class="exhibition-list">
|
||||
<nuxt-link
|
||||
class="exhibition-item box_shadow row mt-4"
|
||||
to="/exhibition/123123"
|
||||
v-for="item in 6"
|
||||
:key="item"
|
||||
>
|
||||
<b-img
|
||||
class="col-md-4"
|
||||
src="~assets/image/banner/home-pord1.png"
|
||||
alt="Responsive image"
|
||||
>
|
||||
</b-img>
|
||||
<article class="col-md-8">
|
||||
<h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
|
||||
<p class="exhibition-content text-ellipsis ">
|
||||
When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
|
||||
</p>
|
||||
<div>
|
||||
<span>- Aug 19, 2022-</span>
|
||||
<img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
|
||||
</div>
|
||||
</article>
|
||||
</nuxt-link>
|
||||
|
||||
<SeoPagination class="mt-4" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'exhibition-list',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.exhibition-list {
|
||||
box-sizing: border-box;
|
||||
.exhibition-item {
|
||||
margin: 0;
|
||||
height: min-content;
|
||||
min-height: 12.875rem;
|
||||
border: 1px solid #e6e8ec;
|
||||
article {
|
||||
padding: 1.125rem;
|
||||
font-size: .875rem;
|
||||
.title {
|
||||
margin-top: .9375rem;
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.exhibition-content {
|
||||
margin: 1.25rem 0;
|
||||
height: 5rem;
|
||||
color: #878b90;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #878b90;
|
||||
img {
|
||||
width: 1.6875rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -69,7 +69,7 @@
|
||||
<!-- <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="/">
|
||||
<nuxt-link class="view-details" :to="`/products/${son.id}?catgId=${son.catgId}`">
|
||||
{{ $t('common.viewDetails') }}
|
||||
<img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
|
||||
</nuxt-link>
|
||||
@ -80,7 +80,7 @@
|
||||
</template>
|
||||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
<nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<nuxt-link class="more box_shadow" to="/products">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</section>
|
||||
|
||||
<!-- Products -->
|
||||
@ -91,7 +91,7 @@
|
||||
<ul style="margin-top: 1.25rem;" class="row pl-0">
|
||||
<li class="col-12 col-md-6 mb-4" v-for="item in productTopList" :key="item.id">
|
||||
<article class="products-item box_shadow">
|
||||
<nuxt-link to="/" class="row">
|
||||
<nuxt-link :to="`/products/${item.id}?catgId=${item.catgId}`" class="row">
|
||||
<div class="col-7 col-md-6 pr-0">
|
||||
<b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
|
||||
</div>
|
||||
@ -111,7 +111,7 @@
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<nuxt-link class="more box_shadow" to="/products">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -121,30 +121,31 @@
|
||||
<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 alt="news"></b-img>
|
||||
<article class="pc-news box_shadow col-md-6 d-none d-md-block" v-if="hotNewsList.length">
|
||||
<b-img :src="hotNewsList[0].mainPic" fluid-grow :alt="hotNewsList[0].title"></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....
|
||||
<h4 class="text-ellipsis">{{ hotNewsList[0].title }}</h4>
|
||||
<p class="text-ellipsis" style="-webkit-line-clamp: 3;">
|
||||
{{ hotNewsList[0].description }}
|
||||
</p>
|
||||
<div class="pc-news-footer">
|
||||
<nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<span>- Aug 19, 2022-</span>
|
||||
<span>{{ hotNewsList[0].publicDate}}</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">
|
||||
<li class="new-item box_shadow mb-3" v-for="item in hotNewsList.slice(1, 4)" :key="item.id">
|
||||
<article>
|
||||
<nuxt-link class="row" to="/">
|
||||
<b-img class="col-5" src="~assets/image/banner/home-pord1.png" fluid-grow alt="news"></b-img>
|
||||
<nuxt-link class="row" :to="`/article-page/${item.id}`">
|
||||
<b-img class="col-5" :src="item.mainPic" fluid-grow :alt="item.title"></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>
|
||||
<h4 class="text-ellipsis">{{ item.title }}</h4>
|
||||
<p class="text-ellipsis" style="-webkit-line-clamp: 3;">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
<footer class="d-flex justify-content-between align-items-center">
|
||||
<time>- Aug 19, 2022-</time>
|
||||
<time>{{ item.publicDate }}</time>
|
||||
<img width="27" src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')" />
|
||||
</footer>
|
||||
</div>
|
||||
@ -153,7 +154,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<nuxt-link class="more box_shadow mb-4" to="/">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<nuxt-link class="more box_shadow mb-4" to="/article-page">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -253,11 +254,15 @@ export default {
|
||||
}
|
||||
// 普通产品前十
|
||||
const {data: productTopList} = await $axios.get('/web/product')
|
||||
// 热门新闻
|
||||
const { data: hotNewsList } = await $axios.get('/web/hotNews')
|
||||
|
||||
return {
|
||||
bannerList,
|
||||
companyInfo,
|
||||
hotProductList,
|
||||
productTopList
|
||||
productTopList,
|
||||
hotNewsList
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 联系我们 -->
|
||||
<!-- 询盘类型页面 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<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('feedback.feedback') }}</h2>
|
||||
<h2 class="d-none d-md-block">{{ pageInfo.title }}</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">
|
||||
@ -42,6 +42,7 @@
|
||||
<b-form-group
|
||||
id="input-name"
|
||||
label-for="input-name"
|
||||
v-if="formConfig.name"
|
||||
:invalid-feedback="$t('contactUs.name')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
@ -53,7 +54,47 @@
|
||||
<b-form-input
|
||||
id="input-name"
|
||||
v-model="dataForm.name"
|
||||
required
|
||||
:required="formConfig.nameMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-title"
|
||||
label-for="input-title"
|
||||
v-if="formConfig.title"
|
||||
:invalid-feedback="$t('contactUs.title')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.title') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-title"
|
||||
v-model="dataForm.title"
|
||||
:required="formConfig.titleMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-company"
|
||||
label-for="input-company"
|
||||
v-if="formConfig.company"
|
||||
:invalid-feedback="$t('contactUs.company')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.company') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-company"
|
||||
v-model="dataForm.company"
|
||||
:required="formConfig.companyMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -61,6 +102,7 @@
|
||||
<b-form-group
|
||||
id="input-mail"
|
||||
label-for="input-mail"
|
||||
v-if="formConfig.email"
|
||||
:invalid-feedback="$t('contactUs.mail')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
@ -73,7 +115,7 @@
|
||||
id="input-mail"
|
||||
type="email"
|
||||
v-model="dataForm.email"
|
||||
required
|
||||
:required="formConfig.emailMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -82,6 +124,7 @@
|
||||
id="input-contactWay"
|
||||
label-for="input-contactWay"
|
||||
:invalid-feedback="$t('contactUs.contactWay')"
|
||||
v-if="formConfig.tel"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
@ -91,8 +134,8 @@
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-contactWay"
|
||||
v-model="dataForm.phone"
|
||||
required
|
||||
v-model="dataForm.tel"
|
||||
:required="formConfig.telMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -105,12 +148,12 @@
|
||||
<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>
|
||||
<h6 class="label-text">{{ formConfig.content }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-textarea
|
||||
id="input-desc"
|
||||
v-model="dataForm.message"
|
||||
v-model="dataForm.content"
|
||||
rows="3"
|
||||
>
|
||||
</b-form-textarea>
|
||||
@ -136,24 +179,58 @@ export default {
|
||||
name: 'feedback',
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('feedback.feedback'),
|
||||
subTitle: this.$t('feedback.way'),
|
||||
img: require('../assets/image/banner/aboutus-banner.png')
|
||||
},
|
||||
dataForm: {
|
||||
name: '',
|
||||
title: '',
|
||||
company: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
tel: '',
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async asyncData({ $axios, query }) {
|
||||
const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
|
||||
let bannerTopOptions = {
|
||||
title: pageInfo.title,
|
||||
subTitle: pageInfo.description,
|
||||
img: require('../assets/image/banner/aboutus-banner.png')
|
||||
}
|
||||
|
||||
const { data: formConfig } = await $axios.get('/web/inquirySet')
|
||||
|
||||
return {
|
||||
pageInfo,
|
||||
bannerTopOptions,
|
||||
formConfig
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.pageInfo.title,
|
||||
meta: [
|
||||
{
|
||||
hid: 'keywords',
|
||||
name: 'keywords',
|
||||
content: this.pageInfo.keyword
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: this.pageInfo.description
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
e.preventDefault()
|
||||
console.log(this.dataForm);
|
||||
|
||||
this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
|
||||
this.$message.success(this.$t('common.submitSuccess'))
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 新闻 -->
|
||||
<!-- 产品类型页面 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
|
||||
@ -25,26 +25,29 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'products',
|
||||
watchQuery: ['maxCatgId', 'title'],
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('products.products'),
|
||||
subTitle: this.$t('products.allProducts'),
|
||||
img: require('../assets/image/banner/products-banner.png')
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
async asyncData({$axios,query}) {
|
||||
// 获取新闻分类
|
||||
const categoryTree = await $axios.$get('/web/prodCategory?catgId=660179025d0e2e0e4263db0eec86a8cc')
|
||||
const categoryTree = await $axios.$get(`/web/prodCategory?catgId=${query.maxCatgId}`)
|
||||
const bannerTopOptions = {
|
||||
title: query.title,
|
||||
// subTitle: this.$t('products.allProducts'),
|
||||
img: require('../assets/image/banner/products-banner.png')
|
||||
}
|
||||
|
||||
return {
|
||||
categoryTree
|
||||
categoryTree,
|
||||
bannerTopOptions
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t('seo.product.title'), // 页面标题
|
||||
title: this.bannerTopOptions.title, // 页面标题
|
||||
meta: [
|
||||
{
|
||||
hid: 'keywords',
|
||||
|
||||
@ -72,6 +72,7 @@
|
||||
<b-form-group
|
||||
id="input-name"
|
||||
label-for="input-name"
|
||||
v-if="formConfig.name"
|
||||
:invalid-feedback="$t('contactUs.name')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
@ -83,7 +84,47 @@
|
||||
<b-form-input
|
||||
id="input-name"
|
||||
v-model="dataForm.name"
|
||||
required
|
||||
:required="formConfig.nameMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-title"
|
||||
label-for="input-title"
|
||||
v-if="formConfig.title"
|
||||
:invalid-feedback="$t('contactUs.title')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/title.png" fluid :alt="$t('contactUs.title')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.title') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-title"
|
||||
v-model="dataForm.title"
|
||||
:required="formConfig.titleMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
id="input-company"
|
||||
label-for="input-company"
|
||||
v-if="formConfig.company"
|
||||
:invalid-feedback="$t('contactUs.company')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
<b-img class="mr-1" src="~assets/image/icon/company.png" fluid :alt="$t('contactUs.company')"></b-img>
|
||||
<h6 class="label-text">{{ $t('contactUs.company') }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-company"
|
||||
v-model="dataForm.company"
|
||||
:required="formConfig.companyMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -91,6 +132,7 @@
|
||||
<b-form-group
|
||||
id="input-mail"
|
||||
label-for="input-mail"
|
||||
v-if="formConfig.email"
|
||||
:invalid-feedback="$t('contactUs.mail')"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
@ -103,7 +145,7 @@
|
||||
id="input-mail"
|
||||
type="email"
|
||||
v-model="dataForm.email"
|
||||
required
|
||||
:required="formConfig.emailMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -112,6 +154,7 @@
|
||||
id="input-contactWay"
|
||||
label-for="input-contactWay"
|
||||
:invalid-feedback="$t('contactUs.contactWay')"
|
||||
v-if="formConfig.tel"
|
||||
>
|
||||
<template v-solt:lable>
|
||||
<div class="mb-2 d-flex align-items-center">
|
||||
@ -121,8 +164,8 @@
|
||||
</template>
|
||||
<b-form-input
|
||||
id="input-contactWay"
|
||||
v-model="dataForm.phone"
|
||||
required
|
||||
v-model="dataForm.tel"
|
||||
:required="formConfig.telMust"
|
||||
>
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
@ -135,12 +178,12 @@
|
||||
<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>
|
||||
<h6 class="label-text">{{ formConfig.content }}</h6>
|
||||
</div>
|
||||
</template>
|
||||
<b-form-textarea
|
||||
id="input-desc"
|
||||
v-model="dataForm.message"
|
||||
v-model="dataForm.content"
|
||||
rows="3"
|
||||
>
|
||||
</b-form-textarea>
|
||||
@ -181,9 +224,11 @@ export default {
|
||||
currentImgUrl: '',
|
||||
dataForm: {
|
||||
name: '',
|
||||
title: '',
|
||||
company: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
tel: '',
|
||||
content: ''
|
||||
},
|
||||
swiperOptions: {
|
||||
slidesPerView :'auto',
|
||||
@ -209,13 +254,16 @@ export default {
|
||||
let picsArr = pics ? pics.split(',') : [];
|
||||
let productsImages = [prodDetail.mainPic, ...picsArr];
|
||||
let currentImgUrl = productsImages[0];
|
||||
|
||||
const { data: formConfig } = await $axios.get('/web/inquirySet')
|
||||
|
||||
return {
|
||||
prodDetail,
|
||||
currentImgUrl,
|
||||
productsImages,
|
||||
nextNews,
|
||||
prevNews
|
||||
prevNews,
|
||||
formConfig
|
||||
}
|
||||
},
|
||||
head() {
|
||||
@ -238,14 +286,17 @@ export default {
|
||||
methods: {
|
||||
onSubmit(e) {
|
||||
e.preventDefault()
|
||||
console.log(this.dataForm);
|
||||
this.$axios.post('/web/inquirySave', this.dataForm).then(() => {
|
||||
this.$message.success(this.$t('common.submitSuccess'))
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1500)
|
||||
})
|
||||
},
|
||||
/**打开聊天窗口，并建立连接*/
|
||||
chat(){
|
||||
this.$refs.chatFrom.show()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<li class="col-12 col-md-4" v-for="item in pordObj.records" :key="item.id">
|
||||
<nuxt-link
|
||||
class="products-item box_shadow mt-2"
|
||||
:to="`/products/${item.id}`"
|
||||
:to="`/products/${item.id}?catgId=${item.catgId}&maxCatgId=${maxCatgId}`"
|
||||
>
|
||||
<article class="product-card box_shadow">
|
||||
<img style="height: 200px;" class="img_reset" :src="item.mainPic" alt="product"></img>
|
||||
@ -27,7 +27,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'products-list',
|
||||
watchQuery: ['pageNum', 'catgId'],
|
||||
watchQuery: ['pageNum', 'catgId', 'maxCatgId'],
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
@ -39,12 +39,13 @@ export default {
|
||||
let params = {
|
||||
pageNum: query.pageNum || 1,
|
||||
pageSize: 9,
|
||||
catgId: query.catgId || '',
|
||||
catgId: query.catgId || query.maxCatgId ||'',
|
||||
}
|
||||
let {data: pordObj} = await $axios('/web/prodPageList', {params})
|
||||
|
||||
return {
|
||||
pordObj
|
||||
pordObj,
|
||||
maxCatgId: query.maxCatgId || '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<!-- 单页面模块 -->
|
||||
<!-- 单页面类型页面 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
<div class="container rich-text" v-html="pageInfo.content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,13 +10,14 @@
|
||||
|
||||
export default {
|
||||
name: 'separate',
|
||||
watchQuery: ['maxCatgId'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
async asyncData({$axios,query}) {
|
||||
const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.catgId}`)
|
||||
const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
|
||||
|
||||
let bannerTopOptions = {
|
||||
title: pageInfo.title,
|
||||
|
||||
@ -8,6 +8,12 @@ export default function ({redirect, $axios, app}) {
|
||||
...config.params,
|
||||
tenantId: 'main'
|
||||
}
|
||||
if (config.method === 'post') {
|
||||
config.data = {
|
||||
...config.data,
|
||||
tenantId: 'main'
|
||||
}
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
|
||||
@ -14,7 +14,8 @@ import {
|
||||
Footer,
|
||||
Row,
|
||||
Col,
|
||||
Avatar
|
||||
Avatar,
|
||||
Message
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.use(Tree)
|
||||
@ -30,4 +31,6 @@ Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Avatar)
|
||||
Vue.use(Avatar)
|
||||
|
||||
Vue.prototype.$message = Message
|
||||
@ -1,8 +1,8 @@
|
||||
const routeMap = {
|
||||
'dym': 'separate', // 单页面
|
||||
'xp': 'inquiry', // 询盘栏目
|
||||
'wz': 'article', // 文章栏目
|
||||
'cp': 'product' // 产品栏目
|
||||
'wz': 'article-page', // 文章栏目
|
||||
'cp': 'products' // 产品栏目
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
@ -28,9 +28,9 @@ export const mutations = {
|
||||
const fn = (list) => {
|
||||
list.forEach(item => {
|
||||
if (item.catgLevel===1) {
|
||||
item.to = `/${routeMap[item.catgType]}?catgId=${item.id}`
|
||||
item.to = `/${routeMap[item.catgType]}?maxCatgId=${item.id}&title=${item.label}`
|
||||
} else {
|
||||
item.to = `/${routeMap[item.catgType]}/${item.id}?catgId=${item.maxParentId}`
|
||||
item.to = `/${routeMap[item.catgType]}?&catgId=${item.id}&maxCatgId=${item.maxParentId}&title=${item.label}`
|
||||
}
|
||||
if (item.children.length) {
|
||||
fn(item.children)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user