123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- .container {
- background-color: #fff;
- }
- .bannerBox {
- width: calc(100% - 40rpx);
- height: 300rpx;
- margin: 0 20rpx;
- border-radius: 20rpx;
- box-shadow: 0px 22px 10px -20px #c7c7c7;
- position: absolute;
- top: 0;
- left: 0;
- }
- .swiper {
- height: 100%;
- border-radius: 20rpx;
- }
- .swiperItem {
- border-radius: 20rpx;
- }
- .swiperImg {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 20rpx;
- }
- .contentBox {
- height: calc(100vh - 330rpx);
- margin-top: 320rpx;
- padding: 10rpx 20rpx 0;
- position: relative;
- z-index: 9;
- background-color: #fff;
- overflow-y: auto;
- }
- .operateBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-flow: wrap;
- align-content: flex-start;
- }
- .operateItemBox {
- display: inline-block;
- width: calc(50% - 10rpx);
- padding-bottom: 20rpx;
- }
- .operateItem {
- display: inline-block;
- width: 100%;
- height: 100%;
- text-align: center;
- border-radius: 14rpx;
- position: relative;
- }
- .operateItemBGImg {
- width: 100%;
- height: 100%;
- }
- .operateItemText {
- position: absolute;
- bottom: 10%;
- left: 0rpx;
- width: calc(100% - 40rpx);
- padding: 0 20rpx;
- text-align: center;
- font-size: 22rpx;
- height: 64rpx;
- line-height: 32rpx;
- color: #777;
- white-space: pre-line;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
|