更新

src/views/direct.vue

@@ -77,13 +77,26 @@
             <el-tabs type="border-card">
               <el-tab-pane label="找技术">
                 <ul>
-                  <li v-for="(item, index) in jishulist" :key="index">
-                    <el-col :span="24" class="lileft">
+                  <li v-for="(acc, index) in jishulist" :key="index">
+                    <el-col :span="14" class="lileft">
                       <p>
-                        <span>{{ item.title }}</span> <span><el-button class="background:bule">123</el-button></span>
-                      </p></el-col
-                    >
-                    <el-col :span="24" class="liright"></el-col>
+                        <span class="title">{{ acc.title }}</span> <span><el-button class="duijie">对接</el-button></span>
+                      </p>
+
+                      <p class="newp">
+                        <span class="name"><i class="el-icon-ice-cream-round"></i>{{ acc.name }}</span
+                        ><span> <i class="el-icon-ice-cream-round"></i>{{ acc.tel }}</span>
+                      </p>
+                      <p>
+                        <span class="pspan">类型:{{ acc.type }}</span
+                        ><span class="pspan">研发阶段:{{ acc.jueduan }}</span
+                        ><span class="pspan">交易方式:{{ acc.status }}</span
+                        ><span class="pspan">技术型产品:{{ acc.chanpin }}</span>
+                      </p>
+                    </el-col>
+                    <el-col :span="10" class="liright"
+                      ><p>{{ acc.context }}</p>
+                    </el-col>
                   </li>
                 </ul>
               </el-tab-pane>
@@ -119,7 +132,19 @@ export default {
         name2: '10条数据',
       },
     ],
-    jishulist: [{ title: '测试产品1' }],
+    jishulist: [
+      {
+        title: '测试产品1',
+        name: '测网速',
+        tel: '2019-03-5',
+        type: '类型1',
+        chanpin: '产品1',
+        status: '方式10',
+        jueduan: '阶段1',
+        context:
+          '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+      },
+    ],
     superOne: require('@/assets/live/main1.png'),
   }),
   created() {},
@@ -334,19 +359,59 @@ p {
 /deep/.el-tabs--border-card > .el-tabs__content {
   padding: 15px 15px 15px 0;
 }
-.context ul li p span:first-child {
+.context ul li p .title {
   display: inline-block;
   width: 85%;
+  font-size: 18px;
 }
-.context ul li p span:first-child:hover {
+.context ul li p .title:hover {
   color: #ff8500;
   font-weight: bold;
 }
 .lileft {
-  float: left;
-  width: 50%;
+  width: 60%;
 }
 .liright {
-  width: 50%;
+  border: 1px solid #c20808;
+  height: 100px;
+  padding: 5px;
+  margin: 15px 0;
+  width: 40%;
+}
+.liright p {
+  background: #fff8fd;
+  height: 68px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 24px;
+  width: 500px;
+}
+.duijie {
+  color: #fff;
+  background-color: #ff8500;
+  text-align: center;
+  padding: 10px 15px 10px 15px;
+}
+.duijie:hover {
+  background-color: #0279d5;
+}
+
+.newp {
+  margin: 10px 0 10px 0 !important;
+  font-size: 16px;
+}
+
+.newp i {
+  color: #ff8500;
+}
+.name {
+  display: inline-block;
+  width: 430px;
+  font-size: 16px;
+}
+.pspan {
+  display: inline-block;
+  width: 25%;
+  font-size: 16px;
 }
 </style>