mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
chore: update layout component's style to solve the problem of style dislocation at mobile device; 🐶
This commit is contained in:
iczer
parent
db25716d9d
commit
6208acc477
@ -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 @@ export default {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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])]
|
||||
)
|
||||
}
|
||||
|
||||
@ -15,8 +15,10 @@ export default {
|
||||
<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;
|
||||
|
||||
@ -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 @@ export default {
|
||||
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
|
||||
|
||||
@ -224,7 +224,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.head-info{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 @@ const tabList = [
|
||||
|
||||
export default {
|
||||
name: 'AdvancedDetail',
|
||||
components: {HeadInfo, AStepItemGroup, AStepItem, DetailListItem, DetailList, PageLayout},
|
||||
data () {
|
||||
return {
|
||||
tabList,
|
||||
@ -156,35 +154,16 @@ export default {
|
||||
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>
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user