123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8"/>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
- <title>多元智能测评报告</title>
- <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/1.0.0/weui.min.css"/>
- <style>
- body{
- background-color: #fba000;
- padding: 15px;
- background-size:
- }
- .page__hd {
- padding: 10px;
- }
- .page__desc {
- margin-top: 5px;
- color: #888;
- text-align: left;
- font-size: 14px;
- padding-left:20px;
- }
- .wrapper{
- background-color: #fff;
- border-radius: 8px;
- padding: 10px 0px;
- }
- .bottom__padding{
- padding-bottom: 80px;
- }
- .style-btn2{
- background-color: #fff!important;
- color: #fba000!important;
- border: 1px solid #fba000;
- }
- .page_foot_ft{
- color: #fff!important;
- }
- .weui-pl{
- padding: 10px 45px!important;
- }
- .weui-label{
- color: #fba000;
- }
- .weui-cell{
- padding-left: 45px;
- }
- .weui-cell:before{
- border-top:0px!important;
- border-bottom: 1px solid #d9d9d9;
- left:0;
- }
- .weui-cells:before{
- border-top:0px!important;
- }
- .weui-btn:after{
- border:0px!important;
- }
- .weui-footer{
- color:#fff;
- }
- .porl{
- position: relative;
- height: 24px;
- }
- .updateFile{
- position: absolute;;
- opacity: 0;
- left: 0px;
- top: 0px;
- width: 100%;
- }
- .ft_orange{
- color: #fba000;
- }
- .ft_white {
- color: #fff;
- }
- .weui-form-preview__item{
- min-height: 28px;
- }
- .mine-form-btn{
- width: 80%;
- margin: 10px auto;
- background-color: #15a202;
- text-align: center;
- color: #fff;
- border-radius: 10px;
- }
- .weui-form-preview__hd:after{
- border-bottom:0px!important;
- }
- .weui-form-preview:before{
- border-top: 0px!important;
- }
- .weui-form-preview__ft:after{
- border-top: 0!important;
- }
- .weui-form-preview:after{
- border-bottom: 0px!important;
- }
- .weui-panel:after{
- border-bottom: 0px!important;
- }
- .weui-form-preview__hd .weui-form-preview__value{
- font-size: 16px;
- }
- .weui-form-preview__item{
- border-bottom: 1px solid #d9d9d9;
- }
- .weui-form-preview__value{
- overflow: inherit;
- }
- .weui-panel:before{
- border-top: 0px!important;
- }
- .report-tit{
- text-align: center;
- margin: 20px 0;
- color: #fff;
- }
- </style>
- </head>
- <body ontouchstart>
- <h1 class="report-tit">儿童多元智能测评</h1>
- <div class="wrapper">
- <div class="page__bd">
- <article class="weui测试-article">
- <h2 style="text-align: center;">经测试,罗一帆712的天赋是</h2>
- <section>
- <p>
- <div id="main" style="width:100%; height: 350px; padding-left: -3px;padding-right: -3px"></div>
- </p>
- </section>
- <section>
- <img src="3-1.jpg" width="100%">
- </section>
- <p style="text-align: center;">以上测评结果根据<span class="ft_orange">2</span>局游戏,<span class="ft_orange">462</span>次刷卡记录
- 形成的结论。玩得越多,测评结果越准确哦!</p>
- </article>
- </div>
- </div>
- <div class="wrapper" style="margin-top: 15px">
- <img src="3-2.jpg" width="100%">
- </div>
- </div>
- <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
- </body>
- </html>
- <script src="http://central.good5you.com/static/js/echart/echarts.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $('body').css({'background':'url("3-0.jpg") #fba000 no-repeat top center'})
- var option = {
- animation: false,
- radar: [
- {
- indicator: [
- { text: '运动能力' },
- { text: '空间思维' },
- { text: '自然探索' },
- { text: '记忆能力' },
- { text: '逻辑思维' },
- {text: '语言沟通'}
- ],
- radius: 120,
- startAngle: 90,
- splitNumber: 4,
- shape: 'circle',
- name: {
- formatter:'{value}',
- textStyle: {
- color:'#72ACD1'
- }
- },
- splitArea: {
- areaStyle: {
- color: [
- 'rgba(114, 172, 209, 0.2)',
- 'rgba(114, 172, 209, 0.4)',
- 'rgba(114, 172, 209, 0.6)',
- 'rgba(114, 172, 209, 0.8)',
- 'rgba(114, 172, 209, 1)'
- ],
- shadowColor: 'rgba(0, 0, 0, 0.3)',
- shadowBlur: 10
- }
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.5)'
- }
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.5)'
- }
- }
- }
- ],
- series: [
- {
- type: 'radar',
- itemStyle: {
- emphasis: {
- // color: 各异,
- lineStyle: {
- width: 4
- }
- }
- },
- data: [
- {
- value: [60, 30, 50, -10, 1000, 5],
- name: '图二',
- areaStyle: {
- normal: {
- color: 'rgba(255, 255, 255, 0.5)'
- }
- }
- }
- ]
- }
- ]
- };
- var myChart = echarts.init(document.getElementById('main'));
- myChart.setOption(option, true);
- });
- </script>
|