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 { ...@@ -1078,6 +1078,14 @@ ul li {
background-color: var(--background-color); 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 生成 */ /* Element UI 主题色覆盖 - 颜色变量已在 src/styles/index.scss 中基于 $primary-color 生成 */
.el-button--text { .el-button--text {
......
src/components/head.vue
...@@ -209,17 +209,9 @@ export default { ...@@ -209,17 +209,9 @@ export default {
{ name: '价格', path: '/price' }, { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
{ {
name: '关于', name: '关于我们',
path: '/about', path: '/about',
expanding: false, expanding: false,
children: [
{
name: '关于我们',
subTitle: '九猫ERP以精细化管理方案，帮助卖家实现业务增长',
path: '/about',
icon: 'fluent:people-16-filled',
},
],
}, },
{ name: '帮助', path: '/help' }, { name: '帮助', path: '/help' },
], ],
......
src/components/headHelper.vue
...@@ -3,28 +3,70 @@ ...@@ -3,28 +3,70 @@
<div class="top pt-3 pl-5 flex justify-between"> <div 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="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>
<div class="flex items-center"> <div class="flex items-center justify-center pb-2">
<div <div
v-for="nav in navs" v-for="nav in navs"
:key="nav.path" :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"> <a class="nav-link relative" :index="nav.path" :href="nav.path">
{{ nav.name }} {{ nav.name }}
</a> </a>
<div class="nav-line"></div>
</div> </div>
<div
<el-button plain class="mr-10 mb-2" size="medium">免费试用</el-button> 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> </div>
</div> </div>
</template> </template>
<script> <script>
import { Icon } from '@iconify/vue2'
import { mapMutations } from 'vuex'
import Logo from '../assets/logo.png' import Logo from '../assets/logo.png'
export default { export default {
name: 'headHelper', name: 'headHelper',
inject: {
scrollParent: 'scrollParent',
},
components: {
Icon,
},
data() { data() {
return { return {
Logo, Logo,
...@@ -33,61 +75,92 @@ export default { ...@@ -33,61 +75,92 @@ export default {
name: '首页', name: '首页',
path: '/', path: '/',
}, },
{
name: '价格',
path: '/price',
},
{
name: '关于九猫',
path: '/about',
},
], ],
userInfo: JSON.parse(localStorage.getItem('userInfo')),
} }
}, },
methods: { methods: {
...mapMutations(['setUserInfo', 'setShopKey']),
goHelp() { goHelp() {
if (this.$route.path === '/help/index') return if (this.$route.path === '/help/index') return
this.$router.push('/help') 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.top {
background-color: var(--primary-color);
height: 60px;
img {
filter: brightness(0) invert(1);
}
}
.nav-link { .nav-link {
color: #fff;
font-size: 16px; font-size: 16px;
font-weight: 530; font-weight: 530;
display: inline-block; display: inline-block;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &: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 { ::v-deep .el-button--default {
......
src/components/product-intro.vue
...@@ -207,7 +207,11 @@ ...@@ -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"> 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="section-reason-item">
<div class="season-top flex flex-col items-center"> <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="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
贴合跨境卖家核心使用场景 贴合跨境卖家核心使用场景
...@@ -235,8 +239,11 @@ ...@@ -235,8 +239,11 @@
<div class="section-reason-item"> <div class="section-reason-item">
<div class="season-top flex flex-col items-center"> <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="reason-card-title">全方位保障</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
深度开发能力与数据安全护航 深度开发能力与数据安全护航
...@@ -260,7 +267,11 @@ ...@@ -260,7 +267,11 @@
</div> </div>
<div class="section-reason-item"> <div class="section-reason-item">
<div class="season-top flex flex-col items-center"> <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="reason-card-title">全周期服务</p>
<p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg"> <p class="text-textPrimary font-normal mt-2 text-sm lg:text-lg">
全程专业服务，满足卖家需求 全程专业服务，满足卖家需求
...@@ -287,12 +298,16 @@ ...@@ -287,12 +298,16 @@
</div> </div>
</template> </template>
<script> <script>
import { Icon } from '@iconify/vue2'
import purchaseImg from '../assets/images/home/01.png' import purchaseImg from '../assets/images/home/01.png'
import financesImg from '../assets/images/home/02.png' import financesImg from '../assets/images/home/02.png'
import statementsImg from '../assets/images/home/03.png' import statementsImg from '../assets/images/home/03.png'
import adImg from '../assets/images/home/04.png' import adImg from '../assets/images/home/04.png'
export default { export default {
name: 'productIntro', name: 'productIntro',
components: {
Icon,
},
data() { data() {
return { return {
activeTab: 0, activeTab: 0,
...@@ -728,8 +743,7 @@ export default { ...@@ -728,8 +743,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 16px 0 rgb(224, 217, 195), 0 6px 14px 0 hsla(0, 0%, 100%, 0.3), box-shadow: 0 0 16px 0 var(--shadow-color);
0 16px 20px 0 rgba(230, 223, 191, 0.25);
transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
.reason-card-type { .reason-card-type {
overflow: hidden; overflow: hidden;
...@@ -739,7 +753,7 @@ export default { ...@@ -739,7 +753,7 @@ export default {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
width: 100%; width: 100%;
border-radius: 0 0 16px 16px; 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-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-size: 50px 50px;
background-repeat: repeat; background-repeat: repeat;
...@@ -754,9 +768,7 @@ export default { ...@@ -754,9 +768,7 @@ export default {
} }
.section-reason-item:hover { .section-reason-item:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 hsla(0, 0%, 100%, 0.3), box-shadow: 10px 10px 38px 0 var(--el-color-primary-light-9);
0 0 14px 0 rgba(202, 210, 238, 0.2),
28px 36px 50px 0 rgba(221, 214, 180, 0.46);
} }
.season-top { .season-top {
padding: 24px 40px 36px; padding: 24px 40px 36px;
......
src/theme/menu.css
...@@ -371,118 +371,157 @@ ...@@ -371,118 +371,157 @@
.fade-in-linear-enter-active, .fade-in-linear-enter-active,
.fade-in-linear-leave-active { .fade-in-linear-leave-active {
-webkit-transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear; } transition: opacity 200ms linear;
}
.fade-in-linear-enter, .fade-in-linear-enter,
.fade-in-linear-leave, .fade-in-linear-leave,
.fade-in-linear-leave-active { .fade-in-linear-leave-active {
opacity: 0; } opacity: 0;
}
.el-fade-in-linear-enter-active, .el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active { .el-fade-in-linear-leave-active {
-webkit-transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear; } transition: opacity 200ms linear;
}
.el-fade-in-linear-enter, .el-fade-in-linear-enter,
.el-fade-in-linear-leave, .el-fade-in-linear-leave,
.el-fade-in-linear-leave-active { .el-fade-in-linear-leave-active {
opacity: 0; } opacity: 0;
}
.el-fade-in-enter-active, .el-fade-in-enter-active,
.el-fade-in-leave-active { .el-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); -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-enter,
.el-fade-in-leave-active { .el-fade-in-leave-active {
opacity: 0; } opacity: 0;
}
.el-zoom-in-center-enter-active, .el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active { .el-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); -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-enter,
.el-zoom-in-center-leave-active { .el-zoom-in-center-leave-active {
opacity: 0; opacity: 0;
-webkit-transform: scaleX(0); -webkit-transform: scaleX(0);
transform: scaleX(0); } transform: scaleX(0);
}
.el-zoom-in-top-enter-active, .el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active { .el-zoom-in-top-leave-active {
opacity: 1; opacity: 1;
-webkit-transform: scaleY(1); -webkit-transform: scaleY(1);
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); -webkit-transition: opacity 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); -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: 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 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; -webkit-transform-origin: center top;
transform-origin: center top; } transform-origin: center top;
}
.el-zoom-in-top-enter, .el-zoom-in-top-enter,
.el-zoom-in-top-leave-active { .el-zoom-in-top-leave-active {
opacity: 0; opacity: 0;
-webkit-transform: scaleY(0); -webkit-transform: scaleY(0);
transform: scaleY(0); } transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active { .el-zoom-in-bottom-leave-active {
opacity: 1; opacity: 1;
-webkit-transform: scaleY(1); -webkit-transform: scaleY(1);
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); -webkit-transition: opacity 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); -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: 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 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; -webkit-transform-origin: center bottom;
transform-origin: center bottom; } transform-origin: center bottom;
}
.el-zoom-in-bottom-enter, .el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active { .el-zoom-in-bottom-leave-active {
opacity: 0; opacity: 0;
-webkit-transform: scaleY(0); -webkit-transform: scaleY(0);
transform: scaleY(0); } transform: scaleY(0);
}
.el-zoom-in-left-enter-active, .el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active { .el-zoom-in-left-leave-active {
opacity: 1; opacity: 1;
-webkit-transform: scale(1, 1); -webkit-transform: scale(1, 1);
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); -webkit-transition: opacity 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); -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: 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 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; -webkit-transform-origin: top left;
transform-origin: top left; } transform-origin: top left;
}
.el-zoom-in-left-enter, .el-zoom-in-left-enter,
.el-zoom-in-left-leave-active { .el-zoom-in-left-leave-active {
opacity: 0; opacity: 0;
-webkit-transform: scale(0.45, 0.45); -webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45); } transform: scale(0.45, 0.45);
}
.collapse-transition { .collapse-transition {
-webkit-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,
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom 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 { .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; -webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right 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-enter-active,
.el-list-leave-active { .el-list-leave-active {
-webkit-transition: all 1s; -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; opacity: 0;
-webkit-transform: translateY(-30px); -webkit-transform: translateY(-30px);
transform: translateY(-30px); } transform: translateY(-30px);
}
.el-opacity-transition { .el-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1); -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 { .el-menu {
border-right: solid 1px #e6e6e6; border-right: solid 1px #e6e6e6;
...@@ -490,118 +529,155 @@ ...@@ -490,118 +529,155 @@
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
background-color: #FFFFFF; } background-color: #ffffff;
.el-menu::before, }
.el-menu::after { .el-menu::before,
display: table; .el-menu::after {
content: ""; } display: table;
.el-menu::after { content: '';
clear: both; } }
.el-menu.el-menu--horizontal { .el-menu::after {
border-bottom: solid 1px #e6e6e6; } clear: both;
.el-menu--horizontal { }
border-right: none; } .el-menu.el-menu--horizontal {
.el-menu--horizontal > .el-menu-item { border-bottom: solid 1px #e6e6e6;
float: left; }
height: 60px; .el-menu--horizontal {
line-height: 60px; border-right: none;
margin: 0; }
border-bottom: 2px solid transparent; .el-menu--horizontal > .el-menu-item {
color: #909399; } float: left;
.el-menu--horizontal > .el-menu-item a, height: 60px;
.el-menu--horizontal > .el-menu-item a:hover { line-height: 60px;
color: inherit; } margin: 0;
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus { border-bottom: 2px solid transparent;
background-color: #fff; } color: #909399;
.el-menu--horizontal > .el-submenu { }
float: left; } .el-menu--horizontal > .el-menu-item a,
.el-menu--horizontal > .el-submenu:focus, .el-menu--horizontal > .el-submenu:hover { .el-menu--horizontal > .el-menu-item a:hover {
outline: none; } color: inherit;
.el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title { }
color: #303133; } .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title { .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
border-bottom: 2px solid #409EFF; background-color: #fff;
color: #303133; } }
.el-menu--horizontal > .el-submenu .el-submenu__title { .el-menu--horizontal > .el-submenu {
height: 60px; float: left;
line-height: 60px; }
border-bottom: 2px solid transparent; .el-menu--horizontal > .el-submenu:focus,
color: #909399; } .el-menu--horizontal > .el-submenu:hover {
.el-menu--horizontal > .el-submenu .el-submenu__title:hover { outline: none;
background-color: #fff; } }
.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow { .el-menu--horizontal > .el-submenu:focus .el-submenu__title,
position: static; .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
vertical-align: middle; color: #303133;
margin-left: 8px; }
margin-top: -3px; } .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
.el-menu--horizontal .el-menu .el-menu-item, border-bottom: 2px solid #409eff;
.el-menu--horizontal .el-menu .el-submenu__title { color: #303133;
background-color: #FFFFFF; }
float: none; .el-menu--horizontal > .el-submenu .el-submenu__title {
height: 36px; height: 60px;
line-height: 36px; line-height: 60px;
padding: 0 10px; border-bottom: 2px solid transparent;
color: #909399; } color: #909399;
.el-menu--horizontal .el-menu .el-menu-item.is-active, }
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
color: #303133; } background-color: #fff;
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, }
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus { .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
outline: none; position: static;
color: #303133; } vertical-align: middle;
.el-menu--horizontal > .el-menu-item.is-active { margin-left: 8px;
border-bottom: 2px solid #409EFF; margin-top: -3px;
color: #303133; } }
.el-menu--collapse { .el-menu--horizontal .el-menu .el-menu-item,
width: 64px; } .el-menu--horizontal .el-menu .el-submenu__title {
.el-menu--collapse > .el-menu-item [class^="el-icon-"], background-color: #ffffff;
.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] { float: none;
margin: 0; height: 36px;
vertical-align: middle; line-height: 36px;
width: 24px; padding: 0 10px;
text-align: center; } color: #909399;
.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow, }
.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { .el-menu--horizontal .el-menu .el-menu-item.is-active,
display: none; } .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
.el-menu--collapse > .el-menu-item span, color: #303133;
.el-menu--collapse > .el-submenu > .el-submenu__title span { }
height: 0; .el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
width: 0; .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
overflow: hidden; outline: none;
visibility: hidden; color: #303133;
display: inline-block; } }
.el-menu--collapse > .el-menu-item.is-active i { .el-menu--horizontal > .el-menu-item.is-active {
color: inherit; } border-bottom: 2px solid #409eff;
.el-menu--collapse .el-menu .el-submenu { color: #303133;
min-width: 200px; } }
.el-menu--collapse .el-submenu { .el-menu--collapse {
position: relative; } width: 64px;
.el-menu--collapse .el-submenu .el-menu { }
position: absolute; .el-menu--collapse > .el-menu-item [class^='el-icon-'],
margin-left: 5px; .el-menu--collapse > .el-submenu > .el-submenu__title [class^='el-icon-'] {
top: 0; margin: 0;
left: 100%; vertical-align: middle;
z-index: 10; width: 24px;
border: 1px solid #E4E7ED; text-align: center;
border-radius: 2px; }
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); .el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow { display: none;
-webkit-transform: none; }
transform: none; } .el-menu--collapse > .el-menu-item span,
.el-menu--popup { .el-menu--collapse > .el-submenu > .el-submenu__title span {
z-index: 100; height: 0;
min-width: 200px; width: 0;
border: none; overflow: hidden;
padding: 5px 0; visibility: hidden;
border-radius: 2px; display: inline-block;
-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-menu-item.is-active i {
.el-menu--popup-bottom-start { color: inherit;
margin-top: 5px; } }
.el-menu--popup-right-start { .el-menu--collapse .el-menu .el-submenu {
margin-left: 5px; min-width: 200px;
margin-right: 5px; } }
.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 { .el-menu-item {
height: 56px; height: 56px;
...@@ -612,108 +688,135 @@ ...@@ -612,108 +688,135 @@
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
-webkit-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 .3s, background-color .3s, color .3s; transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; } white-space: nowrap;
.el-menu-item * { }
vertical-align: middle; } .el-menu-item * {
.el-menu-item i { vertical-align: middle;
color: #909399; } }
.el-menu-item:hover, .el-menu-item:focus { .el-menu-item i {
outline: none; color: #909399;
background-color: #ecf5ff; } }
.el-menu-item.is-disabled { .el-menu-item:hover,
opacity: 0.25; .el-menu-item:focus {
cursor: not-allowed; outline: none;
background: none !important; } background-color: var(--el-color-primary-light-8);
.el-menu-item [class^="el-icon-"] { }
margin-right: 5px; .el-menu-item.is-disabled {
width: 24px; opacity: 0.25;
text-align: center; cursor: not-allowed;
font-size: 18px; background: none !important;
vertical-align: middle; } }
.el-menu-item.is-active { .el-menu-item [class^='el-icon-'] {
color: #409EFF; } margin-right: 5px;
.el-menu-item.is-active i { width: 24px;
color: inherit; } 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 { .el-submenu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; } padding-left: 0;
.el-submenu__title { }
height: 56px; .el-submenu__title {
line-height: 56px; height: 56px;
font-size: 14px; line-height: 56px;
color: #303133; font-size: 14px;
padding: 0 20px; color: #303133;
list-style: none; padding: 0 20px;
cursor: pointer; list-style: none;
position: relative; cursor: pointer;
-webkit-transition: border-color .3s, background-color .3s, color .3s; position: relative;
transition: border-color .3s, background-color .3s, color .3s; -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
-webkit-box-sizing: border-box; transition: border-color 0.3s, background-color 0.3s, color 0.3s;
box-sizing: border-box; -webkit-box-sizing: border-box;
white-space: nowrap; } box-sizing: border-box;
.el-submenu__title * { white-space: nowrap;
vertical-align: middle; } }
.el-submenu__title i { .el-submenu__title * {
color: #909399; } vertical-align: middle;
.el-submenu__title:hover, .el-submenu__title:focus { }
outline: none; .el-submenu__title i {
background-color: #ecf5ff; } color: #909399;
.el-submenu__title.is-disabled { }
opacity: 0.25; .el-submenu__title:hover,
cursor: not-allowed; .el-submenu__title:focus {
background: none !important; } outline: none;
.el-submenu__title:hover { background-color: #ecf5ff;
background-color: #ecf5ff; } }
.el-submenu .el-menu { .el-submenu__title.is-disabled {
border: none; } opacity: 0.25;
.el-submenu .el-menu-item { cursor: not-allowed;
height: 50px; background: none !important;
line-height: 50px; }
padding: 0 45px; .el-submenu__title:hover {
min-width: 200px; } background-color: #ecf5ff;
.el-submenu__icon-arrow { }
position: absolute; .el-submenu .el-menu {
top: 50%; border: none;
right: 20px; }
margin-top: -7px; .el-submenu .el-menu-item {
-webkit-transition: -webkit-transform .3s; height: 50px;
transition: -webkit-transform .3s; line-height: 50px;
transition: transform .3s; padding: 0 45px;
transition: transform .3s, -webkit-transform .3s; min-width: 200px;
font-size: 12px; } }
.el-submenu.is-active .el-submenu__title { .el-submenu__icon-arrow {
border-bottom-color: #409EFF; } position: absolute;
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow { top: 50%;
-webkit-transform: rotateZ(180deg); right: 20px;
transform: rotateZ(180deg); } margin-top: -7px;
.el-submenu.is-disabled .el-submenu__title, -webkit-transition: -webkit-transform 0.3s;
.el-submenu.is-disabled .el-menu-item { transition: -webkit-transform 0.3s;
opacity: 0.25; transition: transform 0.3s;
cursor: not-allowed; transition: transform 0.3s, -webkit-transform 0.3s;
background: none !important; } font-size: 12px;
.el-submenu [class^="el-icon-"] { }
vertical-align: middle; .el-submenu.is-active .el-submenu__title {
margin-right: 5px; border-bottom-color: #409eff;
width: 24px; }
text-align: center; .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
font-size: 18px; } -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 { .el-menu-item-group > ul {
padding: 0; } padding: 0;
}
.el-menu-item-group__title { .el-menu-item-group__title {
padding: 7px 0 7px 20px; padding: 7px 0 7px 20px;
line-height: normal; line-height: normal;
font-size: 12px; font-size: 12px;
color: #909399; } color: #909399;
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
-webkit-transition: .2s; -webkit-transition: 0.2s;
transition: .2s; transition: 0.2s;
opacity: 0; } opacity: 0;
}
src/views/aboutus/aboutPage.vue
...@@ -2,114 +2,95 @@ ...@@ -2,114 +2,95 @@
<div class="about-us"> <div class="about-us">
<div class="banner-container"> <div class="banner-container">
<div <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"> <div class="left-content">
<h3 <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 跨境电商 用九猫ERP
</h3> </h3>
<div <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> <span>以一站式跨境电商运营管理系统，助力卖家轻松实现业务增长</span>
</div> </div>
</div> </div>
<div class="map-container mt-5">
<div class="right-image"> <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 <video
width="100%" class="video flex justify-center items-center"
class="video" src="../../assets/video/abount-jomalls2-video.mp4"
src="../../assets/video/about-us-video.mp4" controls></video>
autoplay
loop
muted></video>
</div> </div>
</div> </div>
</div> </div>
<div class="about-section about-lx px-4 lg:px-0 lg:mt-28"> <div class="w-4/5 flex flex-col m-auto mt-20">
<div <h2 class="text-center">企业文化</h2>
class="about-content w-full-70 w-full-90 mx-auto flex flex-col justify-between items-center"> <div class="flex justify-center flex-wrap mt-10 gap-20 cursor-default">
<div <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 <div
data-aos="fade-right" class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
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>
</div> </div>
<div class="video-container"> <div class="text-gray-100 text-base text-center">
<video 让全球生意更高效
width="100%"
class="video"
src="../../assets/video/abount-jomalls2-video.mp4"
controls></video>
</div> </div>
</div> </div>
<div class="flex justify-between w-full mt-8 lg:mt-24"> <div
<div class="flex-col flex h-20 border-colorIcon lg:w-full"> class="culture-pic2 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center">
<div <div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-start" class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
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> </div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2"> <div class="text-gray-100 text-base text-center">
<div 成为全球最大的电商IT服务公司
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> </div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2"> </div>
<div <div
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center" class="culture-pic3 bg-center bg-cover w-80 h-56 overflow-hidden p-5 relative flex items-center justify-center">
style="color: var(--primary-color)"> <div
20+ class="text-gray-200 text-2xl font-semibold absolute top-5 left-5">
</div> 价值观
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
服务中心
</div>
</div> </div>
<div class="flex-col flex h-20 border-colorIcon lg:w-full border-l-2"> <div class="text-gray-100 text-base text-center">
<div 客户第一、诚实正直
class="flex text-xl lg:text-5xl !lg:leading-10 justify-center" <br />
style="color: var(--primary-color)"> 艰苦奋斗、敢于批评
100+ <br />
</div> 团队合作、拥抱变化
<div
class="flex text-sm lg:text-xl text-textContent mt-0.5 justify-center">
服务上市/IPO阶段企业
</div>
</div> </div>
</div> </div>
</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> </div>
</template> </template>
<script> <script>
...@@ -122,27 +103,89 @@ export default { ...@@ -122,27 +103,89 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.left-content { .banner-container {
width: 30%; background-color: var(--background-color);
display: flex; .banner-title {
flex-direction: column; color: var(--primary-color);
gap: 20px; }
} }
.right-image {
width: 70%; .map-container {
width: 55%;
position: relative; position: relative;
height: 100%; img {
.video { filter: grayscale(100%) hue-rotate(10deg) saturate(800%) brightness(110%);
width: 100%; width: 100%;
height: 100%; height: auto;
object-fit: fill;
} }
} }
.video-container {
width: 50%; h2 {
color: var(--secondary-text-color);
font-size: 36px;
font-weight: 700;
cursor: default;
margin: 0 auto 40px;
position: relative; position: relative;
height: 100%; padding-bottom: 10px;
margin: 50px auto; 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 { .video {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -155,19 +198,7 @@ export default { ...@@ -155,19 +198,7 @@ export default {
} }
} }
.about-section {
background-color: var(--background-color);
padding: 50px 0;
}
@media (max-width: 1100px) { @media (max-width: 1100px) {
.left-content {
width: 100%;
gap: 8px;
}
.right-image {
width: 100%;
}
.border-colorIcon { .border-colorIcon {
&:not(:last-child) { &:not(:last-child) {
border-right: none; border-right: none;
......
src/views/aboutus/timeline.vue
<template> <template>
<div class="py-16"> <div class="w-full">
<h3 class="timeline-title">发展历程</h3> <div class="flex justify-center items-center mb-14">
<div class="timeline-content flex justify-center items-center">
<div v-for="(item, index) in timelineItems" :key="index"> <div v-for="(item, index) in timelineItems" :key="index">
<div class="flex items-center"> <div class="flex items-center">
<div <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)" @click="selectTime(index)"
: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"></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>
<div class="-ml-3">{{ item.title }}</div>
</div> </div>
</div> </div>
<VueSlickCarousel <VueSlickCarousel
...@@ -22,16 +22,16 @@ ...@@ -22,16 +22,16 @@
@beforeChange="beforeChange"> @beforeChange="beforeChange">
<div v-for="(item, index) in timelineItems" :key="index"> <div v-for="(item, index) in timelineItems" :key="index">
<div <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 }"> :class="{ 'timeline-card-current': currentIndex === index }">
<div class="card-title"> <div class="w-full text-gray-600 font-semibold text-2xl">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="card-devider"></div> <div class="bg-gray-200 mt-3 h-px" />
<div <div
v-for="(content, index) in item.content" v-for="(content, index) in item.content"
:key="index" :key="index"
class="card-content"> class="card-content text-gray-600 relative pt-5 pl-5">
{{ content }} {{ content }}
</div> </div>
</div> </div>
...@@ -59,8 +59,7 @@ export default { ...@@ -59,8 +59,7 @@ export default {
dots: false, dots: false,
centerMode: true, centerMode: true,
focusOnSelect: true, focusOnSelect: true,
// 这里使用false会导致后半内容无法居中 infinite: true, // 这里使用false会导致后半内容无法居中
infinite: true,
slidesToShow: 3, slidesToShow: 3,
autoplay: false, autoplay: false,
}, },
...@@ -108,51 +107,28 @@ export default { ...@@ -108,51 +107,28 @@ export default {
outline: none; /* 防止点击时出现默认 outline 导致“深色”闪烁感 */ 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 { .timeline-dot {
width: 20px;
height: 20px;
background-color: #eca1177a; background-color: #eca1177a;
transition: all 0.2s ease;
} }
.timeline-dot:hover { .timeline-dot:hover {
background-color: var(--primary-color); background-color: var(--primary-color);
transition: all 0.2s ease;
} }
.timeline-dot-current { .timeline-dot-current {
border: 5px solid var(--el-color-primary-light-7);
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.timeline-line { .timeline-line {
width: 300px;
height: 1px;
background-color: var(--light-color); background-color: var(--light-color);
} }
.timeline-card { .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; border: 1px solid transparent;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
...@@ -173,33 +149,12 @@ export default { ...@@ -173,33 +149,12 @@ export default {
border-color: rgba(153, 151, 148, 0.548); 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 { .card-content {
padding: 20px 0 0 70px;
font-size: 16px;
color: #414141;
position: relative;
&::before { &::before {
background-color: var(--primary-color); background-color: var(--primary-color);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 50px; left: 5px;
top: 30px; top: 30px;
content: ''; content: '';
width: 6px; 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> <template>
<div> <div>
<div class="top flex flex-col items-center"> <div class="top flex flex-col items-center py-16">
<div class="text-white text-4xl font-bold">帮助中心</div> <div class="text-gray-700 text-4xl font-bold">帮助中心</div>
<el-input <el-input
v-model="keyword" v-model="keyword"
class="w-1/3 mt-5 search-input" class="w-1/3 mt-5 search-input"
...@@ -43,11 +43,6 @@ export default { ...@@ -43,11 +43,6 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.top {
background-color: var(--primary-color);
height: 150px;
}
::v-deep .search-input .el-input__inner { ::v-deep .search-input .el-input__inner {
background-color: #ffffff; background-color: #ffffff;
height: 45px; height: 45px;
...@@ -63,11 +58,11 @@ export default { ...@@ -63,11 +58,11 @@ export default {
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
color: #eceaea; color: #eceaea;
background-color: #3f419e; background-color: var(--secondary-color);
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background-color: var(--secondary-color-light1); background-color: var(--secondary-color-light2);
} }
} }
......
src/views/help/pages/index.vue
<template> <template>
<div class="flex flex-col w-full gap-5"> <div class="flex flex-col w-full">
<HomeNewer /> <HomeGuides />
<HomeNewer />
<HomeNewer />
</div> </div>
</template> </template>
<script> <script>
import HomeNewer from '../components/homeNewer.vue' import HomeGuides from '../components/homeGuides.vue'
export default { export default {
components: { components: {
HomeNewer, HomeGuides,
}, },
} }
</script> </script>
src/views/price/pricePage.vue
...@@ -11,31 +11,6 @@ ...@@ -11,31 +11,6 @@
</div> </div>
<div class="content-body"> <div class="content-body">
<PriceTable /> <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>
<div class="lx-section py-8 bg-colorBg lg:px-0 lg:mt-28 lg:py-16"> <div class="lx-section py-8 bg-colorBg lg:px-0 lg:mt-28 lg:py-16">
<div <div
......
src/views/price/priceTable.vue
...@@ -285,6 +285,10 @@ export default { ...@@ -285,6 +285,10 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 表头背景色 */
::v-deep .el-table__header th {
background-color: var(--background-color) !important;
}
/* 高亮表格hover */ /* 高亮表格hover */
::v-deep .el-table tbody tr:hover > td { ::v-deep .el-table tbody tr:hover > td {
background-color: #f5f7fa !important; background-color: #f5f7fa !important;
...@@ -292,21 +296,21 @@ export default { ...@@ -292,21 +296,21 @@ export default {
/* 高亮当前列（表头与表体） */ /* 高亮当前列（表头与表体） */
::v-deep .el-table td.col-hover, ::v-deep .el-table td.col-hover,
::v-deep .el-table th.col-hover { ::v-deep .el-table th.col-hover {
border-right: 2px solid #eca217; border-right: 2px solid var(--primary-color);
border-left: 2px solid #eca217; border-left: 2px solid var(--primary-color);
} }
/* 表头顶部边框 */ /* 表头顶部边框 */
::v-deep .el-table thead th.col-hover { ::v-deep .el-table thead th.col-hover {
border-top: 2px solid #eca217; border-top: 2px solid var(--primary-color);
background-color: #eca217 !important; background-color: var(--primary-color) !important;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
color: #ffffff; color: #ffffff;
} }
/* 表体最后一列底部边框 */ /* 表体最后一列底部边框 */
::v-deep .el-table tbody tr:last-child td.col-hover { ::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; border-radius: 0 0 10px 10px;
} }
</style> </style>
src/views/product/production.vue
...@@ -58,18 +58,72 @@ ...@@ -58,18 +58,72 @@
<!-- 九猫ERP --> <!-- 九猫ERP -->
<div <div
v-if="activeTab === 'product'" 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 <img
src="../../assets/images/product/temp.png" class="erp-image"
alt="九猫ERP" 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%" /> style="width: 90%" />
</div> </div>
<!-- POD和满印供应链 --> <!-- POD和满印供应链 -->
<div <div
class="custom-content w-full" class="custom-content w-full"
v-else-if="activeTab === 'custom-chain'"> 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"> <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 class="w-full flex justify-around items-center">
<div> <div>
<div class="flex flex-col"> <div class="flex flex-col">
...@@ -96,7 +150,7 @@ ...@@ -96,7 +150,7 @@
alt="Jomall快捷生产" /> alt="Jomall快捷生产" />
</div> </div>
</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> <h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around"> <div class="flex justify-around">
<div class="craft-item"> <div class="craft-item">
...@@ -189,57 +243,59 @@ ...@@ -189,57 +243,59 @@
</div> </div>
</div> </div>
</div> </div>
<h2 class="text-center mt-10">满印供应链</h2> <div class="flex m-auto flex-col">
<div class="w-8/12 m-auto flex justify-around gap-32"> <h2 class="text-center mt-10">满印供应链</h2>
<div class="w-1/2"> <div class="w-8/12 m-auto flex justify-around gap-32">
<div class="text-gray-500 text-base mb-4"> <div class="w-1/2">
LA <div class="text-gray-500 text-base mb-4">
POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO LA
B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本 POD位于广东省广州市番禺区，支持白墨烫画，直喷、刺绣等多种工艺，自营车间规划近12台PRO
B直喷机以及X600机器;搭载自动化分拣系统，折衣、打包等全自动流水线提升订单处理效率与准确性，九猫物流衔接全球物流渠道，优化尾程配送时效成本
</div>
<img
src="../../assets/images/product/costom/01.png"
alt="满印供应链" />
</div> </div>
<img <div class="w-1/2">
src="../../assets/images/product/costom/01.png" <img
alt="满印供应链" /> src="../../assets/images/product/costom/02.png"
</div> alt="工厂地址" />
<div class="w-1/2"> <div class="text-gray-800 font-bold text-lg mt-4">
<img <div>工厂名称：九猫中国供应链</div>
src="../../assets/images/product/costom/02.png" <div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
alt="工厂地址" /> </div>
<div class="text-gray-800 font-bold text-lg mt-4">
<div>工厂名称：九猫中国供应链</div>
<div>工厂地址：中国广东省广州市番禺区兴南大道403号</div>
</div> </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>
<!-- 九猫美国供应链 --> <!-- 九猫美国供应链 -->
<div v-else-if="activeTab === 'supply-chain'"> <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> <h2 class="w-full text-center">Jomall快捷生产</h2>
<div class="w-full flex justify-around items-center"> <div class="w-full flex justify-around items-center">
<div> <div>
...@@ -267,7 +323,7 @@ ...@@ -267,7 +323,7 @@
alt="Jomall快捷生产" /> alt="Jomall快捷生产" />
</div> </div>
</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> <h2 class="text-center mt-10">工艺优势</h2>
<div class="flex justify-around"> <div class="flex justify-around">
<div class="craft-item"> <div class="craft-item">
...@@ -365,8 +421,9 @@ ...@@ -365,8 +421,9 @@
v-else-if="activeTab === 'logistics'" v-else-if="activeTab === 'logistics'"
class="flex items-center justify-center bg-white p-10 w-3/5 m-auto"> class="flex items-center justify-center bg-white p-10 w-3/5 m-auto">
<img <img
src="../../assets/images/product/temp.png" class="erp-image"
alt="九猫ERP" src="../../assets/images/product/logistic/01.png"
alt="九猫物流01"
style="width: 90%" /> style="width: 90%" />
</div> </div>
</div> </div>
...@@ -631,17 +688,18 @@ h2 { ...@@ -631,17 +688,18 @@ h2 {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
cursor: default; cursor: default;
margin-bottom: 40px; margin: 0 auto 40px;
position: relative; position: relative;
padding-bottom: 10px; padding-bottom: 10px;
display: inline-block;
width: fit-content;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 0;
transform: translateX(-50%); width: 100%;
width: 15%;
height: 3px; height: 3px;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
...@@ -671,6 +729,13 @@ h4 { ...@@ -671,6 +729,13 @@ h4 {
margin: 10px 0 10px 0; 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 { .desc-item {
position: relative; position: relative;
color: var(--el-color-primary-dark-1); color: var(--el-color-primary-dark-1);
......
tailwind.config.js
...@@ -3,6 +3,10 @@ module.exports = { ...@@ -3,6 +3,10 @@ module.exports = {
purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: { extend: {
colors: {
'primary-color': 'var(--primary-color)',
'secondary-color': 'var(--secondary-color)',
},
width: { width: {
104: '26rem', 104: '26rem',
112: '28rem', 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