|
|
@@ -1553,39 +1553,89 @@ p.help-block li {
|
|
|
/* 服务介绍区域整体样式 */
|
|
|
.features {
|
|
|
background-color: #f9f9f9;
|
|
|
+ padding-top: 80px;
|
|
|
+ padding-bottom: 80px;
|
|
|
}
|
|
|
|
|
|
/* 服务介绍头部样式 */
|
|
|
+.section-header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 4rem;
|
|
|
+}
|
|
|
.section-header p {
|
|
|
max-width: 32rem;
|
|
|
margin: 0 auto;
|
|
|
+ font-size: 1.1rem;
|
|
|
}
|
|
|
|
|
|
/* 服务项目列表样式 */
|
|
|
.service-description {
|
|
|
- /* 可以根据需要调整间距和字体样式 */
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item {
|
|
|
+ position: relative;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 30px;
|
|
|
+ width: calc(25% - 20px);
|
|
|
+ margin-bottom: 40px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.service-item::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ opacity: 0.15;
|
|
|
+ border-radius: 16px;
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
|
|
|
.service-item h4 {
|
|
|
+ margin-top: 0;
|
|
|
+ font-size: 1.5rem;
|
|
|
color: #343a40;
|
|
|
}
|
|
|
|
|
|
.service-item p {
|
|
|
+ font-size: 1rem;
|
|
|
+ margin-bottom: 0;
|
|
|
color: #6c757d;
|
|
|
}
|
|
|
|
|
|
-/* 背景图片容器样式 */
|
|
|
-.service-img {
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- border-radius: 10px; /* 添加圆角使图片更加友好 */
|
|
|
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影增强立体感 */
|
|
|
+.service-item .service-info {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-/* 按钮样式 */
|
|
|
+/* 链接样式 */
|
|
|
+.service-item a {
|
|
|
+ color: #007bff;
|
|
|
+ transition: color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.service-item a:hover {
|
|
|
+ color: #0056b3;
|
|
|
+}
|
|
|
+
|
|
|
+/* 深入了解按钮样式 */
|
|
|
.btn-primary {
|
|
|
background-color: #007bff;
|
|
|
border-color: #007bff;
|
|
|
+ font-weight: 600;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
@@ -1593,41 +1643,16 @@ p.help-block li {
|
|
|
background-color: #0056b3;
|
|
|
border-color: #0056b3;
|
|
|
}
|
|
|
-/* 添加服务项的现代化边框样式 */
|
|
|
-.service-item {
|
|
|
- background-color: white; /* 或者其他背景色，以确保边框清晰可见 */
|
|
|
- border: 1px solid #dee2e6; /* 初始边框颜色，Bootstrap默认的浅灰色 */
|
|
|
- border-radius: 8px; /* 圆角大小，可根据设计需求调整 */
|
|
|
- padding: 20px; /* 内边距，让内容与边框有适当距离 */
|
|
|
- transition: box-shadow 0.3s ease, border-color 0.3s ease; /* 平滑过渡效果 */
|
|
|
-}
|
|
|
-
|
|
|
-/* 鼠标悬停时改变边框颜色，增强交互反馈 */
|
|
|
-.service-item:hover {
|
|
|
- border-color: #007bff; /* 或选择与网站主题相匹配的颜色 */
|
|
|
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
|
|
|
-}
|
|
|
-/* 为服务项添加Flex布局 */
|
|
|
-.service-item {
|
|
|
- flex-wrap: wrap; /* 允许内容换行 */
|
|
|
-}
|
|
|
|
|
|
-/* 图片容器，控制图片大小和位置 */
|
|
|
-.service-image-container {
|
|
|
- width: 30%; /* 图片占30%宽度 */
|
|
|
- margin-right: 20px; /* 图片与文字间的间隔，可调整 */
|
|
|
-}
|
|
|
-
|
|
|
-.service-image-container img {
|
|
|
- max-width: 100%; /* 图片最大宽度为其容器宽度，即30% */
|
|
|
- max-height: 200px; /* 设置图片最大高度，根据需要调整 */
|
|
|
- height: auto; /* 保持图片原始宽高比 */
|
|
|
- object-fit: cover; /* 保持图片比例的同时填充容器，可能会裁剪 */
|
|
|
- border-radius: 8px; /* 可选，为图片添加圆角 */
|
|
|
+/* 适应不同屏幕的调整 */
|
|
|
+@media (max-width: 991.98px) {
|
|
|
+ .service-item {
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/* 文字信息容器 */
|
|
|
-.service-info {
|
|
|
- width: calc(70% - 20px); /* 文字占70%，减去右边距以对齐底部 */
|
|
|
- flex-grow: 1; /* 如果需要，允许此部分扩展以填充剩余空间 */
|
|
|
-}
|
|
|
+@media (max-width: 575.98px) {
|
|
|
+ .service-item {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
