Skip to content

O
offical_web
Commit a7e95afc by wusiyi
Options

feat: 官网2.0样式优化

parent 9193748d
Showing with 1001 additions and 688 deletions
src/assets/css/common.css
......@@ -1078,6 +1078,14 @@ ul li {
background-color: var(--background-color);
}
.primary-color {
color: var(--primary-color);
}
.secondary-color {
color: var(--secondary-color);
}
/* Element UI 主题色覆盖 - 颜色变量已在 src/styles/index.scss 中基于 $primary-color 生成 */
.el-button--text {
......
src/components/head.vue
......@@ -209,17 +209,9 @@ export default {
{ name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' },
{
name: '关于',
name: '关于我们',
path: '/about',
expanding: false,
children: [
{
name: '关于我们',
subTitle: '九猫ERP以精细化管理方案，帮助卖家实现业务增长',
path: '/about',
icon: 'fluent:people-16-filled',
},
],
},
{ name: '帮助', path: '/help' },
],
......
src/components/headHelper.vue
......@@ -3,28 +3,70 @@
<div class="top pt-3 pl-5 flex justify-between">
<div class="flex items-center gap-2 cursor-pointer" @click="goHelp">
<img class="h-8" :src="Logo" alt="logo" />
<h2 class="text-white text-2xl font-bold mt-2">九猫帮助中心</h2>
<h2
class="text-lg font-bold mt-2 border-l border-solid border-gray-300 pl-2">
九猫ERP帮助中心
</h2>
</div>
<div class="flex items-center">
<div class="flex items-center justify-center pb-2">
<div
v-for="nav in navs"
:key="nav.path"
class="flex flex-col items-center justify-center mr-10">
class="flex flex-col items-center justify-center mr-8">
<a class="nav-link relative" :index="nav.path" :href="nav.path">
{{ nav.name }}
</a>
<div class="nav-line"></div>
</div>
<el-button plain class="mr-10 mb-2" size="medium">免费试用</el-button>
<div
class="mr-2 flex items-center justify-center gap-2"
v-if="!userInfo">
<div
class="text-gray-500 font-semibold cursor-pointer pr-2 border-r-2 border-solid border-gray-200 hover:text-secondary-color"
@click="login">
登录
</div>
<div
class="text-gray-500 font-semibold cursor-pointer pr-2 hover:text-secondary-color"
@click="register">
注册
</div>
</div>
<div class="flex items-center" v-else>
<div class="text-gray-600 mr-10 cursor-default">
<span class="mr-2">{{ userInfo.companyName }}</span>
<span>欢迎您</span>
</div>
<el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div
class="logout mr-5 cursor-pointer"
title="退出登录"
slot="reference">
<Icon
icon="mdi:logout"
width="20"
height="20"
color="var(--primary-color)" />
</div>
</el-popconfirm>
</div>
<!-- <el-button plain class="mr-10 mb-2" size="medium">免费试用</el-button> -->
</div>
</div>
</div>
</template>
<script>
import { Icon } from '@iconify/vue2'
import { mapMutations } from 'vuex'
import Logo from '../assets/logo.png'
export default {
name: 'headHelper',
inject: {
scrollParent: 'scrollParent',
},
components: {
Icon,
},
data() {
return {
Logo,
......@@ -33,61 +75,92 @@ export default {
name: '首页',
path: '/',
},
{
name: '价格',
path: '/price',
},
{
name: '关于九猫',
path: '/about',
},
],
userInfo: JSON.parse(localStorage.getItem('userInfo')),
}
},
methods: {
...mapMutations(['setUserInfo', 'setShopKey']),
goHelp() {
if (this.$route.path === '/help/index') return
this.$router.push('/help')
},
async login() {
if (this.$route.query && this.$route.query.shopKey) {
this.setShopKey(this.$route.query.shopKey)
}
// 跳转到首页
await this.$router.push('/home').catch(() => {})
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
async register() {
// 跳转到首页并请求打开注册弹窗（若已在首页，则变更查询参数强制触发监听）
if (this.$route && this.$route.path === '/home') {
const query = Object.assign({}, this.$route.query, {
openRegister: '1',
_r: Date.now().toString(),
})
await this.$router.replace({ path: '/home', query }).catch(() => {})
} else {
await this.$router
.push({
path: '/home',
query: { openRegister: '1', _r: Date.now().toString() },
})
.catch(() => {})
}
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
logout() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/help/index')
// 刷新页面
window.location.reload()
},
},
}
</script>
<style scoped lang="scss">
.top {
background-color: var(--primary-color);
height: 60px;
img {
filter: brightness(0) invert(1);
}
}
.nav-link {
color: #fff;
font-size: 16px;
font-weight: 530;
display: inline-block;
transition: all 0.2s ease;
&:hover {
color: var(--secondary-text-color);
color: var(--primary-color);
}
&::after {
content: '';
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 120%;
height: 2px;
background-image: linear-gradient(
to right,
#ffffff00 5%,
var(--primary-color),
#ffffff00 95%
);
transition: transform 0.2s ease;
}
&:hover::after {
transform: translateX(-50%) scaleX(1);
}
}
.nav-line {
width: 120%;
height: 2px;
background-image: linear-gradient(
to right,
#ffffff00 5%,
var(--secondary-color),
#ffffff00 95%
);
margin-top: 5px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.nav-link:hover + .nav-line {
transform: scaleX(1);
}
::v-deep .el-button--default {
......
src/components/product-intro.vue
......@@ -207,7 +207,11 @@
class="reason-list flex justify-between flex-col mt-6 gap-5 lg:gap-0 lg:mt-10 lg:flex-row">
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<img src="../assets/images/product/universe.svg" width="80" />
<Icon
icon="icon-park-twotone:planet"
width="80"
height="80"
color="var(--primary-color)" />
<p class="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合跨境卖家核心使用场景
......@@ -235,8 +239,11 @@
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<img src="../assets/images/product/safety.svg" width="80" />
<Icon
icon="icon-park-twotone:shield-add"
width="80"
height="80"
color="var(--primary-color)" />
<p class="reason-card-title">全方位保障</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
深度开发能力与数据安全护航
......@@ -260,7 +267,11 @@
</div>
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<img src="../assets/images/product/service.svg" width="80" />
<Icon
icon="mingcute:hand-heart-line"
width="80"
height="80"
color="var(--primary-color)" />
<p class="reason-card-title">全周期服务</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
全程专业服务，满足卖家需求
......@@ -287,12 +298,16 @@
</div>
</template>
<script>
import { Icon } from '@iconify/vue2'
import purchaseImg from '../assets/images/home/01.png'
import financesImg from '../assets/images/home/02.png'
import statementsImg from '../assets/images/home/03.png'
import adImg from '../assets/images/home/04.png'
export default {
name: 'productIntro',
components: {
Icon,
},
data() {
return {
activeTab: 0,
......@@ -728,8 +743,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 16px 0 rgb(224, 217, 195), 0 6px 14px 0 hsla(0, 0%, 100%, 0.3),
0 16px 20px 0 rgba(230, 223, 191, 0.25);
box-shadow: 0 0 16px 0 var(--shadow-color);
transition: all 0.4s ease-in-out;
.reason-card-type {
overflow: hidden;
......@@ -739,7 +753,7 @@ export default {
color: rgba(255, 255, 255, 1);
width: 100%;
border-radius: 0 0 16px 16px;
background-color: #eca217;
background-color: var(--primary-color);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23f6cd80' fill-opacity='0.32'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 50px 50px;
background-repeat: repeat;
......@@ -754,9 +768,7 @@ export default {
}
.section-reason-item:hover {
transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 hsla(0, 0%, 100%, 0.3),
0 0 14px 0 rgba(202, 210, 238, 0.2),
28px 36px 50px 0 rgba(221, 214, 180, 0.46);
box-shadow: 10px 10px 38px 0 var(--el-color-primary-light-9);
}
.season-top {
padding: 24px 40px 36px;
......
src/theme/menu.css
......@@ -371,118 +371,157 @@
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear; }
transition: opacity 200ms linear;
}
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0; }
opacity: 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
-webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear; }
transition: opacity 200ms linear;
}
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
opacity: 0; }
opacity: 0;
}
.el-fade-in-enter-active,
.el-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
opacity: 0; }
opacity: 0;
}
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0); }
transform: scaleX(0);
}
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top; }
transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom; }
transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0); }
transform: scaleY(0);
}
.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left; }
transform-origin: top left;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45); }
transform: scale(0.45, 0.45);
}
.collapse-transition {
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; }
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; }
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
0.3s padding-right ease-in-out;
}
.el-list-enter-active,
.el-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s; }
transition: all 1s;
}
.el-list-enter, .el-list-leave-active {
.el-list-enter,
.el-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
transform: translateY(-30px);
}
.el-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-menu {
border-right: solid 1px #e6e6e6;
......@@ -490,118 +529,155 @@
position: relative;
margin: 0;
padding-left: 0;
background-color: #FFFFFF; }
.el-menu::before,
.el-menu::after {
display: table;
content: ""; }
.el-menu::after {
clear: both; }
.el-menu.el-menu--horizontal {
border-bottom: solid 1px #e6e6e6; }
.el-menu--horizontal {
border-right: none; }
.el-menu--horizontal > .el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
border-bottom: 2px solid transparent;
color: #909399; }
.el-menu--horizontal > .el-menu-item a,
.el-menu--horizontal > .el-menu-item a:hover {
color: inherit; }
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
background-color: #fff; }
.el-menu--horizontal > .el-submenu {
float: left; }
.el-menu--horizontal > .el-submenu:focus, .el-menu--horizontal > .el-submenu:hover {
outline: none; }
.el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
color: #303133; }
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #409EFF;
color: #303133; }
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 60px;
line-height: 60px;
border-bottom: 2px solid transparent;
color: #909399; }
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
background-color: #fff; }
.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
margin-left: 8px;
margin-top: -3px; }
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
background-color: #FFFFFF;
float: none;
height: 36px;
line-height: 36px;
padding: 0 10px;
color: #909399; }
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
color: #303133; }
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
outline: none;
color: #303133; }
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #409EFF;
color: #303133; }
.el-menu--collapse {
width: 64px; }
.el-menu--collapse > .el-menu-item [class^="el-icon-"],
.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center; }
.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
display: none; }
.el-menu--collapse > .el-menu-item span,
.el-menu--collapse > .el-submenu > .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block; }
.el-menu--collapse > .el-menu-item.is-active i {
color: inherit; }
.el-menu--collapse .el-menu .el-submenu {
min-width: 200px; }
.el-menu--collapse .el-submenu {
position: relative; }
.el-menu--collapse .el-submenu .el-menu {
position: absolute;
margin-left: 5px;
top: 0;
left: 100%;
z-index: 10;
border: 1px solid #E4E7ED;
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
-webkit-transform: none;
transform: none; }
.el-menu--popup {
z-index: 100;
min-width: 200px;
border: none;
padding: 5px 0;
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
.el-menu--popup-bottom-start {
margin-top: 5px; }
.el-menu--popup-right-start {
margin-left: 5px;
margin-right: 5px; }
background-color: #ffffff;
}
.el-menu::before,
.el-menu::after {
display: table;
content: '';
}
.el-menu::after {
clear: both;
}
.el-menu.el-menu--horizontal {
border-bottom: solid 1px #e6e6e6;
}
.el-menu--horizontal {
border-right: none;
}
.el-menu--horizontal > .el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
border-bottom: 2px solid transparent;
color: #909399;
}
.el-menu--horizontal > .el-menu-item a,
.el-menu--horizontal > .el-menu-item a:hover {
color: inherit;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
background-color: #fff;
}
.el-menu--horizontal > .el-submenu {
float: left;
}
.el-menu--horizontal > .el-submenu:focus,
.el-menu--horizontal > .el-submenu:hover {
outline: none;
}
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
color: #303133;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #409eff;
color: #303133;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 60px;
line-height: 60px;
border-bottom: 2px solid transparent;
color: #909399;
}
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
background-color: #fff;
}
.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
margin-left: 8px;
margin-top: -3px;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
background-color: #ffffff;
float: none;
height: 36px;
line-height: 36px;
padding: 0 10px;
color: #909399;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
color: #303133;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
outline: none;
color: #303133;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #409eff;
color: #303133;
}
.el-menu--collapse {
width: 64px;
}
.el-menu--collapse > .el-menu-item [class^='el-icon-'],
.el-menu--collapse > .el-submenu > .el-submenu__title [class^='el-icon-'] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center;
}
.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-menu--collapse > .el-menu-item span,
.el-menu--collapse > .el-submenu > .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.el-menu--collapse > .el-menu-item.is-active i {
color: inherit;
}
.el-menu--collapse .el-menu .el-submenu {
min-width: 200px;
}
.el-menu--collapse .el-submenu {
position: relative;
}
.el-menu--collapse .el-submenu .el-menu {
position: absolute;
margin-left: 5px;
top: 0;
left: 100%;
z-index: 10;
border: 1px solid #e4e7ed;
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-menu--collapse
.el-submenu.is-opened
> .el-submenu__title
.el-submenu__icon-arrow {
-webkit-transform: none;
transform: none;
}
.el-menu--popup {
z-index: 100;
min-width: 200px;
border: none;
padding: 5px 0;
border-radius: 2px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-menu--popup-bottom-start {
margin-top: 5px;
}
.el-menu--popup-right-start {
margin-left: 5px;
margin-right: 5px;
}
.el-menu-item {
height: 56px;
......@@ -612,108 +688,135 @@
list-style: none;
cursor: pointer;
position: relative;
-webkit-transition: border-color .3s, background-color .3s, color .3s;
transition: border-color .3s, background-color .3s, color .3s;
-webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap; }
.el-menu-item * {
vertical-align: middle; }
.el-menu-item i {
color: #909399; }
.el-menu-item:hover, .el-menu-item:focus {
outline: none;
background-color: #ecf5ff; }
.el-menu-item.is-disabled {
opacity: 0.25;
cursor: not-allowed;
background: none !important; }
.el-menu-item [class^="el-icon-"] {
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
vertical-align: middle; }
.el-menu-item.is-active {
color: #409EFF; }
.el-menu-item.is-active i {
color: inherit; }
white-space: nowrap;
}
.el-menu-item * {
vertical-align: middle;
}
.el-menu-item i {
color: #909399;
}
.el-menu-item:hover,
.el-menu-item:focus {
outline: none;
background-color: var(--el-color-primary-light-8);
}
.el-menu-item.is-disabled {
opacity: 0.25;
cursor: not-allowed;
background: none !important;
}
.el-menu-item [class^='el-icon-'] {
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
vertical-align: middle;
}
.el-menu-item.is-active {
color: #409eff;
}
.el-menu-item.is-active i {
color: inherit;
}
.el-submenu {
list-style: none;
margin: 0;
padding-left: 0; }
.el-submenu__title {
height: 56px;
line-height: 56px;
font-size: 14px;
color: #303133;
padding: 0 20px;
list-style: none;
cursor: pointer;
position: relative;
-webkit-transition: border-color .3s, background-color .3s, color .3s;
transition: border-color .3s, background-color .3s, color .3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap; }
.el-submenu__title * {
vertical-align: middle; }
.el-submenu__title i {
color: #909399; }
.el-submenu__title:hover, .el-submenu__title:focus {
outline: none;
background-color: #ecf5ff; }
.el-submenu__title.is-disabled {
opacity: 0.25;
cursor: not-allowed;
background: none !important; }
.el-submenu__title:hover {
background-color: #ecf5ff; }
.el-submenu .el-menu {
border: none; }
.el-submenu .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 200px; }
.el-submenu__icon-arrow {
position: absolute;
top: 50%;
right: 20px;
margin-top: -7px;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
font-size: 12px; }
.el-submenu.is-active .el-submenu__title {
border-bottom-color: #409EFF; }
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
.el-submenu.is-disabled .el-submenu__title,
.el-submenu.is-disabled .el-menu-item {
opacity: 0.25;
cursor: not-allowed;
background: none !important; }
.el-submenu [class^="el-icon-"] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px; }
padding-left: 0;
}
.el-submenu__title {
height: 56px;
line-height: 56px;
font-size: 14px;
color: #303133;
padding: 0 20px;
list-style: none;
cursor: pointer;
position: relative;
-webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
}
.el-submenu__title * {
vertical-align: middle;
}
.el-submenu__title i {
color: #909399;
}
.el-submenu__title:hover,
.el-submenu__title:focus {
outline: none;
background-color: #ecf5ff;
}
.el-submenu__title.is-disabled {
opacity: 0.25;
cursor: not-allowed;
background: none !important;
}
.el-submenu__title:hover {
background-color: #ecf5ff;
}
.el-submenu .el-menu {
border: none;
}
.el-submenu .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
}
.el-submenu__icon-arrow {
position: absolute;
top: 50%;
right: 20px;
margin-top: -7px;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
font-size: 12px;
}
.el-submenu.is-active .el-submenu__title {
border-bottom-color: #409eff;
}
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.el-submenu.is-disabled .el-submenu__title,
.el-submenu.is-disabled .el-menu-item {
opacity: 0.25;
cursor: not-allowed;
background: none !important;
}
.el-submenu [class^='el-icon-'] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
.el-menu-item-group > ul {
padding: 0; }
padding: 0;
}
.el-menu-item-group__title {
padding: 7px 0 7px 20px;
line-height: normal;
font-size: 12px;
color: #909399; }
color: #909399;
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
-webkit-transition: .2s;
transition: .2s;
opacity: 0; }
-webkit-transition: 0.2s;
transition: 0.2s;
opacity: 0;
}
src/views/aboutus/aboutPage.vue
......@@ -2,114 +2,95 @@
<div class="about-us">
<div class="banner-container">
<div
class="content-container flex lg:flex-row flex-col items-center gap-10 lg:gap-20 w-full-70 w-full-90 mx-auto py-10">
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">
<div class="left-content">
<h3
class="banner-title font-semibold text-2xl lg:text-4xl text-center lg:text-left">
class="banner-title font-semibold text-2xl lg:text-5xl text-center lg:text-left">
跨境电商 用九猫ERP
</h3>
<div
class="text-sm px-8 text-center lg:text-left lg:text-lg lg:px-0 font-light text-textContent mb-8">
class="text-sm px-8 text-center lg:text-left lg:text-xl lg:px-0 text-textContent mt-10">
<span>以一站式跨境电商运营管理系统，助力卖家轻松实现业务增长</span>
</div>
</div>
<div class="right-image">
<div class="map-container mt-5">
<img src="../../assets/images/about/world.png" alt="world" />
</div>
</div>
</div>
<div class="w-3/4 flex flex-col m-auto mt-20">
<h2 class="text-center mt-10">品牌介绍</h2>
<div class="flex w-full justify-between gap-10">
<div
data-aos="fade-right"
class="w-3/4 flex-col items-center h-full lg:items-start">
<div
class="text-textTitle text-sm font-light lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</div>
<div
class="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7">
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
<div class="video-container w-1/2">
<video
width="100%"
class="video"
src="../../assets/video/about-us-video.mp4"
autoplay
loop
muted></video>
class="video flex justify-center items-center"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
</div>
</div>
<div class="about-section about-lx px-4 lg:px-0 lg:mt-28">
<div
class="about-content w-full-70 w-full-90 mx-auto flex flex-col justify-between items-center">
<div class="w-4/5 flex flex-col m-auto mt-20">
<h2 class="text-center">企业文化</h2>
<div class="flex justify-center flex-wrap mt-10 gap-20 cursor-default">
<div
class="w-full flex flex-col items-center gap-16 lg:gap-32 lg:flex-row lg:justify-between">
class="culture-pic1 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center">
<div
data-aos="fade-right"
class="w-full flex-col items-center h-full lg:w-137.5 lg:items-start">
<div
class="text-textTitle text-2xl text-center font-medium lg:text-4xl lg:text-left">
关于九猫
</div>
<div
class="text-textTitle text-sm font-light lg:text-lg mt-4 lg:mt-8 lg:leading-7 lg:mt-7">
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</div>
<div
class="mt-3 text-sm font-light text-textTitle lg:text-lg lg:mt-5 lg:leading-7">
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
使命
</div>
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
<div class="text-gray-100 text-base text-center">
让全球生意更高效
</div>
</div>
<div class="flex justify-between w-full mt-8 lg:mt-24">
<div class="flex-col flex h-20 border-colorIcon lg:w-full">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-start"
style="color: var(--primary-color)">
TOP 1
</div>
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-start">
行业市占率第一
</div>
<div
class="culture-pic2 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center">
<div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
愿景
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
600000+
</div>
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
跨境企业的一致选择
</div>
<div class="text-gray-100 text-base text-center">
成为全球最大的电商IT服务公司
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
20+
</div>
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
服务中心
</div>
</div>
<div
class="culture-pic3 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center">
<div
class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
价值观
</div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2">
<div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center"
style="color: var(--primary-color)">
100+
</div>
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
服务上市/IPO阶段企业
</div>
<div class="text-gray-100 text-base text-center">
客户第一、诚实正直
<br />
艰苦奋斗、敢于批评
<br />
团队合作、拥抱变化
</div>
</div>
</div>
</div>
<timeline />
<div class="bg-colorBg w-full flex flex-col m-auto mt-20 py-20">
<h2 class="text-center">发展历程</h2>
<timeline />
</div>
</div>
</template>
<script>
......@@ -122,27 +103,89 @@ export default {
}
</script>
<style scoped lang="scss">
.left-content {
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
.banner-container {
background-color: var(--background-color);
.banner-title {
color: var(--primary-color);
}
}
.right-image {
width: 70%;
.map-container {
width: 55%;
position: relative;
height: 100%;
.video {
img {
filter: grayscale(100%) hue-rotate(10deg) saturate(800%) brightness(110%);
width: 100%;
height: 100%;
object-fit: fill;
height: auto;
}
}
.video-container {
width: 50%;
h2 {
color: var(--secondary-text-color);
font-size: 36px;
font-weight: 700;
cursor: default;
margin: 0 auto 40px;
position: relative;
height: 100%;
margin: 50px auto;
padding-bottom: 10px;
display: inline-block;
width: fit-content;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-image: linear-gradient(
to right,
#ffffff00,
var(--secondary-color-light6),
var(--secondary-color-dark2),
var(--secondary-color-light6),
#ffffff00
);
}
}
$culture-pics: (
1: '03.jpg',
2: '05.jpg',
3: '02.jpg',
);
@each $num, $img in $culture-pics {
.culture-pic#{$num} {
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('../../assets/images/about/#{$img}');
background-size: cover;
background-position: center;
transition: transform 0.3s ease;
z-index: 0;
}
&:hover::before {
transform: scale(1.05);
}
> * {
z-index: 1;
}
}
}
.video-container {
.video {
width: 100%;
height: 100%;
......@@ -155,19 +198,7 @@ export default {
}
}
.about-section {
background-color: var(--background-color);
padding: 50px 0;
}
@media (max-width: 1100px) {
.left-content {
width: 100%;
gap: 8px;
}
.right-image {
width: 100%;
}
.border-colorIcon {
&:not(:last-child) {
border-right: none;
......
src/views/aboutus/timeline.vue
<template>
<div class="py-16">
<h3 class="timeline-title">发展历程</h3>
<div class="timeline-content flex justify-center items-center">
<div class="w-full">
<div class="flex justify-center items-center mb-14">
<div v-for="(item, index) in timelineItems" :key="index">
<div class="flex items-center">
<div
class="timeline-dot w-5 h-5 rounded-full cursor-pointer transition-all duration-200"
class="timeline-dot rounded-full cursor-pointer transition-all duration-200"
@click="selectTime(index)"
:class="{ 'timeline-dot-current': currentIndex === index }"></div>
<div
v-if="index !== timelineItems.length - 1"
class="timeline-line"></div>
class="timeline-line w-64 h-px"></div>
</div>
<div class="-ml-3 mt-2 text-gray-600 font-semibold text-base">
{{ item.title }}
</div>
<div class="-ml-3">{{ item.title }}</div>
</div>
</div>
<VueSlickCarousel
......@@ -22,16 +22,16 @@
@beforeChange="beforeChange">
<div v-for="(item, index) in timelineItems" :key="index">
<div
class="timeline-card"
class="timeline-card p-10 h-80 w-104 shadow-xl rounded-lg cursor-pointer"
:class="{ 'timeline-card-current': currentIndex === index }">
<div class="card-title">
<div class="w-full text-gray-600 font-semibold text-2xl">
{{ item.title }}
</div>
<div class="card-devider"></div>
<div class="bg-gray-200 mt-3 h-px" />
<div
v-for="(content, index) in item.content"
:key="index"
class="card-content">
class="card-content text-gray-600 relative pt-5 pl-5">
{{ content }}
</div>
</div>
......@@ -59,8 +59,7 @@ export default {
dots: false,
centerMode: true,
focusOnSelect: true,
// 这里使用false会导致后半内容无法居中
infinite: true,
infinite: true, // 这里使用false会导致后半内容无法居中
slidesToShow: 3,
autoplay: false,
},
......@@ -108,51 +107,28 @@ export default {
outline: none; /* 防止点击时出现默认 outline 导致“深色”闪烁感 */
}
.timeline-container {
padding: 50px 0;
}
.timeline-title {
width: 100%;
font-size: 30px;
font-weight: 600;
color: #414141;
text-align: center;
}
.timeline-content {
height: 100px;
}
.timeline-times {
display: flex;
align-items: center;
}
.timeline-dot {
width: 20px;
height: 20px;
background-color: #eca1177a;
transition: all 0.2s ease;
}
.timeline-dot:hover {
background-color: var(--primary-color);
transition: all 0.2s ease;
}
.timeline-dot-current {
border: 5px solid var(--el-color-primary-light-7);
background-color: var(--primary-color);
}
.timeline-line {
width: 300px;
height: 1px;
background-color: var(--light-color);
}
.timeline-card {
height: 300px;
width: 400px;
margin-right: 30px;
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.1);
border-radius: 10px;
cursor: pointer;
border: 1px solid transparent;
background-image: linear-gradient(
to bottom,
......@@ -173,33 +149,12 @@ export default {
border-color: rgba(153, 151, 148, 0.548);
}
.card-title {
height: 60px;
width: 100%;
padding: 35px 0 0 40px;
font-size: 20px;
font-weight: 600;
color: #414141;
}
.card-devider {
height: 1px;
width: 80%;
background-color: #e0e0e0;
margin: 12px auto 0;
}
.card-content {
padding: 20px 0 0 70px;
font-size: 16px;
color: #414141;
position: relative;
&::before {
background-color: var(--primary-color);
border-radius: 50%;
position: absolute;
left: 50px;
left: 5px;
top: 30px;
content: '';
width: 6px;
......
src/views/help/components/homeGuides.vue 0 → 100644
<template>
<div>
<div
v-for="(tab, tabIndex) in tabs"
:key="tabIndex"
class="rounded-md bg-white p-5 mb-10">
<div class="title flex place-content-between mb-5">
<div class="title-left flex items-center">
<img class="h-8" :src="Logo" alt="logo" />
<div class="text-lg font-bold ml-3">{{ tab.title }}</div>
</div>
<div
class="more flex justify-center items-center"
@click="goToMore(tab)">
<div class="text-sm">查看更多</div>
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
<div class="tabs flex gap-5">
<div
class="tab flex justify-center items-center text-gray-700 font-medium text-sm cursor-pointer"
v-for="(sub, index) in tab.content"
@click="setCurrentTab(tabIndex, index)"
:key="sub.key"
:class="{ active: getCurrentTab(tabIndex) === index }">
{{ sub.subtitle }}
</div>
</div>
<div class="tab-content grid grid-cols-3 gap-x-10 gap-y-8 mt-5">
<div
v-for="c in tab.content[getCurrentTab(tabIndex)].articles"
:key="c.article">
<a
@click.prevent="goToArticle(c)"
class="content-title text-gray-500 ml-8 cursor-pointer">
{{ c.article }}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import Logo from '../../../assets/jomall.png'
export default {
name: 'HomeGuides',
data() {
return {
Logo,
tabs: [
{
title: '入门必看',
url: 'beginner',
content: [
{
subtitle: '新手入门',
key: 'beginner',
articles: [
{
article: '九猫erp是什么?',
url: '/help/artical1',
},
{
article: '如何使用九猫erp?',
url: '/help/artical2',
},
],
},
{
subtitle: '新手入门',
key: 'beginner2',
articles: [
{
article: '九猫erp是什么?',
url: '/help/artical1',
},
],
},
],
},
{
title: '入门必看',
url: 'beginner',
content: [
{
subtitle: '新手入门',
key: 'beginner',
articles: [
{
article: '九猫erp是什么?',
url: '/help/artical1',
},
{
article: '如何使用九猫erp?',
url: '/help/artical2',
},
],
},
{
subtitle: '新手入门',
key: 'beginner2',
articles: [
{
article: '九猫erp是什么?',
url: '/help/artical1',
},
],
},
{
subtitle: '新手入门',
key: 'beginner3',
articles: [
{
article: '九猫erp是什么?',
url: '/help/artical1',
},
{
article: '如何使用九猫erp??',
url: '/help/artical2',
},
{
article: '如何使用九猫erp?',
url: '/help/artical2',
},
],
},
],
},
],
currentTabs: {}, // 为每个tab组维护独立的currentTab
}
},
methods: {
setCurrentTab(tabIndex, index) {
this.$set(this.currentTabs, tabIndex, index)
},
getCurrentTab(tabIndex) {
return this.currentTabs[tabIndex] || 0
},
goToArticle(content) {
const articlePath = content.url.replace('/help/', '')
const breadcrumbPath = [
{ name: '帮助中心', path: 'index' },
{ name: '入门必看', path: 'beginner' },
{ name: content.article, path: articlePath },
]
this.$store.dispatch('path/setCurrentPathNames', breadcrumbPath)
this.$router.push(content.url)
},
goToMore(tab) {
const breadcrumbPath = [
{ name: '帮助中心', path: 'index' },
{ name: tab.title, path: tab.url },
]
this.$store.dispatch('path/setCurrentPathNames', breadcrumbPath)
this.$router.push(`/help/${tab.url}`)
},
},
}
</script>
<style scoped lang="scss">
.more {
color: var(--primary-color);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
color: var(--light-color);
}
}
.tab {
width: 100px;
height: 40px;
border-radius: 60px;
background-color: var(--el-color-primary-light-9);
transition: all 0.2s ease;
&.active {
background-color: var(--el-color-primary-light-2);
color: white;
font-weight: 600;
}
&:hover:not(.active) {
color: var(--primary-color);
}
}
.content-title {
position: relative;
transition: all 0.2s ease;
&::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: -23px;
top: 8px;
background-color: var(--primary-color);
box-shadow: 0 0 0 5px #e6c07977;
}
&:hover {
color: var(--primary-color);
}
}
</style>
src/views/help/components/homeNewer.vue deleted 100644 → 0
<template>
<div class="rounded-md bg-white p-5">
<div class="title flex place-content-between mb-5">
<div class="title-left flex items-center">
<img class="w-10 h-10" :src="beginnerLogo" alt="入门必看" />
<div class="text-lg font-bold ml-3">入门必看</div>
</div>
<div class="more flex justify-center items-center">
<div class="text-sm">查看更多</div>
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
<div class="tabs flex gap-5">
<div
class="tab flex justify-center items-center text-white font-medium text-sm cursor-pointer"
v-for="(tab, index) in tabs"
@click="currentTab = index"
:key="tab.key">
{{ tab.name }}
</div>
</div>
<div class="tab-content grid grid-cols-3 gap-x-10 gap-y-8 mt-5">
<div v-for="content in tabs[currentTab].content" :key="content.title">
<a
@click.prevent="goToArticle(content)"
class="content-title text-gray-500 ml-8 cursor-pointer">
{{ content.title }}
</a>
</div>
</div>
</div>
</template>
<script>
import beginnerLogo from '../../../assets/images/help/beginner.svg'
export default {
name: 'HomeBeginner',
data() {
return {
beginnerLogo,
tabs: [
{
name: '新手入门',
key: 'beginner',
content: [
{
title: '九猫erp是什么?',
url: '/help/artical1',
},
{
title: '如何使用九猫erp?',
url: '/help/artical2',
},
],
},
],
currentTab: 0,
}
},
methods: {
goToArticle(content) {
const articlePath = content.url.replace('/help/', '')
const breadcrumbPath = [
{ name: '帮助中心', path: 'index' },
{ name: '入门必看', path: 'beginner' },
{ name: this.tabs[this.currentTab].name, path: 'beginner' },
{ name: content.title, path: articlePath },
]
this.$store.dispatch('path/setCurrentPathNames', breadcrumbPath)
this.$router.push(content.url)
},
},
}
</script>
<style scoped lang="scss">
.more {
color: var(--primary-color);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
color: var(--light-color);
}
}
.tab {
width: 100px;
height: 50px;
border-radius: 40px;
background-color: var(--primary-color);
}
.content-title {
position: relative;
transition: all 0.2s ease;
&::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: -23px;
top: 8px;
background-color: var(--primary-color);
box-shadow: 0 0 0 5px #e6c07977;
}
&:hover {
color: var(--primary-color);
}
}
</style>
src/views/help/helpPage.vue
<template>
<div>
<div class="top flex flex-col items-center">
<div class="text-white text-4xl font-bold">帮助中心</div>
<div class="top flex flex-col items-center py-16">
<div class="text-gray-700 text-4xl font-bold">帮助中心</div>
<el-input
v-model="keyword"
class="w-1/3 mt-5 search-input"
......@@ -43,11 +43,6 @@ export default {
}
</script>
<style scoped lang="scss">
.top {
background-color: var(--primary-color);
height: 150px;
}
::v-deep .search-input .el-input__inner {
background-color: #ffffff;
height: 45px;
......@@ -63,11 +58,11 @@ export default {
::v-deep .el-input-group__append {
color: #eceaea;
background-color: #3f419e;
background-color: var(--secondary-color);
border: none;
transition: all 0.2s ease;
&:hover {
background-color: var(--secondary-color-light1);
background-color: var(--secondary-color-light2);
}
}
......
src/views/help/pages/index.vue
<template>
<div class="flex flex-col w-full gap-5">
<HomeNewer />
<HomeNewer />
<HomeNewer />
<div class="flex flex-col w-full">
<HomeGuides />
</div>
</template>
<script>
import HomeNewer from '../components/homeNewer.vue'
import HomeGuides from '../components/homeGuides.vue'
export default {
components: {
HomeNewer,
HomeGuides,
},
}
</script>
src/views/price/pricePage.vue
......@@ -11,31 +11,6 @@
</div>
<div class="content-body">
<PriceTable />
<!-- <div class="price-container">
<div class="price-columns">
<div
v-for="(c, i) in priceColumns"
:key="i"
class="price-column"
:class="`${c.labelClass || ''} ${c.class || ''} ${
i === priceColumns.length - 1 ? 'last-column' : ''
}`">
{{ c.label }}
</div>
</div>
<div class="price-items">
<div v-for="(p, i) in prices" :key="i" class="price-item">
<div
v-for="(c, j) in priceColumns"
:key="j"
class="price-value"
:class="`${c.valueClass || ''} ${c.class || ''} ${
j === priceColumns.length - 1 ? 'last-value' : ''
}`"
v-html="value(c, p)"></div>
</div>
</div>
</div> -->
</div>
<div class="lx-section py-8 bg-colorBg lg:px-0 lg:mt-28 lg:py-16">
<div
......
src/views/price/priceTable.vue
......@@ -285,6 +285,10 @@ export default {
</script>
<style scoped>
/* 表头背景色 */
::v-deep .el-table__header th {
background-color: var(--background-color) !important;
}
/* 高亮表格hover */
::v-deep .el-table tbody tr:hover > td {
background-color: #f5f7fa !important;
......@@ -292,21 +296,21 @@ export default {
/* 高亮当前列（表头与表体） */
::v-deep .el-table td.col-hover,
::v-deep .el-table th.col-hover {
border-right: 2px solid #eca217;
border-left: 2px solid #eca217;
border-right: 2px solid var(--primary-color);
border-left: 2px solid var(--primary-color);
}
/* 表头顶部边框 */
::v-deep .el-table thead th.col-hover {
border-top: 2px solid #eca217;
background-color: #eca217 !important;
border-top: 2px solid var(--primary-color);
background-color: var(--primary-color) !important;
border-radius: 10px 10px 0 0;
color: #ffffff;
}
/* 表体最后一列底部边框 */
::v-deep .el-table tbody tr:last-child td.col-hover {
border-bottom: 2px solid #eca217;
border-bottom: 2px solid var(--primary-color);
border-radius: 0 0 10px 10px;
}
</style>
src/views/product/production.vue
......@@ -58,18 +58,72 @@
<!-- 九猫ERP -->
<div
v-if="activeTab === 'product'"
class="flex items-center justify-center bg-white p-10 w-3/5 m-auto">
class="flex flex-col items-center justify-center bg-white p-10 w-3/5 m-auto">
<img
class="erp-image"
src="../../assets/images/product/erp/01.png"
alt="九猫ERP01"
style="width: 90%" />
<img
class="erp-image"
src="../../assets/images/product/erp/02.png"
alt="九猫ERP02"
style="width: 90%" />
<img
class="erp-image"
src="../../assets/images/product/erp/03.png"
alt="九猫ERP03"
style="width: 90%" />
<img
class="erp-image"
src="../../assets/images/product/erp/04.png"
alt="九猫ERP04"
style="width: 90%" />
<img
src="../../assets/images/product/temp.png"
alt="九猫ERP"
class="erp-image"
src="../../assets/images/product/erp/05.png"
alt="九猫ERP05"
style="width: 90%" />
<img
class="erp-image"
src="../../assets/images/product/erp/06.png"
alt="九猫ERP06"
style="width: 90%" />
</div>
<!-- POD和满印供应链 -->
<div
class="custom-content w-full"
v-else-if="activeTab === 'custom-chain'">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<div class="w-8/12 m-auto flex justify-around items-center gap-32">
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
<div class="w-2/3 h-full text-base font-light">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
</p>
<p class="mt-5">
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
</div>
<div class="flex flex-col w-3/4 m-auto">
<h2 class="w-full text-center">Jomall快捷生产</h2>
<h2 class="text-center mt-10">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center">
<div>
<div class="flex flex-col">
......@@ -96,7 +150,7 @@
alt="Jomall快捷生产" />
</div>
</div>
<div class="w-10/12 m-auto">
<div class="w-10/12 m-auto flex flex-col">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around">
<div class="craft-item">
......@@ -189,57 +243,59 @@
</div>
</div>
</div>
<h2 class="text-center mt-10">满印供应链</h2>
<div class="w-8/12 m-auto flex justify-around gap-32">
<div class="w-1/2">
<div class="text-gray-500 text-base mb-4">
LA
POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
<div class="flex m-auto flex-col">
<h2 class="text-center mt-10">满印供应链</h2>
<div class="w-8/12 m-auto flex justify-around gap-32">
<div class="w-1/2">
<div class="text-gray-500 text-base mb-4">
LA
POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
</div>
<img
src="../../assets/images/product/costom/01.png"
alt="满印供应链" />
</div>
<img
src="../../assets/images/product/costom/01.png"
alt="满印供应链" />
</div>
<div class="w-1/2">
<img
src="../../assets/images/product/costom/02.png"
alt="工厂地址" />
<div class="text-gray-800 font-bold text-lg mt-4">
<div>工厂名称：九猫中国供应链</div>
<div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
<div class="w-1/2">
<img
src="../../assets/images/product/costom/02.png"
alt="工厂地址" />
<div class="text-gray-800 font-bold text-lg mt-4">
<div>工厂名称：九猫中国供应链</div>
<div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
</div>
</div>
</div>
</div>
<h2 class="text-center mt-10">业务介绍</h2>
<div class="w-8/12 m-auto flex justify-around items-center gap-32">
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
<div class="w-2/3 h-full text-base font-light">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
</p>
<p class="mt-5">
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
</div>
<!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'">
<div class="flex flex-col w-3/4 m-auto">
<div class="flex flex-col m-auto">
<h2 class="text-center mt-10">业务介绍</h2>
<div class="w-8/12 m-auto flex justify-around items-center gap-32">
<div class="video-container">
<video
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div>
<div class="w-2/3 h-full text-base font-light">
<p>
九猫（西安）科技有限公司成立于2022年，致力于为企业出海提供降本提效的全域数智化一站式管理解决方案
</p>
<p class="mt-5">
九猫科技核心团队拥有超过7年的跨境电商ERP开发经验，设计及开发过的项目覆盖产品管理系统，订单管理系统，供应链系统，供应商系统，生产管理系统，仓库管理系统，营销系统，OA系统等等。
</p>
<p class="mt-5">
2022年开始转型并专注于DTC独立站平台的产品与服务，自主研发并推出“九猫ERP软件“。
大数据集成商家平台、营销、供应链、仓储物流、财务、报表等模块，纵向打通资源，横向综合业务，全方位深度赋能。
</p>
<p class="mt-5">
九猫人始终秉承着“顾客至上”的经营理念，以“保障用户数据安全、关心客户使用体验、促进产品不断创新”为己任，意在帮助更多的跨境电商企业实现精细化管理和数字化建设。
</p>
</div>
</div>
<h2 class="w-full text-center">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center">
<div>
......@@ -267,7 +323,7 @@
alt="Jomall快捷生产" />
</div>
</div>
<div class="w-10/12 m-auto">
<div class="w-10/12 m-auto flex flex-col">
<h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around">
<div class="craft-item">
......@@ -365,8 +421,9 @@
v-else-if="activeTab === 'logistics'"
class="flex items-center justify-center bg-white p-10 w-3/5 m-auto">
<img
src="../../assets/images/product/temp.png"
alt="九猫ERP"
class="erp-image"
src="../../assets/images/product/logistic/01.png"
alt="九猫物流01"
style="width: 90%" />
</div>
</div>
......@@ -631,17 +688,18 @@ h2 {
font-size: 28px;
font-weight: 700;
cursor: default;
margin-bottom: 40px;
margin: 0 auto 40px;
position: relative;
padding-bottom: 10px;
display: inline-block;
width: fit-content;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 15%;
left: 0;
width: 100%;
height: 3px;
background-image: linear-gradient(
to right,
......@@ -671,6 +729,13 @@ h4 {
margin: 10px 0 10px 0;
}
.erp-image {
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 50px;
padding: 40px;
}
.desc-item {
position: relative;
color: var(--el-color-primary-dark-1);
......
tailwind.config.js
......@@ -3,6 +3,10 @@ module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'primary-color': 'var(--primary-color)',
'secondary-color': 'var(--secondary-color)',
},
width: {
104: '26rem',
112: '28rem',
......
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