fix: mobile style comp

e8e2426a · Sendya · a47f35ec · e8e2426a · e8e2426a · e8e2426a
Commit e8e2426a authored Nov 30, 2018 by Sendya
7 changed files
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -172,6 +172,14 @@
        }
      }
+      .topmenu {
+        /* 必须为 topmenu  才能启用流式布局 */
+        &.content-width-Fluid {
+          .header-index-wide {
+            margin-left: 0;
+          }
+        }
+      }
    }
    &.ant-layout-has-sider {

--- a/src/components/page/PageHeader.vue
+++ b/src/components/page/PageHeader.vue
@@ -222,6 +222,16 @@
          min-width: 0;
          text-align: right;
        }
+        .action {
+          margin-left: unset;
+          min-width: 266px;
+          flex: 0 1 auto;
+          text-align: left;
+          margin-bottom: 12px;
+          &:empty {
+            display: none;
+          }
+        }
      }
    }
  }

--- a/src/components/tools/HeaderNotice.vue
+++ b/src/components/tools/HeaderNotice.vue
 <template>
-  <a-popover trigger="click" placement="bottomRight" :autoAdjustOverflow="false" overlayClassName="header-notice-wrapper" :overlayStyle="{ width: '300px', top: '50px' }">
+  <a-popover
+    trigger="click"
+    placement="bottomRight"
+    :autoAdjustOverflow="true"
+    :arrowPointAtCenter="true"
+    overlayClassName="header-notice-wrapper"
+    :overlayStyle="{ width: '300px', top: '50px' }">
    <template slot="content">
      <a-spin :spinning="loadding">
        <a-tabs>

--- a/src/views/account/settings/AvatarModal.vue
+++ b/src/views/account/settings/AvatarModal.vue
 <template>
  <a-modal :visible="visible" title="修改头像" :maskClosable="false" :confirmLoading="confirmLoading" :width="800">
    <a-row>
-      <a-col :span="12" :style="{height: '350px'}">
+      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
@@ -14,7 +14,7 @@
        >
        </vue-cropper>
      </a-col>
-      <a-col :span="12" :style="{height: '350px'}">
+      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>

--- a/src/views/profile/advanced/Advanced.vue
+++ b/src/views/profile/advanced/Advanced.vue
 <template>
  <page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
-    <detail-list slot="headerContent" size="small" :col="2" style="margin-left: 44px;">
+    <detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
      <detail-list-item term="创建人">曲丽丽</detail-list-item>
      <detail-list-item term="订购产品">XX服务</detail-list-item>
      <detail-list-item term="创建时间">2018-08-07</detail-list-item>
      <detail-list-item term="关联单据"><a>12421</a></detail-list-item>
      <detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item>
      <detail-list-item term="备注">请于两个工作日内确认</detail-list-item>
    </detail-list>
-    <a-row slot="extra">
+    <a-row slot="extra" class="status-list">
-      <a-col :xs="24" :sm="12">
+      <a-col :xs="12" :sm="12">
        <div class="text">状态</div>
        <div class="heading">待审批</div>
      </a-col>
