Skip to content

O
offical_web
Commit 010a756e by qinjianhui
Options

fix: 修改样式

parent 264ae7b6
Showing with 400 additions and 95 deletions
src/App.vue
<template>
<div id="app">
<!-- <Head /> -->
<router-view />
</div>
</template>
<script>
import Head from './components/head.vue'
export default {
data() {
return {}
},
components: {
Head,
},
}
</script>
<style>
* {
margin: 0;
box-sizing: border-box;
}
html,
body,
......
src/assets/css/index.css
.container{
.container {
max-width: 1280px;
margin: 0 auto;
}
\ No newline at end of file
}
.link {
color: #2a6ffe;
text-decoration: none;
}
.link:hover {
color: #2386ee;
}
src/components/head.vue
......@@ -17,9 +17,9 @@
</nav>
<div class="right_btn">
<el-button type="primary" size="mini" @click="login">登录</el-button>
<el-button type="primary" size="mini" @click="register">免费试用</el-button>
<el-button type="primary" size="mini" @click="register">
免费试用
</el-button>
</div>
</div>
</header>
......@@ -30,14 +30,14 @@ export default {
data() {
return {}
},
methods:{
login(){
methods: {
login() {
this.$router.push('/login')
},
register(){
}
}
register() {
this.$router.push('/register')
},
},
}
</script>
......@@ -49,7 +49,7 @@ export default {
top: 0;
right: 0;
left: 0;
box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
/* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); */
}
.logo {
float: left;
......@@ -73,8 +73,8 @@ export default {
color: #fff;
padding: 0 20px;
}
.right_btn{
.right_btn {
display: flex;
align-items: center;
}
</style>
\ No newline at end of file
</style>
src/router/index.js
......@@ -7,35 +7,39 @@ Vue.use(VueRouter)
const routes = [
{
path: '/',
name: ' ',
component: Home
name: 'home',
component: Home,
},
{
path: '/register',
name: 'register',
component: (resolve) => require(['../views/register'], resolve)
component: (resolve) => require(['../views/register'], resolve),
},
{
path: '/login',
name: 'login',
component: (resolve) => require(['../views/login'], resolve),
},
{
path: '/contact',
name: 'contact',
component: (resolve) => require(['../views/contact'], resolve)
component: (resolve) => require(['../views/contact'], resolve),
},
{
path: '/authorizationFailed',
name: 'authorization_failed',
component: (resolve) => require(['../views/authorization-failed'], resolve)
component: (resolve) => require(['../views/authorization-failed'], resolve),
},
{
path: '/protocol',
name: 'protocol',
component: (resolve) => require(['../views/protocol'], resolve)
component: (resolve) => require(['../views/protocol'], resolve),
},
]
const router = new VueRouter({
mode:'history',
routes
mode: 'history',
routes,
})
export default router
src/views/login.vue 0 → 100644
<template>
<div>
<div class="login_bg">
<div class="logo">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</div>
<div class="banner_text">
<h1>智能化订单处理</h1>
<h1 style="margin-left: 60px">数字化供采平台</h1>
<h1 style="margin-left: 120px">多维度数据分析</h1>
</div>
<div class="login_content">
<h2 style="text-align: center">登录</h2>
<el-form
size="medium"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="login_form">
<el-form-item prop="email">
<el-input
prefix-icon="el-icon-message"
style="background: #fff"
v-model="ruleForm.email"
placeholder="Email"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
:type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
style="background: #fff"
v-model="ruleForm.password"
placeholder="Password"
@keyup.enter.native="submitForm">
<i
@click="showPwd = !showPwd"
slot="suffix"
:class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
</el-input>
</el-form-item>
<div style="text-align: center">
<button class="login-btn" @click="submitForm">
登录
</button>
</div>
<div style="margin-top: 20px; font-size: 14px">
还没有账号？
<router-link class="link" to="register">马上注册</router-link>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { post } from '../utils/axios'
import md5 from 'js-md5'
export default {
name: 'login',
components: {},
data() {
return {
ruleForm: {
password: '',
email: '',
checked: false,
},
rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'],
},
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
},
showPwd: false,
}
},
methods: {
submitForm(e) {
e.preventDefault()
this.$refs.ruleForm.validate((valid) => {
if (valid) {
const hash = md5.create()
hash.update(this.ruleForm.password)
const passwordHash = hash.hex()
let url = `business/user/login`
post(url, {
email: this.ruleForm.email,
password: passwordHash,
}).then((res) => {
if (res.code === 200) {
this.ruleForm = {}
this.$router.push('/contact')
}
})
}
})
},
},
}
</script>
<style scoped>
.logo {
position: absolute;
}
.logo_text {
display: inline-block;
line-height: 40px;
margin: 60px 0 0 80px;
}
.banner_text {
position: absolute;
top: 30%;
left: 10%;
line-height: 80px;
color: #fff;
}
.login_bg {
width: 100%;
height: 100vh;
position: relative;
image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) center / cover no-repeat;
}
.login_content {
padding: 18px;
background: rgba(255, 255, 255, 0.4);
position: absolute;
top: 50%;
left: 80%;
border-radius: 6px;
transform: translate(-50%, -50%);
box-sizing: border-box;
background-position: top right, center;
background-repeat: no-repeat;
background-size: 528px auto, contain;
}
.login_form {
padding: 40px;
width: 300px;
border-radius: 6px;
}
.login-btn {
width: 100%;
height: 38px;
display: block;
margin: 0 auto;
background: #006eff;
box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
border-radius: 4px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.eyes {
display: inline-block;
height: 14px;
width: 18px;
margin-top: 11px;
margin-right: 5px;
cursor: pointer;
}
.eyes.open {
background: url('../assets/eyes-open.png') no-repeat center / cover;
}
.eyes.close {
background: url('../assets/eyes-closed.png') no-repeat center / cover;
}
</style>
src/views/protocol.vue
......@@ -6,12 +6,12 @@
(以下称“我们”)开发和运营的九猫ERP软件及服务！
</p>
<p>
九猫ERP 软件供shopify、shopline、magento以及速卖通商城的卖家或者其从业人员使用，其结合了各种不同的工具，这将有助于您或者您代表的某个实体公司及其附属机构(以下合称为“您”)在shopify、shopline、magento以及速卖通等商城做出商业决策。
九猫ERP
软件供shopify、shopline、magento以及速卖通商城的卖家或者其从业人员使用，其结合了各种不同的工具，这将有助于您或者您代表的某个实体公司及其附属机构(以下合称为“您”)在shopify、shopline、magento以及速卖通等商城做出商业决策。
</p>
<p>
为使用我们的九猫ERP软件及服务，您应当阅读并遵守《九猫ERP使用条款与条件》（以下简称“本协议”）。请您务必审慎阅读、充分理解各条款内容。本协议通过点击“阅读并同意”，即视为您已阅读并同意本协议项下的所有条款。
<strong>本协议自您点击“阅读并同意”时起生效。</strong>
 
</p>
<ul>
<li>
......@@ -121,7 +121,7 @@
<p>5、保密约定</p>
<ul>
<li>
您与我们双方对本协议内容以及对本协议过程执行情况予以保密，不得向第三方披露。 您与我们双方互为保密资料的提供方和接受方，负有保密义务，承担保密责任。甲乙双方中任何一方未经对方书面同意不得向第三方公开和披露任何保密资料或以其他方式使用保密资料。 您与我们也须促使各自代表不向第三方公开或披露任何保密资料或以其它方式使用保密资料。除非披露、公开或利用保密资料是双方从事或开展合作项目工作在通常情况下应承担的义务（包括双方今后依法律或合同应承担的义务）适当所需的。
您与我们双方对本协议内容以及对本协议过程执行情况予以保密，不得向第三方披露。您与我们双方互为保密资料的提供方和接受方，负有保密义务，承担保密责任。甲乙双方中任何一方未经对方书面同意不得向第三方公开和披露任何保密资料或以其他方式使用保密资料。您与我们也须促使各自代表不向第三方公开或披露任何保密资料或以其它方式使用保密资料。除非披露、公开或利用保密资料是双方从事或开展合作项目工作在通常情况下应承担的义务（包括双方今后依法律或合同应承担的义务）适当所需的。
</li>
</ul>
</li>
......@@ -129,36 +129,41 @@
<p>6、保证与免责声明</p>
<ul>
<li>
<p>6.1 相互保证 各方认可和保证：</p>
<p>6.1 相互保证 各方认可和保证：</p>
<ul>
<li>(1) 签署本协议具有法律效力;</li>
<li>(1) 签署本协议具有法律效力;</li>
<li>
(2)  不会向对方转移任何恶意代码(由其它方向保证方传输的恶意代码除外)。
(2) 不会向对方转移任何恶意代码(由其它方向保证方传输的恶意代码除外)。
</li>
</ul>
</li>
<li>
<p>6.2 免责声明</p>
<p>6.2 免责声明</p>
<ul>
<li>
<strong>(1)  由于您将用户密码告知他人或与他人共享注册帐户，由此导致的任何个人资料泄露。</strong>
<strong>
(1) 由于您将用户密码告知他人或与他人共享注册帐户，由此导致的任何个人资料泄露。
</strong>
</li>
<li>
<strong>(2)  任何黑客政击、计算机病毒侵入或发作、政府部门管制和其他不可抗力等造成的个人资料泄露、丢失、被盗用或被窜改等。</strong>
<strong>
(2) 任何黑客政击、计算机病毒侵入或发作、政府部门管制和其他不可抗力等造成的个人资料泄露、丢失、被盗用或被窜改等。
</strong>
</li>
<li>
<strong>(3)  因与本软件或我们的网站链接的其它网站造成个人资料泄露及由此而导致的任何法律争议和后果。</strong>
<strong>
(3) 因与本软件或我们的网站链接的其它网站造成个人资料泄露及由此而导致的任何法律争议和后果。
</strong>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p style="text-align:center;margin-top:30px;margin-bottom:50px">本《协议》版权由九猫科技（广州）有限公司所有，保留一切解释权利。</p>
<div style="height:10px"></div>
<p style="text-align: center; margin-top: 30px; margin-bottom: 50px">
本《协议》版权由九猫科技（广州）有限公司所有，保留一切解释权利。
</p>
<div style="height: 10px"></div>
</div>
</template>
......@@ -185,10 +190,10 @@ li {
ul > li > ul {
padding-left: 2em;
}
.page_main > ul > li p {
.page_main > ul > li p {
font-weight: bold;
}
.page_main > p:not(.page_main > ul > li > p) {
text-indent: 2em;
}
</style>
\ No newline at end of file
</style>
src/views/register.vue
<template>
<div class="login_bg">
<div class="login_content">
<h2 style="text-align: center">邮箱注册</h2>
<h2 style="text-align: center">用户注册</h2>
<el-form
size="medium"
:model="registerForm"
:rules="rules"
ref="registerForm"
:inline="true"
label-width="100px"
class="login_form">
<el-form-item prop="email" label="邮箱">
<el-form-item prop="email" label="">
<el-input
v-model="registerForm.email"
prefix-icon="el-icon-postcard"
style="width: 300px; background: #fff"
placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item prop="code" label="验证码">
<el-form-item prop="code" label="">
<el-input
v-model="registerForm.code"
style="width: 180px"
prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input>
<el-button style="margin-left: 10px" @click="verCode">
获取验证码
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verCode">
{{ codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒` }}
</el-button>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-form-item prop="password" label="">
<el-input
type="password"
v-model="registerForm.password"
prefix-icon="el-icon-lock"
style="width: 300px; background: #fff"
placeholder="请输入密码"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="checkPass" label="确认密码">
<el-form-item prop="checkPass" label="">
<el-input
type="password"
prefix-icon="el-icon-lock"
v-model="registerForm.checkPass"
style="width: 300px; background: #fff"
placeholder="请再次输入密码"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="companyName" label="公司名称">
<el-form-item prop="companyName" label="">
<el-input
v-model="registerForm.companyName"
prefix-icon="el-icon-s-home"
style="width: 300px; background: #fff"
placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item prop="phoneNumber" label="手机号码">
<el-input
v-model="registerForm.phoneNumber"
style="width: 300px; background: #fff"
placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item prop="job" label="职务">
<el-form-item prop="job" label="">
<el-input
v-model="registerForm.job"
prefix-icon="el-icon-s-order"
style="width: 300px; background: #fff"
placeholder="请输入职务"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-checkbox v-model="isRead" label="" :indeterminate="false">
阅读并同意
<a href="/protocol">九猫ERP条款与协议</a>
</el-checkbox>
</el-form-item>
<div style="margin-left: 120px">
<el-button size="medium" type="primary" @click="onRegister">
立即注册
</el-button>
</div>
<div style="margin-top: 20px; font-size: 14px">
已有账号？
<router-link to="/">马上登录</router-link>
</div>
</el-form>
<div class="agree-terms" :class="agreeAnimate ? 'agree-animate' : ''">
<el-checkbox v-model="isRead" label="" :indeterminate="false" />
<span class="tos-link">
阅读并同意
<a class="link" href="/protocol" target="_blank">九猫ERP条款与协议</a>
</span>
</div>
<div style="text-align: center; padding: 0 20px">
<button class="register-btn" type="primary" @click="onRegister">
立即注册
</button>
</div>
<div style="margin-top: 20px; font-size: 14px; text-align: center">
已有账号？
<router-link class="link" to="/login">马上登录</router-link>
</div>
</div>
</div>
</template>
<script>
import { get, post } from '../utils/axios'
import md5 from 'js-md5'
export default {
name: 'register',
components: {},
......@@ -97,6 +102,9 @@ export default {
}
return {
registerForm: {},
isRead: false,
agreeAnimate: false,
codeCountDown: 0,
rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
......@@ -115,32 +123,67 @@ export default {
companyName: [
{ required: true, message: '请输入公司名称', trigger: 'blur' },
],
phoneNumber: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
],
job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
},
showPwd: false,
}
},
computed: {
getCodeDisabled() {
return this.codeCountDown > 0
},
},
methods: {
verCode() {
if (this.registerForm.email) {
get('business/user/emailcode', {
async verCode() {
try {
await new Promise((resolve, reject) => {
this.$refs.registerForm.validateField('email', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await get('business/user/emailcode', {
email: this.registerForm.email,
}).then((res) => {
this.$message.success(res.message)
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
console.error(e)
}
},
onRegister() {
this.$refs.registerForm.validate((valid) => {
if (valid) {
if (!this.isRead) {
this.agreeAnimate = true
setTimeout(() => {
this.agreeAnimate = false
}, 700)
return
}
const { code, companyName, email, job, password } = this.registerForm
const hash = md5.create()
hash.update(password)
const passwordHash = hash.hex()
post('business/user/register', {
...this.registerForm,
code: code,
companyName: companyName,
email: email,
job: job,
password: passwordHash,
}).then((res) => {
this.$message.success(res.message)
if (res.message == '操作成功') {
if (res.code === 200) {
this.registerForm = {}
this.$router.push('/')
}
......@@ -158,14 +201,19 @@ export default {
position: relative;
background: url(../assets/register.jpg) center / cover no-repeat;
}
.el-form--inline .el-form-item {
margin-right: 0px;
}
.login_content {
padding: 18px;
background: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
position: absolute;
top: 50%;
left: 75%;
height: 600px;
width: 600px;
/* height: 600px; */
/* width: 600px; */
border-radius: 6px;
transform: translate(-50%, -50%);
box-sizing: border-box;
......@@ -173,8 +221,74 @@ export default {
background-repeat: no-repeat;
}
.login_content::v-deep .el-form-item__content {
white-space: nowrap;
}
.login_form {
padding: 40px;
padding: 20px 20px 0px 20px;
border-radius: 6px;
display: flex;
align-items: center;
flex-direction: column;
}
.agree-terms {
margin-bottom: 30px;
margin-left: 20px;
}
.get-code-button:disabled:hover {
background-color: #d0d2d8;
color: #666;
}
.tos-link {
font-size: 14px;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-2.57rem);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(2.57rem);
}
100% {
transform: translateX(0);
}
}
.agree-animate {
animation: shake 0.4s;
}
.register-btn {
width: 100%;
height: 38px;
display: block;
margin: 0 auto;
background: #006eff;
box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
border-radius: 4px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.code-btn {
margin-left: 10px;
background: linear-gradient(180deg, #319af2 0%, #2386ee 100%);
color: #fff;
}
.disabled {
background-color: #d0d2d8;
color: #666;
margin-left: 10px;
}
</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