合并

src/components/enterprise.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="supermarket">
+    <el-row>
+      <el-col :span="24" class="top">
+        <top></top>
+      </el-col>
+      <el-col :span="24" class="logo">
+        <div class="w_1200">
+          <logo :info="info"></logo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="menu">
+        <div class="w_1200">
+          <menuInfo></menuInfo>
+        </div>
+      </el-col>
+      <el-col :span="24" class="main">
+        <div class="w_1200">
+          <el-col :span="5" class="fenlei">
+            <fenlei></fenlei>
+          </el-col>
+          <el-col :span="19" class="rightcont">
+            <enterprise :enterpriseList="enterpriseList"></enterprise>
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot :info="info"></foot>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/index/top.vue';
+import logo from '@/layout/index/logo.vue';
+import menuInfo from '@/layout/index/menuInfo.vue';
+import fenlei from '@/layout/supermarket/fenlei.vue';
+import enterprise from '@/layout/supermarket/enterprise.vue';
+import foot from '@/layout/index/foot.vue';
+
+export default {
+  name: 'supermarket',
+  props: {
+    info: null, //站点信息
+    enterpriseList: null,
+  },
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    fenlei, //左侧导航
+    enterprise, //科技企业
+    foot, //底部
+  },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.top {
+  height: 40px;
+  overflow: hidden;
+  background-color: rgba(11, 58, 125, 0.8);
+}
+.logo {
+  height: 200px;
+  overflow: hidden;
+}
+.menu {
+  height: 70px;
+  overflow: hidden;
+}
+.main {
+  min-height: 600px;
+  overflow: hidden;
+  margin: 10px 0;
+}
+.main .fenlei {
+  float: left;
+  width: 240px;
+  height: 600px;
+  margin: 0 10px 10px 0;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.main .rightcont {
+  float: left;
+  width: 950px;
+  min-height: 600px;
+  margin: 0 0 10px 0;
+  overflow: hidden;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/supermarket/colleges.vue

@@ -45,10 +45,9 @@
             <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
-              :current-page="currentPage4"
-              :page-size="100"
+              :current-page="currentPage"
               layout="total, prev, pager, next, jumper"
-              :total="1"
+              :total="total"
             >
             </el-pagination>
           </el-col>
@@ -70,10 +69,8 @@ export default {
     region: '',
     inputs: '',
     title: '高校院所',
-    currentPage1: 5,
-    currentPage2: 5,
-    currentPage3: 5,
-    currentPage4: 4,
+    currentPage: 1,
+    total: 1,
   }),
   created() {},
   computed: {},

src/layout/supermarket/enterprise.vue

@@ -0,0 +1,211 @@
+<template>
+  <div id="enterprise">
+    <el-row>
+      <el-col :span="24" class="search">
+        <el-col :span="12" class="select">
+          <el-select v-model="region" placeholder="请选择搜索条件">
+            <el-option label="全部企业" value="zhengwu"></el-option>
+            <el-option label="国有企业" value="zhongben"></el-option>
+            <el-option label="集体所有制" value="erji"></el-option>
+            <el-option label="私营企业" value="sanji"></el-option>
+            <el-option label="股份制企业" value="zhuanke"></el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="12" class="left">
+          <el-col :span="19" class="input"><el-input v-model="inputs" placeholder="请输入名称"></el-input></el-col>
+          <el-col :span="5" class="btn">
+            <i class="el-icon-search"></i>
+            <span>搜索</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="infoTop">
+          {{ title }}
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li v-for="(item, index) in enterpriseList" :key="index">
+              <el-link :underline="false">
+                <el-col :span="20" class="title textOver">
+                  {{ item.title }}
+                </el-col>
+                <el-col :span="4" class="city textOver"> <i class="el-icon-location"></i>{{ item.city }} </el-col>
+                <el-col :span="24" class="address textOver"> 地址：{{ item.address }} </el-col>
+                <el-col :span="24" class="content">
+                  <span>企业简介：</span>
+                  <p>{{ item.content }}</p>
+                </el-col>
+              </el-link>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'enterprise',
+  props: {
+    enterpriseList: null,
+  },
+  components: {},
+  data: () => ({
+    region: '',
+    inputs: '',
+    title: '科技企业',
+    currentPage: 1,
+    total: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.search {
+  height: 60px;
+  margin: 0 0 10px 0;
+}
+.search .left {
+  background: #fff;
+  height: 60px;
+  padding: 10px;
+  width: 470px;
+  margin: 0 10px 0 0;
+  border-radius: 0px;
+}
+.search .left:last-child {
+  margin: 0;
+}
+.search .btn {
+  height: 40px;
+  line-height: 40px;
+}
+/deep/.search .btn .el-icon-search {
+  font-size: 25px;
+  font-weight: bold;
+  color: blue;
+  padding: 0 10px;
+  float: left;
+  margin: 7px 0 0 0;
+}
+.search .btn span {
+  font-size: 16px;
+  color: #215199;
+  font-weight: bold;
+}
+/deep/.el-input__inner {
+  background: #f3f3f3;
+  border: none;
+  border-radius: 0;
+}
+.search .select {
+  background: #fff;
+  height: 60px;
+  padding: 10px;
+  width: 470px;
+  margin: 0 10px 0 0;
+}
+.el-select {
+  width: 450px;
+}
+.info {
+  min-height: 530px;
+  overflow: hidden;
+  background-color: #fff;
+  padding: 0 20px;
+}
+.infoTop {
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px dashed #ccc;
+  font-size: 22px;
+  color: #215299;
+}
+.list ul li {
+  float: left;
+  width: 100%;
+  height: 149px;
+  padding: 20px 0 0 0;
+  border-bottom: 1px dashed #ccc;
+}
+.list ul li .title {
+  font-size: 16px;
+  color: #215299;
+  height: 36px;
+  line-height: 36px;
+}
+.list ul li .city {
+  text-align: right;
+  font-size: 12px;
+  color: #1b1b1b;
+  height: 36px;
+  line-height: 36px;
+}
+.list ul li .address {
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+  color: #000;
+}
+.list ul li .content span {
+  float: left;
+  width: 80px;
+  text-align: center;
+  height: 60px;
+  line-height: 25px;
+  font-size: 16px;
+  color: #000;
+}
+.list ul li .content p {
+  float: left;
+  width: 830px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+  color: #666;
+  line-height: 30px;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/router/index.js

@@ -9,11 +9,13 @@ const routes = [
     name: 'index',
     component: () => import('../views/index.vue'),
   },
+  // 科技超市
   {
     path: '/supermarket',
     name: 'supermarket',
     component: () => import('../views/supermarket.vue'),
   },
+  // 科技超市-高校院所
   {
     path: '/supermarketColleges',
     name: 'supermarketColleges',
@@ -25,6 +27,12 @@ const routes = [
     name: 'supermarketSientific',
     component: () => import('../views/supermarketScientific.vue'),
   },
+  // 科技超市-科技企业
+  {
+    path: '/supermarketEnterprise',
+    name: 'supermarketEnterprise',
+    component: () => import('../views/supermarketEnterprise.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/supermarketColleges.vue

@@ -33,35 +33,7 @@ export default {
       },
       {
         pic: require('@/assets/fabu.jpg'),
-        title: '长春工业大学',
-        com: 'www.baidu.com',
-        type: '二级本科',
-        address: '吉林省长春市力旺广场B座16楼',
-      },
-      {
-        pic: require('@/assets/fabu.jpg'),
-        title: '长春工业大学',
-        com: 'www.baidu.com',
-        type: '二级本科',
-        address: '吉林省长春市力旺广场B座16楼',
-      },
-      {
-        pic: require('@/assets/fabu.jpg'),
-        title: '长春工业大学',
-        com: 'www.baidu.com',
-        type: '二级本科',
-        address: '吉林省长春市力旺广场B座16楼',
-      },
-      {
-        pic: require('@/assets/fabu.jpg'),
-        title: '长春工业大学',
-        com: 'www.baidu.com',
-        type: '二级本科',
-        address: '吉林省长春市力旺广场B座16楼',
-      },
-      {
-        pic: require('@/assets/fabu.jpg'),
-        title: '长春工业大学',
+        title: '六条数据',
         com: 'www.baidu.com',
         type: '二级本科',
         address: '吉林省长春市力旺广场B座16楼',

src/views/supermarketEnterprise.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="supermarketEnterprise">
+    <enterprise-detail :info="info" :enterpriseList="enterpriseList"></enterprise-detail>
+  </div>
+</template>
+
+<script>
+import enterpriseDetail from '@/components/enterprise.vue';
+export default {
+  name: 'supermarketEnterprise',
+  props: {},
+  components: {
+    enterpriseDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+    enterpriseList: [
+      {
+        title: '长春市福瑞科技有限公司',
+        city: '吉林省 长春市',
+        address: '吉林省长春市朝阳区力旺广场B座16楼1608',
+        content:
+          '长春市福瑞科技有限公司办公室地址位于中国汽车和“新中国电影的摇篮--长春，长春 怡众名城第20幢3单元505室（住所期限至2043年8月19日止），于2013年08月22日在长春市工商行政管理局高新技术产业开发区分局注册成立，注册资本为100万元人民币',
+      },
+      {
+        title: '六条数据',
+        city: '吉林省 长春市',
+        address: '吉林省长春市朝阳区力旺广场B座16楼1608',
+        content:
+          '长春市福瑞科技有限公司办公室地址位于中国汽车和“新中国电影的摇篮--长春，长春 怡众名城第20幢3单元505室（住所期限至2043年8月19日止），于2013年08月22日在长春市工商行政管理局高新技术产业开发区分局注册成立，注册资本为100万元人民币',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>