修改样式

src/components/News.vue

 <template>
-    <div class="center-width">
-        <div class="left-title">
-            <div class="serve-title">
-                <div class="index">03</div>
-                <div class="name">新闻资讯</div>
-                <div class="english">NEWS INFORMMATION</div>
+    <div class="container">
+        <div class="center-width">
+            <div class="left-title">
+                <div class="serve-title">
+                    <div class="index">03</div>
+                    <div class="name">新闻资讯</div>
+                    <div class="english">NEWS INFORMMATION</div>
+                </div>
             </div>
-        </div>
-        <div class="new-index" ref="scrollRef" @mouseenter="stopScroll" @mouseleave="startScroll">
-            <div v-for="item in data" :key="item.comm_msg_info.id" class="news-item">
-                <div class="news-content">
-                    <h3 class="news-title">{{ item.app_msg_ext_info.title }}</h3>
-                    <p class="news-digest" v-if="item.app_msg_ext_info.digest">{{ item.app_msg_ext_info.digest }}</p>
-                    <div class="news-meta">
-                        <span class="news-author" v-if="item.app_msg_ext_info.author">{{ item.app_msg_ext_info.author
-                        }}</span>
-                        <span class="news-date">{{ formatDate(item.comm_msg_info.datetime) }}</span>
-                    </div>
+            <div class="content product">
+                <div class="left ">
+                    记录创新足迹，传递科技温度。
+                    从重大突破到温暖日常，
+                    从行业前沿到团队风采，
+                    与您共见成长，共赴未来。
                 </div>
-                <div class="news-cover" v-if="item.app_msg_ext_info.cover">
-                    <img :src="getLocalCover(item)" :alt="item.app_msg_ext_info.title"
-                        @error="e => { const target = e.target as HTMLImageElement; if (target) target.src = item.app_msg_ext_info.cover }">
+                <div class="new-index" ref="scrollRef" @mouseenter="stopScroll" @mouseleave="startScroll">
+                    <div v-for="item in data" :key="item.comm_msg_info.id" class="news-item">
+                        <div class="news-content">
+                            <h3 class="news-title">{{ item.app_msg_ext_info.title }}</h3>
+                            <p class="news-digest" v-if="item.app_msg_ext_info.digest">{{ item.app_msg_ext_info.digest
+                            }}
+                            </p>
+                            <div class="news-meta">
+                                <span class="news-author" v-if="item.app_msg_ext_info.author">{{
+                                    item.app_msg_ext_info.author
+                                }}</span>
+                                <span class="news-date">{{ formatDate(item.comm_msg_info.datetime) }}</span>
+                            </div>
+                        </div>
+                        <div class="news-cover" v-if="item.app_msg_ext_info.cover">
+                            <img :src="getLocalCover(item)" :alt="item.app_msg_ext_info.title"
+                                @error="e => { const target = e.target as HTMLImageElement; if (target) target.src = item.app_msg_ext_info.cover }">
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -416,11 +429,10 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.center-width {
-    display: flex;
-    height: 320px !important;
-}
 
+.container{
+    padding-top: 60px;
+}
 .left-title {
     min-width: 263px;
     max-width: 263px;
@@ -433,7 +445,7 @@ onBeforeUnmount(() => {
     overflow-x: auto;
     width: 100%;
     gap: 32px;
-    padding: 20px 0 30px 0;
+    padding: 0px 0 30px 0;
     scrollbar-width: none;
     /* Firefox */
 }
@@ -443,6 +455,16 @@ onBeforeUnmount(() => {
     /* Chrome/Safari/Edge */
 }
 
+.content {
+    width: 100%;
+    display: flex;
+}
+
+.content>.left {
+    margin-right: 30px;
+    width: 263px;
+}
+
 .news-item {
     flex: 0 0 200px;
     min-width: 300px;
@@ -452,15 +474,15 @@ onBeforeUnmount(() => {
     background: #fff;
     border-radius: 16px;
     box-shadow: inset 0 4px 24px 0 rgba(0, 0, 0, 0.1);
-    padding: 28px 28px 18px 28px;
+    padding: 0px 18px 10px 18px;
     transition: box-shadow 0.2s, transform 0.2s;
     margin-bottom: 0;
     position: relative;
 }
 
 .news-item:hover {
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16);
-    transform: translateY(-4px) scale(1.02);
+    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16); */
+    /* transform: translateY(-4px) scale(1.02); */
 }
 
 .news-content {
@@ -498,7 +520,7 @@ onBeforeUnmount(() => {
 
 .news-cover {
     width: 100%;
-    height: 100px;
+    height: 200px;
     overflow: hidden;
     border-radius: 8px;
     background: #f6f6f6;

src/components/Service.vue

@@ -40,5 +40,4 @@ const services = [
   width: 100%;
 }
 
-
 </style>
\ No newline at end of file

src/components/Solution.vue

@@ -55,5 +55,17 @@ const products = [
 <style scoped>
 .blue-print {
   width: 100%;
+  background: linear-gradient(135deg, #d4e0f0 0%, #f0f5fa 100%);
+  padding: 60px 0;
+  position: relative;
+  overflow: hidden;
 }
+
+.product>.right {
+  border-radius: 10px;
+}
+/* .product>.right:hover{
+  margin-top: -10px;
+  transition: 0.5s;
+} */
 </style>
\ No newline at end of file