xt_pad/src/pages/product/index.vue

<template>
    <div class="container">
        <div class="userinfo">
            <div class="head">
                <img :src="avatar" alt="">
            </div>
            <span class="name">{{this.$store.getters.user.org.org_short_name}}-{{this.$store.getters.user.user.user_name}}</span>
            <span class="Set"><a href="">设置</a></span>
            <span class="out"><router-link tag="a" to="/">退出</router-link></span>
        </div>
        <div class="logo"><img src="../../assets/product/logo.png" alt=""></div>
        <div class="productList">
            <ul>
                <!-- <li>
                    <img src="../../assets/product/ico_1.png" alt="">
                    <h1 class="title">酷医聚客</h1>
                    <p class="text">病友管家是社会化病人关系管理系统（简称SPRM），是基于移动社交时代全新营销模式下的病人关系管理系统。以病人为中心，通过获取、留存、活跃、洞悉、营销和服务六大手段，帮助品牌建立与消费者坚实有效的关系，
                        提升个性化营销能力，有效挖掘用户价值并推进价值转化。</p>
                    <span class="btn">
                        <button type="button">立即进入（ 医生 ）</button>
                        <button type="button">立即进入（ 护士 ）</button>
                    </span>
                </li> -->
                <li>
                    <img src="../../assets/product/ico_2.png" alt="">
                    <h1 class="title">血透管理</h1>
                    <p class="text">血透管理是基于血透临床应用标准流程研发的血透管理协作平台，用全新的互联网、云技术和友好的用户体验，为血液透析中心提供透前、透中、透后全过程协作支撑，实现无纸化、数字化和规范化的管理，提升血透中心管理水平，改善病人就医体验。</p>
                    <span class="btn">
                        <button type="button" @click="doctorEnterAction">立即进入 </button>
                        <!-- <button type="button">立即进入（ 护士 ）</button> -->
                    </span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Product',
  data () {
    return {}
  },
  computed: {
    avatar: function () {
      var avatar = this.$store.getters.user.user.avatar
      return avatar.length > 0 ? avatar : require('@/assets/product/test.jpg')
    }
  },
  methods: {
    doctorEnterAction: function () {
      this.$store.dispatch('SwitchRoleTypeToDoctor')
      this.$router.push({path: '/main'})
      // this.$router.push({path: "/layout"})
    }
  }
}
</script>

<style style="stylesheet/scss" lang="scss" scoped >
.userinfo {
  background: $main-color;
  @include box-sizing;
  @include display-flex;
  @include align-items-center;
  @include justify-content-end;
  @include text-align;
  padding: 5px 15px;
  font-size: 14px;
  color: $text-color;
  z-index: 999;
  .head {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 6px 0 0;
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: contain;
      float: left;
      border-radius: 50%;
    }
  }
  .Set {
    margin: 0 30px;
  }
  a {
    color: $text-color;
  }
}
.logo {
  @include box-sizing;
  @include display-flex;
  @include align-items-center;
  @include justify-content-center;
  @include text-align;
  width: 100%;
  padding: 0.63rem 0;
  img {
    width: 4rem;
    height: auto;
    display: inline-block;
  }
}
.productList {
  background: $base-color;
  li {
    @include box-sizing;
    @include display-flex;
    @include align-items-center;
    @include justify-content-center;
    @include text-align;
    @include flex-direction;
    background: $white-bg;
    margin: 0 0.8rem;
    border-radius:0.15rem;
    @include box-shadow;
    padding: 0.84rem 0 0.73rem 0;
    &:first-child {
      margin-bottom: 3%;
    }
    img {
      width: 1.78rem;
      height: auto;
      display: block;
    }
    .title {
      font-size:0.37rem;
      color: $pgh-color;
      font-weight: bold;
      margin:0.4rem 0 0.4rem 0;
    }
    .text {
      font-size: 0.28rem;
      color: $pgh-color;
      line-height:0.44rem;
      width: 13.17rem;
      text-align: left;
      padding: 0 0 1.5% 0;
    }
    .btn {
      button {
        height:0.9rem;
        line-height:0.9rem;
        @include text-align;
        color: $text-color;
        border-radius:0.06rem;
        padding: 0 1rem;
        background: $main-color;
        font-size: 0.28rem;
        a {
          color: $text-color;
        }
      }
    }
  }
}
</style>