龙溪网站制作,淘客网站要怎么做,亚网站建设,wordpress google cdn文章目录 前言一直想做一款足球分析平台#xff0c;大概内容包括竞彩分析模块#xff0c;即时预测模块#xff0c;初盘分析模块#xff0c;找来找去还是前端铺子的样式感觉比较好看。 一、界面一栏二、注册界面1.代码说明 三、首页界面四、竞彩预测五、即时预测总结 前言
… 文章目录 前言一直想做一款足球分析平台大概内容包括竞彩分析模块即时预测模块初盘分析模块找来找去还是前端铺子的样式感觉比较好看。 一、界面一栏二、注册界面1.代码说明 三、首页界面四、竞彩预测五、即时预测总结 前言
一款基于前端铺子改造的移动端程序
一直想做一款足球分析平台大概内容包括竞彩分析模块即时预测模块初盘分析模块找来找去还是前端铺子的样式感觉比较好看。
一、界面一栏 演示地址
二、注册界面
1.代码说明 主要实现对用户的注册 templateview styleheight:100vh;background: #fff;!-- cu-custom bgColorbg-gradual-blue :isBackfalseblock slotcontent欢迎/block/cu-custom --!-- view classbgImgview classbannerBoxswiper styleheight: 680rpx; classswiper circulartrueindicator-dotstrue autoplaytrue interval4000 duration600swiper-item classswiper-list v-for(item, index) in bannerList :keyindexview classswiper-item uni-bg-redimage classswiper-img radius shadow-warp :srcitem.imageUrl modewidthFix/image/view/swiper-item/swiper/view/view --swiper classcard-swiper round-dot previous-margin1rpx :indicator-dotsfalse :circulartrue:autoplaytrue interval5000 duration500 changecardSwiper indicator-color#ffffffindicator-active-color#ffffffswiper-item v-for(item,index) in swiperList :keyindex :classcardCur index ? cur:view classswiper-item shadow-shop styleborder-radius: 20rpx 20rpx 22rpx 22rpx;image :srcitem.url v-ifitem.typeimage modeaspectFill class/image/view/swiper-item/swiperview classlogin-view styleview classt-loginform classclview classt-atext classtxt登录账号/textinput typetext nameusername placeholder请输入您的登录账号 maxlength18 v-modelusername //viewview classt-atext classtxt登录密码/textinput typepassword namepassword maxlength18 placeholder请输入您的密码v-modelpassword //viewview classt-atext classtxt联系邮箱/textinput typeemail nameemail maxlength18 placeholder请输入您的邮箱v-modelemail //viewbutton tapregister()注册开通/buttonview classvip tapvip()会员价格/viewview classreg tapreg()返回登录/view/formview classt-ftext—————— 联系我们 ——————/text/viewview classt-e clview classt-g tapwxNum()image srchttps://zhoukaiwen.com/img/loginImg/wx.png/image/viewview classt-g tapqqNum()image srchttps://zhoukaiwen.com/img/loginImg/qq.png/image/view/view/viewu-modal v-modelshow :contentcontent/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进行图标渲染 templateviewcu-custom bgColorbg-gradual-blue :isBackfalse!-- block slotbackText返回/block --block slotcontent首页/block/cu-customview classcomponents-homeview classtitle-headerview classtitle-text上月走地数据统计/view/viewview classtype-headeru-radio-group v-modelcountValueStru-radio changeradioChange v-for(item, index) in selectList :keyindex :nameitem.name :disableditem.disabled{{item.name}}/u-radio/u-radio-group/viewview classnav-list margin-topnavigator open-typenavigate hover-classnone :classnav-li bg-kuxuan (index1) v-for(item, index) in kuxuan:keyindexview classnav-name{{item.name}}/view/navigator/view/view!-- view classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow仪表盘/texttext classtext-ABC text-blueGaugeCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasGauge idcanvasGauge classcharts/canvas/view --view classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow最近七天{{countValueStr}}胜率情况/texttext classtext-ABC text-blueLineCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasArea idcanvasArea classcharts touchstarttouchArea/canvas/viewview classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow上月全部类型场次分布/texttext classtext-ABC text-blueringCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasRing idcanvasRing classcharts touchstarttouchRing/canvas/viewbrbrbrbr!-- view classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow饼状图/texttext classtext-ABC text-bluePieCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasPie idcanvasPie classcharts touchstarttouchPie/canvas/viewview classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow柱状图/texttext classtext-ABC text-blueColumnCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasColumn idcanvasColumn classcharts touchstarttouchColumn/canvas/viewview classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow雷达图/texttext classtext-ABC text-blueRadarCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasRadar idcanvasRadar classcharts/canvas/viewview classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow漏斗图/texttext classtext-ABC text-blueFunnelCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasFunnel idcanvasFunnel classcharts/canvas/viewview classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow词云图/texttext classtext-ABC text-blueDataCharts/text/view/viewview classchartsMaincanvas canvas-idcanvasData idcanvasData classcharts/canvas/view --/view
/template四、竞彩预测 这里分了两个tab一个显示竞彩一个显示北单 templateview classwarpview classstatus_bar!-- 导航栏 --/view!-- view classtitle b-fontw7竞彩预测/view --view classnav-box b-cardview classnav-bar-boxview classnav-bar-item v-for(item,index) in list :keyindex :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}clickchange(index)view class/viewview class styleflex: 1;text-align: center;view classnav-bar-title{{item.name}}view classtitle-line v-showindex current/view/view/viewview classnav-bar-line v-ifindexlist.length-1 index ! current index ! current-1/viewview class/view/view/viewview classnav-content-boxview classview classnav-content-title b-fontw6「每日更新」体彩预测/viewview classnav-content-text b-flex-item-centtext classb-traiangle/texttext今日竞彩/texttext classnav-content-line/texttext classb-fontw6{{jczcc}}/text/viewview classnav-content-text b-flex-item-centtext classb-traiangle/texttext今日北单/texttext classnav-content-line/texttext classb-fontw6{{bdzcc}}/text/view/viewview classview classimgview classimg-refresh请认准/view/view/view/view/viewview v-for(item, index) in resultData :keyindex stylemargin-top: 20rpx;view classcu-bar bg-white margin-top-xsview classaction sub-titletext classtext-xl text-bold text-blue text-shadow{{item.matchName}} 【{{cxlxjc?item.matchNoCnJczq:item.matchNoCn}}】/texttext classtext-ABC text-blue/text/view/viewview classcu-list menu sm-border margin-bottom stylebox-shadow: 0 2px 8px rgba(0,0,0,0.15);view classcu-itemview classcontent padding-tb-smview classtext-lgtext classcuIcon-text text-blue margin-right-xs/text{{item.teams1}} VS {{item.teams2}}/viewview classtext-gray text-df margin-top-xstext classcuIcon-hotfill margin-right-xs/text时间{{item.matchTime.substring(5)}}/view/viewview classactionview classcu-capsule radius margin-right stylemargin-bottom: 20rpx;view :class{cu-tag bg-green:item.betTypeStr1负,cu-tag bg-gray:item.betTypeStr1平,cu-tag bg-red:item.betTypeStr1胜}{{item.betTypeStr1}}/viewview :class{cu-tag line-green:item.betTypeStr1负,cu-tag line-gray:item.betTypeStr1平,cu-tag line-red:item.betTypeStr1胜}{{item.ycjgProb1}}%/view/viewbrview classcu-capsule radiusview :class{cu-tag bg-green:item.betTypeStr2负,cu-tag bg-gray:item.betTypeStr2平,cu-tag bg-red:item.betTypeStr2胜}{{item.betTypeStr2}}/viewview :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展示。 templateviewview classcontaier stylebackground-color: #FFFFFF;view classpicBoxview classcu-barview classaction sub-title justify-betweentext classtext-xl text-bold text-white即时数据/texttext classtext-ABC text-whiteGround/text!-- last-child选择器--/viewview classaction text-white text-sm styleopacity: 0.6;每日 更新/view/viewview classtop_bgview classnumber_sy_boxview classnumber_sy_box_titletext即时·统计/texttext styleposition: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;统计时间昨天12:00-今日12:00/text/viewview classnumber_sy_mainview stylewidth: 50%; text-align: center; border-right: 1px solid #eee;view classnumber_num1 stylecolor: black;{{oddData.zqc}}/viewview classdanwei总场次/view/viewview stylewidth: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;view classnumber_num2 stylecolor: red;{{oddData.zqqc}}/viewview classdanwei正确/view/viewview stylewidth: 50%; text-align: center; z-index: 9999;border-right: 1px solid #eee;view classnumber_num2{{oddData}}/viewview classdanwei错误/view/viewview stylewidth: 50%; text-align: center; border-right: 1px solid #eee;view classnumber_num1 stylecolor: blue;{{oddData}}/viewview classdanwei胜率/view/viewview stylewidth: 50%; text-align: center; z-index: 9999;view classnumber_num2 v-ifoddData.yld0 stylecolor: darkred;{{oddDat}}/viewview classnumber_num2 v-ifoddData.yld0{{oddData}/viewview classdanwei盈利/view/view!-- image modewidthFix classxiaoding_bg src/static/rank/Intersect.png/image --/view/view/view/viewview classwrapview classu-tabs-boxu-tabs :listlist :is-scrollfalse :currentcurrent changechange/u-tabsview classpage-box v-ifresultData.length 0viewview classcentreview classexplain暂无滚球信息view classtips可以去看看有其他/view/viewview classbtn再等等把/view/view/view/viewview classpage-boxview classorder v-foritem in resultData :keyitem.matchId item.betTypeview classtopview classleftuni-text classcuIcon-titles text-blue/uni-textview classstore v-ifitem.nowstatus!完{{item}}{{item}}′/viewimage classxiaoding_bg modewidthFix src../../static/zd2.gif v-ifitem.nowstatus!完/imageview classstore v-else{{item}} {{item}}/view/viewview classrighttext classtext-blue时间{{item.matchTime.substring(5)}}/text/view/viewview classcu-card dynamic isCard view class shadow goPhotographerview classPhotographerBoxR view classtext-sm text-grey margin-top-xs预测盘口{{item}}/viewview classtext-sm text-grey margin-top-xs预测时间{{item}}′ /viewview classtext-sm text-grey margin-top-xs预测比分{{item}} /view/viewview classPhotographerBoxL!-- view classtext-bold margin-top-sm中国足协杯/view --view classtext-sm text-bold avatar-text{{item.teams1}}{{item.nowscore.split(-)[0]}}/viewview classtext-sm text-bold {{item.teams2}} {{item.nowscore.split(-)[1]}}/viewview classcu-tag2 margin-top-xs bg-red radius shadow-lg v-ifitem.betType.includes(大)|| item.betType.includes(主)||item.betType 胜{{item.betType}}/viewview classcu-tag2 margin-top-xs bg-blue radius shadow-lg v-ifitem.betType.includes(小)|| item.betType.includes(客)||item.betType.includes(负){{item.betType}}/view/view/view/viewbr/br/br/br/view/view/view/view/view
/template
实现效果 总结
因为有前端铺子丰富的UI组件库所以实现起来还是比较简单的后端是用的api接口有需要的请联系作者。 鸣谢 前端铺子-优秀前端UI框架 足球数据分析平台-优秀足球数据策略提供商
