bigdata_WX/pages/cbd/components/photoImage.vue

<template>
  <view class="photo-image">
    <view class="photo-image__tabs">
      <view
        class="photo-image__tab"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        <text class="tab-text">{{ tab }}</text>
      </view>
    </view>
    <view class="photo-image__content">
      <view class="photo-image__grid">
        <view class="photo-image__item" v-for="(item, index) in images" :key="index" @click="handleClick(item)">
          <view class="photo-image__item-img-container">
            <image
              class="photo-image__item-img"
              src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=insects%20on%20a%20white%20surface&image_size=square"
              mode="aspectFill"
            />
          </view>
          <view class="photo-image__item-time">
            2025-12-28 08:00:00
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: ['全部', '稻飞虱', '水龟虫', '蝼蛄', '系统','全部', '稻飞虱', '水龟虫', '蝼蛄', '系统'],
      images: Array(12).fill(0) // 生成12个图片项
    };
  },
  methods: {
    handleClick(item) {
      uni.navigateTo({
        url: '/pages/cbd/devicePhoto?devicePhoto=' + item
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.photo-image {
  width: 100%;
  box-sizing: border-box;

  &__header {
    margin-bottom: 32rpx;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__tabs {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    // 去掉滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .photo-image__content{
    padding: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 30rpx;
  }
  &__tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 16rpx;
    background: #ffffff;
    color: #999999;
    font-family: "Source Han Sans CN VF";
    font-size: 28rpx;
    padding: 10rpx 32rpx;
    border-radius: 8rpx;
    &:last-child {
      margin-right: 0;
    }

    .tab-text {
      margin-right: 8rpx;
    }

    .tab-check {
      color: #4CAF50;
      font-weight: bold;
    }

    &.active {
      color: #0BBC58;
      font-weight: 500;
    }

    .tab-underline {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: #4CAF50;
      border-radius: 2rpx;
    }
  }
  &__item {
    position: relative;
    width: 33.33%;
    padding: 0 10rpx;
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 24rpx;

    &-img-container {
      width: 100%;
      padding-bottom: 100%;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      background-color: #f5f5f5;
      border: 2rpx solid #333;
    }

    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &-time {
      position: absolute;
      bottom: 10rpx;
      margin-top: 12rpx;
      font-size: 22rpx;
      color: #666;
      text-align: center;
    }
  }
}
</style>