Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 00e93d33 by fanx
Options

公共头部处理

1 parent d3d98ec9
Inline Side-by-side
Showing 11 changed files with 61 additions and 93 deletions
src/assets/css/common.less
...@@ -233,6 +233,11 @@ input { ...@@ -233,6 +233,11 @@ input {
background-size : 100% !important; background-size : 100% !important;
background-position: center center; background-position: center center;
} }
.nafmii-head-bg1-2 {
background : url("~@/assets/icon/bg_login_2.png") no-repeat !important;
background-size : 100% !important;
background-position: center center;
}
.nafmii-head-bg2 { .nafmii-head-bg2 {
background : url("~@/assets/icon/bg_mine.png") no-repeat !important; background : url("~@/assets/icon/bg_mine.png") no-repeat !important;
background-size : 100% !important; background-size : 100% !important;
......
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1036px; }
.icon-bg-common { width: 828px; height: 360px; background-position: 0px -432px; }
.icon-bg-login { width: 828px; height: 412px; background-position: 0px 0px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -848px -432px; }
.icon-email { width: 36px; height: 36px; background-position: -344px -812px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -776px -812px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -676px -812px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -726px -812px; }
.icon-logo { width: 224px; height: 224px; background-position: 0px -812px; }
.icon-password { width: 36px; height: 36px; background-position: -400px -812px; }
.icon-tel { width: 36px; height: 36px; background-position: -456px -812px; }
.icon-user-question { width: 32px; height: 36px; background-position: -624px -812px; }
.icon-user { width: 36px; height: 36px; background-position: -512px -812px; }
.icon-verification { width: 36px; height: 36px; background-position: -568px -812px; }
.icon-wechat { width: 80px; height: 78px; background-position: -244px -812px; }
.icon-bg-member { width: 828px; height: 406px; background-position: -848px 0px; }
\ No newline at end of file \ No newline at end of file
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1292px; }
.icon-bg-common { width: 828px; height: 360px; background-position: -848px -526px; }
.icon-bg-login { width: 828px; height: 412px; background-position: -848px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: 0px -526px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: 0px -952px; }
.icon-email { width: 36px; height: 36px; background-position: -848px -432px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -1280px -432px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -1180px -432px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1230px -432px; }
.icon-logo { width: 224px; height: 224px; background-position: -848px -952px; }
.icon-password { width: 36px; height: 36px; background-position: -904px -432px; }
.icon-tel { width: 36px; height: 36px; background-position: -960px -432px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1128px -432px; }
.icon-user { width: 36px; height: 36px; background-position: -1016px -432px; }
.icon-verification { width: 36px; height: 36px; background-position: -1072px -432px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1092px -952px; }
.icon-bg-login-2 { width: 828px; height: 506px; background-position: 0px 0px; }
\ No newline at end of file \ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

558 KB | W: | H:

src/assets/images/sprite.png

