ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 房屋基本信息挪动到页签上面

Browse Source
This commit is contained in:
自带大佬气场
2021-05-19 15:24:17 +08:00
parent 0f8d6191e5
commit acf9deebcd
3 changed files with 104 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Web/src/assets/style/lib/form-page.less
View File

@@ -5,7 +5,7 @@
height: 100%; height: 100%;
>.yo-tab-external-mount { .yo-tab-external-mount {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -17,41 +17,44 @@
background-color: @white; background-color: @white;
.ant-tabs-nav-container { &.ant-tabs-card-bar {
height: @tabs-card-height + @padding-xs; .ant-tabs-nav-container {
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md; 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-tab { .ant-tabs-extra-content {
line-height: @btn-height-base; padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
}
margin-right: -1px; .ant-tabs-tab {
} transition: none;
.ant-tabs-tab-active { .ant-btn();
z-index: 2;
color: @btn-primary-color; &:hover {
border-color: @btn-primary-bg; border-color: @btn-default-border;
background-color: @btn-primary-bg; }
}
.ant-tabs-tab {
line-height: @btn-height-base;
margin-right: -1px;
}
.ant-tabs-tab-active {
z-index: 2;
&:hover {
color: @btn-primary-color; color: @btn-primary-color;
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `); border-color: @btn-primary-bg;
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `); 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%; width: 100%;
} }
+.yo-tab-external-mount { ~.yo-tab-external-mount {
>.yo-tab-external-mount-content { >.yo-tab-external-mount-content {
>.yo-tab-external-tabpane { >.yo-tab-external-tabpane {
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2; 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;
}
} }

31
Web/src/pages/business/house/houseInfo/form/base/building.vue
View File

@@ -14,37 +14,6 @@
> >
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<a-icon slot="indicator" spin type="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-col :span="12">
<a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName"> <a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
<a-input placeholder="请输入项目名称" v-model="form.projectName" /> <a-input placeholder="请输入项目名称" v-model="form.projectName" />

106
Web/src/pages/business/house/houseInfo/form/index.vue
View File

@@ -1,63 +1,65 @@
<template> <template>
<div class="yo-form-page"> <div class="yo-form-page">
<!-- 底部工具栏(需放在前面) --> <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 yo-form-page--bar--with-tab">
<div class="yo-form-page--bar-inner"> <container>
<span> <div class="yo-form-page--bar-inner">
<!-- 可以在工具栏中增加其他控件(只能在一行内) --> <span>
<!-- ... --> <!-- 可以在工具栏中增加其他控件(只能在一行内) -->
</span> <!-- ... -->
<span> </span>
<a-button @click="closeContentWindow()">取消</a-button> <span>
<a-button @click="onSubmit" type="primary">保存</a-button> <a-button @click="closeContentWindow()">取消</a-button>
</span> <a-button @click="onSubmit" type="primary">保存</a-button>
</div> </span>
</container> </div>
</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后面 挂载了一个content到tab后面
如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿 如果直接使用antd-vue的tab,将会莫名其妙地做各种多余的渲染,导致卡顿
现在只使用其tab卡片,重写了一个tab内容 现在只使用其tab卡片,重写了一个tab内容
--> -->
<div class="yo-tab-external-mount"> <div class="yo-tab-external-mount">
<a-tabs @change="onTabChange" type="card"> <a-tabs @change="onTabChange">
<template v-for="(tab, index) in tabs"> <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> <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>
</template> </template>
<template slot="title"> </a-tabs>
<span>Title</span> <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> </template>
<a-button class="block"> </div>
房屋基本情况
<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>
</div> </div>