Skip to content

O
offical_web
Commit 53aec777 by wusiyi
Options

feat: 样式优化，关于我们页面完善

parent b2847646
Showing with 318 additions and 248 deletions
src/assets/css/common.css
...@@ -1074,10 +1074,18 @@ ul li { ...@@ -1074,10 +1074,18 @@ ul li {
} }
.bg-colorBg { .bg-colorBg {
--tw-bg-opacity: 1;
background-color: var(--background-color); background-color: var(--background-color);
} }
.bg-colorBg-gradient {
background-image: linear-gradient(
to bottom,
#ffffff00 1%,
var(--background-color),
#ffffff00 99%
);
}
.primary-color { .primary-color {
color: var(--primary-color); color: var(--primary-color);
} }
......
src/components/headerNavMobile.vue
...@@ -41,70 +41,9 @@ ...@@ -41,70 +41,9 @@
<img src="../assets/logo.png" class="w-32" /> <img src="../assets/logo.png" class="w-32" />
<i <i
class="el-icon-close text-xl font-bold cursor-pointer" class="el-icon-close text-xl font-bold cursor-pointer"
@click="toggleShow"></i> @click="toggleShow" />
</div> </div>
<ul class="header-nav-mobile-items" @click.stop> <NavMenu :nav="nav" @item-click="toggleShow" />
<li
v-for="(r, i) in nav"
:key="i"
class="header-nav-mobile-item"
:class="{ active: isRouteActive(r) }">
<router-link
v-if="!r.children"
class="header-nav-mobile-link flex items-center justify-between"
:to="r.path"
@click.native="toggleShow(r)">
{{ r.name }}
</router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ r.name }}</span>
<i
:class="r.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
@click.stop="toggleExpand(r)"></i>
</div>
<div v-if="r.expanding" class="header-nav-mobile-child">
<div
class="header-nav-mobile-child-item"
v-for="(c, index) in r.children"
:class="{ active: isRouteActive(c) }"
:key="index">
<router-link
v-if="!c.children"
class="header-nav-mobile-link"
:to="c.path"
@click.native="toggleShow(c)">
{{ c.name }}
</router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ c.name }}</span>
<i
:class="
c.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
"
@click.stop="toggleExpand(c)"></i>
</div>
<div v-if="c.expanding" class="header-nav-mobile-sub-child">
<div
class="header-nav-mobile-child-item"
v-for="(s, index2) in c.children"
:class="{ active: isRouteActive(s) }"
:key="index2">
<router-link
class="header-nav-mobile-link"
:to="s.path"
@click.native="toggleShow(s)">
{{ s.name }}
</router-link>
</div>
</div>
</div>
</div>
</li>
</ul>
</div> </div>
</transition> </transition>
</div> </div>
...@@ -112,6 +51,7 @@ ...@@ -112,6 +51,7 @@
<script> <script>
import { mapMutations } from 'vuex' import { mapMutations } from 'vuex'
import { Icon } from '@iconify/vue2' import { Icon } from '@iconify/vue2'
import NavMenu from './navMenu.vue'
import productionSvg from '../assets/images/home/production.svg' import productionSvg from '../assets/images/home/production.svg'
import customSvg from '../assets/images/home/custom.svg' import customSvg from '../assets/images/home/custom.svg'
import supplyChainSvg from '../assets/images/home/earth.svg' import supplyChainSvg from '../assets/images/home/earth.svg'
...@@ -124,6 +64,7 @@ export default { ...@@ -124,6 +64,7 @@ export default {
}, },
components: { components: {
Icon, Icon,
NavMenu,
}, },
data() { data() {
return { return {
...@@ -183,23 +124,6 @@ export default { ...@@ -183,23 +124,6 @@ export default {
toggleShow() { toggleShow() {
this.showing = !this.showing this.showing = !this.showing
}, },
handleMenuClick(item) {
// 如果菜单项有子节点，不关闭菜单（由组件内部处理展开/收起）
if (item.children && item.children.length > 0) {
return
}
// 叶子节点点击后关闭菜单
this.toggleShow()
},
isRouteActive(item) {
const path = this.$route.path
if (item.path === path) return true
// 检查子节点中是否有激活的路由
if (item.children) {
return item.children.some((child) => this.isRouteActive(child))
}
return false
},
async login() { async login() {
// 跳转到首页 // 跳转到首页
await this.$router.push('/home').catch(() => {}) await this.$router.push('/home').catch(() => {})
...@@ -319,149 +243,4 @@ export default { ...@@ -319,149 +243,4 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header-nav-mobile-items {
box-sizing: border-box;
width: 100%;
height: 100%;
// background-color: #fff;
margin: 0;
padding: 20px 20px;
flex: 1;
overflow-y: auto;
}
.header-nav-mobile-item,
.header-nav-mobile-child {
list-style-type: none;
line-height: 50px;
letter-spacing: 4px;
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-child-item {
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-item.active {
.header-nav-mobile-link {
position: relative;
}
}
.header-nav-mobile-item {
font-size: 16px;
}
.header-nav-mobile-child {
font-size: 14px;
// color: #999;
background-color: #fffdf8;
padding: 0 20px;
margin-top: 10px;
}
.header-nav-mobile-sub-child {
margin-left: 20px;
& > .header-nav-mobile-child-item {
border-bottom: 1px solid var(--border-color);
}
}
.header-nav-mobile-child-item {
line-height: 36px;
}
.header-nav-mobile-children {
margin: 0;
padding: 0;
}
.header-nav-mobile-item > .header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px var(--border-color);
}
.header-nav-mobile-item > .header-nav-mobile-link {
display: flex;
.expand-icon {
margin-left: auto;
margin-right: 20px;
}
}
.header-nav-mobile-child > .header-nav-mobile-link {
padding-left: 10px;
&::after {
display: none !important;
}
}
// 递归菜单组件样式补充
.header-nav-mobile-items {
.header-nav-mobile-item {
list-style-type: none;
line-height: 50px;
letter-spacing: 4px;
font-size: 16px;
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
> .header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.header-nav-mobile-child {
font-size: 14px;
background-color: #fffdf8;
padding: 0 20px;
margin-top: 10px;
.header-nav-mobile-child-item {
line-height: 36px;
border-bottom: 1px solid var(--border-color);
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
> .header-nav-mobile-link {
padding-left: 10px;
&::after {
display: none !important;
}
}
}
}
.header-nav-mobile-sub-child {
margin-left: 20px;
}
.recursive-menu-children {
list-style-type: none;
margin: 0;
padding: 0;
}
}
</style> </style>
src/components/navMenu.vue 0 → 100644
<template>
<div>
<ul class="header-nav-mobile-items" @click.stop>
<li
v-for="(r, i) in nav"
:key="i"
class="header-nav-mobile-item"
:class="{ active: isRouteActive(r) }">
<router-link
v-if="!r.children"
class="header-nav-mobile-link flex items-center justify-between"
:to="r.path"
@click.native="handleMenuClick(r)">
{{ r.name }}
</router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ r.name }}</span>
<i
:class="r.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
@click.stop="handleMenuClick(r)"></i>
</div>
<div v-if="r.expanding" class="header-nav-mobile-child">
<div
class="header-nav-mobile-child-item"
v-for="(c, index) in r.children"
:class="{ active: isRouteActive(c) }"
:key="index">
<router-link
v-if="!c.children"
class="header-nav-mobile-link"
:to="c.path"
@click.native="handleMenuClick(c)">
{{ c.name }}
</router-link>
<div
v-else
class="header-nav-mobile-link flex items-center justify-between">
<span>{{ c.name }}</span>
<i
:class="c.expanding ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
@click.stop="handleMenuClick(c)"></i>
</div>
<div v-if="c.expanding" class="header-nav-mobile-sub-child">
<div
class="header-nav-mobile-child-item"
v-for="(s, index2) in c.children"
:class="{ active: isRouteActive(s) }"
:key="index2">
<router-link
class="header-nav-mobile-link"
:to="s.path"
@click.native="handleMenuClick(s)">
{{ s.name }}
</router-link>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'NavMenu',
props: {
nav: {
type: Array,
required: true,
},
},
methods: {
handleMenuClick(item) {
// 如果菜单项有子节点，不关闭菜单（由组件内部处理展开/收起）
if (item.children && item.children.length > 0) {
return
}
// 叶子节点点击后关闭菜单
this.$emit('item-click')
},
isRouteActive(item) {
const path = this.$route.path
if (item.path === path) return true
// 检查子节点中是否有激活的路由
if (item.children) {
return item.children.some((child) => this.isRouteActive(child))
}
return false
},
},
}
</script>
<style scoped lang="scss">
.header-nav-mobile-items {
box-sizing: border-box;
width: 100%;
height: 100%;
// background-color: #fff;
margin: 0;
padding: 20px 20px;
flex: 1;
overflow-y: auto;
}
.header-nav-mobile-item,
.header-nav-mobile-child {
list-style-type: none;
line-height: 50px;
letter-spacing: 4px;
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-child-item {
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
}
.header-nav-mobile-item.active {
.header-nav-mobile-link {
position: relative;
}
}
.header-nav-mobile-item {
font-size: 16px;
}
.header-nav-mobile-child {
font-size: 14px;
// color: #999;
background-color: #fffdf8;
padding: 0 20px;
margin-top: 10px;
}
.header-nav-mobile-sub-child {
margin-left: 20px;
& > .header-nav-mobile-child-item {
border-bottom: 1px solid var(--border-color);
}
}
.header-nav-mobile-child-item {
line-height: 36px;
}
.header-nav-mobile-children {
margin: 0;
padding: 0;
}
.header-nav-mobile-item > .header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px var(--border-color);
}
.header-nav-mobile-item > .header-nav-mobile-link {
display: flex;
.expand-icon {
margin-left: auto;
margin-right: 20px;
}
}
.header-nav-mobile-child > .header-nav-mobile-link {
padding-left: 10px;
&::after {
display: none !important;
}
}
// 递归菜单组件样式补充
.header-nav-mobile-items {
.header-nav-mobile-item {
list-style-type: none;
line-height: 50px;
letter-spacing: 4px;
font-size: 16px;
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
> .header-nav-mobile-link {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.header-nav-mobile-child {
font-size: 14px;
background-color: #fffdf8;
padding: 0 20px;
margin-top: 10px;
.header-nav-mobile-child-item {
line-height: 36px;
border-bottom: 1px solid var(--border-color);
&.active > .header-nav-mobile-link {
color: var(--primary-color);
}
> .header-nav-mobile-link {
padding-left: 10px;
&::after {
display: none !important;
}
}
}
}
.header-nav-mobile-sub-child {
margin-left: 20px;
}
.recursive-menu-children {
list-style-type: none;
margin: 0;
padding: 0;
}
}
</style>
src/components/product-intro.vue
...@@ -615,7 +615,12 @@ export default { ...@@ -615,7 +615,12 @@ export default {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.home-module-item:nth-child(odd) { .home-module-item:nth-child(odd) {
background-color: var(--background-color); background-image: linear-gradient(
to bottom,
#ffffff00 1%,
var(--background-color),
#ffffff00 99%
);
} }
.home-module-item:not(:last-child) { .home-module-item:not(:last-child) {
......
src/views/aboutus/aboutPage.vue
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-colorBg w-full flex flex-col m-auto mt-20 py-10"> <div class="bg-colorBg-gradient w-full flex flex-col m-auto mt-20 py-10">
<h2 class="text-center">发展历程</h2> <h2 class="text-center">发展历程</h2>
<timeline /> <timeline />
</div> </div>
......
src/views/aboutus/timeline.vue
...@@ -26,19 +26,21 @@ ...@@ -26,19 +26,21 @@
class="timeline-card-item" class="timeline-card-item"
ref="cardItems"> ref="cardItems">
<div <div
class="timeline-card lg:p-10 p-6 h-80 lg:w-104 w-80 shadow-xl rounded-lg cursor-pointer" class="timeline-card lg:p-10 p-6 lg:h-80 h-64 lg:w-96 w-80 shadow-xl rounded-lg cursor-pointer"
:class="{ 'timeline-card-current': currentIndex === index }" :class="{ 'timeline-card-current': currentIndex === index }"
@click="selectTime(index)"> @click="selectTime(index)">
<div class="w-full text-gray-600 font-semibold lg:text-2xl text-lg"> <div class="w-full text-gray-600 font-semibold lg:text-2xl text-lg">
{{ item.title }} {{ item.title }} : {{ item.subtitle }}
</div> </div>
<div class="bg-gray-200 mt-3 h-px" /> <div class="bg-gray-200 mt-3 h-px" />
<el-timeline class="mt-5"> <el-timeline class="mt-8">
<el-timeline-item <el-timeline-item
v-for="(content, index) in item.content" v-for="(content, index) in item.content"
:key="index" :key="index"
color="var(--el-color-primary-light-3)"> color="var(--el-color-primary-light-3)">
{{ content }} <div class="text-gray-600 lg:text-base text-base">
{{ content }}
</div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div> </div>
...@@ -54,19 +56,31 @@ export default { ...@@ -54,19 +56,31 @@ export default {
timelineItems: [ timelineItems: [
{ {
title: '2022年', title: '2022年',
content: [], subtitle: '奠基与启航',
content: [
'公司于西安成立，以跨境电商与智能营销为核心，完成技术架构搭建，实现从0到1的突破。',
],
}, },
{ {
title: '2023年', title: '2023年',
content: [], subtitle: '拓展与深耕',
content: [
'业务规模快速扩大，通过优化供应链与丰富SaaS工具矩阵，提升了运营效率并获市场认可。',
],
}, },
{ {
title: '2024年', title: '2024年',
content: [], subtitle: '整合与赋能',
content: [
'战略转向生态整合，将核心能力产品化输出，成功从服务商转型为生态赋能者。',
],
}, },
{ {
title: '2025年', title: '2025年',
content: [], subtitle: '创新与跨越',
content: [
'建立美国柔性供应链积极拓展海外市场，推动品牌国际化，开启智能化与全球布局新阶段。',
],
}, },
], ],
currentIndex: 0, currentIndex: 0,
......
src/views/help/sideNav.vue
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
v-model="searchKeyword" v-model="searchKeyword"
placeholder="在目录中搜索..."></el-input> placeholder="在目录中搜索..."></el-input>
<el-menu <el-menu
:key="menuKey"
router router
:unique-opened="true" :unique-opened="true"
:default-active="$route.path" :default-active="$route.path"
...@@ -27,22 +26,46 @@ export default { ...@@ -27,22 +26,46 @@ export default {
return { return {
searchKeyword: '', searchKeyword: '',
menuList, menuList,
menuKey: 0,
} }
}, },
watch: {
'$route.path'() {
this.$nextTick(() => {
this.menuKey += 1
})
},
},
computed: { computed: {
// 需要展开的父级菜单 // 需要展开的父级菜单
openedMenus() { openedMenus() {
const id = this.$route.path.split('/').pop() const currentPath = this.$route.path
const result = Array.from(id).map((_, i) => id.slice(0, i + 1)) // 递归查找匹配的菜单项及其父级菜单
return result const findMenuItem = (items, parentIds = []) => {
for (const item of items) {
// 构建菜单项的完整路径（与 MenuItem.vue 中的逻辑保持一致）
let itemPath = ''
if (item.url) {
// 如果有 url，路径格式为 /help/path/url
itemPath = item.path
? `/help/${item.path}/${item.url}`
: `/help/${item.url}`
} else if (item.path) {
// 如果只有 path，路径格式为 /help/path
itemPath = `/help/${item.path}`
}
// 如果当前路径完全匹配
if (itemPath && itemPath === currentPath) {
return parentIds
}
// 如果有子菜单，递归查找
if (item.children && item.children.length > 0) {
const newParentIds = [...parentIds, String(item.id)]
const result = findMenuItem(item.children, newParentIds)
if (result !== null) {
return result
}
}
}
return null
}
const result = findMenuItem(this.menuList)
return result || []
}, },
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment