hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/home-banner-components/member-info.vue

<!--  -->
<template>
  <div class="u-member-info">
    <img class="u-member-info-img" :src="basicSet.shop_logo" alt="">
    <div class="u-member-info-text">Hi,您好！</div>
    <div class="u-member-info-welcome">
      <a href="#" :title="`欢迎来到${basicSet.shop_name}！`">欢迎来到{{basicSet.shop_name}}！</a>
    </div>

    <div class="logged-botton" v-if="basicSet.is_login">已登录</div>
    <div class="no-logged-botton" v-else @click="toUrl('login',{select: '1'})">请登录</div>

    <div class="user-botton">
      <div class="botton-min" @click="toUrl('cart')">购物车</div>
      <div class="botton-min" @click="toUrl('order')">我的订单</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
    };
  },

  activated() {},

  components: {},

  computed: {
    ...mapState(['basicSet'])
  },

  mounted() {},

  methods: {
    toUrl(url, params) {
      if(url == 'login') {
        sessionStorage.setItem("yz_redirect", document.location.href);
      }
      this.$router.push(this.fun.getUrl(url, params));
    },
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.u-member-info{
  padding: 18px;
  width: 100%;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  .u-member-info-img{
    width: 80px;
	  height: 80px;
    border-radius: 50%;
  }
  .u-member-info-text,.u-member-info-welcome{
    color: #707070;
    font-size: 16px;
	  font-weight: bold;
    line-height: 33px;
  }
  .u-member-info-welcome{
    width: 100%;
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    a{
      color: #707070;
    }
  }
  .logged-botton,.no-logged-botton{
    width: 190px;
    height: 30px;
    line-height: 30px;
    background-color: #f4ac05;
    color: #fff;
    border-radius: 5px;
    margin: 10px auto 16px;
    &:hover{
      cursor: pointer;
    }
  }
  .no-logged-botton{
    background-color: #0090ff;
  }
  .user-botton{
    width: 190px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .botton-min{
      width: 90px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      background-color: #fb5c46;
      border-radius: 5px;
      &:hover{
        cursor: pointer;
      }
    }
  }
}
</style>