Skip to content

肖康 / H5_2.0

Go to a project
Commit 5e76fada by LJM
Options

css

parent d84a5dd7
Expand all
Inline Side-by-side
Showing with 193 additions and 19 deletions
assets/css/font/iconfont.json
...@@ -6,6 +6,27 @@ ...@@ -6,6 +6,27 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "35559856",
"name": "矩形",
"font_class": "juxing",
"unicode": "e791",
"unicode_decimal": 59281
},
{
"icon_id": "35559857",
"name": "矩形备份 14",
"font_class": "a-juxingbeifen14",
"unicode": "e792",
"unicode_decimal": 59282
},
{
"icon_id": "35063374",
"name": "closepop",
"font_class": "closepop",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "34945195", "icon_id": "34945195",
"name": "clear", "name": "clear",
"font_class": "clear", "font_class": "clear",
......
assets/css/mine/agreements.scss 0 → 100644
.page-agreements {
.text {
margin-top: 36rpx;
padding: 0 24rpx;
font-size: 24rpx;
color: #484b59;
}
}
assets/css/mine/login.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
.box { .box {
font-size: 32rpx; font-size: 32rpx;
color: #919399; color: #919399;
transition: all 0.4s ease;
&:first-child { &:first-child {
margin-right: 66rpx; margin-right: 66rpx;
} }
...@@ -57,6 +58,12 @@ ...@@ -57,6 +58,12 @@
font-size: 32rpx; font-size: 32rpx;
} }
} }
.text {
padding-right: 24rpx;
font-size: 26rpx;
color: #1969f9;
white-space: nowrap;
}
.uni-input { .uni-input {
font-size: 26rpx; font-size: 26rpx;
text-indent: 23rpx; text-indent: 23rpx;
...@@ -73,6 +80,17 @@ ...@@ -73,6 +80,17 @@
color: #1969f9; color: #1969f9;
} }
} }
&.pwd {
padding-right: 24rpx;
.uni-input {
text-indent: 23rpx;
font-size: 26rpx;
}
.iconfont {
font-size: 44rpx;
color: #979797;
}
}
} }
.btn { .btn {
height: 88rpx; height: 88rpx;
...@@ -81,6 +99,13 @@ ...@@ -81,6 +99,13 @@
font-size: 28rpx; font-size: 28rpx;
color: #ffffff; color: #ffffff;
} }
.forget {
margin-top: 40rpx;
justify-content: flex-end;
align-items: flex-end;
font-size: 26rpx;
color: #919399;
}
.agreement { .agreement {
position: fixed; position: fixed;
bottom: 50rpx; bottom: 50rpx;
......
components/nav.vue 0 → 100644
<template>
<view class="h5-nav row avarage verCenter">
<text class="iconfont icon-arrleft"></text>
<text class="title">{{ title }}</text>
<view class="bar"></view>
</view>
</template>
<script>
export default {
name: 'nav',
props: {
title: {
type: String,
default: '标题'
}
},
data() {
return {};
},
methods: {}
};
</script>
<style scoped lang="scss">
.h5-nav {
padding-left: 32rpx;
height: 88rpx;
.iconfont {
width: 33.3%;
font-size: 44rpx;
color: #919399;
}
.title {
width: 33.3%;
font-size: 34rpx;
color: #292b33;
text-align: center;
font-weight: bold;
}
.bar {
width: 33.3%;
}
}
</style>
pages.json
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
"style": { "style": {
"navigationBarTitleText": "购物车" "navigationBarTitleText": "购物车"
} }
}, },
{ {
"path": "pages/mine/login", "path": "pages/mine/login",
...@@ -31,6 +30,12 @@ ...@@ -31,6 +30,12 @@
} }
}, },
{ {
"path": "pages/mine/forget",
"style": {
"navigationBarTitleText": "忘记密码"
}
},
{
"path": "pages/mine/agreements", "path": "pages/mine/agreements",
"style": { "style": {
"navigationBarTitleText": "协议" "navigationBarTitleText": "协议"
......
pages/mine/forget.vue 0 → 100644
<template>
<view class="page-forget">forget</view>
</template>
<script>
import navElement from '@/components/nav.vue';
export default {
components: {
navElement
},
data() {
return {};
},
onLoad() {},
methods: {}
};
</script>
<style lang="scss">
@import '@/assets/css/mine/forget.scss';
</style>
pages/mine/login.vue
<template> <template>
<view class="page-login"> <view class="page-login">
<image src="../../static/logo.png" mode="aspectFill" class="logo"></image> <image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
<view class="tab"> <view class="tab" :class="{ mb40: curr == 1 }">
<text class="box curr">免密登录/注册</text> <text class="box" v-for="(item, index) in text_item" :key="index" :class="{ curr: index == curr }" @click="tab(index)">{{ item }}</text>
<text class="box">账号登录</text>
</view> </view>
<view class="tip row verCenter"> <view class="tip row verCenter" v-if="curr == 0">
<text class="iconfont icon-ts"></text> <text class="iconfont icon-ts"></text>
<text class="tt">未注册的手机号将自动保存为猎芯账户</text> <text class="tt">未注册的手机号将自动保存为猎芯账户</text>
</view> </view>
<view class="input-box mobile row verCenter mb24"> <!-- 免密登录/注册 -->
<view class="picker-box"> <template v-if="curr == 0">
<picker @change="bindPickerChange" :value="index" :range="array"> <view class="input-box mobile row verCenter mb24">
<view class="row verCenter bothSide"> <view class="picker-box">
<view class="uni-input">{{ array[index] }}</view> <picker @change="bindPickerChange" :value="index" :range="array">
<view class="iconfont icon-arrbot"></view> <view class="row verCenter bothSide">
<view class="uni-input">{{ array[index] }}</view>
<view class="iconfont icon-arrbot"></view>
</view>
</picker>
</view>
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
</view>
<view class="input-box code row bothSide verCenter mb40">
<input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" />
<text class="code">获取验证码</text>
</view>
</template>
<!-- 帐号登录 -->
<template v-else-if="curr == 1">
<!-- 国际手机 -->
<template v-if="login_type">
<view class="input-box mobile row verCenter bothSide mb24">
<view class="row bothSide verCenter">
<view class="picker-box">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="row verCenter bothSide">
<view class="uni-input">{{ array[index] }}</view>
<view class="iconfont icon-arrbot"></view>
</view>
</picker>
</view>
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" />
</view> </view>
</picker> <view class="text" @click="login_type = false">普通登录</view>
</view>
</template>
<!-- 普通登录 -->
<template v-else>
<view class="input-box code row bothSide verCenter mb40">
<input type="number" placeholder="请输入手机号码/邮箱" placeholder-style="color:#919399;" class="uni-input" />
<text class="code" @click="login_type = true">国际手机</text>
</view>
</template>
<view class="input-box pwd row bothSide verCenter mb40">
<input type="number" placeholder="请输入密码" placeholder-style="color:#919399;" class="uni-input" />
<text class="iconfont icon-a-juxingbeifen14"></text>
</view> </view>
<input type="number" placeholder="请输入手机号码" placeholder-style="color:#919399;" class="uni-input" /> </template>
</view> <view class="btn row rowCenter verCenter">{{ curr == 0 ? '登录/注册' : '登录' }}</view>
<view class="input-box code row bothSide verCenter mb40"> <view class="row forget"><navigator url="/forget">忘记密码</navigator></view>
<input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" />
<text class="code">获取验证码</text>
</view>
<view class="btn row rowCenter verCenter">登录/注册</view>
<view class="agreement row rowCenter verCenter"> <view class="agreement row rowCenter verCenter">
<text class="t1">登录即代表您同意</text> <text class="t1">登录即代表您同意</text>
<navigator class="t2" url="/reg/agreements">《用户注册协议》《隐私保护协议》</navigator> <navigator class="t2" url="/reg/agreements">《用户注册协议》《隐私保护协议》</navigator>
...@@ -36,7 +70,10 @@ ...@@ -36,7 +70,10 @@
export default { export default {
data() { data() {
return { return {
login_type: true,
index: 0, index: 0,
curr: 0,
text_item: ['免密登录/注册', '账号登录'],
array: ['0086', '00886', '00853', '00852'] array: ['0086', '00886', '00853', '00852']
}; };
}, },
...@@ -44,6 +81,9 @@ export default { ...@@ -44,6 +81,9 @@ export default {
methods: { methods: {
bindPickerChange: function(e, type) { bindPickerChange: function(e, type) {
console.log('picker发送选择改变，携带值为', e.detail.value); console.log('picker发送选择改变，携带值为', e.detail.value);
},
tab(index) {
this.curr = index;
} }
} }
}; };
......
router/index.js
...@@ -48,6 +48,13 @@ const router = new Router({ ...@@ -48,6 +48,13 @@ const router = new Router({
} }
}, },
{ {
path: '/pages/mine/forget',
aliasPath: '/forget',
meta: {
title: '忘记密码'
}
},
{
path: '/pages/mine/agreements', path: '/pages/mine/agreements',
aliasPath: '/reg/agreements', aliasPath: '/reg/agreements',
meta: { meta: {
......
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 sign in to comment