myjtp/pages/index.vue

<template>
	<view class="container">
		<view class="contentBox">
			<view class="btoomBg"></view>
			<view class="topBg">
				<view class="tpRight"><view class="textBox">活动规则</view></view>
				<view class="tpTitle">评选活动</view>
				<view class="endTextBox flex">
					<view class="leftLine"><view class="roundness"></view></view>
					<view class="textLine">距离投票结束还有</view>
					<view class="rightLine"><view class="roundness"></view></view>
				</view>
				<view class="down">
					<u-count-down
						separator="zh"
						font-size="32"
						separator-color="#666666"
						separator-size="32"
						bg-color="#D7272B"
						color="#FFFFFF"
						:show-border="false"
						:timestamp="timestamp"
					></u-count-down>
				</view>
				<view class="tjContent flex">
					<view class="tjItem">
						<view class="topText">
							{{ item.pepole }}
							<text class="iconTip">人</text>
						</view>
						<view class="bottomText">参与者</view>
					</view>
					<view class="tjItem">
						<view class="topText">
							{{ item.votes }}
							<text class="iconTip">票</text>
						</view>
						<view class="bottomText">投票数</view>
					</view>
					<view class="tjItem">
						<view class="topText">
							{{ item.count }}
							<text class="iconTip">次</text>
						</view>
						<view class="bottomText">浏览量</view>
					</view>
				</view>
				<view class="input flex"><u-input type="select" v-model="input.value" confirm-type='search'  @confirm='searchProduct' placeholder="请输入选手姓名和编号" :height="input.height" :type="input.type"/><u-icon color="#999999" class="iconT" @click="searchProduct" name="search">
				</u-icon></view>
			</view>
		</view>
	</view>
</template>
<script>
import { ptDetail } from '@/api/tp.js';
export default {
	data() {
		return {
			timestamp: 600000,
			// 拼团信息
			item: {
				pepole: 20,
				votes: 20,
				count: 20
			},
			// 搜索框
			input: {
				value: '',
				type: 'text',
				height:60
			}
		};
	},
	onLoad() {
		this.ptDetail();
	},
	methods: {
		ptDetail() {
			ptDetail()
				.then(e => {
					console.log(e);
				})
				.catch(e => {
					console.log();
				});
		},
		searchProduct(e){
			console.log(e);
		}
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #ff9ba7;
}

.contentBox {
	position: relative;
	width: 0px;
	min-width: 100%;
	padding-top: 32rpx;
	.btoomBg {
		background-color: #ffffff;
		margin-left: 42rpx;
		margin-right: 30rpx;
		min-height: 50vh;
	}
	.topBg {
		position: absolute;
		top: 0;
		width: 678rpx;
		min-height: 50vh;
		margin-left: 30rpx;
		margin-right: 42rpx;
		background: #ffffff;
		box-shadow: 3px 5rpx 3rpx 0rpx rgba(4, 0, 0, 0.15);
		padding-top: 23rpx;
		line-height: 1;
		.down {
			text-align: center;
		}
		.tjContent {
			margin-top: 70rpx;
			justify-content: space-around;
			text-align: center;
			.tjItem {
				.topText {
					font-size: 50rpx;
					font-weight: bold;
					color: #3a3a3a;
					.iconTip {
						font-size: 20rpx;
					}
				}
				.bottomText {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.tpTitle {
			text-align: center;
			font-size: 48rpx;
			font-weight: bold;
			color: #ffc103;
			margin-top: 25rpx;
			margin-bottom: 45rpx;
		}
		.tpRight {
			display: flex;
			justify-content: flex-end;
			.textBox {
				background: #d7272b;
				border-radius: 99rpx 0px 0px 99rpx;
				padding: 10rpx;
				padding-left: 20rpx;
				font-size: 25rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.endTextBox {
			padding: 0 84rpx;
			margin-bottom: 32rpx;
			.leftLine,
			.rightLine {
				border-bottom: 1rpx solid #d7272b;
				flex-grow: 1;
				position: relative;
				.roundness {
					position: absolute;
					top: -5rpx;
					height: 10rpx;
					width: 10rpx;
					background-color: #d7272b;
					border-radius: 99rpx;
				}
			}
			.leftLine {
				.roundness {
					right: 0;
				}
			}
			.rightLine {
				.roundness {
					left: 0;
				}
			}
			.textLine {
				padding: 0 20rpx;
			}
		}
		.input{
			padding:0 30rpx ;
			margin: 50rpx 30rpx ;
			background: #EBEBEB;
			border-radius: 30rpx;
		}
	}
}
/deep/ .u-countdown-item {
	padding: 10rpx;
	border-radius: 8rpx;
	overflow: hidden;
}
</style>