<template>
|
<view>
|
<view class="card" v-if="!showVideo">
|
<view class="main-title">每一帧画面，都藏着一个等待探索的世界</view>
|
<view class="sub-title">
|
从经典场景到幕后故事，开启你的专属影视朝圣之旅
|
</view>
|
|
<view class="btn-group">
|
<view class="custom-btn explore-btn" @click="startExplore">
|
<text class="btn-text">开始探索</text>
|
<u-icon name="play-right-fill" size="34" color="black" class="btn-icon" />
|
</view>
|
|
<view class="custom-btn route-btn" @click="hotRoute">
|
<text class="btn-text">热门路线</text>
|
<u-icon name="/static/common/road-map-fill.png" size="34" color="white" class="btn-icon" />
|
</view>
|
</view>
|
|
<view class="recommend">
|
<u-icon name="/static/common/earth.png" color="#fff" size="30" />
|
<!-- <text class="recommend-text">今日推荐：《指环王》新西兰取景地</text> -->
|
<u-notice-bar :text="noticeList" direction="column" speed="2000" font-size="28"
|
url="/static/common/earth.png" bgColor="transparent" color="#fff" icon=" "></u-notice-bar>
|
</view>
|
</view>
|
|
|
<!-- 视频播放区域 -->
|
<view v-else class="video-wrapper">
|
<video :src="currentVideo" controls autoplay @ended="onVideoEnd"
|
style="width: 100%; height: 400rpx;"></video>
|
</view>
|
</view>
|
|
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
showVideo: false,
|
currentIndex: 0,
|
videoList: [
|
'https://geo-app.tos-cn-beijing.volces.com/1.mp4',
|
'https://geo-app.tos-cn-beijing.volces.com/2.mp4',
|
],
|
noticeList: [
|
'欢迎来到场景博物馆',
|
'全新内容已上线，快来探索',
|
'今日推荐：《盗梦空间》背后的故事'
|
]
|
}
|
},
|
computed: {
|
currentVideo() {
|
return this.videoList[this.currentIndex];
|
}
|
},
|
methods: {
|
startExplore() {
|
// this.showVideo = true;
|
// 改成跳转到具体页面
|
uni.navigateTo({
|
url: '/sub-pages/film-list/film-list'
|
});
|
},
|
onVideoEnd() {
|
// 切换下一个视频
|
this.currentIndex = (this.currentIndex + 1) % this.videoList.length;
|
this.showVideo = false;
|
},
|
hotRoute() {
|
uni.showToast({
|
title: '跳转热门路线',
|
icon: 'none'
|
});
|
}
|
}
|
}
|
</script>
|
|
|
<style scoped>
|
.card {
|
padding: 50rpx 40rpx;
|
border-radius: 24rpx;
|
background: linear-gradient(135deg, #ff7e5f, #9e2cf8);
|
color: #fff;
|
}
|
|
.main-title {
|
font-size: 60rpx;
|
font-weight: bold;
|
line-height: 1.6;
|
margin-bottom: 20rpx;
|
letter-spacing: 4rpx;
|
text-align: center;
|
}
|
|
.sub-title {
|
font-size: 32rpx;
|
opacity: 0.9;
|
line-height: 1.4;
|
margin-bottom: 40rpx;
|
text-align: center;
|
letter-spacing: 3rpx;
|
}
|
|
.btn-group {
|
display: flex;
|
justify-content: space-between;
|
gap: 20rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.explore-btn {
|
background-color: #fff !important;
|
color: #000 !important;
|
flex: 1;
|
}
|
|
.route-btn {
|
border: 1px solid #fff;
|
background-color: transparent;
|
color: #fff;
|
flex: 1;
|
}
|
|
.recommend {
|
display: flex;
|
align-items: center;
|
background-color: rgba(30, 30, 30, 0.8);
|
padding: 10rpx;
|
padding-left: 50rpx;
|
border-radius: 100rpx;
|
}
|
|
.recommend-text {
|
margin-left: 12rpx;
|
font-size: 24rpx;
|
}
|
</style>
|
<style scoped>
|
.btn-group {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 30rpx;
|
}
|
|
.custom-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 16rpx 32rpx;
|
border-radius: 20rpx;
|
font-size: 28rpx;
|
font-weight: bold;
|
height: 60rpx;
|
}
|
|
.explore-btn {
|
background-color: #3c9cff;
|
color: #fff;
|
border: 2rpx solid #fff;
|
}
|
|
.route-btn {
|
color: #fff;
|
border: 2rpx solid #fff;
|
}
|
|
.btn-icon {
|
margin-left: 20rpx;
|
}
|
|
.btn-text {
|
line-height: 1;
|
margin-left: 20rpx;
|
margin-right: 20rpx;
|
}
|
</style>
|
