l-hammer/YDTemplate

View on GitHub
src/assets/examples/web.scss

Summary

Maintainability
Test Coverage
/**
 * 为避免打包代码量过大,较大的(大于一百行)第三方样式建议不要使用@import引入,使用CDN引入即可
 * 例如:swiper.scss就不要使用@import引入,直接使用<link rel="stylesheet" href="https://static.yindou.com/web/css/swiper.min.css">
 */

@import "../normalize/index.scss";
/* resets */

@import "../iconfonts/index.scss";
/* 常用图标 */

@import "../animation/index.scss";
/* 清除浮动 */

@import "../mixins/index.scss";
/* mixins */

@import "../perfect-scrollbar/index.scss";
@import "../modal/index.scss";
.clearfix {
  @include clearfix();
}

* {
  box-sizing: border-box;
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
}

p {
  margin: 10px 0;
  user-select: none;
}

html,
body {
  /* height: 100%; */
  line-height: 1;
  position: relative;
  /* user-select: none; */
  -webkit-font-smoothing: antialiased;
}

.ft-14 {
  font-size: 14px;
}

.ft-15 {
  font-size: 15px;
}

.ft-16 {
  font-size: 16px;
}

.ft-17 {
  font-size: 17px;
}

.primary {
  color: #9c0403 !important;
}

.gold_bag {
  display: inline-block;
  width: 45px;
  height: 40px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/icon_bag.png') no-repeat center;
}

.back_index {
  display: block;
  width: 62px;
  height: 62px;
  line-height: 18px;
  padding: 13px 17px;
  border-radius: 50%;
  color: #570003;
  background: #ffe4a8;
  position: fixed;
  top: 26px;
  left: 50%;
  margin-left: 502px;
  z-index: 100;
}

.floor {
  width: 100%;
  position: relative;
}

.floor1 {
  height: 616px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg1_min.jpg') no-repeat center;
}

.floor2 {
  height: 947px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg2_unme_min.jpg') no-repeat center;
  padding-top: 196px;
}

.floor2.islogin {
  height: 1173px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg2_me_min.jpg') no-repeat center;
  padding-top: 196px;
}

.floor3 {
  height: 1009px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg3_min.jpg') no-repeat center;
  padding-top: 256px;
}

.floor4 {
  height: 943px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg4_min.jpg') no-repeat center;
  padding-top: 195px;
}

.floor4.islogin {
  height: 1013px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg4_me_min.jpg') no-repeat center;
  padding-top: 195px;
}

.floor5 {
  height: 1595px;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/4annual_bg5_min_min.jpg') no-repeat center;
  padding-top: 256px;
}

.floor p.con {
  width: 1000px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.floor a.btn {
  display: block;
  width: 335px;
  height: 54px;
  color: #960302;
  background: #ffe9a1;
  border-radius: 8px;
  text-align: center;
  line-height: 54px;
  font-size: 23px;
  font-weight: 500;
  position: absolute;
  top: 572px;
  left: 50%;
  margin-left: -168px;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, .6);
}

.floor a.btn:active {
  background: rgba(255, 233, 161, .9);
}

.floor a.btn.primary {
  top: 572px;
  background: #9c0403;
  color: #ffffff !important;
  border: none;
}

.floor a.btn.primary:active {
  background: rgba(156, 4, 3, .9);
}

.floor .rules {
  width: 1000px;
  margin: 0 auto;
  color: #ffffff;
  margin-top: 476px;
  padding-left: 315px;
  font-weight: 500;
}

.floor .rules p.txt {
  font-size: 13px;
}

.floor2 .table-container {
  width: 1000px;
  margin: 63px auto 0;
}

.floor2 .table-container .table {
  float: left;
  width: 614px;
  background: #ffe9a1;
  margin-left: 15px;
  border: 3px solid #b41118;
  border-radius: 36px;
  color: #960302;
  overflow: hidden;
  font-size: 17px;
}

.floor2 .table-container .table .row.header {
  font-weight: 900;
  font-size: 20px;
}

.floor2 .table-container .table .row {
  width: 100%;
  width: 608px;
}

.floor2 .table-container .table span {
  float: left;
  width: 50%;
  height: 60px;
  padding: 10px 0;
  line-height: 40px;
  text-align: center;
  border: 3px solid #b41118;
  border-top-width: 0;
  border-left-width: 0;
}

.floor2 .table-container .table .row.last span {
  border-bottom-width: 0;
}

.floor2 .table-container .table span .gold_bag {
  vertical-align: middle;
}

.floor2 .table-container .table span.even {
  border-right-width: 0;
}

.floor2 .table-container .table span.last {
  border-bottom-width: 0;
}

.floor2 .table-container .sequence {
  float: left;
  width: 72px;
  background: #ffe9a1;
  margin-left: 134px;
  margin-top: 58px;
  border-radius: 36px;
  border: 3px solid #b41118;
}

.floor2 .table-container .sequence span {
  display: block;
  color: #960302;
  width: 100%;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 23px;
}

.floor2 .table-container .sequence span.border {
  height: 63px;
  border: 3px solid #b41118;
  border-left-width: 0;
  border-right-width: 0;
  line-height: 57px;
}

.floor2 .table-container.cash {
  margin-top: 5px;
}

.floor2 .table-container.cash .table {
  margin-left: 220px;
}

.floor2 .table-container.cash .table span {
  width: 33.3333%;
}

.floor2 .cashback {
  width: 800px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  text-indent: 35px;
  margin-top: 52px;
}

.floor.floor2 .rules {
  margin-top: 160px;
}

.floor.floor2.islogin .rules {
  margin-top: 62px;
}

.floor.floor3 .rules {
  margin-top: 409px;
}

.floor.floor3 .rules p.txt {
  color: #9c0403;
}

.floor.floor3 a.btn.gray {
  background: #969696;
  cursor: not-allowed;
  color: #fff;
  box-shadow: -2px 2px 2px rgba(150, 150, 150, .5);
}

.floor.floor4 a.btn {
  top: 520px;
}

.floor.floor4 .rules {
  margin-top: 419px;
}

.floor4.islogin .rules {
  margin-top: 60px;
}

.floor4.islogin .loanmoney {
  width: 800px;
  margin: 309px auto 0;
  text-align: center;
  color: #ffeb9c;
}

.floor4.islogin .loanmoney .value {
  font-size: 78px;
}

.floor4.islogin .loanmoney .key {
  font-size: 32px;
}

.floor.floor5 .con {
  padding: 0 112px 0 134px;
  text-align: left;
  line-height: 30px;
}

.floor.floor5 .btn_tabs {
  width: 1000px;
  margin: 52px auto 0;
  padding-left: 52px;
}

.floor.floor5 .btn_tabs .btn_tab {
  display: inline-block;
  width: 116px;
  height: 56px;
  color: #ffffff;
  text-align: center;
  line-height: 56px;
  background: #a10604;
  border-radius: 8px;
  margin-right: 13px;
  font-size: 22px;
}

.floor.floor5 .btn_tabs .btn_tab.last {
  margin-right: 0;
}

.floor.floor5 .btn_tabs .btn_tab:active,
.floor.floor5 .btn_tabs .btn_tab.active {
  background: #9e4847;
}

.floor.floor5 .shop-block {
  width: 888px;
  margin: 48px auto 0;
  padding-left: 23px;
}

.floor.floor5 .shop-block .shop {
  display: inline-block;
  width: 272px;
  height: 442px;
  background: #ffffff;
  margin-right: 23px;
}

.floor.floor5 .rules {
  margin-top: 52px;
}

.floor.floor5 .swiper-container {
  width: 100%;
}

.floor.floor5 .shop-block .shop .top {
  width: 100%;
  height: 282px;
  padding-top: 49px;
}

.floor.floor5 .shop-block .shop .mid {
  width: 100%;
  height: 106px;
  padding: 16px;
  font-size: 12px;
  color: #969696;
}

.floor.floor5 .shop-block .shop .bot {
  width: 100%;
  height: 56px;
  padding-top: 3px;
}

.floor.floor5 .shop-block .shop .top img {
  width: 100%;
}

.floor.floor5 .shop-block .shop .bot a.shop_btn {
  display: block;
  width: 236px;
  height: 42px;
  line-height: 42px;
  color: #ffffff;
  background: #a10604;
  border-radius: 2px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  margin: 0 auto;
}

.floor.floor5 .shop-block .shop .bot a.shop_btn:active {
  background: rgba(161, 6, 4, .8);
}

.floor.floor5 .shop-block .shop .bot a.shop_btn.gray {
  background: #969696;
  cursor: not-allowed;
}

.floor.floor5 .shop-block .shop .bot a.shop_btn.gray .time {
  font-size: 13px;
  vertical-align: bottom;
}

.floor.floor5 .shop-block .shop .mid .tit {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  color: #444444;
  font-weight: 900;
}

.shop .mid p {
  margin-bottom: 0;
  margin-top: 6px;
}

.shop .mid .shop_score {
  margin-top: 16px;
}

.shop .mid .shop_score .n_score {
  color: #a10604;
  font-size: 16px;
  font-weight: 900;
}

.shop .mid .discount {
  text-decoration: line-through;
}

.shop .mid .repe {
  float: right;
}

.float_menu {
  position: fixed;
  top: 300px;
  top: calc(50vh - 143px);
  left: 50%;
  margin-left: 425px;
  padding-top: 86px;
  padding-left: 78px;
  width: 289px;
  height: 287px;
  font-size: 20px;
  font-weight: 500;
  z-index: 100;
  background: url('https://caiyunupload.b0.upaiyun.com/ydimg/theme/2018/01/float_menu.png') no-repeat center;
}

.float_menu .menu_item {
  display: inline-block;
  width: 143px;
  line-height: 39px;
  text-align: center;
  color: #ffffff;
}

.float_menu .menu_item:hover,
.float_menu .menu_item.active {
  color: #f38635;
}

.floor2 .table-container.cash .recordTbody {
  width: 100%;
  height: 177px;
  position: relative;
}

.floor2 .table-container.cash .norecord {
  text-align: center;
  line-height: 176px;
}