update 房屋基本信息挪动到页签上面
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.yo-tab-external-mount {
|
||||
.yo-tab-external-mount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -17,41 +17,44 @@
|
||||
|
||||
background-color: @white;
|
||||
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
.ant-btn();
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
&.ant-tabs-card-bar {
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
transition: none;
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
.ant-btn();
|
||||
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -100,7 +103,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
+.yo-tab-external-mount {
|
||||
~.yo-tab-external-mount {
|
||||
>.yo-tab-external-mount-content {
|
||||
>.yo-tab-external-tabpane {
|
||||
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
|
||||
@@ -145,4 +148,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
@@ -14,37 +14,6 @@
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<a-icon slot="indicator" spin type="loading" />
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="区县（市）">
|
||||
<span>测试区</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="街道（乡镇）">
|
||||
<span>测试街道</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="社区">
|
||||
<span>欧阳社区</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="片区">
|
||||
<span>片区一22（明湖片区）</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="编号">
|
||||
<span>宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="编码">
|
||||
<span>330266066001012001</span>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
|
||||
<a-input placeholder="请输入项目名称" v-model="form.projectName" />
|
||||
|
||||
@@ -1,63 +1,65 @@
|
||||
<template>
|
||||
<div class="yo-form-page">
|
||||
<!-- 底部工具栏(需放在前面) -->
|
||||
<div class="yo-form-page--bar yo-form-page--bar--with-tab">
|
||||
<container>
|
||||
<div class="yo-form-page--bar-inner">
|
||||
<span>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
<a-button @click="onSubmit" type="primary">保存</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
<div class="yo-form-page-layout">
|
||||
<!-- 底部工具栏(需放在前面) -->
|
||||
<div class="yo-form-page--bar yo-form-page--bar--with-tab">
|
||||
<container>
|
||||
<div class="yo-form-page--bar-inner">
|
||||
<span>
|
||||
<!-- 可以在工具栏中增加其他控件(只能在一行内) -->
|
||||
<!-- ... -->
|
||||
</span>
|
||||
<span>
|
||||
<a-button @click="closeContentWindow()">取消</a-button>
|
||||
<a-button @click="onSubmit" type="primary">保存</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<!--
|
||||
<div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
|
||||
<container>
|
||||
<a-descriptions :column="4" title>
|
||||
<a-descriptions-item label="区县（市）">测试区</a-descriptions-item>
|
||||
<a-descriptions-item label="街道（乡镇）">测试街道</a-descriptions-item>
|
||||
<a-descriptions-item label="社区">欧阳社区</a-descriptions-item>
|
||||
<a-descriptions-item label="片区">片区一22（明湖片区）</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="编号">宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</a-descriptions-item>
|
||||
<a-descriptions-item :span="2" label="编码">330266066001012001</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</container>
|
||||
</div>
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<!--
|
||||
挂载了一个content到tab后面
|
||||
如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
|
||||
现在只使用其tab卡片,重写了一个tab内容
|
||||
-->
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onTabChange" type="card">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
|
||||
</template>
|
||||
<a-popover placement="bottomRight" slot="tabBarExtraContent">
|
||||
<template slot="content">
|
||||
<p>Content</p>
|
||||
<p>Content</p>
|
||||
-->
|
||||
<div class="yo-tab-external-mount">
|
||||
<a-tabs @change="onTabChange">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
|
||||
</template>
|
||||
<template slot="title">
|
||||
<span>Title</span>
|
||||
</a-tabs>
|
||||
<div class="yo-tab-external-mount-content">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<div
|
||||
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
|
||||
:key="index"
|
||||
class="yo-tab-external-tabpane"
|
||||
v-if="tab.show"
|
||||
>
|
||||
<component
|
||||
:frame="self"
|
||||
:is="tab.component"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="tab.component"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<a-button class="block">
|
||||
房屋基本情况
|
||||
<a-icon type="down" />
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</a-tabs>
|
||||
<div class="yo-tab-external-mount-content">
|
||||
<template v-for="(tab, index) in tabs">
|
||||
<div
|
||||
:class="tab.active ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive'"
|
||||
:key="index"
|
||||
class="yo-tab-external-tabpane"
|
||||
v-if="tab.show"
|
||||
>
|
||||
<component
|
||||
:frame="self"
|
||||
:is="tab.component"
|
||||
:param="param"
|
||||
ref="forms"
|
||||
v-if="tab.component"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user