navigation/pages/scenicList/scenicList.wxss

/* pages/scenicList/scenicList.wxss */

.scenicNo{
    font-size: 32rpx;
    color: gray;
    padding: 20rpx;
}

.scenery{
    display: flex;
    padding: 0 20rpx;
    margin-top: 20rpx;
    height: 240rpx;
}

/* 景点介绍 */
.sceneryContent{
    display: flex;
    flex-direction: column;
    width: 75%;
    margin-left: 20rpx;
    position: relative;
}
/* 景点图片 */
.imgWrapper{
    width: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sceneryImg{
    width: 100%;
    border-radius: 20rpx;
}

/* 景点名称和热度 */
.titleAndRate{
    display: flex;
}

/* 景点名称 */
.sceneryTitle{
    font-size: 36rpx;
    font-weight: bold;
    color: goldenrod;
    width: 54%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* 景点热度 */
.clickRate{
    position: absolute;
    right: 20rpx;
    font-size: 30rpx;
}

/* 景点内容介绍 */
.sceneryIntro{
    position: absolute;
    bottom: 0rpx;
    overflow: hidden;
    margin-top: 30rpx;
    display: -webkit-box;
    /*设置对齐模式*/
    -webkit-box-orient: vertical;
    /*设置多行的行数*/
    -webkit-line-clamp: 4;
}
/* 分隔条 */
.interval{
    width: 100%;
    height: 20rpx;
    margin: 20rpx 0;
    background-color: rgb(236, 234, 234);
}