page { background-image: url(http://www.hnyfwlw.com:8006/bigdata_app/newindex/bg.png); background-size: 100%; background-repeat: no-repeat; background-color: #F9F9F9; } .weather { display: flex; width: 85%; margin: 0 auto; padding-top: 40rpx; } .weather .weaimg { width: 296rpx; height: 296rpx; } .weather .weatext { width: 300rpx; text-align: center; font-size: 36rpx; color: #fff; padding-top: 60rpx; margin-left: 60rpx; } .weather .weatext .weatext_title { font-size: 80rpx; margin-bottom: 30rpx; } .weatherinfo { display: flex; background-color: rgba(255, 255, 255, 0.2); width: 85%; margin: 60rpx auto; padding: 30rpx; justify-content: space-around; border-radius: 170rpx; } .weatherinfo .weatherinfo_item { text-align: center; } .weatherinfo .weatherinfo_item .first_item { height: 50rpx; margin-bottom: 10rpx; color: #fff; line-height: 50rpx; } .weatherinfo .weatherinfo_item .weaimg { width: 50rpx; height: 50rpx; } .weatherinfo .weatherinfo_item .textbox { text-align: center; color: #fff; } .functionbox { width: 85%; margin: 0 auto; padding: 30rpx; background-color: #fff; border-radius: 30rpx; } .functionbox .functionbox_title { padding-left: 20rpx; font-size: 34rpx; } .functionbox .functionbox_text { display: flex; justify-content: space-around; margin-top: 30rpx; } .functionbox .functionbox_text .functionbox_text_item { text-align: center; color: #616666; } .functionbox .functionbox_text .functionbox_text_item .itemimg { width: 60rpx; height: 60rpx; margin-bottom: 20rpx; } .facilitybox { width: 90%; margin: 0 auto; padding: 30rpx; } .facilitybox .facilitybox_title { font-size: 34rpx; } .facilitybox .facilitybox_itembox { display: flex; flex-wrap: wrap; margin-top: 30rpx; } .facilitybox .facilitybox_itembox .facilitybox_item { width: 25%; text-align: center; color: #616666; margin-bottom: 20rpx; } .facilitybox .facilitybox_itembox .facilitybox_item .itemimg { width: 100rpx; height: 100rpx; margin-bottom: 20rpx; } .insectattack { width: 90%; margin: 0 auto; padding: 30rpx; } .insectattack .insectattack_title { font-size: 34rpx; display: flex; justify-content: space-between; } .insectattack .insectattack_title .iconbox { width: 40rpx; height: 40rpx; background-color: #cfd6d6; color: #909696; border-radius: 40rpx; line-height: 40rpx; text-align: center; font-size: 20rpx; } .insectattack .insectattack_listbox { overflow-x: auto; } .insectattack .insectattack_listbox .insectattack_list { width: 1104rpx; display: flex; margin-top: 30rpx; flex-wrap: wrap; } .insectattack .insectattack_listbox .insectattack_list .list_box { background-size: 100% 100%; width: 246rpx; height: 324rpx; margin-right: 30rpx; border-radius: 20rpx; position: relative; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_boxbg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_boxbg .list_boxbg_img { width: 100%; height: 100%; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_box_xiang { width: 95%; margin-top: 0rpx auto; display: flex; justify-content: flex-end; padding-top: 20rpx; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_box_xiang .list_box_xiang_click { padding: 8rpx 15rpx; background-color: rgba(0, 0, 0, 0.2); color: #fff; font-size: 20rpx; border-radius: 52rpx; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_box_info { width: 90%; margin: 130rpx auto 0; height: 120rpx; border-radius: 10rpx; background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.44)); padding: 10rpx; box-sizing: border-box; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_box_info .list_box_info_name { font-weight: 700; } .insectattack .insectattack_listbox .insectattack_list .list_box .list_box_info .list_box_info_text { font-size: 18rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .loading { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }