studytour-front/components/home/pictureLiveView.vue

<template>
  <view class="live">
    <view class="flex live-header">
      <view>图片直播</view>
      <button class="flex btn" @click="showAll">
        <view>查看全部</view>
        <image class="img" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
      </button>
    </view>
		<!-- todo: auto scroll -->
    <!-- <view class="live-content">
      <view class="live-item" v-for="item in liveList" :key="item.id">
        <image class="live-item-bg" :src="item.image" mode="aspectFill"></image>
        <view class="live-item-info">
          <view class="text-ellipsis live-item-info-title">{{ item.title }}</view>
          <view class="live-item-info-time">{{ item.time }}</view>
        </view>
      </view>
    </view> -->
    <swiper 
      class="swiper" 
      :current="current"
      :autoplay="true"
      :display-multiple-items="3.2"
    >
      <swiper-item v-for="item in liveList" :key="item.id" style="display: inline-block;">
        <view class="swiper-item">
          <view class="swiper-item-content" @click="jumpToLive(item.id)">
						<image class="live-item-bg" :src="item.image" mode="aspectFill"></image>
						<view class="live-item-info">
							<view class="text-ellipsis live-item-info-title">{{ item.title }}</view>
							<view class="live-item-info-time">{{ item.time }}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
  </view>
</template>

<script>
  export default {
		data() {
			return {
				liveList: [],
			}
		},
		created() {
      this.getData()
    },
    methods: {
      getData() {

        // todo: fetch
        
        this.liveList = [
          {
            id: '001',
            image: '/static/image/temp-15.png',
            title: '苕溪露营漂流',
            time: '2025-04-18',
          },
          {
            id: '002',
            image: '/static/image/temp-16.png',
            title: '科技奇遇记',
            time: '2025-04-18',
          },
          {
            id: '003',
            image: '/static/image/temp-17.png',
            title: '满陇桂雨',
            time: '2025-04-18',
          },
          {
            id: '004',
            image: '/static/image/temp-18.png',
            title: '跟着皇帝游江南',
            time: '2025-04-18',
          },
          {
            id: '005',
            image: '/static/image/temp-15.png',
            title: '苕溪露营漂流',
            time: '2025-04-18',
          },
          {
            id: '006',
            image: '/static/image/temp-16.png',
            title: '科技奇遇记',
            time: '2025-04-18',
          },
        ]

      },
			jumpToLive(id) {
				// todo
			},
			showAll() {
				// todo
			}
    },
  }
</script>

<style scoped lang="scss">

	.live {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
    background-image: linear-gradient(164deg,#DAF3FF, #FBFEFF , #FBFEFF);
		border: 2rpx solid #FFFFFF;
		border-radius: 32rpx;
		
		&-header {
			justify-content: space-between;
			font-size: 36rpx;
			font-weight: 500;
			color: #191919;

			.btn {
				column-gap: 4rpx;
				font-size: 24rpx;
				color: #8B8B8B;

				.img {
					width: 32rpx;
					height: auto;
				}
			}
		}
		
		&-content {
			margin-top: 16rpx;
			white-space: nowrap;
			width: 100%;
			overflow-x: auto;
			font-size: 0;
		}

		&-item {
			flex: none;
			display: inline-block;
			width: 180rpx;
			height: 240rpx;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;

			& + & {
				margin-left: 16rpx;
			}

			&-bg {
				width: 100%;
				height: 100%;
			}

			&-info {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				padding: 8rpx 12rpx;
				box-sizing: border-box;

				&-title {
					font-size: 26rpx;
					font-weight: 600;
					color: #FFFFFF;
				}

				&-time {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.swiper {
		width: 100%;
		height: 240rpx;

		&-item {
			width: 180rpx;
			height: 240rpx;
			
			&-content {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				overflow: hidden;
			}
		}
	}
</style>