konggang-city-miniprogram/pages/policy/policy_deatil_card.vue

<template>
  <div class="content" :class="{ 'margin-bottom-80': isMar }">
    <div class="card-title">{{ model.title }}</div>
    <div class="item-list">
      <div v-for="(item, idx) in model.item" :key="idx" class="term">
        <div class="term-name">{{ item.name }}:</div>
        <div class="term-value-group">
          <p
            v-for="(value, idx) in item.value"
            :key="idx"
            class="term-value-item"
          >
            {{ value }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["model", "isMar"],
};
</script>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  margin-top: 20rpx;
  padding: 20rpx;
  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  // margin-bottom: 80rpx;
  .card-title {
    padding: 20rpx 20rpx 0rpx 20rpx;
    font-weight: 600;
  }
  .item-list {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;

    .term {
      display: flex;
      padding: 20rpx;
      .term-name {
        font-size: 28rpx;
        width: 30%;
        display: flex;
        margin: 20rpx;
        color: #7f7f7f;
      }
      .term-value-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        .term-value-item {
          margin: 20rpx;
        }
      }
    }
  }
}
.margin-bottom-80 {
  margin-bottom: 80rpx;
}
</style>