@tongziyang/uni-calendar-plugin
Version:
A comprehensive calendar plugin for uniapp with support for Gregorian and Lunar calendars, date selection, hotel booking, check-in functionality, and more.
73 lines (67 loc) • 1.89 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<title>日历插件示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
touch-action: manipulation;
overscroll-behavior: none;
position: fixed;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#app {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #f5f7fa;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* 增强滑动体验 */
.uni-calendar {
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
/* 移动端优化 */
@media (max-width: 768px) {
.app {
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.content {
width: 100% ;
padding: 10px ;
}
.sidebar {
width: 100% ;
max-height: 40vh;
overflow-y: auto;
}
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>