From 91cc2e96e3d96ba909b108618f7f5bbc5a8fd54a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Thu, 23 Mar 2023 10:59:48 +0800 Subject: [PATCH] css --- .../ArticleListContent/index.style.ts | 17 +-- .../settings/components/BaseView.style.ts | 61 ++++----- src/pages/account/settings/style.style.ts | 25 ++-- src/pages/dashboard/analysis/style.style.ts | 63 +++++---- src/pages/dashboard/monitor/style.style.ts | 8 +- src/pages/dashboard/workplace/style.style.ts | 90 +++---------- src/pages/list/basic-list/style.style.ts | 124 +++++------------- src/pages/list/card-list/style.style.ts | 38 +++--- .../ArticleListContent/index.style.ts | 17 +-- src/pages/list/search/articles/style.style.ts | 20 ++- src/pages/profile/advanced/style.style.ts | 18 ++- 11 files changed, 161 insertions(+), 320 deletions(-) diff --git a/src/pages/account/center/components/ArticleListContent/index.style.ts b/src/pages/account/center/components/ArticleListContent/index.style.ts index 73f2c481..178e968e 100644 --- a/src/pages/account/center/components/ArticleListContent/index.style.ts +++ b/src/pages/account/center/components/ArticleListContent/index.style.ts @@ -2,24 +2,15 @@ import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { - listContent: {}, + listContent: { + [`@media screen and (max-width: ${token.screenXS}px)`]: {}, + }, description: { maxWidth: "720px", lineHeight: "22px", }, extra: { - marginTop: "16px", - color: token.colorTextSecondary, - lineHeight: "22px", - "& > em": { - marginLeft: "16px", - color: token.colorTextDisabled, - fontStyle: "normal", - }, - }, - [`@media screen and (max-width: ${token.screenXS})`]: { - listContent: {}, - extra: { + [`@media screen and (max-width: ${token.screenXS}px)`]: { "& > em": { display: "block", marginTop: "8px", diff --git a/src/pages/account/settings/components/BaseView.style.ts b/src/pages/account/settings/components/BaseView.style.ts index 5ea37b44..5607bc81 100644 --- a/src/pages/account/settings/components/BaseView.style.ts +++ b/src/pages/account/settings/components/BaseView.style.ts @@ -1,58 +1,51 @@ -import { createStyles } from 'antd-style'; +import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { baseView: { - display: 'flex', - paddingTop: '12px', + [`@media screen and (max-width: ${token.screenXL}px)`]: { + flexDirection: "column-reverse", + }, }, - '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': { - width: '100%', + ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": { + width: "100%", }, left: { - minWidth: '224px', - maxWidth: '448px', + minWidth: "224px", + maxWidth: "448px", }, right: { - flex: '1', - paddingLeft: '104px', + [`@media screen and (max-width: ${token.screenXL}px)`]: { + display: "flex", + flexDirection: "column", + alignItems: "center", + maxWidth: "448px", + padding: "20px", + }, }, avatar_title: { - height: '22px', - marginBottom: '8px', - color: token.colorTextHeading, - fontSize: token.fontSize, - lineHeight: '22px', + [`@media screen and (max-width: ${token.screenXL}px)`]: { + display: "none", + }, }, avatar: { - width: '144px', - height: '144px', - marginBottom: '12px', - overflow: 'hidden', + width: "144px", + height: "144px", + marginBottom: "12px", + overflow: "hidden", }, img: { - width: '100%', + width: "100%", }, button_view: { - width: '144px', - textAlign: 'center', + width: "144px", + textAlign: "center", }, area_code: { - width: '72px', + width: "72px", }, phone_number: { - width: '214px', - }, - [`@media screen and (max-width: ${token.screenXL})`]: { - baseView: { flexDirection: 'column-reverse' }, - right: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - maxWidth: '448px', - padding: '20px', - }, - avatar_title: { display: 'none' }, + width: "214px", }, }; }); diff --git a/src/pages/account/settings/style.style.ts b/src/pages/account/settings/style.style.ts index 07e0cfee..d40583d3 100644 --- a/src/pages/account/settings/style.style.ts +++ b/src/pages/account/settings/style.style.ts @@ -3,16 +3,15 @@ import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { main: { - display: "flex", - width: "100%", - height: "100%", - paddingTop: "16px", - paddingBottom: "16px", - backgroundColor: token.colorBgContainer, + [`@media screen and (max-width: ${token.screenMD}px)`]: { + flexDirection: "column", + }, }, leftMenu: { - width: "224px", - borderRight: `${token.lineWidth} ${token.borderStyle} ${token.colorSplit}`, + [`@media screen and (max-width: ${token.screenMD}px)`]: { + width: "100%", + border: "none", + }, }, ".ant-menu-inline": { border: "none", @@ -21,8 +20,9 @@ const useStyles = createStyles(({ token }) => { fontWeight: "bold", }, right: { - flex: "1", - padding: "8px 40px", + [`@media screen and (max-width: ${token.screenMD}px)`]: { + padding: "40px", + }, }, title: { marginBottom: "12px", @@ -70,11 +70,6 @@ const useStyles = createStyles(({ token }) => { "font.weak": { color: token.colorError, }, - [`@media screen and (max-width: ${token.screenMD})`]: { - main: { flexDirection: "column" }, - leftMenu: { width: "100%", border: "none" }, - right: { padding: "40px" }, - }, }; }); diff --git a/src/pages/dashboard/analysis/style.style.ts b/src/pages/dashboard/analysis/style.style.ts index 43f32bf1..d588a793 100644 --- a/src/pages/dashboard/analysis/style.style.ts +++ b/src/pages/dashboard/analysis/style.style.ts @@ -11,22 +11,10 @@ const useStyles = createStyles(({ token }) => { "&:hover": { color: token.colorText }, }, rankingList: { - margin: "25px 0 0", - padding: "0", - listStyle: "none", + [`@media screen and (max-width: ${token.screenLG}px)`]: {}, }, li: { - display: "flex", - alignItems: "center", - marginTop: "16px", - zoom: "1", - "&::before, &::after": { display: "table", content: "' '" }, - "&::after": { - clear: "both", - height: "0", - fontSize: "0", - visibility: "hidden", - }, + [`@media screen and (max-width: ${token.screenLG}px)`]: {}, }, span: { color: token.colorText, @@ -58,8 +46,9 @@ const useStyles = createStyles(({ token }) => { textOverflow: "ellipsis", }, salesExtra: { - display: "inline-block", - marginRight: "24px", + [`@media screen and (max-width: ${token.screenLG}px)`]: { + display: "none", + }, }, a: { marginLeft: "24px", @@ -69,9 +58,13 @@ const useStyles = createStyles(({ token }) => { currentDate: { color: token.colorPrimary, }, - salesCard: {}, + salesCard: { + [`@media screen and (max-width: ${token.screenSM}px)`]: {}, + }, salesBar: { - padding: "0 0 32px 32px", + [`@media screen and (max-width: ${token.screenMD}px)`]: { + padding: "16px", + }, }, salesRank: { padding: "0 32px 32px 72px", @@ -128,21 +121,25 @@ const useStyles = createStyles(({ token }) => { marginLeft: "8px", color: token.colorTextHeading, }, - [`@media screen and (max-width: ${token.screenLG})`]: { - salesExtra: { display: "none" }, - rankingList: {}, - li: {}, - "span:first-child": { marginRight: "8px" }, - }, - [`@media screen and (max-width: ${token.screenMD})`]: { - rankingTitle: { marginTop: "16px" }, - salesCard: { padding: "16px" }, - salesBar: { padding: "16px" }, - }, - [`@media screen and (max-width: ${token.screenSM})`]: { - salesExtraWrap: { display: "none" }, - salesCard: {}, - ".ant-tabs-content": { paddingTop: "30px" }, + "span:first-child": { + [`@media screen and (max-width: ${token.screenLG}px)`]: { + marginRight: "8px", + }, + }, + rankingTitle: { + [`@media screen and (max-width: ${token.screenMD}px)`]: { + marginTop: "16px", + }, + }, + salesExtraWrap: { + [`@media screen and (max-width: ${token.screenSM}px)`]: { + display: "none", + }, + }, + ".ant-tabs-content": { + [`@media screen and (max-width: ${token.screenSM}px)`]: { + paddingTop: "30px", + }, }, }; }); diff --git a/src/pages/dashboard/monitor/style.style.ts b/src/pages/dashboard/monitor/style.style.ts index 9085c4a7..ae2e6285 100644 --- a/src/pages/dashboard/monitor/style.style.ts +++ b/src/pages/dashboard/monitor/style.style.ts @@ -3,17 +3,15 @@ import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { mapChart: { - height: "452px", - paddingTop: "24px", + [`@media screen and (max-width: ${token.screenLG}px)`]: { + height: "auto", + }, }, img: { display: "inline-block", maxWidth: "100%", maxHeight: "437px", }, - [`@media screen and (max-width: ${token.screenLG})`]: { - mapChart: { height: "auto" }, - }, }; }); diff --git a/src/pages/dashboard/workplace/style.style.ts b/src/pages/dashboard/workplace/style.style.ts index d7f79ee2..8902e252 100644 --- a/src/pages/dashboard/workplace/style.style.ts +++ b/src/pages/dashboard/workplace/style.style.ts @@ -12,7 +12,9 @@ const useStyles = createStyles(({ token }) => { fontWeight: "normal", }, pageHeaderContent: { - display: "flex", + [`@media screen and (max-width: ${token.screenSM}px)`]: { + display: "block", + }, }, avatar: { flex: "0 1 72px", @@ -24,12 +26,9 @@ const useStyles = createStyles(({ token }) => { }, }, content: { - position: "relative", - top: "4px", - flex: "1 1 auto", - marginLeft: "24px", - color: token.colorTextSecondary, - lineHeight: "22px", + [`@media screen and (max-width: ${token.screenSM}px)`]: { + marginLeft: "0", + }, }, contentTitle: { marginBottom: "12px", @@ -39,36 +38,10 @@ const useStyles = createStyles(({ token }) => { lineHeight: "28px", }, extraContent: { - zoom: "1", - "&::before, &::after": { display: "table", content: "' '" }, - "&::after": { - clear: "both", - height: "0", - fontSize: "0", - visibility: "hidden", - }, - float: "right", - whiteSpace: "nowrap", + [`@media screen and (max-width: ${token.screenSM}px)`]: {}, }, statItem: { - position: "relative", - display: "inline-block", - padding: "0 32px", - "&::after": { - position: "absolute", - top: "8px", - right: "0", - width: "1px", - height: "40px", - backgroundColor: token.colorSplit, - content: "''", - }, - "&:last-child": { - paddingRight: "0", - "&::after": { - display: "none", - }, - }, + [`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" }, }, "> p:first-child": { marginBottom: "4px", @@ -86,7 +59,11 @@ const useStyles = createStyles(({ token }) => { color: token.colorTextSecondary, fontSize: "20px", }, - members: {}, + members: { + [`@media screen and (max-width: ${token.screenLG}px)`]: { + marginBottom: "0", + }, + }, a: { display: "inline-block", flex: "1 1 0", @@ -123,7 +100,9 @@ const useStyles = createStyles(({ token }) => { lineHeight: "24px", verticalAlign: "top", }, - projectList: {}, + projectList: { + [`@media screen and (max-width: ${token.screenXS}px)`]: {}, + }, ".ant-card-meta-description": { height: "44px", overflow: "hidden", @@ -134,7 +113,7 @@ const useStyles = createStyles(({ token }) => { fontSize: "0", }, projectGrid: { - width: "33.33%", + [`@media screen and (max-width: ${token.screenXS}px)`]: { width: "100%" }, }, projectItemContent: { display: "flex", @@ -169,40 +148,11 @@ const useStyles = createStyles(({ token }) => { datetime: { color: token.colorTextDisabled, }, - [`@media screen and (max-width: ${token.screenXL}) and (min-width: @screen-lg)`]: - { - activeCard: { marginBottom: "24px" }, - members: { marginBottom: "0" }, - extraContent: { marginLeft: "-44px" }, - statItem: { padding: "0 16px" }, - }, - [`@media screen and (max-width: ${token.screenLG})`]: { - activeCard: { marginBottom: "24px" }, - members: { marginBottom: "0" }, - extraContent: { float: "none", marginRight: "0" }, - statItem: { - padding: "0 16px", - textAlign: "left", - "&::after": { - display: "none", - }, + activeCard: { + [`@media screen and (max-width: ${token.screenLG}px)`]: { + marginBottom: "24px", }, }, - [`@media screen and (max-width: ${token.screenMD})`]: { - extraContent: { marginLeft: "-16px" }, - projectList: {}, - projectGrid: { width: "50%" }, - }, - [`@media screen and (max-width: ${token.screenSM})`]: { - pageHeaderContent: { display: "block" }, - content: { marginLeft: "0" }, - extraContent: {}, - statItem: { float: "none" }, - }, - [`@media screen and (max-width: ${token.screenXS})`]: { - projectList: {}, - projectGrid: { width: "100%" }, - }, }; }); diff --git a/src/pages/list/basic-list/style.style.ts b/src/pages/list/basic-list/style.style.ts index 99a11224..98bbd2db 100644 --- a/src/pages/list/basic-list/style.style.ts +++ b/src/pages/list/basic-list/style.style.ts @@ -2,13 +2,16 @@ import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { - standardList: {}, + standardList: { + "@media screen and (max-width: 1400px)": {}, + }, ".ant-card-head": { borderBottom: "none", }, ".ant-card-head-title": { - padding: "24px 0", - lineHeight: "32px", + [`@media screen and (max-width: ${token.screenXS}px)`]: { + overflow: "visible", + }, }, ".ant-card-extra": { padding: "24px 0", @@ -23,32 +26,20 @@ const useStyles = createStyles(({ token }) => { lineHeight: "48px", }, headerInfo: { - position: "relative", - textAlign: "center", - "& > span": { - display: "inline-block", - marginBottom: "4px", - color: token.colorTextSecondary, - fontSize: token.fontSize, - lineHeight: "22px", - }, - "& > p": { - margin: "0", - color: token.colorTextHeading, - fontSize: "24px", - lineHeight: "32px", - }, - "& > em": { - position: "absolute", - top: "0", - right: "0", - width: "1px", - height: "56px", - backgroundColor: token.colorSplit, + [`@media screen and (max-width: ${token.screenSM}px)`]: { + marginBottom: "16px", + "& > em": { + display: "none", + }, }, }, listContent: { - fontSize: "0", + "@media screen and (max-width: 1400px)": { + textAlign: "right", + "& > div:last-child": { + top: "0", + }, + }, }, listContentItem: { display: "inline-block", @@ -66,81 +57,30 @@ const useStyles = createStyles(({ token }) => { lineHeight: "22px", }, extraContentSearch: { - width: "272px", - marginLeft: "16px", + [`@media screen and (max-width: ${token.screenSM}px)`]: { + width: "100%", + marginLeft: "0", + }, }, - [`@media screen and (max-width: ${token.screenXS})`]: { - standardList: {}, - ".ant-list-item-content": { + ".ant-list-item-content": { + [`@media screen and (max-width: ${token.screenXS}px)`]: { display: "block", flex: "none", width: "100%", }, - ".ant-list-item-action": { marginLeft: "0" }, - listContent: { - marginLeft: "0", - "& > div": { - marginLeft: "0", - }, - }, - listCard: {}, - ".ant-card-head-title": { overflow: "visible" }, }, - [`@media screen and (max-width: ${token.screenSM})`]: { - standardList: {}, - extraContentSearch: { width: "100%", marginLeft: "0" }, - headerInfo: { - marginBottom: "16px", - "& > em": { - display: "none", - }, + ".ant-list-item-action": { + [`@media screen and (max-width: ${token.screenXS}px)`]: { + marginLeft: "0", }, }, - [`@media screen and (max-width: ${token.screenMD})`]: { - standardList: {}, - listContent: { - "& > div": { - display: "block", - }, - "& > div:last-child": { - top: "0", - width: "100%", - }, - }, - listCard: {}, - ".ant-radio-group": { display: "block", marginBottom: "8px" }, - }, - [`@media screen and (max-width: ${token.screenLG}) and (min-width: @screen-md)`]: - { - standardList: {}, - listContent: { - "& > div": { - display: "block", - }, - "& > div:last-child": { - top: "0", - width: "100%", - }, - }, - }, - [`@media screen and (max-width: ${token.screenXL})`]: { - standardList: {}, - listContent: { - "& > div": { - marginLeft: "24px", - }, - "& > div:last-child": { - top: "0", - }, - }, + listCard: { + [`@media screen and (max-width: ${token.screenMD}px)`]: {}, }, - "@media screen and (max-width: 1400px)": { - standardList: {}, - listContent: { - textAlign: "right", - "& > div:last-child": { - top: "0", - }, + ".ant-radio-group": { + [`@media screen and (max-width: ${token.screenMD}px)`]: { + display: "block", + marginBottom: "8px", }, }, standardListForm: {}, diff --git a/src/pages/list/card-list/style.style.ts b/src/pages/list/card-list/style.style.ts index 3536b054..24cfc585 100644 --- a/src/pages/list/card-list/style.style.ts +++ b/src/pages/list/card-list/style.style.ts @@ -23,13 +23,14 @@ const useStyles = createStyles(({ token }) => { maxWidth: "100%", }, extraImg: { - width: "155px", - marginTop: "-20px", - textAlign: "center", + [`@media screen and (max-width: ${token.screenMD}px)`]: { + display: "none", + }, }, img: { - marginRight: "8px", - verticalAlign: "middle", + [`@media screen and (max-width: ${token.screenSM}px)`]: { + marginRight: "4px", + }, }, newButton: { width: "100%", @@ -50,31 +51,22 @@ const useStyles = createStyles(({ token }) => { wordBreak: "break-all", }, pageHeaderContent: { - position: "relative", + [`@media screen and (max-width: ${token.screenSM}px)`]: { + paddingBottom: "30px", + }, }, contentLink: { - marginTop: "16px", - }, - a: { - marginRight: "32px", - }, - [`@media screen and (max-width: ${token.screenLG})`]: { - contentLink: {}, - a: { marginRight: "16px" }, - }, - [`@media screen and (max-width: ${token.screenMD})`]: { - extraImg: { display: "none" }, - }, - [`@media screen and (max-width: ${token.screenSM})`]: { - pageHeaderContent: { paddingBottom: "30px" }, - contentLink: { + [`@media screen and (max-width: ${token.screenSM}px)`]: { position: "absolute", bottom: "-4px", left: "0", width: "1000px", }, - a: { marginRight: "16px" }, - img: { marginRight: "4px" }, + }, + a: { + [`@media screen and (max-width: ${token.screenSM}px)`]: { + marginRight: "16px", + }, }, }; }); diff --git a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts index 73f2c481..178e968e 100644 --- a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts +++ b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts @@ -2,24 +2,15 @@ import { createStyles } from "antd-style"; const useStyles = createStyles(({ token }) => { return { - listContent: {}, + listContent: { + [`@media screen and (max-width: ${token.screenXS}px)`]: {}, + }, description: { maxWidth: "720px", lineHeight: "22px", }, extra: { - marginTop: "16px", - color: token.colorTextSecondary, - lineHeight: "22px", - "& > em": { - marginLeft: "16px", - color: token.colorTextDisabled, - fontStyle: "normal", - }, - }, - [`@media screen and (max-width: ${token.screenXS})`]: { - listContent: {}, - extra: { + [`@media screen and (max-width: ${token.screenXS}px)`]: { "& > em": { display: "block", marginTop: "8px", diff --git a/src/pages/list/search/articles/style.style.ts b/src/pages/list/search/articles/style.style.ts index b7e50ed2..0a4ec44a 100644 --- a/src/pages/list/search/articles/style.style.ts +++ b/src/pages/list/search/articles/style.style.ts @@ -6,20 +6,16 @@ const useStyles = createStyles(({ token }) => { color: token.colorTextHeading, }, listItemExtra: { - width: "272px", - height: "1px", + [`@media screen and (max-width: ${token.screenLG}px)`]: { + width: "0", + height: "1px", + }, }, selfTrigger: { - marginLeft: "12px", - }, - [`@media screen and (max-width: ${token.screenXS})`]: { - selfTrigger: { display: "block", marginLeft: "0" }, - }, - [`@media screen and (max-width: ${token.screenMD})`]: { - selfTrigger: { display: "block", marginLeft: "0" }, - }, - [`@media screen and (max-width: ${token.screenLG})`]: { - listItemExtra: { width: "0", height: "1px" }, + [`@media screen and (max-width: ${token.screenMD}px)`]: { + display: "block", + marginLeft: "0", + }, }, }; }); diff --git a/src/pages/profile/advanced/style.style.ts b/src/pages/profile/advanced/style.style.ts index dae8be68..923bf4ff 100644 --- a/src/pages/profile/advanced/style.style.ts +++ b/src/pages/profile/advanced/style.style.ts @@ -13,17 +13,15 @@ const useStyles = createStyles(({ token }) => { marginBottom: "4px", }, stepDescription: { - position: "relative", - left: "38px", - paddingTop: "8px", - fontSize: "14px", - textAlign: "left", + [`@media screen and (max-width: ${token.screenSM}px)`]: { left: "8px" }, }, "> div": { marginTop: "8px", marginBottom: "4px", }, - pageHeader: {}, + pageHeader: { + [`@media screen and (max-width: ${token.screenSM}px)`]: {}, + }, ".ant-page-header-heading-extra > * + *": { marginLeft: "8px", }, @@ -32,10 +30,10 @@ const useStyles = createStyles(({ token }) => { justifyContent: "space-between", width: "200px", }, - [`@media screen and (max-width: ${token.screenSM})`]: { - stepDescription: { left: "8px" }, - pageHeader: {}, - ".ant-pro-page-header-wrap-row": { flexDirection: "column" }, + ".ant-pro-page-header-wrap-row": { + [`@media screen and (max-width: ${token.screenSM}px)`]: { + flexDirection: "column", + }, }, }; });