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

尝试引入tree插件失败，最后选用element-ui的tree组件

Browse Source
This commit is contained in:
hejin 2025-07-04 01:00:28 +08:00
parent fa9a42a050
commit bec7be472f
13 changed files with 246 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/image/backGroundImg/contact-us-footer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 292 KiB

After

Width:  |  Height:  |  Size: 287 KiB

BIN
assets/image/banner/news-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

109
components/aside-tree.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<aside class="aside-tree">
<h3 class="aside-header">{{ headerTitle }}</h3>
<nav class="tree-box">
<el-tree
:data="treeData"
node-key="id"
/>
</nav>
</aside>
</template>
<script>
export default {
name: 'AsideTree',
props: {
headerTitle: {
type: String,
default: ''
}
},
data () {
return {
treeData: [
{
id: 1,
label: 'Level 1 - 1',
children: [
{
id: 4,
label: 'Level 2 - 1-1',
children: [
{
id: 9,
label: 'Level 3 - 1-1-1'
},
{
id: 10,
label: 'Level 3 - 1-1-2'
}
]
}
]
},
{
id: 2,
label: 'Level 1 - 2',
children: [
{
id: 5,
label: 'Level 2 - 2-1'
},
{
id: 6,
label: 'Level 2 - 2-2'
}
]
},
{
id: 3,
label: 'Level 1 - 3',
children: [
{
id: 7,
label: 'Level 2 - 3-1'
},
{
id: 8,
label: 'Level 2 - 3-2'
}
]
}
]
}
},
mounted () {
}
}
</script>
<style lang="scss" scoped>
@import "element-ui/lib/theme-chalk/tree.css";
@import "element-ui/lib/theme-chalk/menu.css";
@import "element-ui/lib/theme-chalk/scrollbar.css";
.aside-tree {
padding: 0;
.aside-header {
margin: 0;
padding: 1.5rem 0;
text-indent: 2.125rem;
color: #fff;
background-color: #015fe8;
font-size: 1.25rem;
font-weight: bold;
}
.tree-box {
padding: .625rem .625rem;
background-color: #f5f7f9;
border: .0625rem solid #d9dde0;
}
}
// 特殊样式小屏幕处理
@media screen and (max-width:400px) {
}
</style>

2
components/header.vue
View File

@ -49,7 +49,7 @@ export default {
{ name: this.$t('menu.Home'), href: '/' },
{ name: this.$t('menu.AboutUs'), href: '/abou-us' },
{ name: this.$t('menu.Products'), href: '/' },
{ name: this.$t('menu.News'), href: '/' },
{ name: this.$t('menu.News'), href: '/news' },
{ name: this.$t('menu.Exhibition'), href: '/' },
{ name: this.$t('menu.ContactUs'), href: '/contact-us' },
{ name: this.$t('menu.Feedback'), href: '/' },

5
locales/en.json
View File

@ -29,6 +29,11 @@
"ContactUs": "ContactUs",
"Feedback": "Feedback"
},
"news": {
"news": "News",
"newsCenter": "NEWS CENTER",
"allNews": "ALL NEWS"
},
"index": {
"companyProfile": "COMPANY PROFILE",
"corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",

5
locales/zh.json
View File

@ -44,6 +44,11 @@
"joinOurNewsletter": "加入我们的实时通讯",
"signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！"
},
"news": {
"news": "新闻",
"newsCenter": "新闻中心",
"allNews": "所有新闻"
},
"aboutUs": {
"AboutUs": "关于我们",
"company": "中车豪沃销售有限公司",

7
nuxt.config.js
View File

@ -48,7 +48,8 @@ export default {
'~assets/css/quill.bubble.css',
'~assets/css/quill.snow.css',
'~assets/css/quill.core.css',
'~assets/css/common.scss'
'~assets/css/common.scss',
'element-ui/lib/theme-chalk/index.css'
],
/*
** Plugins to load before mounting the App
@ -58,6 +59,7 @@ export default {
'~plugins/axios',
{ src: "~plugins/router.js", ssr: true },
{ src: "~plugins/i18n.js", ssr: true },
{ src: "~plugins/element-tree.js", ssr: true },
],
/*
** Nuxt.js modules
@ -111,11 +113,12 @@ export default {
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods", { "loose": true }],
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
]
},
transpile: [
'bootstrap-vue',
'element-ui',
]
},
generate: {

69
package-lock.json generated
View File

@ -2898,6 +2898,14 @@
"resolved": "https://registry.npmmirror.com/async-function/-/async-function-1.0.0.tgz",
"integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -2963,6 +2971,11 @@
"is-retry-allowed": "^2.2.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-loader": {
"version": "8.4.1",
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@ -3008,6 +3021,27 @@
"@babel/helper-define-polyfill-provider": "^0.6.5"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@ -4635,6 +4669,26 @@
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.177.tgz",
"integrity": "sha512-7EH2G59nLsEMj97fpDuvVcYi6lwTcM1xuWw3PssD8xzboAW7zj7iB3COEEEATUfjLHrs5uKBLQT03V/8URx06g=="
},
"element-ui": {
"version": "2.15.14",
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz",
"integrity": "sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
},
"dependencies": {
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
}
}
},
"elliptic": {
"version": "6.6.1",
"resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.6.1.tgz",
@ -7185,6 +7239,11 @@
"resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
},
"npm-run-path": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
@ -10192,6 +10251,11 @@
"resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.22.10",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
@ -11370,6 +11434,11 @@
}
}
},
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",

1
package.json
View File

@ -19,6 +19,7 @@
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.43.0",
"dayjs": "^1.11.7",
"element-ui": "^2.15.14",
"jquery": "^3.4.1",
"lru-cache": "^7.18.3",
"nuxt": "2.15.0",

8
pages/contact-us.vue
View File

@ -126,7 +126,7 @@
</div>
</section>
<b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid :alt="$t('contactUs.contactUs')"></b-img>
<b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
</div>
</template>
@ -214,8 +214,7 @@ export default {
}
.footer-img {
position: relative;
bottom: 0;
margin-top: -5.625rem;
}
// 特殊样式小屏幕处理
@ -232,6 +231,9 @@ export default {
padding: 1.25rem;
}
}
.footer-img {
margin-top: 0;
}
}
}

36
pages/news/index.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<!-- 新闻 -->
<div class="content">
<BannerTop :options="bannerTopOptions"/>
<section class="container pt-4 pb-4">
<AsideTree class="col-md-3" :headerTitle="$t('news.allNews')"/>
</section>
</div>
</template>
<script>
export default {
name: 'abou-us',
data() {
return {
bannerTopOptions: {
title: this.$t('news.news'),
subTitle: this.$t('news.newsCenter'),
img: require('../../assets/image/banner/news-banner.png')
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
}
</style>

7
plugins/element-tree.js Normal file
View File

@ -0,0 +1,7 @@
import Vue from 'vue'
import {
// 添加你需要的其他组件
Tree
} from 'element-ui'
Vue.use(Tree)

5
plugins/main.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue';
import bannerTop from '@/components/banner-top.vue';
import asideTree from '@/components/aside-tree.vue';
Vue.component('BannerTop', bannerTop);
Vue.component('AsideTree', asideTree);
Vue.component('BannerTop', bannerTop);