Skip to content

O
offical_web
Commit a72043b7 by qinjianhui
Options

feat: 登录、注册、价格页面移动端适配

parent b3b59b92
Showing with 318 additions and 131 deletions
src/components/headerNavMobile.vue
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo.png" height="40px" />
</div> </div>
<div class="header-nav-mobile_login"> <div class="header-nav-mobile_login">
<span>登录</span> <span @click="login">登录</span>
<span style="margin: 0 5px">|</span> <span style="margin: 0 5px">|</span>
<span>注册</span> <span @click="register">注册</span>
</div> </div>
<transition name="header-nav-mobile"> <transition name="header-nav-mobile">
<div <div
...@@ -55,6 +55,12 @@ export default { ...@@ -55,6 +55,12 @@ 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() {
this.$router.push('/login')
},
register() {
this.$router.push('/register')
},
}, },
} }
</script> </script>
......
src/views/aboutus/aboutPage.vue
...@@ -169,7 +169,8 @@ export default { ...@@ -169,7 +169,8 @@ export default {
.content-body { .content-body {
margin-top: 20px; margin-top: 20px;
height: calc(100vh - 33vw - 60px); height: unset;
padding-bottom: 20px;
} }
.jomals-description { .jomals-description {
width: 100vw; width: 100vw;
......
src/views/demand/demandPage.vue
...@@ -51,7 +51,9 @@ ...@@ -51,7 +51,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>高效采购生产</h4> <h4>高效采购生产</h4>
...@@ -93,7 +95,7 @@ ...@@ -93,7 +95,7 @@
<h4 style="text-align: center"> <h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题 各仓库库存状况一目了然，解决库存难管理问题
</h4> </h4>
<div class="card-inner-content" > <div class="card-inner-content">
<div class="left"> <div class="left">
<img src="../../assets/images/warehouse/kc.png" /> <img src="../../assets/images/warehouse/kc.png" />
</div> </div>
...@@ -110,7 +112,9 @@ ...@@ -110,7 +112,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>订单占用明细</h4> <h4>订单占用明细</h4>
...@@ -169,7 +173,9 @@ ...@@ -169,7 +173,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>跨部门高效协同合作</h4> <h4>跨部门高效协同合作</h4>
...@@ -224,7 +230,9 @@ ...@@ -224,7 +230,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>一体化管理</h4> <h4>一体化管理</h4>
...@@ -254,7 +262,9 @@ ...@@ -254,7 +262,9 @@
</div> </div>
<div class="t-row-4"> <div class="t-row-4">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>操作日志</h4> <h4>操作日志</h4>
...@@ -290,7 +300,9 @@ ...@@ -290,7 +300,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>分批发货</h4> <h4>分批发货</h4>
...@@ -345,7 +357,9 @@ ...@@ -345,7 +357,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>打单、验货以及称重一体化进行</h4> <h4>打单、验货以及称重一体化进行</h4>
...@@ -377,7 +391,9 @@ ...@@ -377,7 +391,9 @@
</div> </div>
<div class="t-row-4"> <div class="t-row-4">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>多站点库存数据打通</h4> <h4>多站点库存数据打通</h4>
...@@ -399,7 +415,9 @@ ...@@ -399,7 +415,9 @@
<img src="../../assets/images/fh/wl.png" /> <img src="../../assets/images/fh/wl.png" />
</div> </div>
<div class="right content-text-wrap"> <div class="right content-text-wrap">
<div class="content-text" :style="$isMobile ? 'margin-left: 0' : 'margin-left: 40px'"> <div
class="content-text"
:style="$isMobile ? 'margin-left: 0' : 'margin-left: 40px'">
<h4 <h4
:style="` :style="`
${$isMobile ? 'font-size: 22px' : 'font-size: 32px'} ${$isMobile ? 'font-size: 22px' : 'font-size: 32px'}
...@@ -408,7 +426,13 @@ ...@@ -408,7 +426,13 @@
`"> `">
物流管理 物流管理
</h4> </h4>
<h5 style="font-size: 14px; margin-bottom: 16px; margin-top: 6px; font-weight: 100;"> <h5
style="
font-size: 14px;
margin-bottom: 16px;
margin-top: 6px;
font-weight: 100;
">
智能推荐优势物流商，物流轨迹实时查询 智能推荐优势物流商，物流轨迹实时查询
</h5> </h5>
<div class="text-des"> <div class="text-des">
...@@ -447,7 +471,9 @@ ...@@ -447,7 +471,9 @@
</div> </div>
<div class="t-row-2"> <div class="t-row-2">
<div class="card-inner"> <div class="card-inner">
<div class="card-inner-content" :style="$isMobile ? 'flex-direction:column-reverse' : ''"> <div
class="card-inner-content"
:style="$isMobile ? 'flex-direction:column-reverse' : ''">
<div class="left content-text-wrap"> <div class="left content-text-wrap">
<div class="content-text"> <div class="content-text">
<h4>跟踪号</h4> <h4>跟踪号</h4>
...@@ -513,6 +539,32 @@ export default { ...@@ -513,6 +539,32 @@ export default {
methods: { methods: {
onScroll() { onScroll() {
const top = this.scrollParent().scrollTop const top = this.scrollParent().scrollTop
if (this.$isMobile) {
if (top >= this.$refs.headerBanner.offsetHeight - 30) {
this.$refs.feature.style.position = 'fixed'
this.$refs.feature.style.top = '50px'
this.$refs.feature.style.left = '0'
this.$refs.feature.style.right = '0'
this.$refs.feature.style.height = '40px'
this.$refs.feature.style.zIndex = '100'
} else {
this.$refs.feature.style.position = ''
this.$refs.feature.style.top = ''
this.$refs.feature.style.left = ''
this.$refs.feature.style.right = ''
this.$refs.feature.style.height = ''
this.$refs.feature.style.zIndex = ''
}
return
}
this.$refs.feature.style.position = ''
this.$refs.feature.style.top = ''
this.$refs.feature.style.left = ''
this.$refs.feature.style.right = ''
this.$refs.feature.style.height = ''
this.$refs.feature.style.zIndex = ''
if (top >= this.$refs.headerBanner.offsetHeight - 60) { if (top >= this.$refs.headerBanner.offsetHeight - 60) {
this.$refs.feature.classList.add('feature-scrolling') this.$refs.feature.classList.add('feature-scrolling')
} else { } else {
...@@ -696,7 +748,7 @@ export default { ...@@ -696,7 +748,7 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
} }
@media screen and (max-width:1100px) { @media screen and (max-width: 1100px) {
.text { .text {
top: 20px !important; top: 20px !important;
left: 20px !important; left: 20px !important;
...@@ -719,6 +771,7 @@ export default { ...@@ -719,6 +771,7 @@ export default {
transform: unset; transform: unset;
position: unset; position: unset;
border-radius: 0; border-radius: 0;
transition: none;
} }
.feature-item { .feature-item {
......
src/views/login.vue
...@@ -2,22 +2,25 @@ ...@@ -2,22 +2,25 @@
<div class="login-page"> <div class="login-page">
<div class="login_bg"> <div class="login_bg">
<div class="logo"> <div class="logo">
<div> <a href="/">
<a href="/"> <span class="logo_text">
<span class="logo_text"> <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo.png" height="40px" v-else />
</span> </span>
</a> </a>
</div>
<!-- <div class="banner_text">
<div>智能化订单处理</div>
<div style="margin-left: 20px">数字化供采平台</div>
<div style="margin-left: 20px">多维度数据分析</div>
</div> -->
</div> </div>
</div>
<div class="login_content"> <div :class="$isMobile ? 'login-mobile' : ''">
<h2 style="text-align: center; font-weight: 400;color: #4a4c6d;margin-bottom: 40px;">欢迎登录</h2> <div :class="$isMobile ? 'login-content-mobile' : 'login_content'">
<h2
style="
text-align: center;
font-weight: 400;
color: #4a4c6d;
margin-bottom: 40px;
">
欢迎登录
</h2>
<el-form <el-form
size="medium" size="medium"
:model="ruleForm" :model="ruleForm"
...@@ -60,6 +63,7 @@ ...@@ -60,6 +63,7 @@
</el-form> </el-form>
</div> </div>
</div> </div>
<div <div
class="modal" class="modal"
:style="isShowModal ? 'display: block' : 'display: none'"> :style="isShowModal ? 'display: block' : 'display: none'">
...@@ -298,6 +302,28 @@ export default { ...@@ -298,6 +302,28 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.login-mobile {
margin: 20px;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
top: 50%;
left: 0;
right: 0;
position: absolute;
transform: translateY(-50%);
}
.login-content-mobile {
padding: 20px;
}
.login-page {
position: relative;
width: 100%;
height: 100vh;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) left / cover no-repeat;
}
.reset-password { .reset-password {
width: 100%; width: 100%;
background-image: linear-gradient( background-image: linear-gradient(
...@@ -373,11 +399,8 @@ export default { ...@@ -373,11 +399,8 @@ export default {
cursor: pointer; cursor: pointer;
} }
.logo { .logo {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
left: 7%;
top: 7%;
} }
.logo_text { .logo_text {
display: inline-block; display: inline-block;
...@@ -390,11 +413,9 @@ export default { ...@@ -390,11 +413,9 @@ export default {
margin-left: 40px; margin-left: 40px;
} }
.login_bg { .login_bg {
width: 100%; position: absolute;
height: 100vh; left: 7%;
position: relative; top: 7%;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) left / cover no-repeat;
} }
.login_content { .login_content {
padding: 70px 40px; padding: 70px 40px;
...@@ -448,8 +469,34 @@ export default { ...@@ -448,8 +469,34 @@ export default {
background: url('../assets/eyes-closed.png') no-repeat center / cover; background: url('../assets/eyes-closed.png') no-repeat center / cover;
} }
.login-page::v-deep .el-input__inner::-ms-reveal, .login-page::v-deep .el-input__inner::-ms-reveal,
.login-page::v-deep .el-input__inner::-ms-clear{ .login-page::v-deep .el-input__inner::-ms-clear {
display: none; display: none;
} }
@media screen and (max-width: 1100px) {
.login-page {
background: none;
background-color: #edf0f5;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.login_bg {
position: unset;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.login_form {
width: unset;
border-radius: 0;
}
.forget-form {
width: 84vw;
padding: 20px;
}
}
</style> </style>
src/views/price/pricePage.vue
...@@ -66,7 +66,15 @@ export default { ...@@ -66,7 +66,15 @@ export default {
class: 'h-2x', class: 'h-2x',
valueClass: 'fs-20 fw-b', valueClass: 'fs-20 fw-b',
}, },
{ label: '收费方式', value: 'chargeType' }, {
label: '收费方式',
value: (d) => {
d = d.chargeType
if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
return d
},
valueClass: 'list',
},
{ {
label: '价格', label: '价格',
value: (d) => { value: (d) => {
...@@ -105,7 +113,7 @@ export default { ...@@ -105,7 +113,7 @@ export default {
{ {
name: '试用版', name: '试用版',
chargeType: '免费3个月或3000单', // 收费方式 chargeType: ['免费3个月', '或3000单'], // 收费方式
price: 0, // 价格 price: 0, // 价格
accountsCount: 10, // 账号数量 accountsCount: 10, // 账号数量
rechargeAmount: '赠送', // 充值金额 rechargeAmount: '赠送', // 充值金额
...@@ -224,6 +232,9 @@ export default { ...@@ -224,6 +232,9 @@ export default {
if (typeof value === 'boolean') { if (typeof value === 'boolean') {
return `<span class="${value ? 'yes' : 'no'}"></span>` return `<span class="${value ? 'yes' : 'no'}"></span>`
} }
if (typeof value === 'number') {
value = `${value}`
}
if (typeof value === 'string') { if (typeof value === 'string') {
value = value.replaceAll( value = value.replaceAll(
/((\d+)(\.\d+)?)/g, /((\d+)(\.\d+)?)/g,
...@@ -327,12 +338,13 @@ export default { ...@@ -327,12 +338,13 @@ export default {
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
--item-height: 40px;
} }
.price-column, .price-column,
.price-value { .price-value {
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: var(--item-height);
padding: 0 30px; padding: 0 30px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -365,8 +377,7 @@ export default { ...@@ -365,8 +377,7 @@ export default {
.price-item:hover { .price-item:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
border-radius: 8px; border-radius: 8px;
background-color: #0085fc; background-color: #a0cfff;
color: #fff;
border-right: none; border-right: none;
} }
...@@ -374,7 +385,7 @@ export default { ...@@ -374,7 +385,7 @@ export default {
border-right: solid 1px #eee; border-right: solid 1px #eee;
} }
</style> </style>
<style scoped> <style scoped lang="scss">
.price-container .fs-20 { .price-container .fs-20 {
font-size: 20px; font-size: 20px;
} }
...@@ -384,16 +395,16 @@ export default { ...@@ -384,16 +395,16 @@ export default {
} }
.price-container .h-2x { .price-container .h-2x {
height: 80px; height: calc(var(--item-height) * 2);
} }
.price-container .h-3x { .price-container .h-3x {
height: 120px; height: calc(var(--item-height) * 3);
} }
.price-container .number { .price-container::v-deep .number {
font-size: 1.2em;
margin: 0 4px; margin: 0 4px;
color: red;
} }
.price-container .list { .price-container .list {
...@@ -450,6 +461,49 @@ export default { ...@@ -450,6 +461,49 @@ export default {
.content-body { .content-body {
padding: 40px 0 !important; padding: 40px 0 !important;
width: 100%;
overflow: hidden;
position: relative;
}
.price-container {
box-shadow: none;
overflow: auto hidden;
--item-height: 50px;
}
.price-columns {
position: sticky;
left: 0;
background-color: #fff;
}
.price-column {
width: 100px;
padding: 10px;
white-space: normal;
border-bottom: solid 1px #eee;
&:first-child {
border-top: solid 1px #eee;
}
}
.price-value {
border-bottom: solid 1px #eee;
padding: 0 10px;
&:first-child {
border-top: solid 1px #eee;
}
&::v-deep > p {
white-space: nowrap;
}
}
.price-item {
padding-bottom: 0;
} }
} }
</style> </style>
src/views/register.vue
...@@ -3,91 +3,97 @@ ...@@ -3,91 +3,97 @@
<div class="logo"> <div class="logo">
<a href="/"> <a href="/">
<span class="logo_text"> <span class="logo_text">
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo1.png" height="40px" v-if="$isMobile" />
<img src="../assets/logo.png" height="40px" v-else />
</span> </span>
</a> </a>
</div> </div>
<div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center; font-weight: 400; color: #4a4c6d"> <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
用户注册 用户注册
</h2> </h2>
<el-form <el-form
size="medium" size="medium"
:model="registerForm" :model="registerForm"
:rules="rules" :rules="rules"
ref="registerForm" ref="registerForm"
class="login_form"> class="login_form">
<el-form-item prop="email" label=""> <el-form-item prop="email" label="">
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" label=""> <el-form-item prop="code" label="">
<div style="display: flex; gap: 20px"> <div style="display: flex; gap: 20px">
<div style="flex: 1"> <div style="flex: 1">
<el-input <el-input
v-model="registerForm.code" v-model="registerForm.code"
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input> placeholder="请输入验证码"></el-input>
</div> </div>
<div> <div>
<el-button <el-button
class="get-code-button" class="get-code-button"
style="width: 112px" style="width: 112px"
:disabled="getCodeDisabled" :disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'" :class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verCode"> @click="verCode">
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }} {{
</el-button> codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> <el-form-item prop="password" label="">
<el-form-item prop="password" label=""> <el-input
<el-input type="password"
type="password" v-model="registerForm.password"
v-model="registerForm.password" prefix-icon="el-icon-lock"
prefix-icon="el-icon-lock" placeholder="请输入密码"
placeholder="请输入密码" autocomplete="off"></el-input>
autocomplete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item prop="checkPass" label="">
<el-form-item prop="checkPass" label=""> <el-input
<el-input type="password"
type="password" prefix-icon="el-icon-lock"
prefix-icon="el-icon-lock" v-model="registerForm.checkPass"
v-model="registerForm.checkPass" placeholder="请再次输入密码"
placeholder="请再次输入密码" autocomplete="off"></el-input>
autocomplete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item prop="companyName" label="">
<el-form-item prop="companyName" label=""> <el-input
<el-input v-model="registerForm.companyName"
v-model="registerForm.companyName" prefix-icon="el-icon-s-home"
prefix-icon="el-icon-s-home" placeholder="请输入公司名称"></el-input>
placeholder="请输入公司名称"></el-input> </el-form-item>
</el-form-item> <el-form-item prop="job" label="">
<el-form-item prop="job" label=""> <el-input
<el-input v-model="registerForm.job"
v-model="registerForm.job" prefix-icon="el-icon-s-order"
prefix-icon="el-icon-s-order" placeholder="请输入职务"></el-input>
placeholder="请输入职务"></el-input> </el-form-item>
</el-form-item> </el-form>
</el-form> <div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''">
<div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''"> <el-checkbox v-model="isRead" label="" :indeterminate="false" />
<el-checkbox v-model="isRead" label="" :indeterminate="false" /> <span class="tos-link">
<span class="tos-link"> 阅读并同意
阅读并同意 <a class="link" href="/protocol" target="_blank">
<a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a> 九猫ERP条款与协议
</span> </a>
</div> </span>
<div style="text-align: center;"> </div>
<button class="register-btn" type="primary" @click="onRegister"> <div style="text-align: center">
立即注册 <button class="register-btn" type="primary" @click="onRegister">
</button> 立即注册
</div> </button>
<div style="margin-top: 20px; font-size: 14px; text-align: center"> </div>
已有账号？ <div style="margin-top: 20px; font-size: 14px; text-align: center">
<router-link class="link" to="/login">马上登录</router-link> 已有账号？
<router-link class="link" to="/login">马上登录</router-link>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -302,4 +308,24 @@ export default { ...@@ -302,4 +308,24 @@ export default {
top: 7%; top: 7%;
left: 8%; left: 8%;
} }
@media screen and (max-width: 1100px) {
.login_bg {
background: unset;
}
.logo {
position: unset;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.login_content {
position: unset;
transform: unset;
padding: 20px;
}
}
</style> </style>
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