前端首页修改

.idea/inspectionProfiles/Project_Default.xml

@@ -4,11 +4,12 @@
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="4">
+          <list size="5">
             <item index="0" class="java.lang.String" itemvalue=".IsActive}}aria-selected" />
             <item index="1" class="java.lang.String" itemvalue="{{if" />
             <item index="2" class="java.lang.String" itemvalue="{{else}}aria-selected" />
             <item index="3" class="java.lang.String" itemvalue="{{end}}" />
+            <item index="4" class="java.lang.String" itemvalue="v-for" />
           </list>
         </value>
       </option>

static/css/style.css

@@ -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%;
+  }
+}

views/index.html

@@ -128,10 +128,10 @@ banner
                         <div class="col-lg-12">
                             <div class="service-description">
                                 {{range .Serves}}
-                                <div class="service-item mb-4 d-flex">
-                                    <div class="service-image-container">
-                                        <img src="{{.Url}}" alt="{{.Title}} 图例" class="img-fluid">
-                                    </div>
+                                <div class="service-item mb-4 d-flex" style="background-image: url('{{.Url}}')">
+<!--                                    <div class="service-image-container">-->
+<!--                                        <img src="{{.Url}}" alt="{{.Title}} 图例" class="img-fluid">-->
+<!--                                    </div>-->
                                     <div class="service-info">
                                         <h4><a class="text-decoration-none" href="services/{{.ID}}">{{.Title}}</a></h4>
                                         <p class="text-muted">{{.Synopsis}}</p>