首页 > 其他分享 >uniapp实现足球数据分析平台移动端H5

uniapp实现足球数据分析平台移动端H5

时间:2024-08-21 19:24:57浏览次数:9  
标签:数据分析 uniapp color height item login font cu H5

文章目录


前言

一款基于前端铺子改造的移动端程序

一直想做一款足球分析平台,大概内容包括竞彩分析模块,即时预测模块,初盘分析模块,找来找去还是前端铺子的样式感觉比较好看。

一、界面一栏

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
演示地址

二、注册界面

1.代码说明

主要实现对用户的注册

<template>
	<view style="height:100vh;background: #fff;">
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">欢迎</block>
		</cu-custom> -->

		<!-- <view class="bgImg">
			<view class="bannerBox">
				<swiper style="height: 680rpx;" class="swiper" circular="true"
					indicator-dots="true" autoplay="true" interval="4000" duration="600">
					<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item uni-bg-red">
							<image class="swiper-img radius shadow-warp" :src="item.imageUrl" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		
		</view> -->



		<swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true"
			:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#ffffff"
			indicator-active-color="#ffffff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''">
				<view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
					<image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="login-view" style="">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">登录账号</text>
						<input type="text" name="username" placeholder="请输入您的登录账号" maxlength="18" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">登录密码</text>
						<input type="password" name="password" maxlength="18" placeholder="请输入您的密码"
							v-model="password" />
					</view>
					<view class="t-a">
						<text class="txt">联系邮箱</text>
						<input type="email" name="email" maxlength="18" placeholder="请输入您的邮箱"
							v-model="email" />
					</view>
					<button @tap="register()">注册开通</button>
					
					<view class="vip" @tap="vip()">会员价格</view>
					
					<view class="reg" @tap="reg()">返回登录</view>
					
				</form>
				<view class="t-f"><text>—————— 联系我们 ——————</text></view>
				<view class="t-e cl">
					<view class="t-g" @tap="wxNum()">
						<image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image>
					</view>
					<view class="t-g" @tap="qqNum()">
						<image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image>
					</view>
				</view>
			</view>

			<u-modal v-model="show" :content="content"></u-modal>

		</view>
	</view>
