init project

miniprogram/pages/main/travel/luggage/index.less

@@ -0,0 +1,88 @@
+.luggage {
+
+	.tips {
+		color: #777;
+		margin: .5rem 0;
+		font-size: 12px;
+		text-align: center;
+	}
+
+	.items {
+		gap: 8px;
+		width: calc(100% - 64rpx);
+		margin: 12rpx auto;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+
+		.item {
+			--td-checkbox-vertical-padding: 12rpx 24rpx;
+
+			flex: 1;
+			margin: 0;
+			border: 3rpx solid #CCC;
+			position: relative;
+			overflow: hidden;
+			box-sizing: border-box;
+			word-break: break-all;
+			border-radius: 12rpx;
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&.active {
+				border-color: var(--td-brand-color, #0052d9);
+
+				&::after {
+					content: "";
+					top: 0;
+					left: 0;
+					width: 0;
+					height: 0;
+					display: block;
+					position: absolute;
+					border-width: 24px 24px 24px 0;
+					border-style: solid;
+					border-color: var(--td-brand-color);
+					border-bottom-color: transparent;
+					border-right-color: transparent;
+				}
+			}
+
+			.icon {
+				top: 1px;
+				left: 1px;
+				color: var(--td-bg-color-container, #fff);
+				z-index: 1;
+				position: absolute;
+				font-size: 12px;
+			}
+
+			.checkbox {
+				height: calc(100% - 24rpx);
+			}
+		}
+	}
+}
+
+.add-container {
+	left: 0;
+	right: 0;
+	color: #333;
+	bottom: 0;
+	display: flex;
+	padding: 20rpx;
+	position: fixed;
+	border-top: 1px solid rgba(0, 0, 0, .1);
+	background: rgba(240, 240, 240, .8);
+	box-sizing: border-box;
+	align-items: center;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	backdrop-filter: blur(10px);
+
+	.input {
+		--td-input-vertical-padding: 8rpx;
+		margin-right: .5rem;
+		border-radius: 5px;
+	}
+}