From 90ea2b3fffd56e7a865c2fe113fd4404934d3eaf Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Wed, 27 Oct 2021 16:11:59 +0800
Subject: [PATCH] ss

---
 epmet-oper-web/src/views/main.vue             |    9 +-
 .../src/views/modules/base/grid.vue           | 1047 +++++++++++++++++
 2 files changed, 1055 insertions(+), 1 deletion(-)
 create mode 100644 epmet-oper-web/src/views/modules/base/grid.vue

diff --git a/epmet-oper-web/src/views/main.vue b/epmet-oper-web/src/views/main.vue
index d4d13fa..8462cd6 100644
--- a/epmet-oper-web/src/views/main.vue
+++ b/epmet-oper-web/src/views/main.vue
@@ -6,7 +6,9 @@
       'aui-wrapper',
       { 'aui-sidebar--fold': $store.state.sidebarFold },
       {
-        'aui-sidebar--noside': $store.state.sidebarActiveSubMenuList.length == 0
+        'aui-sidebar--noside':
+          userType == 'work' &&
+          $store.state.sidebarActiveSubMenuList.length == 0
       }
     ]"
   >
@@ -56,6 +58,11 @@ export default {
     MainContent,
     MainThemeTools
   },
+  computed: {
+    userType() {
+      return localStorage.getItem('userType')
+    }
+  },
   watch: {
     $route: 'routeHandle'
   },
diff --git a/epmet-oper-web/src/views/modules/base/grid.vue b/epmet-oper-web/src/views/modules/base/grid.vue
new file mode 100644
index 0000000..511ff02
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/base/grid.vue
@@ -0,0 +1,1047 @@
+<template>
+  <div>
+    <div class="resi-container">
+      <el-card class="resi-card">
+        <el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
+          <el-row
+            v-for="(item, index) in sliceList(formList, 4)"
+            :key="index"
+            class="resi-row"
+            :gutter="20"
+          >
+            <el-col v-for="n in item" :key="n.id" :span="6">
+              <div class="resi-cell">
+                <div class="resi-cell-label">{{ n.label }}</div>
+                <div
+                  class="resi-cell-value"
+                  :class="n.item_type === 'radio' && 'resi-cell-value-radio'"
+                >
+                  <el-input
+                    v-if="n.item_type === 'input'"
+                    v-model="form[n.column_name]"
+                    class="resi-cell-input"
+                    size="small"
+                    clearable
+                    placeholder="请输入内容"
+                  >
+                  </el-input>
+                  <el-date-picker
+                    v-else-if="n.item_type === 'date'"
+                    v-model="form[n.column_name]"
+                    class="resi-cell-input"
+                    type="date"
+                    size="small"
+                    clearable
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                  <el-select
+                    v-else-if="n.item_type === 'select'"
+                    v-model="form[n.column_name]"
+                    placeholder="请选择"
+                    size="small"
+                    clearable
+                    class="resi-cell-select"
+                  >
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                  <template v-else-if="n.item_type === 'radio'">
+                    <el-radio v-model="form[n.column_name]" label="1"
+                      >备选项</el-radio
+                    >
+                    <el-radio v-model="form[n.column_name]" label="2"
+                      >备选项</el-radio
+                    >
+                  </template>
+                  <template v-else-if="n.item_type === 'checkbox'">
+                    <el-checkbox-group v-model="form[n.column_name]">
+                      <el-checkbox label="复选框 A"></el-checkbox>
+                      <el-checkbox label="复选框 B"></el-checkbox>
+                    </el-checkbox-group>
+                  </template>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-row>
+        <el-row class="resi-search">
+          <el-col :span="24">
+            <el-button type="primary" size="mini" @click="handleSearch"
+              >查询</el-button
+            >
+          </el-col>
+        </el-row>
+        <div class="resi-down" @click="handleOpenSearch">
+          <img v-if="openSearch" src="../../assets/img/arrow-up.png" />
+          <img v-else src="../../assets/img/arrow-down.png" />
+        </div>
+      </el-card>
+    </div>
+
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <el-button type="warning" size="small">导出</el-button>
+        <el-button type="success" size="small" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button type="primary" size="small">下载人口模板</el-button>
+        <el-button type="danger" size="small">导入人口数据</el-button>
+      </div>
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="date" label="日期" width="180">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="180">
+        </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="sizes, prev, pager, next"
+          :total="1000"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :close-on-click-modal="true"
+      :before-close="handleClose"
+    >
+      <resi-form ref="baseForm" :form-list="formList" />
+      <div class="resi-other">
+        <div class="resi-other-title">其他</div>
+        <div class="tabs-other-info">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="item in tabsList"
+              :key="item.column_name"
+              :label="item.label"
+              :name="item.column_name"
+            >
+              <resi-form
+                :ref="item.column_name"
+                :form-id="item.column_name"
+                :form-list="tabsForm"
+              />
+            </el-tab-pane>
+            <!-- <el-tab-pane label="配置管理" name="second">
+              <resi-form :form-id="'second'" :form-list="tabsForm" />
+            </el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">
+              <resi-form :form-id="'third'" :form-list="tabsForm" />
+            </el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
+          </el-tabs>
+        </div>
+      </div>
+      <div class="resi-btns">
+        <el-button size="small">取消</el-button>
+        <el-button type="primary" size="small" @click="handleSUbmit"
+          >提交</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import resiSearch from '../../components/resiSearch.vue'
+import resiForm from '../../components/resiForm.vue'
+export default {
+  components: {
+    resiSearch,
+    resiForm
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      openSearch: false,
+      currentPage: 1,
+      activeName: 'edu',
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      searchList: [
+        {
+          label: '所属网格',
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          require: true,
+          valid_type: null,
+          column_name: 'grid'
+        },
+        {
+          label: '小区名称',
+          require: true,
+          item_type: 'select',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'shequ'
+        },
+        {
+          label: '户籍查询',
+          require: true,
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'huji'
+        },
+        {
+          label: '本地户籍',
+          item_type: 'select',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'huji1'
+        },
+        {
+          label: '姓名',
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          require: true,
+          column_name: 'username'
+        },
+        {
+          label: '手机号',
+          item_type: 'input',
+          valid_type: 'mobile',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'userMobile'
+        },
+        {
+          label: '身份证',
+          item_type: 'input',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          valid_type: 'id_card',
+          column_name: 'idcard'
+        },
+        {
+          label: '出生日期',
+          item_type: 'date',
+          valid_type: null,
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'birthday'
+        },
+        {
+          label: '联系人',
+          valid_type: null,
+          item_type: 'checkbox',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'contact'
+        },
+        {
+          label: '联系人手机',
+          item_type: 'radio',
+          valid_type: null,
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'contactMobile'
+        }
+      ],
+      value: '',
+      formList: [
+        {
+          label: '所属网格',
+          item_type: 'select',
+          option_source_type: '',
+          sort: '1',
+          require: true,
+          valid_type: null,
+          column_name: 'grid'
+        },
+        {
+          label: '所属楼宇',
+          require: true,
+          item_type: 'select',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'shequ'
+        },
+        {
+          label: '所属家庭',
+          require: true,
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'house'
+        },
+        {
+          label: '本地户籍',
+          item_type: 'select',
+          require: true,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          valid_type: null,
+          column_name: 'huji'
+        },
+        {
+          label: '姓名',
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          require: true,
+          column_name: 'username'
+        },
+        {
+          label: '性别',
+          item_type: 'select',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '男',
+              value: 1
+            },
+            {
+              label: '女',
+              value: 2
+            }
+          ],
+          sort: '1',
+          column_name: 'sex'
+        },
+        {
+          label: '手机号',
+          item_type: 'input',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          valid_type: 'mobile',
+          column_name: 'userMobile'
+        },
+        {
+          label: '身份证',
+          item_type: 'input',
+          valid_type: 'id_card',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'idcard'
+        },
+        {
+          label: '出生日期',
+          valid_type: null,
+          item_type: 'date',
+          require: false,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'birthday'
+        },
+        {
+          label: '联系人',
+          item_type: 'input',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'contactUser'
+        },
+        {
+          label: '联系人手机',
+          item_type: 'input',
+          valid_type: null,
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'contactMobile'
+        },
+        {
+          label: '九小场所',
+          item_type: 'select',
+          valid_type: null,
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'jiuxiao'
+        },
+        {
+          label: '备注',
+          item_type: 'textarea',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          sort: '1',
+          column_name: 'remarks'
+        },
+        {
+          label: '党员：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'party'
+        },
+        {
+          label: '低保：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'dibao'
+        },
+        {
+          label: '保障房：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'baozf'
+        },
+        {
+          label: '失业：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'shiye'
+        },
+        {
+          label: '育龄妇女：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'yulingfunv'
+        },
+        {
+          label: '退役军人：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'tuiyijunren'
+        },
+        {
+          label: '统战人员：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'tzrenyuan'
+        },
+        {
+          label: '信访人员：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'xfreny'
+        },
+        {
+          label: '志愿者：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'zhiyuanzhe'
+        },
+        {
+          label: '高龄：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'gaoling'
+        },
+        {
+          label: '空巢：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'kongc'
+        },
+        {
+          label: '失独：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'shidu'
+        },
+        {
+          label: '失能：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'shineng'
+        },
+        {
+          label: '失智：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'shizhi'
+        },
+        {
+          label: '残疾：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'canji'
+        },
+        {
+          label: '大病：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'dabing'
+        },
+        {
+          label: '慢病：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'manbing'
+        },
+        {
+          label: '特殊：',
+          item_type: 'radio',
+          valid_type: null,
+          require: false,
+          option_source_type: '',
+          option_source_value: [
+            {
+              label: '是',
+              value: 1
+            },
+            {
+              label: '否',
+              value: 0
+            }
+          ],
+          sort: '1',
+          column_name: 'teshu'
+        }
+      ],
+      tabsForm: [
+        {
+          label: '所属网格',
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          require: true,
+          valid_type: null,
+          column_name: 'grid'
+        },
+        {
+          label: '小区名称',
+          require: true,
+          item_type: 'select',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'shequ'
+        },
+        {
+          label: '户籍查询',
+          require: true,
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'huji'
+        },
+        {
+          label: '本地户籍',
+          item_type: 'select',
+          require: true,
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          column_name: 'huji1'
+        },
+        {
+          label: '姓名',
+          item_type: 'input',
+          option_source_type: '',
+          sort: '1',
+          valid_type: null,
+          require: true,
+          column_name: 'username'
+        }
+      ],
+      tabsList: [
+        {
+          label: '教育',
+          column_name: 'edu',
+          children: []
+        },
+        {
+          label: '兴趣爱好',
+          column_name: 'xingqu',
+          children: []
+        },
+        {
+          label: '宗教信仰',
+          column_name: 'zongjiao',
+          children: []
+        },
+        {
+          label: '健康信息',
+          column_name: 'jiank',
+          children: []
+        },
+        {
+          label: '工作信息',
+          column_name: 'job',
+          children: []
+        },
+        {
+          label: '经济状况',
+          column_name: 'jingji',
+          children: []
+        },
+        {
+          label: '家庭信息',
+          column_name: 'family',
+          children: []
+        },
+        {
+          label: '居住需求',
+          column_name: 'juzhu',
+          children: []
+        },
+        {
+          label: '教育发发发',
+          column_name: 'edu1',
+          children: []
+        },
+        {
+          label: '教育滚滚滚',
+          column_name: 'edu2',
+          children: []
+        },
+        {
+          label: '教育哈哈哈',
+          column_name: 'edu3',
+          children: []
+        },
+        {
+          label: '教育急急急',
+          column_name: 'edu4',
+          children: []
+        },
+        {
+          label: '教育快快快',
+          column_name: 'edu5',
+          children: []
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSearch(val) {
+      console.log('searchhh--', val)
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    handleAdd() {
+      this.dialogVisible = true
+    },
+    handleSUbmit() {
+      console.log('baseform', this.$refs)
+
+      this.tabsList.forEach((item) => {
+        console.log('otherFOrm', this.$refs[item.column_name][0].form)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.tabs-other-info {
+  .el-tabs__item {
+    // width: 50px;
+    height: 20px;
+    box-sizing: border-box;
+    margin-right: 7px;
+    padding: 0 10px !important;
+    font-size: 8px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 20px;
+    background: #ebecf1;
+    border-radius: 2px;
+  }
+  .el-tabs__nav-wrap::after,
+  .el-tabs__active-bar {
+    display: none;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 20px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.resi-card-table {
+  margin-top: 20px;
+}
+.resi-row-btn {
+  margin-bottom: 13px;
+}
+.resi-other {
+  width: 100%;
+  display: flex;
+  .resi-other-title {
+    width: 100px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    // padding: 6px 12px 0 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+  .tabs-other-info {
+    // padding-left: 60px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>
+
+<style lang="scss" scoped>
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+.resi-down {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-left: -23rpx;
+  cursor: pointer;
+  background: #ffffff;
+  border-radius: 0 0 10px 10px;
+  img {
+    display: block;
+  }
+}
+.resi-row-box {
+  height: 104px;
+  overflow: hidden;
+  transition: height 0.5s;
+}
+.resi-row-more {
+  height: max-content;
+  transition: height 0.5s;
+}
+.resi-row {
+  margin-bottom: 20px;
+}
+.resi-search {
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-cell {
+  display: flex;
+  align-items: center;
+  .resi-cell-label {
+    width: 70px;
+    box-sizing: border-box;
+    margin-right: 15px;
+    text-align: right;
+    // line-height: 32;
+  }
+  .resi-cell-value-radio {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  .resi-cell-input {
+    width: 180px;
+  }
+  .resi-cell-select {
+    width: 180px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    &-middle {
+      width: 130px;
+    }
+    &-small {
+      width: 88px;
+    }
+  }
+  .resi-cell-select:last-child {
+    margin-right: 0;
+  }
+}
+</style>