Shenlin / demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cdba8b77 1 parent efdb1d48

canada-life test

Expand all
Inline Side-by-side
Showing 9 changed files with 439 additions and 0 deletions
/*
color
*/
.blur {
-webkit-filter: blur(5px);
/* Chrome, Opera */
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.omit {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.omit.omit1 {
-webkit-line-clamp: 1;
}
.omit.omit2 {
-webkit-line-clamp: 2;
}
.omit.omit3 {
-webkit-line-clamp: 3;
}
.no-indent {
text-indent: 0 !important;
}
.text-important {
color: red;
}
.text-info {
color: #48b3ff;
}
.go-back {
position: absolute;
top: 1rem;
left: 1rem;
font-size: 1rem;
color: white;
}
.arrow-left {
width: 0;
height: 0;
border-width: .2rem;
border-style: solid;
border-color: transparent;
}
/*
school_intro css
*/
.page {
background-color: #ffffff;
}
header.bar {
padding: 0;
}
header.bar:after {
display: none;
}
.header-wrapper {
position: relative;
z-index: -1;
width: 100%;
max-width: 100%;
height: 17.5rem;
/* background height*/
background-repeat: no-repeat;
background-size: cover;
}
nav.bar a:first-child:after {
display: none;
}
nav.bar a:after {
position: absolute;
top: 50%;
bottom: 0;
display: block;
content: '';
width: .05rem;
margin-top: -0.4rem;
height: 0.8rem;
background-color: #e6e6e6;
}
.school_badge {
position: absolute;
top: 3.7rem;
left: calc(50%);
margin-left: -3.5rem;
z-index: 99;
width: 7rem;
height: 7rem;
border-radius: 7rem;
background-color: rgba(255, 255, 255, 0.5);
/*opacity*/
}
.school_badge img {
position: absolute;
width: 6.5rem;
height: 6.5rem;
border-radius: 6.5rem;
top: 3.25rem;
left: calc(50%);
margin: -3rem 0 0 -3.25rem;
}
.school_info {
position: absolute;
top: 10.7rem;
margin-top: .5rem;
text-align: center;
width: 100%;
padding: .5rem 0 .6rem 0;
color: white;
border-bottom: .5rem solid #f0f0f0;
}
.school_info .text {
font-size: 1.25rem;
}
.school_info .collect {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
margin-bottom: .5rem;
background-color: #9dcc26;
}
.school_info .collect .text {
font-size: .5rem;
line-height: 1.3;
}
.school_info .intro {
font-size: .75rem;
margin: .5rem .8rem;
}
.content {
padding-bottom: 2.5rem;
}
.intro-box {
margin-bottom: .5rem;
padding: .8rem .75rem .75rem .75rem;
border-bottom: .5rem solid #f0f0f0;
}
.intro-box:last-child {
border-bottom: 0;
}
.intro-box .title {
position: relative;
text-align: left;
vertical-align: middle;
margin: 0;
}
.intro-box .title:before {
content: '';
display: inline-block;
border: 2px solid #48b4ff;
height: .7rem;
position: absolute;
top: 50%;
margin-top: -0.45rem;
}
.intro-box .title span {
margin-left: .5rem;
}
.intro-box p {
margin: .5em 0;
font-size: .75rem;
text-indent: 1rem;
}
.intro-box .more {
font-size: .7rem;
height: .75rem;
line-height: .75rem;
color: #48b3ff;
}
.intro-box .more .more-link {
background-color: #48b3ff;
color: white;
width: 1rem;
border-radius: .1rem;
text-align: center;
padding: .01rem;
}
.intro-box .more .more-link span {
font-size: .5rem;
}
.intro-box .more div {
display: inline-block;
}
.list-block {
margin: 0;
}
.list-block ul:before {
height: 0;
}
.list-block .item-subtitle {
margin-top: .2rem;
}
.list-block.media-list .item-media {
padding-top: 0.65rem;
padding-bottom: 0.7rem;
}
.list-block.media-list .item-inner {
padding-top: 0.7rem;
padding-bottom: 0.65rem;
}
.media-list {
margin-top: .4rem;
}
.item-media img {
border-radius: 4rem;
}
.item-title {
vertical-align: middle;
line-height: 1rem;
}
.item-title i.sex {
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 4rem;
background-color: #0a8ddf;
font-size: .7rem;
padding-left: .15rem;
color: #ffffff;
}
.notice {
margin-top: .4rem;
padding: .75rem;
border-bottom: .5rem solid #f0f0f0;
font-size: .75rem;
}
.notice .icon {
color: #0a8ddf;
}
.mix-info-wrapper {
padding: .5rem 0;
font-size: .75rem;
border-bottom: .5rem solid #f0f0f0;
}
.mix-info-wrapper .mix-info-media {
padding: .5rem;
position: relative;
display: table;
width: 100%;
max-width: 100%;
}
.mix-info-wrapper .mix-info-media > div {
display: table-cell;
vertical-align: middle;
}
.mix-info-wrapper .mix-info-media .media {
float: left;
height: 2.5rem;
line-height: 2.5rem;
}
.mix-info-wrapper .mix-info-media .media img {
border-radius: 4rem;
vertical-align: middle;
margin-bottom: .2rem;
}
.mix-info-wrapper .mix-info-media .media span {
line-height: 2.5;
margin-left: .3rem;
}
.mix-info-wrapper .mix-info-media .plug {
float: left;
height: 2.5rem;
width: 6.5rem;
color: white;
position: relative;
text-align: right;
}
.mix-info-wrapper .mix-info-media .plug .plug-box {
font-size: .5rem;
text-align: left;
height: 1rem;
line-height: 1rem;
position: absolute;
top: 50%;
min-width: 6rem;
padding-left: .25rem;
margin-left: .4rem;
margin-top: -0.5rem;
border-radius: 2px;
}
.mix-info-wrapper .mix-info-media .plug .plug-box .arrow-left {
position: absolute;
top: 50%;
left: -0.4rem;
margin-top: -0.2rem;
}
.mix-info-wrapper .mix-info-media .plug .plug-box .text {
margin-left: .1rem;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.pay {
background-color: #48b4ff;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.pay .arrow-left {
border-right-color: #48b4ff;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.free {
background-color: #9dcc26;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.free .arrow-left {
border-right-color: #9dcc26;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.expire {
background-color: #dddddd;
color: #969696;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.expire .arrow-left {
border-right-color: #dddddd;
}
.mix-info-wrapper .mix-info-media .plug .plug-box.expire .icon {
color: #969696;
}
.mix-info-wrapper .mix-info-media .plug .ms {
color: #b7b7b7;
float: right;
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.mix-info-wrapper .mix-info-media .time {
line-height: 6;
font-size: .55rem;
color: #b7b7b7;
position: absolute;
top: 0;
bottom: 0;
right: .5rem;
}
.mix-info-wrapper .mix-info-content {
padding: 0 .5rem;
}
.mix-info-wrapper .mix-info-content .tag {
margin-bottom: 1rem;
}
.mix-info-wrapper .mix-info-content .tag span {
padding: .25rem .4rem;
background-color: #f0f0f0;
font-size: .5rem;
border-radius: .2rem;
margin-right: .25rem;
}
.mix-info-wrapper .mix-info-action {
border-top: 1px solid #f0f0f0;
padding-top: .5rem;
position: relative;
}
.mix-info-wrapper .mix-info-action .row > div {
text-align: center;
position: relative;
}
.mix-info-wrapper .mix-info-action .row > div:first-child:after {
display: none;
}
.mix-info-wrapper .mix-info-action .row > div:after {
position: absolute;
top: 50%;
bottom: 0;
display: block;
content: '';
width: .05rem;
margin-top: -0.4rem;
height: 0.8rem;
background-color: #e6e6e6;
}
.mix-info-wrapper .mix-info-action .row > div i {
font-style: normal;
font-weight: normal;
font-size: .7rem;
margin-left: .25rem;
}
.mix-info-wrapper .mix-info-other {
position: relative;
padding: 0 .5rem;
text-align: center;
}
.mix-info-wrapper .mix-info-other .widget {
position: absolute;
top: .8rem;
left: 1rem;
color: white;
font-size: .5rem;
background-color: rgba(142, 142, 142, 0.6);
width: 40%;
padding: .15rem;
border-radius: 1rem;
}
.mix-info-wrapper .mix-info-other .widget div:first-child {
display: inline-block;
position: absolute;
left: 1.5rem;
top: .35rem;
width: 6rem;
font-size: .75rem;
}
.mix-info-wrapper .mix-info-other .widget div:last-child {
background-color: rgba(255, 160, 40, 0.8);
border-radius: 1.5rem;
width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
float: left;
}
.bar {
background-color: white;
}
.test-img {
width: 10rem;
height: 10rem;
background-image: url(/dists/images/logo.png?82b9c7a5a3f405032b1db71a25f67021);
}
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>学校详情</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" href="/dists/lib/sm.css">
<link rel="stylesheet" href="/dists/css/style.css">
</head>
<body>
<div id="app"></div>
<script src="/dists/school.js"></script>
<script src="/dists/lib/sm.js"></script>
<script>$.init()</script>
</body>
</html>