great_distribution/pages/index/index.vue

<template>
	<view class="index-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="index-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="index-content-header">	
				<customNavbar 
				title="全名分享" 
				bgColor="rgba(0,0,0,0)"
				:is-left="false"
				:customNavbarInfo='{}'></customNavbar>
				<u-search :showAction="true" bgColor="#fff" actionText="搜索"></u-search>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- 列表主要内容 开始 -->
			
			<view class="index-content-list">
				<customScrollList 
				ref="customScrollList" 
				@load="load"
				@paging="paging"
				 >
				 <view class="index-content-list-info">
					 <text class="index-content-list-class">剧目</text>
					 <view 
					 class="index-content-list-item"
					 v-for="(item,index) in 10" 
					 :key="index">
						 
						 <view class="index-content-list-content">
							<image 
							class="index-content-list-image"
							src="../../static/login/bgm.png" mode=""></image>
							<view class="index-content-list-tool">
								<text class="index-content-list-title">《伟大转折》</text>
								<text 
								class="index-content-list-but"
								@click="navigateToFun('/pages/publicSharingDetails/index',item)"
								>查看</text>
							</view>
						 </view>
					 </view>
				 </view>
				</customScrollList>
			</view>
			<!-- 列表主要内容 结束 -->
		</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '全名分享',
				statusBarHeight: 0, // 状态栏安全距离
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {
			load(){
				console.log("上拉  加载数据")
				this.$refs.customScrollList.showPullUp = false
				//this.$refs.customScrollList.showEmpty = true
			},
			paging(){
				console.log("下拉  加载数据")
			},
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(url,data) {
				navigateTo(url)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		
		--header-h: 170rpx;
		// background-color: 
		.index-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.index-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		background-color: var(--gd-bgm-color);
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	
	/** 列表主要内容 开始 */
	.index-content-list {
		width: 100%;
		height: calc( 100% - var(--header-h) - var(--status-bar-h) );
	}
	
	.index-content-list-info {
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx 32rpx 150rpx;
		.index-content-list-class {
			font-size: 32rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			color: #2D2D2D;
		}
		.index-content-list-item {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(200,200,200,0.5);
			border-radius: 24rpx;
			overflow: hidden;
			margin-top: 40rpx;
			.index-content-list-content {
				width: 100%;
				box-sizing: border-box;
				.index-content-list-image {
					width: 100%;
					height: 242rpx;
				}
				.index-content-list-tool {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					padding:42rpx 28rpx 46rpx;
					box-sizing: border-box;
					.index-content-list-title {
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: bold;
						color: #363636;
					}
					.index-content-list-but {
						width: 160rpx;
						height: 51rpx;
						background: #ED0000;
						border-radius: 24rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
	/** 列表主要内容 结束  **/
</style>