Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 49cec199 by fanx
Options

注册登录

1 parent f9754122
Inline Side-by-side
Showing 20 changed files with 303 additions and 97 deletions
postcss.config.js
......@@ -9,7 +9,7 @@ module.exports = ({ file }) => {
if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
rootValue = 37.5
} else {
rootValue = 75
rootValue = 82.8 //75
}
return {
plugins: [
......
src/assets/css/common.less
@import "variable";
*{
* {
padding: 0;
margin: 0;
box-sizing: border-box;
touch-action: auto;
-webkit-overflow-scrolling:touch;
font-family: "苹方黑体-准-简","PingFangSC-Regular","PingFang SC","Microsoft YaHei","微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
-webkit-overflow-scrolling: touch;
font-family: "苹方黑体-准-简", "PingFangSC-Regular", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft Jhenghei", sans-serif;
}
html, body {
html,
body {
// height:100vh;
//min-height: 100%;
height:100vh;
height: 100vh;
width: 100vw;
margin: 0;
padding:0;
padding: 0;
//font-weight:300;
}
// #__vconsole{
// display:none;
// }
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.iPhone{
.iPhone {
//头部
.NavBar{padding-top:calc(env(safe-area-inset-top) / 1.5)}
.NavBarWrap{margin-bottom:calc(env(safe-area-inset-top) / 1.5)}
.payment_nav{padding-top:calc(env(safe-area-inset-top) / 1.5)}
.payment_navbar_wrap{padding-top:calc(env(safe-area-inset-top) / 1.5)}
.home{padding-bottom:env(safe-area-inset-top)}
.navigation{padding-top:calc(env(safe-area-inset-top) / 1.5) !important}
.addAddress,.shop_item{padding-top:calc(env(safe-area-inset-top) / 1.5)}
.product_footer{
.NavBar {
padding-top: calc(env(safe-area-inset-top) / 1.5)
}
.NavBarWrap {
margin-bottom: calc(env(safe-area-inset-top) / 1.5)
}
.payment_nav {
padding-top: calc(env(safe-area-inset-top) / 1.5)
}
.payment_navbar_wrap {
padding-top: calc(env(safe-area-inset-top) / 1.5)
}
.home {
padding-bottom: env(safe-area-inset-top)
}
.navigation {
padding-top: calc(env(safe-area-inset-top) / 1.5) !important
}
.addAddress,
.shop_item {
padding-top: calc(env(safe-area-inset-top) / 1.5)
}
.product_footer {
//bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
padding-bottom:calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top:15px !important;
padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top: 15px !important;
}
.header {
padding-top: calc(env(safe-area-inset-top) / 1.5) !important
}
.header{padding-top:calc(env(safe-area-inset-top) / 1.5) !important}
}
}
::-webkit-scrollbar{ // 直接复制黏贴到样式页.css，完美解决
::-webkit-scrollbar {
// 直接复制黏贴到样式页.css，完美解决
display: none;
/* background-color:transparent; */
}
.pay {
height: 100vh; width: 100vw;
height: 100vh;
width: 100vw;
}
#app {
height: 100vh;
}
#app{
height:100vh;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
html{
html {
-webkit-tap-highlight-color: transparent;
}
//iconfont start
.icon {
width: 1.2em;
......@@ -60,104 +100,128 @@ html{
fill: currentColor;
overflow: hidden;
}
//iconfont end
//vant 相关
.van-tabs__wrap--scrollable .van-tab {flex:1}
.van-tabs__line{
.van-tabs__wrap--scrollable .van-tab {
flex: 1
}
.van-tabs__line {
background-color: @theme;
bottom:10px;
bottom: 10px;
}
.van-button--default{
.van-button--default {
background-color: @headerBg;
color: #fff;
}
.van-tab--active{
color:@theme;
}
.van-tabs--line .van-tabs__wrap{
//height: 50px;
.van-tab--active {
color: @theme;
}
//vant 相关 end
.titlePaddingTop{
.titlePaddingTop {
padding-top: 88px;
}
.left-enter, .left-leave-to {
.left-enter,
.left-leave-to {
transform: translate3d(-100%, 0, 0)
}
.left-leave, .left-enter-to {
.left-leave,
.left-enter-to {
transform: translate3d(0, 0, 0)
}
.left-enter-active, .left-leave-active {
.left-enter-active,
.left-leave-active {
transition: all .2s
}
// vant Dialog 按钮背景色 和 字体颜色
.van-dialog__cancel{
.van-dialog__cancel {
background: #fff;
color: #545454;
}
.van-dialog__confirm{
.van-dialog__confirm {
background: #fff;
color: #5594E5;
}
//vant nav
.van-tabs__nav--line{
padding-bottom:5px;
.van-tabs__nav--line {
padding-bottom: 5px;
box-sizing: border-box;
}
// 清除浮动
.clearfix {
*zoom: 1;
&:before,
&:after {
display: block;
content: "";
line-height: 0;
}
&:after {
clear: both;
}
}
.van-list__finished-text {
.van-list__finished-text {
position: relative;
&::before {
content: "";
background-color: #999;
height: 4px;
transform: scale(1,0.3);
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top:-3px;
margin-top: -3px;
left: 120px;
}
&::after {
content: "";
background-color: #999;
height: 4px;
transform: scale(1,0.3);
transform: scale(1, 0.3);
width: 100px;
position: absolute;
top: 50%;
margin-top:-3px;
margin-top: -3px;
right: 120px;
}
}
.noList{
.van-list__finished-text{
.noList {
.van-list__finished-text {
visibility: hidden !important;
}
}
// 预览大图页签
.van-image-preview__index {
top: 93%;
}
// picc底部样式
.van-list__finished-text::before {
left: 2.1rem;
}
.van-list__finished-text::after {
right: 2.1rem;
}
input {
border: none;
}
\ No newline at end of file
src/assets/css/index.less
@import 'variable.less';
@import 'mixins.less';
@import 'common.less';
\ No newline at end of file
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 252px 200px; }
.icon-logo { width: 200px; height: 200px; background-position: 0px 0px; }
.icon-user-question { width: 32px; height: 36px; background-position: -220px 0px; }
\ No newline at end of file
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 772px; }
.icon-bg-login { width: 828px; height: 412px; background-position: 0px 0px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: 0px -432px; }
.icon-bg-navigation { width: 828px; height: 176px; background-position: -848px -206px; }
.icon-bg-search { width: 828px; height: 186px; background-position: -848px 0px; }
.icon-logo { width: 200px; height: 200px; background-position: -848px -402px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1068px -402px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

8.65 KB | W: | H:

src/assets/images/sprite.png

268 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/FooterBottom.vue 0 → 100644
<template>
<div class="footer_bottom_container">
已经到底了
</div>
</template>
<script>
export default {
name: 'FooterBottom'
}
</script>
<style lang="less" scoped>
.footer_bottom_container {
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 20px;
height: 100px;
}
</style>
\ No newline at end of file
src/components/NafmHeader.vue
<template>
<section>
<div class="nav_bar" :style="navObj.barStyle">
<div class="nav_bar" :class="{bgImgClass:isBgImg}" :style="navObj.barStyle">
<!-- 左侧 自定义 -->
<div class="nav_left" v-if="$slots.left" slot="left">
<slot name="left" />
......@@ -30,6 +30,10 @@ export default {
bgColor: {
type: String,
},
isBgImg: {
type: Boolean,
default: true
},
color: {
type: String
},
......@@ -60,10 +64,14 @@ export default {
} else if (meta.leftArrow != undefined) {
leftArrowStatus = meta.leftArrow
}
// 如果设置了背景图片 则不用设置 背景颜色了
// console.log('this.isBgImg',this.isBgImg)
const barStyleBg = this.isBgImg ? {} : { background: this.bgColor || meta.bgColor || '#729ae0' }
// console.log('meta',meta)
return {
barStyle: {
background: this.bgColor || meta.bgColor || '#729ae0',
...barStyleBg,
color: this.color || meta.color || '#fff'
},
barLeftText: this.leftText || meta.leftText || '',
......@@ -102,6 +110,12 @@ section {
box-sizing: border-box;
padding: 0 20px;
}
.bgImgClass {
background: url(../assets/icon/bg_navigation.png) !important;
background-repeat: no-repeat;
background-size: 100% !important;
background-position: center center;
}
.nav_left {
display: flex;
align-items: center;
......@@ -132,7 +146,7 @@ section {
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
font-size: 36px;
z-index: -1;
}
.nav_right {
......
src/components/UserLayout.vue → src/components/UserCommon.vue
<template>
<div class="user_container">
<NafmHeader></NafmHeader>
<router-view></router-view>
<!-- 右侧插槽 -->
<div class="user_navigation" v-if="$slots.top" slot="top">
<slot name="top" />
</div>
</div>
</template>
<script>
export default {
name: 'UserLayout',
data() {
return {}
}
name: 'UserCommon'
}
</script>
<style lang="less" scoped>
.user_container {
background-image: url(../assets/icon/bg_login.png);
background-repeat: no-repeat;
background-size: 100%;
}
</style>
\ No newline at end of file
src/router/modules/user.js
import UserLayout from '@/components/UserLayout'
const userRouter = [
{
path: '/user',
component: UserLayout,
children: [{
path: 'login',
path: '/user/login',
name: 'Login',
meta: {
title: '登录'
},
component: () => import(/* webpackChunkName: "login" */ '@/views/user/login.vue') // 登录
}, {
path: 'register',
},
{
path: '/user/register',
name: 'Register',
meta: {
title: '注册'
},
component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册
}],
},
{
path: '/user/resetPassword',
......
src/utils/Interface.js
const NativeInterface = {
const NativeInterface = [
'callNativePay',
'callNativeShare'
]
}
const JsInterface = {
}
const JsInterface = [
'payResult',
'shareResult'
]
class Interface {
constructor() {
......
src/utils/vant-ui.js
......@@ -2,9 +2,10 @@ import Vue from 'vue'
import { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button } from 'vant'
import NafmHeader from '@/components/NafmHeader'
import FooterBottom from '@/components/FooterBottom'
// 公共组建
[NafmHeader].forEach(item => Vue.component(item.name, item));
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button].forEach(item => Vue.use(item))
......
src/views/home/index.vue
<template>
<div>
<span @click="jumpLogin">跳转登录页面</span>
<FooterBottom />
</div>
</template>
<script>
......
src/views/user/login.vue
<template>
<div class="login-container">
login
<div class="login_container">
<UserCommon>
<template slot="top">
<NafmHeader :isBgImg="false" bgColor="transparent"/>
</template>
</UserCommon>
</div>
</template>
<script>
import UserCommon from '@/components/UserCommon'
export default {
name: 'Login',
components:{
UserCommon
},
data() {
return {}
},
......
src/views/user/person/commonEdit.vue
<!-- 设置用户名 设置姓名 设置邮箱 设置单位 -->
<template>
<div class="common_container">
<NafmHeader :title="title" />
<input type="search" class="input">
<NafmHeader :title="title" class="header">
<template slot="right">
<span class="finish" @click="handleFinish">完成</span>
</template>
</NafmHeader>
<div class="search">
<input type="text" v-model="value" :placeholder="placeholder" class="input">
<span class="close" @click="handleClear">&times;</span>
</div>
</div>
</template>
<script>
......@@ -9,13 +17,65 @@ export default {
name: 'CommonEdit',
data() {
return {
title: ''
title: '',
value: '',
placeholder: ''
}
},
mounted() {
const { title, value } = this.$route.query
this.title = title
this.userName = value
console.log('title', title)
if (title == '设置用户名') {
this.placeholder = '请输入用户名'
} else if (title == '设置姓名') {
this.placeholder = '请输入您的姓名'
} else if (title == '设置邮箱') {
this.placeholder = '请输入您的邮箱'
} else if (title == '设置单位') {
this.placeholder = '请输入您的单位全称'
}
},
mounted(){
this.title = 'hello'
console.log(this.$route.query.type)
console.log(this.$route.query.value)
methods: {
handleFinish() {
// 调用设置接口
this.$router.back()
},
handleClear() {
this.value = ''
}
}
}
</script>
<style lang="less" scoped>
.header .finish {
font-size: 28px;
}
.search {
margin: 15px;
position: relative;
}
.input {
height: 100px;
line-height: 100px;
background-color: #f6f6f6;
width: 100%;
border-radius: 16px;
color: #333;
font-size: 32px;
padding: 0 100px 0 25px;
}
.close {
position: absolute;
right: 30px;
top: 35px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background-color: #c4c4c4;
border-radius: 50%;
}
</style>
\ No newline at end of file
src/views/user/person/index.vue
......@@ -7,7 +7,7 @@
<img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt="">
</template>
</van-cell>
<van-cell title="用户名" center is-link @click="handleEdit('用户名',)" value-class="right_content">
<van-cell title="用户名" center is-link @click="editUserName('设置用户名',userName)" value-class="right_content">
<template #default>
<span v-if="userName">{{userName}}</span>
<span v-else>请输入您的用户名</span>
......@@ -18,20 +18,31 @@
183****8924
</template>
</van-cell>
<van-cell title="姓名" center is-link @click="jumpResetPage" value-class="right_content">
<van-cell title="姓名" center is-link @click="editUserName('设置姓名',name)" value-class="right_content">
<template #default>
<span v-if="name">{{name}}</span>
<span v-else>请输入您的姓名</span>
</template>
</van-cell>
<van-cell title="国籍" center value-class="right_content">
<van-cell title="国籍" center is-link value-class="right_content">
<template #default>中国</template>
</van-cell>
<van-cell title="出生日期" center is-link value-class="right_content">
<template #default>
中国
<span v-if="name">{{name}}</span>
<span v-else>请选择您的出生日期</span>
</template>
</van-cell>
<van-cell title="面容ID解锁" center value-class="right_content">
<van-cell title="邮箱" center is-link @click="editUserName('设置邮箱',email)" value-class="right_content">
<template #default>
<van-switch v-model="faceIdChecked" @click="changeFaceIdStatus" size="20px" />
<span v-if="name">{{email}}</span>
<span v-else>请输入您的邮箱</span>
</template>
</van-cell>
<van-cell title="单位" center is-link @click="editUserName('设置单位',company)" value-class="right_content">
<template #default>
<span v-if="name">{{company}}</span>
<span v-else>请输入您的单位全称</span>
</template>
</van-cell>
</div>
......@@ -43,7 +54,20 @@ export default {
data() {
return {
userName: '',
name:''
name: '',
email: '',
company: ''
}
},
methods: {
editUserName(title, value) {
this.$router.push({
path: '/user/commonEdit',
query: {
title,
value
}
})
}
}
}
......
src/views/user/register.vue
<template>
<div>
Register
<div class="register_container">
<UserCommon>
<NafmHeader/>
</UserCommon>
</div>
</template>
<script>
import UserCommon from '@/components/UserCommon'
export default {
name: 'Register',
components: {},
components: {
UserCommon
},
data() {
return {}
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!