123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- @import '@css/mixin.scss';
- Page {
- background: #5271ff;
- height: 100%;
- }
- .scoped-box {
- .sb-top {
- width: 100%;
- height: 350px;
- position: relative;
- .bg {
- width: 100%;
- height: 350px;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- }
- .date {
- position: absolute;
- top: 112px;
- left: 52px;
- z-index: 2;
- width: 100px;
- .d1 {
- color: #3758eb;
- font-size: 30px;
- text-align: center;
- }
- .d2 {
- color: #3758eb;
- font-size: 24px;
- text-align: center;
- }
- .d3 {
- color: #3758eb;
- font-size: 20px;
- text-align: center;
- }
- }
- .weather {
- position: absolute;
- top: 246px;
- left: 60px;
- z-index: 2;
- font-size: 24px;
- color: #0e47c8;
- }
- }
- .sb-footer {
- width: 100%;
- height: 456px;
- position: relative;
- .bg {
- width: 100%;
- height: 456px;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- }
- .t {
- position: absolute;
- top: 180px;
- left: 100px;
- right: 100px;
- z-index: 2;
- color: #5f5f5f;
- font-weight: bold;
- font-size: 26px;
- }
- }
- .sb-content {
- margin: 0 50px;
- background: #fff;
- padding: 20px 20px 0;
- box-sizing: border-box;
- .op {
- display: flex;
- padding-bottom: 30px;
- }
- .n {
- width: 36px;
- height: 36px;
- line-height: 36px;
- background: #fc5f5b;
- color: #fff;
- text-align: center;
- font-size: 24px;
- border-radius: 50%;
- margin-top: 4px;
- }
- .t {
- padding-left: 10px;
- flex: 1;
- font-size: 28px;
- color: #5f5f5f;
- }
- }
- }
|