|  | @@ -0,0 +1,330 @@
 | 
											
												
													
														|  | 
 |  | +<template>
 | 
											
												
													
														|  | 
 |  | +  <div>
 | 
											
												
													
														|  | 
 |  | +    <BasicTable @register="registerTable">
 | 
											
												
													
														|  | 
 |  | +      <template #action="{ record }">
 | 
											
												
													
														|  | 
 |  | +        <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
 | 
											
												
													
														|  | 
 |  | +      </template>
 | 
											
												
													
														|  | 
 |  | +      <template #bodyCell="{ column, record }">
 | 
											
												
													
														|  | 
 |  | +        <slot name="filterCell" v-bind="{ column, record }"></slot>
 | 
											
												
													
														|  | 
 |  | +      </template>
 | 
											
												
													
														|  | 
 |  | +    </BasicTable>
 | 
											
												
													
														|  | 
 |  | +    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
 | 
											
												
													
														|  | 
 |  | +  </div>
 | 
											
												
													
														|  | 
 |  | +</template>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +<script lang="ts" name="system-user" setup>
 | 
											
												
													
														|  | 
 |  | +  //ts语法
 | 
											
												
													
														|  | 
 |  | +  import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
 | 
											
												
													
														|  | 
 |  | +  import { BasicTable, TableAction } from '/@/components/Table';
 | 
											
												
													
														|  | 
 |  | +  import { useModal } from '/@/components/Modal';
 | 
											
												
													
														|  | 
 |  | +  import DeviceModal from '../deviceManager/comment/DeviceModal.vue';
 | 
											
												
													
														|  | 
 |  | +  // import { getToken } from '/@/utils/auth';
 | 
											
												
													
														|  | 
 |  | +  // import { useGlobSetting } from '/@/hooks/setting';
 | 
											
												
													
														|  | 
 |  | +  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 | 
											
												
													
														|  | 
 |  | +  import { useListPage } from '/@/hooks/system/useListPage';
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const props = defineProps({
 | 
											
												
													
														|  | 
 |  | +    columnsType: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +      // required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    columns: {
 | 
											
												
													
														|  | 
 |  | +      type: Array,
 | 
											
												
													
														|  | 
 |  | +      // required: true,
 | 
											
												
													
														|  | 
 |  | +      default: () => [],
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    // searchFormSchema: {
 | 
											
												
													
														|  | 
 |  | +    //   type: Array,
 | 
											
												
													
														|  | 
 |  | +    //   required: true,
 | 
											
												
													
														|  | 
 |  | +    //   default: () => [],
 | 
											
												
													
														|  | 
 |  | +    // },
 | 
											
												
													
														|  | 
 |  | +    formSchema: {
 | 
											
												
													
														|  | 
 |  | +      type: Array,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    list: {
 | 
											
												
													
														|  | 
 |  | +      type: Function,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    getImportUrl: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    getExportUrl: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    deleteById: {
 | 
											
												
													
														|  | 
 |  | +      type: Function,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    batchDelete: {
 | 
											
												
													
														|  | 
 |  | +      type: Function,
 | 
											
												
													
														|  | 
 |  | +      // required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    saveOrUpdate: {
 | 
											
												
													
														|  | 
 |  | +      type: Function,
 | 
											
												
													
														|  | 
 |  | +      required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    pointList: {
 | 
											
												
													
														|  | 
 |  | +      type: Function,
 | 
											
												
													
														|  | 
 |  | +      // required: true,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    showTab: {
 | 
											
												
													
														|  | 
 |  | +      type: Boolean,
 | 
											
												
													
														|  | 
 |  | +      default: false,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    designScope: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    title: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    deviceType: {
 | 
											
												
													
														|  | 
 |  | +      type: String,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +  });
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const isUpdate = ref(false);
 | 
											
												
													
														|  | 
 |  | +  const record = reactive({});
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  provide('formSchema', props.formSchema);
 | 
											
												
													
														|  | 
 |  | +  provide('isUpdate', isUpdate);
 | 
											
												
													
														|  | 
 |  | +  provide('formData', record);
 | 
											
												
													
														|  | 
 |  | +  provide('deviceType', props.deviceType);
 | 
											
												
													
														|  | 
 |  | +  // const glob = useGlobSetting();
 | 
											
												
													
														|  | 
 |  | +  const [registerModal, { openModal, closeModal }] = useModal();
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const columnList = getTableHeaderColumns(props.columnsType);
 | 
											
												
													
														|  | 
 |  | +  console.log('aaa', columnList);
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  // 列表页面公共参数、方法
 | 
											
												
													
														|  | 
 |  | +  const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
 | 
											
												
													
														|  | 
 |  | +    designScope: props.designScope,
 | 
											
												
													
														|  | 
 |  | +    tableProps: {
 | 
											
												
													
														|  | 
 |  | +      title: props.title,
 | 
											
												
													
														|  | 
 |  | +      api: props.list,
 | 
											
												
													
														|  | 
 |  | +      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
 | 
											
												
													
														|  | 
 |  | +      showIndexColumn: true,
 | 
											
												
													
														|  | 
 |  | +      // size: 'small',
 | 
											
												
													
														|  | 
 |  | +      // bordered: false,
 | 
											
												
													
														|  | 
 |  | +      formConfig: {
 | 
											
												
													
														|  | 
 |  | +        showActionButtonGroup: false,
 | 
											
												
													
														|  | 
 |  | +        // labelWidth: 100,
 | 
											
												
													
														|  | 
 |  | +        labelAlign: 'left',
 | 
											
												
													
														|  | 
 |  | +        labelCol: {
 | 
											
												
													
														|  | 
 |  | +          xs: 24,
 | 
											
												
													
														|  | 
 |  | +          sm: 24,
 | 
											
												
													
														|  | 
 |  | +          md: 24,
 | 
											
												
													
														|  | 
 |  | +          lg: 9,
 | 
											
												
													
														|  | 
 |  | +          xl: 7,
 | 
											
												
													
														|  | 
 |  | +          xxl: 5,
 | 
											
												
													
														|  | 
 |  | +        },
 | 
											
												
													
														|  | 
 |  | +        // schemas: props.searchFormSchema as any[],
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      striped: true,
 | 
											
												
													
														|  | 
 |  | +      actionColumn: {
 | 
											
												
													
														|  | 
 |  | +        width: 270,
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      beforeFetch: (params) => {
 | 
											
												
													
														|  | 
 |  | +        return Object.assign({ column: 'createTime', order: 'desc' }, params);
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    exportConfig: {
 | 
											
												
													
														|  | 
 |  | +      name: props.title,
 | 
											
												
													
														|  | 
 |  | +      url: props.getExportUrl,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    importConfig: {
 | 
											
												
													
														|  | 
 |  | +      url: props.getImportUrl,
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +  });
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  //注册table数据
 | 
											
												
													
														|  | 
 |  | +  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const saveOrUpdateHandler = async (params) => {
 | 
											
												
													
														|  | 
 |  | +    try {
 | 
											
												
													
														|  | 
 |  | +      await props.saveOrUpdate(params, isUpdate.value);
 | 
											
												
													
														|  | 
 |  | +      !props.showTab ? closeModal() : '';
 | 
											
												
													
														|  | 
 |  | +      await doRequest(props.list, { confirm: false });
 | 
											
												
													
														|  | 
 |  | +    } catch (error) {
 | 
											
												
													
														|  | 
 |  | +      message.error('保存失败,请联系管理员');
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 新增事件
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  function handleAdd() {
 | 
											
												
													
														|  | 
 |  | +    for (let key in record) {
 | 
											
												
													
														|  | 
 |  | +      delete record[key];
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +    isUpdate.value = false;
 | 
											
												
													
														|  | 
 |  | +    openModal(true);
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 编辑事件
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  function handleEdit(data) {
 | 
											
												
													
														|  | 
 |  | +    isUpdate.value = true;
 | 
											
												
													
														|  | 
 |  | +    Object.assign(record, toRaw(data));
 | 
											
												
													
														|  | 
 |  | +    openModal(true, {
 | 
											
												
													
														|  | 
 |  | +      record,
 | 
											
												
													
														|  | 
 |  | +    });
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 删除事件
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  async function handleDelete(record) {
 | 
											
												
													
														|  | 
 |  | +    await props.deleteById({ id: record }, reload);
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 批量删除事件
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  async function batchHandleDelete() {
 | 
											
												
													
														|  | 
 |  | +    doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 查看
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  // function handleDetail(record) {
 | 
											
												
													
														|  | 
 |  | +  //   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
 | 
											
												
													
														|  | 
 |  | +  //   openDetail(true);
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 操作列定义
 | 
											
												
													
														|  | 
 |  | +   * @param record
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  function getActions(record) {
 | 
											
												
													
														|  | 
 |  | +    return [
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        label: '编辑',
 | 
											
												
													
														|  | 
 |  | +        onClick: handleEdit.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        label: '详情',
 | 
											
												
													
														|  | 
 |  | +        onClick: handleEdit.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        label: '下载',
 | 
											
												
													
														|  | 
 |  | +        onClick: handleEdit.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        label: '审批流',
 | 
											
												
													
														|  | 
 |  | +        onClick: handleEdit.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      {
 | 
											
												
													
														|  | 
 |  | +        label: '删除',
 | 
											
												
													
														|  | 
 |  | +        popConfirm: {
 | 
											
												
													
														|  | 
 |  | +          title: '是否确认删除',
 | 
											
												
													
														|  | 
 |  | +          confirm: handleDelete.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +        },
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      // {
 | 
											
												
													
														|  | 
 |  | +      //   label: '查看',
 | 
											
												
													
														|  | 
 |  | +      //   onClick: handleDetail.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      // },
 | 
											
												
													
														|  | 
 |  | +    ];
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  /**
 | 
											
												
													
														|  | 
 |  | +   * 下拉操作栏
 | 
											
												
													
														|  | 
 |  | +   */
 | 
											
												
													
														|  | 
 |  | +  function getDropDownAction(record) {
 | 
											
												
													
														|  | 
 |  | +    return [
 | 
											
												
													
														|  | 
 |  | +      // {
 | 
											
												
													
														|  | 
 |  | +      //   label: '删除',
 | 
											
												
													
														|  | 
 |  | +      //   popConfirm: {
 | 
											
												
													
														|  | 
 |  | +      //     title: '是否确认删除',
 | 
											
												
													
														|  | 
 |  | +      //     confirm: handleDelete.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      //   },
 | 
											
												
													
														|  | 
 |  | +      // },
 | 
											
												
													
														|  | 
 |  | +      // {
 | 
											
												
													
														|  | 
 |  | +      //   label: '查看',
 | 
											
												
													
														|  | 
 |  | +      //   onClick: handleDetail.bind(null, record),
 | 
											
												
													
														|  | 
 |  | +      // },
 | 
											
												
													
														|  | 
 |  | +    ];
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  defineExpose({
 | 
											
												
													
														|  | 
 |  | +    doRequest,
 | 
											
												
													
														|  | 
 |  | +  });
 | 
											
												
													
														|  | 
 |  | +</script>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +<style scoped lang="less">
 | 
											
												
													
														|  | 
 |  | +  @ventSpace: zxm;
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  @vent-table-no-hover: #00bfff10;
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-header){
 | 
											
												
													
														|  | 
 |  | +  //   background-color:transparent;
 | 
											
												
													
														|  | 
 |  | +  //   height: 0;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.jeecg-basic-table .ant-table-wrapper){
 | 
											
												
													
														|  | 
 |  | +  //   background-color: #ffffff00;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-body) {
 | 
											
												
													
														|  | 
 |  | +  //   height: auto !important;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table){
 | 
											
												
													
														|  | 
 |  | +  //   background-color: #ffffff00 !important;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-thead > tr > th){
 | 
											
												
													
														|  | 
 |  | +  //   background-color:transparent
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-body > tr > th){
 | 
											
												
													
														|  | 
 |  | +  //   background-color:transparent
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-body > tr > td){
 | 
											
												
													
														|  | 
 |  | +  //   border: none;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body){
 | 
											
												
													
														|  | 
 |  | +  //   background-color:transparent
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.jeecg-basic-table-row__striped td){
 | 
											
												
													
														|  | 
 |  | +  //   background-color: transparent;
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  :deep(.@{ventSpace}-table-cell-row-hover) {
 | 
											
												
													
														|  | 
 |  | +    background: #264d8833 !important;
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  :deep(.@{ventSpace}-table-row-selected) {
 | 
											
												
													
														|  | 
 |  | +    background: #268bc522 !important;
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-tbody) {
 | 
											
												
													
														|  | 
 |  | +  //   tr.ant-table-row-selected {
 | 
											
												
													
														|  | 
 |  | +  //     td {
 | 
											
												
													
														|  | 
 |  | +  //       background: #007cc415 !important;
 | 
											
												
													
														|  | 
 |  | +  //     }
 | 
											
												
													
														|  | 
 |  | +  //   }
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  :deep(.@{ventSpace}-table-tbody > tr > td) {
 | 
											
												
													
														|  | 
 |  | +    background-color: #0dc3ff05;
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  :deep(.jeecg-basic-table-row__striped) {
 | 
											
												
													
														|  | 
 |  | +    // background: #97efff11 !important;
 | 
											
												
													
														|  | 
 |  | +    td {
 | 
											
												
													
														|  | 
 |  | +      // background-color: #97efff11 !important;
 | 
											
												
													
														|  | 
 |  | +      background-color: @vent-table-no-hover !important;
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +  // :deep(.ant-table-thead) {
 | 
											
												
													
														|  | 
 |  | +  //   // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
 | 
											
												
													
														|  | 
 |  | +  //   background-color: #3d9dd45d !important;
 | 
											
												
													
														|  | 
 |  | +  //   & > tr > th,
 | 
											
												
													
														|  | 
 |  | +  //   .ant-table-column-title {
 | 
											
												
													
														|  | 
 |  | +  //     // color: #70f9fc !important;
 | 
											
												
													
														|  | 
 |  | +  //     color: #fff !important;
 | 
											
												
													
														|  | 
 |  | +  //     border-color: #91e9fe !important;
 | 
											
												
													
														|  | 
 |  | +  //     border-left: none !important;
 | 
											
												
													
														|  | 
 |  | +  //     // border-right: none !important;
 | 
											
												
													
														|  | 
 |  | +  //     &:last-child {
 | 
											
												
													
														|  | 
 |  | +  //       border-right: none !important;
 | 
											
												
													
														|  | 
 |  | +  //     }
 | 
											
												
													
														|  | 
 |  | +  //   }
 | 
											
												
													
														|  | 
 |  | +  // }
 | 
											
												
													
														|  | 
 |  | +  ::v-deep .zxm-table-title {
 | 
											
												
													
														|  | 
 |  | +    display: none;
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +</style>
 |