1

pages/chat/index.scss

@@ -0,0 +1,179 @@
+@import "./makedown.scss";
+
+.c-container {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	padding-bottom: var(--area-bottom);
+
+	.t-navbar__content {
+		backdrop-filter: blur(18px);
+	}
+}
+
+.silder {
+	overflow: auto;
+	flex: 1;
+	padding: 30rpx 0;
+	box-sizing: border-box;
+
+	.chat-item {
+		padding: 10rpx 30rpx;
+
+		&+.chat-item {
+			margin-top: 30rpx;
+		}
+
+		.lawyer-info {
+			margin-bottom: 20rpx;
+			font-size: 0.75rem;
+
+			image {
+				width: 50rpx;
+				height: 50rpx;
+				border-radius: 50%;
+				margin-right: 10rpx;
+				display: block;
+			}
+		}
+
+		.chat-image {
+			width: 250rpx;
+			height: 250rpx;
+			border-radius: 20rpx;
+		}
+
+		.chat-message {
+			max-width: calc(100% - 100rpx);
+			min-height: 60rpx;
+			width: fit-content;
+			padding: 20rpx;
+			border-radius: 10rpx;
+			font-size: 0.9rem;
+			overflow: hidden;
+
+			.loading {
+				height: 40rpx;
+				width: 40rpx;
+				border-radius: 50%;
+				box-shadow: inset 0 0 0 var(--td-brand-color);
+				animation: load 2s linear infinite alternate;
+			}
+
+			.stop-tip {
+				margin-top: 20rpx;
+				font-size: 0.64rem;
+				color: var(--text-3);
+			}
+
+			.m-footer {
+				margin-top: 10rpx;
+
+				.tip {
+					@extend .stop-tip;
+					margin-top: 0;
+					opacity: 0.1;
+				}
+
+				.sound-icon {
+					color: var(--text-2);
+					font-size: 1rem;
+				}
+			}
+		}
+
+		.quick-warpper {
+			font-size: 0.75rem;
+			gap: 30rpx;
+			margin-top: 20rpx;
+			display: flex;
+			flex-wrap: wrap;
+
+			.quick-item {
+				background-color: white;
+				padding: 10rpx 20rpx;
+				border-radius: 50rpx;
+				border: 1px solid #dfdddd;
+
+				&.color {
+					color: white;
+					border-color: transparent;
+					;
+				}
+			}
+		}
+	}
+
+	.ai-msg {
+		.chat-message {
+			background-color: white;
+			border-radius: 20rpx 30rpx 30rpx 10rpx;
+			box-shadow: 0 0 15rpx #e2e2e2;
+		}
+
+	}
+
+	.user-msg {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+
+		.chat-message {
+			background-color: var(--td-brand-color);
+			color: white;
+			border-radius: 30rpx 30rpx 0 30rpx;
+		}
+	}
+}
+
+.bottom-position {
+	margin: 0 30rpx;
+	position: relative;
+
+	//输入框
+	.input-warpper {
+		box-shadow: 0 0 15rpx #e2e2e2;
+		padding: 20rpx 30rpx;
+		background-color: white;
+		border-radius: 50rpx;
+
+		input {
+			flex: 1;
+		}
+
+
+		.push-btn {
+			border-radius: 50%;
+			width: 65rpx;
+			height: 65rpx;
+			color: var(--text-3);
+			transition: opacity 0.3s;
+
+			&.active-push {
+				background-color: var(--td-brand-color);
+				color: white;
+			}
+		}
+
+		.stop-btn {
+			font-size: 65rpx;
+			color: var(--td-brand-color);
+		}
+	}
+}
+
+//占位
+.empty {
+	transition: height 0.3s;
+}
+
+//ai响应loading
+@keyframes load {
+	0% {
+		box-shadow: inset -20rpx 40rpx 0 var(--td-brand-color);
+	}
+
+	100% {
+		box-shadow: inset 20rpx -40rpx 0 var(--td-brand-color);
+	}
+}