canada-life test

+/*
+  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);
+}

+<!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>