You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.2 KiB
114 lines
3.2 KiB
2 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<link rel="icon" href="./src/assets/duck.png">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link href="https://www.aspark.cc/live2d/css/pio.css" rel="stylesheet" type="text/css" />
|
||
|
|
<title>YaYa点名</title>
|
||
|
|
<style>
|
||
|
|
#pio-container {
|
||
|
|
position: fixed !important;
|
||
|
|
left: 0 !important;
|
||
|
|
bottom: 0 !important;
|
||
|
|
z-index: 1000;
|
||
|
|
display: flex !important;
|
||
|
|
align-items: flex-end !important;
|
||
|
|
pointer-events: auto;
|
||
|
|
cursor: grab !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pio-container:active {
|
||
|
|
cursor: grabbing !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pio {
|
||
|
|
width: 20vw !important;
|
||
|
|
height: 20vw !important;
|
||
|
|
min-width: 120px !important;
|
||
|
|
min-height: 120px !important;
|
||
|
|
max-width: 200px !important;
|
||
|
|
max-height: 200px !important;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pio-action {
|
||
|
|
width: auto !important;
|
||
|
|
height: auto !important;
|
||
|
|
bottom: 75% !important;
|
||
|
|
/* 垂直居中 */
|
||
|
|
left: 100% !important;
|
||
|
|
/* 向右侧偏移 */
|
||
|
|
transform: translateY(50%) scale(0.75);
|
||
|
|
/* 垂直居中，缩放 */
|
||
|
|
transform-origin: left center;
|
||
|
|
/* 缩放的基点设置为左侧中心 */
|
||
|
|
display: flex !important;
|
||
|
|
flex-direction: column !important;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pio-action .pio-home {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pio-action .pio-close {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pio-action .pio-skin {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pio-action .pio-info {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.pio-action span {
|
||
|
|
margin: 2px 0 !important;
|
||
|
|
width: 30px !important;
|
||
|
|
height: 30px !important;
|
||
|
|
min-width: 20px !important;
|
||
|
|
min-height: 20px !important;
|
||
|
|
background-size: contain !important;
|
||
|
|
background-repeat: no-repeat !important;
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.pio-action span {
|
||
|
|
width: 25px !important;
|
||
|
|
height: 25px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.pio-action span {
|
||
|
|
width: 20px !important;
|
||
|
|
height: 20px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app"></div>
|
||
|
|
<script type="module" src="/src/main.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/TweenLite.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/live2dcubismcore.min.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/pixi.min.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/cubism4.min.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/pio.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/pio_sdk4.js"></script>
|
||
|
|
<script src="https://www.aspark.cc/live2d/js/load.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|