4dkankan_official/src/page/navs/search/item/index.vue

<template>
<div class='item-con'>
  <div class="item-item" :style="{paddingLeft:(split-260)+ 'px'}" v-for="(item,i) in data" :key="i">
    <div class="item">
      <div class="type">
        <vcenter>
          {{item.type}}
        </vcenter>
      </div>
      <div class="title">
        <img :src="require('@/assets/images/index_img_news_03.jpg')" alt="">
        <div class="title-txt">
        <vcenter>
          <div>{{item.title}}</div>
          <div class="sub">{{item.username}}</div>
        </vcenter>
        </div>
      </div>
      <div class="date">
        <vcenter>
           <div>{{item.date}}</div>
        </vcenter>
      </div>
    </div>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import vcenter from '@/components/vcenter'

export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    data: {
      default: () => {
        return []
      },
      type: Array
    },
    split: {
      default: 0,
      type: Number
    }
  },
  components: {vcenter},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
$lHeight: 120px;

.item-con {
  .item-item {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    &:hover{
      background-color: #f6f6f6;
    }
    .item{
      max-width: 1200px;
      height: $lHeight;
      font-size: 0;
      position: relative;
      .type{
        display: inline-block;
        width: 260px;
        height: $lHeight;
        padding-left: 70px;
        color: #f9082a;
        font-size: 18px;
      }
      .title{
        display: inline-block;
        font-size: 18px;
        height: $lHeight;
        img{
          width: 186px;
          height: 121px;
          display: inline-block;
          font-size: 0;
        }
        .title-txt{
          display: inline-block;
          height: $lHeight;
          line-height: 1;
          padding: 40px 0;
          padding-left: 45px;
          .sub{
            color: #414141;
            font-size: 14px;
            margin-top: 8px;
          }
        }
      }
      .date{
        display: inline-block;
        font-size: 18px;
        height: $lHeight;
        position: absolute;
        right: 0;
      }
    }
  }
}

</style>