一体机放大效果开发
This commit is contained in:
@@ -67,8 +67,8 @@ function seeDetail(item) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -76,76 +76,76 @@ function seeDetail(item) {
|
||||
}
|
||||
.main{
|
||||
.main-content{
|
||||
padding: 28rpx
|
||||
padding: 42rpx
|
||||
.cards{
|
||||
padding: 32rpx
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 2rpx solid #DCDCDC;
|
||||
margin-bottom: 36rpx;
|
||||
padding: 48rpx
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
border: 3rpx solid #DCDCDC;
|
||||
margin-bottom: 54rpx;
|
||||
position: relative;
|
||||
.card-title{
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
font-size: 48rpx;
|
||||
color: #333333;
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.card-text{
|
||||
margin-top: 16rpx
|
||||
width: 502rpx;
|
||||
height: 80rpx;
|
||||
margin-top: 24rpx
|
||||
width: 753rpx;
|
||||
height: 120rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 42rpx;
|
||||
color: #6C7282;
|
||||
}
|
||||
}
|
||||
.cards::before{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
right: 60rpx;
|
||||
top: 50%;
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 2rpx
|
||||
width: 6rpx;
|
||||
height: 27rpx;
|
||||
border-radius: 3rpx
|
||||
background: #6C7282;
|
||||
transform: translate(0, -50%) rotate(-45deg) ;
|
||||
}
|
||||
|
||||
.cards::after{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: calc(50% + 1rpx);
|
||||
right: 60rpx;
|
||||
top: calc(50% + 2rpx);
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 2rpx
|
||||
width: 6rpx;
|
||||
height: 27rpx;
|
||||
border-radius: 3rpx
|
||||
background: #6C7282;
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
}
|
||||
.main-header{
|
||||
padding: 80rpx 40rpx
|
||||
padding: 120rpx 60rpx
|
||||
position: relative
|
||||
.header-title{
|
||||
font-weight: 400;
|
||||
font-size: 56rpx;
|
||||
font-size: 84rpx;
|
||||
color: #333333;
|
||||
font-family: DingTalk JinBuTi;
|
||||
}
|
||||
.header-text{
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
font-size: 48rpx;
|
||||
color: rgba(3,3,3,0.5);
|
||||
margin-top: 10rpx
|
||||
margin-top: 15rpx
|
||||
}
|
||||
.header-img{
|
||||
position: absolute
|
||||
right: 0
|
||||
bottom: 0
|
||||
// transform: translate(0, -50%)
|
||||
width: 280rpx;
|
||||
height: 272rpx;
|
||||
width: 420rpx;
|
||||
height: 408rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user