From fe8db66f46bfc862014ca776396e4da8fda59e56 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Tue, 19 May 2026 18:01:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=B3=E4=BA=8E=E6=B5=B7?=
 =?UTF-8?q?=E5=A8=81=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/el/industrySolutionsEl/el1.vue |   2 +-
 src/components/el/industrySolutionsEl/el3.vue |  27 +++--
 src/components/global/index.js                |  13 +++
 src/components/global/title.vue               |  37 ++++++
 src/main.js                                   |   1 +
 src/views/index/classicCase1.vue              |  32 +++--
 src/views/index/newsCenter.vue                | 109 +++++++++++++++---
 src/views/index/productCenter.vue             |  62 +++++-----
 8 files changed, 214 insertions(+), 69 deletions(-)
 create mode 100644 src/components/global/index.js
 create mode 100644 src/components/global/title.vue

diff --git a/src/components/el/industrySolutionsEl/el1.vue b/src/components/el/industrySolutionsEl/el1.vue
index 1cb346e..76da781 100644
--- a/src/components/el/industrySolutionsEl/el1.vue
+++ b/src/components/el/industrySolutionsEl/el1.vue
@@ -47,7 +47,7 @@ export default {
 }
 
 .value {
-  width: 62vw;
+  width: 85vw;
   margin: 2vw auto 4vw auto;
   text-align: left;
   font-size: 1vw;
diff --git a/src/components/el/industrySolutionsEl/el3.vue b/src/components/el/industrySolutionsEl/el3.vue
index cfe18aa..3e7e3fe 100644
--- a/src/components/el/industrySolutionsEl/el3.vue
+++ b/src/components/el/industrySolutionsEl/el3.vue
@@ -7,18 +7,20 @@
     </div>
     <div class="divider"></div>
     <div class="list">
-      <div class="item" @click="toLink(i)" v-for=" (i,k) in data.list">
-        <div class="img1">
-          <div class="img">
-            <el-image
-                style="width: 100%; height: 100%;"
-                :src="i.img"
-                fit="contain"></el-image>
+      <template v-for="i in data.list">
+        <div class="item" @click="toLink(i)">
+          <div class="img1">
+            <div class="img">
+              <el-image
+                  style="width: 100%; height: 100%;"
+                  :src="i.img"
+                  fit="contain"></el-image>
+            </div>
           </div>
+          <div class="title1">{{ i.title }}</div>
+          <i class="el-icon-right icon"></i>
         </div>
-        <div class="title1">{{ i.title }}</div>
-        <i class="el-icon-right icon"></i>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -66,8 +68,9 @@ export default {
 
 
 .list {
-  width: 62vw;
+  width: 85vw;
   margin: 3vw auto 0;
+  text-align: left;
 
   .item {
     margin-right: 3vw;
@@ -131,7 +134,7 @@ export default {
     }
 
     &:nth-child(2n) {
-      margin-right: 0%;
+      margin-right: 0;
     }
   }
 }
diff --git a/src/components/global/index.js b/src/components/global/index.js
new file mode 100644
index 0000000..8982359
--- /dev/null
+++ b/src/components/global/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+const components = require.context('./', false, /\.vue$/)
+
+components.keys().forEach(fileName => {
+  const componentConfig = components(fileName)
+  const componentName = fileName
+    .replace(/^\.\//, '')
+    .replace(/\.\w+$/, '')
+    .replace(/(^|-)(\w)/g, (match, separator, char) => char.toUpperCase())
+
+  Vue.component(componentName, componentConfig.default || componentConfig)
+})
diff --git a/src/components/global/title.vue b/src/components/global/title.vue
new file mode 100644
index 0000000..7df9b02
--- /dev/null
+++ b/src/components/global/title.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="title">{{ title }}</div>
+    <div class="divider"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Title',
+  props: {
+    title: {
+      type: String,
+      default: '标题'
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+
+.title {
+  margin-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.2vw;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.divider {
+  width: 4vw;
+  height: 4px;
+  background: #3372FE;
+  border-radius: 999px;
+  margin: 10px auto;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index d3ad7a7..1440b62 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import 'swiper/css/bundle';
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
+import "@/components/global";
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 Vue.use(Vue2Editor);
diff --git a/src/views/index/classicCase1.vue b/src/views/index/classicCase1.vue
index 322a939..cca9b91 100644
--- a/src/views/index/classicCase1.vue
+++ b/src/views/index/classicCase1.vue
@@ -1,22 +1,20 @@
 <template>
   <div>
-    <!--    <div class="title">CLASSIC CASE</div>-->
-    <div class="subTitle">典型案例</div>
+    <Title title="典型案例"/>
     <div class="content">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane :label="i.homeConfigTypeName" :name="`${i.configTypeId}`" v-for="(i,k) in data">
           <transition name="fade">
-            <div v-if="activeName === `${i.configTypeId}`" style="position:relative;">
+            <div v-if="activeName === `${i.configTypeId}`" style="position:relative;height: 30vw">
               <div class="left">
                 <div class="caseTitle">{{ i.caseInfoTitle }}</div>
                 <div class="caseInfo">
                   {{ i.caseInfoDesc }}
                 </div>
-                <div class="getCaseInfo" @click="getCaseInfo(i)">查看详情 >></div>
               </div>
               <div class="learnMore" @click="getCaseInfo(i)">
                 <span>
-                  想了解更多？
+                  查看详情
                 </span>
                 <div class="toRight">
                   <i class="el-icon-arrow-right"></i>
@@ -25,8 +23,7 @@
               <div class="caseImage">
                 <el-image
                     style="width: 100%;height: 100%"
-                    :src="i.caseInfoPic"
-                    fit="contain"></el-image>
+                    :src="i.caseInfoPic"></el-image>
               </div>
             </div>
           </transition>
@@ -39,9 +36,11 @@
 <script>
 import banner from '@/assets/image/banner.png'
 import {getHomeCaseTitleList, getTypicalHomeCaseInfo} from "@/api";
+import Title from "@/components/global/title.vue";
 
 export default {
   name: 'ProductCenter',
+  components: {Title},
   props: ['data'],
   data() {
     return {
@@ -115,7 +114,6 @@ export default {
       })
     },
     getCaseInfo(e) {
-      console.log(e)
       this.$router.push(`/industrySolutions?id=${e.configTypeId}`)
       // this.$router.push(`/productCenter/detail?type=${e.linkData[0]}&typeId=${e.linkData[1]}&id=${e.linkData[2]}`)
       // this.$router.push("test?id=" + e.configTypeId)
@@ -141,7 +139,7 @@ export default {
 
   /deep/ .el-tabs__item {
     letter-spacing: 3px;
-    padding: 0 0.5vw;
+    padding: 0 1.5vw;
     height: 2.9vw;
     line-height: 2.9vw;
     font-size: 1.6vw;
@@ -195,7 +193,7 @@ export default {
 }
 
 .left {
-  width: 52%;
+  width: 45%;
   padding-top: 1.7vw;
   word-break: break-all;
 
@@ -204,6 +202,7 @@ export default {
     font-size: 1.5vw;
     text-align: left;
     letter-spacing: 2px;
+    line-height: 2vw;
   }
 
   .caseInfo {
@@ -213,6 +212,11 @@ export default {
     margin-top: 0.9vw;
     line-height: 1.78vw;
     letter-spacing: 2px;
+    height: calc(30vw - 1.7vw - 2vw - 0.9vw - 4.7vw - 1.1vw);
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 11;
   }
 
   .getCaseInfo {
@@ -275,4 +279,12 @@ export default {
   animation: fadeOutLeft;
   animation-duration: 0.5s;
 }
+
+.divider {
+  width: 4vw;
+  height: 4px;
+  background: #3372FE;
+  border-radius: 999px;
+  margin: 10px auto;
+}
 </style>
diff --git a/src/views/index/newsCenter.vue b/src/views/index/newsCenter.vue
index 8f3fa14..69fa914 100644
--- a/src/views/index/newsCenter.vue
+++ b/src/views/index/newsCenter.vue
@@ -2,24 +2,40 @@
   <div>
     <!--    <div class="title">NEWS CENTER</div>-->
     <div class="subTitle">新闻中心</div>
-    <div class="newsList">
-      <div v-for="i in data" :key="i.id" class="newsItem">
-        <div class="newsDay">{{ i.day }}</div>
-        <div class="newsTime">{{ i.month }}/{{ i.year }}</div>
-        <div class="newsTitle">
-          <span class="newsTag" :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }}
+    <div class="newsListWrap">
+      <el-button
+          v-if="data.length > 4"
+          class="newsArrow newsArrowLeft"
+          icon="el-icon-arrow-left"
+          circle
+          @click="scrollNews(-1)">
+      </el-button>
+      <div ref="newsList" class="newsList">
+        <div v-for="i in data" :key="i.id" class="newsItem">
+          <div class="newsDay">{{ i.day }}</div>
+          <div class="newsTime">{{ i.month }}/{{ i.year }}</div>
+          <div class="newsTitle">
+            <span class="newsTag" :style="tagStyle(i.type)">[{{ i.tag }}]</span>{{ i.title }}
+          </div>
+          <div class="newsImage">
+            <el-image
+                style="width: 100%;height: 100%"
+                :src="i.cover"
+                fit="contain"></el-image>
+          </div>
+          <div class="newsInfo">
+            {{ i.summary }}
+          </div>
+          <div class="newsDetail" @click="viewDetail(i)">查看详情 ></div>
         </div>
-        <div class="newsImage">
-          <el-image
-              style="width: 100%;height: 100%"
-              :src="i.cover"
-              fit="contain"></el-image>
-        </div>
-        <div class="newsInfo">
-          {{ i.summary }}
-        </div>
-        <div class="newsDetail" @click="viewDetail(i)">查看详情 ></div>
       </div>
+      <el-button
+          v-if="data.length > 4"
+          class="newsArrow newsArrowRight"
+          icon="el-icon-arrow-right"
+          circle
+          @click="scrollNews(1)">
+      </el-button>
     </div>
     <div class="learnMore">
       <el-button type="primary" plain>查看更多</el-button>
@@ -79,6 +95,15 @@ export default {
         path: '/newsDetail',
         query: {newsCode: e.newsCode}
       })
+    },
+    scrollNews(direction) {
+      const newsList = this.$refs.newsList
+      if (!newsList) return
+      console.log(window.innerWidth * 0.185)
+      newsList.scrollBy({
+        left: window.innerWidth * 0.215 * direction,
+        behavior: 'smooth'
+      })
     }
   }
 }
@@ -111,25 +136,62 @@ export default {
   color: #000;
 }
 
-.newsList {
+.newsListWrap {
+  position: relative;
   margin-top: 3.9vw;
+}
+
+.newsArrow {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  width: 2vw;
+  height: 2vw;
+  padding: 0;
+  transform: translateY(-50%);
+
+  /deep/ i {
+    font-size: 1.2vw;
+  }
+}
+
+.newsArrowLeft {
+  left: -3vw;
+}
+
+.newsArrowRight {
+  right: -3vw;
+}
+
+.newsList {
   text-align: left;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   .newsItem {
     cursor: pointer;
     transition: all 0.2s;
     display: inline-block;
-    width: 17vw;
+    vertical-align: top;
+    white-space: normal;
+    width: 17.5vw;
     margin-right: 1vw;
     background-color: #f8f8f8;
     text-align: left;
     padding: 1.5vw;
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     .newsDay {
       margin-top: 0.7vw;
       font-size: 2.9vw;
       color: #000;
       transition: all 0.2s;
+      min-height: 3.2vw;
+      line-height: 3.2vw;
     }
 
     .newsTime {
@@ -138,6 +200,7 @@ export default {
       color: #666;
       transition: all 0.2s;
       letter-spacing: 2px;
+      min-height: 1.1vw;
     }
 
     .newsTitle {
@@ -147,6 +210,11 @@ export default {
       transition: all 0.2s;
       line-height: 1.9vw;
       letter-spacing: 3px;
+      min-height: 3.8vw;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
     }
 
     .newsImage {
@@ -161,6 +229,11 @@ export default {
       color: #666;
       transition: all 0.2s;
       line-height: 1.4vw;
+      min-height: 5.6vw;
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 4;
     }
 
     .newsDetail {
diff --git a/src/views/index/productCenter.vue b/src/views/index/productCenter.vue
index d679f96..0100352 100644
--- a/src/views/index/productCenter.vue
+++ b/src/views/index/productCenter.vue
@@ -1,29 +1,28 @@
 <template>
   <div>
-    <!--    <div class="title">PRODUCT CENTER</div>-->
-    <div class="subTitle">产品中心</div>
+    <Title title="产品中心"/>
     <div class="productList">
       <template v-for="(i,k) in data">
 
         <div class="productItem" @click="toLink(i)">
-        <div class="imageArea">
-          <el-image
-              style="width: 100%;height: 100%"
-              :src="i.homeConfigTypePic"
-              fit="contain"></el-image>
-        </div>
-        <div class="imageAreaModel">
+          <div class="imageArea">
+            <el-image
+                style="width: 100%;height: 100%"
+                :src="i.homeConfigTypePic"
+                fit="contain"></el-image>
+          </div>
+          <div class="imageAreaModel">
           <span>
             {{ i.configTypeDesc }}
           </span>
-        </div>
-        <div class="titleArea">
+          </div>
+          <div class="titleArea">
           <span>
             {{ i.homeConfigTypeName }}
           </span>
-        </div>
+          </div>
 
-      </div>
+        </div>
         <br v-if="k === 3"/>
       </template>
     </div>
@@ -33,9 +32,11 @@
 <script>
 import banner from '@/assets/image/banner.png'
 import {getPortalConfigTypeList} from "@/api";
+import Title from "@/components/global/title.vue";
 
 export default {
   name: 'ProductCenter',
+  components: {Title},
   props: ['data'],
   data() {
     return {
@@ -80,17 +81,17 @@ export default {
       ]
     }
   },
-  mounted(){
+  mounted() {
     this.getData()
   },
-  methods:{
-    toLink(e){
+  methods: {
+    toLink(e) {
       console.log(e)
       // this.$router.push('/productCenter#item' + e.configTypeId)
       this.$router.push(`/productCenter/detail?type=${e.linkData[0]}&typeId=${e.linkData[1]}&id=${e.linkData[2]}`)
       console.log(e.configTypeId)
     },
-    getData(){
+    getData() {
       // getPortalConfigTypeList({
       //   configTypeClassfication:1,
       //   parentId:0,
@@ -128,20 +129,24 @@ export default {
 
 .productList {
   position: relative;
-  margin-top: 4vw;
+  width: 85vw;
+  margin: 0 auto;
 
   .productItem {
     display: inline-block;
     width: 19vw;
     height: 22vw;
-    margin: 0 1.7vw;
+    margin: 4vw 3vw 0 0;
     box-shadow: 0 0 10px #0003;
     position: relative;
-    margin-top: 2vw;
+
+    &:nth-child(5n + 4) {
+      margin-right: 0;
+    }
 
     .imageArea {
-      width: 12.5vw;
-      height: 12.5vw;
+      width: 17vw;
+      height: 17vw;
       padding: 1vw;
       position: relative;
       background-color: #fff;
@@ -149,22 +154,23 @@ export default {
 
     .imageAreaModel {
       position: absolute;
-      width: 14.5vw;
-      height: 14.5vw;
+      width: 19vw;
+      height: 19vw;
       top: 0;
       left: 0;
       opacity: 0;
-      background-image: radial-gradient(transparent 1px, fade(@standard-color, 80) 1px);
+      background-image: radial-gradient(fade(@standard-color, 80) 0,
+      fade(@standard-color, 80) 100%);
       backdrop-filter: saturate(50%) blur(4px);
       transition: all 0.3s;
 
       span {
         display: inline-block;
-        width: 10vw;
-        height: 10vw;
+        width: 14.5vw;
+        height: 14.5vw;
         padding: 2.25vw;
         color: #fefefe;
-        font-size: 0.9vw;
+        font-size: 1.1vw;
         line-height: 1.7vw;
       }
     }