技术培训样式更改

src/views/technical/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="technical">
     <el-col :span="24" class="main">
-      <el-col :span="12" class="left">
+      <!-- <el-col :span="12" class="left">
         <el-col :span="1" class="leftTitle">
           <p>专<br />题<br />研<br />讨</p>
           <p></p>
@@ -31,11 +31,97 @@
           <p></p>
           <p>技<br />术<br />问<br />答</p>
         </el-col>
+      </el-col> -->
+      <el-col :span="12" class="left">
+        <el-col :span="24" class="downLeftTop">
+          <el-image :src="downLeftTopImage"></el-image>
+          <span class="topText">
+            <span>专题研讨</span>
+            <span
+              ><p>S</p>
+              <p>eminar</p></span
+            >
+            <span @click="turnToList('专题研讨')">更多</span>
+          </span>
+        </el-col>
+        <el-col :span="24" class="infoLeft">
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span @click="clickzhuanti(item.id)" class="textOver">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="downLeftTop">
+          <el-image :src="downLeftTopImage"></el-image>
+          <span class="topText">
+            <span>专家问诊</span>
+            <span
+              ><p>I</p>
+              <p>nquiry</p></span
+            >
+            <span @click="turnToList('专家问诊')">更多</span>
+          </span>
+        </el-col>
+        <el-col :span="23" class="infoRight">
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in jishuList" :key="index">
+            <p>
+              <span class="textOver" @click="clickjishu(item.id)">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
       </el-col>
       <el-col :span="24">
         <el-image :src="jishuImage" class="jishuImage"></el-image>
       </el-col>
       <el-col :span="12" class="left">
