Shikong/WeChatMsg
1
0
Fork 0
mirror of https://github.com/LC044/WeChatMsg synced 2025-02-23 03:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

html适配移动端

Browse Source
This commit is contained in:
shuaikangzhou 2023-12-29 22:41:49 +08:00
parent ad0e53a62e
commit 9f16574612
1 changed files with 88 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/resources/data/template.html
View File

@ -10,13 +10,13 @@
margin: 0;
}
body{
height: 100vh;
width: 100%;
display: flex;
flex-direction: row;
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
}
.modal {
display: none;
position: fixed;
@ -38,14 +38,16 @@ body{
transform: translate(-50%, -50%);
}
.container{
height: 99%;
width: 900px;
height: 80vh;
width: 100%;
max-width: 900px;
border-radius: 4px;
border: 0.5px solid #e0e0e0;
background-color: #f5f5f5;
display: flex;
flex-flow: column;
/* flex-flow: column; */
overflow: hidden;
justify-content: center; /* 在主轴上居中 */
}
.content{
width: calc(100% - 40px);
@ -262,8 +264,9 @@ textarea{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
margin-top: 0px;
margin-left: 20px; /* 新增的左边距 */
justify-content: center; /* 在主轴上居中 */
}
.button-row,
@ -307,18 +310,75 @@ input {
color: #555;
font-size: 14px;
}
@media screen and (max-width: 768px) {
body{
display: flex; /* 使用 Flex 布局 */
flex-direction: column; /* 设置主轴方向为垂直方向 */
align-items: center; /* 在交叉轴上居中 */
}
/* 在屏幕宽度小于等于 768px 时应用的样式 */
.pagination-container {
display: flex; /* 使用 Flex 布局 */
justify-content: center; /* 在主轴上居中 */
flex-direction: row;
}
.button-row,
.jump-row,
#paginationInfo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0px;
}
button {
padding: 5px 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
input {
padding: 8px;
width: 120px;
box-sizing: border-box;
margin-right: 0px;
margin-left: 5px;
}
}
.emoji_img {
width: 22px;
height: 22px;
vertical-align: middle;
margin-top: -4.4px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="pagination-container">
<div class="button-row">
<button onclick="prevPage()">上一页</button>
<button onclick="nextPage()">下一页</button>
</div>
<div class="jump-row">
<input type="number" id="gotoPageInput" onkeydown="checkEnter(event)" placeholder="跳转到第几页">
<button onclick="gotoPage()">跳转</button>
</div>
</div>
<div id="paginationInfo"></div>
</div>
<div class="container">
<div class="content" id="chat-container" onscroll="checkScroll()">
<div class="item item-center"><span>昨天 12:35</span></div>
<div class="item item-center"><span>你已添加了凡繁烦，现在可以开始聊天了。</span></div>
@ -340,22 +400,12 @@ input {
<span>昨天 13:15</span>
</div>
</div>
</div>
<div></div>
<div id="modal" class="modal" onclick="hideModal()">
</div>
<div></div>
<div id="modal" class="modal" onclick="hideModal()">
<img id="modal-image" class="modal-image">
</div>
<div class="pagination-container">
<div class="button-row">
<button onclick="prevPage()">上一页</button>
<button onclick="nextPage()">下一页</button>
</div>
<div class="jump-row">
<input type="number" id="gotoPageInput" onkeydown="checkEnter(event)" placeholder="跳转到第几页">
<button onclick="gotoPage()">跳转</button>
</div>
<div id="paginationInfo"></div>
</div>
<script>
const chatContainer = document.getElementById('chat-container');
// Sample chat messages (replace this with your actual data)