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
			</view>
			<view class="sign">
				<image @click="showLanguage = true" src="../../static/home/language.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="home-title content">
			<view>Commodities</view>
		</view>

		<view class="swiper">
			<swiper class="swiper-box" @change="swiperChange" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in 3" :key="index">
					<view class="swiper-item">
						<image src="@/static/home/product.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="home-title content">
			<view>About Us</view>
		</view>

		<view class="about-us">
			<view class="about-content">
				<view class="title">TikTok Shop</view>
				<view class="desc">Growth Marketing Company</view>
				<view class="click">Click to view introduction</view>
			</view>
		</view>
		
		<view class="home-title content">
			<view>Commission</view>
		</view>
		
		<view class="roll">
			<virtualScroll></virtualScroll>
		</view>


		<sTabbar select="0" />

		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>

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

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

	</view>
</template>

<script>
	import sTabbar from '@/components/base/tabBar.vue'
	import serviceList from '@/components/serviceList/serviceList.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,
			serviceList,
			popUpWindow,
			virtualScroll,
			changeLanguage
		},
		data() {
			return {
				showService: false,
				menuTitles: ['CustomerService', 'Certifcate', 'Deposit', 'Withdraw'],
				agreementTitles: ['agreement_item_1', 'agreement_item_2', 'agreement_item_3', 'agreement_item_4'],
				serverList: [],
				outList: [],
				vipList: [],
				userInfo: {},
				vipInfo: {},
				// showPopUp: uni.getStorageSync('clickPopUp') ? false : true,
				showPopUp: false,
				showLanguage: false,

				swiperDotIndex: 0
			}
		},
		onShow() {

		},
		methods: {
			swiperChange(item) {
				console.log(item);
			}
		}
	}
</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: 30%;
				}
			}
			
		}

		.about-us ,
		.roll {
			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>