min-project/component/admission-box/admission-box.wxss
2025-01-21 19:05:54 +08:00

233 lines
4.4 KiB
Plaintext

/* template/admission-box/admission-box.wxss */
.flexflex {
display: flex;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
}
.flexjcenter {
display: flex;
justify-content: center;
}
.flexacenter {
display: flex;
align-items: center;
}
.flex1 {
flex: 1;
}
.flexcolumn {
display: flex;
flex-direction: column;
}
.admission-box {
box-sizing: border-box;
background: linear-gradient(-73.07733799deg, #c1f1fe 0%, #daf7fb 48%, #aee4fb 100%);
border: none;
border-radius: 24rpx;
margin: 0 22.5rpx 30rpx;
height: 234.5rpx;
position: relative;
}
.admission-box .head {
margin-bottom: 9rpx;
position: absolute;
top: 12rpx;
left: 0;
width: 100%;
padding: 0 15rpx;
}
.admission-box .head .icon {
width: 230rpx;
height: 28rpx;
margin-right: 15rpx;
}
.admission-box .head .text {
width: 180rpx;
height: 30rpx;
border-radius: 9rpx;
position: relative;
font-size: 21rpx;
color: #FFFFFF;
z-index: 1;
}
.admission-box .head .text .bj {
width: 180rpx;
height: 30rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.admission-box .head .operate {
display: flex;
justify-content: flex-end;
align-items: center;
}
.admission-box .head .operate .more {
font-size: 22.5rpx;
color: #026277;
text-align: center;
line-height: 39rpx;
height: 39rpx;
}
.admission-box .head .operate .more .icon {
width: 21rpx;
height: 21rpx;
margin-left: 9rpx;
margin-right: 0;
vertical-align: middle;
}
.admission-box .head .operate .count-down {
font-size: 18rpx;
color: #000000;
line-height: 39rpx;
display: flex;
justify-content: center;
align-items: center;
}
.admission-box .head .operate .count-down .item {
width: 38rpx;
height: 38rpx;
margin: 0 5rpx;
background-color: #f59a23;
border-radius: 19.5rpx;
font-size: 21rpx;
color: #FFFFFF;
}
.admission-box .content {
height: 100%;
position: relative;
z-index: 1;
}
.admission-box .content .more {
width: 100rpx;
height: 100rpx;
position: absolute;
top: 12rpx;
right: 15rpx;
height: 39rpx;
}
.admission-box .content .item {
position: relative;
padding-left: 16.5rpx;
background-color: #ffffff;
width: 100%;
height: 120rpx;
margin: 0 15rpx;
border-radius: 18rpx;
}
.admission-box .content .item .schoolimg-box {
width: 60rpx;
margin-right: 18rpx;
}
.admission-box .content .item .schoolimg {
width: 60rpx;
height: 60rpx;
}
.admission-box .content .item .title {
font-size: 26rpx;
color: #000000;
line-height: 39rpx;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
padding: 0 30rpx 0 0;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.admission-box .indicator-box {
height: 55rpx;
padding: 20rpx 0;
position: absolute;
display: flex;
justify-content: center;
bottom: -8rpx;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.admission-box .indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.admission-box .indicator .item {
background-color: #d7d7d7;
border-radius: 30rpx;
width: 0;
height: 0;
transition: all 0.3s;
}
.admission-box .indicator .item.pitch {
background-color: #fa6b11;
}
.admission-box .indicator .item.tiny {
width: 10rpx;
height: 10rpx;
}
.admission-box .indicator .item.pitch,
.admission-box .indicator .item.tiny1 {
width: 15rpx;
height: 15rpx;
}
.admission-box .indicator .item.pitch,
.admission-box .indicator .item.tiny,
.admission-box .indicator .item.tiny1 {
margin-right: 7.5rpx;
display: block;
}
.admissionState {
width: 120rpx;
height: 36rpx;
vertical-align: middle;
margin-right: 16.5rpx;
margin-bottom: 5rpx;
}
.quick-answer {
height: 214.5rpx;
height: 234.5rpx;
border-radius: 24rpx;
}
.quick-answer-pop {
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.70588235);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 101;
animation: slideUp 0.3s forwards;
}
@keyframes slideUp {
0% {
top: 100%;
}
100% {
top: 0;
}
}
.quick-answer-pop .quick-answer-box .quick-answer-img {
width: 100vw;
height: 1096.5rpx;
position: absolute;
bottom: 0;
left: 0;
border-radius: 35rpx;
}
.quick-answer-pop .quick-answer-box .quick-answer-icon {
width: 270rpx;
height: 270rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 260rpx;
}