hebing

src/App.vue

@@ -32,4 +32,8 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+p {
+  padding: 0;
+  margin: 0;
+}
 </style>

src/layout/news/infoList.vue

@@ -1,6 +1,51 @@
 <template>
   <div id="infoList">
-    <p>infoList</p>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <span></span>
+            <span>科技资讯</span>
+            <span>MORE</span>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="oneList" v-for="(item, index) in oneList" :key="index">
+              <span></span>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.date }}</span>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <span></span>
+            <span>技术前沿</span>
+            <span>MORE</span>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="oneList" v-for="(item, index) in twoList" :key="index">
+              <span></span>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.date }}</span>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <span></span>
+            <span>工作动态</span>
+            <span>MORE</span>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-col :span="24" class="oneList" v-for="(item, index) in threeList" :key="index">
+              <span></span>
+              <span class="textOver">{{ item.title }}</span>
+              <span>{{ item.date }}</span>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -8,7 +53,11 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'infoList',
-  props: {},
+  props: {
+    oneList: null,
+    twoList: null,
+    threeList: null,
+  },
   components: {},
   data: function() {
     return {};
@@ -27,4 +76,61 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.info {
+  padding: 0 20px;
+  .one {
+    height: 330px;
+    overflow: hidden;
+    margin: 0 0 20px 0;
+    .top {
+      height: 35px;
+      margin: 20px 0;
+      border-bottom: 1px dashed #ccc;
+      span:first-child {
+        display: inline-block;
+        width: 4px;
+        height: 20px;
+        background: #005293;
+        margin: 0 10px -3px 0;
+      }
+      span:nth-child(2) {
+        font-size: 20px;
+        color: #005293;
+        font-weight: bold;
+      }
+      span:last-child {
+        float: right;
+        font-size: 15px;
+        color: #005293;
+      }
+    }
+    .oneList {
+      padding: 0 0 7px 0;
+      span:first-child {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        background: #ccc;
+        margin: 0px 10px 7px 0px;
+      }
+      span:nth-child(2) {
+        display: inline-block;
+        font-size: 16px;
+        color: #555555;
+        font-family: '微软雅黑';
+        width: 85%;
+        margin: 0 30px 0 0;
+      }
+      span:last-child {
+        display: inline-block;
+        width: 90px;
+        font-size: 16px;
+        color: #a8abb7;
+        font-family: '微软雅黑';
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

src/layout/news/newsQuestion.vue

@@ -7,7 +7,24 @@
           <span>新闻咨询</span>
         </el-col>
         <el-col :span="24" class="question">
-          问题
+          <p>网上调查</p>
+          <el-col :span="24" class="form">
+            <el-image :src="topImg"></el-image>
+            <el-form ref="form" :model="form">
+              <el-form-item>
+                <span slot="label">您是否愿意继续关注本平台 </span>
+                <el-radio-group v-model="form.resource">
+                  <el-radio label="愿意"></el-radio>
+                  <el-radio label="不愿意"></el-radio>
+                  <el-radio label="不愿意"></el-radio>
+                  <el-radio label="愿意"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit">确认提交</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -21,10 +38,17 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      topImg: require('@/assets/getImage.png'),
+      form: {},
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    onSubmit() {
+      console.log(this.form);
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -38,4 +62,44 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.top {
+  height: 60px;
+  line-height: 60px;
+  background-color: #054982;
+  color: #fff;
+  font-size: 25px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  text-align: center;
+}
+.question {
+  text-align: center;
+  p {
+    float: left;
+    width: 100%;
+    height: 59px;
+    line-height: 60px;
+    text-align: center;
+    color: #054982;
+    border-bottom: 1px dashed #054982;
+    font-size: 25px;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 2px;
+  }
+  .el-image {
+    width: 150px;
+    height: 100px;
+    margin: 30px 0;
+  }
+}
+/deep/.el-form-item__label {
+  width: 100%;
+  text-align: center;
+}
+/deep/.el-radio {
+  width: 36%;
+  text-align: left;
+  padding: 5px 80px;
+}
 </style>

src/views/news/index.vue

@@ -21,7 +21,7 @@
               <newsQuestion></newsQuestion>
             </el-col>
             <el-col :span="18" class="right">
-              <infoList></infoList>
+              <infoList :oneList="oneList" :twoList="twoList" :threeList="threeList"></infoList>
             </el-col>
           </div>
         </el-col>
@@ -47,7 +47,38 @@ export default {
     infoList,
   },
   data: function() {
-    return {};
+    return {
+      oneList: [
+        {
+          title: '標題',
+          date: '2020-01-01',
+        },
+        {
+          title: '八条数据',
+          date: '2020-01-01',
+        },
+      ],
+      twoList: [
+        {
+          title: '標題',
+          date: '2020-01-01',
+        },
+        {
+          title: '八条数据',
+          date: '2020-01-01',
+        },
+      ],
+      threeList: [
+        {
+          title: '標題',
+          date: '2020-01-01',
+        },
+        {
+          title: '八条数据',
+          date: '2020-01-01',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -83,13 +114,13 @@ export default {
     min-height: 600px;
     margin: 0 0 10px 0;
     .left {
-      min-height: 600px;
+      min-height: 1050px;
       background: #fff;
       margin: 0 10px 0 0;
     }
     .right {
       width: 78%;
-      min-height: 600px;
+      min-height: 1050px;
       background: #fff;
     }
   }