Skip to content

肖康 / H5_2.0

Go to a project
Commit 8595c7fc by LJM
Options

css

parent 6f3d060a
Inline Side-by-side
Showing with 174 additions and 34 deletions
assets/css/mine/forget.scss
.page-forget {
padding: 16rpx 0 0 0;
box-sizing: border-box;
.tip {
margin: 0 24rpx;
padding: 14rpx 0 0 24rpx;
height: 90rpx;
background: #fff8f2;
border-radius: 0rpx 30rpx 30rpx 30rpx;
.iconfont {
font-size: 32rpx;
color: #f98119;
margin-right: 16rpx;
}
.tt {
width: 702rpx;
font-size: 22rpx;
color: #f98119;
}
}
.step {
margin: 40rpx 24rpx 40rpx 24rpx;
.box {
position: relative;
margin-right: 16rpx;
width: 33.3%;
&:last-child {
margin-right: 0;
}
.line {
width: 100%;
height: 4rpx;
background: #f0f0f2;
border-radius: 2rpx;
}
.tt {
margin-top: 10rpx;
font-size: 22rpx;
color: #919399;
}
&.curr {
.line {
background-color: #1969f9;
}
.tt {
color: #484b59;
font-weight: bold;
}
}
}
}
.input-box {
height: 88rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin: 0 60rpx;
&.mobile {
.picker-box {
padding-left: 24rpx;
padding-right: 16rpx;
width: 159rpx;
height: 40rpx;
border-right: 1px solid #c2c4cc;
.uni-input {
font-size: 26rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
}
}
.text {
padding-right: 24rpx;
font-size: 26rpx;
color: #1969f9;
white-space: nowrap;
}
.uni-input {
font-size: 26rpx;
text-indent: 23rpx;
}
}
&.code {
padding-right: 24rpx;
.uni-input {
text-indent: 23rpx;
font-size: 26rpx;
}
.code {
font-size: 26rpx;
color: #1969f9;
}
}
&.pwd {
padding-right: 24rpx;
.uni-input {
text-indent: 23rpx;
font-size: 26rpx;
}
.iconfont {
font-size: 44rpx;
color: #979797;
}
}
}
}
assets/css/mine/login.scss
......@@ -129,10 +129,3 @@
}
}
}
.mb24 {
margin-bottom: 24rpx;
}
.mb40 {
margin-bottom: 40rpx;
}
components/nav.vue
......@@ -24,7 +24,6 @@ export default {
<style scoped lang="scss">
.h5-nav {
padding-left: 32rpx;
height: 88rpx;
.iconfont {
width: 33.3%;
......
pages/mine/forget.vue
<template>
<view class="page-forget">
<navElement title="重置密码" v-back></navElement>
<view class="tip"><text class="iconfont"></text></view>
<view class="tip row">
<text class="iconfont icon-ts"></text>
<text class="tt">猎芯网移动端目前仅支持手机号找回方式，如果您要通过邮箱账号找回密码，请使用电脑打开猎芯网www.ichunt.com</text>
</view>
<view class="step row verCenter">
<view class="box column verCenter curr">
<text class="line"></text>
<text class="tt">身份验证</text>
</view>
<view class="box column verCenter">
<text class="line"></text>
<text class="tt">重置密码</text>
</view>
<view class="box column verCenter">
<text class="line"></text>
<text class="tt">完成</text>
</view>
</view>
<view class="input-box mobile row verCenter mb24">
<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 class="input-box code row bothSide verCenter mb40">
<input type="number" placeholder="请输入验证码" placeholder-style="color:#919399;" class="uni-input" />
<text class="code">获取验证码</text>
</view>
</view>
</template>
......@@ -12,7 +44,10 @@ export default {
navElement
},
data() {
return {};
return {
index: 0,
array: ['0086', '00886', '00853', '00852']
};
},
onLoad() {},
methods: {}
......
uni.scss
/* 文字基本颜色 */
$uni-color333: #292B33; //基本色
$uni-color333: #292b33; //基本色
$uni-colorfff: #fff; //反色
$uni-color999: #919399; //辅助灰色，如加载更多的提示信息
$uni-color666: #484B59;
$uni-color666: #484b59;
/**状态颜色**/
$uni-coloract: #1969F9; //选中 蓝色
$uni-colorwarning: #F98119;//警告提示 黄色
$uni-coloract: #1969f9; //选中 蓝色
$uni-colorwarning: #f98119; //警告提示 黄色
/* 文字尺寸 */
$uni-sz12: 12rpx;
$uni-sz14: 14rpx;
$uni-fz16: 16rpx;
html,
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
view,
text,
input,navigator {
input,
navigator {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: PingFangSC-Semibold, PingFang SC;
font-family: PingFangSC-Semibold, PingFang SC;
}
.navigator-hover{
background:none;
opacity: 1;
.navigator-hover {
background: none;
opacity: 1;
}
image {
vertical-align: middle;
}
/**单行省略**/
.elep{
overflow : hidden;
text-overflow: ellipsis;
white-space : nowrap;
.elep {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/**2行省略**/
.elep2{
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
.elep2 {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
}
.column {
display: flex;
......@@ -77,4 +81,12 @@ image {
/* 垂直居中 */
.verCenter {
align-items: center;
}
\ No newline at end of file
}
.mb24 {
margin-bottom: 24rpx;
}
.mb40 {
margin-bottom: 40rpx;
}
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