团课详情

98d3fa40 · 颜景龙 · bd15de24 · 98d3fa40 · 98d3fa40 · 98d3fa40
Commit 98d3fa40 authored Nov 28, 2017 by 颜景龙
course/echarts.min.js
page2.html → course/groupIntro.html
course/main.css
--- a/course/echarts.min.js
+++ b/course/echarts.min.js
--- a/page2.html
+++ b/page2.html
 <!DOCTYPE html> 
 <html> 
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=">
-    <meta http-equiv="x-dns-prefetch-control" content="on">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=.0, maximum-scale=.0, user-scalable=no">
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=">
+	<meta http-equiv="x-dns-prefetch-control" content="on">
+	<meta name="renderer" content="webkit">
+	<meta name="viewport" content="width=device-width, initial-scale=.0, maximum-scale=.0, user-scalable=no">
 	<meta name="format-detection" content="telephone = no"/>
-    <title>page1</title>
+	<title>page1</title>
 	<link rel="stylesheet" href='./main.css'>
 	<script src="./echarts.min.js"></script>
+	<style>
+		#chart {
+			width: 100%;
+			height: 12rem;
+		}
+	</style>
+</head>
 <body class='page2'>
    <div class='title'>
 		<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARoAAAE0CAYAAADzFfz8AAAGHklEQVR4nO3dTYsd5B2H4ZyZwxgno2IShZpUwap5MZbQaluqYEGtdtWFooJ+BRE3ogvRhStRC6UfoFBKpcsWaulCKNjiUsWXhSKC1pVujKaQF0f3rv7KfaKZ68r2+fGcgeGeZ3PI4sixm7Z3Df3q1lumk13333v36Pxll+8f37H46h/fTS//95Xx5vnf/SH4JN/eYjH/PXvqycfHmxuuPzrefH7y5Hjz0kv/Hm/+9OcXRufXxjcADAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBuefPNvxiPnn3m6fFmc3NzvOH88d7775/rj3BOXfnDg+PN4cPXBZ/k6376k+PjzcbGxui8Fw2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogNzyll/Ov1S5e/fu4KMA3xcPPnDf6LwXDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRAbrm1tTUera3N+/TppydG5994863xHceP/3i82bzwwvEGdrp9+/aOznvRADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbILVd10auvvT46/9DDj47v+Otf/jjeHDp07XgDzHjRADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbIrexLlSdP/n90/vTp0+M7vskG6HnRADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogtzzXH4CdYjFeXHLJxePNnb++bXT+xInPxne8/J9XxpudzosGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiDnu06sxMEDV4w3jz36yHhz1523j86fPfvF+I6//f0f483ll+0fb84nXjRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXK+VMlKHD1yaLy5/ujh8WZ9fX28mbrn7t+ON4vFzv6bvrN/emAlhAbICQ2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaIOdLlazEcnn+/KqdTz/LqnjRADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAueWqLlpfWx+dXywW4zsWa/MN0POiAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QW9mXKq+86uDo/G/uumN8x95LLx1vgJ4XDZATGiAnNEBOaICc0AA5oQFyQgPkhAbICQ2QExogJzRATmiA3HLXru2VXHTNj64enX/yicfGd+zZszneAHPb27NueNEAOaEBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgtP/jwo/HozJkz84uWs/8U86KLtsZ3AKvxxptvj8570QA5oQFyQgPkhAbICQ2QExogJzRATmiAnNAAOaEBckID5JYv/vNf49ENx46ONz//2Y2j81tbe8Z3wE536tSp8eadd98bb5597vej8140QE5ogJzQADmhAXJCA+SEBsgJDZATGiAnNEBOaICc0AA5oQFyiyPHbtqejvbv2ze+6MCBH4zOb1ywMb4DdrqzZ86ONx9//Ml488GH/xud96IBckID5IQGyAkNkBMaICc0QE5ogJzQADmhAXJCA+SEBsgJDZD7EhEJZarJIaQOAAAAAElFTkSuQmCC'/>
 		<span>课程介绍</span>
 	</div>
-	<div class="pic" id='main'></div>
+	<div id="chart">
+	</div>
    <div class='main'>
 	    <h3>课程简介</h3>
        <p class='introduction'>
-		    战斗有氧是一种将中国武术、泰拳、西洋拳击、空手道、跆拳道等结合在一起的一系列搏击格斗动作，是完全解除行、简单易学的大运动量训练课程。
 		</p>
        <h3>训练效果</h3>
        <p class='trainingEffect'>
-		    快速减脂塑形，高强度间歇性的搏击动作，消耗大量卡路里，修正肌肉轮廓，每周1-2次减脂效果非常明显<br/>
-			改善心肺功能，调节情绪、建立自信。在帮你锻炼耐力的同时提高全身的力量和灵活性，
 		</p>	
 		<h3>适合人群</h3>
-		<p>
-		    <span class='suitableFor'>适合对搏击感兴趣，有减脂需求和提升心肺功能需求的人。</span><br/>
-			<span class='attention'>孕妇和心血管疾病等基础病的患者不宜参加。</span>
+		<p class="suitableFor">
 		</p>
 		<h3>常见问题</h3>
 		<p class='question'>
-		    Q：女生可以参加这个课程吗？<br/>
-			A：可以。想要减脂的女生非常适合这个课程，长期坚持这样的高强度有氧训练再配合力量训练能快速帮助我们塑造自己的身体线条，女生打拳也可以很帅！
 		</p>	
 	</div>
 	<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
 	<script>
