.emptyPage { display: flex; flex-direction: column; height: 100%; padding: 32px; background: #ffffff; border-radius: 4px; margin: 16px; .emptyPage-title { font-size: 32px; height: 32px; font-weight: bold; color: #17181a; line-height: 32px; margin-bottom: 16px; } .emptyPage-detail { font-weight: 400; font-size: 18px; color: #525866; line-height: 27px; } .imgWrap { display: flex; justify-content: center; align-items: center; margin-top: 32px; background: linear-gradient(180deg, #f0f5fd 0%, #ffffff 100%); & > img { width: 70%; } } .imgWrap { display: flex; flex: 1; justify-content: center; align-items: center; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; & > img { width: 640px; transition: all 0.3s linear; } } /* 当屏幕宽度小于或等于 600px */ @media screen and (max-width: 1250px) { .imgWrap > img { width: 500px; } } /* 当屏幕宽度小于或等于 600px */ @media screen and (min-width: 1250px) and (max-width: 1360px) { .imgWrap > img { width: 600px; } } /* 当屏幕宽度在 601px 到 900px */ @media screen and (min-width: 1360px) and (max-width: 1500px) { .imgWrap > img { width: 640px; } } /* 当屏幕宽度大于 900px */ @media screen and (min-width: 1500px) and (max-width: 1760px) { .imgWrap > img { width: 760px; } } /* 当屏幕宽度大于 900px */ @media screen and (min-width: 1760px) and (max-width: 1920px) { .imgWrap > img { width: 800px; } } /* 当屏幕宽度大于 900px */ @media screen and (min-width: 1960px) and (max-width: 2000px) { .imgWrap > img { width: 900px; } } /* 当屏幕宽度大于 900px */ @media screen and (min-width: 2000px) { .imgWrap > img { width: 1000px; } } }