Skip to content

O
offical_web
Commit d081497d by wusiyi
Options

feat: 官网2.0样式优化

parent d5494f62
Showing with 164 additions and 173 deletions
src/components/footBanner.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<p class="footer-title">{{ bannerContent.title }}</p> <p class="footer-title">{{ bannerContent.title }}</p>
<p class="footer-description">{{ bannerContent.description }}</p> <p class="footer-description">{{ bannerContent.description }}</p>
<button class="footer-register-btn" @click="goToLogin">立即使用</button> <button class="footer-register-btn" @click="goToLogin">立即使用</button>
<Register v-if="registerDialog" @close="registerDialog = false" /> <Register :visible="registerDialog" @close="registerDialog = false" />
</div> </div>
<div class="bg-right"></div> <div class="bg-right"></div>
</div> </div>
......
src/components/headerNavMobile.vue
...@@ -98,6 +98,12 @@ ...@@ -98,6 +98,12 @@
</template> </template>
<script> <script>
import { mapMutations } from 'vuex' import { mapMutations } from 'vuex'
import productionSvg from '../assets/images/home/production.svg'
import customSvg from '../assets/images/home/custom.svg'
import supplyChainSvg from '../assets/images/home/earth.svg'
import logisticsSvg from '../assets/images/home/logistics.svg'
import usSvg from '../assets/images/product/us.svg'
export default { export default {
name: 'headerNavMobile', name: 'headerNavMobile',
data() { data() {
...@@ -111,71 +117,34 @@ export default { ...@@ -111,71 +117,34 @@ export default {
expanding: false, expanding: false,
children: [ children: [
{ {
name: '生产管理', name: '九猫ERP',
path: '/product/production', subTitle: '精细化运营和供应链一体化解决方案',
path: '/product/production?tab=product',
icon: productionSvg,
}, },
{ {
name: '一件定制', name: 'POD和满印供应链',
path: '/product/custom-chain', subTitle: '⼏⼗万件底胚库存，多种⼯艺，五千多款模型，品类⻬全',
path: '/product/production?tab=custom-chain',
icon: customSvg,
}, },
{ {
name: '海外仓物流', name: '九猫美国供应链 [LA POD]',
path: '/product/logistics', subTitle: '美国本⼟海外⽣产线，平台客户⾸选',
path: '/product/production?tab=supply-chain',
icon: supplyChainSvg,
}, },
{ {
name: '自建站平台', name: '九猫物流',
path: '/product/platform', subTitle: '集成国内主流物流，价格优惠时效快',
path: '/product/production?tab=logistics',
icon: logisticsSvg,
}, },
], ],
}, },
{ name: '价格', path: '/price' }, { name: '价格', path: '/price' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
{ name: '案例', path: '/case' }, // { name: '案例', path: '/case' },
{
name: '资源与支持',
path: '/support',
expanding: false,
children: [
{
name: '资源',
expanding: false,
children: [
{
name: '活动信息',
path: '',
},
{
name: '入住流程平台',
path: '',
},
{
name: '资讯',
path: '',
},
],
},
{
name: '支持',
expanding: false,
children: [
{
name: '帮助中心',
path: '',
},
],
},
{
name: '了解SaaS ERP',
expanding: false,
// children: [
// {
// name: '如何通过财务管控向内部要效益',
// path: '/financial',
// },
// ],
},
],
},
{ {
name: '关于', name: '关于',
path: '/about', path: '/about',
...@@ -183,14 +152,19 @@ export default { ...@@ -183,14 +152,19 @@ export default {
children: [ children: [
{ {
name: '关于我们', name: '关于我们',
subTitle: '九猫ERP以精细化管理方案，帮助卖家实现业务增长',
path: '/about', path: '/about',
icon: usSvg,
}, },
{ // {
name: '加入我们', // name: '加入我们',
path: '/join', // subTitle: '加入九猫，一切皆有可能',
}, // path: '/join',
// icon: joinSvg,
// },
], ],
}, },
{ name: '帮助', path: '/help' },
], ],
} }
}, },
......
src/main.js
...@@ -20,12 +20,18 @@ import './assets/css/index.css' ...@@ -20,12 +20,18 @@ import './assets/css/index.css'
import './styles/index.scss' import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100 const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile()) // 响应式更新 $isMobile 状态
// document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px' const mobileData = Vue.observable({ value: isMobile() })
// window.addEventListener('resize', () => { Object.defineProperty(Vue.prototype, '$isMobile', {
// Vue.prototype.$isMobile = isMobile() get() {
// document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px' return mobileData.value
// }) },
enumerable: true,
configurable: true
})
window.addEventListener('resize', () => {
mobileData.value = isMobile()
})
new Vue({ new Vue({
store, store,
......
src/utils/axios.js
...@@ -20,7 +20,7 @@ const zImgPath = window.apiHostSetting.VUE_APP_ZIMG_URL ...@@ -20,7 +20,7 @@ const zImgPath = window.apiHostSetting.VUE_APP_ZIMG_URL
// 文件存储路径地址 // 文件存储路径地址
const filePath = getStaticPath() + 'upload/erp' const filePath = getStaticPath() + 'upload/erp'
const instance = axios.create({ const instance = axios.create({
baseURL: baseURL+'api/', baseURL: baseURL + 'api/',
timeout: 5 * 60 * 1000, timeout: 5 * 60 * 1000,
// headers: { // headers: {
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", // "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
...@@ -43,12 +43,15 @@ instance.interceptors.request.use( ...@@ -43,12 +43,15 @@ instance.interceptors.request.use(
} }
config.data = data config.data = data
} }
if (HTTPNUM === 0) { // 如果配置了 skipLoading，跳过全局 loading
loading = Vue.prototype.$loading({ if (!config.skipLoading) {
background: 'rgba(0, 0, 0, 0.3)', if (HTTPNUM === 0) {
}) loading = Vue.prototype.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
}
HTTPNUM++
} }
HTTPNUM++
cancelToken.add(config) cancelToken.add(config)
return config return config
}, },
...@@ -62,9 +65,12 @@ instance.interceptors.request.use( ...@@ -62,9 +65,12 @@ instance.interceptors.request.use(
instance.interceptors.response.use( instance.interceptors.response.use(
(res) => { (res) => {
cancelToken.remove(res.config) cancelToken.remove(res.config)
HTTPNUM-- // 如果配置了 skipLoading，跳过全局 loading 的关闭
if (HTTPNUM === 0) { if (!res.config.skipLoading) {
loading.close() HTTPNUM--
if (HTTPNUM === 0) {
loading.close()
}
} }
if (res.status === 200) { if (res.status === 200) {
if (res.data.code === 401) { if (res.data.code === 401) {
...@@ -144,22 +150,25 @@ instance.interceptors.response.use( ...@@ -144,22 +150,25 @@ instance.interceptors.response.use(
// 服务器状态码不是200的情况 // 服务器状态码不是200的情况
(error) => { (error) => {
cancelToken.clear() cancelToken.clear()
HTTPNUM-- // 如果配置了 skipLoading，跳过全局 loading 的关闭和错误提示
if (HTTPNUM == 0) { if (!error.config || !error.config.skipLoading) {
Vue.prototype.$alert(error.message, 'Error', { HTTPNUM--
confirmButtonText: '确定', if (HTTPNUM == 0) {
callback: () => {}, Vue.prototype.$alert(error.message, 'Error', {
}) confirmButtonText: '确定',
loading.close() callback: () => {},
})
loading.close()
}
} }
return Promise.reject(error) return Promise.reject(error)
} }
) )
function get(url, params) { function get(url, params, config = {}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
instance instance
.get(url, { params }) .get(url, { params, ...config })
.then((res) => { .then((res) => {
if (res.status === 200 && res.data) { if (res.status === 200 && res.data) {
resolve(res.data) resolve(res.data)
......
src/views/homePage/index.vue
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<platform /> <platform />
<product-intro /> <product-intro />
<Register v-if="registerDialog" @close="registerDialog = false" /> <Register :visible="registerDialog" @close="registerDialog = false" />
</div> </div>
</template> </template>
<script> <script>
......
src/views/homePage/login.vue
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
<el-radio-group <el-radio-group
v-model="labelPosition" v-model="labelPosition"
class="radioGroup mt-5 flex justify-center items-center mb-5" class="radioGroup mt-5 flex justify-center items-center mb-5"
size="small"> size="small"
@change="clickChange">
<el-radio-button label="passwordLogin">密码登录</el-radio-button> <el-radio-button label="passwordLogin">密码登录</el-radio-button>
<el-radio-button label="verificationLogin">验证码登录</el-radio-button> <el-radio-button label="verificationLogin">验证码登录</el-radio-button>
</el-radio-group> </el-radio-group>
...@@ -75,7 +76,7 @@ ...@@ -75,7 +76,7 @@
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
placeholder="请输入验证码(区分大小写)"></el-input> placeholder="请输入验证码(区分大小写)"></el-input>
</div> </div>
<div @click="getVerifycode"> <div class="cursor-pointer" @click="getVerifycode">
<img class="w-20 lg:w-32 h-full" :src="VerifyUrl" /> <img class="w-20 lg:w-32 h-full" :src="VerifyUrl" />
</div> </div>
</div> </div>
...@@ -88,11 +89,11 @@ ...@@ -88,11 +89,11 @@
<div class="flex-1"> <div class="flex-1">
<el-input <el-input
v-model="ruleForm.code" v-model="ruleForm.code"
prefix-icon="el-icon-message" prefix-icon="el-icon-chat-line-square"
placeholder="请输入短信验证码"></el-input> placeholder="请输入短信验证码"></el-input>
</div> </div>
<el-button <el-button
class="w-22 text-white border-0" class="w-22 text-white text-xs lg:text-base border-0"
:disabled="getCodeDisabled" :disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'get-code-button'" :class="getCodeDisabled ? 'disabled' : 'get-code-button'"
@click="verPhonecode"> @click="verPhonecode">
...@@ -119,8 +120,7 @@ ...@@ -119,8 +120,7 @@
<el-divider direction="vertical" class="bottom-line"></el-divider> <el-divider direction="vertical" class="bottom-line"></el-divider>
<div <div
class="register-btn-text cursor-pointer" class="register-btn-text cursor-pointer"
@click="registerDialog = true" @click="registerDialog = true">
style="color: var(--primary-color)">
马上注册 马上注册
</div> </div>
</div> </div>
...@@ -131,9 +131,8 @@ ...@@ -131,9 +131,8 @@
<ForgetPassword <ForgetPassword
v-if="isShowModal" v-if="isShowModal"
:visible="isShowModal" :visible="isShowModal"
:label-position="labelPosition"
@close="isShowModal = false" /> @close="isShowModal = false" />
<Register v-if="registerDialog" @close="registerDialog = false" /> <Register :visible="registerDialog" @close="registerDialog = false" />
</div> </div>
</template> </template>
...@@ -175,7 +174,9 @@ export default { ...@@ -175,7 +174,9 @@ export default {
trigger: ['blur', 'change'], trigger: ['blur', 'change'],
}, },
], ],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], code: [
{ required: true, message: '请输入短信验证码', trigger: 'blur' },
],
verifyKey: [ verifyKey: [
{ required: true, message: '请输入验证码', trigger: 'blur' }, { required: true, message: '请输入验证码', trigger: 'blur' },
], ],
...@@ -188,11 +189,23 @@ export default { ...@@ -188,11 +189,23 @@ export default {
return this.codeCountDown > 0 return this.codeCountDown > 0
}, },
}, },
mounted() {
this.getVerifycode()
},
methods: { methods: {
...mapMutations(['setUserInfo']), ...mapMutations(['setUserInfo']),
initForm() {
this.ruleForm = {}
this.codeCountDown = 0
if (this.labelPosition === 'verificationLogin') {
this.getVerifycode()
}
this.$nextTick(() => {
this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
})
},
clearTimer() {
if (this.timer) clearInterval(this.timer)
this.timer = null
},
async verPhonecode() { async verPhonecode() {
try { try {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
...@@ -263,13 +276,26 @@ export default { ...@@ -263,13 +276,26 @@ export default {
}, },
getVerifycode() { getVerifycode() {
this.verifyKeyTime = new Date().getTime() this.verifyKeyTime = new Date().getTime()
get('business/user/verifycode', { get(
verifyKey: this.verifyKeyTime, 'business/user/verifycode',
}).then((res) => { {
if (res.code === 200) { verifyKey: this.verifyKeyTime,
this.VerifyUrl = res.message },
} { skipLoading: true }
}) )
.then((res) => {
if (res.code === 200) {
this.VerifyUrl = res.message
} else {
this.VerifyUrl = ''
}
})
.catch(() => {
this.VerifyUrl = ''
})
},
clickChange() {
this.initForm()
}, },
}, },
} }
...@@ -315,9 +341,10 @@ export default { ...@@ -315,9 +341,10 @@ export default {
} }
.disabled { .disabled {
background-color: #d0d2d8; background-color: #f0f0f0;
color: #666; color: #666;
margin-left: 10px; border: 1px solid #cccccc;
cursor: not-allowed;
} }
.code-btn { .code-btn {
...@@ -348,6 +375,7 @@ export default { ...@@ -348,6 +375,7 @@ export default {
} }
.register-btn-text { .register-btn-text {
color: var(--primary-color);
&:hover { &:hover {
color: var(--hover-color); color: var(--hover-color);
} }
......
src/views/homePage/platform.vue
<template> <template>
<div class="docking-platform flex justify-center"> <div class="docking-platform flex justify-center py-8">
<div> <vue-seamless-scroll
<div class="flex justify-center flex-col items-center mb-5 gap-2"> :data="platforms"
<div class="mt-30 platforms-marquee flex justify-center"> :class-option="classOption"
<vue-seamless-scroll class="warp flex justify-center items-center">
:data="platforms" <ul class="flex flex-wrap">
:class-option="classOption" <li
class="warp"> class="platform-item flex justify-center items-center w-20"
<ul class="flex flex-wrap"> v-for="platform in platforms"
<li :key="platform.name">
class="platform-item" <a
v-for="platform in platforms" v-if="platform.link"
:key="platform.name"> :href="platform.link"
<a v-if="platform.link" :href="platform.link" target="_blank"> target="_blank"
<img class="flex justify-center items-center w-full h-full">
class="platform-image" <img
:src=" class="platform-image"
require(`../../assets/platforms/${platform.name}.${platform.type}`) :src="
" require(`../../assets/platforms/${platform.name}.${platform.type}`)
:alt="platform.name" /> "
</a> :alt="platform.name" />
<img </a>
v-else <img
class="platform-image" v-else
:src=" class="platform-image"
require(`../../assets/platforms/${platform.name}.${platform.type}`) :src="
" require(`../../assets/platforms/${platform.name}.${platform.type}`)
:alt="platform.name" /> "
</li> :alt="platform.name" />
</ul> </li>
</vue-seamless-scroll> </ul>
</div> </vue-seamless-scroll>
</div>
</div>
</div> </div>
</template> </template>
...@@ -68,7 +66,7 @@ export default { ...@@ -68,7 +66,7 @@ export default {
], ],
classOption: { classOption: {
step: 0.6, // 数值越大速度滚动越快 step: 0.6, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 18, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
autoPlay: true, // 是否自动滚动 autoPlay: true, // 是否自动滚动
...@@ -82,12 +80,6 @@ export default { ...@@ -82,12 +80,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.docking-platform { .docking-platform {
background: var(--light-color); background: var(--light-color);
padding: 30px 0 10px 0;
}
.docking-platform h2 {
color: #000;
font-weight: 500;
} }
.warp { .warp {
...@@ -95,42 +87,24 @@ export default { ...@@ -95,42 +87,24 @@ export default {
height: 100px; height: 100px;
overflow: hidden; overflow: hidden;
} }
.lx-title {
font-size: 2.25rem;
color: #ffffff;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 0.25rem;
max-width: 840px;
text-align: center;
--tw-text-opacity: 1;
letter-spacing: 1px;
}
.platforms-marquee .platform-item { .platform-item {
flex: 0 0 auto; flex: 0 0 auto;
width: 140px; width: 140px;
height: 60px; height: 60px;
display: flex;
align-items: center;
justify-content: center;
} }
.platforms-marquee .platform-item a { @media (max-width: 1100px) {
display: flex; .warp {
align-items: center; width: 90%;
justify-content: center; }
width: 100%; .platform-item {
height: 100%; width: 33%;
text-decoration: none; }
transition: opacity 0.3s ease;
} }
.platform-image { .platform-image {
width: 120px; width: 80%;
height: auto;
max-height: 80px;
object-fit: contain;
transition: filter 0.3s ease; transition: filter 0.3s ease;
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
} }
......
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