pan-mini/pages/home/home.nvue

<template>
  <smart-tabs
        :tabs="tabs" 
        :initial-index="current"
        :activeColor="'#19c324'"
        @change="handleTabChange"
      />
  <image-grid-simple 
      :imageList="list"
      :columns="2"
      :height="'80vh'"
      @image-click="handlerClick"
    >
      
      <template #empty>
        <view class="custom-empty">
          <image src="/static/images/no-videos.png" />
          <text>没有找到视频内容</text>
        </view>
      </template>
    </image-grid-simple>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        tabs: [
          { label: '热门', name: 'hot', badge: 0 },
          { label: '最新', name: 'new', badge: 0 },
        ],
        currentPage:1,
        videoConfig:{
          "columns":2
        },
        list:[
          {
            
            "id":1,
            "title":"1",
            "src":"../../static/images/default.png"
          },
          {
            "id":2,
            "title":2,
            "src":"../../static/images/default.png"
          },
          {
            "id":3,
            "title":3,
            "src":"../../static/images/default.png"
          },
          {
            "id":9,
            "title":9,
            "src":"../../static/images/default.png"
          },
          {
            "id":4,
            "title":4,
            "src":"../../static/images/default.png"
          },
          {
            "id":5,
            "title":5,
            "src":"../../static/images/default.png"
          },
          {
            "id":6,
            "title":6,
            "src":"../../static/images/default.png"
          },
          {
            "id":7,
            "title":7,
            "src":"../../static/images/default.png"
          },
          {
            "id":8,
            "title":8,
            "src":"../../static/images/default.png"
          }
        ],
      }
    },
    onLoad() {
    },
    methods: {
      handleTabChange(idx) {
        this.current = idx;
      },
      handlerClick(item) {
        console.log("video click",item)
        // 请求详情
        uni.navigateTo({
          url: '/pages/detail/detail?id='+item.id, // 支持路径传参
          success: () => console.log('跳转成功'),
          fail: err => console.error('跳转失败', err)
        });
      }
    }
  }
</script>

<style lang="scss">
  
.sview{
  width: 100%;
  height: 800rpx;
  background-color: #19c324;
}
.tab-row {
  width: 100%;
}

.tab-item {
  height: 70rpx;
  width: 80rpx;
  font-size: 30rpx;
  place-items: center;
  align-self: center;
  justify-content: center;
  color: #000;;
  border-bottom: 0px solid #19c324;
  &.active {
    color: #19c324;
    font-weight: bold;
    // border-bottom: 2px solid #19c324;
  }
}

.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
}

// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

.hot-section {
  height: 500rpx;
}

.video-container {
  padding: 20rpx;
  height:100dvh;
  background-color: #f5f5f5;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 20rpx; /* 间距 */
}

.video-item {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-player {
  width: 100%;
  /* 16:9 宽高比 */
  aspect-ratio: 16/9;
  background-color: #000;
  border-radius: 16rpx 16rpx 0 0;
}

.video-info {
  padding: 20rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制两行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-meta {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.video-author {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-views {
  flex-shrink: 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .video-grid {
    gap: 10rpx;
  }
  
  .video-info {
    padding: 10rpx;
  }
  
  .video-title {
    font-size: 26rpx;
  }
  
  .video-meta {
    font-size: 22rpx;
  }
}

/* 平板和桌面布局 */
@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr); /* 四列布局 */
  }
}

</style>