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