Browse Source

2023-02-22 完善页面样式

master
guoxing 2 years ago
parent
commit
c64e72109e
  1. 3
      mallplusui-uniapp-app/pages/index/messageDetail.vue
  2. 28
      mallplusui-uniapp-app/pages/public/login.vue
  3. 2
      mallplusui-uniapp-app/pagesU/user/coupon.vue
  4. 41
      mallplusui-uniapp-app/pagesU/user/profile.vue

3
mallplusui-uniapp-app/pages/index/messageDetail.vue

@ -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;
} }

28
mallplusui-uniapp-app/pages/public/login.vue

@ -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;

2
mallplusui-uniapp-app/pagesU/user/coupon.vue

@ -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;

41
mallplusui-uniapp-app/pagesU/user/profile.vue

@ -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);
} }

Loading…
Cancel
Save