Skip to content

成立 / weiduh5

转到一个项目
Commit 2c713dea by 颜景龙
Options

增加私教详情静态页面

parent 6a8a0ca4
内嵌 并排
正在显示 包含 510 行增加 和 0 行删除
.gitignore 0 → 100644
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
\ No newline at end of file
html/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: 20px;
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;
}
html/class.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'>
<body>
<div class="class-banner">
</div>
<div class="class-main">
<div class="class-block">
<h2 id="className">瑜伽课／小雅</h2>
<label id="classTime" class="fl-r label">10课时</label>
</div>
<div class="class-block">
<div>
<h2>可约时间</h2>
<label class="fl-r label">查看7天</label>
</div>
<div class="class-status-group">
<span class="class-status success">可约时间</span>
<span class="class-status">不可约时间</span>
</div>
<div class="time-pannel">
<ul class="time-header clearfix">
<li>07</li>
<li>&nbsp;</li>
<li>09</li>
<li>&nbsp;</li>
<li>11</li>
<li>&nbsp;</li>
<li>13</li>
<li>&nbsp;</li>
<li>15</li>
<li>&nbsp;</li>
<li>17</li>
<li>&nbsp;</li>
<li>19</li>
<li>&nbsp;</li>
<li>21</li>
<li>&nbsp;</li>
<li>23</li>
<li>&nbsp;</li>
</ul>
<div id="timeBody" class="time-body ptb-10">
<!-- <div class="clearfix mb10">
<div class="time-day">
今日
</div>
<ul class="time-line clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<ul>
</div>
<div class="clearfix">
<div class="time-day">
明天
</div>
<ul class="time-lin clearfix">
<ul>
</div> -->
</div>
</div>
</div>
<div class="class-block">
<h3>课程简介</h3>
</div>
<div class="class-block">
<h3>课程时间</h3>
</div>
<div class="class-block">
<h3>适合人群</h3>
</div>
<div class="class-block">
<h3>活动建议</h3>
</div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
var HTTP_URL = 'http://192.168.31.217:8080/wedo';
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; //返回参数值
}
function caculateWidth(list) {
var start = 0;
var count = 0;
var result = [];
for (var i=0; i < list.length; i++) {
start++;
if (list[i] === 0) {
if (count !== 0) {
result.push({
start: i - count,
width: count
});
}
count = 0;
continue;
}
if (list[i] === 1) {
count++;
if (i === (list.length-1)) {
result.push({
start: i - count + 1,
width: count
});
break;
}
}
}
return result;
}
// function dayLine() {
// }
$(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});
});
// $('.class-banner').css({'background-image': `url(./banner.png)`, height: $(window).width()*200/375});
var id = getUrlParam('id');
var dayList = ['今天', '明天', '后天'];
if (id) {
$.get(HTTP_URL+"/wedofit/personalClass/webDetails/"+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.classImg})`, height: $(window).width()*200/375});
$("<p></p>").text(obj.introduction).appendTo($(".class-block")[2]);
$("<p></p>").text(obj.classTime).appendTo($(".class-block")[3]);
$("<p></p>").text(obj.suitableFor).appendTo($(".class-block")[4]);
$("<p></p>").text(obj.suggestion).appendTo($(".class-block")[5]);
for (var j=0; j<dayList.length; j++) {
var timeLine = $('<div></div>').addClass("clearfix mb10");
$('<div></div>').addClass('time-day').text(dayList[j]).appendTo(timeLine);
var timeUL = $("<ul></ul>").addClass("time-line clearfix");
if (obj.appointmentTime && obj.appointmentTime.length > 0 && obj.appointmentTime[j].length > 0) {
var lineList = caculateWidth(obj.appointmentTime[j]);
for (var l=0; l<lineList.length; l++) {
$("<li></li>").css({'width': lineList[l].width*0.475+'rem', left: lineList[l].start*0.475+'rem'}).appendTo(timeUL);
}
}
timeLine.append(timeUL);
$('#timeBody').append(timeLine);
}
}
});
}
})
</script>
</body>
</html>
html/primeclass.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'>
<body>
<div class="class-banner">
</div>
<div class="class-main">
<div class="class-block">
<h2 id="className"></h2>
<label id="classPrice" class="fl-r label-price"></label>
</div>
<div class="class-block">
<h3>课程内容</h3>
</div>
<div class="class-block">
<h3>课程时间</h3>
</div>
<div class="class-block">
<h3>适合人群</h3>
<p></p>
</div>
<div class="class-block">
<h3>活动建议</h3>
</div>
</div>
<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 id = getUrlParam('id');
if (id) {
$.get(HTTP_URL+"/wedofit/personalClass/webDetails/"+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.classImg})`, height: $(window).width()*200/375});
$("#className").text(obj.className);
$("#className").append($("<span></span>").text((obj.minEnrollment ? obj.minEnrollment : '-')+'节起售').addClass("sub-text"));
$("#classPrice").text('¥ '+obj.totalPrice)
$("<p></p>").text(obj.introduction).appendTo($(".class-block")[1]);
$("<p></p>").text(obj.classTime).appendTo($(".class-block")[2]);
$("<p></p>").text(obj.suitableFor).appendTo($(".class-block")[3]);
$("<p></p>").text(obj.suggestion).appendTo($(".class-block")[4]);
}
});
}
})
</script>
</body>
</html>
package.json 0 → 100644
{
"name": "staticpage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server -a 0.0.0.0 -p 9090"
},
"author": "",
"license": "ISC"
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此消息的编辑！
请 注册 或 登录 后发表评论