uniapp 个人信息页面

im-platform/src/main/java/com/bx/implatform/controller/LoginController.java

@@ -1,6 +1,7 @@
 package com.bx.implatform.controller;
 
 
+import com.bx.implatform.dto.ModifyPwdDTO;
 import com.bx.implatform.result.Result;
 import com.bx.implatform.result.ResultUtils;
 import com.bx.implatform.service.IUserService;
@@ -45,4 +46,12 @@ public class LoginController {
         userService.register(dto);
         return ResultUtils.success();
     }
+
+    @PutMapping("/modifyPwd")
+    @ApiOperation(value = "修改密码",notes="修改用户密码")
+    public Result update(@Valid @RequestBody ModifyPwdDTO dto){
+        userService.modifyPassword(dto);
+        return ResultUtils.success();
+    }
+
 }

im-platform/src/main/java/com/bx/implatform/controller/UserController.java

@@ -1,5 +1,6 @@
 package com.bx.implatform.controller;
 
+import com.bx.implatform.dto.ModifyPwdDTO;
 import com.bx.implatform.entity.User;
 import com.bx.implatform.result.Result;
 import com.bx.implatform.result.ResultUtils;
@@ -61,7 +62,6 @@ public class UserController {
 
 
 
-
     @GetMapping("/findByNickName")
     @ApiOperation(value = "查找用户",notes="根据昵称查找用户")
     public Result<List<UserVO>> findByNickName(@NotEmpty(message = "用户昵称不可为空") @RequestParam("nickName") String nickName){

im-platform/src/main/java/com/bx/implatform/dto/GroupMessageDTO.java

@@ -9,7 +9,7 @@ import javax.validation.constraints.NotEmpty;
 import javax.validation.constraints.NotNull;
 
 @Data
-@ApiModel("群聊消息VO")
+@ApiModel("群聊消息DTO")
 public class GroupMessageDTO {
 
     @NotNull(message="群聊id不可为空")

im-platform/src/main/java/com/bx/implatform/dto/LoginDTO.java

@@ -11,7 +11,7 @@ import javax.validation.constraints.NotEmpty;
 import javax.validation.constraints.NotNull;
 
 @Data
-@ApiModel("用户登录VO")
+@ApiModel("用户登录DTO")
 public class LoginDTO {
 
     @Max(value = 1,message = "登录终端类型取值范围:0,1")
@@ -24,7 +24,7 @@ public class LoginDTO {
     @ApiModelProperty(value = "用户名")
     private String userName;
 
-   @NotEmpty(message="用户密码不可为空")
+    @NotEmpty(message="用户密码不可为空")
     @ApiModelProperty(value = "用户密码")
     private String password;
 

im-platform/src/main/java/com/bx/implatform/dto/ModifyPwdDTO.java

@@ -0,0 +1,21 @@
+package com.bx.implatform.dto;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+import javax.validation.constraints.NotEmpty;
+
+@Data
+@ApiModel("修改密码DTO")
+public class ModifyPwdDTO {
+
+    @NotEmpty(message="旧用户密码不可为空")
+    @ApiModelProperty(value = "旧用户密码")
+    private String oldPassword;
+
+    @NotEmpty(message="新用户密码不可为空")
+    @ApiModelProperty(value = "新用户密码")
+    private String newPassword;
+
+}

im-platform/src/main/java/com/bx/implatform/dto/PrivateMessageDTO.java

@@ -10,7 +10,7 @@ import javax.validation.constraints.NotEmpty;
 import javax.validation.constraints.NotNull;
 
 @Data
-@ApiModel("私聊消息VO")
+@ApiModel("私聊消息DTO")
 public class PrivateMessageDTO {
 
 

im-platform/src/main/java/com/bx/implatform/dto/RegisterDTO.java

@@ -8,7 +8,7 @@ import org.hibernate.validator.constraints.Length;
 import javax.validation.constraints.NotEmpty;
 
 @Data
-@ApiModel("用户注册VO")
+@ApiModel("用户注册DTO")
 public class RegisterDTO {
 
     @Length(max = 64,message = "用户名不能大于64字符")

im-platform/src/main/java/com/bx/implatform/service/IUserService.java

@@ -1,6 +1,7 @@
 package com.bx.implatform.service;
 
 import com.baomidou.mybatisplus.extension.service.IService;
+import com.bx.implatform.dto.ModifyPwdDTO;
 import com.bx.implatform.entity.User;
 import com.bx.implatform.dto.LoginDTO;
 import com.bx.implatform.dto.RegisterDTO;
@@ -14,6 +15,8 @@ public interface IUserService extends IService<User> {
 
     LoginVO login(LoginDTO dto);
 
+    void modifyPassword(ModifyPwdDTO dto);
+
     LoginVO refreshToken(String refreshToken);
 
     void register(RegisterDTO dto);

im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java

@@ -7,6 +7,7 @@ import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.bx.imclient.IMClient;
 import com.bx.implatform.config.JwtProperties;
+import com.bx.implatform.dto.ModifyPwdDTO;
 import com.bx.implatform.entity.Friend;
 import com.bx.implatform.entity.GroupMember;
 import com.bx.implatform.entity.User;
@@ -88,6 +89,9 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
         return vo;
     }
 
+
+
+
     /**
      * 用refreshToken换取新 token
      *
@@ -129,6 +133,19 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
         log.info("注册用户，用户id:{},用户名:{},昵称:{}",user.getId(),dto.getUserName(),dto.getNickName());
     }
 
+
+    @Override
+    public void modifyPassword(ModifyPwdDTO dto) {
+        UserSession session = SessionContext.getSession();
+        User user = this.getById(session.getUserId());
+        if(!passwordEncoder.matches(dto.getOldPassword(),user.getPassword())){
+            throw  new GlobalException("旧密码不正确");
+        }
+        user.setPassword(passwordEncoder.encode(dto.getNewPassword()));
+        this.updateById(user);
+        log.info("用户修改密码，用户id:{},用户名:{},昵称:{}",user.getId(),user.getUserName(),user.getNickName());
+    }
+
     /**
      * 根据用户名查询用户
      *

im-uniapp/pages.json

@@ -44,6 +44,10 @@
 		"path": "pages/group/group-invite"
 	}, {
 		"path": "pages/group/group-member"
+	}, {
+		"path": "pages/mine/mine-edit"
+	}{
+		"path": "pages/mine/mine-password"
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

im-uniapp/pages/chat/chat-box.vue

@@ -4,7 +4,7 @@
 			<text class="title">{{title}}</text>
 			<uni-icons class="btn-side" type="more-filled" size="30"></uni-icons>
 		</view>
-		<view class="chat-msg" @click="switchChatTabBox('none',false)">
+		<view class="chat-msg" @click="switchChatTabBox('none',true)">
 			<scroll-view class="scroll-box" scroll-y="true" :scroll-into-view="'chat-item-'+scrollMsgIdx">
 				<view v-for="(msgInfo,idx) in chat.messages" :key="idx">
 					<chat-message-item :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
@@ -16,16 +16,21 @@
 		<view class="send-bar">
 			<view class="iconfont icon-voice-circle"></view>
 			<view class="send-text">
-				<textarea class="send-text-area" v-model="sendText"  auto-height :show-confirm-bar="false" :focus="sendTextFocus"
+				<textarea class="send-text-area" v-model="sendText" auto-height 
-					@focus="onSendTextFoucs()" cursor-spacing="20" @keydown.enter="sendTextMessage()" @click="switchChatTabBox('none',true)" :hold-keyboard="sendTextFocus"></textarea>
+					:show-confirm-bar="false" :adjust-position="false"
+					@focus="onSendTextFoucs" @confirm="sendTextMessage()" 
+					@keyboardheightchange="onKeyboardheightchange"
+					confirm-type="send" @blur="onSendTextBlur"
+					confirm-hold :hold-keyboard="true"></textarea>
+			</view>
+			<view class="iconfont icon-icon_emoji" @touchend.prevent="switchChatTabBox('emo',true)"></view>
+			<view v-show="sendText==''" class="iconfont icon-add-circle" @touchend.prevent="switchChatTabBox('tools',true)">
 			</view>
-			<view class="iconfont icon-icon_emoji" @click="switchChatTabBox('emo',false)"></view>
-			<view v-show="sendText==''" class="iconfont icon-add-circle" @click="switchChatTabBox('tools',false)"></view>
 			<button v-show="sendText!=''" class="btn-send" type="primary" @touchend.prevent="sendTextMessage()"
 				size="mini">发送</button>
 		</view>
 
-		<view class="chat-tab-bar" v-show="chatTabBox!='none'">
+		<view class="chat-tab-bar" v-show="chatTabBox!='none' ||showKeyBoard " :style="{height:`${keyboardHeight}px`}">
 			<view v-if="chatTabBox == 'tools'" class="chat-tools">
 				<view class="chat-tools-item">
 					<image-upload :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
@@ -34,7 +39,7 @@
 					</image-upload>
 					<view class="tool-name">相册</view>
 				</view>
-				<view class="chat-tools-item" v-for="(tool, idx) in tools" @click="onClickTool(tool)">
+				<view class="chat-tools-item" v-for="(tool, idx) in tools" @click.stop="onClickTool(tool)">
 					<view class="tool-icon iconfont" :class="tool.icon"></view>
 					<view class="tool-name">{{ tool.name }}</view>
 				</view>
@@ -46,8 +51,9 @@
 						:key="i" @click="selectEmoji(emoText)" mode="aspectFit" lazy-load="true"></image>
 				</view>
 			</scroll-view>
-
+			<view v-if="showKeyBoard"></view>
 		</view>
+		
 	</view>
 </template>
 
@@ -63,7 +69,8 @@
 				showVoice: false, // 是否显示语音录制弹窗
 				scrollMsgIdx: 0, // 滚动条定位为到哪条消息
 				chatTabBox: 'none',
-				sendTextFocus: false,
+				showKeyBoard:false,
+				keyboardHeight: 322,
 				tools: [{
 						name: "拍摄",
 						icon: "icon-camera"
@@ -129,8 +136,6 @@
 				}).finally(() => {
 					// 滚动到底部
 					this.scrollToBottom();
-					// 重新获得输入焦点
-					//this.sendTextFocus = true;
 				});
 			},
 			fillTargetId(msgInfo, targetId) {
@@ -142,16 +147,16 @@
 			},
 			scrollToBottom() {
 				let size = this.chat.messages.length;
-				if(size>0){
+				if (size > 0) {
-					this.scrollToMsgIdx(size-1);
+					this.scrollToMsgIdx(size - 1);
 				}
 			},
-			scrollToMsgIdx(idx){
+			scrollToMsgIdx(idx) {
 				// 踩坑：如果scrollMsgIdx值没变化，滚动条不会移动
-				if(idx == this.scrollMsgIdx && idx>0){
+				if (idx == this.scrollMsgIdx && idx > 0) {
 					this.$nextTick(() => {
 						// 先滚动到上一条
-						this.scrollMsgIdx = idx-1;
+						this.scrollMsgIdx = idx - 1;
 						// 再滚动目标位置
 						this.scrollToMsgIdx(idx);
 					});
@@ -160,21 +165,39 @@
 				this.$nextTick(() => {
 					this.scrollMsgIdx = idx;
 				});
-				
+
 			},
-			switchChatTabBox(chatTabBox,sendTextFocus) {
+			switchChatTabBox(chatTabBox,hideKeyBoard) {
 				console.log("switchChatTabBox")
 				this.chatTabBox = chatTabBox;
-				this.sendTextFocus = sendTextFocus
 				this.scrollToBottom();
-				console.log(this.sendTextFocus)
+				if(hideKeyBoard){
+					uni.hideKeyboard();	
+				}
 			},
 			selectEmoji(emoText) {
 				this.sendText += `#${emoText};`;
 			},
-			onSendTextFoucs(){
+			onSendTextFoucs(e) {
-				console.log("onSendTextFoucs")
+				// 更新键盘高度
-				this.scrollToBottom();
+				// if (e && e.detail && e.detail.height) {
+				// 	this.switchChatTabBox('keyboard')
+				// 	this.keyboardHeight = this.rpxTopx(e.detail.height);
+				// 	console.log(this.keyboardHeight)
+				// }
+			},
+			onKeyboardheightchange(e){
+				console.log(e);
+				if(e.detail.height >0){
+					this.showKeyBoard = true;
+					this.switchChatTabBox('none',false)
+					this.keyboardHeight = this.rpxTopx(e.detail.height);
+				}else{
+					this.showKeyBoard = false;
+				}
+			},
+			onSendTextBlur() {
+				//this.switchChatTabBox("none")
 			},
 			onUploadImageBefore(file) {
 				let data = {
@@ -225,7 +248,7 @@
 						break;
 
 				}
-	
+
 			},
 			loadGroup(groupId) {
 				this.$http({
@@ -235,9 +258,9 @@
 					this.group = group;
 					this.$store.commit("updateChatFromGroup", group);
 					this.$store.commit("updateGroup", group);
-			
+
 				});
-			
+
 				this.$http({
 					url: `/group/members/${groupId}`,
 					method: 'get'
@@ -256,6 +279,12 @@
 					this.$store.commit("updateFriend", friend);
 				})
 			},
+			rpxTopx(rpx) {
+				// px转换成rpx
+				let info = uni.getSystemInfoSync()
+				let px = info.windowWidth * rpx / 750;
+				return Math.floor(rpx);
+			}
 		},
 		computed: {
 			mine() {
@@ -293,6 +322,7 @@
 		onUnload() {
 			console.log("onShow")
 			this.$store.commit("activeChat", -1);
+
 		}
 	}
 </script>
@@ -303,6 +333,7 @@
 		border: #dddddd solid 1px;
 		display: flex;
 		flex-direction: column;
+
 		.header {
 			display: flex;
 			justify-content: center;
@@ -333,6 +364,7 @@
 			overflow: hidden;
 			position: relative;
 			background-color: white;
+
 			.scroll-box {
 				height: 100%;
 			}
@@ -362,7 +394,7 @@
 				min-height: 85rpx;
 				font-size: 30rpx;
 				box-sizing: border-box;
-				
+
 				.send-text-area {
 					width: 100%;
 				}
@@ -411,6 +443,7 @@
 
 			.chat-emotion {
 				height: 100%;
+
 				.emotion-item-list {
 					display: flex;
 					flex-wrap: wrap;

im-uniapp/pages/common/user-info.vue

@@ -75,6 +75,8 @@
 					title: "确认删除",
 					content: `确认要删除与 '${this.userInfo.nickName}'的好友关系吗?`,
 					success: ()=> {
+						if(res.cancel)
+							return;
 						this.$http({
 							url: `/friend/delete/${this.userInfo.id}`,
 							method: 'delete'

im-uniapp/pages/group/group-edit.vue

@@ -21,7 +21,6 @@
 			</uni-forms-item>
 		</uni-forms>
 		<button type="primary" @click="submit()">提交</button>
-
 	</view>
 </template>
 

im-uniapp/pages/group/group-info.vue

@@ -100,6 +100,8 @@
 					title: '确认退出?',
 					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
 					success: () => {
+						if(res.cancel)
+							return;
 						this.$http({
 							url: `/group/quit/${this.group.id}`,
 							method: 'DELETE'
@@ -122,7 +124,9 @@
 				uni.showModal({
 					title: '确认解散?',
 					content: `确认要解散群聊'${this.group.name}'吗?`,
-					success:()=>{
+					success:(res)=>{
+						if(res.cancel)
+							return;
 						this.$http({
 							url: `/group/delete/${this.group.id}`,
 							method: 'delete'

im-uniapp/pages/group/group-member.vue

@@ -39,7 +39,9 @@
 				uni.showModal({
 					title: '确认移出?',
 					content: `确定将成员'${member.aliasName}'移出群聊吗？`,
-					success: () => {
+					success: (res) => {
+						if(res.cancel) 
+							return;
 						this.$http({
 							url: `/group/kick/${this.group.id}?userId=${member.userId}`,
 							method: 'DELETE'

im-uniapp/pages/mine/mine-edit.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="page mine-edit">
+		<uni-forms ref="form" :modelValue="userInfo" label-position="top"
+			label-width="100%">
+			<uni-forms-item label="头像:" name="headImage">
+				<image-upload :onSuccess="onUnloadImageSuccess">
+					<image :src="userInfo.headImageThumb" class="head-image"></image>
+				</image-upload>
+			</uni-forms-item>
+			<uni-forms-item label="用户名:" name="userName">
+				<uni-easyinput type="text" v-model="userInfo.userName" :disabled="true" />
+			</uni-forms-item>
+			<uni-forms-item label="昵称:" name="nickName">
+				<uni-easyinput v-model="userInfo.nickName" type="text" :placeholder="userInfo.userName" />
+			</uni-forms-item>
+			<uni-forms-item label="性别:" name="sex">
+				<radio-group @change="onSexchange">
+					<label class="radio"><radio value="0" :checked="userInfo.sex==0" />男</label>
+					<label class="radio"><radio value="1" :checked="userInfo.sex==1" />女  </label>
+				</radio-group>
+			</uni-forms-item>
+			<uni-forms-item label="签名:" name="signature">
+				<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="编辑个性标签,展示我的独特态度" />
+			</uni-forms-item>
+		</uni-forms>
+		<button type="primary" @click="onSubmit()">提交</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				userInfo: {}
+			}
+		},
+		methods:{
+			onSexchange(e){
+				this.userInfo.sex=e.detail.value;
+			},
+			onUnloadImageSuccess(file, res) {
+				this.userInfo.headImage = res.data.originUrl;
+				this.userInfo.headImageThumb = res.data.thumbUrl;
+			},
+			onSubmit(){
+				this.$http({
+					url: "/user/update",
+					method: "PUT",
+					data: this.userInfo
+				}).then(()=>{
+					this.$store.commit("setUserInfo",this.userInfo);
+					uni.showToast({
+						title:"修改成功",
+						icon: 'none'
+					});
+				})	
+			}
+		},
+		onLoad() {
+			// 深拷贝一份数据
+			let mine = this.$store.state.userStore.userInfo;
+			this.userInfo = JSON.parse(JSON.stringify(mine));
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.mine-edit {
+		padding: 20rpx;
+
+		.head-image {
+			width: 200rpx;
+			height: 200rpx;
+		}
+	}
+</style>

im-uniapp/pages/mine/mine-password.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="page mine-password">
+		<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="100%" >
+			<uni-forms-item label="原密码:" name="oldPassword">
+				<uni-easyinput type="password" v-model="formData.oldPassword" />
+			</uni-forms-item>
+			<uni-forms-item label="新密码:" name="newPassword">
+				<uni-easyinput type="password" v-model="formData.newPassword" />
+			</uni-forms-item>
+			<uni-forms-item label="确认密码:" name="confirmPassword">
+				<uni-easyinput type="password" v-model="formData.confirmPassword" />
+			</uni-forms-item>
+			<button type="primary" @click="onSubmit()">提交</button>
+		</uni-forms>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				formData: {
+					oldPassword: "",
+					newPassword: "",
+					confirmPassword: ""
+				},
+				rules: {
+					oldPassword: {
+						rules: [{
+							required: true,
+							errorMessage: '请输入原密码',
+						}]
+					},
+					newPassword: {
+						rules: [{
+							required: true,
+							errorMessage: '请输入新密码',
+						}, {
+							validateFunction: function(rule, value, data, callback) {
+								console.log(data)
+								if (data.confirmPassword != data.newPassword) {
+									callback("两次输入的密码不一致");
+								}
+								if (data.newPassword == data.oldPassword) {
+									callback("新密码不能和原密码一致");
+								}
+								return true;
+							}
+						}]
+					},
+					confirmPassword: {
+						rules: [{
+							required: true,
+							errorMessage: '请输入确认密码',
+						}, {
+							validateFunction: function(rule, value, data, callback) {
+								console.log(data)
+								if (data.confirmPassword != data.newPassword) {
+									callback("两次输入的密码不一致");
+								}
+								
+								return true;
+							}
+						}]
+					}
+
+				}
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log(this.formData)
+				this.$refs.form.validate().then(res => {
+					console.log('表单数据信息：', res);
+					this.$http({
+						url: "/modifyPwd",
+						method: "PUT",
+						data: this.formData
+					}).then((res) => {
+						uni.showToast({
+							title: "修改密码成功",
+							icon: 'none'
+						})
+					})
+				}).catch(err => {
+					console.log('表单错误信息：', err);
+				})
+
+			}
+		},
+		onReady() {
+			// 需要在onReady中设置规则
+			this.$refs.form.setRules(this.rules)
+		}
+
+	}
+</script>
+
+<style scoped lang="scss">
+	.mine-password {
+		padding: 20rpx;
+
+	}
+</style>

im-uniapp/pages/mine/mine.vue

@@ -1,22 +1,132 @@
 <template>
-	<view class="tab-page">
+	<view class="page mine">
-		
+		<view class="content" @click="onModifyInfo()">
+			<view class="avatar">
+				<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image>
+			</view>
+			<view class="info-item">
+				<view class="info-primary">
+					<text class="info-username">
+						{{userInfo.userName}}
+					</text>
+					<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="20"
+						color="darkblue"></uni-icons>
+					<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="20"
+						color="darkred"></uni-icons>
+				</view>
+				<text>
+					昵称 ：{{userInfo.nickName}}
+				</text>
+				<text>
+					签名 ：{{userInfo.signature}}
+				</text>
+			</view>
+			<view class="info-arrow">></view>
+		</view>
+		<view class="line"></view>
+		<view class="btn-group">
+			<button class="btn" type="primary" @click="onModifyPassword()">修改密码</button>
+			<button class="btn" type="warn" @click="onQuit()">退出</button>
+		</view>
 	</view>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {
+			return {}
-				
-			}
 		},
 		methods: {
-			
+			onModifyInfo() {
+				uni.navigateTo({
+					url: "/pages/mine/mine-edit"
+				})
+			},
+			onModifyPassword() {
+				uni.navigateTo({
+					url: "/pages/mine/mine-password"
+				})
+			},
+			onQuit() {
+				uni.showModal({
+					title: '确认退出?',
+					success: (res) => {
+						if (res.confirm) {
+							getApp().quit();
+						}
+					}
+				});
+			}
+		},
+		computed: {
+			userInfo() {
+				return this.$store.state.userStore.userInfo;
+			}
 		}
+
+
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+	.mine {
+		.content {
+			height: 200rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20rpx;
 
-</style>
+			.avatar {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 160rpx;
+				height: 160rpx;
+
+				.head-image {
+					width: 100%;
+					height: 100%;
+					border-radius: 10%;
+				}
+			}
+
+			.info-item {
+				display: flex;
+				align-items: flex-start;
+				flex-direction: column;
+				padding-left: 40rpx;
+				flex: 1;
+
+				.info-primary {
+					display: flex;
+
+					.info-username {
+						font-size: 40rpx;
+						font-weight: 600;
+					}
+				}
+			}
+
+			.info-arrow {
+				width: 50rpx;
+				font-size: 30rpx;
+				font-weight: 600;
+			}
+		}
+
+		.line {
+			margin: 20rpx;
+			border-bottom: 1px solid #aaaaaa;
+		}
+
+		.btn-group {
+			margin: 100rpx;
+
+			.btn {
+				margin-top: 20rpx;
+			}
+
+		}
+	}
+</style>