uav-uniapp-demo-24-8-18/pages/home/home.vue

<!-- 首页 -->
<template>
	<view class="home bx">

		<!-- 首页顶部 -->
		<view class="home-top content">
			<view class="menu-icon">
				<!-- <image src="@/static/home/menu.png" mode="aspectFit"></image> -->
			</view>
			<view class="logo">
				<!-- TikTok Shop -->
				olx Shop
			</view>
			<view class="sign">
				<image @click="showLanguage = true" src="../../static/home/language.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="home-title content">
			<view>{{ $t('page.home.product') }}</view>
		</view>

		<view class="swiper">
			<swiper class="swiper-box" :current="swiperDotIndex" autoplay circular>
				<swiper-item v-for="(item,index) in shopList" :key="index">
					<view class="swiper-item">
						{{ item.image }}
						<image :src="item.image" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="home-title content">
			<view>{{ $t('page.home.aboutUs') }}</view>
		</view>

		<view class="about-us"
		:style="{'background-image' : `url(${aboutImage})`}">
			<view class="about-content">
				<view class="title">olx Shop</view>
				<!-- <view class="title">{{ $t('page.home.tiktokShop') }}</view> -->
				<view class="desc">{{ $t('page.home.company') }}</view>
				<view class="click">{{ $t('page.home.introduction') }}</view>
			</view>
		</view>
		
		<view class="home-title content">
			<view>{{ $t('page.home.commission') }}</view>
		</view>
		
		<view class="roll">
			<virtualScroll :listData="scrollList"></virtualScroll>
		</view>


		<sTabbar select="0" />

		<!-- 弹窗 -->
		<popUpWindow :show="showPopUp" @close="closePopUp"></popUpWindow>

		<!-- 选择语言弹框 -->
		<changeLanguage :show.sync="showLanguage" @close="closeLanguage"></changeLanguage>

	</view>
</template>

<script>
	import sTabbar from '@/components/base/tabBar.vue'
	import popUpWindow from '../../components/popUpWindow/popUpWindow.vue'
	import virtualScroll from '../../components/virtualScroll/virtualScroll.vue'
	import changeLanguage from '@/components/changeLanguage/changeLanguage.vue'

	export default {
		components: {
			sTabbar,
			popUpWindow,
			virtualScroll,
			changeLanguage
		},
		data() {
			return {
				showPopUp: false,		//是否显示弹窗
				showLanguage: false,		//是否显示切换语言

				swiperDotIndex: 0,		//当前轮播图index
				shopList : [],		//商品列表
				scrollList : [],		//提现滚动列表
				aboutImage : '',
			}
		},
		onShow() {
			this.getShopList()
			this.getIndexScroll()
		},
		methods: {
			//关闭语言选项
			closeLanguage() {
				this.$play()
				this.showLanguage = false;
			},
			
			//获取商品轮播
			getShopList(){
				this.request('shopPage').then(res => {
					this.shopList = res.result.records
				})
				this.request('getImageIndex').then(res => {
					this.aboutImage = res.result.title
				})
			},
			
			//获取首页提现滚动
			getIndexScroll(){
				this.request('getIndexScroll').then(res => {
					this.scrollList = res.result
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		background-size: 100%;
		background-repeat: no-repeat;
		padding-bottom: 120rpx;

		.content {
			width: 96%;
			margin: 0 auto;
		}

		.home-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			padding: 20rpx 0rpx;

			.menu-icon {

				image {
					width: 50rpx;
					height: 50rpx;
				}

			}

			.logo {
				color: uni-bg-color-app;
				font-weight: bold;
				font-size: 32rpx;
			}

			.sign {

				image {
					width: 60rpx;
				}
			}
		}

		.home-title {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			height: 120rpx;

			&::before,
			&::after {
				position: absolute;
				top: 50%;
				content: '';
				width: 20%;
				border-top: 2rpx solid black;
			}

			&::before {
				left: 10%;
			}

			&::after {
				right: 10%;
			}
		}

		.swiper {
			.swiper-box {
				height: 200px;
			}

			.swiper-item {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 200px;
				color: #fff;
				
				image {
					width: 50%;
				}
			}
			
		}

		.about-us ,
		.roll {
			display: flex;
			align-items: center;
			background-image: url('@/static/home/bg.jpeg');
			background-size: 100%;
			height: 400rpx;

			.about-content {
				padding: 10% 0rpx 0rpx 5%;

				.title ,
				.click {
					font-size: 40rpx;
					font-weight: bold;
				}

				.desc {
					font-size: 20rpx;
					color: #464648;
				}

				.click {
					font-size: 22rpx;
				}
			}
		}
		
		.roll {
			background-image: url('@/static/home/bg1.jpg');
		}
	}
</style>