<template>
|
<view>
|
<!-- <view class="card" v-if="!showVideo"> -->
|
<view class="card">
|
<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>
|
<up-icon name="play-right-fill" size="34rpx" color="black" class="btn-icon" />
|
</view>
|
|
<view class="custom-btn route-btn" @click="hotRoute">
|
<text class="btn-text">热门路线</text>
|
<up-icon
|
name="/static/common/road-map-fill.png"
|
size="34rpx"
|
color="white"
|
class="btn-icon"
|
/>
|
</view>
|
</view>
|
|
<view class="recommend">
|
<up-icon name="/static/common/earth.png" color="#fff" size="30" />
|
<up-notice-bar
|
:text="noticeList"
|
direction="column"
|
speed="2000"
|
font-size="30rpx"
|
url="/static/common/earth.png"
|
bgColor="transparent"
|
color="#fff"
|
icon=" "
|
/>
|
</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 setup lang="ts">
|
import { ref, computed } from 'vue'
|
|
const showVideo = ref(false)
|
const currentIndex = ref(0)
|
|
const videoList = [
|
'https://geo-app.tos-cn-beijing.volces.com/1.mp4',
|
'https://geo-app.tos-cn-beijing.volces.com/2.mp4',
|
]
|
|
const noticeList = [
|
'欢迎来到场景博物馆',
|
'全新内容已上线，快来探索',
|
'今日推荐：《盗梦空间》背后的故事',
|
]
|
|
const currentVideo = computed(() => videoList[currentIndex.value])
|
|
function startExplore() {
|
// 跳转到具体页面
|
uni.navigateTo({
|
url: '/sub-pages/film-list/film-list',
|
})
|
}
|
|
function onVideoEnd() {
|
currentIndex.value = (currentIndex.value + 1) % videoList.length
|
showVideo.value = false
|
}
|
|
function 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>
|
|
