tangshi300/pages/index/index.wxss

page {
    background-attachment: fixed;
    background-color: #f4f2ea;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

.page-bg2 {
    height: 284rpx;
    left: 0;
    position: absolute;
    top: 0;
    width: 206rpx;
}

.card {
    margin-bottom: 40rpx;
    position: relative;
}

.card,.card-wrap {
    justify-content: center;
}

.card,.card-half,.card-wrap {
    display: flex;
}

.card-half {
    justify-content: space-between;
    margin-bottom: 40rpx;
    position: relative;
    width: 680rpx;
}

.card-img {
    border-radius: 40rpx;
}

.card-content,.card-img {
    height: 270rpx;
    width: 680rpx;
}

.card-content {
    color: #232323;
    font-size: 58rpx;
    font-weight: 700;
    position: absolute;
    top: 0;
}

.card-content,.card-content-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content-item {
    background-color: #fff;
    background: hsla(0,0%,100%,.7);
    border-radius: 40rpx;
    height: 100%;
    width: 100%;
}

.card-img-half {
    border-radius: 40rpx;
    height: 270rpx;
    width: 330rpx;
}

.card-content-half {
    color: #232323;
    font-size: 48rpx;
    font-weight: 700;
    height: 270rpx;
    position: absolute;
    top: 0;
    width: 330rpx;
}

.card-content-half,.card-content-item-half {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content-item-half {
    background-color: #fff;
    background: hsla(0,0%,100%,.7);
    border-radius: 40rpx;
    height: 100%;
    width: 100%;
}

.card-tip {
    color: #c9792f;
    font-size: 30rpx;
}

.cp-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -20rpx;
    width: 100%;
}

.cp-bg {
    height: 128rpx;
    margin-top: 160rpx;
    width: 704rpx;
}

.cp-title {
    color: #acacac;
    text-align: center;
}

.cp-list {
    position: absolute;
}

.cp-item,.cp-list {
    display: flex;
}

.cp-item {
    align-items: center;
    flex-direction: column;
}

.cp-name {
    color: #787878;
    font-size: 24rpx;
    margin-top: -16rpx;
}

.bgimg1 {
    height: inherit;
    position: absolute;
    width: inherit;
}

.bgimg1 image {
    height: 488rpx;
    position: absolute;
    right: 0;
    width: 344rpx;
}

.bgimg2 {
    bottom: 60rpx;
    position: absolute;
    width: 100%;
}

.bgimg2 image {
    width: inherit;
}

.search-bar {
    height: 108rpx;
    position: relative;
    width: 100%;
}

.search-button {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 37rpx;
    box-shadow: 0 3px 12px rgba(66,65,50,.068);
    color: #333;
    height: 74rpx;
    line-height: 74rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    margin-top: 17rpx;
    text-align: center;
}

.head-title,.search-button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.head-title {
    font-size: 1rem;
    height: 100rpx;
}

.head-tip {
    align-items: center;
    color: #333;
    font-size: .8rem;
    justify-content: center;
    padding-bottom: 60rpx;
}

.head-tip,.head-wrap {
    display: flex;
}

.head-wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10rpx 30rpx 40rpx;
    width: 650rpx;
}

.item {
    align-items: center;
    border: 1px solid #f3af4a;
    border-radius: 10rpx;
    font-size: 24rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 10rpx 10rpx 30rpx;
    text-align: center;
    width: 180rpx;
}