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

<template>
  <div class="new-sign-module">
    <div class="head">
      <div class="title">新入驻的商家</div>
    </div>
    <ul class="list-unstyled list-inline">
      <li class="new-store" v-for="(store, index) in stores">
        <div class="img">
          <img :src="store.logoUrl || '/images/store/common/default.png'"/>
        </div>
        <div class="content">
          <div class="name"><a target="_blank" :href="'/store/' + store.uuid" :title="store.storeName">{{store.storeName}}</a></div>
          <!--<div class="subject" style="display: none;">-->
            <!--主营：<span>暂无</span>-->
          <!--</div>-->
          <!--<div class="subject">-->
            <!--企业介绍：<span>{{store.enterprise.description || '暂无企业介绍'}}</span>-->
          <!--</div>-->
        </div>
      </li>
    </ul>
    <!--<div class="sign">-->
      <!--<div class="img">-->
        <!--<img src="/images/store/home/shop.png"/>-->
      <!--</div>-->
      <!--<div class="content">-->
        <!--<div class="count">-->
          <!--已入驻商家<span>{{storeCount}}</span>        家-->
        <!--</div>-->
        <!--<div>-->
          <!--<a @click="goStoreApply"><button>立即入驻</button></a>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>

export default {
  name: 'new-store',
  computed: {
    user () {
      return this.$store.state.option.user
    },
    stores () {
      return this.$store.state.provider.storeCms.newStores.data ? this.$store.state.provider.storeCms.newStores.data.content : []
    },
    storeCount () {
      return this.$store.state.provider.storeCms.storeCount.data
    },
    enterprise () {
      return this.user.data.enterprise
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .new-sign-module {
    width: 220px;
    height: 352px;
    background-color: #ffffff;
    border-radius: 5px;
    .head {
      width: 220px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      background-color: #2496f1;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      .title {
        font-size: 16px;
        color: #fff;
      }
    }
    .list-inline {
      padding: 14px 0px 0 8px;
      li{
        margin-bottom: 12px;
        overflow: hidden;
        .img {
          float: left;
          margin-right: 8px;
          width: 48px;
          height: 48px;
          border: 1px solid #dcdcdc;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .content{
          float: left;
          width: 145px;
          line-height: 48px;
          .name {
            width: 145px;
            font-size: 14px;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            a{
              color: #333;
              &:hover{
                  color:#2496f1;
               }
            }
          }
        }
      }
    }
    .sign {
      height: 80px;
      box-shadow: 0px -5px 20px 0px #E3E1DE;
      margin-left: -20px;
      padding-left: 20px;
      padding-top: 5px;

      .img {
        display: inline-block;

        img {
          margin-bottom: 25px;
          vertical-align: middle;
        }
      }

      .content {
        display: inline-block;
        font-size: 0;
        padding-left: 3px;
        height: 70px;

        button {
          background-color: #3D76C6;
          color: white;
          font-size: 14px;
          font-weight: 600;
          border-radius: 4px;
          height: 30px;
          width: 160px;
          border: #3D76C6;
        }

        button:hover {
          transform: scale(1.05);
          background: #5078cb;
        }
      }

      .count {
        font-size: 16px;
        padding: 5px;

        span {
          color: #328CFE;
        }
      }
    }
  }

</style>