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 }) => { ...@@ -9,7 +9,7 @@ module.exports = ({ file }) => {
if (file && file.dirname && file.dirname.indexOf('vant') > -1) { if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
rootValue = 37.5 rootValue = 37.5
} else { } else {
rootValue = 75 rootValue = 82.8 //75
} }
return { return {
plugins: [ plugins: [
......
src/assets/css/common.less
@import "variable"; @import "variable";
*{
* {
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
touch-action: auto; touch-action: auto;
-webkit-overflow-scrolling:touch; -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; 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; // height:100vh;
//min-height: 100%; //min-height: 100%;
height:100vh; height: 100vh;
width: 100vw; width: 100vw;
margin: 0; margin: 0;
padding:0; padding: 0;
//font-weight:300; //font-weight:300;
} }
// #__vconsole{
// display:none;
// }
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { @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)} .NavBar {
.NavBarWrap{margin-bottom:calc(env(safe-area-inset-top) / 1.5)} padding-top: 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)} .NavBarWrap {
.navigation{padding-top:calc(env(safe-area-inset-top) / 1.5) !important} margin-bottom: calc(env(safe-area-inset-top) / 1.5)
.addAddress,.shop_item{padding-top:calc(env(safe-area-inset-top) / 1.5)} }
.product_footer{
.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; //bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
padding-bottom:calc(env(safe-area-inset-bottom) / 1.5) !important; padding-bottom: calc(env(safe-area-inset-bottom) / 1.5) !important;
padding-top:15px !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; display: none;
/* background-color:transparent; */ /* background-color:transparent; */
} }
.pay { .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; -webkit-tap-highlight-color: transparent;
} }
//iconfont start //iconfont start
.icon { .icon {
width: 1.2em; width: 1.2em;
...@@ -60,104 +100,128 @@ html{ ...@@ -60,104 +100,128 @@ html{
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
//iconfont end //iconfont end
//vant 相关 //vant 相关
.van-tabs__wrap--scrollable .van-tab {flex:1} .van-tabs__wrap--scrollable .van-tab {
.van-tabs__line{ flex: 1
}
.van-tabs__line {
background-color: @theme; background-color: @theme;
bottom:10px; bottom: 10px;
} }
.van-button--default{
.van-button--default {
background-color: @headerBg; background-color: @headerBg;
color: #fff; color: #fff;
} }
.van-tab--active{
color:@theme; .van-tab--active {
} color: @theme;
.van-tabs--line .van-tabs__wrap{
//height: 50px;
} }
//vant 相关 end //vant 相关 end
.titlePaddingTop{ .titlePaddingTop {
padding-top: 88px; padding-top: 88px;
} }
.left-enter, .left-leave-to {
.left-enter,
.left-leave-to {
transform: translate3d(-100%, 0, 0) transform: translate3d(-100%, 0, 0)
} }
.left-leave, .left-enter-to {
.left-leave,
.left-enter-to {
transform: translate3d(0, 0, 0) transform: translate3d(0, 0, 0)
} }
.left-enter-active, .left-leave-active {
.left-enter-active,
.left-leave-active {
transition: all .2s transition: all .2s
} }
// vant Dialog 按钮背景色 和 字体颜色 // vant Dialog 按钮背景色 和 字体颜色
.van-dialog__cancel{ .van-dialog__cancel {
background: #fff; background: #fff;
color: #545454; color: #545454;
} }
.van-dialog__confirm{
.van-dialog__confirm {
background: #fff; background: #fff;
color: #5594E5; color: #5594E5;
} }
//vant nav //vant nav
.van-tabs__nav--line{ .van-tabs__nav--line {
padding-bottom:5px; padding-bottom: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
// 清除浮动 // 清除浮动
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
&:before, &:before,
&:after { &:after {
display: block; display: block;
content: ""; content: "";
line-height: 0; line-height: 0;
} }
&:after { &:after {
clear: both; clear: both;
} }
} }
.van-list__finished-text { .van-list__finished-text {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
background-color: #999; background-color: #999;
height: 4px; height: 4px;
transform: scale(1,0.3); transform: scale(1, 0.3);
width: 100px; width: 100px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top:-3px; margin-top: -3px;
left: 120px; left: 120px;
} }
&::after { &::after {
content: ""; content: "";
background-color: #999; background-color: #999;
height: 4px; height: 4px;
transform: scale(1,0.3); transform: scale(1, 0.3);
width: 100px; width: 100px;
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top:-3px; margin-top: -3px;
right: 120px; right: 120px;
} }
} }
.noList{ .noList {
.van-list__finished-text{ .van-list__finished-text {
visibility: hidden !important; visibility: hidden !important;
} }
} }
// 预览大图页签 // 预览大图页签
.van-image-preview__index { .van-image-preview__index {
top: 93%; top: 93%;
} }
// picc底部样式 // picc底部样式
.van-list__finished-text::before { .van-list__finished-text::before {
left: 2.1rem; left: 2.1rem;
} }
.van-list__finished-text::after { .van-list__finished-text::after {
right: 2.1rem; right: 2.1rem;
} }
input {
border: none;
}
\ No newline at end of file \ No newline at end of file
src/assets/css/index.less
@import 'variable.less';
@import 'mixins.less'; @import 'mixins.less';
@import 'common.less'; @import 'common.less';
\ No newline at end of file \ 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 \ 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 \ 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 \ No newline at end of file
src/components/NafmHeader.vue
<template> <template>
<section> <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"> <div class="nav_left" v-if="$slots.left" slot="left">
<slot name="left" /> <slot name="left" />
...@@ -30,6 +30,10 @@ export default { ...@@ -30,6 +30,10 @@ export default {
bgColor: { bgColor: {
type: String, type: String,
}, },
isBgImg: {
type: Boolean,
default: true
},
color: { color: {
type: String type: String
}, },
...@@ -60,10 +64,14 @@ export default { ...@@ -60,10 +64,14 @@ export default {
} else if (meta.leftArrow != undefined) { } else if (meta.leftArrow != undefined) {
leftArrowStatus = meta.leftArrow leftArrowStatus = meta.leftArrow
} }
// 如果设置了背景图片 则不用设置 背景颜色了
// console.log('this.isBgImg',this.isBgImg)
const barStyleBg = this.isBgImg ? {} : { background: this.bgColor || meta.bgColor || '#729ae0' }
// console.log('meta',meta) // console.log('meta',meta)
return { return {
barStyle: { barStyle: {
background: this.bgColor || meta.bgColor || '#729ae0', ...barStyleBg,
color: this.color || meta.color || '#fff' color: this.color || meta.color || '#fff'
}, },
barLeftText: this.leftText || meta.leftText || '', barLeftText: this.leftText || meta.leftText || '',
...@@ -102,6 +110,12 @@ section { ...@@ -102,6 +110,12 @@ section {
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; 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 { .nav_left {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -132,7 +146,7 @@ section { ...@@ -132,7 +146,7 @@ section {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 34px; font-size: 36px;
z-index: -1; z-index: -1;
} }
.nav_right { .nav_right {
......
src/components/UserLayout.vue → src/components/UserCommon.vue
<template> <template>
<div class="user_container"> <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> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'UserLayout', name: 'UserCommon'
data() {
return {}
}
} }
</script> </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 \ No newline at end of file
src/router/modules/user.js
import UserLayout from '@/components/UserLayout'
const userRouter = [ const userRouter = [
{ {
path: '/user', path: '/user/login',
component: UserLayout,
children: [{
path: 'login',
name: 'Login', name: 'Login',
meta: { meta: {
title: '登录' title: '登录'
}, },
component: () => import(/* webpackChunkName: "login" */ '@/views/user/login.vue') // 登录 component: () => import(/* webpackChunkName: "login" */ '@/views/user/login.vue') // 登录
}, { },
path: 'register', {
path: '/user/register',
name: 'Register', name: 'Register',
meta: { meta: {
title: '注册' title: '注册'
}, },
component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册 component: () => import(/* webpackChunkName: "register" */ '@/views/user/register.vue') // 注册
}],
}, },
{ {
path: '/user/resetPassword', path: '/user/resetPassword',
......
src/utils/Interface.js
const NativeInterface = { const NativeInterface = [
'callNativePay',
'callNativeShare'
]
}
const JsInterface = {
} const JsInterface = [
'payResult',
'shareResult'
]
class Interface { class Interface {
constructor() { constructor() {
......
src/utils/vant-ui.js
...@@ -2,9 +2,10 @@ import Vue from 'vue' ...@@ -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 { Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button } from 'vant'
import NafmHeader from '@/components/NafmHeader' 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组件 // 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button].forEach(item => Vue.use(item)) [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> <template>
<div> <div>
<span @click="jumpLogin">跳转登录页面</span> <span @click="jumpLogin">跳转登录页面</span>
<FooterBottom />
</div> </div>
</template> </template>
<script> <script>
......
src/views/user/login.vue
<template> <template>
<div class="login-container"> <div class="login_container">
login <UserCommon>
<template slot="top">
<NafmHeader :isBgImg="false" bgColor="transparent"/>
</template>
</UserCommon>
</div> </div>
</template> </template>
<script> <script>
import UserCommon from '@/components/UserCommon'
export default { export default {
name: 'Login', name: 'Login',
components:{
UserCommon
},
data() { data() {
return {} return {}
}, },
......
src/views/user/person/commonEdit.vue
<!-- 设置用户名 设置姓名 设置邮箱 设置单位 -->
<template> <template>
<div class="common_container"> <div class="common_container">
<NafmHeader :title="title" /> <NafmHeader :title="title" class="header">
<input type="search" class="input"> <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> </div>
</template> </template>
<script> <script>
...@@ -9,13 +17,65 @@ export default { ...@@ -9,13 +17,65 @@ export default {
name: 'CommonEdit', name: 'CommonEdit',
data() { data() {
return { 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(){ methods: {
this.title = 'hello' handleFinish() {
console.log(this.$route.query.type) // 调用设置接口
console.log(this.$route.query.value) this.$router.back()
},
handleClear() {
this.value = ''
}
} }
} }
</script> </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 \ No newline at end of file
src/views/user/person/index.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt=""> <img src="https://himg.bdimg.com/sys/portraitn/item/a0abbaacd0a6d2bbb9fd73756e6e798e8d" class="headerImg" alt="">
</template> </template>
</van-cell> </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> <template #default>
<span v-if="userName">{{userName}}</span> <span v-if="userName">{{userName}}</span>
<span v-else>请输入您的用户名</span> <span v-else>请输入您的用户名</span>
...@@ -18,20 +18,31 @@ ...@@ -18,20 +18,31 @@
183****8924 183****8924
</template> </template>
</van-cell> </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> <template #default>
<span v-if="name">{{name}}</span> <span v-if="name">{{name}}</span>
<span v-else>请输入您的姓名</span> <span v-else>请输入您的姓名</span>
</template> </template>
</van-cell> </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> <template #default>
中国 <span v-if="name">{{name}}</span>
<span v-else>请选择您的出生日期</span>
</template> </template>
</van-cell> </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> <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> </template>
</van-cell> </van-cell>
</div> </div>
...@@ -43,7 +54,20 @@ export default { ...@@ -43,7 +54,20 @@ export default {
data() { data() {
return { return {
userName: '', userName: '',
name:'' name: '',
email: '',
company: ''
}
},
methods: {
editUserName(title, value) {
this.$router.push({
path: '/user/commonEdit',
query: {
title,
value
}
})
} }
} }
} }
......
src/views/user/register.vue
<template> <template>
<div> <div class="register_container">
Register <UserCommon>
<NafmHeader/>
</UserCommon>
</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 {}
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!