结算单，汇总明细

src/api/workOrder/settleAccountsOrder.js

@@ -0,0 +1,28 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取列表
+export function listPageV2(data) {
+  return request({
+    url: `/settle/order/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+//导出
+export function pageExport(data, name) {
+  return postBlob({
+    url: '/settle/order/list/export',
+    data,
+    name
+  })
+}
+
+//汇总
+export function pool(data) {
+  return request({
+    url: '/settle/order/pool',
+	method: 'post',
+    data
+  })
+}

src/api/workOrder/summaryBill.js

@@ -0,0 +1,37 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取列表
+export function listPageV2(data) {
+  return request({
+    url: `/settle/order/pool/list?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+//导出
+export function pageExport(data, name) {
+  return postBlob({
+    url: '/settle/order/export/pool/detail/export',
+    data,
+    name
+  })
+}
+
+//驳回
+export function cancel(data) {
+  return request({
+    url: '/settle/order/batch/cancel',
+	method: 'post',
+    data
+  })
+}
+
+//发放
+export function confirm(data) {
+  return request({
+    url: '/settle/order/batch/confirm',
+	method: 'post',
+    data
+  })
+}

src/api/workOrder/summaryBillDetail.js

@@ -0,0 +1,28 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取列表
+export function listPageV2(params) {
+  return request({
+    url: `/settle/order/pool/detail/list`,
+    method: 'post',
+    params
+  })
+}
+
+//导出
+export function pageExport(data, name) {
+  return postBlob({
+    url: '/settle/order/export/pool/detail',
+    data,
+    name
+  })
+}
+
+//驳回
+export function cancel(data) {
+  return request({
+    url: '/settle/order/batch/item/cancel',
+	method: 'post',
+    data
+  })
+}

src/views/workOrder/settleAccountsManagement/settleAccountsOrder/index.vue

@@ -1,8 +1,203 @@
 <template>
+	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="80"
+	  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+	  :operation="operation" :exportList="exportList">
+	  <div slot="moreSearch">
+	    <el-radio-group v-model="poolStatus" size="mini" @change="changeType">
+	    	<el-radio-button label="">全部</el-radio-button>
+			<el-radio-button label="NO">未汇总</el-radio-button>
+			<el-radio-button label="YES">已汇总</el-radio-button>
+	    </el-radio-group>
+	    <br><br>
+	  </div>
+	  <el-dialog title="" width="600px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
+	    :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
+	    <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+	      <zj-form-module :title="formDialogTitles[formDialogType]" label-width="120px" :showPackUp="false"
+	        :form-data="formData" :form-items="formItems" :disabled="formDialogType==2">
+	      </zj-form-module>
+	    </zj-form-container>
+	    <div slot="footer" class="dialog-footer">
+			<el-button size="mini" @click="formCancel">取 消</el-button>
+			<el-button size="mini" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">提交</el-button>
+	    </div>
+	  </el-dialog>
+	</template-page>
 </template>
 
 <script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import ImageUpload from '@/components/file-upload'
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+import { listPageV2,pageExport, pool } from "@/api/workOrder/settleAccountsOrder";
+export default {
+  components: { TemplatePage, ImageUpload },
+  mixins: [import_mixin],
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+	  	[
+	  		[
+	  			{
+	  				name: '汇总',
+	  				click: this.poolData
+	  			}
+	  		],
+	  	],
+	  ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["汇总"],
+      formDialog: false,
+	  type: JSON.parse(localStorage.getItem('greemall_user')).type, //type=1商户, type=0网点
+      formData: {
+		companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+		month: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):('0'+(new Date().getMonth() + 1))),
+		createdTime: [],
+		starDate: '',
+		endDate: '',
+      },
+	  poolStatus: ''
+    }
+  },
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+		return [{
+			md: 24,
+			isShow: true,
+			name: 'el-input',
+			attributes: { placeholder: '请输入', disabled: true },
+			formItemAttributes: {
+			label: '所属商户',
+			prop: 'companyName',
+			rules: [...required]
+			},
+		}, {
+			md: 24,
+			isShow: true,
+			name: 'el-input',
+			attributes: { placeholder: '请输入', disabled: true },
+			formItemAttributes: {
+			label: '月份',
+			prop: 'month',
+			rules: [...required]
+			}
+		}, {
+			md: 24,
+			isShow: true,
+			name: 'slot-component',
+			attributes: { placeholder: '请选择',},
+			formItemAttributes: {
+			label: '创建结算单时间',
+			prop: 'createdTime',
+			rules: [...required]
+			},
+			render: (h, { props, onInput }) => {
+				var { value } = props
+				return (
+					<el-date-picker
+						v-model={this.formData.createdTime}
+						type="daterange"
+						range-separator="至"
+						value-format="yyyy-MM-dd"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						onChange={e=>{
+							this.formData.starDate = e[0]
+							this.formData.endDate = e[1]
+						}}>
+				    </el-date-picker>
+				)
+			}
+		}]
+    }
+  },
+  methods: {
+	// 切换状态
+	changeType(val) {
+	  this.$refs.pageRef.refreshList()
+	},
+	// 列表请求函数
+	getList(p,cb) {
+		try {
+			var pam = JSON.parse(JSON.stringify(p))
+			pam.params.push({'param': 'a.pool_status', "compare": "=", "value": this.poolStatus})
+			cb && cb(pam)
+			return listPageV2(pam)
+		} catch (error) {
+			console.log(error)
+		}
+	},
+    // 列表导出函数
+    exportList: pageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+		return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+      return (
+        <div class='operation-btns'>
+		  <el-button type="text" onClick={() => {
+		    
+		  }}>详情</el-button>
+        </div>
+      )
+    },
+    poolData() {
+		this.formDialogType = 0
+		this.openForm()
+    },
+    openForm() {
+      this.formDialog = true;
+    },
+    formCancel() {
+      this.$refs.formRef.$refs.inlineForm.clearValidate()
+      this.$data.formData = this.$options.data().formData
+      this.formDialog = false
+    },
+    formConfirm() {
+      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+        if (valid) {
+          pool({
+			  starDate: this.formData.starDate + ' 00:00:00',
+			  endDate: this.formData.endDate + ' 23:59:59',
+			  month: this.formData.month
+		  }).then(res => {
+            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
+            this.formCancel()
+            this.$refs.pageRef.refreshList()
+          })
+        }
+      })
+    }
+  }
+}
 </script>
 
