mp_exhibitor_miniprog/components/common/u-panel/index.vue

<template>
  <view class="u-panel" :class="{'child-panel': second}">
    <view class="u-panel-head">
      <view class="u-panel-title" v-if="title">
        {{ title }}
        <view class="u-panel-m-title" v-if="mTitle">
          {{mTitle}}
        </view>
      </view>
      <view v-if="link" class="u-panel-link" @tap="onClickLink">
        {{ linkText || '查看更多' }}
        <van-icon class="van-icon" name="arrow"/>
      </view>
    </view>
    <view class="u-panel-body">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UPanel',
  options: {
    styleIsolation: 'shared'
  },
  props: {
    title: String,
    mTitle: String,
    link: String,
    linkText: String,
    second: Boolean,
  },
  computed: {
    style() {
    }
  },
  watch: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onClickLink() {
      this.navigateTo(this.link)
    }
  }
}
</script>
<style lang="scss">
.u-panel {
  padding: 28rpx 28rpx;
  &.child-panel {
    padding: 0;
    .u-panel-title{
     /* &:after{
        display: none;
      }*/
    }
  }
}

.u-panel-head {
  @include display-flex-between;
  margin-bottom: 26rpx;

  .u-panel-title {
    position: relative;
    padding-bottom: 20rpx;
    font-size: $fontSize4;
    line-height: $fontSize5;
    font-weight: 500;
    color: #000000;
    .u-panel-m-title {
      display: inline-block;
      font-size: $fontSize1;
      color: #7D7D7D;
      margin-left: 10rpx;
    }
    &:after {
      @include after;
      left: 12rpx;
      bottom: 0;
      width: 34rpx;
      height: 0;
      border: 3rpx solid $buttonPrimaryColor;
      border-radius: 2rpx;
      margin: auto;
    }
  }

  .u-panel-link {
    font-size: $fontSize1;
    color: #7D7D7D;
    cursor: pointer;
    padding-bottom: 20rpx;
  }
}
</style>