You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
4.1 KiB
199 lines
4.1 KiB
<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>
|