11

src/views/market/detail/achiDetail.vue

@@ -10,8 +10,18 @@
               </el-carousel-item>
             </el-carousel>
           </el-col>
-          <el-col :span="7" v-else>
-            asd
+          <el-col :span="7" v-else class="achieveImage">
+            <el-image :src="achievezb"></el-image>
+            <el-col :span="24" class="aName">
+              {{ detailInfo.name }}
+            </el-col>
+            <el-col :span="24" class="a-brief"
+              ><span>{{ detailInfo.achievebrief }}</span></el-col
+            >
+            <el-col :span="24" class="cont">
+              <el-col :span="24" class="a-field">领域：{{ detailInfo.field }}</el-col>
+              <el-col :span="24" class="a-contacts">联系人：{{ detailInfo.contacts }}</el-col>
+            </el-col>
           </el-col>
           <el-col :span="17" class="right">
             <el-col :span="24" class="name textOver">
@@ -193,7 +203,7 @@ export default {
   },
   components: { chat },
   data: function() {
-    return { dialogTableVisible: false, room: {}, dialogTableVisible1: false, gridData: [] };
+    return { dialogTableVisible: false, room: {}, dialogTableVisible1: false, gridData: [], achievezb: require('@/assets/3.png') };
   },
   created() {},
   methods: {
@@ -267,6 +277,63 @@ export default {
         border: 1px solid #ccc;
       }
     }
+    // .img1 {
+    //   width: 100%;
+    //   height: 345px;
+    //   overflow: hidden;
+    // }
+    .achieveImage {
+      position: relative;
+      .el-image {
+        width: 100%;
+        height: 345px;
+        overflow: hidden;
+        // border-radius: 5px;
+        // transition: all 0.4s linear;
+        position: relative;
+      }
+      .aName {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        text-align: center;
+        transform: scale(0.8);
+        font-weight: bolder;
+        // color: transparent;
+        // 文字边框宽度和颜色
+        -webkit-text-stroke: 1px #f18d2c;
+        font-style: oblique;
+        // 文字填充色
+        -webkit-text-fill-color: transparent;
+        letter-spacing: 3px;
+      }
+      .a-brief {
+        margin: 10px 0px;
+        position: absolute;
+        top: 90px;
+        left: 0px;
+        overflow: hidden;
+        line-height: 20px;
+        letter-spacing: 2px;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 7;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        transform: scale(0.8);
+      }
+      .cont {
+        position: absolute;
+        left: 0px;
+        bottom: 20px;
+        transform: scale(0.8);
+        .a-field {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
   }
   .down {
     margin: 0 0 15px 0;

src/views/market/index.vue

@@ -882,14 +882,14 @@ export default {
       .achieveList::before {
         content: '';
         // background: linear-gradient(to left top, #e6e6fa, #b0c4de);
-        background: #ccc;
-        height: 100%;
-        width: 100%;
-        opacity: 0;
-        position: absolute;
-        z-index: 100;
-        left: 0;
-        top: 0;
+        // background: #ccc;
+        // height: 100%;
+        // width: 100%;
+        // opacity: 0;
+        // position: absolute;
+        // z-index: 100;
+        // left: 0;
+        // top: 0;
         // transition: all 0.4s linear;
       }
       // .achieveList:hover::before {