style

src/pages/building/list/index.jsx

@@ -103,59 +103,60 @@ function header(props) {
       </Button>
 
       {/* 卡片内容，显示楼盘项目  */}
-      <Card
-        hoverable
-        style={{ width: '300px', height: '400px', borderRadius: '12px', boxShadow: '0px 0px 20px #e7e7e7e7' }}
-        cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: '299px', height: '203px' }}></img>}
-        bodyStyle={{ padding: '10px' }}
-      >
-       <Row className={ Styles.cardText }>
-        <Col span={7}>楼盘编号：</Col>
-        <Col span={12}>S101</Col>
-        <Col span={5}>
-          <span className={ Styles.ediText }>编辑</span>
-          <Icon type="form" style={{ color: '#C0C4CC' }}/>
+      <Row style={{ padding: ' 0 10px' }}>
+        <Col span={8}>
+          <Card
+            hoverable
+            style={{ minWidth: '400px', borderRadius: '12px',margin:'10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)', }}
+            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ borderRadius: '12px 12px 0 0', width: '100%', height: '14vw' }}></img>}
+            bodyStyle={{ padding: '10px 20px' }}
+          >
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘编号</span>
+              <span >：S101</span>
+              <span className={Styles.ediText}>
+                编辑
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
+              </span>
+            </p>
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘名称</span>
+              <span >：城开花园</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>均价</span>
+              <span >
+                ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> 111 </span>元/m
+        </span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>项目地址</span>
+              <span >：顾戴路1801弄</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>发布状态</span>
+              <span >：已发布</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>录入时间</span>
+              <span >：2019-08-28 17</span>
+            </p>
+            <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
+              <span style={{ color: '#1990FF' }}>
+                取消发布
+                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+              <span style={{
+                color: '#FF4A4A', position: 'absolute',
+                right: '0'
+              }} >
+                删除
+                <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+            </p>
+          </Card>
         </Col>
       </Row>
-      <Row>
-        <Col span={7}>楼盘名称：</Col>
-        <Col span={17}>城开花园</Col>
-      </Row>
-      <Row>
-        <Col span={7}>均&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：</Col>
-        <Col span={17}>
-          约<span style={{ color: '#FF0707', fontWeight: 'bold' }}>111</span>元/m
-        </Col>
-      </Row>
-      <Row>
-        <Col span={7}>项目地址：</Col>
-        <Col span={17}>顾戴路1801弄</Col>
-      </Row>
-      <Row>
-        <Col span={7}>发布状态：</Col>
-        <Col span={17}>已发布</Col>
-      </Row>
-      <Row>
-        <Col span={7}>录入时间：</Col>
-        <Col span={17}>2019-08-28 17</Col>
-      </Row>
-      <Row style={{ marginTop: '15px' }}>
-        <Col span={7}>
-          <span style={{ color: '#1990FF', fontWeight: 'bold' }}>
-            取消发布
-          </span>
-          <Icon type="close-circle" style={{ color: '#C0C4CC' }} />
-        </Col>
-        <Col span={12}></Col>
-        <Col span={5}>
-          <span style={{ color: '#FF4A4A', fontWeight: 'bold' }}>
-            删除
-          </span>
-          <Icon type="rest" style={{ color: '#C0C4CC' }} />
-        </Col>
-      </Row>
-      </Card>
-
       {/* 分页 */}
       <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
         <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />

src/pages/building/list/style.css

@@ -1,31 +0,0 @@
-.SubmitButton {
-  background: #3a91d5;
-  border-radius: 7px;
-  border: 0px;
-}
-.SelectFrom {
-  width: 180px;
-  background: #ffffff;
-  border-radius: 7px;
-  border: 1px solid #dbdbdb;
-}
-.addButton {
-  background: #50be00;
-  border-radius: 4px;
-  border: 0px;
-  margin: 10px 0px;
-}
-.cardText {
-  font-size: 14px;
-  font-family: 'PingFangSC';
-  font-weight: 400;
-  color: #666666;
-  line-height: 25px;
-}
-.ediText {
-  font-size: 14px;
-  font-family: 'PingFangSC';
-  font-weight: 400;
-  color: #ff925c;
-  line-height: 25px;
-}

src/pages/building/list/style.less

@@ -1,37 +1,48 @@
-// @import '~antd/es/style/themes/default.less';
-
 .SubmitButton {
-  background: rgba(58, 145, 213, 1);
+  background: #3a91d5;
   border-radius: 7px;
   border: 0px;
 }
-
 .SelectFrom {
   width: 180px;
-  background: rgba(255, 255, 255, 1);
+  background: #ffffff;
   border-radius: 7px;
-  border: 1px solid rgba(219, 219, 219, 1);
+  border: 1px solid #dbdbdb;
 }
-
 .addButton {
-  background:rgba(80,190,0,1);
-  border-radius:4px;
+  background: #50be00;
+  border-radius: 4px;
   border: 0px;
   margin: 10px 0px;
 }
-
 .cardText {
-  font-size:14px;
-  font-family:'PingFangSC';
-  font-weight:400;
-  color:rgba(102,102,102,1);
-  line-height:25px;
-}
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
 
+}
+.cardItem{
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;  
+}
 .ediText {
-  font-size:14px;
-  font-family:'PingFangSC';
-  font-weight:400;
-  color:rgba(255,146,92,1);
-  line-height:25px;
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
 }

src/pages/building/list/style.wxss

@@ -1,31 +0,0 @@
-.SubmitButton {
-  background: #3a91d5;
-  border-radius: 7px;
-  border: 0px;
-}
-.SelectFrom {
-  width: 180px;
-  background: #ffffff;
-  border-radius: 7px;
-  border: 1px solid #dbdbdb;
-}
-.addButton {
-  background: #50be00;
-  border-radius: 4px;
-  border: 0px;
-  margin: 10px 0px;
-}
-.cardText {
-  font-size: 14px;
-  font-family: 'PingFangSC';
-  font-weight: 400;
-  color: #666666;
-  line-height: 25px;
-}
-.ediText {
-  font-size: 14px;
-  font-family: 'PingFangSC';
-  font-weight: 400;
-  color: #ff925c;
-  line-height: 25px;
-}

src/pages/integralMall/GoodsList.jsx

@@ -155,11 +155,11 @@ export default () => (
       <App />
       <Input placeholder="最小积分" className={styles.searchItem} />
       <Input placeholder="最大积分" className={styles.searchItem} />
-      <Button type="primary" size="small">
+      <Button type="primary" className={styles.searchBtn}>
         查询
       </Button>
     </div>
-    <Button className={styles.addBtn}>新增</Button>
+    <Button type="primary" className={styles.addBtn}>新增</Button>
     <Table dataSource={dataSource} columns={columns} />
 
   </>

src/pages/style/GoodsList.less

@@ -21,6 +21,21 @@
   background-color: #50be00;
   color: #fff;
   margin: 30px 0;
+  border-color: #50be00;
+}
+.addBtn:focus {
+  color: #fff;
+  background-color: #50be00;
+  border-color: #50be00;
+}
+.searchBtn{
+ background-color: #3A91D5;
+ border-color: #3A91D5;
+}
+.searchBtn:focus {
+  color: #fff;
+  background-color: #3A91D5;
+  border-color: #3A91D5;
 }
 .touxiang {
   width: 93px;