<template>
  <div id="demand">
    <el-col :span="24">
      <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 :span="24" class="info">
        <el-col :span="24" v-for="(item, index) in demandlist" :key="index" class="list">
          <span></span>
          <span class="textOver">{{ item.title }}</span>
          <span>{{ item.date }}</span>
        </el-col>
      </el-col>
      <el-col :span="24" class="anniu">
        <el-button type="primary" v-if="user.type == 3" round @click="$router.push({ path: '/demand/demand' })"> 我要发布</el-button></el-col
      >
    </el-col>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'demand',
  props: {
    demandlist: null,
  },
  components: {},
  data: () => ({
    src: require('@/assets/exchange.png'),
  }),
  created() {},
  computed: { ...mapState(['user']) },
  methods: {},
};
</script>

<style lang="less" scoped>
.swfl {
  float: left;
  width: 100%;
  height: 60px;
  overflow: hidden;
  line-height: 60px;
  text-align: center;
  background-color: #054982;
}

.swfl span {
  font-size: 22px;
  color: #ffffff;
}
.info {
  min-height: 590px;
  border-bottom: 1px solid #ccc;
}

.list {
  padding: 5px 10px 5px 10px;

  span:first-child {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    margin: 0px 10px 7px 0px;
  }
  span:nth-child(2) {
    display: inline-block;
    font-size: 16px;
    color: #555555;
    font-family: '微软雅黑';
    width: 64%;
    margin: 0 30px 0 0;
  }

  .textOver:hover {
    color: #215299;
  }
  span:last-child {
    display: inline-block;
    width: 90px;
    font-size: 16px;
    color: #a8abb7;
    font-family: '微软雅黑';
    text-align: right;
  }
}

.anniu {
  text-align: center;
  padding: 20px 0;
}
</style>
