/*design*/
<template>
  <div class="design">
    <div class="block today">
      <div class="title">
        <h3><img src="../../../assets/img/today.png" />今日需求</h3>
        <div class="pagination">
          <i class="el-icon-arrow-left"></i>
          <span>1/4</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="content">
        <div class="list" v-for="(item, index) in todayList" :key="index">
          <div class="image">
            <img :src="item.url" />
          </div>
          <div class="desc">
            <p class="project-name">{{ item.title }}</p>
            <p>{{ item.name }}</p>
            <p>{{ formatTime(item.time - (index + 1) * 60 * 1000) }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="block designer">
      <div class="title">
        <h3><img src="../../../assets/img/designer.png" />设计师排行榜</h3>
      </div>
      <div class="content">
        <div class="list" v-for="(item, index) in designerList" :key="index">
          <i
            :class="[
              index == 0
                ? 'first'
                : index == 1
                ? 'second'
                : index == 2
                ? 'third'
                : index == 3
                ? 'fourth'
                : '',
            ]"
            >{{ index + 1 }}</i
          >
          <div class="desc">
            <p>{{ item.name }}</p>
            <p class="intergal">
              <img src="../../../assets/img/intergal.png" />{{ item.number }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
export default {
  name: 'Design',
  components: {},
  data() {
    return {
      todayList: [
        {
          url: require('../../../assets/mode/car.jpg'),
          title: '长安汽车家用汽车设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/frame.jpg'),
          title: '前沿动力货运汽车设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/plane.jpg'),
          title: '重庆诚智鹏战机模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/mode.jpg'),
          title: '渝美压铸厂压铸模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/tank.jpg'),
          title: '坦克模型俱乐部模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/tyre.jpg'),
          title: '裕丰轮胎轮胎模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/mode.jpg'),
          title: '前沿动力压铸模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
        {
          url: require('../../../assets/mode/mode.jpg'),
          title: '两江压铸厂压铸模型设计需求',
          name: '重庆小犀智能科技有限公司',
          time: new Date().getTime(),
        },
      ],
      designerList: [
        { name: '小蜗牛', number: '7495' },
        { name: '奔跑的蚂蚱', number: '7463' },
        { name: '贪了一杯酒', number: '7458' },
        { name: '烛魔大师', number: '7424' },
        { name: '轮胎高手', number: '7397' },
        { name: '大力霸王', number: '7208' },
        { name: '情愫未了', number: '7054' },
      ],
    }
  },
  created() {},
  methods: {
    formatTime(time) {
      return parseTime(time, '{y}.{m}.{d} {h}:{i}')
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.design {
  // @include w_h(100%, 100%);
  @include w_h(100%);
  @include flex(space-between, stretch);
  padding: 15px 60px;
  background: #000;
  .block {
    padding: 20px;
    background: $color_3;
    .title {
      @include flex();
      h3 {
        @include flex();
        font-size: 18px;
        color: #ee6a74;
        font-weight: 600;
        line-height: 50px;
        letter-spacing: 2px;
        img {
          @include w_h(18px);
          margin-right: 8px;
        }
      }
      .pagination {
        @include w_h(100px);
        @include flex();
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: $color_b;
        i {
          @include w_h(20px, 20px);
          line-height: 20px;
          border-radius: 2px;
          transition: all 0.3s;
          &:hover {
            cursor: pointer;
            background: $color_6;
            color: $color_f;
          }
        }
      }
    }
  }
  .today {
    @include w_h(calc(100% - 230px));
    .content {
      @include w_h(100%);
      @include flex(flex-start);
      flex-wrap: wrap;
      .list {
        @include w_h(50%);
        @include flex(flex-start, center, wrap);
        padding: 29.5px 0;
        border-bottom: 1px solid $color_4;
        .image {
          @include w_h(120px, 80px);
          @include flex(center);
          background: $color_f;
          border: 2px solid $color_f;
          overflow: hidden;
          transition: all 0.3s;
          img {
            @include w_h(100%);
            transform: scale(0.8);
            transition: all 0.3s;
          }
        }
        .desc {
          @include w_h(60%);
          padding: 0 15px;
          p {
            @include w_h(100%);
            transition: all 0.3s;
            font-size: 12px;
            line-height: 28px;
            color: $color_9;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .project-name {
            @include w_h(100%);
            font-size: 14px;
            line-height: 34px;
            color: $color_b;
          }
        }
        &:hover {
          cursor: pointer;
          p,
          .project-name {
            color: #ee6a74;
          }
          .image {
            border: 2px solid #ee6a74;
            img {
              transform: scale(1);
            }
          }
        }
      }
    }
  }
  .designer {
    @include w_h(220px);
    .title {
      border-bottom: 1px solid $color_4;
    }
    .content {
      @include w_h();
      .list {
        @include w_h();
        @include flex(flex-start);
        padding: 10px 0;
        border-bottom: 1px solid $color_4;
        i {
          @include w_h(10%);
          font-size: 24px;
          font-weight: 700;
          color: #5f6061;
          transition: all 0.3s;
          &.first {
            color: #ff4b47;
          }
          &.second {
            color: #ff733c;
          }
          &.third {
            color: #ff9d35;
          }
          &.fourth {
            color: #78787a;
          }
        }
        .desc {
          @include w_h(90%);
          padding: 0 15px;
          p {
            @include w_h();
            font-size: 12px;
            line-height: 32px; 
            color: $color_9;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            transition: all 0.3s;
          }
          .intergal {
            @include flex(flex-start);
            img {
              @include w_h(14px);
              margin-right: 10px;
              transition: all 0.3s;
            }
          }
        }
        &:hover {
          cursor: pointer;
          i,
          p {
            color: #ee6a74;
          }
          img {
            filter: hue-rotate(-35deg);
          }
        }
      }
    }
  }
}
</style>
