Skip to content

成立 / weiduh5

转到一个项目
Commit 157247df by 颜景龙
Options

增加图标显示

parent a9c44e1c
内嵌 并排
正在显示 包含 383 行增加 和 0 行删除
prime/baseIntroExtend.html 0 → 100644
<!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 name="format-detection" content="telephone = no"/>
<title>基础团课课程详情</title>
<link rel="stylesheet" href='./class.css'>
<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
<style>
.detail-title {
background: #292C35;
color: #FFF;
padding-left: 1.25rem;
line-height: 2rem;
}
.split-line {
height: 0.5rem;
background: #22222c;
}
#className {
border-bottom: 1px solid rgba(255, 255, 255, 1);
padding: 1.25rem 0 1rem 0;
}
ul > li {
list-style: none;
font-size: 1rem;
padding: 0.5rem 0;
}
ul > li > .iconfont {
font-size: 1rem;
margin-right: 0.85rem;
}
#chart {
width: 100%;
height: 15rem;
}
</style>
<body>
<div class="class-banner">
</div>
<div class="class-main">
<h2 id="className"></h2>
<ul class="ul-list">
<li id="trainerName">
<i class="iconfont icon-user"></i>
</li>
<li id="time">
<i class="iconfont icon-naozhong-copy"></i>
</li>
<li id="address">
<i class="iconfont icon-address"></i>
</li>
</ul>
</div>
<div class="split-line">
</div>
<h3 class="detail-title">课程详情</h3>
<div class="class-main">
<div class="class-block">
<div id="chart">
</div>
<h3>课程内容</h3>
</div>
<div class="class-block">
<h3>适合人群</h3>
<p></p>
</div>
<div class="class-block">
<h3>活动建议</h3>
</div>
</div>
<script src="./echarts.min.js"></script>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
var HTTP_URL = 'http://192.168.31.217:8080/wedo';
//var HTTP_URL = 'http://192.168.31.182:8080/wedo-fit';
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*16});
});
$(window).resize(function(){
$('html').css({'font-size':$(window).width()/375*16});
});
var chart = document.getElementById('chart');
var myChart = echarts.init(chart);
var id = getUrlParam('id');
var arrayList = [];
if (id) {
$.get(HTTP_URL+"/wedofit/class/intro/"+id,
function(data){
var result = JSON.parse(data);
if (result.code == 0) {
var obj = result.data;
$('.class-banner').css({'background-image': `url(${HTTP_URL}${obj.imgPath})`, height: $(window).width()*200/375});
$("#className").text(obj.className);
$("<span></span>").text(obj.trainerName).appendTo($("#trainerName"));
$("<span></span>").text(obj.dateTime+' '+ obj.dateWeek + ' ' + obj.datePoint).appendTo("#time");
$("<span></span>").text(obj.address).appendTo("#address");
$("<p></p>").text(obj.introduction).appendTo($(".class-block")[0]);
$("<p></p>").text(obj.suitableFor).appendTo($(".class-block")[1]);
$("<p></p>").text(obj.suggestion).appendTo($(".class-block")[2]);
arrayList = [obj.consumeLevel, obj.coordinationLevel, obj.pliableLevel, obj.strengthLevel, obj.heartbeatLevel];
var option = {
tooltip: {
trigger: 'axis'
},
textStyle: {
fontSize : 16
},
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'}}},
symbol: 'none',
data: [
{
value: arrayList
}
]
}
]
};
myChart.setOption(option);
}
});
}
})
</script>
</body>
</html>
prime/class.css 0 → 100644
html,
body {
margin: 0;
padding: 0;
background: #333740;
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
.class-banner {
width: 100%;
height: 10rem;
background-size: cover;
flex-direction: column;
background-position: center;
}
.class-main {
padding: 0.5rem 1.25rem;
color: #c5c5cd;
}
.class-main .class-block {
border-bottom: 1px solid rgba(255, 255, 255, 1);
padding: 1.25rem 0;
}
.class-main .class-block:last-child {
border-bottom: 0;
/* padding: 30px 0 100px 0; */
}
.class-main .class-block h2,
.class-main .class-block h3 {
display: inline-block;
margin-bottom: 0.25rem;
}
.class-main .class-block p {
font-size: 0.75rem;
line-height: 1rem;
}
.class-main .class-block .label {
color: #EE504F;
font-size: .8rem;
line-height: 2.6rem;
}
.fl-r {
float: right;
text-align: right;
}
.class-status-group {
margin-bottom: 0.25rem;
}
.class-status-group .class-status {
font-size: 0.75rem;
margin-right: 0.62rem;
}
.class-status-group .class-status::before {
content: '';
height: 0.4rem;
width: 0.4rem;
display: inline-block;
background: #c5c5cd;
vertical-align: middle;
margin-right: 0.4rem;
border-radius: 0.4rem;
}
.class-status-group .class-status.success::before {
background: #69C171;
}
.time-pannel {
background: #7A7F8B;
color: #FFF;
border-radius: 0.25rem;
}
.time-pannel .time-header {
border: 0;
outline: 0;
border-bottom: 1px solid #D8D8D8;
padding: 0.8rem 0 0 3.75rem;
}
.time-pannel .time-header li {
display: inline-block;
font-size: 0.75rem;
width: 0.95rem;
height: 100%;
border: 0;
outline: 0;
text-align: center;
position: relative;
float: left;
padding-bottom: 6px;
}
.time-pannel .time-header li::before {
content: '';
height: 6px;
width: 1px;
border: 0;
outline: 0;
background: #FFF;
display: inline-block;
position: absolute;
bottom: 0;
left: 50%;
}
.time-pannel .time-header li:nth-child(even)::before {
height: 2px;
}
.time-pannel .time-day {
width: 3.75rem;
display: inline-block;
height: 1rem;
font-size: 0.75rem;
text-align: center;
float: left;
}
.time-pannel .time-line {
height: 0.7rem;
background: aliceblue;
width: 16.15rem;
margin-top: 0.15rem;
float: left;
transform: translateX(0.475rem);
}
.time-pannel .time-line li {
display: inline-block;
background: #FFF;
/* width: 0.475rem; */
height: 0.7rem;
float: left;
background: #58A900;
position: absolute;
}
.sub-text{
font-size: 1rem;
margin-left: 0.3rem;
vertical-align: bottom;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.ptb-10 {
padding: 0.8rem 0;
}
.mb10 {
margin-bottom: 0.8rem;
}
.class-main .class-block .label-price {
color: #EE504F;
font-size: .8rem;
font-size: 1.5rem!important;
}
prime/echarts.min.js 0 → 100644
此文件的差异太大，无法显示。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此消息的编辑！
请 注册 或 登录 后发表评论