大图展示优化

im-ui/src/components/common/FullImage.vue

@@ -1,10 +1,11 @@
 <template>
-	<el-dialog width="75%" top="30px" :visible.sync="visible" :before-close="handleClose" :modal="true">
+	<div class="full-image" v-show="visible" :before-close="handleClose" :modal="true">
+		<div class="mask"></div>
 		<div class="image-box">
-			<el-image :src="url" :fit="fit"></el-image>
+			<img  :src="url"/>
 		</div>
-
+		<div class="close" @click="handleClose">x</div>
-	</el-dialog>
+	</div>
 </template>
 
 <script>
@@ -12,7 +13,7 @@
 		name: "fullImage",
 		data() {
 			return {
-				fit: 'cover'
+				fit: 'contain'
 			}
 		},
 		methods: {
@@ -31,12 +32,47 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
-	.image-box {
+	.full-image{
-		display: flex;
+		position: fixed;
-		align-items: center;
+		width: 100%;
-		justify-content: center;
+		height: 100%;
-
+	
-
+		
+		.mask{
+			position: fixed;
+			width: 100%;
+			height: 100%;
+			background: black;
+			opacity: 0.9;
+		}
+		
+		.image-box {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			
+			img{
+				position: absolute;
+				    left: 50%;
+				    top: 50%;
+				    transform: translate(-50%, -50%);
+				    max-height: 100%;
+				    max-width: 100%;
+			}
+		}
+		
+		.close{
+			position: fixed;
+			top: 10px;
+			right: 10px;
+			color: white;
+			font-size: 25px;
+			cursor: pointer;
+			
+		
+		}
 	}
+	
+	
 </style>

im-ui/src/view/Login.vue

@@ -8,7 +8,7 @@
 				<ul>
 					<li>发布uniapp移动版本，支持移动端和web端同时在线，多端消息同步</li>
 					<li>目前移动端仅兼容h5和微信小程序，后续会继续兼容更多终端类型</li>
-					<li>页面风格优化：表情包更新、自动生成文字头像等</li>
+					<li>页面风格升级：表情包更新、自动生成文字头像等</li>
 				</ul>
 			</div>
 			<div>