mall-web-ssr/pages/mobile/user/_uuid.vue

<template>
  <div class="user-content">
    <div class="user-name">
      <img src="/images/component/default.png"/>
      <p>{{userName}}uu用户名</p>
      <span @click="onclick()">全部收藏 <i class="iconfont icon-jiantoushang"></i></span>
      <ul class="supdown" v-if="down">
        <li>店铺关注</li>
        <li>器件收藏</li>
      </ul>
    </div>
    <div class="shop-list">
      <h3>{{1213}}</h3>
      <div class="list-item">
        <div class="item-img">
          <i></i>
          <img src="/images/component/default.png" alt="">
        </div>
        <div class="list-item-phone">
          <p>电话：<span>0755-1234567</span></p>
          <p>传真：<span>0755-1234567</span></p>
          <p>商家介绍： <nuxt-link to="/">点击查看</nuxt-link></p>
          <i class="iconfont icon-shoucang"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'main',
    data () {
      return {
        userName: '',
        down: false
      }
    },
    fetch ({ store, storeName }) {
      return Promise.all([
        store.dispatch('shop/storeInfo', { storeName: storeName })
      ])
    },
    methods: {
      onclick () {
        this.down = !this.down
      }
    }
  }
</script>

<style scoped lang="scss">
  .user-content{
    margin-bottom: .98rem;
    min-height: 10rem;
    background: #e2e4e6;
    .user-name{
      padding:.14rem .38rem .09rem .34rem;
      background:#fff;
      display:flex;
      align-items: center;
      width:100%;
      position:relative;
      .supdown{
        position:absolute;
        top:1rem;
        right:.3rem;
        z-index:1000;
        width:1.7rem;
        background:#616264;
        border-radius:.1rem;
        padding-left:.18rem;
        li{
          font-size: .28rem;
          color:#ffffff;
          height: .32rem;
          line-height: .32rem;
          margin: .2rem 0;
        }
      }
      img{
        display: inline-block;
        width:1.25rem;
        height:1.25rem;
        border:.04rem solid #c5dbfc;
        border-radius: .05rem;
      }
      p{
        font-size:.32rem;
        margin:0;
        margin-left:.25rem;
        flex:1;
      }
      span{
        font-size:.28rem;
        color:#53a0f7;
      }
    }
    .shop-list {
      background:#fff;
      margin-top:.12rem;
      padding-bottom:.28rem;
      h3{
        font-size:.32rem;
        line-height: .8rem;
        margin:0;
        margin-left:.27rem;
        margin-bottom:.14rem;
      }
      .list-item{
        width:6.77rem;
        margin-left:.39rem;
        justify-content: space-around;
        display:inline-flex;
        .item-img{
          width:2.42rem;
          i{
            display:block;
            position:absolute;
            width:.65rem;
            height:.33rem;
            background: url(/imgs/shop/daili@2x.png)no-repeat;
            background-size: .65rem .33rem;
          }
          img{
            width:2.4rem;
            height:1.69rem;
          }
        }
        .list-item-phone{
          width:3.95rem;
          padding-top:.18rem;
          position:relative;
          p{
            font-size:.28rem;
            line-height: .45rem;
            margin:0;
          }
          i{
            display:block;
            position:absolute;
            top:.1rem;
            right:.1rem;
            font-size:.4rem;
            color:#ff7800;
          }
        }
      }
    }
  }
</style>