更新

src/views/market/index.vue

@@ -28,10 +28,18 @@
                     <el-col :span="24" class="achieveImage">
                       <el-image v-if="item.image && item.image.length > 0" :src="item.image[0].url"></el-image>
                       <el-image v-else :src="achievezb"></el-image>
+                      <!-- <el-col :span="24" class="name">{{item.}}</el-col> -->
+                      <el-col :span="24" class="name textOver aName">
+                        {{ item.name }}
+                      </el-col>
+                      <el-col :span="24" class="cont">
+                        <el-col :span="24" class="a-field">领域：{{ item.field }}</el-col>
+                        <el-col :span="24" class="a-contacts">联系人：{{ item.contacts }}</el-col>
+                      </el-col>
                     </el-col>
-                    <el-col :span="24" class="name textOver">
+                    <!-- <el-col :span="24" class="name textOver aName">
                       {{ item.name }}
-                    </el-col>
+                    </el-col> -->
                   </el-col>
                 </el-row>
               </el-col>
@@ -566,7 +574,7 @@ export default {
     return {
       gongqiuImage: require('@/assets/live/main2.png'),
       iconImage: require('@/assets/live/square_big.png'),
-      achievezb: require('@/assets/achievezb.jpg'),
+      achievezb: require('@/assets/3.png'),
       expertimage: require('@/assets/live/222.png'),
       // 成果
       achieveList: [
@@ -778,33 +786,54 @@ export default {
     .leftDown {
       height: 450px;
       .achieveList {
-        position: relative;
+        // position: relative;
         overflow: hidden;
         height: 220px;
         margin-top: 5px;
+        padding: 0px 8px;
         .achieveImage {
+          position: relative;
           .el-image {
             width: 100%;
             height: 220px;
             overflow: hidden;
             border-radius: 5px;
             transition: all 0.4s linear;
+            position: relative;
+          }
+          .aName {
+            position: absolute;
+            top: 25px;
+            left: 0px;
+            text-align: center;
+            -webkit-transform: scale(0.8);
+          }
+          .cont {
+            position: absolute;
+            left: 0px;
+            bottom: 10px;
+            -webkit-transform: scale(0.8);
+            .a-field {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
           }
         }
-        .name {
-          color: #fff;
-          width: 100%;
-          transform: translateY(-50%) scale(0);
-          position: absolute;
-          top: 50%;
-          left: 0;
-          height: 40px;
-          text-align: center;
-          line-height: 40px;
-          font-size: 16px;
-          z-index: 200;
-          transition: all 0.4s linear;
-        }
+        // .name {
+        //   color: #fff;
+        //   width: 100%;
+        //   transform: translateY(-50%) scale(0);
+        //   position: absolute;
+        //   top: 50%;
+        //   left: 0;
+        //   height: 40px;
+        //   text-align: center;
+        //   line-height: 40px;
+        //   font-size: 16px;
+        //   z-index: 200;
+        //   transition: all 0.4s linear;
+        // }
       }
       .achieveList:hover {
         cursor: pointer;
@@ -824,22 +853,22 @@ export default {
         z-index: 100;
         left: 0;
         top: 0;
-        transition: all 0.4s linear;
-      }
-      .achieveList:hover::before {
-        opacity: 0.4;
-      }
-      .achieveList:hover {
-        // box-shadow: 3px 12px 15px rgba(0, 0, 0, 0.4);
-        box-shadow: 3px 5px 6px rgba(0, 0, 0, 0.5);
-      }
-      .achieveList:hover .achieveImage .el-image {
-        transform: scale(1.2);
-      }
-      .achieveList:hover .name {
-        transform: translateY(-50%) scale(1);
-        font-weight: bolder;
+        // transition: all 0.4s linear;
       }
+      // .achieveList:hover::before {
+      //   opacity: 0.4;
+      // }
+      // .achieveList:hover {
+      //   // box-shadow: 3px 12px 15px rgba(0, 0, 0, 0.4);
+      //   box-shadow: 3px 5px 6px rgba(0, 0, 0, 0.5);
+      // }
+      // .achieveList:hover .achieveImage .el-image {
+      //   transform: scale(1.2);
+      // }
+      // .achieveList:hover .name {
+      //   transform: translateY(-50%) scale(1);
+      //   font-weight: bolder;
+      // }
     }
   }
   .right {