xc/pages/index/index.vue

<template>
	<!-- 首页 -->
	<view class="page">
		<image class="topBanner" src="../../static/index/index/topBanner.png" mode="scaleToFill"></image>
		<view class="content-list">
			<view class="item">
				<view class="flex item-user">
					<view class="item-left-user flex">
						<view class="user-pic">
							<image class="user-img" src="../../static/user/myfans/banner.png" mode="scaleToFill">
							</image>
						</view>
						<view class="user-name-box">
							<view class="user-name">
								哈哈哈
							</view>
							<view class="user-money flex">
								<view class="tipImg">
									<image class="vipTip" src="../../static/index/index/icon01.png" mode="scaleToFill">
									</image>
								</view>
								<view class="money">
									3123123123
								</view>
							</view>
						</view>
					</view>
					<view class="item-rigt-user" @click="openTc('popupvip')">
						<image class="item-right-vip" src="../../static/index/index/vip.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="item-user-model flex">
					<view class="model" @click="openGg">
						<image class="model-image model1" src="../../static/index/index/model1.png" mode="scaleToFill">
						</image>
						<view class="model-name">
							能量
						</view>
					</view>
					<navigator url="/pages/user/ship">
						<view class="model">
							<image class="model-image model2" src="../../static/index/index/model2.png"
								mode="scaleToFill"></image>
							<view class="model-name">
								飞船
							</view>
						</view>
					</navigator>
					<navigator url="/pages/user/myfans">
						<view class="model">
							<image class="model-image model3" src="../../static/index/index/model3.png"
								mode="scaleToFill">
							</image>
							<view class="model-name">
								好友
							</view>
						</view>
					</navigator>
				</view>

				<view class="flex function-type">
					<navigator url="/pages/user/shareQrCode">
						<view class="function-block">
							<image class="type1" src="../../static/index/index/type2.png" mode=""></image>
						</view>
					</navigator>
					<view class="function-block">
						<image class="type2" src="../../static/index/index/type1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<vipPop ref="vipPop"></vipPop>
		<alertPop class="alertTime" ref="alertGg" :buttomShow="false" title="原料剩余">
			<view class="timeTitle">
				原料供应剩余
			</view>
			<view class="timeBox flex-center">
				<image class="timeIcon" src="@/static/index/time.png" mode="scaleToFill"></image>
				<uni-countdown class="timedown" :show-day="false" :hour="12" :minute="12" :second="12" :font-size="50"
					backgroundColor='transparent' color='#FFF'></uni-countdown>
			</view>
			<view class="alerttip">
				矿石原料每天可补充12次,每次增加 2小时,若供应不足产线将停止生产
			</view>
			<view class="flex-center alertbuttom">
				<image class="alertVideo" src="../../static/index/video.png" mode="scaleToFill"></image>
				<view class="buttext">
					看广告补充(12/12)
				</view>
			</view>
		</alertPop>
	</view>
</template>
<script>
	import vipPop from "@/components/alertPop/vipPop.vue"
	import alertPop from "@/components/alertPop/alertPop.vue"
	export default {
		data() {
			return {};
		},
		components: {
			vipPop,
			alertPop
		},
		onLoad(options) {

		},
		onShow() {},
		methods: {
			openTc(name) {
				this.$refs.vipPop.open();
			},
			closeTc(name) {
				this.$refs.vipPop.close();
			},
			openGg() {
				this.$refs.alertGg.open();
			}
		}
	};
</script>
<style lang="scss">
	.page {
		background-image: linear-gradient(#5d34ff, #e0d8ff);
		min-height: calc(100vh - var(--window-bottom));
		padding-bottom: 30rpx;
	}

	.topBanner {
		width: 750rpx;
		height: 900rpx;
	}

	.content-list {
		padding: 20rpx 30rpx;
		background-color: #FFF;
		border-radius: 30rpx;
		margin: 0 30rpx;
		margin-top: 50rpx;
		line-height: 1;
		padding-bottom: 50rpx;

		.item {
			.item-left-user {
				align-items: flex-start;

				.user-name-box {
					padding-left: 10rpx;

					.user-money {
						.money {
							padding-left: 10rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #222222;
						}
					}

					.vipTip {
						width: 36rpx;
						height: 29rpx;
					}

					.user-name {
						font-weight: 800;
						font-size: 27rpx;
						color: #222222;
						padding-bottom: 20rpx;
					}


				}

				.user-pic {
					overflow: hidden;
					border-radius: 100rpx;
					width: 60rpx;
					height: 60rpx;

					.user-img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.item-rigt-user {
				.item-right-vip {
					width: 210rpx;
					height: 95rpx;
				}
			}

			.item-user-model {
				padding-top: 30rpx;

				.model {
					.model-name {
						padding-top: 30rpx;
						text-align: center;
						font-weight: 500;
						font-size: 23rpx;
						color: #222222;
					}

					.model1 {
						width: 121rpx;
						height: 131rpx;
					}

					.model2 {
						width: 121rpx;
						height: 116rpx;
					}

					.model3 {
						width: 145rpx;
						height: 122rpx;
					}
				}
			}

			.function-type {
				align-items: flex-end;
				margin-top: 30rpx;

				.function-block {
					.type1 {
						width: 325rpx;
						height: 130rpx;
						margin-left: -10rpx;
					}

					.type2 {
						width: 321rpx;
						height: 112rpx;
					}
				}
			}
		}
	}

	.alertTime {
		.alerttip{
			padding: 50rpx 100rpx;
			font-weight: bold;
			color: #222222;
		}
		.alertbuttom {
			background: linear-gradient(268deg, rgba(113, 87, 185, 0.99), #8667C3, #7258B9);
			border-radius: 10rpx;
			text-align: center;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 85rpx;
			color: #FFF;
			.alertVideo {
				width: 36rpx;
				height: 26rpx;
			}
			.buttext{
				margin-left: 10rpx;
			}
			margin: 50rpx 100rpx 0 100rpx;
		}

		.timeTitle {
			padding-top: 100rpx;
			text-align: center;
			font-weight: 800;
			font-size: 39rpx;
			color: #222222;
		}

		.timeBox {
			background-color: rgb(181, 175, 196);
			width: 378rpx;
			height: 94rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			margin-top: 50rpx;

			.timeIcon {
				width: 58rpx;
				height: 58rpx;
			}

			.timedown {

				/deep/ .uni-countdown__splitor {
					// font-size: 42rpx;
					color: #FFF !important;
					margin: 0 6rpx;
					font-weight: bold;
				}

				/deep/ .uni-countdown__number {
					font-size: 42rpx;
					letter-spacing: 6rpx;
					width: auto;
				}
			}
		}

	}
</style>