.home {
|
.homebox {
|
height: 100vh;
|
overflow: auto;
|
.loading {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
/deep/ .van-sticky--fixed {
|
max-width: 650px;
|
margin: auto;
|
}
|
/deep/ .van-overlay {
|
max-width: 650px;
|
right: 0;
|
margin: auto;
|
}
|
/deep/ .van-loading__spinner--spinner i {
|
color: #b30808;
|
}
|
.stick {
|
height: 40px;
|
padding: 7px 15px;
|
background-color: #9b0707;
|
color: #fff;
|
line-height: 26px;
|
font-size: 16px;
|
span {
|
background: rgba(255,255,255,.2);
|
display: inline-block;
|
width: 80px;
|
height: 26px;
|
line-height: 26px;
|
text-align: center;
|
border-radius: 13px;
|
font-size: 14px;
|
color: #fff;
|
}
|
}
|
.head {
|
height: 3.6rem;
|
background-image: url(../assets/images/logo1.png);
|
background-size: 2.6rem;
|
padding: 1.2rem 15px 0;
|
background-color: #b30808;
|
background-position: 15px 0.2rem;
|
background-repeat: no-repeat;
|
position: relative;
|
.flag {
|
display: inline-block;
|
height: 18px;
|
line-height: 18px;
|
width: auto;
|
padding: 0 10px;
|
background-color: #fff;
|
letter-spacing: 5px;
|
}
|
|
.name {
|
height: .8rem;
|
line-height: .8rem;
|
font-size: 0.5rem;
|
color: #fff;
|
font-weight: 700;
|
}
|
|
.times {
|
height: 1rem;
|
line-height: 1rem;
|
font-size: 0.6rem;
|
color: #fff;
|
font-weight: 700;
|
}
|
.btn {
|
display: inline-block;
|
background: rgba(255,255,255,.2);
|
width: 80px;
|
height: 26px;
|
line-height: 26px;
|
text-align: center;
|
border-radius: 13px;
|
font-size: 14px;
|
color: #fff;
|
position: absolute;
|
right: 15px;
|
top: 15px;
|
}
|
}
|
|
.contentbox {
|
padding: 15px;
|
background-color: #b30808;
|
|
.content {
|
background-color: #f5f5f5;
|
padding: 15px;
|
}
|
}
|
|
.section {
|
margin-bottom: 50px;
|
|
&:nth-last-of-type(1) {
|
margin-bottom: 0;
|
}
|
|
.title {
|
display: inline-block;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
width: auto;
|
padding: 0 20px;
|
border-radius: 15px;
|
|
span {
|
font-size: 18px;
|
font-weight: 700;
|
color: #fff;
|
}
|
|
span:nth-child(1) {
|
border-right: 1px solid #fff;
|
padding-right: 10px;
|
}
|
|
span:nth-child(2) {
|
padding-left: 10px;
|
}
|
}
|
|
.ball {
|
margin-top: 1rem;
|
position: relative;
|
|
.ring {
|
height: 2rem;
|
width: 2rem;
|
border-radius: 50%;
|
text-align: center;
|
padding: .2rem 0;
|
|
.iconfont {
|
color: #fff;
|
font-size: .3rem;
|
}
|
|
p {
|
color: #fff;
|
}
|
|
p.icon {
|
line-height: 1;
|
}
|
|
p.money {
|
font-size: .4rem;
|
line-height: 1.8;
|
}
|
|
p.text {
|
font-size: 0.25rem;
|
line-height: 2;
|
}
|
}
|
|
.line {
|
display: inline-block;
|
position: absolute;
|
left: 2.3rem;
|
|
&::before {
|
content: "";
|
display: block;
|
position: absolute;
|
left: 0;
|
height: 1px;
|
background-color: #d2d2d2;
|
transform-origin: 0 0;
|
}
|
|
p:nth-child(2) {
|
font-size: 16px;
|
}
|
}
|
|
.line.line1 {
|
top: -.4rem;
|
|
&::before {
|
width: 1.4rem;
|
top: .7rem;
|
left: -.56rem;
|
transform-origin: 0 0;
|
// transform: rotate(180deg);
|
}
|
}
|
|
.line.line2 {
|
bottom: 0;
|
|
&::before {
|
width: .6rem;
|
bottom: -0.04rem;
|
left: -.2rem;
|
transform: rotate(-120deg);
|
}
|
|
&::after {
|
content: "";
|
display: block;
|
position: absolute;
|
left: -.2rem;
|
width: 2rem;
|
height: 1px;
|
background-color: #d2d2d2;
|
}
|
}
|
}
|
|
.sub-title {
|
text-align: center;
|
padding: 10px 0;
|
font-size: 16px;
|
}
|
|
.ability {
|
margin-top: 20px;
|
.ability-item:nth-last-of-type(1) {
|
margin-bottom: 0;
|
}
|
.ability-item {
|
width: 100%;
|
margin-bottom: 20px;
|
display: flex;
|
|
.ability-title {
|
width: 30px;
|
height: auto;
|
padding: 0 4px;
|
writing-mode: vertical-lr;
|
text-align: center;
|
font-size: 14px;
|
color: #fff;
|
letter-spacing: 2px;
|
}
|
.list.pay {
|
width: 100%;
|
}
|
.list {
|
width: calc(100% - 30px);
|
display: flex;
|
flex-wrap: wrap;
|
|
li:nth-child(3n) .canvasbox,
|
li:nth-last-of-type(1) .canvasbox {
|
border-right: none;
|
}
|
|
li {
|
flex: auto;
|
width: 33.33%;
|
height: 2rem;
|
|
.text {
|
line-height: 0.5rem;
|
text-align: center;
|
color: #999;
|
}
|
}
|
}
|
}
|
|
.canvasbox {
|
height: 1.5rem;
|
width: 100%;
|
border-right: 1px dashed #666;
|
|
.canvas {
|
height: 1.5rem;
|
width: 1.5rem;
|
margin: auto;
|
border-radius: 50%;
|
position: relative;
|
}
|
|
.mask {
|
height: 1.5rem;
|
width: 1.5rem;
|
transform: rotate(-90deg);
|
position: absolute;
|
left: -7px;
|
top: -4px;
|
}
|
}
|
}
|
.runlist {
|
width: 100%;
|
li {
|
margin-top: 20px;
|
height: 1.4rem;
|
display: flex;
|
.icon {
|
width: 40%;
|
height: 100%;
|
}
|
.text {
|
width: 60%;
|
height: 100%;
|
background-color: #fff;
|
padding-left: 10px;
|
.runtitle {
|
height: 0.4rem;
|
font-weight: bold;
|
line-height: 0.4rem;
|
}
|
.detail {
|
line-height: 0.5rem;
|
a {
|
display: inline-block;
|
margin-right: 5px;
|
}
|
a:nth-child(1) {
|
display: block;
|
span:nth-child(1) {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
}
|
li.first {
|
.text {
|
border-left: 5px solid #9b0707;
|
}
|
}
|
li.second {
|
.text {
|
border-right: 5px solid #9b0707;
|
}
|
}
|
}
|
.share {
|
margin-top: 20px;
|
width: 100%;
|
li:nth-last-of-type(1) {
|
border-bottom: none;
|
}
|
li {
|
width: 100%;
|
border-bottom: 1px dashed #ddd;
|
padding: 5px 0;
|
.borderbox {
|
margin-top: 5px;
|
display: flex;
|
.take {
|
width: 65%;
|
height: 0.2rem;
|
padding: 0.04rem;
|
border: 1px solid #9b0707;
|
border-radius: 0.12rem;
|
.line {
|
height: 100%;
|
border-radius: 4px;
|
}
|
}
|
.num {
|
width: 35%;
|
span:nth-child(1) {
|
margin: 0 5px;
|
}
|
.iconfont {
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.copyright {
|
padding: 10px 0;
|
p {
|
color: #fff;
|
}
|
.copytitle {
|
font-size: 14px;
|
line-height: 2;
|
}
|
}
|
.bottom {
|
text-align: center;
|
background-color: #9b0707;
|
color: #fff;
|
}
|
}
|
