| src/components/page/PageHeader.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/tool/AStepItem.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/tool/HeadInfo.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/layouts/PageView.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/dashboard/workplace/WorkPlace.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/detail/AdvancedDetail.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/pages/list/StandardList.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/page/PageHeader.vue
@@ -10,15 +10,16 @@ </a-breadcrumb> </div> <div class="detail"> <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div> <div class="main"> <div class="row"> <img v-if="logo" :src="logo" class="logo" /> <h1 v-if="title" class="title">{{title}}</h1> <div class="action"><slot name="action"></slot></div> </div> <div class="row"> <div v-if="this.$slots.content" class="content"><slot name="content"></slot></div> <div v-if="this.$slots.content" class="content"> <div v-if="avatar" class="avatar"><a-avatar :src="avatar" :size="72" /></div> <slot name="content"></slot> </div> <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div> </div> </div> @@ -82,45 +83,25 @@ display: flex; .row { display: flex; flex-wrap: wrap; justify-content: space-between; } .avatar { flex: 0 1 72px; margin:0 24px 8px 0; & > span { border-radius: 72px; display: block; width: 72px; height: 72px; } margin:0 24px 0 0; } .main{ width: 100%; .title{ flex: auto; font-size: 20px; font-weight: 500; color: rgba(0,0,0,.85); margin-bottom: 16px; } .logo{ width: 28px; height: 28px; border-radius: 4px; margin-right: 16px; } .content{ flex: 1; display: flex; flex-wrap: wrap; } .extra{ display: flex; margin-left: 88px; min-width: 420px; } .action{ margin-left: 56px; min-width: 266px; flex: 0 1 auto; text-align: right; } } } src/components/tool/AStepItem.vue
@@ -12,10 +12,19 @@ <script> const Group = { name: 'AStepItemGroup', props: { align: { type: String, default: 'center', validator(value) { return ['left', 'center', 'right'].indexOf(value) != -1 } } }, render (h) { return h( 'div', {attrs: {style: 'text-align: center; margin-top: 8px'}}, {attrs: {style: `text-align: ${this.align}; margin-top: 8px`}}, [h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])] ) } src/components/tool/HeadInfo.vue
@@ -15,8 +15,10 @@ <style lang="less" scoped> .head-info{ text-align: center; padding: 0 32px; width: 100%; padding: 0 24px; flex-grow: 1; flex-shrink: 0; align-self: center; span{ color: rgba(0,0,0,.45); display: inline-block; src/layouts/PageView.vue
@@ -1,6 +1,6 @@ <template> <page-layout :desc="desc" :title="title" :linkList="linkList"> <div slot="extra" class="extraImg"> <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg"> <img :src="extraImage"/> </div> <page-toggle-transition :animate="animate.name" :direction="animate.direction"> @@ -33,7 +33,7 @@ let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name' return this.$t(key) }, ...mapState('setting', ['multiPage', 'animate', 'routesI18n']) ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n']) }, created() { let i18n = this.routesI18n src/pages/dashboard/workplace/WorkPlace.vue
@@ -224,7 +224,4 @@ } } } .head-info{ display: inline-block; } </style> src/pages/detail/AdvancedDetail.vue
@@ -1,6 +1,6 @@ <template> <page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"> <detail-list size="small" :col="2" slot="headerContent" style="margin-left: 44px;"> <detail-list size="small" :col="2" slot="headerContent"> <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> @@ -8,16 +8,10 @@ <detail-list-item term="生效日期">2018-08-07 ~ 2018-12-11</detail-list-item> <detail-list-item term="备注">请于两个工作日内确认</detail-list-item> </detail-list> <a-row style="text-align: right;width: 100%;" slot="extra"> <a-col :xs="24" :sm="12"> <div class="text">状态</div> <div class="heading">待审批</div> </a-col> <a-col :xs="24" :sm="12"> <div class="text">订单金额</div> <div class="heading">¥ 568.08</div> </a-col> </a-row> <template slot="extra"> <head-info title="状态" content="待审批" /> <head-info title="订单金额" content="¥ 568.08" /> </template> <template slot="action"> <a-button-group style="margin-right: 8px;"> <a-button>操作</a-button> @@ -27,15 +21,15 @@ <a-button type="primary" >主操作</a-button> </template> <a-card :bordered="false" title="流程进度"> <a-steps :current="1" progressDot> <a-steps :current="1" progress-dot :direction="isMobile ? 'vertical' : 'horizontal'"> <a-step title="创建项目"> <a-step-item-group slot="description"> <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description"> <a-step-item link="/dashboard/workplace" title="曲丽丽" icon="dingding-o"/> <a-step-item title="2016-12-12 12:32"/> </a-step-item-group> </a-step> <a-step title="部门初审"> <a-step-item-group slot="description"> <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description"> <a-step-item link="/form/step" title="周毛毛" icon="dingding-o" /> <a-step-item link="/result/success" title="催一下" icon="bell"/> </a-step-item-group> @@ -89,7 +83,7 @@ </a-card> </a-card> <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录"> <div class="nodata"><a-icon type="frown-o"/>暂无数据</div> <a-list></a-list> </a-card> <a-card style="margin-top: 24px" @@ -121,10 +115,13 @@ </template> <script> import PageLayout from '../../layouts/PageLayout' import DetailList from '../../components/tool/DetailList' import AStepItem from '../../components/tool/AStepItem' import {operation1, operation2, operation3, operationColumns} from '../../mock/common/tableData' import PageLayout from '@/layouts/PageLayout' import DetailList from '@/components/tool/DetailList' import AStepItem from '@/components/tool/AStepItem' import {operation1, operation2, operation3, operationColumns} from '@/mock/common/tableData' import {mapState} from 'vuex' import HeadInfo from '@/components/tool/HeadInfo'; const DetailListItem = DetailList.Item const AStepItemGroup = AStepItem.Group @@ -146,6 +143,7 @@ export default { name: 'AdvancedDetail', components: {HeadInfo, AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout}, data () { return { tabList, @@ -156,35 +154,16 @@ activeTabKey: '2' } }, computed: { ...mapState('setting', ['isMobile']) }, methods: { onTabChange (key) { console.log(key) } }, components: {AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout} } </script> <style lang="less" scoped> .text{ color: rgba(0,0,0,.45); } .heading{ color: rgba(0,0,0,.85); font-size: 28px; } .nodata{ color: rgba(0,0,0,.25); text-align: center; line-height: 64px; font-size: 16px; & :global{ i { font-size: 24px; margin-right: 16px; position: relative; top: 3px; } } } </style> src/pages/list/StandardList.vue
@@ -1,17 +1,11 @@ <template> <div> <a-card :bordered="false"> <a-row> <a-col :sm="8" :xs="24" class="split-right"> <div style="display: flex; flex-wrap: wrap"> <head-info title="我的待办" content="8个任务" :bordered="true"/> </a-col> <a-col :sm="8" :xs="24" class="split-right"> <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/> </a-col> <a-col :sm="8" :xs="24" class="split-right"> <head-info title="本周完成任务数" content="24个"/> </a-col> </a-row> </div> </a-card> <a-card style="margin-top: 24px"
