|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294 |
- /* pages/FirstPage/index.wxss */
- .first_container {
- width: 100%;
- min-height: calc(100vh - 112rpx);
- padding: 0 25rpx;
- padding-bottom: 112rpx;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- color: #333333;
- background-color: rgba(242, 246, 249, 1);
- }
- .first_head {
- width: 100%;
- padding: 15rpx 22rpx;
- margin: 20rpx 0;
- background-color: rgba(218, 232, 255, 1);
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1rpx solid rgba(160, 197, 248, 1);
- border-radius: 10rpx;
- box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(204,201,201,0.27);
- }
- .area_info {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .area_icon {
- width: 24rpx;
- height: 34rpx;
- margin-right: 30rpx;
- }
- .current_area {
- color: rgba(31, 31, 31, 1);
- }
- .select_location {
- width: 152rpx;
- height: 48rpx;
- line-height: 48rpx;
- text-align: center;
- background-color: rgba(42, 130, 228, 1);
- border-radius: 24rpx;
- color: #fff;
- font-size: 24rpx;
- }
- .main_container {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- }
- .banner {
- width: 100%;
- }
- .banner_image {
- width: 100%;
-
- }
- /* 公告 */
- .announcement {
- display: flex;
- height: 70rpx;
- width: 100%;
- margin-top: 10rpx;
- padding: 0 30rpx;
- background: #ffffff;
- align-items: center;
- justify-content: space-between;
- border-radius: 8rpx;
- }
-
- .announcement_img {
- width: 66rpx;
- height: 34rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 10rpx;
- background: linear-gradient(90deg, rgba(75, 146, 254, 0.81) 0%, rgba(101, 163, 255, 0.42) 100%);
- }
- .announcement_icon {
- width: 20rpx;
- height: 16rpx;
- }
- .announcement_text {
- font-size: 16rpx;
- color: #fff;
- }
-
- .announcement-swiper {
- width: 548rpx;
- height: 100%;
- }
-
- .announcement-swiper-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 30rpx;
- font-family: "PingFangSC-Regular", "PingFang SC";
- font-weight: normal;
- color: #333333;
- line-height: 42rpx;
- }
- .overflow_ellipsis {
- width: 300rpx;
- font-size: 26rpx;
- color: rgba(0, 0, 0, 0.7);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .inform_date {
- font-size: 24rpx;
- color: rgba(0, 0, 0, 0.5);
- }
- /* 快捷入口 */
- .fast_enters {
- width: 100%;
- margin-top: 20rpx;
- border-radius: 8rpx;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-content: flex-start;
- }
-
- .enter_item {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- padding: 10rpx;
- margin-right: 65rpx;
- margin-bottom: 10rpx;
- }
- .fast_enters>.enter_item:nth-child(4n+0) {
- margin-right: 0 !important;
- }
- .enter_icon {
- width: 110rpx;
- height: 110rpx;
- margin-bottom: 14rpx;
- }
- .enter_title {
- font-size: 24rpx;
- font-weight: bold;
- color: #354D6EFF;
- }
- /* 在线人数 */
- .live_box {
- width: 100%;
- margin-top: 20rpx;
- position: relative;
- }
- .live_bg {
- width: 100%;
- }
- .live_message {
- width: 100%;
- height: 100%;
- padding: 30rpx 0 48rpx 60rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
- z-index: 999;
- position: absolute;
- top: 0;
- left: 0;
- }
- /* 河道展示 */
- .rivers_box {
- width: 100%;
- margin-top: 20rpx;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- border-radius: 8rpx;
- }
- .list_header {
- width: 100%;
- padding: 20rpx;
- margin-bottom: 30rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 30rpx;
- }
-
- .list_title{
- font-weight: 600;
- margin-bottom: -10rpx;
- position: relative;
- }
- .list_title::after {
- content: '';
- width: 120rpx;
- height: 10rpx;
- background-color: rgba(30, 121, 250, 0.5);
- position: absolute;
- bottom: 0rpx;
- left: 0rpx;
- }
- .more_btn {
- color: rgba(153, 153, 153, 1);
- }
- .rivers_list {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- }
- .river_item {
- width: 100%;
- margin-bottom: 20rpx;
- padding: 30rpx 22rpx 28rpx 27rpx;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- background-color: #ffffff;
- border-radius: 10rpx;
- box-shadow: 0px 0px 14px 2px rgba(43,93,184,0.09);
- }
- .river_image {
- width: 180rpx;
- height: 180rpx;
- margin-right: 30rpx;
- border-radius: 10rpx;
- }
- .river_info {
- flex: 1;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- }
- .river_head {
- width: 100%;
- margin-bottom: 10rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .river_name {
- font-weight: 600;
- max-width: 280rpx;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .river_button {
- width: 132rpx;
- height: 50rpx;
- font-size: 26rpx;
- color: #fff;
- line-height: 50rpx;
- text-align: center;
- background-color: #2a82e4;
- border-radius: 8rpx;
- align-self: flex-end;
- }
- .river_location {
- max-width: 440rpx;
- margin-bottom: 10rpx;
- padding: 8rpx 14rpx;
- background-color: rgba(40, 127, 251, 0.1);
- color: rgba(40, 127, 251, 1);
- border-radius: 10rpx;
- font-size: 26rpx;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .river_note {
- max-width: 440rpx;
- font-size: 28rpx;
- color: rgba(118, 120, 129, 1);
- display: -webkit-box;
- overflow: hidden;
- text-overflow: ellipsis;
- word-wrap: break-word;
- white-space: normal !important;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
-
|