|
@@ -67,7 +67,24 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</article>
|
|
- <article class="lower"></article>
|
|
|
|
|
|
+ <article class="lower">
|
|
|
|
+ <div class="item_1">6465</div>
|
|
|
|
+ <div class="item_2"></div>
|
|
|
|
+ <div class="item_3"></div>
|
|
|
|
+ <div class="item_4"></div>
|
|
|
|
+ <div class="item_5"></div>
|
|
|
|
+ <div class="item_6"></div>
|
|
|
|
+ <div class="item_7"></div>
|
|
|
|
+ <div class="item_8"></div>
|
|
|
|
+ <span class="time_1">8月26</span>
|
|
|
|
+ <span class="time_2">8月16</span>
|
|
|
|
+ <span class="time_3">8月16</span>
|
|
|
|
+ <span class="time_4">8月16</span>
|
|
|
|
+ <span class="time_5">8月16</span>
|
|
|
|
+ <span class="time_6">8月16</span>
|
|
|
|
+ <span class="time_7">8月16</span>
|
|
|
|
+ <span class="time_8">8月16</span>
|
|
|
|
+ </article>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom">
|
|
<article>
|
|
<article>
|
|
@@ -222,6 +239,8 @@ export default {
|
|
> .top {
|
|
> .top {
|
|
height: 72%;
|
|
height: 72%;
|
|
// border: 1px solid rgb(62, 58, 128);
|
|
// border: 1px solid rgb(62, 58, 128);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
.upper {
|
|
.upper {
|
|
font-size: 40px;
|
|
font-size: 40px;
|
|
color: #fff;
|
|
color: #fff;
|
|
@@ -257,7 +276,6 @@ export default {
|
|
.mid {
|
|
.mid {
|
|
> .warp {
|
|
> .warp {
|
|
display: flex;
|
|
display: flex;
|
|
-
|
|
|
|
margin: 20px 5%;
|
|
margin: 20px 5%;
|
|
.item {
|
|
.item {
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
@@ -287,7 +305,94 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- // .lower {}
|
|
|
|
|
|
+ .lower {
|
|
|
|
+ // border: 1px solid rgb(163, 147, 58);
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ background: url(../../assets/bg_main.png) no-repeat;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ margin: 0 3% 1.5% 3%;
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ position: relative;
|
|
|
|
+ > div {
|
|
|
|
+ border: 1px solid rgb(243, 14, 14);
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 15.1%;
|
|
|
|
+ height: 17.4%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ > .item_1{
|
|
|
|
+ left: 59.1%;
|
|
|
|
+ top: 18.7%;
|
|
|
|
+ }
|
|
|
|
+ > .item_2{
|
|
|
|
+ left: 81.4%;
|
|
|
|
+ top: 18%;
|
|
|
|
+ }
|
|
|
|
+ > .item_3{
|
|
|
|
+ left: 0.8%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_4{
|
|
|
|
+ left: 27.3%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_5{
|
|
|
|
+ left: 64.3%;
|
|
|
|
+ top: 42.3%;
|
|
|
|
+ }
|
|
|
|
+ > .item_6{
|
|
|
|
+ left: 13.2%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+ > .item_7{
|
|
|
|
+ left: 40.5%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+ > .item_8{
|
|
|
|
+ left: 79.9%;
|
|
|
|
+ top: 80.8%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ > span {
|
|
|
|
+ font-size: 35px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ }
|
|
|
|
+ > .time_1 {
|
|
|
|
+ left: 64.8%;
|
|
|
|
+ top: 0%;
|
|
|
|
+ }
|
|
|
|
+ > .time_2 {
|
|
|
|
+ left: 87%;
|
|
|
|
+ top: 0%;
|
|
|
|
+ }
|
|
|
|
+ > .time_3 {
|
|
|
|
+ left: 19%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_4 {
|
|
|
|
+ left: 46%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_5 {
|
|
|
|
+ left: 85.4%;
|
|
|
|
+ top: 61%;
|
|
|
|
+ }
|
|
|
|
+ > .time_6 {
|
|
|
|
+ left: 6.4%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ > .time_7 {
|
|
|
|
+ left: 33%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ > .time_8 {
|
|
|
|
+ left: 70%;
|
|
|
|
+ top: 74%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
> .bottom {
|
|
> .bottom {
|
|
height: 28%;
|
|
height: 28%;
|