+        <el-col :span="24" class="downLeftTop">
+          <el-image :src="downLeftTopImage"></el-image>
+          <span class="topText">
+            <span>行业研究</span>
+            <span
+              ><p>I</p>
+              <p>ndustry</p></span
+            >
+            <span @click="turnToList('行业研究')">更多</span>
+          </span>
+        </el-col>
+        <el-col :span="24" class="infoLeft">
+          <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
+            <p>
+              <span class="textOver" @click="clickhangye(item.id)">{{ item.title }}</span
+              ><span class="textOver">{{ item.publish_time }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="12" class="right">
+        <el-col :span="24" class="downLeftTop">
+          <el-image :src="downLeftTopImage"></el-image>
+          <span class="topText">
+            <span>教育培训</span>
+            <span
+              ><p>T</p>
+              <p>raining</p></span
+            >
+            <span @click="turnToList('教育培训')">更多</span>
+          </span>
+        </el-col>
+        <el-col :span="23" class="infoRight">
+          <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver" @click="clickjiaoyu(item.id)">{{ item.title }}</span>
+              <span>{{ item.content }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+      <!-- <el-col :span="12" class="left">
         <el-col :span="1" class="leftTitle">
           <p>行<br />业<br />研<br />究</p>
           <p></p>
@@ -65,7 +151,7 @@
           <p></p>
           <p>教<br />育<br />培<br />训</p>
         </el-col>
-      </el-col>
+      </el-col> -->
     </el-col>
   </div>
 </template>
@@ -79,6 +165,7 @@ export default {
   props: {},
   components: {},
   data: () => ({
+    downLeftTopImage: require('@/assets/live/square_big.png'),
     jishuImage: require('@/assets/live/main2.png'),
     zhuantiList: [],
     jishuList: [],
@@ -100,13 +187,13 @@ export default {
   methods: {
     ...news(['query']),
     async searchInfo() {
-      let res = await this.query({ skip: 0, limit: 6, column_name: '专题研讨' });
+      let res = await this.query({ skip: 0, limit: 5, column_name: '专题研讨' });
       if (this.$checkRes(res)) this.$set(this, `zhuantiList`, res.data);
-      res = await this.query({ skip: 0, limit: 10, column_name: '技术问答' });
+      res = await this.query({ skip: 0, limit: 8, column_name: '技术问答' });
       if (this.$checkRes(res)) this.$set(this, `jishuList`, res.data);
-      res = await this.query({ skip: 0, limit: 10, column_name: '行业研究' });
+      res = await this.query({ skip: 0, limit: 8, column_name: '行业研究' });
       if (this.$checkRes(res)) this.$set(this, `hangyeList`, res.data);
-      res = await this.query({ skip: 0, limit: 6, column_name: '教育培训' });
+      res = await this.query({ skip: 0, limit: 5, column_name: '教育培训' });
       if (this.$checkRes(res)) this.$set(this, `jiaoyuList`, res.data);
     },
     turnToList(column_name) {
@@ -148,6 +235,8 @@ export default {
   height: 500px;
   margin: 30px 0 30px 0;
   overflow: hidden;
+  border-right: 1px dashed #044b79;
+  width: 49.5%;
 }
 .leftTitle {
   text-align: center;
@@ -176,16 +265,16 @@ export default {
   width: 95%;
   border-bottom: 1px dashed #ccc;
   padding: 8px 0 8px 0;
-  height: 80px;
+  height: 90px;
   margin: 0 0 0 5px;
 }
 
-.infoLeftList:nth-child(6) {
+.infoLeftList:nth-child(5) {
   float: left;
   width: 95%;
   border-bottom: none;
   padding: 8px 0 8px 0;
-  height: 81px;
+  height: 90px;
   margin: 0 0 15px 5px;
 }
 .infoLeftList:hover p:last-child span:first-child {
@@ -259,6 +348,7 @@ export default {
   height: 500px;
   overflow: hidden;
   margin: 30px 0 30px 0;
+  width: 49.5%;
 }
 .rightListTop {
   position: relative;
@@ -289,12 +379,13 @@ export default {
   float: left;
   width: 95%;
   padding: 11px 0;
+  height: 55px;
 }
-.infoRightList:nth-child(5) {
+.infoRightList:nth-child(4) {
   border-bottom: 1px solid #ccc;
   padding: 0 0 17px 0;
 }
-.infoRightList:nth-child(6) {
+.infoRightList:nth-child(5) {
   padding: 11px 0 0 0;
 }
 .infoRightList:hover p span:first-child {
@@ -338,4 +429,46 @@ export default {
   font-weight: bold;
   color: #044b79;
 }
+.downLeftTop .el-image {
+  width: 40px;
+}
+.topText {
+  width: 89%;
+  border-bottom: 2.5px solid #044b79;
+  display: inline-block;
+  position: relative;
+  top: -10px;
+  margin: 0 0 0 5px;
+}
+.topText span:first-child {
+  font-size: 24px;
+  font-weight: 700;
+  color: #000000;
+  padding: 0 10px;
+  top: 4px;
+}
+.topText span p:first-child {
+  font-weight: 800;
+  font-size: 34px;
+
+  color: #92959a;
+
+  top: 11px;
+  display: inline-block;
+}
+.topText span p:last-child {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 18px;
+  color: #92959a;
+}
+.topText span:last-child {
+  float: right;
+  font-size: 16px;
+  font-weight: 700;
+  color: #044b79;
+  position: relative;
+  top: 20px;
+  cursor: pointer;
+}
 </style>

src/views/technical/list.vue

@@ -81,7 +81,7 @@ export default {
   components: {},
   data: () => ({
     squareImage: require('@/assets/live/square_big.png'),
-    menuList: [{ name: '专题研讨' }, { name: '技术问答' }, { name: '行业研究' }, { name: '教育培训' }],
+    menuList: [{ name: '专题研讨' }, { name: '专家问诊' }, { name: '行业研究' }, { name: '教育培训' }],
     menuIndex: '0',
     menuName: '专题研讨',
     menuColor: 'rgb(254, 149, 14)',
@@ -111,7 +111,7 @@ export default {
     async searchList({ skip = 0, limit = 10, ...info } = {}) {
       if (this.$route.query.column_name == '专题研讨') {
         this.changeMenu(this.$route.query.column_name, 0);
-      } else if (this.$route.query.column_name == '技术问答') {
+      } else if (this.$route.query.column_name == '专家问诊') {
         this.changeMenu(this.$route.query.column_name, 1);
       } else if (this.$route.query.column_name == '行业研究') {
         this.changeMenu(this.$route.query.column_name, 2);
@@ -131,7 +131,7 @@ export default {
         this.pageSize = 5;
         res = await this.query({ skip, limit, column_name: '专题研讨', ...info });
         this.$set(this, `zhuantiList`, res.data);
-      } else if (name == '技术问答') {
+      } else if (name == '专家问诊') {
         res = await this.query({ skip, limit, column_name: '技术问答', ...info });
         console.log(res);
         this.$set(this, `jishuList`, res.data);