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

<template>
  <view class="content">
    <view class="supply-box">
      <view class="supply-item-box">
        <view
          v-for="(item, idx) in titleList"
          :key="idx"
          :class="{ active: active === idx }"
          class="supply-item-name"
          @click="active = idx"
        >
          {{ item }}
        </view>
      </view>
      <view class="supply-content">
        <view
          class="supplyCard"
          v-for="(supply, i) in supplyList"
          :key="i"
          @tap="toDetail(i)"
        >
          <view class="image_content">
            <image :src="supply.image" />
          </view>
          <view class="info">
            <view class="title">
              {{ supply.title }}
            </view>
            <view class="time">发布时间：{{ supply.time }}</view>
          </view>
          <view class="state">
            <image src="/static/appeal/waited.svg" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleList: ["我的供需", "我的需求"],
      active: 0,
      supplyList: new Array(5).fill({
        image: "/static/supply/u1779.png",
        title: "移动式空气消毒机",
        time: "2021-08-30 14:50:00",
        state: 1,
      }),
    };
  },
  onLoad() {},
  methods: {
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/supply/supply_detail?id=" + index,
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5%;
  .supply-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    .supply-title {
      width: 100%;
      p {
        background-color: #02a7f0;
        width: 190rpx;
        height: 70rpx;
        color: #ffffff;
        border-radius: 0 40rpx 40rpx 0rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .supply-item-box {
      display: flex;
      justify-content: space-evenly;
      margin: 0 20rpx;
      margin-top: 10rpx;

      .supply-item-name {
        padding-bottom: 10rpx;
        font-size: 27rpx;
      }
      .active {
        font-weight: 600;
        border-bottom: 7rpx solid #02a7f0;
      }
    }
    .supply-content {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      font-size: 25rpx;
      .supplyCard {
        display: flex;
        width: 92%;
        margin: 2% 0;
        padding: 2% 4%;
        height: 5%;
        border-radius: 30rpx;
        box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 0rpx;
        .image_content {
          margin-right: 5%;
          image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background-color: rgb(228, 228, 228);
          }
        }
        .state {
          margin-left: 100rpx;
          image {
            width: 100rpx;
            height: 80rpx;
          }
        }
        .info {
          display: flex;
          flex-flow: column;
          justify-content: space-around;
          .time {
            font-weight: 100;
            font-size: 25rpx;
          }
        }
      }
    }
  }
}
</style>