11

src/views/technical/index.vue

@@ -13,11 +13,19 @@
                   <span>专家问诊</span>
                   <span>E</span>
                   <span>xpert</span>
-                  <span>更多</span>
+                  <span @click="$router.push({ path: '/technical/list', query: { type: '1', column_name: '专家问诊' } })">更多</span>
                 </el-col>
               </el-col>
               <el-col :span="24" class="leftDown">
-                底部信息
+                <el-col :span="24" class="lInfoList" v-for="(item, index) in zhuanjiaList" :key="index">
+                  <p class="p1">{{ item.publish_time || '暂无' }}</p>
+                  <p class="p2">
+                    <span class="textOver1" @click="$router.push({ path: '/technical/list', query: { type: '1', column_name: '专家问诊', id: item._id } })">
+                      {{ item.title }}
+                    </span>
+                    <span class="textOver2">{{ item.titlejj }}</span>
+                  </p>
+                </el-col>
               </el-col>
             </el-col>
             <el-col :span="12" class="right">
@@ -29,11 +37,20 @@
                   <span>行业研究</span>
                   <span>I</span>
                   <span>ndustry</span>
-                  <span>更多</span>
+                  <span @click="$router.push({ path: '/technical/list', query: { type: '2', column_name: '行业研究' } })">更多</span>
                 </el-col>
               </el-col>
               <el-col :span="24" class="rightDown">
-                底部信息
+                <el-col :span="24" class="rInfoList" v-for="(item, index) in hangyeList" :key="index">
+                  <p>
+                    <span class="r-text" @click="$router.push({ path: '/technical/list', query: { type: '2', column_name: '行业研究', id: item._id } })">{{
+                      item.title
+                    }}</span>
+                    <span class="r-date">
+                      {{ item.publish_time || '暂无' }}
+                    </span>
+                  </p>
+                </el-col>
               </el-col>
             </el-col>
           </el-col>
@@ -50,11 +67,20 @@
                   <span>嘉宾访谈</span>
                   <span>G</span>
                   <span>uidance</span>
-                  <span>更多</span>
+                  <span @click="$router.push({ path: '/technical/list', query: { type: '3', column_name: '嘉宾访谈' } })">更多</span>
                 </el-col>
               </el-col>
               <el-col :span="24" class="leftDown">
-                底部信息
+                <el-col :span="24" class="rInfoList" v-for="(item, index) in hangyeList" :key="index">
+                  <p>
+                    <span class="r-text" @click="$router.push({ path: '/technical/list', query: { type: '3', column_name: '嘉宾访谈', id: item._id } })">{{
+                      item.title
+                    }}</span>
+                    <span class="r-date">
+                      {{ item.publish_time || '暂无' }}
+                    </span>
+                  </p>
+                </el-col>
               </el-col>
             </el-col>
             <el-col :span="12" class="right">
@@ -66,11 +92,18 @@
                   <span>项目路演</span>
                   <span>R</span>
                   <span>oadshow</span>
-                  <span>更多</span>
+                  <span @click="$router.push({ path: '/technical/list', query: { type: '4', column_name: '项目路演' } })">更多</span>
                 </el-col>
               </el-col>
               <el-col :span="24" class="rightDown">
-                底部信息
+                <el-col :span="24" class="infoList" v-for="(item, index) in luyanlist" :key="index">
+                  <p class="p1">{{ item.publish_time || '暂无' }}</p>
+                  <p class="p2">
+                    <span class="textOver1" @click="$router.push({ path: '/technical/list', query: { type: '4', column_name: '项目路演', id: item._id } })">
+                      {{ item.title }}
+                    </span>
+                  </p>
+                </el-col>
               </el-col>
             </el-col>
           </el-col>
