fix: mobile style

sendya · sendya · commit 1415b75d0475 · 2018-09-24T15:05:23.000+08:00
diff --git a/src/components/layout/LayoutMain.vue b/src/components/layout/LayoutMain.vue
@@ -12,6 +12,7 @@
       <sider-menu
         mode="inline"
         :menus="menus"
+        @menuSelect="menuSelect"
         :theme="theme"
         :collapsed="false"
         :collapsible="true"></sider-menu>
@@ -78,6 +79,13 @@
       toggle() {
         this.collapsed = !this.collapsed;
       },
+      menuSelect() {
+
+        if (this.device !== 'desktop') {
+          console.log('selected')
+          this.collapsed = false
+        }
+      }
     }
   }
 </script>
@@ -94,6 +102,14 @@
     overflow-x: hidden;
 
     &.mobile {
+
+      .ant-layout-content {
+
+        .content {
+          margin: 24px 0 0;
+        }
+      }
+
       .ant-table-wrapper {
         .ant-table-body {
           overflow-y: auto;
diff --git a/src/components/layout/PageHeader.vue b/src/components/layout/PageHeader.vue
@@ -23,7 +23,7 @@
           <div v-if="avatar" class="avatar">
             <a-avatar :src="avatar"/>
           </div>
-          <div v-if="this.$slots.content" class="content">
+          <div v-if="this.$slots.content" class="headerContent">
             <slot name="content"></slot>
           </div>
           <div v-if="this.$slots.extra" class="extra">
diff --git a/src/components/tools/HeadInfo.vue b/src/components/tools/HeadInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="head-info">
+  <div class="head-info" :class="center && 'center'">
     <span>{{ title }}</span>
     <p>{{ content }}</p>
     <em v-if="bordered"/>
@@ -21,6 +21,10 @@
       bordered: {
         type: Boolean,
         default: false
+      },
+      center: {
+        type: Boolean,
+        default: true
       }
     }
   }
@@ -29,10 +33,15 @@
 <style lang="scss" scoped>
   .head-info {
     position: relative;
-    text-align: center;
-    padding: 0 32px;
+    text-align: left;
+    padding: 0 32px 0 0;
     min-width: 125px;
 
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
     span {
       color: rgba(0, 0, 0, .45);
       display: inline-block;
diff --git a/src/views/dashboard/Workplace.vue b/src/views/dashboard/Workplace.vue
@@ -7,13 +7,13 @@
     <div slot="extra">
       <a-row class="more-info">
         <a-col :span="8">
-          <head-info title="项目数" content="56" :bordered="true"/>
+          <head-info title="项目数" content="56" :center="false" :bordered="false"/>
         </a-col>
         <a-col :span="8">
-          <head-info title="团队排名" content="8/24" :bordered="true"/>
+          <head-info title="团队排名" content="8/24" :center="false" :bordered="false"/>
         </a-col>
         <a-col :span="8">
-          <head-info title="项目访问" content="2,223"/>
+          <head-info title="项目访问" content="2,223" :center="false" />
         </a-col>
       </a-row>
     </div>
@@ -30,7 +30,7 @@
             :body-style="{ padding: 0 }">
             <a slot="extra">全部项目</a>
             <div>
-              <a-card-grid :key="i" v-for="(item, i) in projects">
+              <a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects">
                 <a-card :bordered="false" :body-style="{ padding: 0 }">
                   <a-card-meta>
                     <div slot="title" class="card-title">
@@ -329,13 +329,20 @@
 
   .mobile {
 
+    .project-list {
+
+      .project-card-grid {
+        width: 100%;
+      }
+    }
+
     .more-info {
-      border-top: 1px solid #e8e8e8;
+      border: 0;
       padding-top: 16px;
       margin: 16px 0 16px;
     }
 
-    .content .title .welcome-text {
+    .headerContent .title .welcome-text {
       display: none;
     }
   }
diff --git a/src/views/form/BasicForm.vue b/src/views/form/BasicForm.vue
@@ -3,69 +3,69 @@
     <a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
       <a-form-item
         label="标题"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         fieldDecoratorId="name"
         :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入标题' }]}"
       >
         <a-input name="name" placeholder="给目标起个名字" />
       </a-form-item>
       <a-form-item
         label="起止日期"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         fieldDecoratorId="buildTime"
         :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择起止日期' }]}"
       >
         <a-range-picker name="buildTime" style="width: 100%" />
       </a-form-item>
       <a-form-item
         label="目标描述"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         fieldDecoratorId="description"
         :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入目标描述' }]}"
       >
         <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
       </a-form-item>
       <a-form-item
         label="衡量标准"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         fieldDecoratorId="type"
         :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入衡量标准' }]}"
       >
         <a-textarea rows="4" placeholder="请输入衡量标准"/>
       </a-form-item>
       <a-form-item
         label="客户"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
       >
         <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
       </a-form-item>
       <a-form-item
         label="邀评人"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
       >
         <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
       </a-form-item>
       <a-form-item
         label="权重"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
       >
         <a-input-number :min="0" :max="100"/>
         <span> %</span>
       </a-form-item>
       <a-form-item
         label="目标公开"
-        :labelCol="{span: 7}"
-        :wrapperCol="{span: 10}"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
         :required="false"
         help="客户、邀评人默认被分享"
       >
@@ -82,7 +82,10 @@
           </a-select>
         </a-form-item>
       </a-form-item>
-      <a-form-item :wrapperCol="{span: 10, offset: 7}">
+      <a-form-item
+        :wrapperCol="{ span: 24 }"
+        style="text-align: center"
+      >
         <a-button htmlType="submit" type="primary">提交</a-button>
         <a-button style="margin-left: 8px">保存</a-button>
       </a-form-item>
