ryx/pages/index/index.vue

<template>
	<view class="">
		<view class="swiper">
			<u-swiper :list="swiper" keyName="url" height="100%" :autoplay="false"></u-swiper>
			<view class="banner">
				<view class="logo">
					<image :src="msg.logo" mode="widthFix"></image>
				</view>
				<view class="bannertitle">
					{{msg.title?msg.title:''}}
				</view>
				<view class="subtitle">
					{{msg.subtitle?msg.subtitle:''}}
				</view>
			</view>
		</view>


		<view class="contentTops">
			<view class="contentTop">
				<view class="iconl">

				</view>
				<view class="contentTop-title">
					日月峡森林康养
				</view>
				<view class="iconr">
					<image src="../../static/senlinicon@2x.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="videobox">
			<view class="list" v-for="(item,index) in video" :key="index">
				<view class="video">
					<!-- 这是视频 -->
					<video :src="item.url" object-fit="fill"></video>
				</view>
				<view class="contentfooter">
					<view class="contentfooter-title">
						{{item.title?item.title:""}}
					</view>
					<view class="contentfooter-subtitle">
						{{item.description?item.description:''}}
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="list">
				<view class="video">
					<video src="https://zhengda.oss-cn-chengdu.aliyuncs.com/riyuexia/Worker%20on%20Tulum%20Beach.mp4" object-fit="fill"></video>
				</view>		
				<view class="contentfooter">
					<view class="contentfooter-title">
						森林瑜伽
					</view>
					<view class="contentfooter-subtitle">
						夏日的森林，雨水充沛了山林，鲜花盛放，溪水潺潺。漫步于自然之中，感受清新的空气，放空心灵，沉醉于山雾之中，感受不同于城市的静谧与轻松
					</view>
				</view>
			</view> -->
		<view class="" style="padding-top: 80rpx;width: 100%;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: [

				],
				msg: null,
				video: null,
				route: ''
			}
		},
		onLoad() {



		},
		onShow() {
			let curPage = getCurrentPages();
			this.route = curPage[curPage.length - 1].route; //获取当前页面的路由
			this.init()
		},
		onShareTimeline() {
			return {
				title: '日月峽',
				path: '/pages/index/index'
			}
		},
		onShareAppMessage(res) {

			return {
				title: '日月峽',
				path: '/pages/index/index'
			}
		},
		methods: {
			init() {
				// uni.showLoading()
				uni.$u.http.post('/api/config/home', {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.setStorageSync("home", res)
					let home = uni.getStorageSync("home")
					this.msg = res.page
					this.video = res.videos
					this.swiper.push(res.page.bg_picture)
					// uni.hideLoading()
				}).catch((err) => {
					console.log(err)
				})

				let phone = uni.getStorageSync("phone")
				let code = uni.getStorageSync("code")
				uni.$u.http.post('/api/config/list', {
					phone,
					code
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					// console.log(res)
					// this.swiper=res[9].value
					uni.setStorageSync("data", res)
				}).catch((err) => {

					console.log(err)
				})
				let obj = {
					page: this.route,
					code: code
				}
				if (code) {
					uni.$u.http.post('/api/visit/add', obj, {
						custom: {
							auth: true
						}
					}).then((res) => {}).catch((err) => {})
				}

			}
		}
	}
</script>

<style lang="less">
	page {
		font-family: PingFang-SC-Heavy, PingFang-SC;
		background: #ffffff;
	}

	.swiper {
		height: 100vh;
		// width: 100%;
		position: relative;
	}

	.banner {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		// background-color: rgba(0,0,0,.5);
		height: 100vh;
		text-align: center;

		.logo {
			// text-align: center;
			padding-top: 160rpx;

			image {
				width: 114rpx;
				height: 106rpx;
			}
		}

		.bannertitle {
			font-size: 64rpx;
			// text-align: center;
			margin: 138rpx 0 37rpx;
			margin-bottom: 30rpx;
			color: #FFFFFF;
		}

		.subtitle {
			font-size: 44rpx;
			color: #FFFFFF;
		}
	}

	.contentTops {
		position: relative;
	}

	.contentTop {
		position: absolute;
		top: -48rpx;
		right: 0;
		width: 93%;
		display: flex;
		align-items: center;
		background-color: #FCFCFC;

		z-index: 9999 !important;
		padding: 56rpx 30rpx 38rpx;
		border-radius: 0px 56rpx 0px 0px;
		box-shadow: 0px 8rpx 14rpx 0px rgba(0, 21, 3, 0.05);

		.iconl {
			border-radius: 50%;
			width: 48rpx;
			height: 48rpx;
			background: linear-gradient(140deg, #2F8F49 0%, rgba(119, 204, 168, 0) 100%);
			opacity: 0.3;
			margin-top: -24rpx;
			margin-right: -10rpx;

		}

		.contentTop-title {
			font-size: 32rpx;

			font-weight: 800;
			color: #333333;
			margin: 0 20rpx 0 -26rpx;
		}

		.iconr {
			image {
				width: 32rpx;
			}
		}
	}

	.videobox {
		// &:first-child{
		margin-top: 92rpx;
		// }
	}

	.list {
		background-color: #FCFCFC;
		// margin-top: 92rpx;
		width: 100%;
		margin-bottom: 40rpx;
		// background-color: #fff;
		border-radius: 0px 0px 16rpx 100rpx;
		;
		box-shadow: 0px 8rpx 14rpx 0px rgba(0, 21, 3, 0.08);

		.video {
			margin: 0 30rpx;
			height: 390rpx;

			// background-color: skyblue;
			video {
				width: 100%;
				height: 100%;
			}
		}

		.contentfooter {
			.contentfooter-title {
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				text-shadow: 0px 8rpx 14rpx rgba(0, 21, 3, 0.05);
				margin: 40rpx 0rpx 20rpx 56rpx;
			}

			.contentfooter-subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0rpx 71rpx 40rpx 56rpx;
			}
		}

	}
</style>