Skip to content

O
offical_web
Commit b2847646 by wusiyi
Options

feat: 移动端适配

parent 9a24e95e
Showing with 176 additions and 129 deletions
src/assets/images/logout.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 14 14">
<g fill="none">
<path fill="#fff3d7" d="M9.5 12.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1z" />
<path stroke="#e8af24" stroke-linecap="round" stroke-linejoin="round" d="M9.5 10.5v2a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v2M6.5 7h7m-2-2l2 2l-2 2" stroke-width="1.6" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/hd.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M22 10H2v9a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3zM7 8a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1m10 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1" opacity="0.5" />
<path fill="#faaa15" d="M19 4h-1v3a1 1 0 0 1-2 0V4H8v3a1 1 0 0 1-2 0V4H5a3 3 0 0 0-3 3v3h20V7a3 3 0 0 0-3-3" />
</svg>
\ No newline at end of file
src/assets/images/product/help.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48">
<defs>
<mask id="SVG5A3x2kwa">
<g fill="none">
<path fill="#555555" stroke="#fff" stroke-linejoin="round" stroke-width="4" d="M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z" />
<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 28.625v-4a6 6 0 1 0-6-6" />
<path fill="#fff" fill-rule="evenodd" d="M24 37.625a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5" clip-rule="evenodd" />
</g>
</mask>
</defs>
<path fill="#faaa15" d="M0 0h48v48H0z" mask="url(#SVG5A3x2kwa)" />
</svg>
\ No newline at end of file
src/assets/images/product/join.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M12.22 19.85c-.18.18-.5.21-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.19.2-.51.19-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71l3.39-3.39l-1.42-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71L9.52 8.4l1.87 1.86c.95.95 2.59.94 3.54 0c.98-.98.98-2.56 0-3.54l-1.86-1.86l.28-.28c.78-.78 2.05-.78 2.83 0l4.24 4.24c.78.78.78 2.05 0 2.83z" opacity="0.3" />
<path fill="#faaa15" d="M12.22 19.85c-.18.18-.5.21-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.19.2-.51.19-.71 0a.504.504 0 0 1 0-.71l3.39-3.39l-1.41-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71l3.39-3.39l-1.42-1.41l-3.39 3.39c-.18.18-.5.21-.71 0a.513.513 0 0 1 0-.71L9.52 8.4l1.87 1.86c.95.95 2.59.94 3.54 0c.98-.98.98-2.56 0-3.54l-1.86-1.86l.28-.28c.78-.78 2.05-.78 2.83 0l4.24 4.24c.78.78.78 2.05 0 2.83zm9.61-6.78a4.01 4.01 0 0 0 0-5.66l-4.24-4.24a4.01 4.01 0 0 0-5.66 0l-.28.28l-.28-.28a4.01 4.01 0 0 0-5.66 0L2.17 6.71a3.99 3.99 0 0 0-.4 5.19l1.45-1.45a2 2 0 0 1 .37-2.33l3.54-3.54c.78-.78 2.05-.78 2.83 0l3.56 3.56c.18.18.21.5 0 .71s-.53.18-.71 0L9.52 5.57l-5.8 5.79c-.98.97-.98 2.56 0 3.54c.39.39.89.63 1.42.7a2.46 2.46 0 0 0 2.12 2.12a2.46 2.46 0 0 0 2.12 2.12c.07.54.31 1.03.7 1.42c.47.47 1.1.73 1.77.73s1.3-.26 1.77-.73z" />
</svg>
\ No newline at end of file
src/assets/images/product/platform.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735112224989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15492" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#007BF6" p-id="15493"></path><path d="M512 0h4.2496A309.248 309.248 0 0 0 512 51.2v972.8C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0z" fill="#339EFA" p-id="15494"></path><path d="M757.76 348.0576L523.264 258.048a31.8464 31.8464 0 0 0-22.4768 0l-234.496 90.0096A15.872 15.872 0 0 0 256 363.008v36.9664c0 8.8064 7.168 15.9744 15.9744 15.9744h480.1024c8.8064 0 16.0256-7.168 16.0256-15.9744V363.008a16.0768 16.0768 0 0 0-10.3424-14.9504zM320 448v160.0512h-15.9744a16.0256 16.0256 0 0 0-15.9744 15.9744v48.0768h448.1536v-48.0768a16.0256 16.0256 0 0 0-15.9744-15.9744h-16.0256V448h-64v160.0512h-96.1024V448h-64v160.0512H384V448H320zM752.128 704.0512H271.9232a16.0256 16.0256 0 0 0-15.9744 15.9744v32c0 8.8064 7.168 15.9744 15.9744 15.9744h480.1024c8.8064 0 16.0256-7.168 16.0256-15.9744v-32a15.9744 15.9744 0 0 0-16.0256-15.9744z" fill="#FFFFFF" p-id="15495"></path></svg>
\ No newline at end of file
src/assets/images/product/safety.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<g fill="none">
<path fill="#fff" d="m12 23.29l8.33-3.92l2.45-15.19L12 .75L1.22 4.18l2.45 15.19z" />
<path fill="#f7ead4" d="m20.33 19.35l2.45-15.19L12 .73v22.54z" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m11.854 15.92l4.9-4.9l-2.45-2.94l-2.45 1.96l-2.45-1.96l-2.45 2.94z" stroke-width="1.3" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m12 23.27l8.33-3.92l2.45-15.19L12 .73L1.22 4.16l2.45 15.19z" stroke-width="1.3" />
<path stroke="#faaa15" stroke-linecap="round" stroke-linejoin="round" d="m12 20.82l6.37-2.94l1.96-12.25L12 2.69L3.67 5.63l1.96 12.25z" stroke-width="1.3" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/service.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
<g fill="#faaa15">
<path d="M16 152h32v56H16a8 8 0 0 1-8-8v-40a8 8 0 0 1 8-8M192.54 40A39.12 39.12 0 0 0 156 64a39.12 39.12 0 0 0-36.54-24C97.67 40 80 58.31 80 80c0 14.56 7 27.71 16.73 40H140a20 20 0 0 1 0 40h4l37.78-8.68C203.82 135.07 232 109.23 232 80c0-21.69-17.67-40-39.46-40" opacity="0.2" />
<path d="M230.33 141.06a24.34 24.34 0 0 0-18.61-4.77C230.5 117.33 240 98.48 240 80c0-26.47-21.29-48-47.46-48A47.58 47.58 0 0 0 156 48.75A47.58 47.58 0 0 0 119.46 32C93.29 32 72 53.53 72 80c0 11 3.24 21.69 10.06 33a31.87 31.87 0 0 0-14.75 8.4L44.69 144H16a16 16 0 0 0-16 16v40a16 16 0 0 0 16 16h104a8 8 0 0 0 1.94-.24l64-16a7 7 0 0 0 1.19-.4L226 182.82l.44-.2a24.6 24.6 0 0 0 3.93-41.56ZM119.46 48a31.15 31.15 0 0 1 29.14 19a8 8 0 0 0 14.8 0a31.15 31.15 0 0 1 29.14-19C209.59 48 224 62.65 224 80c0 19.51-15.79 41.58-45.66 63.9l-11.09 2.55A28 28 0 0 0 140 112h-39.32C92.05 100.36 88 90.12 88 80c0-17.35 14.41-32 31.46-32M16 160h24v40H16Zm203.43 8.21l-38 16.18L119 200H56v-44.69l22.63-22.62A15.86 15.86 0 0 1 89.94 128H140a12 12 0 0 1 0 24h-28a8 8 0 0 0 0 16h32a8.3 8.3 0 0 0 1.79-.2l67-15.41l.31-.08a8.6 8.6 0 0 1 6.3 15.9Z" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/universe.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
<g fill="#faaa15">
<path d="M216 128a88 88 0 1 1-88-88a88 88 0 0 1 88 88" opacity="0.4" />
<path d="M245.11 60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93 95.93 0 0 0 32 128a98 98 0 0 0 .78 12.31C5.09 169 5.49 186 10.9 195.32C16 204.16 26.64 208 40.64 208a124 124 0 0 0 28.79-4A95.93 95.93 0 0 0 224 128a97 97 0 0 0-.77-12.25c12.5-13 20.82-25.35 23.65-35.92c1.95-7.32 1.36-13.76-1.77-19.15M128 48a80.11 80.11 0 0 1 78 62.2c-17.06 16.06-40.15 32.53-62.07 45.13c-27.55 15.81-51.45 25.67-70.51 31.07A79.94 79.94 0 0 1 128 48M24.74 187.29c-1.46-2.51-.65-7.24 2.22-13a79 79 0 0 1 10.29-15.05a96 96 0 0 0 18 31.32c-17.25 2.9-28.01 1.05-30.51-3.27M128 208a79.45 79.45 0 0 1-38.56-9.94a370 370 0 0 0 62.43-28.86c21.58-12.39 40.68-25.82 56.07-39.08A80.07 80.07 0 0 1 128 208M231.42 75.69c-1.7 6.31-6.19 13.53-12.63 21.13a95.7 95.7 0 0 0-18-31.35c14.21-2.35 27.37-2.17 30.5 3.24c.9 1.57.95 3.92.13 6.98" />
</g>
</svg>
\ No newline at end of file
src/assets/images/product/us.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<path fill="#faaa15" d="M16.67 13.13C18.04 14.06 19 15.32 19 17v3h4v-3c0-2.18-3.57-3.47-6.33-3.87M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24m-6 0c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0-6c1.1 0 2 .9 2 2s-.9 2-2 2s-2-.9-2-2s.9-2 2-2m0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4m6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2z" />
</svg>
\ No newline at end of file
src/assets/images/product/zx.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 48 48">
<defs>
<mask id="SVG2m4WoNWP">
<g fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="4">
<path fill="#555555" d="M8 44V6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v38l-16-8.273z" />
<path stroke-linecap="round" d="M16 18h16" />
</g>
</mask>
</defs>
<path fill="#faaa15" d="M0 0h48v48H0z" mask="url(#SVG2m4WoNWP)" />
</svg>
\ No newline at end of file
src/components/head.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
class="header bg-white sticky" class="header bg-white sticky"
:class="{ 'shadow-sm': !$route.path.includes('help') }" :class="{ 'shadow-sm': !$route.path.includes('help') }"
ref="header"> ref="header">
<headHelper v-if="$route.path.includes('help')" /> <headHelper v-if="$route.path.includes('help')" :userInfo="userInfo" />
<headerNavMobile v-else-if="$isMobile" :userInfo="userInfo" /> <headerNavMobile v-else-if="$isMobile" :userInfo="userInfo" />
<div <div
class="container w-full lg:w-3/4 flex items-center h-full justify-between m-auto" class="container w-full lg:w-3/4 flex items-center h-full justify-between m-auto"
......
src/components/headHelper.vue
<template> <template>
<div> <div>
<div class="top pt-3 pl-5 flex justify-between"> <div v-if="!$isMobile" class="top pt-3 pl-5 flex justify-between">
<div class="flex items-center gap-2 cursor-pointer" @click="goHelp"> <div class="flex items-center gap-2 cursor-pointer" @click="goHelp">
<img class="h-8" :src="Logo" alt="logo" /> <img class="h-8" src="../assets/logo.png" alt="logo" />
<h2 <h2
class="text-lg font-bold mt-2 border-l border-solid border-gray-300 pl-2"> class="text-lg font-bold mt-2 border-l border-solid border-gray-300 pl-2">
九猫ERP帮助中心 九猫ERP帮助中心
...@@ -52,12 +52,50 @@ ...@@ -52,12 +52,50 @@
<!-- <el-button plain class="mr-10 mb-2" size="medium">免费试用</el-button> --> <!-- <el-button plain class="mr-10 mb-2" size="medium">免费试用</el-button> -->
</div> </div>
</div> </div>
<div v-else class="top pt-3 px-5 flex items-center justify-between">
<div class="flex items-center gap-2 cursor-pointer" @click="goHelp">
<img class="h-8" src="../assets/jomall.png" alt="logo" />
<h2
class="text-sm font-semibold text-gray-700 mt-1 border-l border-solid border-gray-300 pl-2">
九猫ERP帮助中心
</h2>
</div>
<div class="flex items-center justify-center gap-2">
<div class="text-sm" v-if="!userInfo">
<span @click="login" class="border-r-2 border-solid border-gray-200">
登录
</span>
<span @click="register">注册</span>
</div>
<div class="text-sm flex items-center justify-center" v-else>
<span>{{ userInfo.companyName }}</span>
<span class="border-r border-solid border-gray-300 pr-2">欢迎您</span>
<el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div class="ml-2" title="退出登录" slot="reference">
<Icon
icon="mdi:logout"
width="20"
height="20"
color="var(--primary-color)" />
</div>
</el-popconfirm>
</div>
<div @click="toggleShow">
<Icon
class="bg-primary-color rounded-full p-1"
icon="typcn:th-menu"
color="white"
width="25"
height="25" />
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Icon } from '@iconify/vue2' import { Icon } from '@iconify/vue2'
import { mapMutations } from 'vuex' import { mapMutations } from 'vuex'
import Logo from '../assets/logo.png' import { menuList } from '../views/help/menuConfig'
export default { export default {
name: 'headHelper', name: 'headHelper',
...@@ -67,16 +105,19 @@ export default { ...@@ -67,16 +105,19 @@ export default {
components: { components: {
Icon, Icon,
}, },
props: {
userInfo: {
type: Object,
},
},
data() { data() {
return { return {
Logo,
navs: [ navs: [
{ {
name: '首页', name: '首页',
path: '/', path: '/',
}, },
], ],
userInfo: JSON.parse(localStorage.getItem('userInfo')),
} }
}, },
methods: { methods: {
...@@ -129,6 +170,9 @@ export default { ...@@ -129,6 +170,9 @@ export default {
// 刷新页面 // 刷新页面
window.location.reload() window.location.reload()
}, },
toggleShow() {
console.log(menuList, '???')
},
}, },
} }
</script> </script>
......
src/components/headerNavMobile.vue
...@@ -26,7 +26,11 @@ ...@@ -26,7 +26,11 @@
style="width: 16px; height: 16px; vertical-align: middle" style="width: 16px; height: 16px; vertical-align: middle"
title="退出登录" title="退出登录"
slot="reference"> slot="reference">
<img src="../assets/images/logout.svg" /> <Icon
icon="mdi:logout"
width="20"
height="20"
color="var(--primary-color)" />
</div> </div>
</el-popconfirm> </el-popconfirm>
</div> </div>
...@@ -34,7 +38,7 @@ ...@@ -34,7 +38,7 @@
<div v-show="showing" class="header-nav-mobile-overlay"> <div v-show="showing" class="header-nav-mobile-overlay">
<div <div
class="header-nav-mobile-header flex items-center justify-between p-2.5"> class="header-nav-mobile-header flex items-center justify-between p-2.5">
<img src="../assets/logo.png" class="w-32" style="height: 40px" /> <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"></i>
...@@ -112,7 +116,6 @@ import productionSvg from '../assets/images/home/production.svg' ...@@ -112,7 +116,6 @@ 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'
import logisticsSvg from '../assets/images/home/logistics.svg' import logisticsSvg from '../assets/images/home/logistics.svg'
import usSvg from '../assets/images/product/us.svg'
export default { export default {
name: 'headerNavMobile', name: 'headerNavMobile',
...@@ -162,17 +165,8 @@ export default { ...@@ -162,17 +165,8 @@ export default {
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
// { name: '案例', path: '/case' }, // { name: '案例', path: '/case' },
{ {
name: '客户服务', name: '关于我们',
path: '/about', path: '/about',
expanding: false,
children: [
{
name: '关于我们',
subTitle: '九猫ERP以精细化管理方案，帮助卖家实现业务增长',
path: '/about',
icon: usSvg,
},
],
}, },
{ name: '帮助', path: '/help' }, { name: '帮助', path: '/help' },
], ],
...@@ -186,16 +180,25 @@ export default { ...@@ -186,16 +180,25 @@ export default {
computed: {}, computed: {},
methods: { methods: {
...mapMutations(['setUserInfo']), ...mapMutations(['setUserInfo']),
toggleShow(r) { toggleShow() {
if (r && r.children) return
this.showing = !this.showing this.showing = !this.showing
}, },
toggleExpand(r) { handleMenuClick(item) {
this.$set(r, 'expanding', !r.expanding) // 如果菜单项有子节点，不关闭菜单（由组件内部处理展开/收起）
if (item.children && item.children.length > 0) {
return
}
// 叶子节点点击后关闭菜单
this.toggleShow()
}, },
isRouteActive(nav) { isRouteActive(item) {
const path = this.$route.path const path = this.$route.path
if (nav.path === path) return true if (item.path === path) return true
// 检查子节点中是否有激活的路由
if (item.children) {
return item.children.some((child) => this.isRouteActive(child))
}
return false
}, },
async login() { async login() {
// 跳转到首页 // 跳转到首页
...@@ -401,4 +404,64 @@ export default { ...@@ -401,4 +404,64 @@ export default {
display: none !important; 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/views/aboutus/aboutPage.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="about-us"> <div class="about-us">
<div class="banner-container"> <div class="banner-container">
<div <div
class="flex justify-between lg:flex-row flex-col items-center h-96 w-full-70 w-full-90 mx-auto pt-5 overflow-hidden"> class="flex justify-between lg:flex-row flex-col items-center py-10 lg:py-0 lg:h-96 w-full-70 w-full-90 mx-auto pt-5 overflow-hidden">
<div class="left-content"> <div class="left-content">
<h3 <h3
class="banner-title font-semibold text-2xl lg:text-5xl text-center lg:text-left"> class="banner-title font-semibold text-2xl lg:text-5xl text-center lg:text-left">
...@@ -13,23 +13,20 @@ ...@@ -13,23 +13,20 @@
<span>以一站式跨境电商运营管理系统，助力卖家轻松实现业务增长</span> <span>以一站式跨境电商运营管理系统，助力卖家轻松实现业务增长</span>
</div> </div>
</div> </div>
<div class="map-container mt-5"> <div class="map-container mt-5 hidden lg:block" />
<img src="../../assets/images/about/world.png" alt="world" />
</div>
</div> </div>
</div> </div>
<div class="w-3/4 flex flex-col m-auto mt-20"> <div class="lg:w-3/4 w-11/12 flex flex-col m-auto lg:mt-20 mt-5">
<h2 class="text-center mt-10">品牌介绍</h2> <h2 class="text-center mt-10">品牌介绍</h2>
<div class="flex w-full justify-between gap-10"> <div
class="flex lg:flex-row flex-col w-full items-center lg:justify-between gap-10">
<div <div
data-aos="fade-right" data-aos="fade-right"
class="w-3/4 flex-col items-center h-full lg:items-start"> class="w-3/4 flex-col items-center h-full lg:items-start lg:text-sm text-xs font-light">
<div <div class="lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
class="text-textTitle text-sm font-light lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案 九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</div> </div>
<div <div class="mt-3 lg:text-lg lg:mt-5 lg:leading-7">
class="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7">
<p class="mt-5"> <p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。 九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p> </p>
...@@ -40,7 +37,7 @@ ...@@ -40,7 +37,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="video-container w-1/2"> <div class="video-container lg:w-1/2 w-3/4">
<video <video
class="video flex justify-center items-center" class="video flex justify-center items-center"
src="../../assets/video/abount-jomalls2-video.mp4" src="../../assets/video/abount-jomalls2-video.mp4"
...@@ -48,11 +45,12 @@ ...@@ -48,11 +45,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-4/5 flex flex-col m-auto mt-20"> <div class="w-4/5 flex flex-col m-auto lg:mt-20 mt-10">
<h2 class="text-center">企业文化</h2> <h2 class="text-center">企业文化</h2>
<div class="flex justify-center flex-wrap mt-10 gap-20 cursor-default"> <div
class="flex justify-center flex-wrap mt-10 lg:gap-20 gap-5 cursor-default">
<div <div
class="culture-pic1 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic1 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
使命 使命
...@@ -62,7 +60,7 @@ ...@@ -62,7 +60,7 @@
</div> </div>
</div> </div>
<div <div
class="culture-pic2 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic2 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
愿景 愿景
...@@ -72,12 +70,12 @@ ...@@ -72,12 +70,12 @@
</div> </div>
</div> </div>
<div <div
class="culture-pic3 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center"> class="culture-pic3 bg-center bg-cover lg:w-80 w-64 lg:h-56 h-40 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5"> class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
价值观 价值观
</div> </div>
<div class="text-gray-100 text-base text-center"> <div class="text-gray-100 lg:text-base text-sm text-center">
客户第一、诚实正直 客户第一、诚实正直
<br /> <br />
艰苦奋斗、敢于批评 艰苦奋斗、敢于批评
...@@ -113,11 +111,12 @@ export default { ...@@ -113,11 +111,12 @@ export default {
.map-container { .map-container {
width: 55%; width: 55%;
position: relative; position: relative;
img { background-image: url('../../assets/images/about/world.png');
filter: grayscale(100%) hue-rotate(10deg) saturate(800%) brightness(110%); background-size: contain;
width: 100%; background-position: center;
height: auto; background-repeat: no-repeat;
} filter: grayscale(100%) hue-rotate(10deg) saturate(800%) brightness(110%);
min-height: 500px; // 确保容器有足够的高度显示背景图
} }
h2 { h2 {
...@@ -204,5 +203,14 @@ $culture-pics: ( ...@@ -204,5 +203,14 @@ $culture-pics: (
border-right: none; border-right: none;
} }
} }
.map-container {
min-height: 50px;
}
h2 {
font-size: 24px;
margin: 0 auto 10px;
}
} }
</style> </style>
src/views/aboutus/timeline.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
:class="{ 'timeline-dot-current': currentIndex === index }"></div> :class="{ 'timeline-dot-current': currentIndex === index }"></div>
<div <div
v-if="index !== timelineItems.length - 1" v-if="index !== timelineItems.length - 1"
class="timeline-line w-64 h-px"></div> class="timeline-line lg:w-64 w-20 h-px"></div>
</div> </div>
<div class="-ml-3 mt-2 text-gray-600 font-semibold text-base"> <div class="-ml-3 mt-2 text-gray-600 font-semibold text-base">
{{ item.title }} {{ item.title }}
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
class="timeline-card-item" class="timeline-card-item"
ref="cardItems"> ref="cardItems">
<div <div
class="timeline-card p-10 h-80 w-104 shadow-xl rounded-lg cursor-pointer" class="timeline-card lg:p-10 p-6 h-80 lg:w-104 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 text-2xl"> <div class="w-full text-gray-600 font-semibold lg:text-2xl text-lg">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="bg-gray-200 mt-3 h-px" /> <div class="bg-gray-200 mt-3 h-px" />
......
src/views/contact.vue
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
<div class="user-info mt-2 flex items-center"> <div class="user-info mt-2 flex items-center">
<el-popconfirm title="确定退出登录吗？" @confirm="logout"> <el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div class="logout" title="退出登录" slot="reference"> <div class="logout" title="退出登录" slot="reference">
<img src="../assets/images/logout.svg" style="width: 20px" /> <Icon
icon="mdi:logout"
width="20"
height="20"
color="var(--primary-color)" />
</div> </div>
</el-popconfirm> </el-popconfirm>
</div> </div>
......
src/views/help/helpPage.vue
...@@ -2,20 +2,20 @@ ...@@ -2,20 +2,20 @@
<div> <div>
<div <div
v-if="$route.path === '/help/index'" v-if="$route.path === '/help/index'"
class="top flex flex-col items-center py-6"> class="top flex flex-col items-center lg:py-6 mb-3">
<div class="text-gray-700 text-4xl font-bold">帮助中心</div> <div class="text-gray-700 lg:text-4xl text-2xl font-bold">帮助中心</div>
<el-input <el-input
v-model="keyword" v-model="keyword"
class="w-1/3 mt-5 search-input" class="lg:w-1/3 w-4/5 mt-5 search-input"
placeholder="请输入关键词查询..." placeholder="请输入关键词查询..."
@keyup.enter.native="search"> @keyup.enter.native="search">
<el-button slot="append" icon="el-icon-search" @click="search" /> <el-button slot="append" icon="el-icon-search" @click="search" />
</el-input> </el-input>
</div> </div>
<div class="content p-5"> <div class="content p-5">
<sideNav /> <sideNav v-if="!$isMobile" />
<div <div
class="right-content w-full p-5" class="right-content w-full lg:p-5 p-0"
style="height: 90vh" style="height: 90vh"
:class="{ 'rounded-md bg-white': $route.path !== '/help/index' }"> :class="{ 'rounded-md bg-white': $route.path !== '/help/index' }">
<Bread v-if="$route.path !== '/help/index'" /> <Bread v-if="$route.path !== '/help/index'" />
......
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