修改关于海威格式

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;

src/components/el/industrySolutionsEl/el3.vue

@@ -7,7 +7,8 @@
     </div>
     <div class="divider"></div>
     <div class="list">
-      <div class="item" @click="toLink(i)" v-for=" (i,k) in data.list">
+      <template v-for="i in data.list">
+        <div class="item" @click="toLink(i)">
           <div class="img1">
             <div class="img">
               <el-image
@@ -19,6 +20,7 @@
           <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;
     }
   }
 }

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)
+})

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>

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);

src/views/index/classicCase1.vue

@@ -1,22 +1,20 @@
 <template>
   <div>
-    <!--    <div class="title">CLASSIC CASE</div>-->
+    <Title title="典型案例"/>
-    <div class="subTitle">典型案例</div>
     <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"
+                    :src="i.caseInfoPic"></el-image>
-                    fit="contain"></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>

src/views/index/newsCenter.vue

@@ -2,7 +2,15 @@
   <div>
     <!--    <div class="title">NEWS CENTER</div>-->
     <div class="subTitle">新闻中心</div>
-    <div class="newsList">
+    <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>
@@ -21,6 +29,14 @@
           <div class="newsDetail" @click="viewDetail(i)">查看详情 ></div>
         </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>
     </div>
@@ -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 {

src/views/index/productCenter.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    <!--    <div class="title">PRODUCT CENTER</div>-->
+    <Title title="产品中心"/>
-    <div class="subTitle">产品中心</div>
     <div class="productList">
       <template v-for="(i,k) in data">
 
@@ -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 {
@@ -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;
+      width: 17vw;
-      height: 12.5vw;
+      height: 17vw;
       padding: 1vw;
       position: relative;
       background-color: #fff;
@@ -149,22 +154,23 @@ export default {
 
     .imageAreaModel {
       position: absolute;
-      width: 14.5vw;
+      width: 19vw;
-      height: 14.5vw;
+      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;
+        width: 14.5vw;
-        height: 10vw;
+        height: 14.5vw;
         padding: 2.25vw;
         color: #fefefe;
-        font-size: 0.9vw;
+        font-size: 1.1vw;
         line-height: 1.7vw;
       }
     }