1

src/views/technical/index copy.vue

@@ -0,0 +1,422 @@
+<template>
+  <div id="technical">
+    <el-col :span="24" class="main">
+      <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>E</p>
+              <p>xpert</p></span
+            >
+            <span @click="turnToList('专家问诊')">更多</span>
+          </span>
+        </el-col>
+        <el-col :span="24" class="infoLeft">
+          <el-col :span="24" class="infoLeft">
+            <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuanjiaList" :key="index">
+              <p>{{ item.publish_time }}</p>
+              <p></p>
+              <p>
+                <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '专家问诊' } })">{{
+                  item.title
+                }}</span>
+                <span>{{ item.titlejj }}</span>
+              </p>
+            </el-col>
+          </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>ndustry</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 hangyeList" :key="index">
+            <p>
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '行业研究' } })">{{
+                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>G</p>
+              <p>uidance</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 zhidaolist" :key="index">
+            <p>
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 4, column_name: '嘉宾访谈' } })">{{
+                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>R</p>
+              <p>oadshow</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 luyanlist" :key="index">
+            <p>{{ item.publish_time }}</p>
+            <p>
+              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '项目路演' } })">{{
+                item.title
+              }}</span>
+              <span>{{ item.titlejj }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: column } = createNamespacedHelpers('column');
+const { mapActions: news } = createNamespacedHelpers('news');
+const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
+const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
+export default {
+  name: 'technical',
+  props: {},
+  components: {},
+  data: () => ({
+    downLeftTopImage: require('@/assets/live/square_big.png'),
+    jishuImage: require('@/assets/live/main3.png'),
+    zhuanjiaList: [],
+    hangyeList: [],
+    zhidaolist: [],
+    luyanlist: [],
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+
+  methods: {
+    ...column({ columnList: 'query', columnInfo: 'fetch' }),
+    ...news({ newsList: 'query' }),
+    ...newsguidance({ danceQuery: 'query' }),
+    ...newsroadshow({ adshowQuery: 'query' }),
+    async searchInfo({ ...info } = {}) {
+      const res = await this.columnList({ ...info });
+      for (const val of res.data) {
+        this.tpxwSearch({ column_id: val.id, column_name: val.name, site: val.site });
+      }
+      const zhidao = await this.danceQuery({ skip: 0, limit: 8 });
+      if (this.$checkRes(zhidao)) this.$set(this, `zhidaolist`, zhidao.data);
+      const luyan = await this.adshowQuery({ skip: 0, limit: 5 });
+      if (this.$checkRes(luyan)) this.$set(this, `luyanlist`, luyan.data);
+    },
+    async tpxwSearch({ column_id, column_name, site } = {}) {
+      if (column_name == '专家问诊') {
+        const res = await this.newsList({ skip: 0, limit: 8, column_id: column_id });
+        if (this.$checkRes(res)) this.$set(this, `zhuanjiaList`, res.data);
+      } else if (column_name == '行业研究') {
+        const res = await this.newsList({ skip: 0, limit: 8, column_id: column_id });
+        if (this.$checkRes(res)) this.$set(this, `hangyeList`, res.data);
+      }
+    },
+    turnToList(column_name) {
+      this.$router.push({ path: '/technical/list', query: { column_name: column_name, display: 1 } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.jishuImage {
+  width: 100%;
+  height: 140px;
+}
+.main {
+  // width: 80%;
+  width: 1200px;
+  margin: 0 auto;
+  float: none;
+}
+.left {
+  float: left;
+  height: 500px;
+  margin: 30px 0 30px 0;
+  overflow: hidden;
+  border-right: 1px dashed #044b79;
+  width: 49.5%;
+}
+.leftTitle {
+  text-align: center;
+  position: relative;
+}
+.leftTitle p:first-child {
+  font-size: 18px;
+  color: #044b79;
+  font-weight: bold;
+}
+.leftTitle p:last-child {
+  float: left;
+  width: 2px;
+  height: 402px;
+  background-color: #044b79;
+  margin: 0 5px;
+  position: absolute;
+  left: 9px;
+}
+.infoLeft {
+  height: 480px;
+  padding: 0 10px;
+}
+.infoLeftList {
+  float: left;
+  width: 95%;
+  border-bottom: 1px dashed #ccc;
+  padding: 8px 0 8px 0;
+  height: 90px;
+  margin: 0 0 0 5px;
+}
+
+.infoLeftList:nth-child(5) {
+  float: left;
+  width: 95%;
+  border-bottom: none;
+  padding: 8px 0 8px 0;
+  height: 90px;
+  margin: 0 0 15px 5px;
+}
+.infoLeftList:hover p:last-child span:first-child {
+  -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;
+}
+.infoLeftList p:first-child {
+  float: left;
+  width: 20%;
+  font-size: 15px;
+  background: #044b79;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  padding: 4px 0px;
+  margin: 0 0 0 5px;
+}
+.infoLeftList p:last-child {
+  float: right;
+  width: 70%;
+  padding: 0 0 0 10px;
+}
+.infoLeftList p:last-child span:first-child {
+  float: left;
+  width: 90%;
+  font-size: 18px;
+}
+.infoLeftList p:last-child span:last-child {
+  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;
+}
+.leftListDown {
+  position: relative;
+}
+.leftListDown span:first-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  left: -10px;
+  top: 10px;
+}
+.leftListDown span:last-child {
+  font-size: 16px;
+  float: right;
+  padding: 0 15px 0 0;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.right {
+  float: right;
+  height: 500px;
+  overflow: hidden;
+  margin: 30px 0 30px 0;
+  width: 49.5%;
+}
+.rightListTop {
+  position: relative;
+}
+.rightListTop span:first-child {
+  font-size: 16px;
+  float: left;
+  padding: 0 0 0 15px;
+  color: #044b79;
+  font-weight: 700;
+  cursor: pointer;
+}
+.rightListTop span:last-child {
+  display: inline-block;
+  width: 80%;
+  height: 3px;
+  background: rgba(4, 75, 121, 0.37);
+  margin: 0 10px 0 0;
+  position: absolute;
+  right: -10px;
+  top: 10px;
+}
+.infoRight {
+  height: 480px;
+  padding: 0 10px;
+}
+.infoRightList {
+  float: left;
+  width: 95%;
+  padding: 11px 0;
+  height: 55px;
+}
+.infoRightList:nth-child(4) {
+  border-bottom: 1px solid #ccc;
+  padding: 0 0 17px 0;
+}
+.infoRightList:nth-child(5) {
+  padding: 11px 0 0 0;
+}
+.infoRightList:hover p span:first-child {
+  -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;
+}
+.infoRightList p {
+  font-size: 18px;
+}
+.infoRightList p span:first-child {
+  display: inline-block;
+  width: 70%;
+  margin: 0 20px 0 10px;
+}
+.infoRightList p span:last-child {
+  display: inline-block;
+  width: 21%;
+  text-align: center;
+  font-size: 16px;
+}
+.rightTitle {
+  text-align: center;
+}
+.rightTitle p:first-child {
+  width: 2px;
+  height: 370px;
+  background: #044b79;
+  position: relative;
+  left: 10px;
+  top: -20px;
+}
+.rightTitle p:last-child {
+  font-size: 18px;
+  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/index.vue

@@ -1,107 +1,82 @@
 <template>
-  <div id="technical">
-    <el-col :span="24" class="main">
-      <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>E</p>
-              <p>xpert</p></span
-            >
-            <span @click="turnToList('专家问诊')">更多</span>
-          </span>
-        </el-col>
-        <el-col :span="24" class="infoLeft">
-          <el-col :span="24" class="infoLeft">
-            <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuanjiaList" :key="index">
-              <p>{{ item.publish_time }}</p>
-              <p></p>
-              <p>
-                <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '专家问诊' } })">{{
-                  item.title
-                }}</span>
-                <span>{{ item.titlejj }}</span>
-              </p>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>专家问诊</span>
+                  <span>E</span>
+                  <span>xpert</span>
+                  <span>更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="leftDown">
+                底部信息
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="rightTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>行业研究</span>
+                  <span>I</span>
+                  <span>ndustry</span>
+                  <span>更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="rightDown">
+                底部信息
+              </el-col>
             </el-col>
           </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>ndustry</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 hangyeList" :key="index">
-            <p>
-              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '行业研究' } })">{{
-                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>G</p>
-              <p>uidance</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 zhidaolist" :key="index">
-            <p>
-              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 4, column_name: '嘉宾访谈' } })">{{
-                item.title
-              }}</span
-              ><span class="textOver">{{ item.publish_time }}</span>
-            </p>
+          <el-col :span="24" class="two">
+            <el-image :src="gongqiuImage"></el-image>
           </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>R</p>
