hlm_pl_mall_h5/pages/flexLine.vue

<template>
  <view class="div flex-line" :class="{'border':showBorder}">
    <view class="div left"><slot></slot></view>
    <view class="div right">
      <slot name="right"></slot>
      <text v-if="isLink" class="span iconfont arrow">&#xe650;</text>
    </view>
  </view>
</template>

<script>

export default {
  name: 'flexLine',
  data () {
    return {

    }
  },
  props: {
    isLink: {
      type: Boolean,
      default: false
    },
    showBorder: {
      type: Boolean,
      default: false
    }
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
  .flex-line{display: flex;flex: 1;align-items: center;min-height: 2.5rem;background: #fff;
    &.border{border-bottom:1px dashed #eee}
    .left{display: flex;align-items: center;flex:1;font-size: $subFontSize;color:$formInputColor;font-weight: 700;}
    .right{display: flex;align-items: center;
      font-size: $subFontSize;
      color: $descTextColor;
      .arrow{font-size: $subFontSize;}
    }
  }
</style>