xps-web-hhpt-v5/src/views/hos/components/StoryList.vue

<template>
  <div class="content-container">
    <el-row class="title-bar">
      <p class="page-title">六院联创</p>
    </el-row>
    <div class="list-group">
      <div v-for="(item,index) in typeList" :key="index" class="list-item" :class="currentSelect === index ? 'active' : ''" @click="selectItem(index, item)">
        <i class="icon iconfont" :class="item.icon" /> {{ item.title }}
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      typeList: [
        {
          type: 1,
          title: '平安医院',
          icon: 'icon-common_satisfaction'
        },
        {
          type: 2,
          title: '质量医院',
          icon: 'icon-common_quality'
        },
        {
          type: 3,
          title: '健康医院',
          icon: 'icon-common_safety'
        },
        {
          type: 4,
          title: '智慧医院',
          icon: 'icon-common_saving'
        },
        {
          type: 5,
          title: '健康医院',
          icon: 'icon-common_health'
        },
        {
          type: 6,
          title: '节约型医院',
          icon: 'icon-common_saving'
        }
      ],
      currentSelect: 0
    }
  },
  mounted() {
    this.$emit('selectItem', 1, '平安医院')
  },
  methods: {
    selectItem(index, item) {
      this.currentSelect = index
      this.$emit('selectItem', item.type, item.title)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  background: #193142;
  margin: 10px 0 0 10px;
  height: calc(100vh - 85px);

  .title-bar {
    border-left: 6px solid #36556B;
    height: 40px;
    line-height: 40px;
    text-indent: 15px;
    background: #113849;
    .page-title {
      font-size: 16px;
      font-weight: bold;
      color: #FFF;
      margin: 0;
      background: linear-gradient(0deg, #FFFFFF 0%, #98A8B7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .list-group{
    height: calc(100vh - 140px);
    background: #193142;
    .list-item{
      height: 40px;
      line-height: 40px;
      color: #FFF;
      padding: 0 30px;
      font-size: 14px;

      .icon{
        position: relative;
        top: 2px;
      }

      &.active{
        color: #08A6DC;
        position: relative;
        &::after{
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: calc(50% - 3.5px);
          right: -3px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #08A6DC;
          transform:rotate(270deg);
        }
      }
    }
  }
}
</style>