张泽世 / yohobuywap-node · Commits

Go to a project

Authored by yyq
Commit 8c742a7f24fa11b9ed913ab06a6d7661f41345f3 1 parent ce76de21

layout css

Inline Side-by-side
Showing 3 changed files with 216 additions and 2 deletions
1 -<div class="systemUpdate">  
2 - <a href="index/systemUpdate" class="systemHeader">Yoho!Buy有货关于系统升级的公告</a> 1 +<div class="system-update">
  2 + <a href="index/systemUpdate" class="system-header">Yoho!Buy有货关于系统升级的公告</a>
3 <span>X</span> 3 <span>X</span>
4 </div> 4 </div>
  1 +.yoho-footer {
  2 + font-size: 24px;
  3 + background-color: #fff;
  4 + position: relative;
  5 +
  6 + .op-row {
  7 + padding: 0 30px;
  8 + height: 120px;
  9 + line-height: 120px;
  10 + span {
  11 + display: inline-block;
  12 + overflow: hidden;
  13 + }
  14 + a {
  15 + display: inline-block;
  16 + overflow: hidden;
  17 + }
  18 + .user-name {
  19 + text-decoration: underline;
  20 + margin-left: 0.3em;
  21 + margin-right: 1em;
  22 + max-width: 200px;
  23 + text-overflow: ellipsis;
  24 + white-space: nowrap;
  25 + }
  26 +
  27 + .back-to-top {
  28 + position: absolute;
  29 + right: 40px;
  30 + }
  31 +
  32 + .sep-line {
  33 + margin: 0 0.3em;
  34 + }
  35 + }
  36 +
  37 + .copyright {
  38 + height: 120px;
  39 + line-height: 120px;
  40 + border-top: 1px solid #ccc;
  41 + text-align: center;
  42 + color: #666;
  43 + background-color: #eee;
  44 + }
  45 +
  46 + &.bottom {
  47 + position: fixed;
  48 + width: 100%;
  49 + bottom: 0;
  50 + }
  51 +
  52 +}
  1 +@define-extend nav {
  2 + display: block;
  3 + position: absolute;
  4 + top: 0;
  5 + width: 90px;
  6 + height: 90px;
  7 + font-size: 20PX;
  8 + line-height: 90px;
  9 + color: #fff;
  10 + text-align: center;
  11 + outline: none;
  12 +}
  13 +
  14 +.yoho-header {
  15 + position: relative;
  16 + background-color: #000;
  17 + color: #fff;
  18 + width: 100%;
  19 + overflow: hidden;
  20 + height: 90px;
  21 + line-height: 90px;
  22 + z-index: 1;
  23 +
  24 + &.boys {
  25 + background-image: linear-gradient(#323232, #414141);
  26 + }
  27 +
  28 + &.girls {
  29 + background: #ff88ae;
  30 + }
  31 +
  32 + &.kids {
  33 + background: #7ad9f9;
  34 + }
  35 +
  36 + &.life-style {
  37 + background: #4f4138;
  38 + }
  39 +
  40 + a.highlight {
  41 + background: rgba(200, 200, 200, 0.1);
  42 + }
  43 +
  44 + .nav-back {
  45 + @extend nav;
  46 + left: 10px;
  47 + }
  48 +
  49 + .nav-home {
  50 + @extend nav;
  51 + right: 10px;
  52 + }
  53 +
  54 + .nav-btn {
  55 + @extend nav;
  56 + right: 10px;
  57 + font-size: 14PX;
  58 + }
  59 +
  60 + .nav-title {
  61 + position: absolute;
  62 + margin-left: 100px;
  63 + margin-right: 100px;
  64 + height: 100%;
  65 + font-size: 36px;
  66 + color: #fff;
  67 + font-weight: bold;
  68 + top: 0;
  69 + right: 0;
  70 + left: 0;
  71 + overflow: hidden;
  72 + white-space: nowrap;
  73 + text-overflow: ellipsis;
  74 + text-align: center;
  75 + }
  76 +
  77 +}
  78 +
  79 +.system-update {
  80 + width: 100%;
  81 + height: 90px;
  82 + overflow: hidden;
  83 + line-height: 90px;
  84 + display: none;
  85 + background-image: linear-gradient(#323232, #414141);
  86 +
  87 + .system-header {
  88 + width: 85%;
  89 + height: 100%;
  90 + overflow: hidden;
  91 + font-size: 60px;
  92 + color: #fff;
  93 + float: left;
  94 + text-align: center;
  95 + }
  96 + span {
  97 + width: 14%;
  98 + height: 100%;
  99 + overflow: hidden;
  100 + float: left;
  101 + text-align: center;
  102 + font-size: 80px;
  103 + font-weight: bold;
  104 + color: #fff;
  105 + }
  106 +}
  107 +
  108 +.homebuttom {
  109 + width: 100%;
  110 + height: 90px;
  111 + overflow: hidden;
  112 + border-top: 1px solid rgba(255, 255, 255, 0.5);
  113 + color: #fff;
  114 + z-index: 2;
  115 + position: relative;
  116 +
  117 + &.boys {
  118 + background-image: linear-gradient(#323232, #414141);
  119 + }
  120 +
  121 + &.girls {
  122 + background: #ff88ae;
  123 + }
  124 +
  125 + &.kids {
  126 + background: #7ad9f9;
  127 + }
  128 +
  129 + &.life-style {
  130 + background: #4f4138;
  131 + }
  132 +
  133 + ul {
  134 + width: 100%;
  135 + height: 90%;
  136 + overflow: hidden;
  137 + padding-top: 12px;
  138 +
  139 + li {
  140 + width: 25%;
  141 + height: 100%;
  142 + overflow: hidden;
  143 + float: left;
  144 + text-align: center;
  145 + i {
  146 + width: 100%;
  147 + height: 40%;
  148 + display: block;
  149 + color: #fff;
  150 + margin-bottom: 8px;
  151 + }
  152 + span {
  153 + width: 100%;
  154 + height: auto;
  155 + overflow: hidden;
  156 + display: block;
  157 + line-height: 40px;
  158 + color: #fff;
  159 + }
  160 + }
  161 + }
  162 +}