+
+		function getUrlParam(name) {
+			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+			var r = window.location.search.substr(1).match(reg);  //匹配目标参数
+			if (r != null) return unescape(r[2]); return null; //返回参数值
+		}
 	    $(document).ready(function() {
            $(window).ready(function(){
                $('html').css({'font-size':$(window).width()/375*20});
@@ -46,64 +53,87 @@
            $(window).resize(function(){
                $('html').css({'font-size':$(window).width()/375*20});
            });
-			var apiUrl = 'http://47.92.120.206:18080/wedo-fit';
-			var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
-			var r = window.location.search.substr(1).match(reg);
-			var id = '';
-			if(r != null) id = unescape(r[2]);
-			else id = '8363627497927680';
-			var arr = [];
-			$.ajax({
-			    url: apiUrl + '/wedofit/class/group/intro/' + id,
-				type: 'GET',
-				dataType: 'json',
-				success: function(resp){
-				    $('.question').text(resp.data.question);
-					$('.introduction').text(resp.data.introduction);
-					$('.trainingEffect').text(resp.data.trainingEffect);
-					$('.suitableFor').text(resp.data.suitableFor);
-					$('.attention').text(resp.data.attention);
-					arr = [resp.data.consumeLevel,resp.data.coordinationLevel,resp.data.pliableLevel,resp.data.strengthLevel,resp.data.heartbeatLevel];
-					var option = {
-						tooltip: {
-							trigger: 'axis'
-						},
-						textStyle: {
-						    fontSize : 20
-						},
-						radar: [
-							{
-								indicator: [
-									{text: '消耗', max: 5},
-									{text: '协调', max: 5},
-									{text: '柔韧', max: 5},
-									{text: '力量', max: 5},
-									{text: '心肺', max: 5}
-								],
-								center: ['50%','50%'],
-								radius: 60
-							}
-						],
-						series: [
-							{
-								type: 'radar',
-								 tooltip: {
-									trigger: 'item'
-								},
-								itemStyle: {normal: {areaStyle: {type: 'default'}}},
-								data: [
-									{
-										value: arr
+			var apiUrl = 'http://192.168.31.182:8080/wedo-fit';
+			var id = getUrlParam('id');
+
+			if (id) {
+				var arr = [];
+				$.ajax({
+					url: apiUrl + '/wedofit/class/group/intro/' + id,
+					type: 'GET',
+					dataType: 'json',
+					success: function(resp){
+						$('.question').text(resp.data.question);
+						$('.introduction').text(resp.data.introduction);
+						$('.trainingEffect').text(resp.data.trainingEffect);
+						$('.suitableFor').text(resp.data.suitableFor);
+						
+						arr = [resp.data.consumeLevel,resp.data.coordinationLevel,resp.data.pliableLevel,resp.data.strengthLevel,resp.data.heartbeatLevel];
+						var option = {
+							tooltip: {
+								trigger: 'axis'
+							},
+							textStyle: {
+								fontSize : $(window).width()/375*20
+							},
+							axisPointer: {
+								show: false
+							},
+							radar: [
+								{
+									indicator: [
+										{text: '消耗', max: 5},
+										{text: '协调', max: 5},
+										{text: '柔韧', max: 5},
+										{text: '力量', max: 5},
+										{text: '心肺', max: 5}
+									],
+									center: ['50%','50%'],
+									//radius: 20rem,
+									shape: 'circle',
+									splitArea: {
+										show: false
+									},
+									splitLine: {
+										lineStyle: {
+										color: [
+											'#c33641', '#c33641',
+											'#c33641', '#c33641',
+											'#c33641', '#c33641'
+										]
+										}
+									},
+									axisLine: {
+										lineStyle: {
+											color: '#c33641'
+										}
 									}
-								]
-							}
-						]
-					};
+								}
+							],
+							series: [
+								{
+									type: 'radar',
+									itemStyle: {normal: {areaStyle: {type: 'default'}}},
+									areaStyle: {
+										normal: {
+										opacity: 1
+										}
+									},
+									symbol: 'none',
+									data: [
+										{
+											value: arr
+										}
+									]
+								}
+							]
+						};

-					myChart.setOption(option);
-				}
-			});
-			var myChart = echarts.init(document.getElementById('main'));
+						myChart.setOption(option);
+					}
+				});
+			}
+			var myChart = echarts.init(document.getElementById('chart'));
 			
 	    })
    </script>

--- a/course/main.css
+++ b/course/main.css
+html, body {
+  margin: 0;
+  padding: 0; }
+
+html {
+  font-size: 20px;
+  background: #333740;
+  color: #fff; }
+
+.page1 {
+  width: 18.75rem;
+  height: 30rem; }
+  .page1 .main {
+    padding: 0 1rem; }
+    .page1 .main h3 {
+      font-size: 0.8rem;
+      text-align: center; }
+    .page1 .main p {
+      font-size: 0.65rem; }
+
+.page2 {
+  width: 18.75rem;
+  height: 30rem; }
+  .page2 .title {
+    width: 100%;
+    height: 1.75rem;
+    line-height: 1.75rem;
+    background: #292c35;
+    font-size: 0.5rem; }
+    .page2 .title img {
+      width: 0.5rem;
+      height: 0.5rem;
+      margin-left: 0.5rem; }
+    .page2 .title span {
+      display: inline-block;
+      font-size: 1rem;
+      text-align: left;
+      margin-left: 0.4rem; }
+  .page2 .pic {
+    width: 100%;
+    height: 10rem; }
+  .page2 .main {
+    padding: 0 1rem; }
+    .page2 .main h3 {
+      font-size: 0.8rem;
+      text-align: center; }
+    .page2 .main p {
+      font-size: 0.65rem; }
+
+/*# sourceMappingURL=main.css.map */