console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
{$contest.title}
</title>
<script type="text/javascript" src="__PUBLIC__/js/jquery.js">
</script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.lazyload.min.js">
</script>
<script language="javascript">
$(function() {
$('#do_comment').live("click", function() {
$.post("{:U('Baoming/comment')}", {
id: $("#id").val(),
content: $('#content').val()
},
function(result) {
if (result.code == '0') {
alert('评价信息提交完成！');
} else if (result.code == '1') {
alert('对不起，您还没有关注本公众号，请先关注后再提交评论！');
window.location.href = result.url;
} else if (result.code == '2') {
alert('评论字数太少！');
}
get_comment($("#id").val());
},
'json');
});
$("acticle img").lazyload({
threshold: 200,
effect: "fadeIn"
});
}) function get_comment(id) {
$.post("{:U('Baoming/get_comment')}", {
id: id
},
function(result) {
$("#comment").html(result);
});
}
</script>
</head>
<body>
<div style="display:none;">
<img src="__PUBLIC__/images/baoming_logo.jpg">
</div>
<header>
<nav>
<img src="https://raw.githubusercontent.com/juezhidao/juezhidao.github.io/master/images/logo-150.png"
alt="">
</nav>
<div>
<h4>
{$contest.title_2}
</h4>
<p>
当前报名人数：
<span>
{$count}
</span>
</p>
<br>
</div>
<br>
<div>
<label for="a">
<a href="#bmqd" style="color:#1c1c1c">
大赛客服
</a>
</label>
</div>
</header>
<h1>
参赛作品
<br />
<span style="font-size:.5rem;opacity:0.3">
works
</span>
</h1>
<acticle>
<div class="select">
<span>
{$area.name}
</span>
<div>
<if condition="$prev_area neq ''">
<a href="{:U('index', array('cid'=>$cid, 'caid'=>$prev_area['id']))}">
上一个赛区
</a>
</if>
<if condition="$next_area neq ''">
<a href="{:U('index', array('cid'=>$cid, 'caid'=>$next_area['id']))}">
下一个赛区
</a>
</if>
</div>
</div>
<hr style="opacity:0.3">
<div style="width:100%;text-align:center">
<volist name="contestant_list" id="vo">
<div class="child">
<img src="{{$vo.avatar}}" alt="" />
<div>
<span>
{{$vo.title}}
</span>
<span>
{{$vo.name}}
</span>
<span>
<span>
{{$vo.from}}
</span>
/
<span>
{{$vo.id}}
</span>
</span>
</div>
<span>
>
</span>
</div>
</volist>
</div>
</acticle>
<footer>
<h1>
岛主寄语
<br />
<span style="font-size:.5rem;opacity:0.3">
letter
</span>
</h1>
<br>
<div style="margin-top:0;background:none;color:#1c1c1c">
<h5 style="margin:auto;text-align:justify;width:60%;color:#6d6d6d;line-height:30px">
{$contest.content}
</h5>
</div>
<br>
</footer>
<footer>
<h1 id="bmqd">
报名渠道
<br />
<span style="font-size:.5rem;opacity:0.3">
sign up
</span>
</h1>
<h5>
请确保您已详细阅读
<label for="b" style="color:#c8b273">
报名须知
</label>
后
</h5>
<h5>
请将您的相关信息发送给
</h5>
<h5>
本次大赛组委会报名部老师
</h5>
<h4>
小创老师
</h4>
<br>
<hr>
<br>
<a href="#wechat">
<h5 id="wechat">
<img src="//jzd.y13e.com/Uploads/image/20180118/20180118154614_88007.jpg">
</h5>
</a>
<br>
<a href="tel:18621898675">
<h5>
电话联系:18621898675
</h5>
</a>
<div>
<H4>
版权归觉之岛所有
</H4>
<h5>
觉之岛 —— 一座帮助孩子和父母提升生命能量的岛
</h5>
<h6>
An island of wisdom which will help kids and parents find the true energy
of life
</h6>
</div>
</footer>
</body>
</html>
body {
color: rgba(0, 0, 0, 0.9);
font-size: 15px;
line-height: 1.5;
background: #f2f2f2;
font-family: poppin, Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
margin: 0;
padding: 0;
overflow-x:hidden
}
a {
text-decoration: none;
}
h5 {
text-align: center;
}
h6 {
margin: 0px;
line-height: 32px;
}
header {
margin: 0;
width: 100%;
padding-bottom: 10%;
background: #1c1c1c;
background-image: url('__PUBLIC__/images/180985f2ca15.jpg');
background-size: 100%;
background-position: 50%;
background-repeat: no-repeat;
text-align: center;
color: #fcfaf2;
}
header>nav>img {
width: 20vw;
max-width: 150px;
float: left;
}
header>div {
clear: both;
}
header>div>label {
margin: 5vw;
}
header>div:nth-of-type(2)>label:nth-of-type(1) {
padding: 10px 30px;
background: #fcfaf2;
border: 3px solid #fcfaf2;
border-radius: 30px;
color: #1c1c1c;
}
header>div:nth-of-type(2)>label:nth-of-type(1):hover {
border: 3px solid #c8b273;
color: #fcfaf2;
font-weight: bold;
background: #c8b273;
}
header>div:nth-of-type(2)>label:nth-of-type(2) {
padding: 10px 30px;
border: 3px solid #fcfaf2;
border-radius: 30px;
color: #fcfaf2;
}
header>div:nth-of-type(2)>label:nth-of-type(2):hover {
border: 3px solid #c8b273;
color: #fcfaf2;
font-weight: bold;
background: #c8b273;
}
acticle {
width: 100%;
margin: 0;
padding: 0;
}
acticle>a {
border-top: 3px solid #1c1c1c;
float: left;
width: 45%;
margin: 2.5%;
background: #f2f2f2;
text-align: center;
display: block;
color: #1c1c1c;
}
#b:checked+section:nth-of-type(1),
#d:checked+section:nth-of-type(2) {
display: block
}
acticle>a>img {
width: 50%;
margin-top: 10%;
}
acticle>a>div>p {
width: 50%;
margin: 10% 25%;
font-weight: bold;
height: 40px;
}
acticle>a>div>label:nth-of-type(1)>h3 {
background-image: -moz-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -webkit-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -ms-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
display: block;
padding: 4%;
font-weight: 900;
color: #1c1c1c;
font-size: 12px;
height: 40px;
line-height: 18px;
}
acticle>a>div>label:nth-of-type(2)>h5 {
background: #f2f2f2;
padding: 4%;
color: #1c1c1c;
}
footer>h1,
body>h1 {
text-align: center;
background-image: -moz-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -webkit-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -ms-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
width: 100%;
margin: 0%;
padding: 3% 0;
clear: both;
}
footer>h4 {
width: 50%;
background: #313131;
color: #fcfaf2;
text-align: center;
margin: 0 25%;
padding: 2% 0;
border-radius: 30px;
}
footer>div {
text-align: center;
margin-top: 10%;
padding: 5%;
background: #1c1c1c;
color: #fcfaf2;
}
footer>footer>div>h4 {
background-image: -moz-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -webkit-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
background-image: -ms-linear-gradient( -45deg, rgb(207, 169, 114) 0%, rgb(178, 136, 80) 100%);
}
footer>hr {
width: 50%;
}
footer>a>h5 {
padding: 2% 0;
width: 50%;
margin: 0 25%;
color: #1c1c1c;
border: 1px solid #1c1c1c;
}
footer>a:nth-of-type(2)>h5,
footer>a:nth-of-type(4)>h5 {
color: #fcfaf2;
background: #1c1c1c;
}
h1 {
font-size: 24px;
font-weight: 900;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
header>div:nth-of-type(2)>label:nth-of-type(1) {
font-size: 14px;
}
header>div:nth-of-type(2)>label:nth-of-type(2) {
font-size: 14px;
}
header>br {
display: none;
}
footer>h1,
body>h1 {
font-size: 18px;
}
acticle>div {
width: 44%;
margin: 3%;
}
footer img {
width: 100%;
}
.select {
width: 100%;
display: flex;
background: #fff;
justify-content: space-around;
color: rgba(0, 0, 0, 0.9);
margin: 18px 0;
}
.select>* {
margin: 10px;
}
.select>div>if>a {
color: #999;
margin: 0 3px;
}
.child {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
width: 98%;
margin: 18px 0 18px -2%;
border-radius: 6px;
}
.child>img {
padding: 9px;
}
.child>div {
display: flex;
flex-grow: 8;
flex-direction: column;
align-items: flex-end;
text-align: right;
padding: 0 18px;
}
.child>div>span:first-child {
font-size: 1.2rem;
font-weight: bold;
color: rgba(0, 0, 0, 0.9);
}
.child>div>span:nth-of-type(2) {
background: #e3bd8d;
width: 30%;
color: #fff;
padding: 0 3px;
}
.child>div>span:last-child {
font-size: 0.9rem;
color: #999;
}
.child>div>span:first-child {
font-size: 1.2rem;
font-weight: bold;
}
.child>div>span {
padding: 18px 0;
}
.child>span {
font-size: 1.5rem;
padding: 0 9px;
}