-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
134 lines (117 loc) · 3.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div style="display: flex;">
<div id="amap" style="width: 50%;"></div>
<div id="gmap" style="width: 50%;"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
<style>
.mapContainer {
position: relative;
}
/* 创建一个可以横向滚动的容器 */
.scroll-container {
position: absolute;
top: 10px; /* 距离地图顶部的距离 */
left: 10px; /* 距离地图左边的距离 */
right: 10px; /* 距离地图右边的距离 */
z-index: 1000; /* 确保它在地图上方 */
background-color: rgba(255, 255, 255, 0.8); /* 使背景半透明 */
border-radius: 8px;
padding: 10px;
max-height: 260px; /* 限制容器高度 */
overflow-y: auto; /* 启用滚动 */
}
/* 使用伪元素自定义滚动条样式(Webkit 浏览器)*/
.scroll-container::-webkit-scrollbar {
height: 12px; /* 横向滚动条的高度 */
}
.scroll-container::-webkit-scrollbar-thumb {
background: #888; /* 滚动条的颜色 */
border-radius: 6px; /* 滚动条的圆角 */
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #555; /* 滚动条悬停时的颜色 */
}
/* 卡片容器,设置为水平排列 */
.card-container {
display: flex;
flex-direction: row;
gap: 10px; /* 卡片之间的间隔 */
width: 100%; /* 设置为屏幕宽度的 100% */
box-sizing: border-box; /* 包括内边距和边框在内 */
}
/* 卡片样式 */
.card {
background: #fff; /* 卡片背景色 */
border: 1px solid #ddd; /* 边框颜色 */
border-radius: 8px; /* 圆角 */
padding: 15px; /* 内边距 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
flex-shrink: 0; /* 防止卡片被压缩 */
}
/* 卡片标题 */
.card-header {
font-weight: bold;
margin-bottom: 10px; /* 标题和内容之间的间距 */
font-size: 16px; /* 标题字体大小 */
}
/* 卡片内容 */
.card-body p {
margin: 5px 0; /* 内容段落的间距 */
font-size: 14px; /* 内容字体大小 */
}
/* 悬浮按钮的基础样式 */
.floating-button {
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background-color: #fff;
border: none;
border-radius: 32px;
padding: 15px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: width 0.3s ease, border-radius 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* 按钮图标的样式 */
.floating-button img {
width: 32px;
height: 32px;
}
/* 当按钮处于播放状态时,变宽显示速度值 */
.floating-button.playing {
width: 120px; /* 根据需求调整宽度 */
border-radius: 25px; /* 使按钮两端变得圆滑 */
}
/* 速度值文本的样式 */
.speed-text {
font-size: 14px;
color: #333;
margin-left: 10px;
opacity: 0.3;
transition: opacity 0.3s ease;
width: 50px;
}
.progress{
position: absolute;
bottom: 15px;
width: 100%;
display: flex;
justify-content: center;
align-items: center; /* 可选,用于垂直居中 */
}
</style>
</html>