1

src/assets/icon/iconfont.json

@@ -0,0 +1,58 @@
+{
+  "id": "2492774",
+  "name": "环南湖科创先导区双创服务平台",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "5427067",
+      "name": "机构管理",
+      "font_class": "jigouguanli",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "5703304",
+      "name": "企业 产业",
+      "font_class": "zhongguohangtiantubiaoheji-weizhuanlunkuo-",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "6446292",
+      "name": "卡劵",
+      "font_class": "tianchongxing-",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "10294945",
+      "name": "高企认证",
+      "font_class": "HNTE",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "10471945",
+      "name": "专家",
+      "font_class": "zj",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "14656262",
+      "name": "科技项目",
+      "font_class": "kejixiangmu",
+      "unicode": "e72f",
+      "unicode_decimal": 59183
+    },
+    {
+      "icon_id": "15861741",
+      "name": "成果",
+      "font_class": "chengguo",
+      "unicode": "e7af",
+      "unicode_decimal": 59311
+    }
+  ]
+}

src/main.js

@@ -11,6 +11,7 @@ import '@/plugins/loading';
 import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
+import '@a/icon/iconfont.css';
 Vue.config.productionTip = false;
 new Vue({
   router,

src/views/service/btnList.js

@@ -0,0 +1,30 @@
+export const btnList = [
+  {
+    icon: 'iconkejixiangmu',
+    name: '科技项目评审',
+  },
+  {
+    icon: 'iconHNTE',
+    name: '高企政策服务',
+  },
+  {
+    icon: 'icontianchongxing-',
+    name: '创新劵服务',
+  },
+  {
+    icon: 'iconchengguo',
+    name: '科技成果评价',
+  },
+  {
+    icon: 'iconzj',
+    name: '专家智库',
+  },
+  {
+    icon: 'iconzhongguohangtiantubiaoheji-weizhuanlunkuo-',
+    name: '企业管理',
+  },
+  {
+    icon: 'iconjigouguanli',
+    name: '机构管理',
+  },
+];

src/views/service/index.vue

@@ -1,19 +1,41 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> 科技服务 </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-col :span="6" class="list" v-for="(item, index) in list" :key="index">
+              <el-col :span="24" class="name">
+                <i class="iconfont" :class="item.icon"></i>
+                <p>{{ item.name }}</p>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="common two">
+            <el-col :span="12" class="left"> 第一项 </el-col>
+            <el-col :span="12" class="left"> 第一项 </el-col>
+          </el-col>
+          <el-col :span="24" class="common thr">
+            <el-col :span="12" class="left"> 第一项 </el-col>
+            <el-col :span="12" class="left"> 第一项 </el-col>
+          </el-col>
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import { btnList } from './btnList.js';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function () {
-    return {};
+    return {
+      list: btnList,
+    };
   },
   created() {},
   methods: {},
@@ -33,4 +55,57 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  min-height: 500px;
+  margin: 20px 0 0 0;
+  .one {
+    margin: 0 0 20px 0;
+    .list {
+      width: 13.5%;
+      height: 130px;
+      margin: 0 10px 0px 0;
+      text-align: center;
+      padding: 20px 0;
+      border-radius: 5px;
+      box-shadow: 0 0 5px #409eff;
+      .name {
+        .iconfont {
+          font-size: 40px;
+        }
+        p {
+          font-size: 16px;
+          font-weight: bold;
+          margin: 10px 0 0 0;
+        }
+      }
+    }
+    .list:nth-child(7) {
+      margin: 0 0 0 0;
+    }
+    .list:hover {
+      cursor: pointer;
+      .name {
+        p {
+          color: #6495ed;
+        }
+      }
+    }
+  }
+  .common {
+    margin: 0 0 10px 0;
+    .left {
+      width: 49.5%;
+      height: 500px;
+      overflow: hidden;
+      box-shadow: 0 0 4px #409eff;
+      border-radius: 10px;
+      margin: 0 10px 10px 0;
+      padding: 10px;
+    }
+    .left:nth-child(2n) {
+      margin: 0 0 10px 0;
+    }
+  }
+}
+</style>