yuangong

src/app.js

@@ -1,3 +1,21 @@
+// (function (doc, win) {
+//   var docEl = doc.documentElement,
+//     resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
+//     recalc = function () {
+//       var clientWidth = docEl.clientWidth;
+//       if (!clientWidth) return;
+//       if (clientWidth >= 750) {
+//         docEl.style.fontSize = '100px';
+//       } else {
+//         docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+//       }
+//     };
+
+//   if (!doc.addEventListener) return;
+//   win.addEventListener(resizeEvt, recalc, false);
+//   doc.addEventListener('DOMContentLoaded', recalc, false);
+// })(document, window);
+
 export const dva = {
   config: {
     onError(e) {

src/pages/staff/list/StaffList.jsx

@@ -29,16 +29,16 @@ const toEditStaff = (userId) => () => {
  */
 const CartBody = (props) => {
   const { data } = props
-    
+
   const confirm = () => {
     Modal.confirm({
       title: '确认停用该角色？',
       okText: '确认',
       cancelText: '取消',
-      onOk () {
+      onOk() {
         console.log('OK');
       },
-      onCancel () {
+      onCancel() {
         console.log('Cancel');
       },
     });
@@ -49,14 +49,18 @@ const CartBody = (props) => {
       <div>
 
         <Avatar src={data.avatar} style={{ width: 94, height: 94 }} />
-        <span className={Styles.ediText} style={{ marginLeft: '20px' }} onClick={toEditStaff(data.userId)}>
+        <Button type="link" style={{ marginLeft: '10px', color: '#FF925C', fontSize: '18px' }} onClick={toEditStaff(data.userId)}>
           编辑
-                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
-        </span>
-        <span className={Styles.ediText} style={{ marginLeft: '50px' }} onClick={confirm}>
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+        </Button>
+        <Button type="link" style={{ fontSize: '18px', color: '#cacaca', position: 'absolute', top: '50px', right: '0' }} onClick={confirm}>
           停用
-                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
-        </span>
+                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+        </Button>
+        <Button type="link" style={{ fontSize: '18px', color: '#FF925C', position: 'absolute', top: '50px', right: '0' }} onClick={confirm}>
+          启用
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+        </Button>
 
       </div>
       <div>
@@ -69,14 +73,11 @@ const CartBody = (props) => {
           }
         </span>
 
-        <p className={Styles.cardText} style={{ width: '300px' }}>
-          <span>姓名:{data.userName}</span>
-
-          <span style={{ float: "right" }}>状态:{data.status === '1' ? '启用' : '停用'}</span>
-
+        <p className={Styles.cardText} >姓名:{data.userName}
         </p>
-        <p className={Styles.cardText} style={{ width: '300px' }}>
-          <span>电话:{data.phone}</span>
+        <p className={Styles.statusText} > 状态:{data.status === '1' ? '启用' : '停用'} </p>
+        <p className={Styles.phoneText} >
+          电话:{data.phone}
         </p>
       </div>
 
@@ -86,10 +87,10 @@ const CartBody = (props) => {
 
 
 const header = (props) => {
-  const [tempData,setTempData] = useState([])
+  const [tempData, setTempData] = useState([])
   useEffect(() => {
     getList({ pageNum: 1, pageSize: 10 });
-  },[])
+  }, [])
 
   const getList = (params) => {
     request({
@@ -97,8 +98,8 @@ const header = (props) => {
       method: 'GET',
       params: { ...params },
     }).then((data) => {
-        console.log(data,"listData")
-        setTempData(data.records)
+      console.log(data, "listData")
+      setTempData(data.records)
     })
   }
 
@@ -108,15 +109,15 @@ const header = (props) => {
   }
 
   // 提交事件
-const handleSubmit = (e, props) => {
-  e.preventDefault();
-  props.form.validateFields((err, values) => {
-    if (!err) {
-      console.log('提交数据: ', values)
-      getList({ pageNum: 1, pageSize: 10, ...values })
-    }
-  });
-}
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('提交数据: ', values)
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
 
   const { getFieldDecorator } = props.form
   return (
@@ -156,8 +157,7 @@ const handleSubmit = (e, props) => {
           </Button>
         </Form.Item>
       </Form>
-      <Button type="danger" className={styles.addBtn} onClick={toEditStaff()}>新增</Button>
-
+      <Button type="danger" style={{ margin: '20px 0', padding: '2px 36px' }} onClick={toEditStaff()}>新增</Button>
       <Row style={{ padding: ' 0 10px' }}>
         {
           tempData.map((item, index) => (

src/pages/staff/list/style.less

@@ -11,33 +11,36 @@
   border: 1px solid #dbdbdb;
 }
 
-.addButton {
-  // background: #50be00;
-  border-radius: 4px;
-  border: 0px;
-  margin: 10px 0px;
-}
 
 .card {
-  width: 348px;
+  min-width: 330px;
+  margin-right: 20px;
   height: 244px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
   border-radius: 12px;
   margin-bottom: 40px;
-
+  position: relative;
 }
 
 .cardText {
-
-  height: 28px;
   font-size: 20px;
-  font-weight: 400;
   color: rgba(102, 102, 102, 1);
-  line-height: 28px;
-  margin-top: 10px;
-  margin-bottom: 0;
-
+  position: absolute;
+  bottom:36px;
+}
+.statusText {
+  font-size: 20px;
+  color: rgba(102, 102, 102, 1);
+  position: absolute;
+  bottom:36px;
+  right: 20px;
+}
+.phoneText{
+  font-size: 20px;
+  color: rgba(102, 102, 102, 1);
+  position: absolute;
+  bottom:0px;
 }
 
 .cardItem {
@@ -49,21 +52,9 @@
   align-items: center;
 }
 
-.ediText {
-  width: 36px;
-  height: 25px;
-  font-size: 18px;
-
-  font-weight: 400;
-  color: rgba(255, 146, 92, 1);
-  line-height: 25px;
-
-}
 
 .cardTag {
-  height: 18px;
   font-size: 10px;
-  // background: #fdce22;
   border-radius: 4px;
   color: #ffffff;
   line-height: 14px;
@@ -76,13 +67,12 @@
   width: 84px;
   justify-content: space-between;
   text-align: justify;
-  text-align-last: justify
+  text-align-last: justify;
 }
 
 
 .roletext {
   font-size: 20px;
-
   font-weight: 400;
   color: rgba(51, 51, 51, 1);
   line-height: 28px;