-      <a-col :xs="24" :sm="12">
+      <a-col :xs="12" :sm="12">
        <div class="text">订单金额</div>
        <div class="heading">¥ 568.08</div>
      </a-col>
    </a-row>
    <!-- actions -->
    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-button>操作</a-button>
        <a-button>操作</a-button>
        <a-button><a-icon type="ellipsis"/></a-button>
      </a-button-group>
      <a-button type="primary" >主操作</a-button>
    </template>
    <a-card :bordered="false" title="流程进度">
      <a-steps :direction="device==='mobile' && 'vertical' || 'horizontal'" :current="1" progressDot>
        <a-step title="创建项目">
        </a-step>
        <a-step title="部门初审">
        </a-step>
        <a-step title="财务复核">
        </a-step>
        <a-step title="完成">
        </a-step>
      </a-steps>
    </a-card>
    <a-card style="margin-top: 24px" :bordered="false" title="用户信息">
      <detail-list>
        <detail-list-item term="用户姓名">付晓晓</detail-list-item>
        <detail-list-item term="会员卡号">32943898021309809423</detail-list-item>
        <detail-list-item term="身份证">3321944288191034921</detail-list-item>
        <detail-list-item term="联系方式">18112345678</detail-list-item>
        <detail-list-item term="联系地址">浙江省杭州市西湖区黄姑山路工专路交叉路口</detail-list-item>
      </detail-list>
      <detail-list title="信息组">
        <detail-list-item term="某某数据">725</detail-list-item>
        <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
        <detail-list-item >&nbsp;</detail-list-item>
        <detail-list-item term="某某数据">725</detail-list-item>
        <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
        <detail-list-item >&nbsp;</detail-list-item>
      </detail-list>
      <a-card type="inner" title="多层信息组">
        <detail-list title="组名称" size="small">
          <detail-list-item term="负责人">林东东</detail-list-item>
          <detail-list-item term="角色码">1234567</detail-list-item>
          <detail-list-item term="所属部门">XX公司-YY部</detail-list-item>
          <detail-list-item term="过期时间">2018-08-08</detail-list-item>
          <detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>
        </detail-list>
        <a-divider style="margin: 16px 0" />
        <detail-list title="组名称" size="small" :col="1">
          <detail-list-item term="学名">	Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..</detail-list-item>
        </detail-list>
        <a-divider style="margin: 16px 0" />
        <detail-list title="组名称" size="small" :col="2">
          <detail-list-item term="负责人">付小小</detail-list-item>
          <detail-list-item term="角色码">1234567</detail-list-item>
        </detail-list>
      </a-card>
    </a-card>
    <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">
      <div class="no-data"><a-icon type="frown-o"/>暂无数据</div>
    </a-card>
    <!-- 操作 -->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => {this.activeTabKey = key}"
    >
      <a-table
        v-if="activeTabKey === '1'"
        :columns="operationColumns"
        :dataSource="operation1"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="operationColumns"
        :dataSource="operation2"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="operationColumns"
        :dataSource="operation3"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
    </a-card>
  </page-layout>
 </template>
 <script>
  import { mapState } from 'vuex'
  import PageLayout from '@/components/page/PageLayout'
  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item
  export default {
    name: "Advanced",
    components: {
      PageLayout,
      DetailList,
      DetailListItem
    },
    data () {
      return {
        tabList: [
          {
            key: '1',
            tab: '操作日志一'
          },
          {
            key: '2',
            tab: '操作日志二'
          },
          {
            key: '3',
            tab: '操作日志三'
          }
        ],
        activeTabKey: '1',
        operationColumns: [
          {
            title: '操作类型',
            dataIndex: 'type',
            key: 'type'
          },
          {
            title: '操作人',
            dataIndex: 'name',
            key: 'name'
          },
          {
            title: '执行结果',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '操作时间',
            dataIndex: 'updatedAt',
            key: 'updatedAt'
          },
          {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark'
          }
        ],
        operation1: [
          {
            key: 'op1',
            type: '订购关系生效',
            name: '曲丽丽',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op4',
            type: '提交订单',
            name: '林东东',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '很棒'
          },
          {
            key: 'op5',
            type: '创建订单',
            name: '汗牙牙',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          }
        ],
        operation2: [
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          },
          {
            key: 'op4',
            type: '提交订单',
            name: '林东东',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '很棒'
          }
        ],
        operation3: [
          {
            key: 'op2',
            type: '财务复审',
            name: '付小小',
            status: 'reject',
            updatedAt: '2017-10-03  19:23:12',
            remark: '不通过原因'
          },
          {
            key: 'op3',
            type: '部门初审',
            name: '周毛毛',
            status: 'agree',
            updatedAt: '2017-10-03  19:23:12',
            remark: '-'
          }
        ],
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          'agree': '成功',
          'reject': '驳回'
        }
        return statusMap[status]
      },
      statusTypeFilter(type) {
        const statusTypeMap = {
          'agree': 'success',
          'reject': 'error'
        }
        return statusTypeMap[type]
      }
    },
    computed: {
      ...mapState({
        device: state => state.app.device,
      })
    },
  }
 </script>
 <style lang="scss" scoped>
-  .text {
-    color: rgba(0, 0, 0, .45);
+  .detail-layout {
-  }
+    margin-left: 44px;
+  }
-  .heading {
+  .text {
-    color: rgba(0, 0, 0, .85);
+    color: rgba(0, 0, 0, .45);
-    font-size: 20px;
+  }
-  }
+  .heading {
-  .no-data {
+    color: rgba(0, 0, 0, .85);
-    color: rgba(0, 0, 0, .25);
+    font-size: 20px;
-    text-align: center;
+  }
-    line-height: 64px;
-    font-size: 16px;
+  .no-data {
+    color: rgba(0, 0, 0, .25);
-    i {
+    text-align: center;
-      font-size: 24px;
+    line-height: 64px;
-      margin-right: 16px;
+    font-size: 16px;
-      position: relative;
-      top: 3px;
+    i {
-    }
+      font-size: 24px;
-  }
+      margin-right: 16px;
+      position: relative;
+      top: 3px;
+    }
+  }
+  .mobile {
+    .detail-layout {
+      margin-left: unset;
+    }
+    .text {
+    }
+    .status-list {
+      text-align: left;
+    }
+  }
 </style>
\ No newline at end of file
--- a/src/views/result/Result.vue
+++ b/src/views/result/Result.vue
@@ -80,4 +80,12 @@
      margin-top: 32px;
    }
  }
+  .mobile {
+    .result {
+      width: 100%;
+      margin: 0 auto;
+      padding: unset;
+    }
+  }
 </style>
\ No newline at end of file
--- a/src/views/result/Success.vue
+++ b/src/views/result/Success.vue
@@ -22,7 +22,7 @@
            2016-12-12 ~ 2017-12-12
          </a-col>
        </a-row>
-        <a-steps :current="1" progressDot>
+        <a-steps :current="1" :direction="device === 'mobile' && directionType.vertical || directionType.horizontal" progressDot>
          <a-step >
            <span style="font-size: 14px" slot="title">创建项目</span>
            <template slot="description">
@@ -61,6 +61,12 @@
 <script>
  import Result from './Result'
+  import { mapState } from 'vuex'
+  const directionType = {
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+  }
  export default {
    name: "Success",
@@ -73,8 +79,14 @@
        description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
          ' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
          ' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
-          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
+          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
+        directionType
      }
+    },
+    computed: {
+      ...mapState({
+        device: state => state.app.device,
+      })
    }
  }
 </script>