1.產品展示
2.頁面功能
(1)點擊上方按鈕實現頁面跳轉；
(2)點擊相關視頻實現視頻播放。
3.uniapp代碼
<template><view class="container"><!-- 頂部分類文字 --><view class="categories"><navigator class="category-item" url="/pageB/綜合/電視劇">電視劇</navigator><navigator class="category-item" url="/pageB/綜合/電影">電影</navigator><navigator class="category-item" url="/pageB/綜合/音樂">音樂</navigator><navigator class="category-item" url="/pageB/綜合/短視頻">短視頻</navigator></view><!-- 大盒子 --><view class="big-box"><view class="big-box" @click="navigateToMusic1"><image class="big-box-image" src="../../static/視頻/彝海結盟.png" mode="aspectFill"></image><text class="big-box-title">熱門推薦</text></view></view><!-- 小盒子區域 --><view class="small-boxes"><view class="small-box-column"><view class="small-box" @click="navigateToMusic2"><image class="small-box-image"src="http://file.yizu.tv/cms/2023-07-11/4212271/F89DCE78A1A7225FBE82A550FB088697.png?w=250&h=148&s=3 "mode="aspectFill"></image><text class="small-box-title">沖天火</text></view><view class="small-box" @click="navigateToMusic3"><image class="small-box-image"src="http://file.yizu.tv/cms/2023-07-12/4230948/63430DE81E1A6D38ED2C6BC3512B74E2.png?w=250&h=148&s=3 "mode="aspectFill"></image><text class="small-box-title">西行記</text></view><view class="small-box" @click="navigateToMusic6"><image class="small-box-image"src="http://file.yizu.tv/cms/2023-07-10/4212094/8434B1E2151BF086F8D134C8B2DA7071.jpeg?w=250&h=148&s=3"mode="aspectFill"></image><text class="small-box-title">沉默的證人</text></view><view class="small-box" @click="navigateToMusic8"><image class="small-box-image"src="http://file.yizu.tv/cms/2023-07-10/4211381/6B01EA1907E0114EFD1DE44BF4C7AB90.jpg?w=250&h=148&s=3"mode="aspectFill"></image><text class="small-box-title">不二神探</text></view></view><view class="small-box-column"><view class="small-box" @click="navigateToMusic4"><image class="small-box-image"src="http://file.yizu.tv/cms/2021-02-27/153081/A0F29740FB262684AA080A4E0832CEB0.png?w=250&h=148&s=3 "mode="aspectFill"></image><text class="small-box-title">索瑪花開</text></view><view class="small-box" @click="navigateToMusic5"><image class="small-box-image"src="http://file.yizu.tv/cms/2023-07-10/4211342/30571EFD1EE5D14AA20051EFDA0AD7CD.png?w=250&h=148&s=3"mode="aspectFill"></image><text class="small-box-title">荒島余生</text></view><view class="small-box" @click="navigateToMusic7"><image class="small-box-image"src="https://tse4-mm.cn.bing.net/th/id/OIP-C.N7gn-q2Huzn-GY4lWL-Y6gHaFb?w=213&h=182&c=7&r=0&o=5&dpr=1.6&pid=1.7"mode="aspectFill"></image><text class="small-box-title">兩個笨賊</text></view><view class="small-box" @click="navigateToMusic9"><image class="small-box-image"src="https://image11.m1905.cn/uploadfile/2016/0526/20160526013603726494.jpg"mode="aspectFill"></image><text class="small-box-title">支格阿魯</text></view></view></view></view>
</template><script>export default {methods: {handleCategoryClick(category) {console.log('點擊了分類：', category);// 這里可以添加跳轉到對應分類頁面的邏輯 },handleBoxClick(boxName) {console.log('點擊了小盒子：', boxName);// 這里可以添加點擊小盒子后的處理邏輯，比如顯示詳情等 },navigateToMusic1() {uni.navigateTo({url: '/pageA/TV/彝海結盟'})},navigateToMusic2() {uni.navigateTo({url: '/pageA/TV/沖天火'})},navigateToMusic3() {uni.navigateTo({url: '/pageA/TV/西行記'})},navigateToMusic4() {uni.navigateTo({url: '/pageA/TV/索瑪花開'})},navigateToMusic5() {uni.navigateTo({url: '/pageA/TV/荒島求生'})},navigateToMusic6() {uni.navigateTo({url: '/pageA/TV/沉默的證人'})},navigateToMusic7() {uni.navigateTo({url: '/pageA/TV/兩個笨賊'})},navigateToMusic8() {uni.navigateTo({url: '/pageA/TV/不二神探'})},navigateToMusic9() {uni.navigateTo({url: '/pageA/TV/支格阿魯'})}}}
</script><style>/* 通用樣式 */.container {display: flex;flex-direction: column;align-items: center;padding: 10px;width: 100%;box-sizing: border-box;}/* 分類樣式 */.categories {display: flex;justify-content: space-around;width: 100%;max-width: 600px;/* 可根據需要調整 */margin-bottom: 20px;}.category-item {padding: 10px 20px;border: 1px solid #55aaff;border-radius: 0px;cursor: pointer;text-align: center;background-color: #f4f4f4;transition: background-color 0.3s ease;}.category-item:hover,.category-item:active {background-color: #f4f4f4;}.big-box {position: relative;width: 100%;max-width: 360px;/* 將最大寬度增加到450px */aspect-ratio: 16 / 9;/* 保持寬高比 */border-radius: 10px;overflow: hidden;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin-bottom: 15px;/* 與其他元素之間的空格 */}.big-box-image {width: 100%;/* height: 100%; */object-fit: cover;}.big-box-title {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 5px 10px;border-radius: 5px;font-size: 18px;font-weight: bold;}/* 小盒子區域樣式 */.small-boxes {display: flex;flex-wrap: wrap;/* 允許換行，但在這個例子中我們盡量不讓它換行 */justify-content: space-between;/* 使用space-between而不是space-around，以在兩端提供更大的空間（如果需要的話） */width: 100%;max-width: 600px;/* 可根據需要調整，確保兩個列可以在單行內顯示 */padding: 0 5px;/* 如果需要，在容器兩側添加一些內邊距 */}.small-box-column {flex: 0 0 calc(50% - 10px);/* 使用calc來計算寬度，減去兩邊的margin */margin: 0 5px;/* 在列之間添加間距 */display: flex;flex-direction: column;gap: 7px;/* 列內小盒子之間的間距 */}/* 其他樣式保持不變 */.small-box {position: relative;width: 100%;aspect-ratio: 16 / 9;/* 可根據需要調整寬高比 */border-radius: 10px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);cursor: pointer;}.small-box-image {width: 100%;height: 100%;object-fit: cover;}.small-box-title {position: absolute;bottom: 10px;left: 10px;color: #fff;background-color: rgba(0, 0, 0, 0.5);padding: 2px 5px;border-radius: 4px;font-size: 14px;}
</style>3.注意事項
(1)需要根據自己的需求替換URL、圖片等；
(2)這里只給出項目的一部分代碼，功能可能受到限制，后續會上傳其他代碼；
(3)如果有什么uniapp上的問題，歡迎評論區留言。