</template>
.card-swiper {
		background-image: url(https://i1.sinaimg.cn/2010/p/2010-07-03/U2706P939T17D63118F322DT20100703042134.jpg);
		height: 550upx !important;
		background-size: 100%;
		margin-bottom: 80upx;
	}

	.card-swiper swiper-item {
		width: 260upx !important;
		left: 245upx;
		box-sizing: border-box;
		padding: 0upx 17upx 50upx 17upx;
		overflow: initial;
		/* margin: 100rpx 0; */
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10upx;
		transform: scale(0.7);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}


	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		width: 100%;
		height: 450rpx;
		background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
		background-size: 100%;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}
	
	.vip{
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #fcd123;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}


	.bgImg {
		position: relative;
		margin-bottom: 100rpx;

		.left_box {
			position: absolute;
			height: 130rpx;
			width: 60%;
			background: #ffffff;
			bottom: -55rpx;
			left: 5%;
			border-radius: 15rpx;
		}

		.right_box {
			text-align: center;
			position: absolute;
			height: 130rpx;
			width: 25%;
			background: #ffffff;
			bottom: -55rpx;
			right: 5%;
			border-radius: 15rpx;
		}
	}

三、首页界面

首页主要是统计分析,这里用了u-charts.js进行图标渲染

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">首页</block>
		</cu-custom>
		<view class="components-home">

			<view class="title-header">
				<view class="title-text">
					上月走地数据统计
				</view>
			</view>
			<view class='type-header'>
				<u-radio-group v-model="countValueStr">
					<u-radio @change="radioChange" v-for="(item, index) in selectList" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

			<view class='nav-list margin-top'>
				<navigator open-type="navigate" hover-class='none' :class="'nav-li bg-kuxuan' + (index+1)" v-for="(item, index) in kuxuan"
				 :key="index">
					<view class="nav-name">{{item.name}}</view>
				</navigator>
			</view>
		</view>

		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">仪表盘</text>
				<text class="text-ABC text-blue">GaugeCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
		</view> -->


		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">最近七天{{countValueStr}}胜率情况</text>
				<text class="text-ABC text-blue">LineCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">上月全部类型场次分布</text>
				<text class="text-ABC text-blue">ringCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>

		<br><br><br><br>

		<!-- <view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">饼状图</text>
				<text class="text-ABC text-blue">PieCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">柱状图</text>
				<text class="text-ABC text-blue">ColumnCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">雷达图</text>
				<text class="text-ABC text-blue">RadarCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">漏斗图</text>
				<text class="text-ABC text-blue">FunnelCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasFunnel" id="canvasFunnel" class="charts"></canvas>
		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">词云图</text>
				<text class="text-ABC text-blue">DataCharts</text>
			</view>
		</view>
		<view class="chartsMain">
			<canvas canvas-id="canvasData" id="canvasData" class="charts"></canvas>
		</view> -->

	</view>
</template>

四、竞彩预测

这里分了两个tab,一个显示竞彩,一个显示北单

<template>
	<view class="warp">
		<view class="status_bar">
			<!-- 导航栏 -->
		</view>
		<!-- <view class="title b-fontw7">
			竞彩预测
		</view> -->

		<view class="nav-box b-card">
			<view class="nav-bar-box">
				<view class="nav-bar-item" v-for='(item,index) in list' :key='index' :class="{'nav-bar-item-check':index == current,
				'nav-bar-left':index == 0 && current == index,
				'nav-bar-center':index > 0 && index < list.length-1 && current == index ,
				'nav-bar-right':index == list.length-1 && current == index}"
				 @click="change(index)">
					<view class="">

					</view>
					<view class="" style="flex: 1;text-align: center;">
						<view class="nav-bar-title">
							{{item.name}}
							<view class="title-line" v-show="index == current">

							</view>
						</view>
					</view>
					<view class="nav-bar-line" v-if="index<list.length-1 && index != current && index != current-1">
					</view>
					<view class="">
					</view>

				</view>
			</view>

			<view class="nav-content-box">
				<view class="">
					<view class="nav-content-title b-fontw6">
						「每日更新」体彩预测
					</view>
					<view class="nav-content-text b-flex-item-cent">
						<text class="b-traiangle"></text>
						<text>今日竞彩</text>
						<text class="nav-content-line"></text>
						<text class="b-fontw6">{{jczcc}}</text>
					</view>
					<view class="nav-content-text b-flex-item-cent">
						<text class="b-traiangle"></text>
						<text>今日北单</text>
						<text class="nav-content-line"></text>
						<text class="b-fontw6">{{bdzcc}}</text>
					</view>
				</view>
				<view class="">
					<view class="img">
						<view class="img-refresh">
							请认准
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-for="(item, index) in resultData" :key='index' style="margin-top: 20rpx;">
			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">
						{{item.matchName}} 【{{cxlx=='jc'?item.matchNoCnJczq:item.matchNoCn}}】
					</text>
					<text class="text-ABC text-blue"></text>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-bottom" style="box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view class="text-lg">
							<text class="cuIcon-text text-blue margin-right-xs"></text>
							{{item.teams1}} VS {{item.teams2}}
						</view>
						<view class="text-gray text-df margin-top-xs">
							<text class="cuIcon-hotfill margin-right-xs"></text>
							时间:{{item.matchTime.substring(5)}}
						</view>
					</view>
					<view class="action">
						<view class="cu-capsule radius margin-right" style="margin-bottom: 20rpx;">
							<view :class="{'cu-tag bg-green':item.betTypeStr1=='负',
							'cu-tag bg-gray':item.betTypeStr1=='平',
							'cu-tag bg-red':item.betTypeStr1=='胜'
							}">
								{{item.betTypeStr1}}
							</view>
							<view :class="{'cu-tag line-green':item.betTypeStr1=='负',
							'cu-tag line-gray':item.betTypeStr1=='平',
							'cu-tag line-red':item.betTypeStr1=='胜'
							}">
								{{item.ycjgProb1}}%
							</view>
						</view>
						<br>
						<view class="cu-capsule radius">
							<view :class="{'cu-tag bg-green':item.betTypeStr2=='负',
							'cu-tag bg-gray':item.betTypeStr2=='平',
							'cu-tag bg-red':item.betTypeStr2=='胜'
							}">
								{{item.betTypeStr2}}
							</view>
							<view :class="{'cu-tag line-green':item.betTypeStr2=='负',
							'cu-tag line-gray':item.betTypeStr2=='平',
							'cu-tag line-red':item.betTypeStr2=='胜'
							}">
								{{item.ycjgProb2}}%
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

