dianliang/dl_site_nuxt
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面细节

Browse Source
This commit is contained in:
hejin 2025-07-29 21:29:20 +08:00
parent 980175b243
commit a52b89972c
9 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/footer.vue
View File

@ -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>

9
components/header.vue
View File

@ -1,7 +1,9 @@
<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">
<HeaderNav :nodes="menuTree" />
@ -173,9 +175,8 @@ nav {
.nav-link-item {
height: 100%;
padding: 0 1.4375rem;
>a {
color: #151516;
}
white-space: nowrap;
color: #151516;
@include activeNav;
}
.active-item {

3
locales/en.json
View File

@ -32,7 +32,8 @@
"prev": "Prev",
"submitSuccess": "Submit success",
"fulltextsearch": "Full text search",
"language": "Language"
"language": "Language",
"Categories": "Categories"
},
"menu": {
"Home": "Home",

3
locales/zh.json
View File

@ -32,7 +32,8 @@
"prev": "上一个",
"submitSuccess": "提交成功",
"fulltextsearch": "全站搜索",
"language": "语言"
"language": "语言",
"Categories": "分类"
},
"menu": {
"Home": "首页",

2
middleware/footer.js
View File

@ -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)
}

36
pages/index.vue
View File

@ -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"
@ -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="`/products/${son.id}?catgId=${son.catgId}`">
<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="/products">{{ $t('common.readMore') }}</nuxt-link>
<nuxt-link class="more box_shadow" to="/products&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $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="`/products/${item.id}?catgId=${item.catgId}`" 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>
@ -111,7 +111,7 @@
</article>
</li>
</ul>
<nuxt-link class="more box_shadow" to="/products">{{ $t('common.readMore') }}</nuxt-link>
<nuxt-link class="more box_shadow" to="/products?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc">{{ $t('common.readMore') }}</nuxt-link>
</div>
</section>
@ -129,7 +129,12 @@
{{ hotNewsList[0].description }}
</p>
<div class="pc-news-footer">
<nuxt-link class="more box_shadow" to="/">{{ $t('common.readMore') }}</nuxt-link>
<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>
@ -137,7 +142,7 @@
<ul class="col-12 col-md-6">
<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="`/article-page/${item.id}`">
<nuxt-link class="row" :to="`/article-page/${item.id}?&maxCatgId=660179025d0e2e0e4263db0eec86a8cc&catgId=${item.catgId}`">
<b-img class="col-5" :src="item.mainPic" fluid-grow :alt="item.title"></b-img>
<div class="news-info col-7">
<h4 class="text-ellipsis">{{ item.title }}</h4>
@ -154,7 +159,7 @@
</li>
</ul>
</div>
<nuxt-link class="more box_shadow mb-4" to="/article-page">{{ $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>
@ -325,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;
@ -503,7 +511,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>

2
pages/products.vue
View File

@ -32,7 +32,7 @@ export default {
}
},
async asyncData({$axios,query}) {
// 获取新闻分类
// 获取产品分类
const categoryTree = await $axios.$get(`/web/prodCategory?catgId=${query.maxCatgId}`)
const bannerTopOptions = {
title: query.title,

2
pages/search-result.vue
View File

@ -5,7 +5,7 @@
<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}`"
:to="`/${jumpUrl(item.dataType)}/${item.id}?catgId=${item.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`"
v-for="item in pordObj.records"
:key="item.id"
>

6
store/index.js
View File

@ -9,7 +9,8 @@ export const state = () => ({
locales: ['en', 'zh'],
locale: 'en',
menuTree: [],
footerInfo: {}
footerInfo: {},
footerPordCategory: [],
})
export const mutations = {
@ -22,6 +23,9 @@ export const mutations = {
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: []}