minnan/src/pages/article/common/IntroBlock.vue

<template>
  <view :class="[
    'intro-block',
    small ? 'small' : '',
  ]">
    <HomeTitle v-if="title" :title="title" />
    <view class="desc no-indent">
      <view v-if="address" class="navigation">
        <view class="address">
          <text class="iconfont icon-navigation"></text>
          <text>{{ address }}</text>
        </view>
        <view class="link" @click="emit('navTo')">
          去这里 <text class="iconfont icon-go"></text>
        </view>
      </view>
      <view 
        v-for="(it, k) in descItems" 
        :key="k"
        :class="['entry',Boolean(it.value)?'':'hidden']"
      >
        <view class="label">{{ it.label }}</view>
        <view class="value">{{ it.value }}</view>
      </view>
      <slot name="lastDesc" />
    </view>
    <slot />
  </view>
</template>

<script setup lang="ts">
import HomeTitle from '@/pages/parts/HomeTitle.vue';
import type { PropType } from 'vue';

const props = defineProps({	
  title: {
    type: String,
    default: ''
  },
  address: {
    type: String,
    default: ''
  },
  descItems: {
    type: Array as PropType<Array<{ label: string, value: any }>>,
    default: () => []
  },
  small: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([	
  "navTo"	
])
</script>

<style lang="scss">
.intro-block {
  margin-bottom: 38rpx;

  &.small {
    margin-bottom: 0rpx;

    .desc{
      line-height: inherit;
      padding-bottom: 10rpx;
    }
  }

  .entry {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10rpx;

    &.hidden {
      display: none;
    }

    .label {
      color: #666666;
      font-weight: 400;
      font-size: 30rpx;
      flex-shrink: 0;
    }
    .value {
      font-size: 30rpx;
      color: #312520;
      font-weight: 400;
      text-align: right;
      max-width: 500rpx;
      flex-shrink: 1;
    }
  }
  .sub-title{
    margin-left: 20rpx;
    margin-top: 10rpx;
    font-size: 35rpx;
    font-weight: 600;
  }
  .desc{
    padding: 30rpx 0;
  }
  .navigation{
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;
    .address{
      flex:1;
      height: auto;
      background: #F9F6EB;
      border-radius: 28rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
      line-height: 48rpx;
      padding-left: 30rpx;
      display: flex;
      align-items: center;
      text.iconfont{
        display: inline-block;
        font-size: 36rpx;
        margin-right: 8rpx;
      }
    }
    .link{
      margin-left: 20rpx;
      color:#FF8719;
    }
  }
}
</style>