2023-02-22 完善页面样式
This commit is contained in:
@@ -91,7 +91,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
height: 850px;
|
height: 850px;
|
||||||
padding: 10rpx;
|
font-size: 28px;
|
||||||
|
padding: 20upx 30upx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="left-bottom-sign"></view>
|
<!-- <view class="left-bottom-sign"></view> -->
|
||||||
<!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
|
<!-- <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view> -->
|
||||||
<view class="right-top-sign"></view>
|
<!-- <view class="right-top-sign"></view> -->
|
||||||
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
||||||
<!-- <view class="left-top-sign">{{ sysInfo.name }}LOGIN</view> -->
|
<!-- <view class="left-top-sign">{{ sysInfo.name }}LOGIN</view> -->
|
||||||
<view class="welcome">欢迎回来!汇融云链</view>
|
<view class="welcome">汇融云链欢迎您</view>
|
||||||
|
|
||||||
<view class="wrapper">
|
<view class="wrapper">
|
||||||
<!-- #ifdef H5 -->
|
<!-- #ifdef H5 -->
|
||||||
<view class="input-content">
|
<view class="input-content">
|
||||||
<view class="select_lay">
|
<view class="select_lay">
|
||||||
|
|
||||||
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===0}" @click="selectType(0)">免密登录</text>
|
<text :class="{'select_lay_text1':selectKey===0}"
|
||||||
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">账号登录</text>
|
@click="selectType(0)">账号登录</text>
|
||||||
|
<text style="margin-left: 20px;" :class="{'select_lay_text1':selectKey===1}"
|
||||||
|
@click="selectType(1)">短信登录</text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -57,8 +59,10 @@
|
|||||||
<view class="input-content">
|
<view class="input-content">
|
||||||
<view class="select_lay">
|
<view class="select_lay">
|
||||||
|
|
||||||
<text :class="{'select_lay_text1':selectKey===0}" @click="selectType(0)">免密登录</text>
|
<text :class="{'select_lay_text1':selectKey===0}"
|
||||||
<text class="select_lay_text" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">账号登录</text>
|
@click="selectType(0)">账号登录</text>
|
||||||
|
|
||||||
|
<text style="margin-left: 20px;" :class="{'select_lay_text1':selectKey===1}" @click="selectType(1)">短信登录</text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -114,7 +118,7 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: true,
|
||||||
selectKey: 0,
|
selectKey: 0,
|
||||||
code: '',
|
code: '',
|
||||||
coding: false,
|
coding: false,
|
||||||
@@ -488,8 +492,8 @@
|
|||||||
var that = this;
|
var that = this;
|
||||||
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
let phoneReg = /^1[1-9][0-9]\d{8}$/;
|
||||||
|
|
||||||
if(that.selectKey==0){
|
if (that.selectKey == 1) {
|
||||||
// 免密登录
|
// 短信登录
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
title: '暂不支持此登录方式'
|
title: '暂不支持此登录方式'
|
||||||
@@ -701,7 +705,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.select_lay_text {
|
.select_lay_text {
|
||||||
margin-left: 30upx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select_lay_text1 {
|
.select_lay_text1 {
|
||||||
@@ -792,7 +796,7 @@
|
|||||||
|
|
||||||
.login_bot {
|
.login_bot {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 15upx;
|
margin-top: 25upx;
|
||||||
margin-left: 70upx;
|
margin-left: 70upx;
|
||||||
margin-right: 70upx;
|
margin-right: 70upx;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|||||||
@@ -288,7 +288,7 @@ import Api from '@/common/api';
|
|||||||
/* #ifdef H5 || MP-WEIXIN*/
|
/* #ifdef H5 || MP-WEIXIN*/
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
/* #endif */
|
/* #endif */
|
||||||
width: 94%;
|
width: 100%;
|
||||||
height: 95upx;
|
height: 95upx;
|
||||||
padding: 0 3%;
|
padding: 0 3%;
|
||||||
border-bottom: solid 1upx #dedede;
|
border-bottom: solid 1upx #dedede;
|
||||||
|
|||||||
@@ -2,13 +2,16 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;">
|
<view class="list-cell b-b m-t" @click="upImg" :hover-stay-time="50" style="display: flex;align-items: center;">
|
||||||
<text class="cell-tit">我的头像</text>
|
<text class="cell-tit">我的头像</text>
|
||||||
<view class="" style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
|
<view class=""
|
||||||
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon" style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
|
style="display: flex;align-items: center;justify-content: center;height: 80upx;line-height: 80upx;">
|
||||||
|
<image v-if="userInfos && userInfos.icon" :src="userInfos.icon"
|
||||||
|
style="border-radius: 50%;width: 100upx;height: 100upx;"></image>
|
||||||
<text class="cell-more yticon icon-you"></text>
|
<text class="cell-more yticon icon-you"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="list-cell b-b m-t" @click="inputShowModal('nickname')" hover-class="cell-hover" :hover-stay-time="50">
|
<view class="list-cell b-b m-t" @click="inputShowModal('nickname')" hover-class="cell-hover"
|
||||||
|
:hover-stay-time="50">
|
||||||
<text class="cell-tit" v-if="userInfos && userInfos.nickname">修改昵称:{{userInfos.nickname|| ''}}</text>
|
<text class="cell-tit" v-if="userInfos && userInfos.nickname">修改昵称:{{userInfos.nickname|| ''}}</text>
|
||||||
<text class="cell-more yticon icon-you"></text>
|
<text class="cell-more yticon icon-you"></text>
|
||||||
</view>
|
</view>
|
||||||
@@ -37,7 +40,10 @@
|
|||||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||||
import Api from '@/common/api';
|
import Api from '@/common/api';
|
||||||
import neilModal from '@/components/neil-modal.vue';
|
import neilModal from '@/components/neil-modal.vue';
|
||||||
import { mapState, mapMutations } from 'vuex';
|
import {
|
||||||
|
mapState,
|
||||||
|
mapMutations
|
||||||
|
} from 'vuex';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
neilModal
|
neilModal
|
||||||
@@ -49,8 +55,17 @@ export default {
|
|||||||
inputContent: '',
|
inputContent: '',
|
||||||
genderShow: false,
|
genderShow: false,
|
||||||
gender: undefined,
|
gender: undefined,
|
||||||
genders: [{ name: '保密', value: 0 }, { name: '男', value: 1 }, { name: '女', value: 2 }],
|
genders: [{
|
||||||
|
name: '保密',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
name: '男',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
name: '女',
|
||||||
|
value: 2
|
||||||
|
}],
|
||||||
|
current: 0,
|
||||||
userInfos: {},
|
userInfos: {},
|
||||||
sourceTypeIndex: 0,
|
sourceTypeIndex: 0,
|
||||||
sourceType: ['拍照', '相册', '拍照或相册'],
|
sourceType: ['拍照', '相册', '拍照或相册'],
|
||||||
@@ -106,7 +121,9 @@ export default {
|
|||||||
that.$api.msg('输入不能为空');
|
that.$api.msg('输入不能为空');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let obj = { id:1};
|
let obj = {
|
||||||
|
id: 1
|
||||||
|
};
|
||||||
obj[that.feild] = that.inputContent;
|
obj[that.feild] = that.inputContent;
|
||||||
Api.apiCall('post', Api.member.updateMember, obj);
|
Api.apiCall('post', Api.member.updateMember, obj);
|
||||||
that.$api.msg('修改成功');
|
that.$api.msg('修改成功');
|
||||||
@@ -142,6 +159,7 @@ page {
|
|||||||
page {
|
page {
|
||||||
background: $page-color-base;
|
background: $page-color-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-cell {
|
.list-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
@@ -150,39 +168,48 @@ page {
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
&.log-out-btn {
|
&.log-out-btn {
|
||||||
margin-top: 40upx;
|
margin-top: 40upx;
|
||||||
|
|
||||||
.cell-tit {
|
.cell-tit {
|
||||||
color: $uni-color-primary;
|
color: $uni-color-primary;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.cell-hover {
|
&.cell-hover {
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.b-b:after {
|
&.b-b:after {
|
||||||
left: 30upx;
|
left: 30upx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.m-t {
|
&.m-t {
|
||||||
margin-top: 16upx;
|
margin-top: 16upx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-more {
|
.cell-more {
|
||||||
align-self: baseline;
|
align-self: baseline;
|
||||||
font-size: $font-lg;
|
font-size: $font-lg;
|
||||||
color: $font-color-light;
|
color: $font-color-light;
|
||||||
margin-left: 10upx;
|
margin-left: 10upx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-tit {
|
.cell-tit {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: $font-base + 2upx;
|
font-size: $font-base + 2upx;
|
||||||
color: $font-color-dark;
|
color: $font-color-dark;
|
||||||
margin-right: 10upx;
|
margin-right: 10upx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-tip {
|
.cell-tip {
|
||||||
font-size: $font-base;
|
font-size: $font-base;
|
||||||
color: $font-color-light;
|
color: $font-color-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch {
|
switch {
|
||||||
transform: translateX(16upx) scale(0.84);
|
transform: translateX(16upx) scale(0.84);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user