konggang-city-miniprogram/pages/supply/supply_detail.vue

<template>
  <view class="content">
    <view class="title">
      {{ title }}
    </view>
    <view class="details">
      <view class="view">
        <span class="label">详情：</span>
        <span>{{ details }}</span>
      </view>
      <view class="view">
        <span class="label">类型：</span>
        <span>{{ type }}</span>
      </view>
      <view class="view">
        <span class="label">图片：</span>
        <view class="flex">
          <image :src="image" />
          <image :src="image" />
          <image :src="image" />
        </view>
      </view>
      <view class="view">
        <span class="label">发布时间：</span>
        <span>{{ time }}</span>
      </view>
    </view>
    <view class="info">
      <view class="title">企业信息</view>
      <view class="view">
        <span class="label">企业名称：</span>
        <span>{{ info.name }}</span>
      </view>
      <view class="view">
        <span class="label">统一社会信用代码：</span>
        <span>{{ info.code }}</span>
      </view>
      <view class="view">
        <span class="label">联系电话：</span>
        <span>{{ info.tel }}</span>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      title: "视频监控产品及解决方案",
      details: "视频监控产品及解决方案，寻求合作企业",
      type: "需求",
      image: "/static/supply/u1779.png",
      time: "2021-09-07 14:25:36",
      info: {
        name: "双盈电子科技有限公司",
        code: "914403000758402311",
        tel: "18109523468",
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.flex,
.view {
  display: flex;
}
.content {
  font-size: 30rpx;
  .title {
    margin: 4% 5%;
  }
  .details {
    font-size: 25rpx;
    width: 90%;
    margin: 0 2%;
    padding: 2% 3%;
    border-radius: 50rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
    image {
      width: 180rpx;
      height: 150rpx;
      border-radius: 30rpx;
      margin: 0 2%;
    }
    .view {
      margin: 5% 0;
    }
    .label {
      display: inline-block;
      width: 150rpx;
      vertical-align: middle;
      font-weight: 100;
    }
  }
  .info {
    font-size: 25rpx;
    width: 90%;
    margin: 4% 2%;
    padding: 2% 3%;
    border-radius: 40rpx;
    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
    .title{
        margin: 4% 0;
        font-size: 30rpx;
    }
    .view {
      display: flex;
      align-items: center;
      margin: 5% 0;
    }
    .label {
      display: inline-block;
      width: 120rpx;
      vertical-align: middle;
      font-weight: 100;
      margin-right: 100rpx;
    }
  }
}
</style>