五、即时预测

这里主要展示走地滚球数据,以列表的形式展示,其中又包括了大小球、角球、让球,所以以tab展示。

<template>
	<view>
		<view class="contaier" style="background-color: #FFFFFF;">
			<view class="picBox">

				<view class="cu-bar">
					<view class="action sub-title justify-between">
						<text class="text-xl text-bold text-white">即时数据</text>
						<text class="text-ABC text-white">Ground</text>
						<!-- last-child选择器-->
					</view>
					<view class="action text-white text-sm" style="opacity: 0.6;">
						每日 更新
					</view>
				</view>

				<view class="top_bg">
					<view class="number_sy_box">
						<view class="number_sy_box_title">
							<text>即时·统计</text>
							<text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">
								统计时间:昨天12:00-今日12:00
							</text>
						</view>
						<view class="number_sy_main">
							<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
								<view class="number_num1" style="color: black;">{{oddData.zqc}}</view>
								<view class="danwei">总场次</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;">
								<view class="number_num2" style="color: red;">{{oddData.zqqc}}</view>
								<view class="danwei">正确</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;">
								<view class="number_num2">{{oddData}}</view>
								<view class="danwei">错误</view>
							</view>
							<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
								<view class="number_num1" style="color: blue;">{{oddData}}</view>
								<view class="danwei">胜率</view>
							</view>
							<view style="width: 50%; text-align: center; z-index: 9999;">
								<view class="number_num2" v-if="oddData.yld>=0" style="color: darkred;">{{oddDat}}
								</view>
								<view class="number_num2" v-if="oddData.yld<0">{{oddData}</view>
								<view class="danwei">盈利</view>
							</view>

							<!-- <image mode="widthFix" class="xiaoding_bg" src="@/static/rank/Intersect.png"></image> -->
						</view>
					</view>
				</view>
			</view>






			<view class="wrap">
				<view class="u-tabs-box">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
					<view class="page-box" v-if='resultData.length ==0'>
						<view>
							<view class="centre">
								<view class="explain">
									暂无滚球信息
									<view class="tips">可以去看看有其他</view>
								</view>
								<view class="btn">再等等把</view>
							</view>
						</view>
					</view>

					<view class="page-box">
						<view class="order" v-for="item in resultData" :key="item.matchId + item.betType">
							<view class="top">
								<view class="left">
									<uni-text class="cuIcon-titles text-blue"></uni-text>
									<view class="store" v-if="item.nowstatus!='完'">{{item}}
										{{item}}′
									</view>
									<image class="xiaoding_bg" mode="widthFix" src="../../static/zd2.gif" v-if="item.nowstatus!='完'"></image>
									<view class="store" v-else>{{item}} {{item}}</view>
								</view>
								<view class="right">
									<text class="text-blue">时间:{{item.matchTime.substring(5)}}</text>
								</view>
							</view>

							<view class="cu-card dynamic isCard ">
								<view class=" shadow goPhotographer">
									<view class="PhotographerBoxR ">
										<view class="text-sm text-grey margin-top-xs">预测盘口:{{item}}</view>
										<view class="text-sm text-grey margin-top-xs">预测时间:{{item}}′ </view>
										<view class="text-sm text-grey margin-top-xs">预测比分:{{item}} </view>
									</view>

									<view class="PhotographerBoxL">
										<!-- <view class="text-bold margin-top-sm">中国足协杯</view> -->
										<view class="text-sm text-bold avatar-text">{{item.teams1}}
											{{item.nowscore.split('-')[0]}}
										</view>
										<view class="text-sm text-bold"> {{item.teams2}} {{item.nowscore.split('-')[1]}}
										</view>
										<view class='cu-tag2 margin-top-xs bg-red radius shadow-lg' v-if="item.betType.includes('大')|| item.betType.includes('主')||item.betType == '胜'">
											{{item.betType}}
										</view>
										<view class='cu-tag2 margin-top-xs bg-blue radius shadow-lg' v-if="item.betType.includes('小')|| item.betType.includes('客')||item.betType.includes('负')">
											{{item.betType}}
										</view>
										

								</view>
							</view>
						</view>
						<br></br></br></br>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

实现效果:
在这里插入图片描述


总结

因为有前端铺子丰富的UI组件库,所以实现起来还是比较简单的,后端是用的api接口,有需要的请联系作者。

鸣谢:
前端铺子-优秀前端UI框架
足球数据分析平台-优秀足球数据策略提供商

标签:数据分析,uniapp,color,height,item,login,font,cu,H5
From: https://blog.csdn.net/qq_38880880/article/details/141329028

相关文章

  • 《Python数据分析实战》
    环境搭建定义变量名时要遵循的规则:变量名必须以字母或下画线开始,名字中间只能由字母、数字和下画线组成长度不能超过255个字符变量名在有效范围内必须具有唯一性不能使用保留字(关键字)区分大小写不能对元组中的元素做修改,只能做切片查询。如果元组中只有1个元素,则需要在这......
  • uniapp__微信小程序分享好友朋友圈的功能
    1、实现效果这个如果不写代码就是灰色的不能使用 2、api地址uniapp这是使用的api地址点击即可进入   uniapp 3、这是找到个大佬的文章很好用给大家看下uni-app小程序分享功能实现_uniapponsharetimeline-CSDN博客4、记录是方便自己学习4.1把这个建一个文件......
  • 多功能便携工具!VH501TC多类型传感器读数仪,助你完成频率、温度、电压和电流测量!
    多功能便携工具!VH501TC多类型传感器读数仪,助你完成频率、温度、电压和电流测量!VH501TC是一款专用的多类型传感器手持式读数仪,主要用于测量单弦式振弦传感器的读数,同时也可以辅助测量电压和电流传感器的数据。该设备内置了LoRA无线技术,可以与我公司的NLM系列产品配合使用,实现传感......
  • 豆瓣评分8.7!Python pandas创始人亲码的数据分析入门手册!
    在众多解释型语言中,Python最大的特点是拥有一个巨大而活跃的科学计算社区。进入21世纪以来,在行业应用和学术研究中采用python进行科学计算的势头越来越猛。近年来,由于Python有不断改良的库(主要是pandas),使其成为数据处理任务的一大代替方案,结合其在通用编程方面的强大实力,完......
  • uniapp小程序分享朋友功能全局
    1、新建share.js文件exportdefault{data(){return{//默认的全局分享内容(待测试)share:{title:'微课程',path:'/pages/login/login',//全局分享的路径imageUrl:'',//全局分享的图片(可本地可网络)},......
  • 直击网络安全战场:DDoS攻击数据分析与机器学习模型的终极指南
    你还在为数据枯燥而发愁?不如让我们用机器学习来和DDoS攻击“打个招呼”!欢迎来到一场别开生面的数据科学冒险!你是否曾经面对一堆毫无生气的数据表格,感到头疼不已?是否在盯着屏幕苦苦寻找攻击模式时,觉得自己仿佛变成了一个被困在数据迷宫里的“网络侦探”?别担心!今天,我们要带你进......
  • uniapp微信小程序的拍照功能
    1.实现的效果2.实现代码(1)pages/index/index中<template> <viewclass="content"> <imageclass="logo"src="/static/header.jpg"></image> <viewclass="text-area"> <buttonclass="......
  • 【WCH蓝牙系列芯片】-基于CH582开发板—蓝牙从机HAL_SLEEP模式,串口唤醒收发数据
    -------------------------------------------------------------------------------------------------------------------------------------在之前的博客文档中介绍过CH582作为蓝牙主机,开启睡眠后,通过串口唤醒,并接收串口数据。这里再讲解一下使用CH582芯片作为蓝牙从机,开......
  • 【有源码】基于Python的股票数据分析与价格预测TensorFlow深度学习框架和长短期记忆网
    注意:该项目只展示部分功能,如需了解,文末咨询即可。本文目录1.开发环境2系统设计2.1设计背景2.2设计内容3系统页面展示3.1预测页面3.2可视化页面3.3管理页面3.4功能展示视频4更多推荐5部分功能代码5.1爬虫部分代码5.2预测部分代码1.开发环境开发语......
  • 数据分析面试常见50个问题及解答要点
    为了帮助各位学习数据分析的小伙伴们成功拿到offer!本期给大家整理了一些数据分析面试时的高频问题,分享给大家数据分析高频面试50题,点击下方链接进行下载完整版,下面展示部分面试题,希望大家积极点赞收藏加关注,一起冲鸭~链接下载:https://edu.cda.cn/group/4/thread/1787811、......