.list { width: 100%; height: 100%; display: flex; flex-flow: row wrap; justify-content: center; background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/%E5%9C%A8%E7%BA%BF%E5%AD%A6%E4%B9%A0-%E8%83%8C%E6%99%AF.png") no-repeat; background-size: 100% auto; } .list .top { width: 686rpx; height: 100rpx; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .list .top picker { width: 30%; } .list .top .search-input { position: relative; width: 100%; height: 68rpx; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 22rpx; font-size: 24rpx; color: #1f272a; padding-left: 36rpx; box-sizing: border-box; } .list .top .search-placeholder { font-size: 28rpx; } .list .top .phcolor { color: #999; font-size: 14px; } .list .top .select { width: 100%; height: 35px; background: #ffffff; border-radius: 20px; text-indent: 26px; } .list .content { width: 686rpx; height: calc(100% - 140rpx); margin-top: 20rpx; overflow-y: scroll; overflow-x: hidden; } .list .content::-webkit-scrollbar { width: 0; } .list .content > view { width: 100%; height: 516rpx; background: #ffffff; border-radius: 40rpx; margin-bottom: 40rpx; overflow: hidden; box-shadow: 1px 1px 1px 1px #c6cae9, -1px 0px 1px 1px #c6cae9; } .list .content > view .bgpic { width: 100%; height: 400rpx; } .list .content > view .bgpic image { width: 100%; height: 100%; } .list .content > view .bottom { height: 116rpx; width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 0 10rpx; align-items: center; box-sizing: border-box; } .list .content > view .bottom .left { width: 70%; display: flex; flex-flow: row nowrap; align-items: center; } .list .content > view .bottom .left .logo { width: 80rpx; height: 84rpx; background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/-e-icon.png") no-repeat; background-size: 100% 100%; } .list .content > view .bottom .left .title { margin-left: 20rpx; width: fit-content; font-size: 32rpx; } .list .content > view .bottom .right { font-size: 32rpx; color: #5187fd; } .list .model { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .list .model .contents { width: 80%; padding: 0 20rpx; box-sizing: border-box; height: 540rpx; background: #ffffff; border-radius: 40rpx; position: absolute; top: calc(50% - 270rpx); left: 10%; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .list .model .contents .title { width: 100%; height: 30px; text-align: center; font-size: 40rpx; margin-top: 20rpx; } .list .model .contents .text { width: 80%; height: 80rpx; line-height: 40rpx; font-size: 32rpx; } .list .model .contents .people { width: 80%; height: 60rpx; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .list .model .contents .people .name { width: 35%; display: flex; flex-flow: row nowrap; align-items: center; } .list .model .contents .people .name .icon { font-size: 32rpx; color: #3669f8; padding-top: 10rpx; } .list .model .contents .people .name span { font-size: 28rpx; margin-left: 10rpx; } .list .model .contents .people .phone { flex: 1; text-align: left; font-size: 28rpx; color: #2b61f8; } .list .model .contents .handleTrue { width: 80%; height: 80rpx; text-align: center; line-height: 80rpx; font-size: 34rpx; letter-spacing: 4rpx; color: #ffffff; font-weight: 600; background: #3669f8; border-radius: 60rpx; } .list .model .video { width: 90%; height: 480rpx; position: absolute; top: calc(50% - 290rpx); left: 5%; } .list .model .video .top { width: 100%; height: 40rpx; display: flex; flex-flow: row wrap; justify-content: flex-end; padding-right: 10rpx; } .list .model .video .top .icon { font-size: 36rpx; font-weight: 700; color: rgba(255, 255, 255, 0.8); } .list .model .video video { width: 100%; height: calc(100% - 40rpx); object-fit: cover; }