-<style>
-</style>
+<style lang="scss" scoped>
+	.tab{
+		padding: 20px 20px 0 20px;
+	}
+</style>

src/views/workOrder/settleAccountsManagement/summaryBill/detailList.vue

@@ -0,0 +1,185 @@
+<template>
+	<div class="s-page">
+		<el-page-header @back="goBack" :content="title"></el-page-header>
+		<el-divider></el-divider>
+		<el-row style="margin-bottom: 10px;">
+			<el-col :span="24">
+				<el-button size="small" type="primary" @click="getList()">刷新</el-button>
+				<el-button size="small" type="primary" @click="derive()">导出</el-button>
+			</el-col>
+		</el-row>
+		<el-table :span-method="objectSpanMethod" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
+			<el-table-column prop="poolId" label="账单编号" align="center" width="180"></el-table-column>
+			<el-table-column prop="month" align="center" label="月份"></el-table-column>
+			<el-table-column prop="companyWechatName" align="center" label="所属商户" width="180"></el-table-column>
+			<el-table-column prop="websitName" align="center" label="网点名称" width="180"></el-table-column>
+			<el-table-column prop="workerName" align="center" label="工程师信息" width="110"></el-table-column>
+			<el-table-column prop="workerMobile" align="center" label="联系电话"></el-table-column>
+			<el-table-column prop="workerIdcard" align="center" label="身份证"></el-table-column>
+			<el-table-column prop="totalAmount" align="center" label="结算金额 (元)" width="110"></el-table-column>
+			<el-table-column prop="status" align="center" label="发放状态">
+				<template slot-scope="scope">
+					{{scope.row.status == 'NO'?'未发放':scope.row.status == 'YES'?'已发放':''}}
+				</template>
+			</el-table-column>
+			<el-table-column prop="poolCreateBy" align="center" label="汇总人" width="180"></el-table-column>
+			<el-table-column prop="poolCreateTime" align="center" label="汇总时间" width="160"></el-table-column>
+			<el-table-column prop="poolUpdateBy" align="center" label="发放人" width="180"></el-table-column>
+			<el-table-column prop="poolUpdateTime" align="center" label="发放时间" width="160"></el-table-column>
+			<el-table-column prop="orderBaseId" align="center" label="工单单号" width="220">
+				<template slot-scope="scope">
+					<div style="display: flex;text-align: left;" @click="copy(scope.row.orderBaseId)">
+						<el-button type="text">{{scope.row.orderBaseId}}</el-button>
+						<el-button type="text" style="margin-left: 10px;">复制</el-button>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column prop="customerName" align="center" label="客户名字"></el-table-column>
+			<el-table-column prop="customerMobile" align="center" label="客户电话" width="110"></el-table-column>
+			<el-table-column prop="customerAddress" align="center" label="详细地址" width="180"></el-table-column>
+			<el-table-column prop="orderStatus" align="center" label="工单状态"></el-table-column>
+			<el-table-column prop="orderCreateTime" align="center" label="创建时间" width="160"></el-table-column>
+			<el-table-column prop="workerEndTime" align="center" label="完工时间" width="160"></el-table-column>
+			<el-table-column prop="orderType" align="center" label="工单类型"></el-table-column>
+			<el-table-column prop="brand" align="center" label="产品品牌"></el-table-column>
+			<el-table-column prop="orderSource" align="center" label="工单来源"></el-table-column>
+			<el-table-column prop="parentCategoryName" align="center" label="产品大类"></el-table-column>
+			<el-table-column prop="categoryName" align="center" label="产品小类"></el-table-column>
+			<el-table-column prop="goodsName" align="center" label="机型名称"></el-table-column>
+			<el-table-column prop="orderNum" align="center" label="数量"></el-table-column>
+			<el-table-column prop="settleOrderType" align="center" label="结算单类型" width="110"></el-table-column>
+			<el-table-column prop="installLabel" align="center" label="安装功率"></el-table-column>
+			<el-table-column prop="installNormAmount" align="center" label="安装结算标准" width="110"></el-table-column>
+			<el-table-column prop="repairLabel" align="center" label="质保类型"></el-table-column>
+			<el-table-column prop="repairAmount" align="center" label="维修上门费" width="110"></el-table-column>
+			<el-table-column prop="repairRate" align="center" label="维修费用结算比例" width="140"></el-table-column>
+			<el-table-column prop="repairSettleAmount" align="center" label="维修费用"></el-table-column>
+			<el-table-column prop="otherType" align="center" label="其他费用类型" width="110"></el-table-column>
+			<el-table-column prop="otherLabel" align="center" label="其他费用规格" width="110"></el-table-column>
+			<el-table-column prop="otherPrice" align="center" label="其他费用单价" width="110"></el-table-column>
+			<!-- <el-table-column prop="" align="center" label="其他费用结算数量" width="140"></el-table-column> -->
+			<el-table-column prop="examineProject" align="center" label="奖罚单考核项目" width="120"></el-table-column>
+			<el-table-column prop="examineType" align="center" label="奖罚单考核类型" width="120"></el-table-column>
+			<el-table-column prop="settleNum" align="center" label="结算数量"></el-table-column>
+			<el-table-column prop="settleAmount" align="center" label="结算金额"></el-table-column>
+			<el-table-column prop="remark" align="center" label="备注"></el-table-column>
+			<el-table-column label="操作" align="center" width="80" fixed="right">
+				<template slot-scope="scope">
+					<el-button type="text" style="color: #FF0000" @click="cancel(scope.row.id)">驳回</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+	import { listPageV2,pageExport, cancel } from "@/api/workOrder/summaryBillDetail";
+	export default {
+		props: ['id','title'],
+		data() {
+			return {
+				dataList: [],
+				cellList: [], // 单元格数组
+				count: null, // 计数
+			};
+		},
+		computed: {},
+		created() {
+			if(this.id){
+				this.getList()
+			}
+		},
+		methods: {
+			// 返回
+			goBack() {
+				this.$emit('back');
+			},
+			getList(){
+				listPageV2({id: this.id}).then(res => {
+					this.dataList = res.data
+					this.computeCell(res.data)
+				})
+			},
+			cancel(id){
+				this.$confirm(`请确定是否驳回该数据, 是否继续?`, '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					cancel([id]).then(res => {
+						if(res.code == 200){
+							this.$message.success('审核成功！')
+							this.goBack()
+						}
+					})
+				});
+			},
+			copy(row) {
+			    var oInput = document.createElement('input');
+			    oInput.value = row;
+			    document.body.appendChild(oInput);
+			    oInput.select();
+			    document.execCommand("Copy");
+			    oInput.className = 'oInput';
+			    oInput.style.display = 'none';
+				this.$message({
+					type: 'success',
+					message: '复制成功!'
+				});
+			},
+			computeCell(tableBody) {
+				// 循环遍历表体数据
+				for (let i = 0; i < tableBody.length; i++) {
+					if (i == 0) {
+					// 先设置第一项
+					this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
+					this.count = 0; // 初始计数为0
+					console.log("索引", 0, this.count);
+					} else {
+					// 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
+					if (tableBody[i].workerName == tableBody[i - 1].workerName) {
+						// 如果相等
+						this.cellList[this.count] += 1; // 增加计数
+						this.cellList.push(0); // 相等就往cellList数组中追加0
+						console.log("索引", i, this.count);
+					} else {
+						this.cellList.push(1); // 不等就往cellList数组中追加1
+						this.count = i; // 将索引赋值为计数
+						console.log("索引", i, this.count);
+					}
+					}
+				}
+			},
+			// 第2步，将计算好的结果返回给el-table，这样的话表格就会根据这个结果做对应合并列渲染
+			objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+				// 给第二列做单元格合并。0是第一列，1是第二列。
+				if (columnIndex < 13) {
+					console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
+					const rowCell = this.cellList[rowIndex];
+					if (rowCell > 0) {
+					const colCell = 1;
+					console.log(`动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `);
+					return {
+						rowspan: rowCell,
+						colspan: colCell,
+					};
+					} else {
+					// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
+					// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
+					return {
+						rowspan: 0,
+						colspan: 0,
+					};
+					}
+				}
+			},
+		}
+	};
+</script>
+
+<style scoped="scoped" lang="scss">
+	.s-page {
+		padding: 20px;
+		background-color: #ffffff;
+	}
+</style>

