mall-web-ssr/components/provider/RecommendOriginal.vue

<template>
  <div id="recommends">
    <div class="title-icon">
      <span>店铺推荐</span>
      <img src="/images/original/line.png" alt=""/>
    </div>
    <ul class="recommend-list list-unstyled list-inline">
      <li class="recommend-store" v-for="(store, index) in stores">
        <a :href="'/store/' + store.uuid" target="_blank">
          <div class="img"><img :src="store.logoUrl || '/images/store/common/default.png'" /></div>
          <div class="content">
            <div class="name">
              <span :title="store.storeName">{{store.storeName}}</span>
            </div>
            <!--<div class="subject" style="min-height: 5px;">
            </div>-->
            <!--<div class="description">-->
              <!--<strong>企业介绍</strong>：-->
              <!--<span>{{store.enterprise.description || '暂无企业介绍'}}</span>-->
            <!--</div>-->
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  name: 'recommend-original',
  computed: {
    stores () {
      return this.$store.state.provider.storeCms.recommendStore.data ? this.$store.state.provider.storeCms.recommendStore.data.slice(0, 3) : []
    }
  }
}
</script>
<style scoped lang="scss">
  #recommends {
    margin: 10px 0;
		width: 220px;
    height: 377px;
    background-color: #ffffff;
    border-radius: 5px;
    .title-icon {
      position: relative;
      width: 100%;
      height: 34px;
      line-height: 34px;
      text-align: center;
      span{
        font-size: 14px;
        font-weight: bold;
        color: #333;
      }
      img{
        position: absolute;
        top: 14px;
        left: 25px;
      }
    }
    ul.recommend-list{
      padding: 14px 0px 0 8px;
      width: 220px;
      li.recommend-store{
        margin-bottom: 12px;
        .img {
          margin-right: 8px;
          float: left;
          width: 96px;
          height: 96px;
          border-radius: 2px;
          border: solid 1px #e2e2e2;
          img{
            width: 100%;
            height: 100%;
          }
        }
      .content{
        float: left;
        width: 95px;
        line-height: 96px;
        .name {
          width: 95px;
          font-size: 14px;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span{
            color: #333;
            &:hover{
               color:#2496f1;
             }
            }
          }
        }
      &:last-child{
        margin-bottom: 0;
       }
       &:hover{
          background: #f4f7fd;
        }
      }
    }
	}

</style>