body { font-family: "Microsoft Yahei" !important; } #mineScroll div .user { position: relative; } #mineScroll div .user img { width: 100%; } #mineScroll div .user .user-image { position: absolute; width: 4rem; height: 4rem; top: 4rem; right: 0; left: 0; margin: 0 auto; /*background: #fff;*/ border-radius: 50%; } #mineScroll div .user .user-image img{ border-radius: 50%; } #mineScroll div .user .user-name { position: absolute; top: 10rem; right: 0; left: 0; color: #fff; text-align: center; } /*#mineScroll div .user-balance { margin-top: 1rem; width: 100%; line-height: 2rem; text-align: center; }*/ /*#mineScroll div .user-balance span { top: -8px; } #mineScroll div .user-balance span img { width: 8%; margin: 0 3px -2% 0; }*/ #mineScroll div .mine-type { margin-top: 1rem; width: 100%; /*height: 250px;*/ } #mineScroll div .mine-type div { float: left; padding-top: 5%; padding-bottom: 5%; text-align: center; background: #ffffff; } #mineScroll div .mine-type div:nth-child(1), #mineScroll div .mine-type div:nth-child(2), #mineScroll div .mine-type div:nth-child(3) { border-top: 1px solid #b7b7b7; } #mineScroll div .mine-type div:nth-child(1), #mineScroll div .mine-type div:nth-child(2), #mineScroll div .mine-type div:nth-child(4), #mineScroll div .mine-type div:nth-child(5) { border-bottom: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; } #mineScroll div .mine-type div:nth-child(3), #mineScroll div .mine-type div:nth-child(6) { border-bottom: 1px solid #b7b7b7; } #mineScroll div .mine-type div img { width: 50px; height: 50px; } #mineScroll div .mine-type div .mine-text { display: block; width: 100%; border: 0; padding: 0; } /*当其最大宽度为320*/ @media (max-width: 320px) { #mineScroll div .user{ margin-top: -20%; } #mineScroll div .user .user-name { top: 8rem; } #mineScroll div .user .user-image { top: 3.6rem; } #mineScroll div .user-balance { font-size: 1rem; margin-top: 0.2rem; } #mineScroll div .mine-type{ margin-top:0.3rem; } #mineScroll div .mine-type div img { width: 40px; height: 40px; } } /*当其最小宽度为360*/ @media (min-width: 360px) { #mineScroll div .user .user-name { top: 9rem; } #mineScroll div .user-balance { font-size: 1rem; margin-top: 0.5rem; } #mineScroll div .mine-type div img { /*width: 40px; height: 40px;*/ } } /*最小高度为568*/ @media (min-height: 568px) { #mineScroll div .user { margin-top: 0; } #mineScroll div .user .user-image{ top: 2.2rem; } #mineScroll div .user .user-name{ top: 7rem; } } /*当其最小宽度为768*/ @media (min-width: 768px) { #mineScroll div .user { margin-top: -2rem; } #mineScroll div .user .user-image { top: 7rem; width: 9rem; height: 9rem; } #mineScroll div .user .user-name { top: 19rem; font-size: 2rem; } #mineScroll div .user-balance { margin-top: 1rem; line-height: 4rem; text-align: center; font-size: 2rem; } #mineScroll div .user-balance span { top: -8px; } #mineScroll div .user-balance span img { width: 7%; margin-bottom: -2%; } #mineScroll div .mine-type div img { width: 60px; height: 60px; } } @media(min-width:375px){ #mineScroll div .user .user-name{ top:8rem; font-size: 1.1rem; } } @media(min-width:414px){ #mineScroll div .user .user-name{ top:9rem; } } @media (min-width: 768px) { @media (min-width: 768px) { #mineScroll .prevent-scroll .width-percent-33 .title-container-square a .name { display: block; margin-top: 5px; font-size: 1.6rem; } } }