Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-website

src/components/supermarket.vue

@@ -0,0 +1,127 @@
+<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></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">
+            <rightcont></rightcont>
+          </el-col>
+          <el-col :span="24" class="fabu">
+            <fabu></fabu>
+          </el-col>
+          <el-col :span="24" class="jiaoyi">
+            产品
+          </el-col>
+        </div>
+      </el-col>
+      <el-col :span="24" class="foot">
+        <div class="w_1200">
+          <foot></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 fabu from '@/layout/supermarket/fabu.vue';
+import fenlei from '@/layout/supermarket/fenlei.vue';
+import rightcont from '@/layout/supermarket/rightcont.vue';
+import foot from '@/layout/index/foot.vue';
+
+export default {
+  name: 'supermarket',
+  props: {},
+  components: {
+    top, //头部
+    logo, //logo
+    menuInfo, //导航
+    fenlei, //商务分类
+    rightcont, //商务分类右侧信息列表
+    fabu, //发布信息列表
+    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 {
+  height: 1240px;
+  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;
+  height: 600px;
+  margin: 0 0 10px 0;
+  overflow: hidden;
+}
+.main .fabu {
+  float: left;
+  width: 1200px;
+  height: 390px;
+  background-color: #ffffff;
+  margin: 0 0 10px 0;
+}
+.main .jiaoyi {
+  float: left;
+  width: 1200px;
+  height: 230px;
+  background-color: #ffffff;
+}
+.foot {
+  float: left;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+}
+</style>

src/layout/supermarket/fabu.vue

@@ -0,0 +1,151 @@
+<template>
+  <div id="fabu">
+    <el-col class="fabu">
+      <el-col span="22">最新发布</el-col><el-col :span="1" class="gengduo">更多npmNPM</el-col>
+      <el-col :span="1" class="more"><i class="el-icon-more"></i> </el-col>
+    </el-col>
+    <el-col class="big_content">
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
+      <el-col class="content">
+        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
+      <el-col class="content_1">
+        <el-col class="first_content">最新发布1 <span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+    </el-col>
+    <el-col class="big_content">
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
+      <el-col class="content">
+        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
+      <el-col class="content_1">
+        <el-col class="first_content">最新发布1 <span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+    </el-col>
+    <el-col>
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
+      <el-col class="content">
+        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
+      <el-col class="content_1">
+        <el-col class="first_content">家用空气净化剂<span class="first_span">供</span></el-col>
+        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
+        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fenlei',
+  props: {},
+  components: {},
+  data: () => ({
+    src: require('@/assets/fabu.jpg'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.fabu {
+  width: 1200px;
+  height: 60px;
+  background-color: aqua;
+  font-size: 23px;
+  color: #22529a;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-weight: bold;
+}
+.tupian {
+  padding-left: 20px;
+  float: left;
+}
+.content {
+  text-indent: 20px;
+  height: 100px;
+  width: 475px;
+  color: #6d6d6d;
+  background-color: #f3f3f3;
+}
+.tupian_1 {
+  padding-left: 10px;
+  float: left;
+}
+.content_1 {
+  text-indent: 20px;
+  height: 100px;
+  width: 475px;
+  color: #6d6d6d;
+  background-color: #f3f3f3;
+}
+.first_content {
+  font-size: 14px;
+  height: 45px;
+  line-height: 45px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgb(96, 99, 109);
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.second_content {
+  height: 25px;
+  width: 454px;
+  color: rgb(96, 99, 109);
+  font-size: 14px;
+}
+.third_content {
+  height: 25px;
+  width: 454px;
+  color: rgb(96, 99, 109);
+  font-size: 14px;
+}
+.first_span {
+  width: 14px;
+  height: 45px;
+  padding: 0 0 0 350px;
+}
+
+.second_span {
+  padding: 0 0 0 150px;
+  width: 170px;
+  height: 25px;
+}
+
+.third_span {
+  padding: 0px 0 0 220px;
+  width: 170px;
+  height: 25px;
+}
+.big_content {
+  margin: 0 0 10px 0;
+}
+</style>

src/layout/supermarket/fenlei.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="fenlei">
+    <el-col class="swfl"> <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image><span>商务分类</span> </el-col>
+    <el-col>
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo"
+        @open="handleOpen"
+        @close="handleClose"
+        background-color=" #ffffff"
+        text-color="#215299"
+        active-text-color="#215299"
+      >
+        <el-menu-item-group>
+          <el-menu-item index="1-1" class="fenlei_title">高校院所</el-menu-item>
+          <el-menu-item index="1-2" class="fenlei_title">科研院所</el-menu-item>
+          <el-menu-item index="1-3" class="fenlei_title">科技企业</el-menu-item>
+          <el-menu-item index="1-4" class="fenlei_title">机构团体</el-menu-item>
+          <el-menu-item index="1-5" class="fenlei_title">研发服务</el-menu-item>
+          <el-menu-item index="1-6" class="fenlei_title">技术成果</el-menu-item>
+          <el-menu-item index="1-7" class="fenlei_title">创新产品</el-menu-item>
+          <el-menu-item index="1-8" class="fenlei_title">咨询服务</el-menu-item>
+          <el-menu-item index="1-9" class="fenlei_titlelast">创新人才</el-menu-item>
+        </el-menu-item-group>
+      </el-menu>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fenlei',
+  props: {},
+  components: {},
+  data: () => ({
+    src: require('@/assets/swfl.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swfl {
+  height: 60px;
+  width: 240px;
+  line-height: 60px;
+  background-color: #22529a;
+  text-align: center;
+}
+.swfl span {
+  font-size: 22px;
+  color: #ffffff;
+}
+// .ziti {
+//   color: #ffffff;
+//   margin: 0 0 0 5px;
+//   // line-height: 50px;
+//   font-size: 18px;
+// }
+// .image {
+//   line-height: 50px;
+// }
+.fenlei_title {
+  height: 60px;
+  width: 240px;
+  // background-color: salmon;
+  text-align: center;
+  line-height: 50px;
+  border-bottom: 1px dashed;
+  font-size: 22px;
+}
+.fenlei_titlelast {
+  height: 60px;
+  width: 240px;
+  // background-color: salmon;
+  text-align: center;
+  line-height: 50px;
+  font-size: 22px;
+}
+/deep/.el-menu-item-group__title {
+  padding: 0 0 0 0;
+  line-height: normal;
+  font-size: 12px;
+  color: #ffffff;
+}
+</style>

src/layout/supermarket/rightcont.vue

@@ -0,0 +1,176 @@
+npm<template>
+  <div id="rightcont">
+    <el-col :span="24" class="search">
+      <el-col :span="12" class="left">
+        <el-col :span="19" class="input"><el-input v-model="input" 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 :span="12" class="left">
+        <el-col :span="19" class="input"><el-input v-model="input" 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-tabs type="border-card">
+        <el-tab-pane>
+          <span slot="label">技术供求</span>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+          <el-col :span="12" class="gongqiuList">
+            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
+            <el-col :span="12"><span>技术类型：技术类</span></el-col>
+            <el-col :span="12">日期：2019-07-06</el-col>
+            <el-col :span="24">价格：￥元/公斤</el-col>
+          </el-col>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">我的行程</span>
+          我的行程
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">我的行程</span>
+          我的行程
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label">我的行程</span>
+          我的行程
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </div>
+</template>
+<script>
+export default {
+  name: 'rightcont',
+  props: {},
+  components: {},
+  data: () => ({
+    input: '',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+}
+.info {
+  height: 530px;
+  background: #fff;
+  padding: 20px;
+}
+/deep/.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+.gongqiuList {
+  width: 450px;
+  height: 110px;
+  margin: 0 5px 5px 0;
+  background-color: #f3f3f3;
+  text-indent: 20px;
+}
+
+.gongqiuList:nth-child(2n) {
+  margin: 0;
+}
+/deep/.el-tabs--border-card > .el-tabs__header {
+  background-color: transparent;
+  border-bottom: none;
+}
+/deep/.el-tabs--border-card {
+  //   border: none;
+  box-shadow: none;
+  border: 1px solid #ffffff;
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  border-right-color: transparent;
+  border-left-color: transparent;
+}
+.title {
+  padding-top: 20px;
+}
+.title span {
+  width: 450px;
+  display: block;
+}
+</style>

src/router/index.js

@@ -9,6 +9,11 @@ const routes = [
     name: 'index',
     component: () => import('../views/index.vue'),
   },
+  {
+    path: '/supermarket',
+    name: 'supermarket',
+    component: () => import('../views/supermarket.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/supermarket.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="supermarket">
+    <supermarket-detail></supermarket-detail>
+  </div>
+</template>
+
+<script>
+import supermarketDetail from '@/components/supermarket.vue';
+export default {
+  name: 'supermarket',
+  props: {},
+  components: { supermarketDetail },
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>