.content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } .nav-box { box-sizing: border-box; width: 100%; position: relative; /* position: fixed; */ z-index: 2; } .nav-box .nav-bar { display: flex; align-items: center; } .nav-box .nav-bar .nav-bar-left, .nav-box .nav-bar .nav-bar-right { padding: 0 20rpx; min-width: 36rpx; } .nav-box .nav-bar .nav-bar-left van-icon { vertical-align: sub; color: #333333; } .nav-box .nav-bar .nav-bar-title { flex: 1; text-align: center; font-weight: 400; font-size: 36rpx; color: #000000; } .nav-box .nav-bar-title { margin-left: -20rpx; } .indexBg { width: 750rpx; height: 775rpx; position: absolute; top: -20rpx; left: 0; z-index: -1; } .searchBox { display: flex; align-items: center; margin: 0 20rpx; margin-top: 35rpx; justify-content: space-between; } .searchBox_add { display: flex; align-items: center; font-weight: 400; font-size: 26rpx; color: #000000; } .searchBox_add image { width: 33rpx; height: 33rpx; margin-right: 10rpx; } .iptbox { width: 480rpx; height: 60rpx; background: #FFFFFF; border-radius: 100rpx; display: flex; align-items: center; box-sizing: border-box; padding: 0 15rpx; justify-content: space-between; font-weight: 400; font-size: 26rpx; color: #000000; } .iptbox image { width: 33rpx; height: 33rpx; } .map { display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size: 20rpx; color: #222222; margin-left: 20rpx; } .map image { width: 31rpx; height: 31rpx; margin-bottom: 6rpx; } .searchBox_msg { display: flex; align-items: center; } .swiper { width: 710rpx; height: 300rpx; margin: 0 auto; margin-top: 30rpx; position: relative; } .cirList { position: absolute; left: 50%; bottom: 22rpx; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: flex; align-items: center; } .cir { width: 6rpx; height: 6rpx; border-radius: 50%; background-color: #fff; margin-right: 6rpx; } .active { width: 12rpx; height: 6rpx; border-radius: 100rpx; } .tabList { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 50rpx; margin-top: 40rpx; } .tabItem { width: 33.33%; display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size: 26rpx; color: #222222; margin-bottom: 46rpx; height: 100rpx; justify-content: space-between; } .tabImg { width: 54rpx; max-height: 54rpx; height: 54rpx; } .tabImg image { width: 100%; height: 100%; } .Tit { font-weight: bold; font-size: 32rpx; color: #222222; margin-left: 20rpx; margin-bottom: 40rpx; } .serverList { display: flex; flex-wrap: wrap; align-items: center; margin-left: 20rpx; margin-right: 20rpx; justify-content: space-between; } .serverItem { border-radius: 30rpx; width: 345rpx; height: 188rpx; box-sizing: border-box; padding-top: 30rpx; padding-left: 40rpx; font-weight: bold; font-size: 26rpx; color: #222222; position: relative; margin-bottom: 20rpx; } .serverItem1 { background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%); } .serverItem2 { background: #F7F7F7; } .serverItem3 { background: linear-gradient(139deg, #FEFBF4 0%, #FEEFD2 100%); } .serverItem4 { background: #EFF3FF; } .serverItem1 image { position: absolute; right: 13rpx; top: 25rpx; width: 172rpx; height: 172rpx; } .serverItem2 image { position: absolute; right: 12rpx; top: 57rpx; width: 190rpx; height: 127rpx; } .serverItem3 image { width: 138rpx; height: 123rpx; position: absolute; right: 30rpx; top: 50rpx; } .serverItem4 image { width: 143rpx; height: 143rpx; position: absolute; top: 37rpx; right: 16rpx; } .List_tabList { display: flex; align-items: center; margin: 0 20rpx; margin-top: 24rpx; } .List_tabItem { font-weight: 400; font-size: 28rpx; color: #555555; margin-right: 60rpx; } .List_active { font-weight: bold; font-size: 32rpx; color: #222222; position: relative; } .List_active::after { width: 63rpx; height: 10rpx; background: #FF512A; border-radius: 0rpx; content: ''; position: absolute; left: 50%; bottom: -10rpx; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .List_active::before { content: ''; width: 63rpx; height: 10rpx; background: #FF512A; border-radius: 0rpx; -webkit-filter: blur(6.599999904632568rpx); filter: blur(6.599999904632568rpx); position: absolute; left: 50%; bottom: -10rpx; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .List { margin: 0 20rpx; margin-top: 30rpx; } .List_Item { padding-top: 10rpx; padding-bottom: 30rpx; display: flex; } .List .List_Item:last-of-type .Item_msg { border-bottom: none; } .Item_img { width: 180rpx; height: 180rpx; border-radius: 30rpx; margin-right: 30rpx; } .Item_msg { flex: 1; padding-bottom: 55rpx; border-bottom: 1rpx solid #E6E6E6; } .Item_top { display: flex; align-items: center; justify-content: space-between; } .Item_top_name { font-weight: 400; font-size: 32rpx; color: #000000; } .Item_top_apart { font-family: HarmonyOS Sans SC, HarmonyOS Sans SC; font-weight: 400; font-size: 22rpx; color: #a8682bcc; } .Item_sceond { font-weight: 400; font-size: 24rpx; color: #555555; margin-top: 15rpx; } .Item_third { display: flex; align-items: center; font-weight: 400; font-size: 24rpx; color: #999999; margin-top: 18rpx; } .Item_third image { width: 24rpx; height: 26rpx; margin-right: 12rpx; } .Item_fourth { display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; } .Item_fourth_left { display: flex; align-items: center; } .Item_fourth_right { font-weight: 400; font-size: 26rpx; color: #FFFFFF; width: 150rpx; height: 50rpx; background: #D5AC66; border-radius: 100rpx; display: flex; align-items: center; justify-content: center; } .Item_fourth_left1 { width: 110rpx; height: 40rpx; background: rgba(255, 81, 42, 0.1); border-radius: 100rpx; margin-right: 4rpx; } .Item_fourth_left1 { width: 110rpx; height: 40rpx; background: rgba(255, 81, 42, 0.1); border-radius: 100rpx; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 22rpx; color: #555555; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; } .Item_fourth_left2 { width: 110rpx; height: 40rpx; background: #FFF2DA; border-radius: 100rpx; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 22rpx; background: #FFF2DA; display: flex; align-items: center; justify-content: center; } .Item_fourth_left1 image { width: 24rpx; height: 24rpx; margin-right: 4rpx; } .Item_fourth_left2 image { width: 24rpx; height: 24rpx; margin-right: 4rpx; } .list { margin-top: 36rpx; } .item_tit { display: flex; align-items: center; justify-content: space-between; margin: 0 20rpx; margin-bottom: 32rpx; margin-top: 30rpx; } .item_tit_left { font-weight: bold; font-size: 28rpx; color: #000000; } .item_tit_right { font-weight: 400; font-size: 24rpx; color: #D5AC66; display: flex; align-items: center; } .item_tit_right image { width: 12rpx; height: 22rpx; margin-left: 8rpx; } .item_goodsItem { display: flex; align-items: center; margin: 0 20rpx; margin-bottom: 20rpx; } .item_goodsItem_tit { width: 180rpx; height: 180rpx; margin-right: 30rpx; margin-left: 19rpx; } .item_goodsItem_name { font-weight: 400; font-size: 26rpx; color: #222222; margin-top: 20rpx; margin-left: 10rpx; } .item_goodsItem_msg { font-weight: 400; font-size: 22rpx; color: #FF512A; display: flex; align-items: flex-end; margin-top: 6rpx; margin-left: 13rpx; } .item_goodsItem_msg view { font-weight: 500; font-size: 36rpx; } .item_goodsItem_msg text { font-size: 22rpx; color: #FF512A; } .item_goodsList { display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; } .list_item { padding-bottom: 32rpx; border-bottom: 1rpx solid #E6E6E6; } .btn { display: inline-flex; align-items: center; background: rgba(255, 81, 42, 0.1); border-radius: 100rpx; padding: 7rpx 22rpx 7rpx 0; } .mobile { background: #FFF2DA; margin-left: 20rpx; }