setup

2023-11-09 15:34:52 +08:00
parent b0431e4a33
commit b4eb30d76f
146 changed files with 2988 additions and 1328 deletions
--- a/src/components/Common/GraphBase/index.module.css
+++ b/src/components/Common/GraphBase/index.module.css
@@ -0,0 +1,153 @@
+/* .long-long {
+    background: url('../../../../assets/long-long.png') no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+} */
+
+.long-middle {
+	background: url('../../../assets/long-middle.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.long-short {
+	background: url('../../../assets/long-short.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-long {
+	background: url('../../../assets/middle-middle.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-full {
+	background: url('../../../assets/middle-long.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-middle {
+	background: url('../../../assets/middle-middle-2.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-short {
+	/* background: url('../../../assets/middle-short.png') no-repeat; */
+	/* background: url('../../../assets/energy.png') no-repeat; */
+	background: url('../../../assets/bg-bottom-item.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+/*
+ * more...
+ */
+
+.graphBase {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	/* justify-content: flex-end;
+    align-items: center; */
+	position: relative;
+	padding: 24px;
+}
+
+.graphBaseTitle {
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseTitle > img {
+	width: 20px;
+}
+
+.graphBaseTitle > h2 {
+	font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
+		BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
+		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+	margin: 0;
+	margin-left: 6px;
+	font-size: 20px;
+	color: #fff;
+	letter-spacing: 2px;
+	font-weight: 500;
+}
+
+.graphBaseContent {
+	height: 1px;
+	flex: 1;
+	/* background: #fff3; */
+}
+
+.graphBaseDesc {
+	position: absolute;
+	top: 25px;
+	left: 150px;
+	font-size: 19px;
+	color: #76fff9;
+}
+
+.graphBaseSwitch {
+	position: absolute;
+	top: 30px;
+	left: 258px;
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseDate {
+	position: absolute;
+	right: 0;
+	top: 24px;
+	color: #fff;
+	margin-right: 24px;
+}
+
+.radioGroup {
+	user-select: none;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}
+
+.legend {
+	position: absolute;
+	top: 30px;
+	left: 360px;
+	color: #fff;
+	display: flex;
+	align-items: center;
+}
+
+.legendItem {
+	display: flex;
+	align-items: center;
+	margin-left: 8px;
+}
+
+.lengedItemPrefix {
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+    margin-right: 4px;
+}