599 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/UserCommon.vue deleted 100644 → 0
<template>
<div class="user_container">
<div class="logo">
<img :src="require('@/assets/icon/logo.png')" alt="">
</div>
<!-- 顶部插槽 -->
<div class="user_navigation" v-if="$slots.top" slot="top">
<slot name="top" />
</div>
</div>
</template>
<script>
export default {
name: 'UserCommon'
}
</script>
<style lang="less" scoped>
.user_container {
background-image: url(../assets/icon/bg_login.png);
background-repeat: no-repeat;
background-size: 100%;
height: 250px;
}
.logo {
display: flex;
justify-content: center;
img {
margin-top: 140px;
width: 112px;
height: 112px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/user/findPassword.vue
<template> <template>
<div class="login_container"> <div class="login_container">
<UserCommon> <img src="@/assets/icon/bg_login_2.png" />
<template slot="top"> <div class="login_box">
<NafmHeader :isBgImg="false" :title="title" bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" />
</template> </div>
</UserCommon>
<div class="login_content"> <div class="login_content">
<div class="login_form_box"> <div class="login_form_box">
<div class="login_form"> <div class="login_form">
...@@ -22,7 +21,6 @@ ...@@ -22,7 +21,6 @@
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
import SendVerificationCode from '@/components/SendVerificationCode' import SendVerificationCode from '@/components/SendVerificationCode'
import utils from "@/utils/"; import utils from "@/utils/";
...@@ -30,7 +28,6 @@ import utils from "@/utils/"; ...@@ -30,7 +28,6 @@ import utils from "@/utils/";
export default { export default {
name: 'Login', name: 'Login',
components: { components: {
UserCommon,
SendVerificationCode SendVerificationCode
}, },
data() { data() {
......
src/views/user/less/login.less
...@@ -5,6 +5,14 @@ ...@@ -5,6 +5,14 @@
flex-direction: column; flex-direction: column;
} }
.login_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
.login_content { .login_content {
margin-top: 40px; margin-top: 40px;
} }
...@@ -22,11 +30,12 @@ ...@@ -22,11 +30,12 @@
bottom: 4px; bottom: 4px;
} }
.login_form_box{ .login_form_box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.login_form { .login_form {
width: 330px; width: 330px;
margin-top: 20px; margin-top: 20px;
...@@ -36,13 +45,13 @@ ...@@ -36,13 +45,13 @@
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
/deep/ .van-cell{ /deep/ .van-cell {
padding-right: 0 !important; padding-right: 0 !important;
padding-left: 0 !important; padding-left: 0 !important;
border-bottom: 1px solid #ebedf0; border-bottom: 1px solid #ebedf0;
} }
/deep/ .van-cell:not(:last-child)::after{ /deep/ .van-cell:not(:last-child)::after {
border: none; border: none;
} }
...@@ -82,7 +91,7 @@ ...@@ -82,7 +91,7 @@
opacity: 1; opacity: 1;
} }
.register_btn{ .register_btn {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
src/views/user/loginPhone.vue
<template> <template>
<div class="login_container"> <div class="login_container">
<UserCommon>
<template slot="top"> <img src="@/assets/icon/bg_login_2.png" />
<NafmHeader bgColor="transparent" /> <div class="login_box">
</template> <NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" />
</UserCommon> </div>
<div class="login_content"> <div class="login_content">
<LoginTabs :type="1" /> <LoginTabs :type="1" />
<div class="login_form_box"> <div class="login_form_box">
...@@ -24,7 +25,6 @@ ...@@ -24,7 +25,6 @@
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
import LoginTabs from './components/LoginTabs' import LoginTabs from './components/LoginTabs'
import OtherLogin from './components/OtherLogin' import OtherLogin from './components/OtherLogin'
import SendVerificationCode from '@/components/SendVerificationCode' import SendVerificationCode from '@/components/SendVerificationCode'
...@@ -34,7 +34,6 @@ import utils from "@/utils/"; ...@@ -34,7 +34,6 @@ import utils from "@/utils/";
export default { export default {
name: 'Login', name: 'Login',
components: { components: {
UserCommon,
LoginTabs, LoginTabs,
OtherLogin, OtherLogin,
SendVerificationCode SendVerificationCode
......
src/views/user/loginUserName.vue
<template> <template>
<div class="login_container"> <div class="login_container">
<UserCommon> <img src="@/assets/icon/bg_login_2.png" />
<template slot="top"> <div class="login_box">
<NafmHeader bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" bgColor="transparent" />
</template> </div>
</UserCommon>
<div class="login_content"> <div class="login_content">
<LoginTabs :type="2" /> <LoginTabs :type="2" />
<div class="login_form_box"> <div class="login_form_box">
...@@ -25,7 +24,6 @@ ...@@ -25,7 +24,6 @@
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
import LoginTabs from './components/LoginTabs' import LoginTabs from './components/LoginTabs'
import OtherLogin from './components/OtherLogin' import OtherLogin from './components/OtherLogin'
import SendVerificationCode from '@/components/SendVerificationCode' import SendVerificationCode from '@/components/SendVerificationCode'
...@@ -35,7 +33,6 @@ import utils from "@/utils/"; ...@@ -35,7 +33,6 @@ import utils from "@/utils/";
export default { export default {
name: 'Login', name: 'Login',
components: { components: {
UserCommon,
LoginTabs, LoginTabs,
OtherLogin, OtherLogin,
SendVerificationCode SendVerificationCode
......
src/views/user/register.vue
<template> <template>
<div class="register_container"> <div class="register_container">
<UserCommon> <img src="@/assets/icon/bg_login_2.png" />
<NafmHeader/> <div class="login_box">
</UserCommon> <NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" />
</div>
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
export default { export default {
name: 'Register', name: 'Register',
components: { components: {},
UserCommon
},
data() { data() {
return {} return {}
}, },
......
src/views/user/resetPassword.vue
<template> <template>
<div class="login_container"> <div class="login_container">
<UserCommon> <img src="@/assets/icon/bg_login_2.png" />
<template slot="top"> <div class="login_box">
<NafmHeader bgColor="transparent" /> <NafmHeader navClass="nafmii-head-bg1" :title="title" bgColor="transparent" />
</template> </div>
</UserCommon>
<div class="login_content"> <div class="login_content">
<div class="login_form_box"> <div class="login_form_box">
<div class="login_form"> <div class="login_form">
...@@ -17,16 +16,13 @@ ...@@ -17,16 +16,13 @@
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
export default { export default {
name: 'Login', name: 'Login',
components: { components: {},
UserCommon,
},
data() { data() {
return { return {
password: "", password: "",
aginPassword:"", aginPassword: "",
passwordIcon: require('@/assets/icon/password.png'), passwordIcon: require('@/assets/icon/password.png'),
} }
}, },
...@@ -50,7 +46,7 @@ export default { ...@@ -50,7 +46,7 @@ export default {
Toast('请再次输入密码') Toast('请再次输入密码')
return return
} }
if (this.password!=this.aginPassword) { if (this.password != this.aginPassword) {
Toast('两次输入的密码不一致') Toast('两次输入的密码不一致')
return return
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!