sms

frontend/src/pages/Home.css

@@ -0,0 +1,78 @@
+.tech-card {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid #303030 !important;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  box-shadow: none !important; /* 强制移除默认阴影 */
+  overflow: hidden; /* 确保子元素不会溢出产生黑边 */
+  outline: none;
+}
+
+.tech-card:hover {
+  border-color: #00b96b !important;
+  box-shadow: 0 0 20px rgba(0, 185, 107, 0.4) !important; /* 增强悬停发光 */
+  transform: translateY(-5px);
+}
+
+.tech-card .ant-card-body {
+  border-top: none !important;
+  box-shadow: none !important;
+}
+
+.tech-card-title {
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.tech-price {
+  color: #00b96b;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.product-scroll-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding: 30px 20px; /* 增加左右内边距，为悬停缩放和投影留出空间 */
+  margin: 0 -20px; /* 使用负外边距抵消内边距，使滚动条能延伸到版心边缘 */
+  width: calc(100% + 40px);
+}
+
+/* 自定义滚动条 */
+.product-scroll-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.product-scroll-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+  margin: 0 20px; /* 让滚动条轨道在版心内显示 */
+}
+
+.product-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 185, 107, 0.2);
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.product-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 185, 107, 0.5);
+}
+
+/* 布局对齐 */
+.product-scroll-container .ant-row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start; 
+}
+
+.product-scroll-container .ant-col {
+  flex: 0 0 320px;
+  padding: 0 12px;
+}