-              <p>oadshow</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 luyanlist" :key="index">
-            <p>{{ item.publish_time }}</p>
-            <p>
-              <span class="textOver" @click="$router.push({ path: '/technical/list', query: { id: item.id, display: 3, column_name: '项目路演' } })">{{
-                item.title
-              }}</span>
-              <span>{{ item.titlejj }}</span>
-            </p>
+          <el-col :span="24" class="three">
+            <el-col :span="12" class="left">
+              <el-col :span="24" class="leftTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>嘉宾访谈</span>
+                  <span>G</span>
+                  <span>uidance</span>
+                  <span>更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="leftDown">
+                底部信息
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="right">
+              <el-col :span="24" class="rightTop">
+                <el-col :span="2" class="image">
+                  <el-image :src="iconImage"></el-image>
+                </el-col>
+                <el-col :span="22" class="txt">
+                  <span>项目路演</span>
+                  <span>R</span>
+                  <span>oadshow</span>
+                  <span>更多</span>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="rightDown">
+                底部信息
+              </el-col>
+            </el-col>
           </el-col>
-        </el-col>
+        </div>
       </el-col>
-    </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -113,310 +88,208 @@ const { mapActions: news } = createNamespacedHelpers('news');
 const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
 const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
 export default {
-  name: 'technical',
+  name: 'index',
   props: {},
   components: {},
-  data: () => ({
-    downLeftTopImage: require('@/assets/live/square_big.png'),
-    jishuImage: require('@/assets/live/main3.png'),
-    zhuanjiaList: [],
-    hangyeList: [],
-    zhidaolist: [],
-    luyanlist: [],
-  }),
-  created() {
-    this.searchInfo();
+  data: function() {
+    return {
+      gongqiuImage: require('@/assets/live/main3.png'),
+      iconImage: require('@/assets/live/square_big.png'),
+    };
   },
+  created() {},
+  methods: {},
   computed: {
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
   },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
-
-  methods: {
-    ...column({ columnList: 'query', columnInfo: 'fetch' }),
-    ...news({ newsList: 'query' }),
-    ...newsguidance({ danceQuery: 'query' }),
-    ...newsroadshow({ adshowQuery: 'query' }),
-    async searchInfo({ ...info } = {}) {
-      const res = await this.columnList({ ...info });
-      for (const val of res.data) {
-        this.tpxwSearch({ column_id: val.id, column_name: val.name, site: val.site });
-      }
-      const zhidao = await this.danceQuery({ skip: 0, limit: 8 });
-      if (this.$checkRes(zhidao)) this.$set(this, `zhidaolist`, zhidao.data);
-      const luyan = await this.adshowQuery({ skip: 0, limit: 5 });
-      if (this.$checkRes(luyan)) this.$set(this, `luyanlist`, luyan.data);
-    },
-    async tpxwSearch({ column_id, column_name, site } = {}) {
-      if (column_name == '专家问诊') {
-        const res = await this.newsList({ skip: 0, limit: 8, column_id: column_id });
-        if (this.$checkRes(res)) this.$set(this, `zhuanjiaList`, res.data);
-      } else if (column_name == '行业研究') {
-        const res = await this.newsList({ skip: 0, limit: 8, column_id: column_id });
-        if (this.$checkRes(res)) this.$set(this, `hangyeList`, res.data);
-      }
-    },
-    turnToList(column_name) {
-      this.$router.push({ path: '/technical/list', query: { column_name: column_name, display: 1 } });
-    },
-  },
 };
 </script>
 
 <style lang="less" scoped>
-.jishuImage {
-  width: 100%;
-  height: 140px;
-}
-.main {
-  // width: 80%;
+.w_1200 {
   width: 1200px;
   margin: 0 auto;
-  float: none;
-}
-.left {
-  float: left;
-  height: 500px;
-  margin: 30px 0 30px 0;
-  overflow: hidden;
-  border-right: 1px dashed #044b79;
-  width: 49.5%;
-}
-.leftTitle {
-  text-align: center;
-  position: relative;
-}
-.leftTitle p:first-child {
-  font-size: 18px;
-  color: #044b79;
-  font-weight: bold;
-}
-.leftTitle p:last-child {
-  float: left;
-  width: 2px;
-  height: 402px;
-  background-color: #044b79;
-  margin: 0 5px;
-  position: absolute;
-  left: 9px;
-}
-.infoLeft {
-  height: 480px;
-  padding: 0 10px;
-}
-.infoLeftList {
-  float: left;
-  width: 95%;
-  border-bottom: 1px dashed #ccc;
-  padding: 8px 0 8px 0;
-  height: 90px;
-  margin: 0 0 0 5px;
-}
-
-.infoLeftList:nth-child(5) {
-  float: left;
-  width: 95%;
-  border-bottom: none;
-  padding: 8px 0 8px 0;
-  height: 90px;
-  margin: 0 0 15px 5px;
-}
-.infoLeftList:hover p:last-child span:first-child {
-  -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;
-}
-.infoLeftList p:first-child {
-  float: left;
-  width: 20%;
-  font-size: 15px;
-  background: #044b79;
-  text-align: center;
-  color: #fff;
-  font-weight: bold;
-  padding: 4px 0px;
-  margin: 0 0 0 5px;
-}
-.infoLeftList p:last-child {
-  float: right;
-  width: 70%;
-  padding: 0 0 0 10px;
-}
-.infoLeftList p:last-child span:first-child {
-  float: left;
-  width: 90%;
-  font-size: 18px;
-}
-.infoLeftList p:last-child span:last-child {
-  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;
-}
-.leftListDown {
-  position: relative;
-}
-.leftListDown span:first-child {
-  display: inline-block;
-  width: 80%;
-  height: 3px;
-  background: rgba(4, 75, 121, 0.37);
-  margin: 0 10px 0 0;
-  position: absolute;
-  left: -10px;
-  top: 10px;
-}
-.leftListDown span:last-child {
-  font-size: 16px;
-  float: right;
-  padding: 0 15px 0 0;
-  color: #044b79;
-  font-weight: 700;
-  cursor: pointer;
-}
-.right {
-  float: right;
-  height: 500px;
-  overflow: hidden;
-  margin: 30px 0 30px 0;
-  width: 49.5%;
 }
-.rightListTop {
-  position: relative;
-}
-.rightListTop span:first-child {
-  font-size: 16px;
-  float: left;
-  padding: 0 0 0 15px;
-  color: #044b79;
-  font-weight: 700;
-  cursor: pointer;
-}
-.rightListTop span:last-child {
-  display: inline-block;
-  width: 80%;
-  height: 3px;
-  background: rgba(4, 75, 121, 0.37);
-  margin: 0 10px 0 0;
-  position: absolute;
-  right: -10px;
-  top: 10px;
-}
-.infoRight {
-  height: 480px;
-  padding: 0 10px;
-}
-.infoRightList {
-  float: left;
-  width: 95%;
-  padding: 11px 0;
-  height: 55px;
-}
-.infoRightList:nth-child(4) {
-  border-bottom: 1px solid #ccc;
-  padding: 0 0 17px 0;
-}
-.infoRightList:nth-child(5) {
-  padding: 11px 0 0 0;
-}
-.infoRightList:hover p span:first-child {
-  -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;
-}
-.infoRightList p {
-  font-size: 18px;
-}
-.infoRightList p span:first-child {
-  display: inline-block;
-  width: 70%;
-  margin: 0 20px 0 10px;
-}
-.infoRightList p span:last-child {
-  display: inline-block;
-  width: 21%;
-  text-align: center;
-  font-size: 16px;
-}
-.rightTitle {
-  text-align: center;
-}
-.rightTitle p:first-child {
-  width: 2px;
-  height: 370px;
-  background: #044b79;
-  position: relative;
-  left: 10px;
-  top: -20px;
-}
-.rightTitle p:last-child {
-  font-size: 18px;
-  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;
+.main {
+  margin: 15px 0;
+  .one {
+    height: 500px;
+    overflow: hidden;
+    margin: 0 0 15px 0;
+    .left {
+      border-right: 1px dashed #ccc;
+      .leftTop {
+        height: 50px;
+        .txt {
+          height: 47px;
+          line-height: 47px;
+          border-bottom: 3px solid #044b79;
+          span:first-child {
+            color: #000000;
+            font-size: 24px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            color: #92959a;
+            font-size: 24px;
+            font-weight: bold;
+            margin: 0 0 0 10px;
+          }
+          span:nth-child(3) {
+            color: #92959a;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          span:last-child {
+            float: right;
+            padding: 0 15px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #044b79;
+          }
+          span:last-child:hover {
+            cursor: pointer;
+          }
+        }
+      }
+      .leftDown {
+        height: 450px;
+      }
+    }
+    .right {
+      .rightTop {
+        height: 50px;
+        .txt {
+          height: 47px;
+          line-height: 47px;
+          border-bottom: 3px solid #044b79;
+          span:first-child {
+            color: #000000;
+            font-size: 24px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            color: #92959a;
+            font-size: 24px;
+            font-weight: bold;
+            margin: 0 0 0 10px;
+          }
+          span:nth-child(3) {
+            color: #92959a;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          span:last-child {
+            float: right;
+            padding: 0 15px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #044b79;
+          }
+          span:last-child:hover {
+            cursor: pointer;
+          }
+        }
+      }
+      .rightDown {
+        height: 450px;
+        padding: 0 10px;
+      }
+    }
+  }
+  .two {
+    margin: 0 0 15px 0;
+    text-align: center;
+    .el-image {
+      height: 140px;
+    }
+  }
+  .three {
+    height: 500px;
+    overflow: hidden;
+    .left {
+      border-right: 1px dashed #ccc;
+      .leftTop {
+        height: 50px;
+        .txt {
+          height: 47px;
+          line-height: 47px;
+          border-bottom: 3px solid #044b79;
+          span:first-child {
+            color: #000000;
+            font-size: 24px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            color: #92959a;
+            font-size: 24px;
+            font-weight: bold;
+            margin: 0 0 0 10px;
+          }
+          span:nth-child(3) {
+            color: #92959a;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          span:last-child {
+            float: right;
+            padding: 0 15px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #044b79;
+          }
+          span:last-child:hover {
+            cursor: pointer;
+          }
+        }
+      }
+      .leftDown {
+        height: 450px;
+      }
+    }
+    .right {
+      .rightTop {
+        height: 50px;
+        .txt {
+          height: 47px;
+          line-height: 47px;
+          border-bottom: 3px solid #044b79;
+          span:first-child {
+            color: #000000;
+            font-size: 24px;
+            font-weight: bold;
+          }
+          span:nth-child(2) {
+            color: #92959a;
+            font-size: 24px;
+            font-weight: bold;
+            margin: 0 0 0 10px;
+          }
+          span:nth-child(3) {
+            color: #92959a;
+            font-size: 18px;
+            font-weight: bold;
+          }
+          span:last-child {
+            float: right;
+            padding: 0 15px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #044b79;
+          }
+          span:last-child:hover {
+            cursor: pointer;
+          }
+        }
+      }
+      .rightDown {
+        height: 450px;
+        padding: 0 10px;
+      }
+    }
+  }
 }
 </style>