Skip to content

O
offical_web
Commit 148bb131 by qinjianhui
Options

fix： 样式修改

parent 480c3495
Showing with 205 additions and 21 deletions
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<!-- <Head /> -->
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
// import Head from './components/head.vue'
export default { export default {
data() { data() {
return {} return {}
}, },
// components: { Head },
} }
</script> </script>
<style> <style>
......
src/components/head.vue
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
}, },
methods: { methods: {
login() { login() {
this.$router.push('/login') this.$router.push('/')
}, },
register() { register() {
this.$router.push('/register') this.$router.push('/register')
......
src/components/product-intro.vue
...@@ -314,16 +314,18 @@ ...@@ -314,16 +314,18 @@
<i class="el-icon-map-location" style="margin-right: 5px"></i> <i class="el-icon-map-location" style="margin-right: 5px"></i>
广州市南沙区丰泽东路106号 广州市南沙区丰泽东路106号
</span> </span>
</div> <span class="record-number">
<div class="record-number"> <a href="https://beian.miit.gov.cn" target="_black">
<a href="https://beian.miit.gov.cn" target="_black">粤ICP备2022141405号-1</a> 粤ICP备2022141405号-1
</a>
</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.function_bg { .function_bg {
padding: 50px; padding: 0 20px;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -348,16 +350,16 @@ ...@@ -348,16 +350,16 @@
} }
.banner_footer { .banner_footer {
color: #fff; color: #fff;
padding: 30px 30px 90px; padding: 0 20px 20px 20px;
background: url(../assets/footer.jpg) center / cover no-repeat; background: url(../assets/footer.jpg) center / cover no-repeat;
} }
.record-number { .record-number {
text-align: center; margin-left: 50px;
margin-top: 20px; display: inline-block;
} }
.record-number a { .record-number a {
text-decoration: none; /* text-decoration: none; */
color: #fff; color: #fff;
} }
</style> </style>
src/router/index.js
...@@ -15,11 +15,11 @@ const routes = [ ...@@ -15,11 +15,11 @@ const routes = [
name: 'register', name: 'register',
component: (resolve) => require(['../views/register'], resolve), component: (resolve) => require(['../views/register'], resolve),
}, },
{ // {
path: '/login', // path: '/login',
name: 'login', // name: 'login',
component: (resolve) => require(['../views/login'], resolve), // component: (resolve) => require(['../views/login'], resolve),
}, // },
{ {
path: '/contact', path: '/contact',
name: 'contact', name: 'contact',
......
src/views/home.vue
<template> <template>
<div class="home-page"> <div class="home-page">
<Head /> <!-- <Head /> -->
<div class="login_bg">
<div class="logo">
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<main class="home-main"> <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; text-align: center">
还没有账号？
<router-link class="link" to="register">马上注册</router-link>
</div>
</el-form>
</div>
</div>
<!-- <main class="home-main">
<div <div
style=" style="
font-size: 48px; font-size: 48px;
...@@ -13,18 +65,41 @@ ...@@ -13,18 +65,41 @@
align-items: center; align-items: center;
"> ">
</div> </div>
</main> </main> -->
<product-intro /> <product-intro />
</div> </div>
</template> </template>
<script> <script>
import Head from '../components/head.vue' // import Head from '../components/head.vue'
import ProductIntro from '../components/product-intro.vue' import ProductIntro from '../components/product-intro.vue'
import md5 from 'js-md5'
import { post } from '../utils/axios'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { Head, ProductIntro }, components: { ProductIntro },
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,
}
},
mounted() { mounted() {
this.$el.addEventListener('scroll', this.onScroll) this.$el.addEventListener('scroll', this.onScroll)
}, },
...@@ -32,6 +107,27 @@ export default { ...@@ -32,6 +107,27 @@ export default {
this.$el.removeEventListener('scroll', this.onScroll) this.$el.removeEventListener('scroll', this.onScroll)
}, },
methods: { 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')
}
})
}
})
},
onScroll() { onScroll() {
const top = this.$el.scrollTop const top = this.$el.scrollTop
if (top === 0) { if (top === 0) {
...@@ -65,9 +161,79 @@ export default { ...@@ -65,9 +161,79 @@ export default {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.home-main { /* .home-main {
padding-top: 60px; padding-top: 60px;
height: calc(70vh - 60px); height: calc(70vh - 60px);
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9);
} */
.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> </style>
src/views/register.vue
<template> <template>
<div class="login_bg"> <div class="login_bg">
<div class="logo">
<a href="/">
<span class="logo_text">
<img src="../assets/logo.png" height="40px" />
</span>
</a>
</div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center">用户注册</h2> <h2 style="text-align: center">用户注册</h2>
<el-form <el-form
...@@ -78,7 +85,7 @@ ...@@ -78,7 +85,7 @@
</div> </div>
<div style="margin-top: 20px; font-size: 14px; text-align: center"> <div style="margin-top: 20px; font-size: 14px; text-align: center">
已有账号？ 已有账号？
<router-link class="link" to="/login">马上登录</router-link> <router-link class="link" to="/">马上登录</router-link>
</div> </div>
</div> </div>
</div> </div>
...@@ -291,4 +298,10 @@ export default { ...@@ -291,4 +298,10 @@ export default {
color: #666; color: #666;
margin-left: 10px; margin-left: 10px;
} }
.logo {
position: absolute;
top: 60px;
left: 80px;
}
</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