[new]保安详情接口

config/config.ts

@@ -89,8 +89,13 @@ export default defineConfig({
                   name: 'serviceproviders',
                   routes: [
                     { path: './', component: './UserManagement/ServiceProviderManagement/ServiceProviderManagement' },
-                    { path: './Detail', component: './UserManagement/ServiceProviderManagement/Detail' },
-                    { path: './Edit', component: './UserManagement/ServiceProviderManagement/Edit' },
+                    {
+                      path: './Detail',
+                      routes: [
+                        { path: './', component: './UserManagement/ServiceProviderManagement/Detail'},
+                        { path: './Guard', component: './UserManagement/ServiceProviderManagement/Guard'}
+                    ]},                
+                    { path: './Edit', component: './UserManagement/ServiceProviderManagement/Edit' },                    
                     {path:'./Services',component:'./UserManagement/ServiceProviderManagement/Services'},
                   ] 
                 },

src/components/BackButton/BackButton.tsx

+import React from 'react';
+import styles from './index.less';
+
+import {Button } from 'antd';
+
+const BackButton = () => {
+
+  const goToReturn = () => {
+    history.back()
+  }
+  return (
+    <>
+         <Button onClick={goToReturn}>Back</Button>
+    </>
+  );
+};
+
+export default BackButton;

src/components/BackButton/index.less

+// 线栏
+.line{
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid rgba(217,217,217,1);
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
\ No newline at end of file

src/components/ShowOptions/index.jsx

@@ -49,7 +49,7 @@ class ShowOptions extends React.Component {
                 selectoptionsAll:'所有',
                 selectoptionsSearchCell :'搜索小区',
                 selectoptionsAllCell:'全部小区',
-                componetVisible:'展开',
+                componetVisible:'收起',
                })
         }else{
             this.setState({
@@ -61,13 +61,13 @@ class ShowOptions extends React.Component {
                 selectoptionsAll:'All',
                 selectoptionsSearchCell :'Search cell',
                 selectoptionsAllCell:'All Cell',
-                componetVisible:'Open',
+                componetVisible:'Put It Away',
             })
         }
     };
     constructor(props) {
         super(props);
-        const {list, dispatch } = this.props;
+        const {list, dispatch,defaultValue } = this.props;
     
         if(list==null){
             //console.error("组件错误:没有数据导入")            
@@ -142,7 +142,7 @@ class ShowOptions extends React.Component {
       
   render() {
     return (
-      <div style={{minWidth:800}}>
+      <div style={{minWidth:800,marginBottom:16}}>
             {
                     this.state.componetVisible==this.state.selectoptionsOpen?
                     <div style={{width:"100%",height:48, position:"relative"}}>
@@ -174,12 +174,14 @@ class ShowOptions extends React.Component {
                             <div  style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}>
                            
                             <Input.Search placeholder={this.state.selectoptionsSearchCell} onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} />
-                            <div><h1> </h1></div>                                                          
+                            <div><h1> </h1></div>   
+                            <div style={{margin:16}}>                                                       
                                 {(this.state.checkedList).map((tag, index) => {
                                     return (
                                     <Tag color="blue" key={"Tag_"+index}>{tag}</Tag>              
                                     );
                                 })}
+                            </div>
                              <div><h1> </h1></div>                                                                      
                             </div>                           
                         </div> 

src/components/TagSelect/index.jsx

+import { Tag, Input, Tooltip } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+class TagSelect extends React.Component {
+  state = {
+    tags: ['Unremovable', 'Tag 2', 'Tag 3'],
+    inputVisible: false,
+    inputValue: '',
+    editInputIndex: -1,
+    editInputValue: '',
+  };
+
+  handleClose = removedTag => {
+    const tags = this.state.tags.filter(tag => tag !== removedTag);
+    console.log(tags);
+    this.setState({ tags });
+  };
+
+  showInput = () => {
+    this.setState({ inputVisible: true }, () => this.input.focus());
+  };
+
+  handleInputChange = e => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleInputConfirm = () => {
+    const { inputValue } = this.state;
+    let { tags } = this.state;
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      tags = [...tags, inputValue];
+    }
+    console.log(tags);
+    this.setState({
+      tags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+
+  handleEditInputChange = e => {
+    this.setState({ editInputValue: e.target.value });
+  };
+
+  handleEditInputConfirm = () => {
+    this.setState(({ tags, editInputIndex, editInputValue }) => {
+      const newTags = [...tags];
+      newTags[editInputIndex] = editInputValue;
+
+      return {
+        tags: newTags,
+        editInputIndex: -1,
+        editInputValue: '',
+      };
+    });
+  };
+
+  saveInputRef = input => {
+    this.input = input;
+  };
+
+  saveEditInputRef = input => {
+    this.editInput = input;
+  };
+
+  render() {
+    const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
+    return (
+      <>
+        {tags.map((tag, index) => {
+          if (editInputIndex === index) {
+            return (
+              <Input
+                ref={this.saveEditInputRef}
+                key={tag}
+                size="small"
+                className={styles.tagInput}
+                value={editInputValue}
+                onChange={this.handleEditInputChange}
+                onBlur={this.handleEditInputConfirm}
+                onPressEnter={this.handleEditInputConfirm}
+              />
+            );
+          }
+
+          const isLongTag = tag.length > 20;
+
+          const tagElem = (
+            <Tag
+              className="editTag"
+              key={tag}
+              closable={index !== 0}
+              onClose={() => this.handleClose(tag)}
+            >
+              <span
+                onDoubleClick={e => {
+                  if (index !== 0) {
+                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
+                      this.editInput.focus();
+                    });
+                    e.preventDefault();
+                  }
+                }}
+              >
+                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+              </span>
+            </Tag>
+          );
+          return isLongTag ? (
+            <Tooltip title={tag} key={tag}>
+              {tagElem}
+            </Tooltip>
+          ) : (
+            tagElem
+          );
+        })}
+        {inputVisible && (
+          <Input
+            ref={this.saveInputRef}
+            type="text"
+            size="small"
+            className={styles.tagInput}
+            value={inputValue}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputConfirm}
+            onPressEnter={this.handleInputConfirm}
+          />
+        )}
+        {!inputVisible && (
+          <Tag className={styles.siteTagPlus} onClick={this.showInput}>
+            <PlusOutlined /> New Services
+          </Tag>
+        )}
+      </>
+    );
+  }
+}
+
+export default TagSelect;
\ No newline at end of file

src/components/TagSelect/index.less

+.siteTagPlus {
+    background: #fff;
+    border-style: dashed;
+  }
+  .editTag {
+    user-select: none;
+  }
+  .tagInput {
+    width: 78px;
+    margin-right: 8px;
+    // vertical-align: top;
+  }
\ No newline at end of file

src/components/TitleBack/TitleBack.tsx

+import React from 'react';
+import styles from './index.less';
+
+import BackButton from '../BackButton/BackButton';
+import TitleGet from '../TitleGet/TitleGet';
+
+const TitleBack = (props:any) => {
+
+  return (
+    <>
+      <div className={styles.item0}><TitleGet title={props.title}/></div>
+      <div className={styles.item2}><BackButton/></div>
+      <div className={styles.clear0}></div>
+    </>
+  );
+};
+
+export default TitleBack;

src/components/TitleBack/index.less

+//头部组件
+.item0{
+    float: left;
+}
+
+
+.item2{
+    float: right;
+}
+
+.clear{
+    clear: both;
+}
+.clear0{
+    .clear();
+    margin-bottom: 35px;
+}

src/components/TitleGet/TitleGet.tsx

+import React from 'react';
+import styles from './index.less';
+
+const TitleGet = (props:any) => {
+
+  return (
+    <>
+      <div className={styles.item}>{props.title}</div>
+    </>
+  );
+};
+
+export default TitleGet;

src/components/TitleGet/index.less

+// 线栏
+.font{
+    border-left: 5px solid rgba(24,144,255,1);
+    font-family:'Source Han Sans CN';
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+}
+
+.item{
+    .font();
+    text-indent: 15px;
+}
\ No newline at end of file

src/models/ServiceProvider.ts

@@ -21,6 +21,9 @@ export default {
     returnCurDataFollow(state, { CurDataFollow }) {
       return { ...state, CurDataFollow };
     },
+    returnCurDataFollowDetail(state, { CurDataFollowDetail }) {
+      return { ...state, CurDataFollowDetail };
+    },
   },
 
   effects: {
@@ -71,7 +74,11 @@ export default {
       let CurDataFollow = resp.data.rows;
       yield put({ type: 'returnCurDataFollow', CurDataFollow, });
     },
+    //获取服务商保安详情根据服务商名
+    *getSecurityGuarderById({ playload }, { call, put }) {
+      let CurDataFollowDetail = playload;
+      yield put({ type: 'returnCurDataFollowDetail', CurDataFollowDetail, });
+    },
     
-
   },
 };

src/pages/UserManagement/ServiceProviderManagement/Detail.tsx

@@ -2,18 +2,21 @@ import React, { useState, useEffect } from 'react';
 import styles from './Detail.less';
 import { Input ,Button,Table,Space,Pagination,Tooltip, Checkbox } from 'antd';
 
-import { Link, useIntl, connect, Dispatch } from 'umi';
+import { Link, useIntl, connect, Dispatch,history } from 'umi';
 
 
 
 import ShowOptions from '../../../components/ShowOptions/index';
 
+import TitleBack from '../../../components/TitleBack/TitleBack';
+
 const Detail = (props:any) => {
 
   const { dispatch, Data, CurData,CurDataFollow,location } = props; 
   
   const getByProviderName = (values: any) => { dispatch({ type: 'ServiceProvider/getByProviderName', playload: values }) };
   const getSecurityGuarder = (values: any) => { dispatch({ type: 'ServiceProvider/getSecurityGuarder', playload: values }) };
+  const getSecurityGuarderById = (values: any) => { dispatch({ type: 'ServiceProvider/getSecurityGuarderById', playload: values }) };
 
   useEffect(() => {   
     getByProviderName(location.query)
@@ -25,8 +28,10 @@ const Detail = (props:any) => {
     console.log(CurDataFollow)
   }, [CurData,CurDataFollow]); 
   
-  const goToReturn = () => {
-    history.back()
+
+  const goToGuard = (values: any, e: any) => {
+    getSecurityGuarderById(values)
+    history.push(location.pathname +'/Guard?saferName='+values.saferName)
   }
   const pagination={defaultCurrent:1,total: 16}
 
@@ -46,7 +51,7 @@ const Detail = (props:any) => {
     {
       title: "actions",
       render: (text: any, record: any) => (
-        <Space size="middle"> <a>Detail</a></Space>               
+        <Space size="middle"> <a onClick={goToGuard.bind(this,record)}>Detail</a></Space>               
       ),
     },
   ];
@@ -54,11 +59,8 @@ const Detail = (props:any) => {
   return (
     <div className={styles.base}>
 
-            {/* 头部组件 */}
-      <div className={styles.box}>
-        <div className={styles.item1}>Service Provider Details</div>
-        <button className={styles.item3} onClick={goToReturn}>返回</button>
-      </div>
+
+      <TitleBack title="Service Provider Details" />
       
       <div className={styles.bigbox}>
       <div className={styles.box0}>
@@ -92,14 +94,13 @@ const Detail = (props:any) => {
 
       <div className={styles.box6}>
         <div className={styles.box1item1}>Service Community</div>
-      </div>
+        </div>
+        <ShowOptions list={['小区']} defaultValue={"Put It Away"} onSubmit={printContent} />  
 
       <div className={styles.box7}>
         <div className={styles.box1item1}>Security Guard Account</div>
       </div>
       </div>
-      <ShowOptions list={['小区']} onSubmit={printContent} />   
-
       <Table rowKey={"id"} style={{ marginTop: 16 }} dataSource={CurDataFollow} columns={columns} pagination={pagination} />
       
       <Button >Cancellation</Button>

src/pages/UserManagement/ServiceProviderManagement/Edit.tsx

@@ -78,7 +78,7 @@ const Edit= (props:any) => {
       
         <div className={styles.line}></div>
         <Form.Item>
-          <Button type="primary" size="large" htmlType="submit">提交</Button>
+          <Button type="primary" htmlType="submit">Submit</Button>
         </Form.Item>
       </Form>
       

src/pages/UserManagement/ServiceProviderManagement/Guard.less

+@import '~antd/lib/style/themes/default.less';
+
+//基石
+.base {
+    width: 100%;
+    background-color: #ffffff;
+    padding: 34px;
+    min-width: 1020px;
+}
+
+//头部组件
+.item0{
+    float: left;
+}
+.item0_1{
+    float: left;
+    line-height: 32px;
+    margin-left: 38px;
+}
+.item1{
+    float: left;
+    width: 120px;
+}
+.item1_1{
+    float: left;
+    margin-left: 16px;
+}
+.item2{
+    float: right;
+}
+
+.clear{
+    clear: both;
+}
+.clear0{
+    .clear();
+    margin-bottom: 35px;
+}
+.clear1{
+    .clear();
+    margin-bottom: 16px;
+}
\ No newline at end of file

src/pages/UserManagement/ServiceProviderManagement/Guard.tsx

+import React, { useState, useEffect } from 'react';
+import styles from './Guard.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Button } from 'antd';
+
+import { Link, useIntl, connect, Dispatch } from 'umi';
+
+import Line from '../../../components/Line/Line';
+import BackButton from '../../../components/BackButton/BackButton';
+import TitleGet from '../../../components/TitleGet/TitleGet';
+
+const Guard = (props:any) => {
+
+  const {CurDataFollowDetail} = props; 
+  
+  return (
+    <div className={styles.base}>
+
+
+      <div className={styles.item0}><TitleGet title={"Edit Security Guard Account"}/></div>
+      <div className={styles.item0_1}>Status：Normal</div>
+      <div className={styles.item0_1}>Registration Date：23-03-2020</div>
+      <div className={styles.item2}><BackButton/></div>
+      <div className={styles.clear0}></div>
+      
+      <div  className={styles.item1}>Company Name</div>
+      <div  className={styles.item1_1} >{CurDataFollowDetail.companyName}</div>
+      <div  className={styles.clear1}></div>
+    
+      <div  className={styles.item1}  >Full Name</div>
+      <div  className={styles.item1_1} >{CurDataFollowDetail.saferName}</div>
+      <div  className={styles.clear1} ></div>
+
+      <div  className={styles.item1}  >Contact Details</div>
+      <div className={styles.item1_1} >{CurDataFollowDetail.saferPhone}</div>
+      <div className={styles.item1} style={{ marginLeft: 32,width:40}} >Email</div>
+      <div  className={styles.item1_1} >{CurDataFollowDetail.saferEmail}</div>
+      <div  className={styles.clear1}></div>
+
+      <Line />
+      
+      <Button>Cancellation</Button>
+
+      
+    </div>
+  );
+};
+
+function mapStateToProps(state:any) {
+  const {CurDataFollowDetail } = state.ServiceProvider;  
+  return {
+    CurDataFollowDetail,
+  };
+}
+
+export default connect(mapStateToProps)(Guard);

src/pages/UserManagement/ServiceProviderManagement/Services.less

@@ -8,97 +8,34 @@
     min-width: 1020px;
 }
 
-//头部组件
-.box{
-    width: 100%;
-    height: 64px;
-    position: relative;
-}
-.item1{
-    position: absolute;
-    width: 400px;
-    text-align: center;
-    border-left: 5px solid rgba(24,144,255,1);
-    font-family:'Source Han Sans CN';
-    font-size: 18px;
-    font-weight: 600;
-    color: #000000;
-
-}
-.item3{
-    width:80px;
-    height: 32px;
-    position: absolute;
-    right: 0;
-
-    outline: none;
-    background:none;
-    cursor: pointer;
-
-    border:1px solid rgba(217,217,217,1);
-    border-radius:2px;
-}
-
-
-.box1{
-    width: 780px;
-    position: relative; 
-    margin-bottom: 28px;
-}
-.box1item1{
-    position: absolute;
-    line-height: 48px;
-}
-.box1item2{
-    padding-left: 167px;
-}
-.item2x0{
-    width: 120px;
-    height: 34px;
-    background-color: rgba(238,238,238,1);
-    border: 1px solid rgba(217,217,217,1);
+.item0{
     float: left;
-    text-align: center;
-    line-height: 34px;
-    margin: 10px;       
 }
-.item2x1{
-    width: 120px;
-    height: 34px;
-    border: 1px solid rgba(217,217,217,1);
+.item0_1{
     float: left;
-    text-align: center;
-    line-height: 34px;
-    margin: 10px;
-    cursor: pointer; 
+    line-height: 32px;
+    margin-left: 38px;
 }
-.item2x1:hover{
-    width: 120px;
-    height: 34px;
-    border: 1px solid rgba(24,144,255,1);
+.item1{
     float: left;
-    text-align: center;
-    line-height: 34px;
-    margin: 10px;
-    cursor: pointer; 
-}
-.item2x3{
     width: 120px;
-    height: 34px;
+}
+.item1_1{
     float: left;
-    text-align: center;
-    line-height: 34px;
-    margin: 10px;
+    margin-left: 16px;
 }
-
-
-// 线栏
-.line{
-    width: 100%;
-    height: 1px;
-    border-top: 1px solid rgba(217,217,217,1);
-    margin-top: 28px;
-    margin-bottom: 28px;
+.item2{
+    float: right;
 }
 
-
+.clear{
+    clear: both;
+}
+.clear0{
+    .clear();
+    margin-bottom: 35px;
+}
+.clear1{
+    .clear();
+    margin-bottom: 16px;
+}
\ No newline at end of file

src/pages/UserManagement/ServiceProviderManagement/Services.tsx

@@ -5,96 +5,30 @@ import { Input ,Button,Modal,Space,Pagination,Tooltip, Checkbox } from 'antd';
 import { Link, useIntl, connect, Dispatch } from 'umi';
 
 
-import {
-  PlusCircleOutlined,
-} from '@ant-design/icons';
+import {PlusCircleOutlined} from '@ant-design/icons';
 
+import Line from '../../../components/Line/Line';
+import BackButton from '../../../components/BackButton/BackButton';
+import TitleGet from '../../../components/TitleGet/TitleGet';
+import TagSelect from '../../../components/TagSelect/index';
 
 const Services = () => {
 
-  const goToReturn = () => {
-    history.back()
-  }
-  const [state, setState] = useState(false)
-  const [state2,setState2] = useState(false)
-  const [currentvalue, setCurrentvalue] = useState('')
-  
-  const [service,setServices]=useState(['Cleaning','Maintenance','Security Guard'])
-  const showModal = (value,e) => {
-    setState(true)
-    setCurrentvalue(value)
-  };
-
-  const handleOk = (e) => {
-    setState(false)
-    let serviceNew = service
-    Array.prototype.remove = function(val) {
-      var index = this.indexOf(val);      
-      if (index > -1) {
-        this.splice(index, 1);      
-      }      
-    };
-    serviceNew.remove(currentvalue)
-    setServices(serviceNew)
-  };
-
-  const handleCancel = (e) => {
-    setState(false)
-  };
-  
-  const addModal = (e) => {
-    setState2(true)
-  };
-
-  const handleOk2 =(e) => {
-    setState2(false);
-    let serviceNew = service
-    serviceNew.push(currentvalue)
-    setServices(serviceNew)
-  };
-
-  const handleCancel2 = (e) => {
-    setState2(false)
-  };
-  
-  const changeCurentvalue = (e) => {
-     setCurrentvalue(e.target.value)
-  }
   
   return (
     <div className={styles.base}>
 
-      {/* 头部组件 */}
-      <div className={styles.box}>
-        <div className={styles.item1}>Services Available Management</div>
-        <button className={styles.item3} onClick={goToReturn}>返回</button>
-      </div>
-    
-      <div className={styles.box1}>
-        <div className={styles.box1item1}>Services Available</div>
-        <div className={styles.box1item2}>
-          {    
-            service.map((item, index) => {                                
-            return (<div key={"service_"+index} className={styles.item2x1} onClick={showModal.bind(this,item)} >{item}</div>)
-            })
-          }     
-          <div className={styles.item2x3}><PlusCircleOutlined style={{cursor: "pointer",fontSize:30}}  onClick={addModal} /></div>
-        </div>
-      </div>
-      <div style={{ clear:"both"}}></div>
-      <div className={styles.line}></div>
-      <Button type="primary" size="large">提交</Button>
-
-      <div>            
-        <Modal  title="删除该选项" visible={state}  onOk={handleOk}  onCancel={handleCancel} cancelText="取消" okType="danger" okText="Yes">
-          <p>is delete service?</p>
-        </Modal>
-            
-        <Modal  title="新增该选项" visible={state2}  onOk={handleOk2}  onCancel={handleCancel2} cancelText="取消" okType="primary" okText="创建">
-          <Input style={{width:300}} onChange={changeCurentvalue} />
-        </Modal>
-      </div>
-
+      <div className={styles.item0}><TitleGet title={"Services Available Management"}/></div>
+      <div className={styles.item2}><BackButton/></div>
+      <div className={styles.clear0}></div>
+
+      <div  className={styles.item1}>Available Services</div>
+      <div  className={styles.item1_1} ><TagSelect /></div>
+      <div className={styles.clear1}></div>
+      
+      <Line />
+      
+      <Button type="primary" >Submit</Button>
     </div>
   );
 };

src/pages/UserManagement/ServiceProviderManagement/保安详情.txt

+CompanyName Sunshine Stab
+FullName
\ No newline at end of file

src/pages/runTest/Template.tsx

 import React, { useState, useEffect } from 'react';
 import styles from './index.less';
+import { Input ,Menu,Table,Space,Pagination,Tooltip, Button } from 'antd';
 
-import { Link, useIntl, connect } from 'umi';
+import { Link, useIntl, connect, Dispatch } from 'umi';
 
-import { Button, } from 'antd';
+import Line from '../../components/Line/Line';
+import BackButton from '../../components/BackButton/BackButton';
+import TitleGet from '../../components/TitleGet/TitleGet';
 
-const Bom = (props: any) => {
-  
-  const { dispatch, Data } = props;
-
-  const test = () => {
-    dispatch({
-      type: 'Bom/query',     
-    });  
-  }
+const Guard = () => {
 
   return (
-      <>
-        <Button onClick={test}>TEST</Button>
-
-
-      </>
+    <div className={styles.base}>
+
+
+      <div className={styles.item0}><TitleGet title={"Edit Security Guard Account"}/></div>
+      <div className={styles.item0_1}>Status：Normal</div>
+      <div className={styles.item0_1}>Registration Date：23-03-2020</div>
+      <div className={styles.item2}><BackButton/></div>
+      <div className={styles.clear0}></div>
+      
+      <div  className={styles.item1}>Company Name</div>
+      <div  className={styles.item1_1} >123</div>
+      <div  className={styles.clear1}></div>
+    
+      <div  className={styles.item1}  >Full Name</div>
+      <div  className={styles.item1_1} >123</div>
+      <div  className={styles.clear1} ></div>
+
+      <div  className={styles.item1}  >Contact Details</div>
+      <div className={styles.item1_1} >12312</div>
+      <div className={styles.item1} style={{ marginLeft: 32,width:40}} >Email</div>
+      <div  className={styles.item1_1} >123123213</div>
+      <div  className={styles.clear1}></div>
+
+      <Line />
+      
+      <Button>Cancellation</Button>
+
+      
+    </div>
   );
 };
 
-function mapStateToProps(state:any) {
-  const { Data } = state.Bom;  
-  return {
-    Data
-  };
-}
-
 
-export default connect(mapStateToProps)(Bom);
+export default Guard;

src/pages/runTest/index.less

@@ -9,269 +9,34 @@
 }
 
 //头部组件
-.box{
-    width: 100%;
-    height: 64px;
-    position: relative;
-}
-.item1{
-    position: absolute;
-    width: 180px;
-    text-align: center;
-    border-left: 5px solid rgba(24,144,255,1);
-    font-family:'Source Han Sans CN';
-    font-size: 18px;
-    font-weight: 600;
-    color: #000000;
-
-}
-.item3{
-    width:80px;
-    height: 32px;
-    position: absolute;
-    right: 0;
-
-    outline: none;
-    background:none;
-    cursor: pointer;
-
-    border:1px solid rgba(217,217,217,1);
-    border-radius:2px;
-}
-
-.box1{
-    width: 100%;
-    height: 34px;
-    position: relative;
-    margin-bottom: 28px;
-}
-.box1item1{
-    position: absolute;
-}
-.box1item2{
-    position: absolute;
-    left: 139px;
-}
-
-
-.box2{
-    width: 100%;
-    height: 34px;
-    position: relative;
-    margin-bottom: 28px;
-}
-.box2item1{
-    position: absolute;
-}
-.box2item2{
-    position: absolute;
-    left: 139px;
-}
-.box2item3{
-    position: absolute;
-    left: 407px;
-}
-.box2item4{
-    position: absolute;
-    left: 565px;
-}
-.box2item5{
-    position: absolute;
-    left: 713px;
-}
-.box2item6{
-    position: absolute;
-    left: 778px;
-}
-
-
-.box3{
-    position: relative;
-    margin-bottom: 28px;    
-}
-
-.box3item1{
-    position: absolute;
-}
-
-.box3item2{
-    padding-left: 160px;
-}
-.box3group1{
-    width: 266px;
-    height: 100px;     
-}
-
-.box4{
-    position: relative;
-}
-.box4item1{
-    position: absolute;
-}
-
-.box4item2{
-    padding-left: 160px;
-}
-
-.ulist{
-	float:left;
-    width:100%;
-	padding:0;
-	margin:0;
-    list-style-type:none;
-}
-.llist{
-    display:inline;
-}
-.alist{
-    float:left;
-    width: 160px;
-}
-.alist1{
-
-    position: relative;
-    width: 100px;
-    height: 100px;
-}
-.alist2{
+.item0{
     float: left;
-    width: 326px;    
-    margin-bottom: 20px;
-    z-index: 1;
-}
-
-.alist2box{
-    width: 100%;
-    height: 100%;
-    position: relative;  
-}
-.alist2boxitem1{
-    position: absolute;
-    top: -100px;
-    left: 127px;
-}
-.alist2boxitem2{
-    position: absolute;
-    top: -100px;
-    left: 180px;
-}
-.alist2boxitem3{
-    position: absolute;
-    top: -40px;
-    left: 216px;
-}
-.alist2boxNone{
-    color: #ffffff;
-    moz-user-select: -moz-none; 
-    -moz-user-select: none; 
-    -o-user-select:none; 
-    -khtml-user-select:none; 
-    -webkit-user-select:none; 
-    -ms-user-select:none; 
-    user-select:none;
 }
-
-.alist3{
-    z-index: 10;
-    cursor: pointer;
+.item0_1{
     float: left;
-    width: 100px;
-    height: 100px;
-    background-color: rgba(244,244,244,1);
-}
-
-// 线栏
-.line{
-    width: 100%;
-    height: 1px;
-    border-top: 1px solid rgba(217,217,217,1);
-    margin-top: 28px;
-    margin-bottom: 28px;
-}
-
-.box5{
-    position: relative;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 28px;
-}
-.box5item1{
-    position: absolute;
-}
-.box5item2{
-    position: absolute;
-    left: 186px;
+    line-height: 32px;
+    margin-left: 38px;
 }
-
-.box6{
-    position: relative;
-    line-height: 34px;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 32px;
-}
-.box6item1{
-    position: absolute;    
-}
-.box6item2{
-    position: absolute;
-    left: 186px;
-}
-.box6item3{
-    position: absolute;
-    left: 276px;
-}
-.box6item4{
-    position: absolute;
-    left: 478px;
-}
-.box6item5{
-    position: absolute;
-    left: 569px;
-}
-.box6item6{
-    position: absolute;
-    left: 794px;
-}
-.box6item7{
-    position: absolute;
-    left: 885px;
-}
-
-
-.box7{
-    position: relative;
-    width: 100%;
-    height: 34px;
-    margin-bottom: 28px;
+.item1{
+    float: left;
+    width: 120px;
 }
-.box7item1{
-    position: absolute;
-    left: 186px;
+.item1_1{
+    float: left;
+    margin-left: 16px;
 }
-.box7item2{
-    position: absolute;
-    left: 323px;
+.item2{
+    float: right;
 }
 
-.box8{
-    position: relative;
-    width: 100%;
-    height: 34px;
-}
-.box8item1{
-    position: absolute;
-}
-.box8item2{
-    position: absolute;
-    left: 346px;
+.clear{
+    clear: both;
 }
-.box8item3{
-    position: absolute;
-    left: 462px;
-    color: rgba(217,217,217,1);
+.clear0{
+    .clear();
+    margin-bottom: 35px;
 }
-.box8item4{
-    position: absolute;
-    left: 502px;
+.clear1{
+    .clear();
+    margin-bottom: 16px;
 }
\ No newline at end of file