Skip to content

O
offical_web
Commit 2d8f595d by wusiyi
Options

feat: 官网2.0样式优化

parent d081497d
Showing with 370 additions and 196 deletions
package.json
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"prettier": "^2.2.1", "prettier": "^2.8.8",
"sass": "^1.58.3", "sass": "^1.58.3",
"sass-loader": "^10", "sass-loader": "^10",
"stylus": "~0.54.7", "stylus": "~0.54.7",
......
src/assets/css/common.css
...@@ -995,7 +995,7 @@ ul li { ...@@ -995,7 +995,7 @@ ul li {
.el-message { .el-message {
z-index: 7000 !important; z-index: 7000 !important;
margin-top: 400px !important; /* margin-top: 400px !important; */
} }
.el-select.green .el-input__inner { .el-select.green .el-input__inner {
...@@ -1101,6 +1101,25 @@ ul li { ...@@ -1101,6 +1101,25 @@ ul li {
--el-color-primary-dark-9: #000000; --el-color-primary-dark-9: #000000;
} }
.el-button--text {
border-color: transparent;
color: var(--el-color-primary);
background: transparent;
padding-left: 0;
padding-right: 0;
}
.el-button--text:hover,
.el-button--text:focus {
color: var(--el-color-primary-light-1);
border-color: transparent;
background-color: transparent;
}
.el-button--text:active {
color: var(--el-color-primary-light-1);
border-color: transparent;
background-color: transparent;
}
/* 按钮主题色 */ /* 按钮主题色 */
.el-button--primary { .el-button--primary {
background-color: var(--el-color-primary) !important; background-color: var(--el-color-primary) !important;
......
src/assets/images/home/wx2.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M5.457 18.185C3.358 16.677 2 14.4 2 11.908 2 7.323 6.475 3.6 12 3.6s10 3.723 10 8.308c0 4.584-4.475 8.307-10 8.307a11.36 11.36 0 0 1-3.272-.461c-.092-.03-.216-.03-.308-.03-.185 0-.37.06-.525.153l-2.191 1.261a.44.44 0 0 1-.185.062.342.342 0 0 1-.34-.338c0-.093.03-.154.062-.247.03-.03.308-1.046.463-1.661 0-.062.03-.154.03-.216 0-.246-.092-.43-.277-.553zm3.21-7.674c.717 0 1.285-.568 1.285-1.285 0-.718-.568-1.286-1.285-1.286-.718 0-1.285.568-1.285 1.286 0 .717.567 1.285 1.285 1.285zm6.666 0c.718 0 1.285-.568 1.285-1.285 0-.718-.567-1.286-1.285-1.286-.717 0-1.285.568-1.285 1.286 0 .717.568 1.285 1.285 1.285z"/>
</g>
</svg>
src/assets/mobile.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="#d28f0f" d="M20 17.5a1.5 1.5 0 0 1 .144 2.993L20 20.5H4a1.5 1.5 0 0 1-.144-2.993L4 17.5zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 0 1 0-3zm0-7a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 1 1 0-3z" />
</g>
</svg>
\ No newline at end of file
src/components/footBanner.vue
<template> <template>
<div class="footer-bg" v-if="bannerContent"> <div class="footer-bg" v-if="bannerContent">
<div class="footer-banner place-content-between"> <div
<div class="bg-left"></div> class="footer-banner flex flex-col items-center place-content-between py-16">
<div class="content"> <div class="footer-text flex flex-col items-center mb-10">
<p class="footer-title">{{ bannerContent.title }}</p> <p
<p class="footer-description">{{ bannerContent.description }}</p> class="footer-title font-medium text-3xl lg:text-4xl mb-5 text-center text-gray-700 tracking-wide">
<button class="footer-register-btn" @click="goToLogin">立即使用</button> {{ bannerContent.title }}
<Register :visible="registerDialog" @close="registerDialog = false" /> </p>
<p
class="footer-description font-sm text-lg mt-2 text-center text-gray-500">
{{ bannerContent.description }}
</p>
</div>
<div class="footer-down flex items-center w-full place-content-between">
<div class="bg-left w-20 lg:w-72 h-10 lg:h-14"></div>
<button
class="footer-register-btn lg:w-48 w-24 h-10 lg:h-14 rounded-lg text-base lg:text-lg text-gray-700 cursor-pointer transition ease-in-out duration-300 hover:bg-primary-color hover:text-white"
@click="goToLogin">
立即使用
</button>
<div class="bg-right w-20 lg:w-72 h-10 lg:h-14"></div>
</div> </div>
<div class="bg-right"></div>
</div> </div>
<Register :visible="registerDialog" @close="registerDialog = false" />
</div> </div>
</template> </template>
<script> <script>
...@@ -75,65 +88,19 @@ export default { ...@@ -75,65 +88,19 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.footer-banner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 60px 0;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgb(70, 70, 70);
letter-spacing: 2px;
}
.footer-description {
font-weight: 400;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgb(105, 105, 105);
}
}
.content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-register-btn { .footer-register-btn {
width: 200px;
height: 60px;
display: block;
background: rgba(var(--primary-color), 0.5);
border-radius: 10px;
border: 1px solid #efad32; border: 1px solid #efad32;
font-size: 18px;
color: #3d3d3d;
cursor: pointer;
transition: all 0.3s ease;
} }
.bg-left { .bg-left {
margin-top: 100px;
width: 300px;
height: 60px;
background-image: linear-gradient(to right, #efad32, #efad3270, #efad3200); background-image: linear-gradient(to right, #efad32, #efad3270, #efad3200);
} }
.bg-right { .bg-right {
margin-top: 100px;
width: 300px;
height: 60px;
background-image: linear-gradient(to left, #efad32, #efad3270, #efad3200); background-image: linear-gradient(to left, #efad32, #efad3270, #efad3200);
} }
.footer-register-btn:hover { .footer-register-btn:hover {
color: #ffffff;
background: (var(--primary-color)); background: (var(--primary-color));
} }
</style> </style>
src/components/footer.vue
...@@ -36,14 +36,18 @@ ...@@ -36,14 +36,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center mt-20"> <div
<el-tooltip class="item" effect="light" placement="top"> class="flex flex-col gap-5 lg:gap-0 lg:flex-row justify-center items-center mt-0 lg:mt-20 mr-0 lg:mr-48">
<el-tooltip
class="item"
effect="light"
:placement="$isMobile ? 'right' : 'top'">
<div slot="content" class="flex flex-col items-center"> <div slot="content" class="flex flex-col items-center">
<img <img
class="w-32 h-32" :class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/dy.png" src="../assets/images/home/dy.png"
alt="" /> alt="" />
<div>抖音二维码</div> <div class="text-base lg:text-sm">九猫抖音</div>
</div> </div>
<div class="icons-circle"> <div class="icons-circle">
<img <img
...@@ -52,14 +56,16 @@ ...@@ -52,14 +56,16 @@
alt="" /> alt="" />
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip
<el-tooltip class="item" effect="light" placement="top"> class="item"
effect="light"
:placement="$isMobile ? 'right' : 'top'">
<div slot="content" class="flex flex-col items-center"> <div slot="content" class="flex flex-col items-center">
<img <img
class="w-32 h-32" :class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/xhs.png" src="../assets/images/home/xhs.png"
alt="" /> alt="" />
<div>小红书二维码</div> <div class="text-base lg:text-sm">九猫小红书</div>
</div> </div>
<div class="icons-circle"> <div class="icons-circle">
<img <img
...@@ -69,21 +75,62 @@ ...@@ -69,21 +75,62 @@
alt="" /> alt="" />
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="light" placement="top"> <el-tooltip
class="item"
effect="light"
:placement="$isMobile ? 'right' : 'top'">
<div slot="content" class="flex flex-col items-center"> <div slot="content" class="flex flex-col items-center">
<img <img
class="w-32 h-32" :class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/fwh.jpg" src="../assets/images/home/fwh.jpg"
alt="" /> alt="" />
<div>微信服务号二维码</div> <div class="text-base lg:text-sm">九猫微信服务号</div>
</div> </div>
<div class="icons-circle"> <div class="icons-circle">
<img <img class="icons" src="../assets/images/home/fwh.png" alt="" />
class="icons"
src="../assets/images/home/wechat.svg"
alt="" />
</div> </div>
</el-tooltip> </el-tooltip>
<div class="block lg:hidden">
<el-tooltip
class="item"
effect="light"
:placement="$isMobile ? 'right' : 'top'">
<div slot="content" class="flex flex-col items-center">
<img
:class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/wx.png"
alt="" />
<div class="text-base lg:text-sm">九猫官方技术支持</div>
</div>
<div class="icons-circle">
<img
class="icons"
src="../assets/images/home/qywx_icon.png"
alt="" />
</div>
</el-tooltip>
</div>
<div class="block lg:hidden">
<el-tooltip
class="item"
effect="light"
:placement="$isMobile ? 'right' : 'top'">
<div slot="content" class="flex flex-col items-center">
<img
:class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/fwh.jpg"
alt="" />
<div class="text-base lg:text-sm">九猫ERP官方公众号</div>
</div>
<div class="icons-circle">
<img
class="icons"
src="../assets/images/home/wechat.svg"
alt="" />
</div>
</el-tooltip>
</div>
</div> </div>
</div> </div>
<div class="footer-content-right flex flex-1 flex-col"> <div class="footer-content-right flex flex-1 flex-col">
...@@ -263,23 +310,29 @@ ...@@ -263,23 +310,29 @@
v-show="$isMobile"></span> v-show="$isMobile"></span>
</div> </div>
<ul <ul
class="bg-textPrimary rounded mt-0 mb-2 space-y-5 py-[18px] px-4 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7"> class="bg-textPrimary rounded mt-0 mb-2 space-y-5 py-[18px] px-0 lg:bg-transparent lg:space-y-3 lg:py-0 lg:px-0 lg:mb-0 lg:mt-7">
<li> <li>
<p <p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65"> class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
售前咨询电话: 19145102877 @click="copy('19145102877')">
<span class="mr-2">售前咨询电话:19145102877</span>
<i class="el-icon-document-copy"></i>
</p> </p>
</li> </li>
<li> <li>
<p <p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65"> class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
邮箱: mia@jomalls.com @click="copy('mia@jomalls.com')">
<span class="mr-2">邮箱: mia@jomalls.com</span>
<i class="el-icon-document-copy"></i>
</p> </p>
</li> </li>
<li> <li>
<p <p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65"> class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
地址: 广州市南沙区丰泽东路106号 @click="copy('广州市南沙区丰泽东路106号')">
<span class="mr-2">地址: 广州市南沙区丰泽东路106号</span>
<i class="el-icon-document-copy"></i>
</p> </p>
</li> </li>
</ul> </ul>
...@@ -321,6 +374,7 @@ ...@@ -321,6 +374,7 @@
</template> </template>
<script> <script>
import FootBanner from './footBanner.vue' import FootBanner from './footBanner.vue'
export default { export default {
name: 'PageFooter', name: 'PageFooter',
components: { components: {
...@@ -334,6 +388,25 @@ export default { ...@@ -334,6 +388,25 @@ export default {
isShowAbout: false, isShowAbout: false,
} }
}, },
methods: {
async copy(text) {
try {
// 优先使用 Clipboard API（现代浏览器）
await navigator.clipboard.writeText(text)
} catch (err) {
// 降级方案：使用 document.execCommand
const textarea = document.createElement('textarea')
textarea.value = text
document.body.appendChild(textarea)
textarea.focus()
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
} finally {
this.$message.success('复制成功')
}
},
},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/components/head.vue
...@@ -10,7 +10,12 @@ ...@@ -10,7 +10,12 @@
<div class="container" v-else> <div class="container" v-else>
<div class="logo"> <div class="logo">
<span class="logo_text"> <span class="logo_text">
<img style="height: 40px" src="../assets/logo.png" /> <img
@click="goHome"
style="height: 40px"
src="../assets/logo.png"
alt="九猫ERP"
title="九猫ERP" />
</span> </span>
</div> </div>
<nav class="navbar"> <nav class="navbar">
...@@ -146,9 +151,11 @@ ...@@ -146,9 +151,11 @@
<span class="user-name">{{ userInfo.companyName }}</span> <span class="user-name">{{ userInfo.companyName }}</span>
<span>欢迎您</span> <span>欢迎您</span>
</div> </div>
<div class="logout" title="退出登录" @click="logout"> <el-popconfirm title="确定退出登录吗？" @confirm="logout">
<img src="../assets/images/logout.svg" /> <div class="logout" title="退出登录" slot="reference">
</div> <img src="../assets/images/logout.svg" />
</div>
</el-popconfirm>
</div> </div>
<el-button type="primary" @click="freeTrial">免费试用</el-button> <el-button type="primary" @click="freeTrial">免费试用</el-button>
</div> </div>
...@@ -325,8 +332,21 @@ export default { ...@@ -325,8 +332,21 @@ export default {
}) })
}, },
async register() { async register() {
// 跳转到首页 // 跳转到首页并请求打开注册弹窗（若已在首页，则变更查询参数强制触发监听）
await this.$router.push('/home').catch(() => {}) 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.$nextTick(() => {
this.scrollParent().scrollTo({ this.scrollParent().scrollTo({
top: 0, top: 0,
...@@ -340,7 +360,9 @@ export default { ...@@ -340,7 +360,9 @@ export default {
logout() { logout() {
localStorage.removeItem('userInfo') localStorage.removeItem('userInfo')
this.setUserInfo(undefined) this.setUserInfo(undefined)
this.$router.push('/login') this.$router.push('/home')
// 刷新页面
window.location.reload()
}, },
playVideo() { playVideo() {
this.playIcon = true this.playIcon = true
...@@ -350,6 +372,15 @@ export default { ...@@ -350,6 +372,15 @@ export default {
this.playIcon = false this.playIcon = false
this.$refs['nav-player'].pause() this.$refs['nav-player'].pause()
}, },
async goHome() {
this.$router.push('/home')
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
}, },
} }
</script> </script>
...@@ -394,6 +425,11 @@ export default { ...@@ -394,6 +425,11 @@ export default {
border-color: var(--light-color) !important; border-color: var(--light-color) !important;
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
&:focus {
background-color: var(--light-background-color) !important;
border-color: var(--light-color) !important;
color: var(--primary-color) !important;
}
} }
.container { .container {
...@@ -493,17 +529,6 @@ export default { ...@@ -493,17 +529,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
.login-btn::after {
content: '';
width: 1px;
height: 15px;
position: absolute;
display: inline-block;
margin-left: 10px;
top: 4px;
background-color: #fff;
}
.user-operate { .user-operate {
margin-right: 10px; margin-right: 10px;
} }
......
src/components/headerNavMobile.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="header-nav-mobile_trigger"> <div class="header-nav-mobile_trigger">
<a class="nav-icon icon-menu" href="javascript:;" @click="toggleShow"></a> <a class="nav-icon icon-menu" href="javascript:;" @click="toggleShow"></a>
</div> </div>
<div class="header-nav-mobile_logo"> <div @click="goHome" class="header-nav-mobile_logo">
<img src="../assets/logo.png" style="height: 40px" /> <img src="../assets/logo.png" style="height: 40px" />
</div> </div>
<div class="header-nav-mobile_login" v-if="!userInfo"> <div class="header-nav-mobile_login" v-if="!userInfo">
...@@ -15,11 +15,14 @@ ...@@ -15,11 +15,14 @@
<span class="user-name">{{ userInfo.companyName }}</span> <span class="user-name">{{ userInfo.companyName }}</span>
<span style="margin: 0 10px">欢迎您</span> <span style="margin: 0 10px">欢迎您</span>
<span style="margin: 0 5px">|</span> <span style="margin: 0 5px">|</span>
<span style="margin-left: 10px; cursor: pointer" @click="logout"> <el-popconfirm title="确定退出登录吗？" @confirm="logout">
<img <div
style="width: 16px; height: 16px; vertical-align: middle" style="width: 16px; height: 16px; vertical-align: middle"
src="../assets/images/logout.svg" /> title="退出登录"
</span> slot="reference">
<img src="../assets/images/logout.svg" />
</div>
</el-popconfirm>
</div> </div>
<transition name="header-nav-mobile"> <transition name="header-nav-mobile">
<div v-show="showing" class="header-nav-mobile-overlay"> <div v-show="showing" class="header-nav-mobile-overlay">
...@@ -106,6 +109,9 @@ import usSvg from '../assets/images/product/us.svg' ...@@ -106,6 +109,9 @@ import usSvg from '../assets/images/product/us.svg'
export default { export default {
name: 'headerNavMobile', name: 'headerNavMobile',
inject: {
scrollParent: 'scrollParent',
},
data() { data() {
return { return {
showing: false, showing: false,
...@@ -187,16 +193,56 @@ export default { ...@@ -187,16 +193,56 @@ export default {
const path = this.$route.path const path = this.$route.path
if (nav.path === path) return true if (nav.path === path) return true
}, },
login() { async login() {
this.$router.push('/login') // 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
}, },
register() { async register() {
this.$router.push('/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(() => {})
}
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
async goHome() {
this.$router.push('/home')
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
}, },
logout() { logout() {
localStorage.removeItem('userInfo') localStorage.removeItem('userInfo')
this.setUserInfo(undefined) this.setUserInfo(undefined)
this.$router.push('/login') this.$router.push('/home')
// 刷新页面
window.location.reload()
}, },
}, },
} }
...@@ -227,8 +273,9 @@ export default { ...@@ -227,8 +273,9 @@ export default {
.header-nav-mobile_login { .header-nav-mobile_login {
flex: 1; flex: 1;
display: flex; display: flex;
font-size: 12px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
margin-top: 8px;
justify-content: flex-end; justify-content: flex-end;
} }
...@@ -254,7 +301,7 @@ export default { ...@@ -254,7 +301,7 @@ export default {
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-image: url(../assets/mobile.png); background-image: url(../assets/mobile.svg);
} }
.header-nav-mobile-enter-active, .header-nav-mobile-enter-active,
...@@ -319,7 +366,7 @@ export default { ...@@ -319,7 +366,7 @@ export default {
.header-nav-mobile-child { .header-nav-mobile-child {
font-size: 14px; font-size: 14px;
// color: #999; // color: #999;
background-color: #f8f9ff; background-color: #fffdf8;
padding: 0 20px; padding: 0 20px;
margin-top: 10px; margin-top: 10px;
} }
......
src/plugins/element.js
...@@ -61,6 +61,7 @@ import { ...@@ -61,6 +61,7 @@ import {
Divider, Divider,
BreadcrumbItem, BreadcrumbItem,
Breadcrumb, Breadcrumb,
Popconfirm,
} from 'element-ui' } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' } Vue.prototype.$ELEMENT = { size: 'mini' }
...@@ -101,17 +102,18 @@ Vue.use(Divider) ...@@ -101,17 +102,18 @@ Vue.use(Divider)
Vue.use(Tabs) Vue.use(Tabs)
Vue.use(Breadcrumb) Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem) Vue.use(BreadcrumbItem)
Vue.use(Popconfirm)
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) => Vue.prototype.$message = (message) =>
typeof message === 'string' typeof message === 'string'
? Message({ ? Message({
duration: 1000, duration: 1000,
message, message,
}) })
: Message({ : Message({
duration: 1000, duration: 1000,
...message, ...message,
}) })
// Vue.prototype.$message.warning = (msg)=> { // Vue.prototype.$message.warning = (msg)=> {
......
src/styles/index.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
--primary-color: #eca217; --primary-color: #eca217;
--secondary-color: #3f419e; --secondary-color: #3f419e;
--secondary-color-lighter: #6163da; --secondary-color-lighter: #6163da;
--border-color: #dfe7f9; --border-color: #f3ecd6;
--shadow-color: rgba(216, 187, 26, 0.32); --shadow-color: rgba(216, 187, 26, 0.32);
--background-color: #faf7f2b0; --background-color: #faf7f2b0;
--darker-background-color: #f5ede0b0; --darker-background-color: #f5ede0b0;
......
src/views/contact.vue
<template> <template>
<div class="login_bg"> <div class="login_bg flex flex-col w-full h-full">
<div class="contact-header"> <div
class="contact-header px-5 lg:px-10 h-16 flex items-center justify-between">
<div class="header-image"> <div class="header-image">
<img src="../assets/logo.png" style="height: 40px" /> <img src="../assets/logo.png" style="height: 40px" />
</div> </div>
<div class="user-info"> <div class="user-info mt-2 flex items-center">
<!-- <div class="user-msg"> <el-popconfirm title="确定退出登录吗？" @confirm="logout">
<span class="user-name">{{ '小溪' }}</span> <div class="logout" title="退出登录" slot="reference">
<span>欢迎您</span> <img src="../assets/images/logout.svg" style="width: 20px" />
</div> --> </div>
<div class="logout" title="退出登录" @click="logout"> </el-popconfirm>
<img src="../assets/images/logout.svg" />
</div>
</div> </div>
</div> </div>
<div class="login_content"> <div class="login_content">
<div class="no-authority"> <div class="no-authority absolute top-1/4 lg:top-1/3 lg:left-1/3">
<div style="display: flex; align-items: flex-end"> <div>
<div <div
v-if="userInfo && userInfo.erpKey"
class="text-center text-white"
style=" style="
text-align: center;
color: #fff;
font-size: 50px; font-size: 50px;
line-height: 100px; line-height: 100px;
font-family: '微软雅黑'; font-family: '微软雅黑';
" ">
v-if="userInfo && userInfo.erpKey">
<a <a
:href="`https://${userInfo && userInfo.erpKey}.jomalls.com`" :href="`https://${userInfo && userInfo.erpKey}.jomalls.com`"
target="_blank" target="_blank"
...@@ -34,15 +32,10 @@ ...@@ -34,15 +32,10 @@
</a> </a>
</div> </div>
<h1 <h1
style=" v-else
text-align: center; class="text-center text-white text-2xl lg:text-5xl font-medium tracking-wide"
color: #fff; style="font-family: '微软雅黑'">
font-size: 50px; 您尚未开通erp权限，请联系您的商务经理
line-height: 100px;
font-family: '微软雅黑';
"
v-else>
您尚未开通erp权限,请联系您的商务经理
</h1> </h1>
<!-- <b--> <!-- <b-->
<!-- @click="handleBind"--> <!-- @click="handleBind"-->
...@@ -57,24 +50,15 @@ ...@@ -57,24 +50,15 @@
<!-- </b>--> <!-- </b>-->
</div> </div>
<h2 <h2
style=" class="text-center text-white text-xl lg:text-4xl mt-10"
text-align: center; style="font-family: '微软雅黑'">
color: #fff; 联系电话：
font-size: 36px; <span @click="copy('18103641690')">18103641690</span>
line-height: 100px;
font-family: '微软雅黑';
">
联系电话:18103641690
</h2> </h2>
<h2 <h2
style=" class="text-center text-white text-xl lg:text-4xl mt-5"
text-align: center; style="font-family: '微软雅黑'">
color: #fff; 邮箱：mia@jomalls.com
font-size: 36px;
line-height: 50px;
font-family: '微软雅黑';
">
邮箱:mia@jomalls.com
</h2> </h2>
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<el-button <el-button
...@@ -210,43 +194,51 @@ export default { ...@@ -210,43 +194,51 @@ export default {
logout() { logout() {
localStorage.removeItem('userInfo') localStorage.removeItem('userInfo')
this.setUserInfo(undefined) this.setUserInfo(undefined)
this.$router.push('/login') this.$router.push('/home')
// 刷新页面
window.location.reload()
},
async copy(text) {
try {
// 优先使用 Clipboard API（现代浏览器）
await navigator.clipboard.writeText(text)
} catch (err) {
// 降级方案：使用 document.execCommand
const textarea = document.createElement('textarea')
textarea.value = text
document.body.appendChild(textarea)
textarea.focus()
textarea.select()
document.execCommand('copy')
document.body.removeChild(textarea)
} finally {
this.$message.success('复制成功')
}
}, },
}, },
} }
</script> </script>
<style scoped> <style scoped>
.login_bg {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.login_content { .login_content {
flex: 1; flex: 1;
background: url(../assets/contact.jpg) center / cover no-repeat; background: url(../assets/contact.jpg) center / cover no-repeat;
position: relative; position: relative;
} }
@media (max-width: 1100px) {
.login_content {
background-image: linear-gradient(to top right, #464646, #bbbbbb);
}
}
.contact-header { .contact-header {
display: flex;
align-items: center;
background-color: #182633; background-color: #182633;
height: 60px;
padding: 0 100px;
justify-content: space-between;
} }
.user-msg { .user-msg {
color: #fff; color: #fff;
} }
.user-info {
display: flex;
align-items: center;
}
.logout img { .logout img {
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
...@@ -261,13 +253,6 @@ export default { ...@@ -261,13 +253,6 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
.no-authority {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40%;
}
.contain { .contain {
flex: 1; flex: 1;
} }
......
src/views/homePage/index.vue
<template> <template>
<div class="home-page"> <div class="home-page">
<div <div
class="banner-images h-full w-11/12 lg:w-9/12 mx-auto lg:px-5 lg:py-20"> class="banner w-11/12 lg:w-9/12 mx-auto lg:px-5 lg:py-20"
:class="{ loged: userInfo }">
<div <div
class="banner-container flex h-full flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-40"> class="banner-container flex h-full flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-40"
:class="{ 'lg:flex-col': userInfo }">
<div <div
class="left-content w-full lg:w-3/5 flex flex-col gap-5 mb-4 lg:mb-0"> class="left-content w-full lg:w-3/5 flex flex-col gap-5 mb-4 lg:mb-0"
:class="{ 'lg:w-full': userInfo }">
<h3 <h3
class="left-content-title text-base lg:text-2xl font-bold text-center lg:text-left"> class="left-content-title text-base lg:text-2xl font-bold text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
让跨境电商更智能 让跨境电商更智能
</h3> </h3>
<h2 <h2
class="left-content-title-high-light text-2xl lg:text-4xl font-bold text-center lg:text-left"> class="left-content-title-high-light text-2xl lg:text-4xl font-bold text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
九猫科技·全球电商增长伙伴 九猫科技·全球电商增长伙伴
</h2> </h2>
<p <p
class="left-content-description text-sm lg:text-lg text-gray-500 text-center lg:text-left"> class="left-content-description text-sm lg:text-lg text-gray-500 text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
<span> <span>
跨境全链路智能解决方案，一站式跨境电商操作系统 跨境全链路智能解决方案，一站式跨境电商操作系统
<br /> <br />
...@@ -25,11 +31,12 @@ ...@@ -25,11 +31,12 @@
</p> </p>
<button <button
class="register-btn-text block mx-auto lg:mx-0 w-20 h-8 lg:w-36 lg:h-11 rounded-md text-xs lg:text-lg cursor-pointer text-white" class="register-btn-text block mx-auto lg:mx-0 w-20 h-8 lg:w-36 lg:h-11 rounded-md text-xs lg:text-lg cursor-pointer text-white"
:class="{ hidden: userInfo }"
@click="registerDialog = true"> @click="registerDialog = true">
立即注册 立即注册
</button> </button>
</div> </div>
<login /> <login v-if="!userInfo" />
</div> </div>
</div> </div>
...@@ -59,8 +66,29 @@ export default { ...@@ -59,8 +66,29 @@ export default {
data() { data() {
return { return {
registerDialog: false, registerDialog: false,
userInfo: JSON.parse(localStorage.getItem('userInfo')),
} }
}, },
mounted() {
// 若通过路由参数请求打开注册弹窗，则在进入首页后自动打开
if (
this.$route &&
this.$route.query &&
this.$route.query.openRegister === '1'
) {
this.registerDialog = true
}
},
watch: {
$route: {
handler(to) {
if (to && to.query && to.query.openRegister === '1') {
this.registerDialog = true
}
},
immediate: false,
},
},
methods: { methods: {
async goToLogin() { async goToLogin() {
// 跳转到首页 // 跳转到首页
...@@ -77,6 +105,19 @@ export default { ...@@ -77,6 +105,19 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.banner {
height: 600px;
}
.loged {
height: 100%;
}
@media (max-width: 1100px) {
.banner {
height: 100%;
}
}
.register-btn-text { .register-btn-text {
background: var(--primary-color); background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color); box-shadow: 0 4px 8px 0 var(--shadow-color);
......
src/views/homePage/platform.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<vue-seamless-scroll <vue-seamless-scroll
:data="platforms" :data="platforms"
:class-option="classOption" :class-option="classOption"
class="warp flex justify-center items-center"> class="warp">
<ul class="flex flex-wrap"> <ul class="flex flex-wrap">
<li <li
class="platform-item flex justify-center items-center w-20" class="platform-item flex justify-center items-center w-20"
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
</template> </template>
<script> <script>
// https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
export default { export default {
...@@ -66,7 +67,6 @@ export default { ...@@ -66,7 +67,6 @@ export default {
], ],
classOption: { classOption: {
step: 0.6, // 数值越大速度滚动越快 step: 0.6, // 数值越大速度滚动越快
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, // 是否自动滚动
...@@ -79,6 +79,8 @@ export default { ...@@ -79,6 +79,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.docking-platform { .docking-platform {
width: 100%;
height: 150px;
background: var(--light-color); background: var(--light-color);
} }
......
src/views/protocol.vue
<template> <template>
<div class="page_main"> <div class="page_main h-full">
<el-tabs type="card" v-model="activeName"> <el-tabs type="card" v-model="activeName">
<el-tab-pane name="term" label="九猫ERP条款与协议"> <el-tab-pane name="term" label="九猫ERP条款与协议">
<h4 class="title">前言</h4> <h4 class="title">前言</h4>
...@@ -613,10 +613,6 @@ export default { ...@@ -613,10 +613,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
.page_main {
height: 100%;
}
.el-tabs { .el-tabs {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -635,6 +631,10 @@ export default { ...@@ -635,6 +631,10 @@ export default {
/* text-align: center; */ /* text-align: center; */
margin-bottom: 10px; margin-bottom: 10px;
} }
p, li, h4 {
color: #3d3d3d
}
p, p,
li { li {
margin-bottom: 10px; margin-bottom: 10px;
......
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