mirror of
https://github.com/LC044/WeChatMsg
synced 2024-11-14 05:21:41 +08:00
169 lines
4.4 KiB
HTML
169 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="aplus-terminal" content="1">
|
|
<meta name="apple-mobile-web-app-title" content="">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
<meta name="format-detection" content="telephone=no, address=no">
|
|
<title>title</title>
|
|
<style type="text/css">
|
|
/*公共样式*/
|
|
body,h1,h2,h3,h4,p,ul,ol,li,form,button,input,textarea,th,td {
|
|
margin:0;
|
|
padding:0
|
|
}
|
|
body,button,input,select,textarea {
|
|
font:12px/1.5 Microsoft YaHei UI Light,tahoma,arial,"\5b8b\4f53";
|
|
*line-height:1.5;
|
|
-ms-overflow-style:scrollbar
|
|
}
|
|
h1,h2,h3,h4{
|
|
font-size:100%
|
|
}
|
|
ul,ol {
|
|
list-style:none
|
|
}
|
|
a {
|
|
text-decoration:none
|
|
}
|
|
a:hover {
|
|
text-decoration:underline
|
|
}
|
|
img {
|
|
border:0
|
|
}
|
|
button,input,select,textarea {
|
|
font-size:100%
|
|
}
|
|
table {
|
|
border-collapse:collapse;
|
|
border-spacing:0
|
|
}
|
|
|
|
/*rem*/
|
|
html {
|
|
font-size:62.5%;
|
|
}
|
|
body {
|
|
font:16px/1.5 "microsoft yahei", 'tahoma';
|
|
}
|
|
body .mobile-page {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/*浮动*/
|
|
.fl{
|
|
float: left;
|
|
}
|
|
.fr{
|
|
float: right;
|
|
}
|
|
.clearfix:after{
|
|
content: '';
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
body{
|
|
background-color: #F5F5F5;
|
|
}
|
|
.mobile-page{
|
|
max-width: 600px;
|
|
}
|
|
.mobile-page .admin-img, .mobile-page .user-img{
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
i.triangle-admin,i.triangle-user{
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
top: 10px;
|
|
display: inline-block;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
}
|
|
.mobile-page i.triangle-admin{
|
|
left: 4px;
|
|
border-right: 12px solid #fff;
|
|
}
|
|
.mobile-page i.triangle-user{
|
|
right: 4px;
|
|
border-left: 12px solid #9EEA6A;
|
|
}
|
|
.mobile-page .admin-group, .mobile-page .user-group{
|
|
padding: 6px;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
}
|
|
.mobile-page .admin-group{
|
|
justify-content: flex-start;
|
|
-webkit-justify-content: flex-start;
|
|
}
|
|
.mobile-page .user-group{
|
|
justify-content: flex-end;
|
|
-webkit-justify-content: flex-end;
|
|
}
|
|
.mobile-page .admin-reply, .mobile-page .user-reply{
|
|
display: inline-block;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
margin:0 15px 12px;
|
|
}
|
|
.mobile-page .admin-reply{
|
|
box-shadow: 0px 0px 2px #ddd;
|
|
}
|
|
.mobile-page .user-reply{
|
|
text-align: left;
|
|
background-color: #9EEA6A;
|
|
box-shadow: 0px 0px 2px #bbb;
|
|
}
|
|
.mobile-page .user-msg, .mobile-page .admin-msg{
|
|
width: 75%;
|
|
position: relative;
|
|
}
|
|
.mobile-page .user-msg{
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="mobile-page">
|
|
<div class="user-group">
|
|
<div class="user-msg">
|
|
<span class="user-reply">我要抢楼</span>
|
|
<i class="triangle-user"></i>
|
|
</div>
|
|
<img class="user-img" src="http://localhost/public/img/cc.jpg"/>
|
|
</div>
|
|
<div class="admin-group">
|
|
<img class="admin-img" src="http://localhost/public/img/aa.jpg"/>
|
|
<div class="admin-msg">
|
|
<i class="triangle-admin"></i>
|
|
<span class="admin-reply">欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！</span>
|
|
</div>
|
|
</div>
|
|
<div class="user-group">
|
|
<div class="user-msg">
|
|
<span class="user-reply">我要抢楼我要抢楼我要抢楼。</span>
|
|
<i class="triangle-user"></i>
|
|
</div>
|
|
<img class="user-img" src="img/cc.jpg"/>
|
|
</div>
|
|
<div class="admin-group">
|
|
<img class="admin-img" src="img/aa.jpg"/>
|
|
<div class="admin-msg">
|
|
<i class="triangle-admin"></i>
|
|
<span class="admin-reply">欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！欢迎来抢楼！</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|