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

<template>

<div class='item-con' :style="{maxHeight: data.length>0?height:'0px'}">
  <div @click="goto(item.webSite)" class="item-item" :style="{paddingLeft:(split-260)+ 'px'}" v-for="(item,i) in data" :key="i">
    <div class="item">
      <div class="type">
        <vcenter>
          <span>{{typeArr[item['sceneType']]}}</span>
        </vcenter>
      </div>
      <div class="title">
        <img :src="item.homepic" alt="">
        <div class="title-txt">
        <vcenter>
          <div v-html="maskTitle(item.sceneName)"></div>
          <div class="sub">{{item.nickName}}</div>
        </vcenter>
        </div>
      </div>
      <div class="date">
        <vcenter>
           <div>{{format(item.createTime.time)}}</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
    },
    searchTxt: {
      default: '',
      type: String
    }
  },
  components: {vcenter},
  data () {
    let typeArr = ['其他', '博物馆', '房地产', '其他', '餐饮', '家居']
    // 这里存放数据
    return {
      typeArr
    }
  },
  // 监听属性 类似于data概念
  computed: {
    height () {
      return window.innerHeight - (68 + 145 + 145 - 27) + 'px'
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    format (time) {
      let date = new Date(time)
      return date.format('yyyy-MM-dd')
    },
    goto (url) {
      window.open(url.replace('http://', 'https://'), '_blank')
    },
    maskTitle (name) {
      let html = ''
      var arr = name.split(this.searchTxt)
      html = arr.join('<span style="background:#feced4;">' + this.searchTxt + '</span>')
      return html
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

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

  }
}
</script>

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

.item-con {
  overflow-y: scroll;
  transition: max-height 0.6s ease;
  background: #fff;
  .item-item {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    color: #414141;
    cursor: pointer;
    &: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: 62px;
        color: #f9082a;
        font-size: 18px;
        span{
          color: #414141;
        }
      }
      .title{
        border-left: 1px solid #e5e5e5;
        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>