src/views/workOrder/settleAccountsManagement/summaryBill/index.vue

@@ -1,8 +1,231 @@
 <template>
+	<div class="page">
+		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="120"
+		  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+		  :operation="operation">
+		  <!--  :exportList="exportList" -->
+		  <div slot="moreSearch">
+		    <el-radio-group v-model="status" size="mini" @change="changeType">
+		    	<el-radio-button label="">全部</el-radio-button>
+				<el-radio-button label="NO">待发放</el-radio-button>
+				<el-radio-button label="YES">已发放</el-radio-button>
+				<el-radio-button label="NOT">驳回</el-radio-button>
+		    </el-radio-group>
+		    <br><br>
+		  </div>
+		</template-page>
+		<div class="detail" v-if="formDialog">
+			<detailList :id="id" @back="backList" :title="'汇总账单明细-'+id"></detailList>
+		</div>
+	</div>
 </template>
 
 <script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import import_mixin from '@/components/template/import_mixin.js'
+import ImageUpload from '@/components/file-upload'
+import detailList from './detailList.vue'
+import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
+import { listPageV2,pageExport, cancel, confirm } from "@/api/workOrder/summaryBill";
+export default {
+  components: { TemplatePage, ImageUpload, detailList },
+  mixins: [import_mixin],
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+	  	[
+	  		[
+	  			{
+	  				name: '驳回',
+	  				click: this.cancelMore
+	  			}
+	  		],
+	  	],
+		[
+			[
+				{
+					name: '发放',
+					click: this.confirmMore
+				}
+			]
+		]
+	  ],
+      // 表格属性
+      tableAttributes: {
+        // 启用勾选列
+        selectColumn: false
+      },
+      // 表格事件
+      tableEvents: {
+        'selection-change': this.selectionChange
+      },
+      // 勾选选中行
+      recordSelected: [],
+      /** 表单变量 */
+      formDialogType: 0,
+      formDialogTitles: ["汇总"],
+      formDialog: false,
+	  type: JSON.parse(localStorage.getItem('greemall_user')).type, //type=1商户, type=0网点
+      formData: {
+		companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+		month: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):('0'+(new Date().getMonth() + 1))),
+		createdTime: [],
+		starDate: '',
+		endDate: '',
+      },
+	  status: '',
+	  id: ''
+    }
+  },
+  computed: {
+    // 更多参数
+    moreParameters() {
+      return []
+    },
+    formItems() {
+		return [{
+			md: 24,
+			isShow: true,
+			name: 'el-input',
+			attributes: { placeholder: '请输入', disabled: true },
+			formItemAttributes: {
+			label: '所属商户',
+			prop: 'companyName',
+			rules: [...required]
+			},
+		}, {
+			md: 24,
+			isShow: true,
+			name: 'el-input',
+			attributes: { placeholder: '请输入', disabled: true },
+			formItemAttributes: {
+			label: '月份',
+			prop: 'month',
+			rules: [...required]
+			}
+		}, {
+			md: 24,
+			isShow: true,
+			name: 'slot-component',
+			attributes: { placeholder: '请选择',},
+			formItemAttributes: {
+			label: '创建结算单时间',
+			prop: 'createdTime',
+			rules: [...required]
+			},
+			render: (h, { props, onInput }) => {
+				var { value } = props
+				return (
+					<el-date-picker
+						v-model={this.formData.createdTime}
+						type="daterange"
+						range-separator="至"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						onChange={e=>{
+							this.formData.starDate = e[0]
+							this.formData.endDate = e[1]
+						}}>
+				    </el-date-picker>
+				)
+			}
+		}]
+    }
+  },
+  methods: {
+	// 切换状态
+	changeType(val) {
+	  this.$refs.pageRef.refreshList()
+	},
+	backList() {
+		this.id = ''
+		this.formDialog = false;
+		this.$refs.pageRef.refreshList()
+	},
+    // 列表请求函数
+    getList(p,cb) {
+		try {
+			var pam = JSON.parse(JSON.stringify(p))
+			pam.params.push({'param': 'a.status', "compare": "=", "value": this.status})
+			cb && cb(pam)
+			return listPageV2(pam)
+		} catch (error) {
+			console.log(error)
+		}
+    },
+    // 列表导出函数
+    exportList: pageExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+		return defaultData
+    },
+    // 监听勾选变化
+    selectionChange(data) {
+      this.recordSelected = data
+    },
+    // 表格操作列
+    operation(h, { row, index, column }) {
+		return (
+			<div class='operation-btns'>
+				<el-button type="text" onClick={() => {
+					this.id = row.id
+					this.formDialog = true
+				}}>明细</el-button>
+				{row.status == 'NO'?<el-button type="text" onClick={() => {
+					this.confirm(row.id)
+				}}>发放</el-button>:null}
+				{row.status == 'NO'?<el-button type="text" onClick={() => {
+					this.cancel(row.id)
+				}}>驳回</el-button>:null}
+			</div>
+		)
+    },
+	cancelMore(){
+		if(this.recordSelected.length == 0){
+			return this.$message.warning('请至少勾选一条数据！');
+		}
+		this.cancel(this.recordSelected.map(item=>{return item.id}).join(','))
+	},
+    cancel(ids) {
+		this.$confirm('请确认是否驳回选中的数据, 是否继续?', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		}).then(() => {
+			cancel([ids]).then(res => {
+				this.$message({ type: 'success', message: `驳回成功!` })
+				this.$refs.pageRef.refreshList()
+			})
+		});
+    },
+	confirmMore(){
+		if(this.recordSelected.length == 0){
+			return this.$message.warning('请至少勾选一条数据！');
+		}
+		this.confirm(this.recordSelected.map(item=>{return item.id}).join(','))
+	},
+	confirm(ids){
+		this.$confirm('请确认是否发放选中的数据, 是否继续?', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		}).then(() => {
+			confirm([ids]).then(res => {
+				this.$message({ type: 'success', message: `发放成功!` })
+				this.$refs.pageRef.refreshList()
+			})
+		});
+	}
+  }
+}
 </script>
 
-<style>
-</style>
+<style lang="scss" scoped>
+	.tab{
+		padding: 20px 20px 0 20px;
+	}
+	.page{
+		height: 100%;
+	}
+</style>