Skip to content

W
wisdom-components
Commit d670487d authored by 涂茜's avatar 涂茜
Browse files
Options

fix: 修改样式写法

parent 3c4dea72
Pipeline #24250 failed with stages
          in 9 seconds
          Hide whitespace changes
          Inline Side-by-side
          Showing with 135 additions and 105 deletions
          package.json
          View file @ d670487d
          ...@@ -127,6 +127,7 @@ ...@@ -127,6 +127,7 @@
          } }
          ], ],
          "dependencies": { "dependencies": {
          "classnames": "^2.2.6",
          "cross-spawn": "^7.0.3" "cross-spawn": "^7.0.3"
          } }
          } }
          packages/DeviceTree/src/index.js
          View file @ d670487d
          import React from 'react'; import React, { useContext } from 'react';
          import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
          import { Input, Divider, Tree } from 'antd'; import classNames from 'classnames';
          import { Input, Tree, Divider, ConfigProvider } from 'antd';
          import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
          import Empty from '@wisdom-components/Empty'; import Empty from '@wisdom-components/Empty';
          import styles from './index.less'; import './index.less';
          const DeviceTree = (props) => { const DeviceTree = (props) => {
          const { prefix, placeholder, treeData, onSearch } = props; const { prefix, placeholder, treeData, onSearch } = props;
          const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
          const prefixCls = getPrefixCls('device-tree');
          return ( return (
          <div className={styles.DeviceTree}> <div className={classNames(prefixCls)}>
          <Input <Input
          prefix={prefix} prefix={prefix}
          placeholder={placeholder} placeholder={placeholder}
          ......
          packages/DeviceTree/src/index.less
          View file @ d670487d
          .DeviceTree { @import (reference) '~antd/es/style/themes/default';
          @device-tree-prefix-cls: ~'@{ant-prefix}-device-tree';
          .@{device-tree-prefix-cls} {
          padding: 5px; padding: 5px;
          :global { .ant-divider {
          .ant-divider { margin: 6px 0 12px 0;
          margin: 6px 0 12px 0;
          }
          } }
          } }
          packages/Empty/src/index.js
          View file @ d670487d
          import React, { useEffect, useState } from 'react'; import React, { useContext } from 'react';
          import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
          import classNames from 'classnames';
          import { ConfigProvider } from 'antd';
          import noDataLight from './assets/noDataLight.svg'; import noDataLight from './assets/noDataLight.svg';
          import noDataDark from './assets/noDataDark.svg'; import noDataDark from './assets/noDataDark.svg';
          import errorLight from './assets/errorLight.png'; import errorLight from './assets/errorLight.png';
          ...@@ -12,6 +14,9 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr ...@@ -12,6 +14,9 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr
          const des = description ? description : DESC_DATA[`${statusCode}`]; const des = description ? description : DESC_DATA[`${statusCode}`];
          const imageSrc = image ? image : IMAGE_DATA[theme][statusCode == '0' ? 0 : 1]; const imageSrc = image ? image : IMAGE_DATA[theme][statusCode == '0' ? 0 : 1];
          const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
          const prefixCls = getPrefixCls('panda-empty');
          let imageNode = null; let imageNode = null;
          if (typeof image === 'string') { if (typeof image === 'string') {
          ...@@ -21,12 +26,18 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr ...@@ -21,12 +26,18 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr
          } }
          return ( return (
          <div className={`empty ${size}`}> <div
          <div className={'image'} style={imageStyle}> className={classNames(prefixCls, {
          small: size === 'small',
          middle: size === 'middle',
          large: size === 'large',
          })}
          >
          <div className={`${prefixCls}-image`} style={imageStyle}>
          {imageNode} {imageNode}
          </div> </div>
          {des && <div className={'des'}>{des}</div>} {des && <div className={`${prefixCls}-des`}>{des}</div>}
          {children && <div className={'footer'}>{children}</div>} {children && <div className={`${prefixCls}-footer`}>{children}</div>}
          </div> </div>
          ); );
          }; };
          ......
          packages/Empty/src/index.less
          View file @ d670487d
          .empty { @import (reference) '~antd/es/style/themes/default';
          @panda-empty-prefix-cls: ~'@{ant-prefix}-panda-empty';
          .@{panda-empty-prefix-cls} {
          font-size: 14px; font-size: 14px;
          text-align: center; text-align: center;
          .image { &-image {
          margin-bottom: 10px; margin-bottom: 10px;
          img { img {
          ...@@ -10,19 +13,19 @@ ...@@ -10,19 +13,19 @@
          } }
          } }
          .des { &-des {
          font-weight: 400; font-weight: 400;
          color: #90a0bb; color: #90a0bb;
          } }
          .footer { &-footer {
          margin-top: 16px; margin-top: 16px;
          } }
          &.small { &.small {
          margin: 8px 0; margin: 8px 0;
          .image { .@{panda-empty-prefix-cls}-image {
          height: 92px; height: 92px;
          } }
          } }
          ...@@ -30,7 +33,7 @@ ...@@ -30,7 +33,7 @@
          &.middle { &.middle {
          margin: 32px 0; margin: 32px 0;
          .image { .@{panda-empty-prefix-cls}-image {
          height: 124px; height: 124px;
          } }
          } }
          ...@@ -38,7 +41,7 @@ ...@@ -38,7 +41,7 @@
          &.large { &.large {
          margin: 32px 0; margin: 32px 0;
          .image { .@{panda-empty-prefix-cls}-image {
          height: 156px; height: 156px;
          } }
          } }
          ......
          packages/ImageSelect/src/index.js
          View file @ d670487d
          import React, { useEffect, useState } from 'react'; import React, { useContext, useState } from 'react';
          import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
          // import request from "umi-request"; import classNames from 'classnames';
          import { Input, Image, Modal, Row, Col } from 'antd'; import { Input, Image, Modal, Row, Col, ConfigProvider } from 'antd';
          import Empty from '@wisdom-components/Empty'; import Empty from '@wisdom-components/Empty';
          import { PlusOutlined, SearchOutlined } from '@ant-design/icons'; import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
          import styles from './index.less'; import './index.less';
          const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) => { const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) => {
          const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
          const prefixCls = getPrefixCls('image-select');
          const baseUrl = url ? url : window.location.origin; const baseUrl = url ? url : window.location.origin;
          const imgList = dataSource.map((item) => { const imgList = dataSource.map((item) => {
          return { return {
          ...@@ -53,16 +56,18 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -53,16 +56,18 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          <Col <Col
          span={4} span={4}
          key={item.value + index} key={item.value + index}
          className={[styles.itemBox, imgSrc === item.value ? styles.selected : null]} className={classNames(`${prefixCls}-modal-item-wrap`, {
          selected: imgSrc === item.value,
          })}
          onClick={(e) => handleSelect(e, item)} onClick={(e) => handleSelect(e, item)}
          > >
          <Image <Image
          className={styles.itemImg} className={classNames(`${prefixCls}-modal-item-image`)}
          preview={false} preview={false}
          src={baseUrl + item.value} src={baseUrl + item.value}
          title={item.text} title={item.text}
          /> />
          <div className={styles.itemText}> <div className={classNames(`${prefixCls}-modal-item-text`)}>
          {item.text ? item.text.split('.')[0] : item.text} {item.text ? item.text.split('.')[0] : item.text}
          </div> </div>
          </Col> </Col>
          ...@@ -72,9 +77,15 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -72,9 +77,15 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          }; };
          return ( return (
          <div className={styles.ImageSelect}> <div className={classNames(prefixCls)}>
          <div className={styles.pandaImg} onClick={showModal}> <div className={classNames(`${prefixCls}-wrap`)} onClick={showModal}>
          {!!imgSrc && <Image className={styles.coverImg} preview={false} src={baseUrl + imgSrc} />} {!!imgSrc && (
          <Image
          className={classNames(`${prefixCls}-cover`)}
          preview={false}
          src={baseUrl + imgSrc}
          />
          )}
          {!imgSrc && ( {!imgSrc && (
          <div> <div>
          <PlusOutlined /> <PlusOutlined />
          ...@@ -86,10 +97,10 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -86,10 +97,10 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          width={width} width={width}
          centered centered
          title={ title={
          <div className={styles.header}> <div className={classNames(`${prefixCls}-modal-header`)}>
          <div className={styles.title}>{title}</div> <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
          <Input <Input
          className={styles.search} className={classNames(`${prefixCls}-modal-search`)}
          placeholder="搜索图片关键词" placeholder="搜索图片关键词"
          allowClear allowClear
          bordered={false} bordered={false}
          ...@@ -102,13 +113,13 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) ...@@ -102,13 +113,13 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
          footer={null} footer={null}
          visible={visible} visible={visible}
          onCancel={handleCancel} onCancel={handleCancel}
          className={styles.ImageSelectModal} className={classNames(`${prefixCls}-modal`)}
          > >
          {!!imgList.length && {!!imgList.length &&
          imgList.map((item, index) => { imgList.map((item, index) => {
          return ( return (
          <div key={item.text + index} className={styles.folder}> <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
          <div className={styles.pathTitle}>{item.text}</div> <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
          <div>{renderImageList(item.list)}</div> <div>{renderImageList(item.list)}</div>
          </div> </div>
          ); );
          ......
          packages/ImageSelect/src/index.less
          View file @ d670487d
          .ImageSelect { @import (reference) '~antd/es/style/themes/default';
          .pandaImg { @image-select-prefix-cls: ~'@{ant-prefix}-image-select';
          .@{image-select-prefix-cls} {
          &-wrap {
          display: flex; display: flex;
          justify-content: center; justify-content: center;
          align-items: center; align-items: center;
          ...@@ -12,98 +15,94 @@ ...@@ -12,98 +15,94 @@
          overflow: hidden; overflow: hidden;
          cursor: pointer; cursor: pointer;
          .coverImg {
          width: 88px;
          height: 88px;
          }
          p { p {
          font-size: 12px; font-size: 12px;
          } }
          } }
          &-cover {
          width: 88px;
          height: 88px;
          }
          } }
          .ImageSelectModal { .@{image-select-prefix-cls}-modal {
          .header { &-header {
          display: flex; display: flex;
          justify-content: space-between; justify-content: space-between;
          align-items: center; align-items: center;
          padding-right: 30px; padding-right: 30px;
          }
          .title { &-title {
          font-size: 16px; font-size: 16px;
          font-weight: 500; font-weight: 500;
          color: #222222; color: #222222;
          } }
          .search { &-search {
          width: 313px; width: 313px;
          height: 29px; height: 29px;
          background: #eef1f9; background: #eef1f9;
          border-radius: 15px; border-radius: 15px;
          :global { .ant-input-prefix {
          .ant-input-prefix { color: #5a6c8a;
          color: #5a6c8a; }
          }
          }
          input { input {
          background: #eef1f9; background: #eef1f9;
          }
          } }
          } }
          .folder { &-folder {
          border-top: 1px solid #ccd6e1; border-top: 1px solid #ccd6e1;
          }
          .pathTitle { &-folder:first-of-type {
          font-size: 16px; border: none;
          color: #242323;
          margin: 20px 0;
          }
          .itemBox { .@{image-select-prefix-cls}-modal-path-title {
          text-align: center; margin-top: 0;
          border: 1px solid transparent;
          .itemImg {
          width: 40px;
          height: 40px;
          }
          &:hover {
          cursor: pointer;
          border: 1px solid #b8d6fb;
          background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
          border-radius: 2px;
          }
          } }
          }
          .selected { &-path-title {
          border: 1px solid #b8d6fb; font-size: 16px;
          background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%); color: #242323;
          border-radius: 2px; margin: 20px 0;
          } }
          .itemText { &-item-wrap {
          font-size: '12px'; text-align: center;
          white-space: 'nowrap'; border: 1px solid transparent;
          } }
          &:first-of-type { &-item-wrap:hover {
          border: none; cursor: pointer;
          border: 1px solid #b8d6fb;
          background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
          border-radius: 2px;
          }
          .pathTitle { &-item-image {
          margin-top: 0; width: 40px;
          } height: 40px;
          }
          } }
          :global { &.selected {
          .ant-modal-body { border: 1px solid #b8d6fb;
          max-height: 600px; background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
          overflow-y: auto; border-radius: 2px;
          } }
          &-item-text {
          font-size: 12px;
          white-space: nowrap;
          }
          .ant-modal-body {
          max-height: 600px;
          overflow-y: auto;
          } }
          } }
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment