hbsmUniapp/src/pagesEnterprise/pages/portrait/components/data-card.vue

<template>
  <view class="content">
    <!-- 头部 -->
    <view class="content-item">
      <view class="content-item-top">
        <view class="content-item-top-title">{{data.name}}</view>
        <view class="content-item-top-tip">
          <text>查看更多</text>
          <!-- <image :src="imgUrl"></image> -->
        </view>
      </view>
      <view class="content-date">{{data.date}}</view>
    </view>

    <!-- 底部自定义内容区域 -->
    <view class="content-bottom">
      <view class="content-bottom-item">
        <text class="content-bottom-item-lable">供应商</text>
        <view class="content-bottom-item-value">
          <view class="content-bottom-item-value-info">
            {{data.company_sell_area}}
          </view>
          <text>{{data.company_sell}}</text>
        </view>
      </view>
      <view class="content-bottom-item">
        <text class="content-bottom-item-lable">采购商</text>
        <view class="content-bottom-item-value">
          <view class="content-bottom-item-value-info">
            {{data.company_buy_area}}
          </view>
          <text>{{data.company_buy}}</text>
        </view>
      </view>
      <view class="content-bottom-item">
        <text class="content-bottom-item-lable">起运港</text>
        <text class="content-bottom-item-value">{{data.company_sell_area}}</text>
      </view>
      <view class="content-bottom-item">
        <text class="content-bottom-item-lable">目的港</text>
        <text class="content-bottom-item-value">{{data.company_sell_area}}</text>
      </view>
      <view class="content-bottom-item content-bottom-last">
        <text class="content-bottom-item-lable">产品描述</text>
        <text class="content-bottom-item-value">{{data.remarks}}</text>
      </view>
    </view>

  </view>
</template>

<script setup>
  import {
    defineProps
  } from 'vue'

  // 接收父组件传递的标题
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  })
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20rpx;
    color: #333333;
    font-size: 28rpx;
    font-weight: 600;
    background: #E9F3FF;
    border-radius: 24rpx;
    padding: 30rpx;

    &-item {
      width: 100%;
      border-bottom: 1rpx solid #C6E0FF;
      height: 120rpx;

      &-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-tip {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #666;
          font-weight: 400;

          image {
            width: 24rpx;
            height: 24rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    &-date {
      color: #666;
      font-weight: 400;
      margin: 10rpx 0;
    }

    &-bottom {
      margin-top: 20rpx;
      font-weight: 500;
      font-size: 24rpx;

      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;

        &-lable {
          color: #666;
        }

        &-value {
          display: flex;
          align-items: center;
          justify-content: end;
          width: 80%;

          &-info {
            background: #85BCFF;
            border-radius: 30rpx;
            padding: 0 10rpx;
            color: #0052B5;
            margin-right: 10rpx;
            font-size: 18rpx;
          }
        }


      }

      &-last {
        align-items: flex-start;
        height: 80rpx;

        .content-bottom-item-value {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
</style>