Merge branch 'master' of http://124.222.105.7:3000/dianliang/dl_site_nuxt
# Conflicts: # env.js
This commit is contained in:
PQZ
commit
08114bf087
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/language.png
Normal file
BIN
assets/image/icon/language.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 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,14 @@
|
||||
<nav class="tree-box">
|
||||
<no-ssr>
|
||||
<el-tree
|
||||
v-if="refresh"
|
||||
:data="treeData"
|
||||
:empty-text="$t('common.empty')"
|
||||
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 +74,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
|
||||
@ -16,34 +16,30 @@
|
||||
</dl>
|
||||
|
||||
<dl class="introduce col-6 col-md-2">
|
||||
<dt>Contact Us</dt>
|
||||
<dt>{{ $t('menu.ContactUs') }}</dt>
|
||||
<dl>
|
||||
<nuxt-link to="/abou-us">About Us</nuxt-link>
|
||||
<nuxt-link to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">
|
||||
{{ $t('menu.AboutUs') }}
|
||||
</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/contact-us">Contact us</nuxt-link>
|
||||
<nuxt-link to="/separate?maxCatgId=05948baff5643bcba547252f76c26805&title=Contact%20Us">
|
||||
{{ $t('menu.ContactUs') }}
|
||||
</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/feedback">Feedback</nuxt-link>
|
||||
<nuxt-link to="/inquiry?maxCatgId=ad42ad11ce190771d202d5a8ae597b99&title=Feedback">
|
||||
{{ $t('menu.Feedback') }}
|
||||
</nuxt-link>
|
||||
</dl>
|
||||
</dl>
|
||||
|
||||
<dl class="introduce col-6 col-md-3">
|
||||
<dt>Categories</dt>
|
||||
<dl>
|
||||
<nuxt-link to="/">Trailer</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/">Truck</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/">Trailer Parts</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/">Truck Parts</nuxt-link>
|
||||
</dl>
|
||||
<dl>
|
||||
<nuxt-link to="/">Used/Second Hand Tru</nuxt-link>
|
||||
<dt>{{ $t('common.Categories') }}</dt>
|
||||
<dl v-for="(item,index) in footerPordCategory" :key="index">
|
||||
<nuxt-link :to="`/products?catgId=${item.id}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`">
|
||||
{{ item.label }}
|
||||
</nuxt-link>
|
||||
</dl>
|
||||
</dl>
|
||||
|
||||
@ -73,7 +69,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['footerInfo'])
|
||||
...mapState(['footerInfo','footerPordCategory'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -90,6 +86,12 @@ export default {
|
||||
color: #ffffff;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
::v-deep .desc {
|
||||
p, a {
|
||||
color: #b0b6b9 !important;
|
||||
background-color: #152235 !important;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #b0b6b9;
|
||||
}
|
||||
|
||||
97
components/header-nav.vue
Normal file
97
components/header-nav.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div
|
||||
class="h-100"
|
||||
:class="level === 0 ? 'd-flex align-items-center' : ''"
|
||||
>
|
||||
<div
|
||||
v-for="(item,index) in nodes"
|
||||
:key="index"
|
||||
class="nav-link-item d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<nuxt-link
|
||||
:to="item.to"
|
||||
v-if="item.children.length === 0"
|
||||
>
|
||||
{{ item.label }}
|
||||
</nuxt-link>
|
||||
<b-nav-item-dropdown
|
||||
v-else
|
||||
:id="item.id"
|
||||
:text="item.label"
|
||||
right
|
||||
@show="isDropdown=true"
|
||||
v-model="isDropdown"
|
||||
@hide="dropdownHide($event, item)"
|
||||
>
|
||||
<header-nav
|
||||
:nodes="item.children"
|
||||
:level="level + 1"
|
||||
/>
|
||||
</b-nav-item-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'HeaderNav',
|
||||
props: {
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
nodes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDropdown: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropdownHide(e, item) {
|
||||
if (this.isDropdown) {
|
||||
e.preventDefault()
|
||||
this.isDropdown = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@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>
|
||||
@ -1,17 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="header-box d-none d-md-flex justify-content-between align-items-center">
|
||||
<img src="~assets/image/logo.png" width="265px" :alt="$t('index.corporateName')">
|
||||
<nuxt-link to="/">
|
||||
<img src="~assets/image/logo.png" width="265px" :alt="$t('index.corporateName')"></img>
|
||||
</nuxt-link>
|
||||
|
||||
<nav class="d-md-flex align-items-center">
|
||||
<nuxt-link
|
||||
class="nav-link-item d-flex align-items-center"
|
||||
:to="item.href"
|
||||
v-for="(item,index) in menuList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</nuxt-link>
|
||||
<HeaderNav :nodes="menuTree" />
|
||||
</nav>
|
||||
|
||||
<div class="search-box">
|
||||
@ -20,8 +15,12 @@
|
||||
class="search-input"
|
||||
v-model="searchVal"
|
||||
placeholder="SEARCH"
|
||||
@keydown.enter="search"
|
||||
>
|
||||
</b-form-input>
|
||||
<nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
|
||||
<img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -34,6 +33,7 @@
|
||||
class="search-input"
|
||||
v-model="searchVal"
|
||||
placeholder="SEARCH"
|
||||
@keydown.enter="search"
|
||||
>
|
||||
</b-form-input>
|
||||
<img
|
||||
@ -42,17 +42,20 @@
|
||||
:alt="$t('common.menu')"
|
||||
@click="$refs.menuDrawerRef.drawer=true"
|
||||
/>
|
||||
<nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
|
||||
<img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="mob-nav hide_scroll_bar d-flex align-items-center">
|
||||
<nuxt-link
|
||||
class="nav-link-item d-flex align-items-center"
|
||||
:to="item.href"
|
||||
v-for="(item,index) in menuList"
|
||||
:to="item.to"
|
||||
v-for="(item,index) in menuTree"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
{{ item.label }}
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
</header>
|
||||
@ -62,23 +65,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import MenuDrawer from './menu-drawer.vue';
|
||||
import HeaderNav from './header-nav.vue';
|
||||
|
||||
export default {
|
||||
components: { MenuDrawer },
|
||||
components: {
|
||||
MenuDrawer,
|
||||
HeaderNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchVal: '',
|
||||
menuList: [
|
||||
{ name: this.$t('menu.Home'), href: '/' },
|
||||
{ name: this.$t('menu.AboutUs'), href: '/abou-us' },
|
||||
{ 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' },
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query.str': {
|
||||
handler(val) {
|
||||
this.searchVal = val;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['menuTree'])
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.$router.push({ path: '/search-result', query: { str: this.searchVal } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -110,38 +126,8 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
height: 100%;
|
||||
.nav-link-item {
|
||||
height: 100%;
|
||||
padding: 0 1.4375rem;
|
||||
>a {
|
||||
color: #151516;
|
||||
}
|
||||
@include activeNav;
|
||||
}
|
||||
.active-item {
|
||||
@include activeNav;
|
||||
}
|
||||
}
|
||||
.header-box {
|
||||
width: 100%;
|
||||
@ -167,6 +153,35 @@ 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;
|
||||
white-space: nowrap;
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,7 @@ export default {
|
||||
'$route': {
|
||||
handler(val) {
|
||||
this.currentPage = val.query[this.pageKey] || 1
|
||||
this.queryStr = ''
|
||||
for (let key in val.query) {
|
||||
if (key!==this.pageKey) {
|
||||
this.queryStr = `${this.queryStr}&${key}=${val.query[key]}`
|
||||
|
||||
4
env.js
4
env.js
@ -8,8 +8,8 @@ module.exports = {
|
||||
// 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
|
||||
dev: {
|
||||
MODE: 'dev',
|
||||
// VUE_APP_API_URL: 'http://122.51.230.86:8099/',
|
||||
VUE_APP_API_URL: 'http://192.168.1.9:8099/',
|
||||
VUE_APP_API_URL: 'http://122.51.230.86:8099/',
|
||||
// VUE_APP_API_URL: 'http://192.168.1.9:8099/',
|
||||
VUE_APP_WEBSOCKET: 'ws://localhost:8099/ws/asset/'
|
||||
},
|
||||
// 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空
|
||||
|
||||
@ -29,7 +29,12 @@
|
||||
"menu": "Menu",
|
||||
"search": "Search",
|
||||
"next": "Next",
|
||||
"prev": "Prev"
|
||||
"prev": "Prev",
|
||||
"submitSuccess": "Submit success",
|
||||
"fulltextsearch": "Full text search",
|
||||
"language": "Language",
|
||||
"Categories": "Categories",
|
||||
"empty": "No data available at the moment"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "Home",
|
||||
@ -86,6 +91,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,12 @@
|
||||
"menu": "菜单",
|
||||
"search": "搜索",
|
||||
"next": "下一个",
|
||||
"prev": "上一个"
|
||||
"prev": "上一个",
|
||||
"submitSuccess": "提交成功",
|
||||
"fulltextsearch": "全站搜索",
|
||||
"language": "语言",
|
||||
"Categories": "分类",
|
||||
"empty": "暂无数据"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "首页",
|
||||
@ -86,6 +91,8 @@
|
||||
"way": "通过一些联系方式找到我们",
|
||||
"contact": "联系",
|
||||
"name": "你的名字",
|
||||
"title": "你的职位",
|
||||
"company": "你的公司",
|
||||
"mail": "邮件",
|
||||
"contactWay": "电话/WhatsApp",
|
||||
"desc": "请详细填写表格，以便我们正确地向您发送报价",
|
||||
|
||||
@ -4,4 +4,6 @@ export default async function ({
|
||||
}) {
|
||||
const footerInfo = await $axios.$get('/web/footerInfo')
|
||||
store.commit('SET_FOOTER_INFO', footerInfo)
|
||||
const pordCategory = await $axios.$get('/web/prodCategory?catgId=660179025d0e2e0e4263db0eec86a8cc')
|
||||
store.commit('SET_FOOTER_PRODCAT', pordCategory)
|
||||
}
|
||||
7
middleware/header.js
Normal file
7
middleware/header.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default async function ({
|
||||
$axios,
|
||||
store
|
||||
}) {
|
||||
const menuTree = await $axios.$get('/web/category')
|
||||
store.commit('SET_MENU_TREE', menuTree)
|
||||
}
|
||||
@ -4,10 +4,11 @@ export default function ({
|
||||
store,
|
||||
route,
|
||||
query,
|
||||
$cookies,
|
||||
error,
|
||||
redirect
|
||||
}) {
|
||||
const defaultLocale = app.i18n.fallbackLocale
|
||||
const defaultLocale = $cookies.get('lang') || app.i18n.fallbackLocale
|
||||
if (isHMR) {
|
||||
return
|
||||
}
|
||||
@ -15,6 +16,7 @@ export default function ({
|
||||
if (!store.state.locales.includes(locale)) {
|
||||
return error({ message: 'This page could not be found.', statusCode: 404 })
|
||||
}
|
||||
|
||||
store.commit('SET_LANG', locale)
|
||||
app.i18n.locale = store.state.locale
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
const axios = require('axios')
|
||||
const env = require('./env');
|
||||
const webpack = require('webpack')
|
||||
|
||||
@ -73,12 +74,46 @@ export default {
|
||||
'cookie-universal-nuxt',
|
||||
'nuxt-sass-resources-loader',
|
||||
'bootstrap-vue/nuxt',
|
||||
'@nuxtjs/sitemap'
|
||||
],
|
||||
bootstrapVue: {
|
||||
icons: false
|
||||
},
|
||||
sitemap: {
|
||||
hostname: 'http://122.51.230.86:8099',
|
||||
sitemaps: [
|
||||
{
|
||||
path: '/sitemap.xml',
|
||||
routes: [
|
||||
'/pages.xml',
|
||||
'/products.xml',
|
||||
'/inquiry.xml',
|
||||
'/article-page.xml',
|
||||
],
|
||||
gzip: true
|
||||
},
|
||||
{
|
||||
path: '/pages.xml',
|
||||
routes: ['/'],
|
||||
},
|
||||
{
|
||||
path: '/products.xml',
|
||||
routes: async () => {
|
||||
const { data: res} = await axios.get('http://122.51.230.86:8099/web/prodPageList?pageNum=1&pageSize=9&catgId=43bb1e22091c0f674453c8db7e89b4a3&tenantId=main')
|
||||
return res.data.records.map(item => {
|
||||
return {
|
||||
url: `/products/${item.id}`,
|
||||
changefreq: 'daily',
|
||||
priority: 1
|
||||
}
|
||||
})
|
||||
},
|
||||
gzip: true
|
||||
}
|
||||
]
|
||||
},
|
||||
router: {
|
||||
middleware: ['i18n', 'footer']
|
||||
middleware: ['i18n', 'footer', 'header']
|
||||
},
|
||||
/*
|
||||
** Build configuration
|
||||
|
||||
17481
package-lock.json
generated
17481
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,6 +15,7 @@
|
||||
"@chenfengyuan/vue-countdown": "^1.1.5",
|
||||
"@nuxtjs/axios": "^5.12.2",
|
||||
"@nuxtjs/i18n": "^7.3.1",
|
||||
"@nuxtjs/sitemap": "^2.4.0",
|
||||
"bootstrap-vue": "^2.23.1",
|
||||
"cookie-universal-nuxt": "^2.1.4",
|
||||
"core-js": "^3.43.0",
|
||||
|
||||
@ -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 }}
|
||||
<div class="guide" :style="{'justify-content': prevarticle ? 'space-between' : 'flex-end'}">
|
||||
<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,36 +128,35 @@ 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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #515760;
|
||||
border-top: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
.related-news {
|
||||
.related-article-page {
|
||||
.news-related-item {
|
||||
padding: 1.125rem 0;
|
||||
display: flex;
|
||||
@ -1,23 +1,23 @@
|
||||
<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"
|
||||
>
|
||||
<b-img
|
||||
class="col-md-4"
|
||||
<img
|
||||
class="col-md-4 cover"
|
||||
:src="item.mainPic"
|
||||
:alt="item.title"
|
||||
>
|
||||
</b-img>
|
||||
</img>
|
||||
<article class="col-md-8">
|
||||
<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,13 +60,17 @@ 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;
|
||||
border: 1px solid #e6e8ec;
|
||||
.cover {
|
||||
height: 13.75rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
article {
|
||||
padding: 1.125rem;
|
||||
font-size: .875rem;
|
||||
@ -75,7 +79,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>
|
||||
@ -26,7 +26,7 @@
|
||||
<div class="company-profiler container">
|
||||
<h5 class="title">{{ $t('index.companyProfile') }}</h5>
|
||||
<h4 class="sub-title">{{ $t('index.corporateName') }}</h4>
|
||||
<div class="describe" v-html="companyInfo"></div>
|
||||
<div class="describe d-none d-md-block" v-html="companyInfo"></div>
|
||||
<ul class="advantage row pl-0">
|
||||
<li
|
||||
v-for="item in advantageList"
|
||||
@ -39,7 +39,7 @@
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<nuxt-link class="more box_shadow" to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">{{ $t('common.readMore') }}</nuxt-link>
|
||||
<b-img class="word-img" src="../assets/image/backGroundImg/home-world.png" alt="word" fluid ></b-img>
|
||||
</div>
|
||||
</section>
|
||||
@ -64,12 +64,12 @@
|
||||
<article class="product-card box_shadow">
|
||||
<img class="cover" :src="son.mainPic" :alt="son.title"></img>
|
||||
<div class="product-card-content">
|
||||
<h4>{{ son.title }}</h4>
|
||||
<div v-html="son.description"></div>
|
||||
<h4 class="text-ellipsis">{{ son.title }}</h4>
|
||||
<div class="text-ellipsis" v-html="son.description"></div>
|
||||
<!-- <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}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`">
|
||||
{{ $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?maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</section>
|
||||
|
||||
<!-- Products -->
|
||||
@ -91,13 +91,13 @@
|
||||
<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}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`" class="row">
|
||||
<div class="col-7 col-md-6 pr-0">
|
||||
<b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
|
||||
</div>
|
||||
<div class="products-info col-5 col-md-6">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<div v-html="item.description"></div>
|
||||
<h3 class="text-ellipsis">{{ item.title }}</h3>
|
||||
<div class="desc text-ellipsis" v-html="item.description"></div>
|
||||
<!-- <p>{{ $t('common.brand') }}: Foton</p>
|
||||
<p>{{ $t('common.driveWheel') }}: 8x4</p>
|
||||
<p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
|
||||
@ -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?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -121,30 +121,36 @@
|
||||
<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>
|
||||
<nuxt-link
|
||||
class="more box_shadow"
|
||||
:to="`/article-page/${hotNewsList[0].id}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${hotNewsList[0].catgId}`"
|
||||
>
|
||||
{{ $t('common.readMore') }}
|
||||
</nuxt-link>
|
||||
<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, 5)" :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}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${item.catgId}`">
|
||||
<img class="col-5 cover" :src="item.mainPic" fluid-grow :alt="item.title"></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 +159,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?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -253,11 +259,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() {
|
||||
@ -320,11 +330,14 @@ export default {
|
||||
}
|
||||
.company-profiler {
|
||||
@include commonSector;
|
||||
.describe {
|
||||
::v-deep .describe {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 3.25rem;
|
||||
color: #575757;
|
||||
font-size: .875rem;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.word-img {
|
||||
margin-top: -11.25rem;
|
||||
@ -358,8 +371,12 @@ export default {
|
||||
padding: 1.125rem 1rem;
|
||||
border-top: .0625rem solid #e6e8ec;
|
||||
font-size: .875rem;
|
||||
>div {
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
h4 {
|
||||
margin-bottom: .8125rem;
|
||||
-webkit-line-clamp: 1;
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
@ -388,6 +405,9 @@ export default {
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.desc {
|
||||
-webkit-line-clamp: 9;
|
||||
}
|
||||
p {
|
||||
color: #878b90;
|
||||
font-size: .875rem;
|
||||
@ -430,6 +450,10 @@ export default {
|
||||
}
|
||||
.new-item {
|
||||
background-color: #fff;
|
||||
.cover {
|
||||
height: 12.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
.news-info {
|
||||
padding: 1.625rem 1.125rem .875rem;
|
||||
font-size: .875rem;
|
||||
@ -494,7 +518,13 @@ export default {
|
||||
}
|
||||
|
||||
// 特殊样式小屏幕处理
|
||||
@media screen and (max-width:400px) {
|
||||
|
||||
@media screen and (max-width:780px) {
|
||||
.popular-product {
|
||||
.product-card {
|
||||
.cover {
|
||||
height: 11.25rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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.catgName }}</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>
|
||||
@ -133,27 +176,61 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'feedback',
|
||||
name: 'inquiry',
|
||||
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.catgName,
|
||||
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}) {
|
||||
// 获取新闻分类
|
||||
const categoryTree = await $axios.$get('/web/prodCategory?catgId=660179025d0e2e0e4263db0eec86a8cc')
|
||||
async asyncData({$axios,query}) {
|
||||
// 获取产品分类
|
||||
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',
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<div class="parameter" v-html="prodDetail.description"></div>
|
||||
|
||||
<div class="visit">
|
||||
<a class="box_shadow" href="javascript:;">
|
||||
<a class="box_shadow" href="#form-target">
|
||||
<img src="~assets/image/icon/email-highlight.png" :alt="$t('common.sendInquiry')" />
|
||||
{{ $t('common.sendInquiry') }}
|
||||
</a>
|
||||
@ -51,7 +51,7 @@
|
||||
<h2>{{ $t('products.productDetails') }}</h2>
|
||||
</div>
|
||||
<div class="desc rich-text pt-3 pb-3" v-html="prodDetail.content"></div>
|
||||
<div class="guide">
|
||||
<div class="guide" :style="{'justify-content': prevNews ? 'space-between' : 'flex-end'}">
|
||||
<nuxt-link :to="`/products/${prevNews.id}`" v-if="prevNews">
|
||||
{{ $t('common.prev') }}: {{ prevNews.title }}
|
||||
</nuxt-link>
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<div class="pretty-header">
|
||||
<div class="pretty-header" id="form-target">
|
||||
<h2>{{ $t('products.inquiry') }}</h2>
|
||||
</div>
|
||||
|
||||
@ -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',
|
||||
@ -210,12 +255,15 @@ export default {
|
||||
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>
|
||||
@ -359,7 +410,6 @@ export default {
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #515760;
|
||||
border-top: 1px solid #d8dde1;
|
||||
font-size: .875rem;
|
||||
|
||||
@ -72,8 +72,8 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
destroyed: function () {
|
||||
// 离开页面生命周期函数
|
||||
beforeDestroy() {
|
||||
// 离开页面生命周期函数
|
||||
this.$store.dispatch('modules/websocket/websocket_close')
|
||||
},
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
115
pages/search-result.vue
Normal file
115
pages/search-result.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
<div class="container">
|
||||
<section class="article-page-list">
|
||||
<nuxt-link
|
||||
class="article-page-item box_shadow row mt-4"
|
||||
:to="`/${jumpUrl(item.dataType)}/${item.id}?catgId=${item.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`"
|
||||
v-for="item in pordObj.records"
|
||||
:key="item.id"
|
||||
>
|
||||
<img
|
||||
class="col-md-4 cover"
|
||||
:src="item.mainPic"
|
||||
:alt="item.title"
|
||||
>
|
||||
</img>
|
||||
<article class="col-md-8">
|
||||
<h3 class="title text-ellipsis">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<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')">
|
||||
</div>
|
||||
</article>
|
||||
</nuxt-link>
|
||||
|
||||
<SeoPagination class="mt-4" :total="pordObj.total" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'search-result',
|
||||
watchQuery: ['str','pageNum'],
|
||||
data() {
|
||||
return {
|
||||
bannerTopOptions: {
|
||||
title: this.$t('common.fulltextsearch'),
|
||||
img: require('../assets/image/banner/aboutus-banner.png')
|
||||
}
|
||||
}
|
||||
},
|
||||
async asyncData({$axios, query}) {
|
||||
console.log(query.str);
|
||||
const params = {
|
||||
pageNum: query.pageNum || 1,
|
||||
pageSize: 10,
|
||||
text: query.str
|
||||
}
|
||||
let {data: pordObj} = await $axios('/web/searchText', {params})
|
||||
|
||||
return {
|
||||
pordObj
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpUrl(val) {
|
||||
const routeMap = {
|
||||
'news': 'article-page', // 文章栏目
|
||||
'product': 'products' // 产品栏目
|
||||
}
|
||||
|
||||
return routeMap[val]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-page-list {
|
||||
box-sizing: border-box;
|
||||
.article-page-item {
|
||||
margin: 0;
|
||||
height: min-content;
|
||||
min-height: 12.875rem;
|
||||
border: 1px solid #e6e8ec;
|
||||
.cover {
|
||||
height: 13.75rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
article {
|
||||
padding: 1.125rem;
|
||||
font-size: .875rem;
|
||||
.title {
|
||||
margin-top: .9375rem;
|
||||
color: #212222;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.article-page-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>
|
||||
59
pages/separate.vue
Normal file
59
pages/separate.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<!-- 单页面类型页面 -->
|
||||
<div class="content">
|
||||
<BannerTop :options="bannerTopOptions"/>
|
||||
<div class="container rich-text" v-html="pageInfo.content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'separate',
|
||||
watchQuery: ['maxCatgId'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
async asyncData({$axios,query}) {
|
||||
const { data: pageInfo } = await $axios.get(`/web/categoryInfo?id=${query.maxCatgId}`)
|
||||
|
||||
let bannerTopOptions = {
|
||||
title: pageInfo.catgName,
|
||||
subTitle: pageInfo.description,
|
||||
img: require('../assets/image/banner/aboutus-banner.png')
|
||||
}
|
||||
|
||||
return {
|
||||
pageInfo,
|
||||
bannerTopOptions
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.pageInfo.title,
|
||||
meta: [
|
||||
{
|
||||
hid: 'keywords',
|
||||
name: 'keywords',
|
||||
content: this.pageInfo.keyword
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: this.pageInfo.description
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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)
|
||||
@ -31,3 +32,5 @@ Vue.use(Footer)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Avatar)
|
||||
|
||||
Vue.prototype.$message = Message
|
||||
@ -1,17 +1,49 @@
|
||||
const routeMap = {
|
||||
'dym': 'separate', // 单页面
|
||||
'xp': 'inquiry', // 询盘栏目
|
||||
'wz': 'article-page', // 文章栏目
|
||||
'cp': 'products' // 产品栏目
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
locales: ['en', 'zh'],
|
||||
locale: 'en',
|
||||
footerInfo: {}
|
||||
menuTree: [],
|
||||
footerInfo: {},
|
||||
footerPordCategory: [],
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
SET_LANG (state, locale) {
|
||||
if (state.locales.includes(locale)) {
|
||||
state.locale = locale
|
||||
this.$cookies.set('lang', locale)
|
||||
}
|
||||
},
|
||||
SET_FOOTER_INFO (state, info) {
|
||||
state.footerInfo = info
|
||||
},
|
||||
SET_FOOTER_PRODCAT (state, list) {
|
||||
state.footerPordCategory = list
|
||||
},
|
||||
SET_MENU_TREE (state, tree) {
|
||||
state.menuTree = [
|
||||
{label:'Home', to: '/', children: []}
|
||||
]
|
||||
const fn = (list) => {
|
||||
list.forEach(item => {
|
||||
if (item.catgLevel===1) {
|
||||
item.to = `/${routeMap[item.catgType]}?maxCatgId=${item.id}&title=${item.label}`
|
||||
} else {
|
||||
item.to = `/${routeMap[item.catgType]}?&catgId=${item.id}&maxCatgId=${item.maxParentId}&title=${item.label}`
|
||||
}
|
||||
if (item.children.length) {
|
||||
fn(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
fn(tree)
|
||||
state.menuTree = [...state.menuTree, ...tree]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,7 +38,10 @@ export const mutations = {
|
||||
state.socket.send(msg);
|
||||
},
|
||||
WEBSOCKET_CLOSE(state){
|
||||
state.socket.close();
|
||||
if (state.socket) {
|
||||
state.socket.close();
|
||||
state.socket = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user