🎨
This commit is contained in:
		
							parent
							
								
									29e9801d5c
								
							
						
					
					
						commit
						39575b4696
					
				
					 3 changed files with 32 additions and 16 deletions
				
			
		| 
						 | 
					@ -1,5 +1,5 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<XWindow ref="window" :initial-width="400" :initial-height="450" :can-resize="true" @closed="$emit('closed')">
 | 
					<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
 | 
				
			||||||
	<template #header>
 | 
						<template #header>
 | 
				
			||||||
		<XHeader :info="pageInfo" :with-back="false"/>
 | 
							<XHeader :info="pageInfo" :with-back="false"/>
 | 
				
			||||||
	</template>
 | 
						</template>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,5 @@
 | 
				
			||||||
<template>
 | 
					<template>
 | 
				
			||||||
<div class="thvuemwp" :class="{ isMe }">
 | 
					<div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
 | 
				
			||||||
	<MkAvatar class="avatar" :user="message.user"/>
 | 
						<MkAvatar class="avatar" :user="message.user"/>
 | 
				
			||||||
	<div class="content">
 | 
						<div class="content">
 | 
				
			||||||
		<div class="balloon" :class="{ noText: message.text == null }" >
 | 
							<div class="balloon" :class="{ noText: message.text == null }" >
 | 
				
			||||||
| 
						 | 
					@ -92,11 +92,6 @@ export default defineComponent({
 | 
				
			||||||
		width: 54px;
 | 
							width: 54px;
 | 
				
			||||||
		height: 54px;
 | 
							height: 54px;
 | 
				
			||||||
		transition: all 0.1s ease;
 | 
							transition: all 0.1s ease;
 | 
				
			||||||
 | 
					 | 
				
			||||||
		@media (max-width: 400px) {
 | 
					 | 
				
			||||||
			width: 48px;
 | 
					 | 
				
			||||||
			height: 48px;
 | 
					 | 
				
			||||||
		}
 | 
					 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	> .content {
 | 
						> .content {
 | 
				
			||||||
| 
						 | 
					@ -175,14 +170,6 @@ export default defineComponent({
 | 
				
			||||||
					font-size: 1em;
 | 
										font-size: 1em;
 | 
				
			||||||
					color: rgba(#000, 0.8);
 | 
										color: rgba(#000, 0.8);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
					@media (max-width: 500px) {
 | 
					 | 
				
			||||||
						padding: 8px 16px;
 | 
					 | 
				
			||||||
					}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
					@media (max-width: 400px) {
 | 
					 | 
				
			||||||
						font-size: 0.9em;
 | 
					 | 
				
			||||||
					}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
					& + .file {
 | 
										& + .file {
 | 
				
			||||||
						> a {
 | 
											> a {
 | 
				
			||||||
							border-radius: 0 0 16px 16px;
 | 
												border-radius: 0 0 16px 16px;
 | 
				
			||||||
| 
						 | 
					@ -326,5 +313,34 @@ export default defineComponent({
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						&.max-width_400px {
 | 
				
			||||||
 | 
							> .avatar {
 | 
				
			||||||
 | 
								width: 48px;
 | 
				
			||||||
 | 
								height: 48px;
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							> .content {
 | 
				
			||||||
 | 
								> .balloon {
 | 
				
			||||||
 | 
									> .content {
 | 
				
			||||||
 | 
										> .text {
 | 
				
			||||||
 | 
											font-size: 0.9em;
 | 
				
			||||||
 | 
										}
 | 
				
			||||||
 | 
									}
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						&.max-width_500px {
 | 
				
			||||||
 | 
							> .content {
 | 
				
			||||||
 | 
								> .balloon {
 | 
				
			||||||
 | 
									> .content {
 | 
				
			||||||
 | 
										> .text {
 | 
				
			||||||
 | 
											padding: 8px 16px;
 | 
				
			||||||
 | 
										}
 | 
				
			||||||
 | 
									}
 | 
				
			||||||
 | 
								}
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -13,7 +13,7 @@ export function popout(path: string, w?: HTMLElement) {
 | 
				
			||||||
			`width=${width}, height=${height}, top=${y}, left=${x}`);
 | 
								`width=${width}, height=${height}, top=${y}, left=${x}`);
 | 
				
			||||||
	} else {
 | 
						} else {
 | 
				
			||||||
		const width = 400;
 | 
							const width = 400;
 | 
				
			||||||
		const height = 450;
 | 
							const height = 500;
 | 
				
			||||||
		const x = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
 | 
							const x = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
 | 
				
			||||||
		const y = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
 | 
							const y = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
 | 
				
			||||||
		window.open(url, url,
 | 
							window.open(url, url,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue