更新

src/layout/home/achieveList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="achieveList">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="topTxt">
+            <van-icon name="label-o" />
+            <span>科技产品</span>
+          </el-col>
+          <el-col :span="4" class="link">
+            <el-link :underline="false">MORE</el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <span v-if="list.length > 0">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+              <p>
+                <span></span>
+                <span class="textOver">{{ item.title }}</span>
+              </p>
+              <p>类型:{{ item.totaltype === '0' ? '技术' : item.totaltype === '1' ? '产品' : item.totaltype === '2' ? '服务' : '暂无' }}</p>
+            </el-col>
+          </span>
+          <span v-else>
+            <el-col :span="24" class="noList">
+              暂无数据
+            </el-col>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: marketproduct } = createNamespacedHelpers('marketproduct');
+export default {
+  name: 'achieveList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...marketproduct({ productFetch: 'fetch', productCreate: 'create', productUpdate: 'update', productQuery: 'query' }),
+    async searchInfo({ skip = 0, limit = 4, ...info } = {}) {
+      const res = await this.productQuery({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  padding: 0 10px;
+  .top {
+    height: 30px;
+    line-height: 30px;
+    .topTxt {
+      .van-icon {
+        top: 2px;
+        color: #2c69fe;
+      }
+      span {
+        padding: 0 0 0 5px;
+      }
+    }
+    .link {
+      text-align: center;
+      .el-link {
+        font-weight: bold;
+      }
+    }
+  }
+  .info {
+    .list {
+      border-bottom: 1px solid #ccc;
+      font-size: 14px;
+      padding: 10px 0;
+      p:first-child {
+        font-weight: bold;
+        padding: 0 0 5px 0;
+        span:first-child {
+          display: inline-block;
+          width: 4px;
+          height: 10px;
+          background: #2c69fe;
+          margin: 0 5px 0 0px;
+        }
+      }
+      p:last-child {
+        font-size: 12px;
+      }
+    }
+    .noList {
+      text-align: center;
+      padding: 30px 0;
+    }
+  }
+}
+</style>

src/layout/home/clickBtn.vue

@@ -0,0 +1,112 @@
+<template>
+  <div id="clickBtn">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="btn">
+          <el-col :span="12" class="btnDiv">
+            <div>
+              <el-image :src="onePic"></el-image>
+              <p>科技成果</p>
+            </div>
+          </el-col>
+          <el-col :span="12" class="btnDiv">
+            <div>
+              <el-image :src="twoPic"></el-image>
+              <p>解决需求</p>
+            </div>
+          </el-col>
+          <el-col :span="12" class="btnDiv">
+            <div>
+              <el-image :src="threePic"></el-image>
+              <p>科技活动</p>
+            </div>
+          </el-col>
+          <el-col :span="12" class="btnDiv">
+            <div>
+              <el-image :src="fourPic"></el-image>
+              <p>科技专家</p>
+            </div>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="message">
+          <van-notice-bar left-icon="volume-o" :scrollable="false">
+            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
+              <van-swipe-item v-for="(item, index) in list" :key="index">{{ item.title }}</van-swipe-item>
+            </van-swipe>
+          </van-notice-bar>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  name: 'clickBtn',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      onePic: require('@/assets/achieve.png'),
+      twoPic: require('@/assets/huodong.png'),
+      threePic: require('@/assets/huodong.png'),
+      fourPic: require('@/assets/export.png'),
+      list: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...dock({ dockQuery: 'query', palcefetch: 'fetch' }),
+    async searchInfo({ skip = 0, limit = 4, ...info } = {}) {
+      let res = await this.dockQuery({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.notice-swipe {
+  height: 40px;
+  line-height: 40px;
+}
+/deep/.van-notice-bar {
+  color: #000;
+  background-color: #fff;
+}
+.info {
+  .btn {
+    border-bottom: 1px solid #ccc;
+    .btnDiv {
+      padding: 10px 0;
+      text-align: center;
+      div {
+        .el-image {
+          width: 30px;
+          height: 30px;
+        }
+        p {
+          font-size: 18px;
+          font-family: 楷体;
+          padding: 5px 0 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/home/exportList.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="exportList">
+    <el-row>
+      <el-col :span="24" class="achieve">
+        <el-col :span="24" class="top">
+          <el-col :span="20" class="topTxt">
+            <van-icon name="label-o" />
+            <span>科技专家</span>
+          </el-col>
+          <el-col :span="4" class="link">
+            <el-link :underline="false">MORE</el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="info">
+          <span v-if="list.length > 0">
+            <el-col :span="12" class="list" v-for="(item, index) in list" :key="index">
+              <div>
+                <el-image :src="item.img_path"></el-image>
+                <p>
+                  <span class="textOver">{{ item.name }}</span>
+                  <span class="textOver">{{ item.addr }}</span>
+                </p>
+              </div>
+              <div class="textOver">职务:{{ item.position || '暂无' }}</div>
+            </el-col>
+          </span>
+          <span v-else>
+            <el-col :span="24" class="noList">
+              暂无数据
+            </el-col>
+          </span>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
+export default {
+  name: 'exportList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+  },
+  methods: {
+    ...expertsuser({ expertQuery: 'query' }),
+    async searchInfo({ skip = 0, limit = 4, ...info } = {}) {
+      const res = await this.expertQuery({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.achieve {
+  padding: 0 10px;
+  .top {
+    height: 30px;
+    line-height: 30px;
+    .topTxt {
+      .van-icon {
+        top: 2px;
+        color: #2c69fe;
+      }
+      span {
+        padding: 0 0 0 5px;
+      }
+    }
+    .link {
+      text-align: center;
+      .el-link {
+        font-weight: bold;
+      }
+    }
+  }
+  .info {
+    .list {
+      font-size: 14px;
+      background: #f6f6f6;
+      margin: 10px;
+      width: 44%;
+      padding: 15px;
+      div:first-child {
+        float: left;
+        width: 100%;
+        .el-image {
+          float: left;
+          width: 50px;
+          height: 50px;
+          border-radius: 90px;
+        }
+        p {
+          float: left;
+          width: 52%;
+          padding: 0 5px;
+          span {
+            display: inline-block;
+            width: 100%;
+          }
+        }
+      }
+      div:last-child {
+        float: left;
+        width: 100%;
+        padding: 5px 0 0 0;
+      }
+    }
+    .noList {
+      text-align: center;
+      padding: 30px 0;
+    }
+  }
+}
+</style>

src/layout/home/swipeList.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="swipeList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+          <van-swipe-item>1</van-swipe-item>
+          <van-swipe-item>2</van-swipe-item>
+          <van-swipe-item>3</van-swipe-item>
+          <van-swipe-item>4</van-swipe-item>
+        </van-swipe>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'swipeList',
+  props: {},
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+}
+.my-swipe .van-swipe-item {
+  color: #fff;
+  font-size: 20px;
+  line-height: 150px;
+  text-align: center;
+  background-color: #39a9ed;
+}
+</style>

src/views/home/index.vue

@@ -6,7 +6,18 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          主页面
+          <el-col :span="24" class="one">
+            <swipeList></swipeList>
+          </el-col>
+          <el-col :span="24" class="two">
+            <clickBtn></clickBtn>
+          </el-col>
+          <el-col :span="24" class="three">
+            <achieveList></achieveList>
+          </el-col>
+          <el-col :span="24" class="four">
+            <exportList></exportList>
+          </el-col>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -20,6 +31,10 @@
 import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
+import swipeList from '@/layout/home/swipeList.vue';
+import clickBtn from '@/layout/home/clickBtn.vue';
+import achieveList from '@/layout/home/achieveList.vue';
+import exportList from '@/layout/home/exportList.vue';
 const jwt = require('jsonwebtoken');
 export default {
   metaInfo() {
@@ -32,6 +47,10 @@ export default {
   components: {
     NavBar,
     footInfo,
+    swipeList, //轮播
+    clickBtn, //功能按钮
+    achieveList, //科技成果
+    exportList, //咨询专家
   },
   data: function() {
     return {
@@ -85,6 +104,23 @@ export default {
 }
 .main {
   min-height: 570px;
+  margin: 0 0 50px 0;
+  .one {
+    // margin: 0 0 15px 0;
+    background-color: #ffffff;
+  }
+  .two {
+    margin: 0 0 15px 0;
+    background-color: #ffffff;
+  }
+  .three {
+    margin: 0 0 15px 0;
+    background-color: #ffffff;
+  }
+  .four {
+    margin: 0 0 15px 0;
+    background-color: #ffffff;
+  }
 }
 .foot {
   position: absolute;