123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- page{
- background-color: $page-color;
- }
- .page-view{
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- overflow-x: hidden; //隐藏多余的页面
- }
- .title{
- line-height: 35rpx;
- font-size: 35rpx;
- font-weight: bold;
- color: $title;
- }
- .subtitle{
- line-height: 30rpx;
- font-size: 30rpx;
- font-weight: bold;
- color: $subtitle;
- }
- .YS-title{
- line-height: 35rpx;
- font-size: 35rpx;
- color: $title;
- font-family: YSfont;
- }
- .YS-subtitle{
- line-height: 32rpx;
- font-size: 32rpx;
- color: $subtitle;
- font-family: YSfont;
- }
- //标题头
- .front-tag {
- margin-right: 20rpx;
- height: 100%;
- width: 10rpx;
- border-radius: 100rpx;
- background-image: linear-gradient(#4169E1, rgba(1,1,1,0));
- z-index: 99;
- }
- //标题底
- .bottom-tag{
- margin-top: -10rpx;
- margin-left: 20%;
- height: 20rpx;
- width: 90%;
- border-radius: 6rpx;
- background-image: linear-gradient(to right, #4169E1, rgba(1,1,1,0));
- z-index: -1;
- }
- //标签
- .tag {
- border-radius: 50rpx;
- border: 1rpx solid $color-blue;
- padding: 2rpx 12rpx;
- .tag-text {
- font-size: 22rpx;
- color: $color-blue;
- }
- }
- //标签
- .tag-fill{
- display: flex;
- align-items: center;
- border-radius: 6rpx;
- background-color: $color-blue;
- padding: 6rpx 12rpx;
- .tag-text {
- font-size: 24rpx;
- color: #FFF;
- }
- }
- //卡片
- .card-view {
- display: flex;
- flex-flow: row wrap;
- margin: 20rpx;
- justify-content: space-between;
- .card-item {
- margin: 2% 0;
- width: 48%;
- height: auto;
- display: flex;
- flex-direction: column;
- background-color: #FFF;
- border-radius: $border-radius;
- overflow: hidden;
- z-index: 55;
- .card-title {
- display: flex;
- align-items: center;
- padding: 20rpx;
- z-index: 55;
- .title {
- font-size: 32rpx;
- line-height: 40rpx;
- }
- }
- }
- }
- //横向flex布局
- .flex-row{
- display:flex;
- align-items: center;
- }
- //竖向flex布局
- .flex-column{
- display:flex;
- flex-direction: column;
- }
- //横向baseline布局
- .flex-baseline{
- display: flex;
- align-items: baseline;
- }
- //插画
- .detail-image {
- width: 100%;
- height: 450rpx;
- background-size: cover; //背景图片自适应
- background-repeat: no-repeat;
- z-index: 50;
- }
- //图标
- .t-icon {
- display: inline-block;
- width: 40rpx;
- height: 40rpx;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100%;
- }
- //头部背景
- .bg-box1 {
- position: fixed;
- width: 100%;
- height: 800rpx;
- background-size: 100%;
- background-repeat: no-repeat;
- background-image: linear-gradient(to top, #f3f4f9, rgba(255, 255, 255, 0) 45%),url('https://image.meiye.art/pic_1628634662880');
- }
- .bg-box2{
- position: fixed;
- width: 100%;
- height: 800rpx;
- background-size: 100%;
- background-repeat: no-repeat;
- background-image: linear-gradient(to top, #f3f4f9, rgba(255, 255, 255, 0) 45%),url('https://image.meiye.art/pic_1628634712718');
- }
|