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 @@
"less": "^3.0.4",
"less-loader": "^5.0.0",
"mockjs": "^1.1.0",
"prettier": "^2.2.1",
"prettier": "^2.8.8",
"sass": "^1.58.3",
"sass-loader": "^10",
"stylus": "~0.54.7",
......
src/assets/css/common.css
......@@ -995,7 +995,7 @@ ul li {
.el-message {
z-index: 7000 !important;
margin-top: 400px !important;
/* margin-top: 400px !important; */
}
.el-select.green .el-input__inner {
......@@ -1101,6 +1101,25 @@ ul li {
--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 {
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>
<div class="footer-bg" v-if="bannerContent">
<div class="footer-banner place-content-between">
<div class="bg-left"></div>
<div class="content">
<p class="footer-title">{{ bannerContent.title }}</p>
<p class="footer-description">{{ bannerContent.description }}</p>
<button class="footer-register-btn" @click="goToLogin">立即使用</button>
<Register :visible="registerDialog" @close="registerDialog = false" />
<div
class="footer-banner flex flex-col items-center place-content-between py-16">
<div class="footer-text flex flex-col items-center mb-10">
<p
class="footer-title font-medium text-3xl lg:text-4xl mb-5 text-center text-gray-700 tracking-wide">
{{ bannerContent.title }}
</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 class="bg-right"></div>
</div>
<Register :visible="registerDialog" @close="registerDialog = false" />
</div>
</template>
<script>
......@@ -75,65 +88,19 @@ export default {
}
</script>
<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 {
width: 200px;
height: 60px;
display: block;
background: rgba(var(--primary-color), 0.5);
border-radius: 10px;
border: 1px solid #efad32;
font-size: 18px;
color: #3d3d3d;
cursor: pointer;
transition: all 0.3s ease;
}
.bg-left {
margin-top: 100px;
width: 300px;
height: 60px;
background-image: linear-gradient(to right, #efad32, #efad3270, #efad3200);
}
.bg-right {
margin-top: 100px;
width: 300px;
height: 60px;
background-image: linear-gradient(to left, #efad32, #efad3270, #efad3200);
}
.footer-register-btn:hover {
color: #ffffff;
background: (var(--primary-color));
}
</style>
src/components/footer.vue
......@@ -36,14 +36,18 @@
</div>
</div>
</div>
<div class="flex items-center mt-20">
<el-tooltip class="item" effect="light" placement="top">
<div
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">
<img
class="w-32 h-32"
:class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/dy.png"
alt="" />
<div>抖音二维码</div>
<div class="text-base lg:text-sm">九猫抖音</div>
</div>
<div class="icons-circle">
<img
......@@ -52,14 +56,16 @@
alt="" />
</div>
</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">
<img
class="w-32 h-32"
:class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/xhs.png"
alt="" />
<div>小红书二维码</div>
<div class="text-base lg:text-sm">九猫小红书</div>
</div>
<div class="icons-circle">
<img
......@@ -69,21 +75,62 @@
alt="" />
</div>
</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">
<img
class="w-32 h-32"
:class="$isMobile ? 'w-60 h-60' : 'w-32 h-32'"
src="../assets/images/home/fwh.jpg"
alt="" />
<div>微信服务号二维码</div>
<div class="text-base lg:text-sm">九猫微信服务号</div>
</div>
<div class="icons-circle">
<img
class="icons"
src="../assets/images/home/wechat.svg"
alt="" />
<img class="icons" src="../assets/images/home/fwh.png" alt="" />
</div>
</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 class="footer-content-right flex flex-1 flex-col">
......@@ -263,23 +310,29 @@
v-show="$isMobile"></span>
</div>
<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>
<p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65">
售前咨询电话: 19145102877
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
@click="copy('19145102877')">
<span class="mr-2">售前咨询电话:19145102877</span>
<i class="el-icon-document-copy"></i>
</p>
</li>
<li>
<p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65">
邮箱: mia@jomalls.com
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
@click="copy('mia@jomalls.com')">
<span class="mr-2">邮箱: mia@jomalls.com</span>
<i class="el-icon-document-copy"></i>
</p>
</li>
<li>
<p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65">
地址: 广州市南沙区丰泽东路106号
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
@click="copy('广州市南沙区丰泽东路106号')">
<span class="mr-2">地址: 广州市南沙区丰泽东路106号</span>
<i class="el-icon-document-copy"></i>
</p>
</li>
</ul>
......@@ -321,6 +374,7 @@
</template>
<script>
import FootBanner from './footBanner.vue'
export default {
name: 'PageFooter',
components: {
......@@ -334,6 +388,25 @@ export default {
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>
<style scoped lang="scss">
......
src/components/head.vue
......@@ -10,7 +10,12 @@
<div class="container" v-else>
<div class="logo">
<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>
</div>
<nav class="navbar">
......@@ -146,9 +151,11 @@
<span class="user-name">{{ userInfo.companyName }}</span>
<span>欢迎您</span>
</div>
<div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.svg" />
</div>
<el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div class="logout" title="退出登录" slot="reference">
<img src="../assets/images/logout.svg" />
</div>
</el-popconfirm>
</div>
<el-button type="primary" @click="freeTrial">免费试用</el-button>
</div>
......@@ -325,8 +332,21 @@ export default {
})
},
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.scrollParent().scrollTo({
top: 0,
......@@ -340,7 +360,9 @@ export default {
logout() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/login')
this.$router.push('/home')
// 刷新页面
window.location.reload()
},
playVideo() {
this.playIcon = true
......@@ -350,6 +372,15 @@ export default {
this.playIcon = false
this.$refs['nav-player'].pause()
},
async goHome() {
this.$router.push('/home')
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
},
}
</script>
......@@ -394,6 +425,11 @@ export default {
border-color: var(--light-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 {
......@@ -493,17 +529,6 @@ export default {
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 {
margin-right: 10px;
}
......
src/components/headerNavMobile.vue
......@@ -3,7 +3,7 @@
<div class="header-nav-mobile_trigger">
<a class="nav-icon icon-menu" href="javascript:;" @click="toggleShow"></a>
</div>
<div class="header-nav-mobile_logo">
<div @click="goHome" class="header-nav-mobile_logo">
<img src="../assets/logo.png" style="height: 40px" />
</div>
<div class="header-nav-mobile_login" v-if="!userInfo">
......@@ -15,11 +15,14 @@
<span class="user-name">{{ userInfo.companyName }}</span>
<span style="margin: 0 10px">欢迎您</span>
<span style="margin: 0 5px">|</span>
<span style="margin-left: 10px; cursor: pointer" @click="logout">
<img
<el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div
style="width: 16px; height: 16px; vertical-align: middle"
src="../assets/images/logout.svg" />
</span>
title="退出登录"
slot="reference">
<img src="../assets/images/logout.svg" />
</div>
</el-popconfirm>
</div>
<transition name="header-nav-mobile">
<div v-show="showing" class="header-nav-mobile-overlay">
......@@ -106,6 +109,9 @@ import usSvg from '../assets/images/product/us.svg'
export default {
name: 'headerNavMobile',
inject: {
scrollParent: 'scrollParent',
},
data() {
return {
showing: false,
......@@ -187,16 +193,56 @@ export default {
const path = this.$route.path
if (nav.path === path) return true
},
login() {
this.$router.push('/login')
async login() {
// 跳转到首页
await this.$router.push('/home').catch(() => {})
// 使用 scrollParent 进行滚动
this.$nextTick(() => {
this.scrollParent().scrollTo({
top: 0,
behavior: 'smooth',
})
})
},
register() {
this.$router.push('/register')
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(() => {})
}
// 使用 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() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/login')
this.$router.push('/home')
// 刷新页面
window.location.reload()
},
},
}
......@@ -227,8 +273,9 @@ export default {
.header-nav-mobile_login {
flex: 1;
display: flex;
font-size: 12px;
font-size: 14px;
margin-right: 10px;
margin-top: 8px;
justify-content: flex-end;
}
......@@ -254,7 +301,7 @@ export default {
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-image: url(../assets/mobile.png);
background-image: url(../assets/mobile.svg);
}
.header-nav-mobile-enter-active,
......@@ -319,7 +366,7 @@ export default {
.header-nav-mobile-child {
font-size: 14px;
// color: #999;
background-color: #f8f9ff;
background-color: #fffdf8;
padding: 0 20px;
margin-top: 10px;
}
......
src/plugins/element.js
......@@ -61,6 +61,7 @@ import {
Divider,
BreadcrumbItem,
Breadcrumb,
Popconfirm,
} from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' }
......@@ -101,17 +102,18 @@ Vue.use(Divider)
Vue.use(Tabs)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Popconfirm)
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) =>
typeof message === 'string'
? Message({
duration: 1000,
message,
})
duration: 1000,
message,
})
: Message({
duration: 1000,
...message,
})
duration: 1000,
...message,
})
// Vue.prototype.$message.warning = (msg)=> {
......
src/styles/index.scss
......@@ -2,7 +2,7 @@
--primary-color: #eca217;
--secondary-color: #3f419e;
--secondary-color-lighter: #6163da;
--border-color: #dfe7f9;
--border-color: #f3ecd6;
--shadow-color: rgba(216, 187, 26, 0.32);
--background-color: #faf7f2b0;
--darker-background-color: #f5ede0b0;
......
src/views/contact.vue
<template>
<div class="login_bg">
<div class="contact-header">
<div class="login_bg flex flex-col w-full h-full">
<div
class="contact-header px-5 lg:px-10 h-16 flex items-center justify-between">
<div class="header-image">
<img src="../assets/logo.png" style="height: 40px" />
</div>
<div class="user-info">
<!-- <div class="user-msg">
<span class="user-name">{{ '小溪' }}</span>
<span>欢迎您</span>
</div> -->
<div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.svg" />
</div>
<div class="user-info mt-2 flex items-center">
<el-popconfirm title="确定退出登录吗？" @confirm="logout">
<div class="logout" title="退出登录" slot="reference">
<img src="../assets/images/logout.svg" style="width: 20px" />
</div>
</el-popconfirm>
</div>
</div>
<div class="login_content">
<div class="no-authority">
<div style="display: flex; align-items: flex-end">
<div class="no-authority absolute top-1/4 lg:top-1/3 lg:left-1/3">
<div>
<div
v-if="userInfo && userInfo.erpKey"
class="text-center text-white"
style="
text-align: center;
color: #fff;
font-size: 50px;
line-height: 100px;
font-family: '微软雅黑';
"
v-if="userInfo && userInfo.erpKey">
">
<a
:href="`https://${userInfo && userInfo.erpKey}.jomalls.com`"
target="_blank"
......@@ -34,15 +32,10 @@
</a>
</div>
<h1
style="
text-align: center;
color: #fff;
font-size: 50px;
line-height: 100px;
font-family: '微软雅黑';
"
v-else>
您尚未开通erp权限,请联系您的商务经理
v-else
class="text-center text-white text-2xl lg:text-5xl font-medium tracking-wide"
style="font-family: '微软雅黑'">
您尚未开通erp权限，请联系您的商务经理
</h1>
<!-- <b-->
<!-- @click="handleBind"-->
......@@ -57,24 +50,15 @@
<!-- </b>-->
</div>
<h2
style="
text-align: center;
color: #fff;
font-size: 36px;
line-height: 100px;
font-family: '微软雅黑';
">
联系电话:18103641690
class="text-center text-white text-xl lg:text-4xl mt-10"
style="font-family: '微软雅黑'">
联系电话：
<span @click="copy('18103641690')">18103641690</span>
</h2>
<h2
style="
text-align: center;
color: #fff;
font-size: 36px;
line-height: 50px;
font-family: '微软雅黑';
">
邮箱:mia@jomalls.com
class="text-center text-white text-xl lg:text-4xl mt-5"
style="font-family: '微软雅黑'">
邮箱：mia@jomalls.com
</h2>
<div style="display: flex; justify-content: center">
<el-button
......@@ -210,43 +194,51 @@ export default {
logout() {
localStorage.removeItem('userInfo')
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>
<style scoped>
.login_bg {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.login_content {
flex: 1;
background: url(../assets/contact.jpg) center / cover no-repeat;
position: relative;
}
@media (max-width: 1100px) {
.login_content {
background-image: linear-gradient(to top right, #464646, #bbbbbb);
}
}
.contact-header {
display: flex;
align-items: center;
background-color: #182633;
height: 60px;
padding: 0 100px;
justify-content: space-between;
}
.user-msg {
color: #fff;
}
.user-info {
display: flex;
align-items: center;
}
.logout img {
width: 20px;
vertical-align: middle;
......@@ -261,13 +253,6 @@ export default {
margin-right: 10px;
}
.no-authority {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 40%;
}
.contain {
flex: 1;
}
......
src/views/homePage/index.vue
<template>
<div class="home-page">
<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
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
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
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>
<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>
<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>
跨境全链路智能解决方案，一站式跨境电商操作系统
<br />
......@@ -25,11 +31,12 @@
</p>
<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="{ hidden: userInfo }"
@click="registerDialog = true">
立即注册
</button>
</div>
<login />
<login v-if="!userInfo" />
</div>
</div>
......@@ -59,8 +66,29 @@ export default {
data() {
return {
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: {
async goToLogin() {
// 跳转到首页
......@@ -77,6 +105,19 @@ export default {
}
</script>
<style scoped lang="scss">
.banner {
height: 600px;
}
.loged {
height: 100%;
}
@media (max-width: 1100px) {
.banner {
height: 100%;
}
}
.register-btn-text {
background: var(--primary-color);
box-shadow: 0 4px 8px 0 var(--shadow-color);
......
src/views/homePage/platform.vue
......@@ -3,7 +3,7 @@
<vue-seamless-scroll
:data="platforms"
:class-option="classOption"
class="warp flex justify-center items-center">
class="warp">
<ul class="flex flex-wrap">
<li
class="platform-item flex justify-center items-center w-20"
......@@ -35,6 +35,7 @@
</template>
<script>
// https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
......@@ -66,7 +67,6 @@ export default {
],
classOption: {
step: 0.6, // 数值越大速度滚动越快
limitMoveNum: 18, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
autoPlay: true, // 是否自动滚动
......@@ -79,6 +79,8 @@ export default {
<style scoped lang="scss">
.docking-platform {
width: 100%;
height: 150px;
background: var(--light-color);
}
......
src/views/protocol.vue
<template>
<div class="page_main">
<div class="page_main h-full">
<el-tabs type="card" v-model="activeName">
<el-tab-pane name="term" label="九猫ERP条款与协议">
<h4 class="title">前言</h4>
......@@ -613,10 +613,6 @@ export default {
</script>
<style scoped>
.page_main {
height: 100%;
}
.el-tabs {
height: 100%;
display: flex;
......@@ -635,6 +631,10 @@ export default {
/* text-align: center; */
margin-bottom: 10px;
}
p, li, h4 {
color: #3d3d3d
}
p,
li {
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