web-website/src/layout/supermarket/rightcont.vue

<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="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-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">技术供求</span>
          <el-col :span="12" class="jishuList" v-for="(item, index) in jishuList" :key="index">
            <el-link :underline="false">
              <el-col :span="24" class="title">
                <span class="textOver">{{ item.title }}</span>
              </el-col>
              <el-col :span="15" class="type">
                <span>技术类型：{{ item.type }}</span>
              </el-col>
              <el-col :span="9" class="date">日期：{{ item.date }}</el-col>
              <el-col :span="24" class="yen">价格：￥{{ item.yen }}元/公斤</el-col>
            </el-link>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">产品供求</span>
          <el-col :span="6" class="chanpinList" v-for="(item, index) in chanpinList" :key="index">
            <el-link :underline="false">
              <el-col :span="24" class="images">
                <el-image style="width:220px;height:160px;" :src="item.pic"></el-image>
              </el-col>
              <el-col :span="24" class="title">
                <span class="textOver">{{ item.title }}</span>
              </el-col>
              <el-col :span="15" class="yen"> ￥{{ item.yen }} </el-col>
              <el-col :span="9" class="type">
                {{ item.type }}
              </el-col>
            </el-link>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">服务供求</span>
          <el-col :span="24" class="serviceList" v-for="(item, index) in serviceList" :key="index">
            <el-col :span="10" class="title">
              <span class="textOver">{{ item.title }}</span>
            </el-col>
            <el-col :span="6" class="type"> 服务类型：{{ item.type }} </el-col>
            <el-col :span="5" class="yen"> ￥{{ item.yen }} </el-col>
            <el-col :span="3" class="date">
              {{ item.date }}
            </el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label">人才供求</span>
          人才供求
        </el-tab-pane>
      </el-tabs>
      <el-link class="more" :underline="false">
        <el-image :src="more"></el-image>
      </el-link>
    </el-col>
  </div>
</template>
<script>
export default {
  name: 'rightcont',
  props: {
    jishuList: null,
    chanpinList: null,
    serviceList: null,
  },
  components: {},
  data: () => ({
    input: '',
    inputs: '',
    more: require('@/assets/更多.png'),
  }),
  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;
}
/deep/.el-input__inner {
  background: #f3f3f3;
  border: none;
  border-radius: 0;
}
.info {
  height: 530px;
  background: #fff;
  padding: 0 20px;
  overflow: hidden;
  position: relative;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 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;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  border-right-color: transparent;
  border-left-color: transparent;
}
/deep/.el-tabs__item {
  font-size: 22px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #22529a;
}
.jishuList {
  width: 450px;
  height: 110px;
  margin: 0 5px 5px 0;
  background-color: #f3f3f3;
  padding: 20px;
}
.jishuList:nth-child(2n) {
  margin: 0 0 5px 0;
}
.jishuList .title span {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  color: #6d6d77;
}
.jishuList .type span {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  color: #6d6d77;
}
.jishuList .date {
  font-size: 16px;
  color: #6d6d77;
  text-align: right;
}
.jishuList .yen {
  color: #e91311;
  font-size: 16px;
  margin: 2px 0 0 0;
}
.info .more {
  position: absolute;
  top: 0;
  z-index: 999;
  right: 25px;
  height: 58px;
}
.chanpinList {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 220px;
  height: 220px;
  background-color: #f3f3f3;
}
.chanpinList:nth-child(4n) {
  margin-right: 0;
}
.chanpinList .title span {
  display: inline-block;
  width: 90%;
  font-size: 16px;
  color: #556572;
  padding: 0 10px;
}
.chanpinList .yen {
  padding: 0 0 0 10px;
  color: #e91311;
  font-size: 16px;
}
.chanpinList .type {
  padding: 0 10px 0 0;
  color: #556572;
  font-size: 16px;
  text-align: right;
}
.serviceList {
  background-color: #f3f3f3;
  height: 55px;
  line-height: 55px;
}
.serviceList:nth-child(2n) {
  background-color: #fff;
}
.serviceList .title span {
  display: inline-block;
  padding: 0 10px;
  width: 94%;
  font-size: 16px;
  color: #556572;
}
.serviceList .type {
  font-size: 16px;
  color: #556572;
}
.serviceList .yen {
  font-size: 16px;
  color: #556572;
}
.serviceList .date {
  font-size: 16px;
  color: #556572;
}
</style>