@@ -95,10 +128,124 @@ export default {
     return {
       gongqiuImage: require('@/assets/live/main3.png'),
       iconImage: require('@/assets/live/square_big.png'),
+      zhuanjiaList: [
+        // {
+        //   title: '我是标题1',
+        //   publish_time: '2020-10-6',
+        //   titlejj:
+        //     '借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备',
+        // },
+        // {
+        //   title: '我是标题1',
+        //   publish_time: '2020-10-6',
+        //   titlejj: '借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备',
+        // },
+        // {
+        //   title: '我是标题1',
+        //   publish_time: '2020-10-6',
+        //   titlejj: '借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备',
+        // },
+        // {
+        //   title: '我是标题1',
+        //   publish_time: '2020-10-6',
+        //   titlejj: '借款方绝大部分绝对是部分机电设备借款方绝大部分绝对是部分机电设备',
+        // },
+      ],
+      hangyeList: [
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+
+        {
+          title: '我是标题1',
+          publish_time: '2020-10-6',
+        },
+      ],
+      luyanlist: [],
+      //栏目列表
+      columnLists: [],
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  methods: {
+    ...column({ columnList: 'query', columnInfo: 'fetch' }),
+    ...news({ newsList: 'query' }),
+    ...newsguidance({ danceQuery: 'query' }),
+    ...newsroadshow({ adshowQuery: 'query' }),
+    async search({ ...info } = {}) {
+      //查询栏目
+      const res = await this.columnList({ ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `columnLists`, res.data);
+        this.searchList();
+      }
+    },
+    async searchList() {
+      let column = this.columnLists;
+      for (const i of column) {
+        if (i.name == '专家问诊') {
+          const res = await this.newsList({ skip: 0, limit: 5, column_id: i._id });
+          if (this.$checkRes(res)) {
+            this.$set(this, `zhuanjiaList`, res.data);
+          }
+        }
+      }
+    },
+  },
+  // 过滤时间
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -157,6 +304,62 @@ export default {
       }
       .leftDown {
         height: 450px;
+        .lInfoList {
+          float: left;
+          width: 95%;
+          border-bottom: 1px dashed #ccc;
+          padding: 8px 0 8px 0;
+          height: 90px;
+          margin: 0 0 0 5px;
+          .p1 {
+            float: left;
+            width: 20%;
+            font-size: 15px;
+            background: #044b79;
+            text-align: center;
+            color: #fff;
+            font-weight: 700;
+            padding: 4px 0;
+            margin: 0 0 0 5px;
+          }
+          .p2 {
+            float: right;
+            width: 70%;
+            padding: 0 0 0 10px;
+            .textOver1 {
+              float: left;
+              width: 90%;
+              font-size: 18px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .textOver2 {
+              float: left;
+              width: 90%;
+              font-size: 16px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 2;
+              word-break: break-all;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              margin: 5px 0 0 0;
+              color: #666;
+            }
+          }
+        }
+        .lInfoList:hover .p2 .textOver1 {
+          -webkit-transform: translateY(-3px);
+          -ms-transform: translateY(-3px);
+          transform: translateY(-3px);
+          -webkit-box-shadow: 0 0 6px #999;
+          box-shadow: 0 0 6px #999;
+          -webkit-transition: all 0.5s ease-out;
+          transition: all 0.5s ease-out;
+          color: #005293;
+          cursor: pointer;
+        }
       }
     }
     .right {
@@ -197,6 +400,41 @@ export default {
       .rightDown {
         height: 450px;
         padding: 0 10px;
+        .rInfoList {
+          float: left;
+          width: 95%;
+          padding: 11px 0;
+          height: 55px;
+          .r-text {
+            display: inline-block;
+            width: 70%;
+            margin: 0 20px 0 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 18px;
+          }
+          .r-date {
+            display: inline-block;
+            width: 21%;
+            text-align: center;
+            font-size: 16px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .rInfoList:hover p .r-text {
+          -webkit-transform: translateY(-3px);
+          -ms-transform: translateY(-3px);
+          transform: translateY(-3px);
+          -webkit-box-shadow: 0 0 6px #999;
+          box-shadow: 0 0 6px #999;
+          -webkit-transition: all 0.5s ease-out;
+          transition: all 0.5s ease-out;
+          color: #005293;
+          cursor: pointer;
+        }
       }
     }
   }
@@ -248,6 +486,41 @@ export default {
       }
       .leftDown {
         height: 450px;
+        .rInfoList {
+          float: left;
+          width: 95%;
+          padding: 11px 0;
+          height: 55px;
+          .r-text {
+            display: inline-block;
+            width: 70%;
+            margin: 0 20px 0 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 18px;
+          }
+          .r-date {
+            display: inline-block;
+            width: 21%;
+            text-align: center;
+            font-size: 16px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        .rInfoList:hover p .r-text {
+          -webkit-transform: translateY(-3px);
+          -ms-transform: translateY(-3px);
+          transform: translateY(-3px);
+          -webkit-box-shadow: 0 0 6px #999;
+          box-shadow: 0 0 6px #999;
+          -webkit-transition: all 0.5s ease-out;
+          transition: all 0.5s ease-out;
+          color: #005293;
+          cursor: pointer;
+        }
       }
     }
     .right {
@@ -288,6 +561,49 @@ export default {
       .rightDown {
         height: 450px;
         padding: 0 10px;
+        .infoList {
+          float: left;
+          width: 95%;
+          border-bottom: 1px dashed #ccc;
+          padding: 25px 0 8px 0;
+          height: 90px;
+          margin: 0 0 0 5px;
+          .p1 {
+            float: left;
+            width: 20%;
+            font-size: 15px;
+            background: #044b79;
+            text-align: center;
+            color: #fff;
+            font-weight: 700;
+            padding: 4px 0;
+            margin: 0 0 0 5px;
+          }
+          .p2 {
+            float: right;
+            width: 70%;
+            padding: 0 0 0 10px;
+            .textOver1 {
+              float: left;
+              width: 90%;
+              font-size: 18px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+        .infoList:hover .p2 .textOver1 {
+          -webkit-transform: translateY(-3px);
+          -ms-transform: translateY(-3px);
+          transform: translateY(-3px);
+          -webkit-box-shadow: 0 0 6px #999;
+          box-shadow: 0 0 6px #999;
+          -webkit-transition: all 0.5s ease-out;
+          transition: all 0.5s ease-out;
+          color: #005293;
+          cursor: pointer;
+        }
       }
     }
   }