文章目录
前言
一款基于前端铺子改造的移动端程序
一直想做一款足球分析平台,大概内容包括竞彩分析模块,即时预测模块,初盘分析模块,找来找去还是前端铺子的样式感觉比较好看。
一、界面一栏
二、注册界面
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接口,有需要的请联系作者。
标签:数据分析,uniapp,color,height,item,login,font,cu,H5 From: https://blog.csdn.net/qq_38880880/article/details/141329028