iov-pro-components 0.0.3

package/docs/template/list.md

@@ -0,0 +1,464 @@
+---
+pageClass: grey-background-demo-content
+---
+
+## 基础使用
+
+::: demo
+```vue
+<template>
+  <iov-pro-search-table
+    ref="searchTableRef"
+    title="DEMO列表"
+    :form-items="FORM_ITEMS"
+    :table-columns="TABLE_COLUMNS"
+    :config="{ form: { collapse: true, maxLine: 1, labelWidth: '100px' } }"
+    :request="{ api: apiMock }"
+  >
+    <template #action-bar="{ data }">
+      <!-- data是查询条件 -->
+      <el-button round size="small" type="primary" icon="iov-icon-plus">primary按钮</el-button>
+      <el-button round size="small">普通按钮</el-button>
+    </template>
+    <template #operation="{ row }">
+      <iov-pro-link-group max="3">
+        <el-link type="primary" @click.stop="onClickBtn(row)">按钮1</el-link>
+        <el-link type="primary">按钮2</el-link>
+        <el-link type="primary">按钮3</el-link>
+        <el-link type="primary">按钮4</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const paramKeys = Object.keys(params).filter(key => !['currPage', 'pageSize'].includes(key))
+    setTimeout(() => {
+      return resolve({
+        "currPage": 1,
+        "hasMore": false,
+        "list": [
+            {
+              "alias": "CUSC",
+              "createTime": "2022-02-08 10:01:50",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f64d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "智网",
+              "tenantNo": "1",
+              "updateTime": "2023-08-07 15:28:51",
+              "usci": ""
+            },
+             {
+              "alias": "CAR-CHANNEL",
+              "createTime": "2023-07-11 12:21:38",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f164d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "汽车频道",
+              "tenantNo": "12",
+              "updateTime": "2023-08-17 13:28:51",
+              "usci": ""
+            }
+        ].filter(item => paramKeys.every(key => !params[key] || item[key] === params[key])),
+        "pageSize": 10,
+        "totalCount": 1
+    })
+    }, 300)
+  })
+}
+
+const DICT = {
+  APP_STATUS: [
+    { label: '启用', value: 1, type: 'success' },
+    { label: '停用', value: 0, type: 'info' }
+  ]
+}
+
+const FORM_ITEMS = [
+  { type: 'input', label: '租户名称', name: 'tenantName' },
+  { type: 'input', label: '租户代码', name: 'alias' },
+  { type: 'input', label: '统一信用代码', name: 'usci' },
+  { type: 'select', label: '状态', name: 'status', options: DICT.APP_STATUS }
+]
+
+const TABLE_COLUMNS = [
+  { type: 'selection', width: '65px' },
+  { label: '租户编码', prop: 'tenantNo', minWidth: '160px', searchable: true, sortable: true },
+  { type: 'tag', label: '状态', prop: 'status', enums: DICT.APP_STATUS, filters: DICT.APP_STATUS, minWidth: '100px' },
+  { label: '租户名称', prop: 'tenantName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '租户代码', prop: 'alias', minWidth: '300px', showOverflowTooltip: true },
+  { label: '统一信用代码', prop: 'usci', minWidth: '300px', showOverflowTooltip: true },
+  { label: '创建时间', prop: 'createTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '创建人', prop: 'creatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '最近修改时间', prop: 'updateTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '操作人', prop: 'operatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { type: 'slot', label: '操作', slotName: 'operation', keepInPlace: true, align: 'right', width: '185px', fixed: 'right' }
+]
+
+export default {
+  data() {
+    return {
+      FORM_ITEMS,
+      TABLE_COLUMNS,
+      apiMock
+    }
+  },
+  methods: {
+    /**
+     * 按钮点击事件
+     * @param  {Object} row 当行行数据
+     */
+    onClickBtn(row) {
+      this.$message.info(`内容是：${JSON.stringify(row)}`)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 多TAB列表
+
+::: demo
+```vue
+<template>
+  <iov-pro-search-table-outer-tabs>
+    <iov-pro-search-table
+      title="标签1"
+      :form-items="FORM_ITEMS"
+      :table-columns="TABLE_COLUMNS"
+      :config="{ form: { collapse: true, maxLine: 1, labelWidth: '100px' } }"
+      :request="{ api: apiMock }"
+    >
+      <template #action-bar="{ data }">
+        <!-- data是查询条件 -->
+        <el-button round size="small" type="primary" icon="iov-icon-plus">primary按钮</el-button>
+        <el-button round size="small">普通按钮</el-button>
+      </template>
+      <template #operation="{ row }">
+        <iov-pro-link-group max="3">
+          <el-link type="primary" @click.stop="onClickBtn(row)">按钮1</el-link>
+          <el-link type="primary">按钮2</el-link>
+          <el-link type="primary">按钮3</el-link>
+          <el-link type="primary">按钮4</el-link>
+        </iov-pro-link-group>
+      </template>
+    </iov-pro-search-table>
+    <iov-pro-search-table
+      title="标签2"
+      :form-items="FORM_ITEMS"
+      :table-columns="TABLE_COLUMNS"
+      :config="{ form: { collapse: true, maxLine: 1, labelWidth: '100px' } }"
+      :request="{ api: apiMock }"
+    >
+      <template #action-bar="{ data }">
+        <!-- data是查询条件 -->
+        <el-button round size="small" type="primary" icon="iov-icon-plus">primary按钮</el-button>
+        <el-button round size="small">普通按钮</el-button>
+      </template>
+      <template #operation="{ row }">
+        <iov-pro-link-group max="3">
+          <el-link type="primary" @click.stop="onClickBtn(row)">按钮1</el-link>
+          <el-link type="primary">按钮2</el-link>
+          <el-link type="primary">按钮3</el-link>
+          <el-link type="primary">按钮4</el-link>
+        </iov-pro-link-group>
+      </template>
+    </iov-pro-search-table>
+  </iov-pro-search-table-outer-tabs>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const paramKeys = Object.keys(params).filter(key => !['currPage', 'pageSize'].includes(key))
+    setTimeout(() => {
+      return resolve({
+        "currPage": 1,
+        "hasMore": false,
+        "list": [
+            {
+              "alias": "CUSC",
+              "createTime": "2022-02-08 10:01:50",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f64d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "智网",
+              "tenantNo": "1",
+              "updateTime": "2023-08-07 15:28:51",
+              "usci": ""
+            },
+             {
+              "alias": "CAR-CHANNEL",
+              "createTime": "2023-07-11 12:21:38",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f164d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "汽车频道",
+              "tenantNo": "12",
+              "updateTime": "2023-08-17 13:28:51",
+              "usci": ""
+            }
+        ].filter(item => paramKeys.every(key => !params[key] || item[key] === params[key])),
+        "pageSize": 10,
+        "totalCount": 1
+    })
+    }, 300)
+  })
+}
+
+const DICT = {
+  APP_STATUS: [
+    { label: '启用', value: 1, type: 'success' },
+    { label: '停用', value: 0, type: 'info' }
+  ]
+}
+
+const FORM_ITEMS = [
+  { type: 'input', label: '租户名称', name: 'tenantName' },
+  { type: 'input', label: '租户代码', name: 'alias' },
+  { type: 'input', label: '统一信用代码', name: 'usci' },
+  { type: 'select', label: '状态', name: 'status', options: DICT.APP_STATUS }
+]
+
+const TABLE_COLUMNS = [
+  { type: 'selection', width: '65px' },
+  { label: '租户编码', prop: 'tenantNo', minWidth: '160px', searchable: true, sortable: true },
+  { type: 'tag', label: '状态', prop: 'status', enums: DICT.APP_STATUS, filters: DICT.APP_STATUS, minWidth: '100px' },
+  { label: '租户名称', prop: 'tenantName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '租户代码', prop: 'alias', minWidth: '300px', showOverflowTooltip: true },
+  { label: '统一信用代码', prop: 'usci', minWidth: '300px', showOverflowTooltip: true },
+  { label: '创建时间', prop: 'createTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '创建人', prop: 'creatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '最近修改时间', prop: 'updateTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '操作人', prop: 'operatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { type: 'slot', label: '操作', slotName: 'operation', keepInPlace: true, align: 'right', width: '185px', fixed: 'right' }
+]
+
+export default {
+  data() {
+    return {
+      tabName: 'tab1',
+      FORM_ITEMS,
+      TABLE_COLUMNS,
+      apiMock
+    }
+  },
+  methods: {
+    /**
+     * 按钮点击事件
+     * @param  {Object} row 当行行数据
+     */
+    onClickBtn(row) {
+      this.$message.info(`内容是：${JSON.stringify(row)}`)
+    }
+  }
+}
+</script>
+
+<style>
+.multi-tabs .el-tabs__header {
+  background-color: #ffffff;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  margin-bottom: 0;
+}
+.multi-tabs .el-tabs__header .el-tabs__nav-scroll {
+  padding: 0 16px;
+}
+.multi-tabs .search-table__title-main {
+  display: none;
+}
+.multi-tabs .search-table__module:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+</style>
+```
+:::
+
+
+## 单搜索多TAB列表
+
+::: demo
+```vue
+<template>
+  <iov-pro-search-table-inner-tabs
+    :form-items="FORM_ITEMS"
+    :config="{ form: { collapse: true, maxLine: 1, labelWidth: '100px' } }"
+  >
+    <iov-pro-search-table
+      title="标签1"
+      :table-columns="TABLE_COLUMNS"
+      :request="{ api: apiMock }"
+    >
+      <template #action-bar="{ data }">
+        <!-- data是查询条件 -->
+        <el-button round size="small" type="primary" icon="iov-icon-plus">primary按钮</el-button>
+        <el-button round size="small">普通按钮</el-button>
+      </template>
+      <template #operation="{ row }">
+        <iov-pro-link-group max="3">
+          <el-link type="primary" @click.stop="onClickBtn(row)">按钮1</el-link>
+          <el-link type="primary">按钮2</el-link>
+          <el-link type="primary">按钮3</el-link>
+          <el-link type="primary">按钮4</el-link>
+        </iov-pro-link-group>
+      </template>
+    </iov-pro-search-table>
+    <iov-pro-search-table
+      title="标签2"
+      :table-columns="TABLE_COLUMNS"
+      :request="{ api: apiMock }"
+    >
+      <template #action-bar="{ data }">
+        <!-- data是查询条件 -->
+        <el-button round size="small">普通按钮</el-button>
+      </template>
+      <template #operation="{ row }">
+        <iov-pro-link-group max="3">
+          <el-link type="primary" @click.stop="onClickBtn(row)">按钮1</el-link>
+          <el-link type="primary">按钮2</el-link>
+          <el-link type="primary">按钮3</el-link>
+          <el-link type="primary">按钮4</el-link>
+        </iov-pro-link-group>
+      </template>
+    </iov-pro-search-table>
+  </iov-pro-search-table-inner-tabs>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const paramKeys = Object.keys(params).filter(key => !['currPage', 'pageSize'].includes(key))
+    setTimeout(() => {
+      return resolve({
+        "currPage": 1,
+        "hasMore": false,
+        "list": [
+            {
+              "alias": "CUSC",
+              "createTime": "2022-02-08 10:01:50",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f64d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "智网",
+              "tenantNo": "1",
+              "updateTime": "2023-08-07 15:28:51",
+              "usci": ""
+            },
+            {
+              "alias": "CAR-CHANNEL",
+              "createTime": "2023-07-11 12:21:38",
+              "creator": "",
+              "creatorFullName": "",
+              "id": 1,
+              "operator": "6515104331f164d648a5659b74f0d3a57",
+              "operatorFullName": "孙开(智网)",
+              "status": 1,
+              "statusName": "启用",
+              "tenantName": "汽车频道",
+              "tenantNo": "12",
+              "updateTime": "2023-08-17 13:28:51",
+              "usci": ""
+            }
+        ].filter(item => paramKeys.every(key => !params[key] || item[key] === params[key])),
+        "pageSize": 10,
+        "totalCount": 1
+    })
+    }, 300)
+  })
+}
+
+const DICT = {
+  APP_STATUS: [
+    { label: '启用', value: 1, type: 'success' },
+    { label: '停用', value: 0, type: 'info' }
+  ]
+}
+
+const FORM_ITEMS = [
+  { type: 'input', label: '租户名称', name: 'tenantName' },
+  { type: 'input', label: '租户代码', name: 'alias' },
+  { type: 'input', label: '统一信用代码', name: 'usci' },
+  { type: 'select', label: '状态', name: 'status', options: DICT.APP_STATUS }
+]
+
+const TABLE_COLUMNS = [
+  { type: 'selection', width: '65px' },
+  { label: '租户编码', prop: 'tenantNo', minWidth: '160px', searchable: true, sortable: true },
+  { type: 'tag', label: '状态', prop: 'status', enums: DICT.APP_STATUS, filters: DICT.APP_STATUS, minWidth: '100px' },
+  { label: '租户名称', prop: 'tenantName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '租户代码', prop: 'alias', minWidth: '300px', showOverflowTooltip: true },
+  { label: '统一信用代码', prop: 'usci', minWidth: '300px', showOverflowTooltip: true },
+  { label: '创建时间', prop: 'createTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '创建人', prop: 'creatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { label: '最近修改时间', prop: 'updateTime', minWidth: '180px', showOverflowTooltip: true },
+  { label: '操作人', prop: 'operatorFullName', minWidth: '200px', showOverflowTooltip: true },
+  { type: 'slot', label: '操作', slotName: 'operation', keepInPlace: true, align: 'right', width: '185px', fixed: 'right' }
+]
+
+export default {
+  data() {
+    return {
+      tabName: 'tab1',
+      FORM_ITEMS,
+      TABLE_COLUMNS,
+      apiMock
+    }
+  },
+  methods: {
+    /**
+     * 按钮点击事件
+     * @param  {Object} row 当行行数据
+     */
+    onClickBtn(row) {
+      this.$message.info(`内容是：${JSON.stringify(row)}`)
+    }
+  }
+}
+</script>
+
+<style>
+.multi-tabs .el-tabs__header {
+  background-color: #ffffff;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  margin-bottom: 0;
+}
+.multi-tabs .el-tabs__header .el-tabs__nav-scroll {
+  padding: 0 16px;
+}
+.multi-tabs .search-table__title-main {
+  display: none;
+}
+.multi-tabs .search-table__module:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+</style>
+```
+:::

package/docs/template/tabs-mini.md

@@ -0,0 +1,32 @@
+## mini标签页
+
+::: demo
+```vue
+<template>
+<el-radio-group v-model="value" size="small" @change="onChange">
+  <el-radio v-for="item in option" :key="item.value" :label="item.value" button>{{ item.label }}</el-radio>
+</el-radio-group>
+<div v-if="value === '1'">mini标签页1内容</div>
+<div v-else>mini标签页2内容</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '1',
+      option: [
+        { label: '账号关联', value: '1' },
+        { label: '部门关联', value: '2' }
+      ]
+    }
+  },
+  methods: {
+    onChange(e) {
+      console.log(e)
+    }
+  }
+}
+</script>
+```
+:::

package/docs/template/tabs.md

@@ -0,0 +1,32 @@
+## 标签页
+
+::: demo
+```vue
+<template>
+<el-tabs v-model="value" type="capsule" @tab-click="onChange">
+  <el-tab-pane v-for="item in option" :key="item.value" :label="item.label" :name="item.value" />
+</el-tabs>
+<div v-if="value === '1'">标签页1内容</div>
+<div v-else>标签页2内容</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '1',
+      option: [
+        { label: '账号关联', value: '1' },
+        { label: '部门关联', value: '2' }
+      ]
+    }
+  },
+  methods: {
+    onChange(e) {
+      console.log(e)
+    }
+  }
+}
+</script>
+```
+:::

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package/lib/iov-pro-components.css

@@ -0,0 +1 @@
+.iov-pro-column-tooltip__container{line-height:17px;padding:2px;overflow-x:hidden;position:relative}.iov-pro-column-tooltip__container.ellipsis:after{bottom:0;content:"...";display:block;position:absolute;right:-1px}.iov-pro-column-tooltip__text{height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.iov-pro-description__col{display:flex;font-family:PingFangSC,PingFang SC;font-size:13px;line-height:18px}.iov-pro-description__label{color:#65677a;flex-shrink:0;width:144px;white-space:nowrap;overflow:hidden}.iov-pro-description__value{color:#212026;flex:1;width:0;word-break:break-all}.iov-pro-description__link.el-link.el-link--primary{border-bottom:1px dashed #212026;color:#212026;margin-left:24px}.iov-pro-description__link.el-link.el-link--primary:hover{border-color:#2f48ff;color:#2f48ff}.iov-pro-description__link.el-link.el-link--primary.has-icon{margin-left:24px}.iov-pro-description__link-icon{font-size:20px;width:20px;height:20px;margin-right:4px;margin-left:-24px;vertical-align:bottom}.iov-pro-description__link-group .iov-pro-space{flex-wrap:wrap}.iov-pro-text__content{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;word-break:break-all}.iov-pro-dialog-select .el-dialog__body{padding:16px 24px;overflow:auto;max-height:488px;box-sizing:content-box}.iov-pro-dialog-select .el-dialog__footer{padding:16px 24px 20px;text-align:center}.iov-pro-dialog-select__table{min-height:212px}.iov-pro-dialog-select__filter{margin-bottom:12px;width:40%}.iov-pro-dialog-select .el-tabs{width:100%}.iov-pro-dialog-select .el-tabs--card .el-tabs__item{box-sizing:content-box}.iov-pro-dialog-select .el-tabs--card .el-tabs__item.is-active{border-top:2px solid #2f48ff;color:#2f48ff;background:linear-gradient(180deg, #F0F4FD 0%, #fff 10%)}.iov-pro-fixed-button-group{height:68px}.iov-pro-fixed-button-group__content{align-items:center;background-color:#fff;box-shadow:0px 0px 12px 0px rgba(196,198,207,.21);bottom:0;border-radius:0px 0px 8px 8px;display:flex;position:fixed;height:68px;left:204px;right:16px;z-index:1000}.iov-pro-fixed-button-group__content.center{justify-content:center}.iov-pro-fixed-button-group__content.left{justify-content:flex-start}.iov-pro-fixed-button-group__content.right{justify-content:flex-end}.iov-pro-form__form-item.override.important{margin-bottom:0}.iov-pro-form .iov-pro-form__form-item.important.override{margin-bottom:0}.iov-pro-link-group .el-link,.iov-pro-link-group .el-dropdown{display:block}.iov-pro-link-group__more{color:#2f48ff;cursor:pointer;width:14px;height:14px;display:block}.iov-pro-link-group__dropdown-menu{padding:4px}.iov-pro-link-group__dropdown-menu .el-dropdown-menu__item{font-size:13px;line-height:32px;padding:0 12px}.iov-pro-link-group__dropdown-menu .el-dropdown-menu__item:hover{background-color:#f6f7f8}.iov-pro-link-group .iov-pro-space__item{position:relative}.iov-pro-link-group .iov-pro-space__item:after{background:#dcdfe6;content:"";display:block;top:50%;right:0;transform:translateY(-50%);width:1px;height:12px;position:absolute}.iov-pro-link-group .iov-pro-space__item:last-child:after{display:none}.iov-pro-page-detail{padding:16px;background:#fff;border-radius:8px;font-family:PingFangSC,PingFang SC;position:relative}.iov-pro-page-detail__head{margin-bottom:16px;display:flex;align-items:center}.iov-pro-page-detail__icon{margin-right:12px;width:44px;height:44px;background-position:0 0;background-repeat:no-repeat;background-size:contain;font-style:normal}.iov-pro-page-detail__head-info{display:flex;align-items:flex-start;flex-direction:column;justify-content:space-between}.iov-pro-page-detail__name{margin-bottom:4px;height:22px;line-height:22px}.iov-pro-page-detail__name .name{margin-right:8px;font-weight:600;font-size:16px;color:#212026}.iov-pro-page-detail__desc{height:18px;line-height:18px;font-weight:400;font-size:12px;color:#65677a}.iov-pro-page-detail__desc .desc-item{margin-right:16px}.iov-pro-page-detail__help{position:absolute;top:16px;right:16px}.iov-pro-page-detail__help .help-item{margin-left:16px;font-weight:400;font-size:12px;color:#a2a3aa}.iov-pro-page-module{padding:16px;background:#fff;border-radius:8px}.iov-pro-page-module.is-sub .iov-pro-page-module__name-text{font-size:14px}.iov-pro-page-module__back{border-radius:4px;cursor:pointer;font-size:18px;color:#494b53;width:22px;height:22px;margin-right:8px;text-align:center;line-height:22px;transition:background-color .3s cubic-bezier(0.645, 0.045, 0.355, 1)}.iov-pro-page-module__back:hover{background-color:#f6f7f8}.iov-pro-page-module__head{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.iov-pro-page-module__suffix{margin-left:10px}.iov-pro-page-module__name{display:flex;align-items:center}.iov-pro-page-module__name-text{font-family:PingFangSC,PingFang SC;font-weight:600;font-size:16px;color:#0d1722}.image-viewer .is-disabled{width:32px;height:32px;background-color:rgba(255,255,255,.3) !important}.image-viewer .is-disabled-right{width:32px;height:32px;transform:rotate(180deg);background-color:rgba(255,255,255,.3) !important}.image-viewer .el-image-viewer__prev{width:32px;height:32px;background-color:rgba(255,255,255,.3)}.image-viewer .el-image-viewer__prev:hover{width:32px;height:32px;background-color:rgba(255,255,255,.6)}.image-viewer .is-disabled-icon{opacity:.2}.image-viewer .el-image-viewer__next{width:32px;height:32px;-webkit-transform:rotate(180deg);transform:rotate(180deg);right:40px;text-indent:2px;background-color:rgba(255,255,255,.3)}.image-viewer .el-image-viewer__next:hover{width:32px;height:32px;-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:rgba(255,255,255,.6)}.image-viewer .el-image-view__tools{position:absolute;right:16px;bottom:30px;line-height:20px;background:rgba(255,255,255,.2);border-radius:20px;text-align:center;font-size:10px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#494b53;padding:3px 13px}.image-viewer .el-image-view__tools :nth-child(2){padding:0 5px;font-weight:600}.image-viewer__close{font-size:20px}.search-table__title-main{line-height:22px;margin-bottom:12px}.search-table__title{color:#0d1722;font-family:PingFangSC,PingFang SC;font-weight:600;font-size:16px}.search-table__sub-title{margin-left:8px;color:#a2a3aa;font-family:PingFangSC,PingFang SC;font-weight:400;font-size:12px}.search-table__module{background:#fff;border-radius:8px;margin-bottom:10px;padding:16px}.search-table__module .iov-pro-form .iov-pro-form__form-item>label{overflow:hidden;padding:0;white-space:nowrap}.search-table__module .iov-pro-table .iov-pro-link-group .iov-pro-space__item{position:relative;line-height:1}.search-table__module .iov-pro-table .iov-pro-link-group .iov-pro-space__item:after{content:"";width:1px;height:13px;display:inline-block;background:#dcdfe6;overflow:hidden;position:absolute;right:0;top:50%;transform:translateY(-50%)}.search-table__module .iov-pro-table .iov-pro-link-group .iov-pro-space__item:last-child:after{display:none}.search-table__module .iov-pro-table .iov-pro-link-group .iov-pro-space__item .el-link{font-size:13px}.search-table__toolbar{align-items:center;display:flex}.search-table__bar{display:flex;justify-content:space-between;margin-bottom:12px}.search-table__toggle-status{align-items:center;color:#0d1722;cursor:pointer;display:flex;font-family:PingFangSC,PingFang SC;font-weight:500;font-size:12px;height:30px;padding:0 4px}.search-table__toggle-status .iov-icon-arrow-down,.search-table__toggle-status .iov-icon-arrow-up{font-size:14px;margin-top:2px}.search-table__row{position:relative}.search-table__row .search-table__action-bar{align-items:center;bottom:0;display:flex;top:0;right:0;position:absolute}.inner-tabs__title-main{line-height:22px;margin-bottom:12px}.inner-tabs__title{color:#0d1722;font-family:PingFangSC,PingFang SC;font-weight:600;font-size:16px}.inner-tabs__sub-title{margin-left:8px;color:#a2a3aa;font-family:PingFangSC,PingFang SC;font-weight:400;font-size:12px}.inner-tabs__module{background:#fff;border-radius:8px;margin-bottom:10px;padding:16px}.inner-tabs__module .iov-pro-form .iov-pro-form__form-item>label{overflow:hidden;padding:0;white-space:nowrap}.inner-tabs__module .el-tabs__content{overflow:visible}.inner-tabs__module .el-tabs__nav-wrap::after{display:none}.inner-tabs__module .el-tabs__item{font-size:14px}.inner-tabs__module .search-table__module{padding:0}.inner-tabs__module .search-table__action-bar{bottom:12px;top:auto}.inner-tabs__module:last-child{margin-bottom:0;padding-top:0}.inner-tabs__bar{display:flex;justify-content:space-between;margin-bottom:14px}.outer-tabs__tabs .el-tabs__header{background:#fff;border-radius:8px 8px 0 0;margin:0;padding:0 16px}.outer-tabs__tabs .el-tabs__item{font-size:14px}.outer-tabs__tabs .search-table__module:first-child{border-radius:0 0 8px 8px}.outer-tabs__tabs .search-table__title-main{display:none}.iov-pro-space{display:flex}.iov-pro-space.horizontal{flex-direction:row}.iov-pro-space.vertical{flex-direction:column}.iov-pro-space__item{flex-shrink:0}.iov-pro-sub-title{margin-bottom:12px;font-family:PingFangSC,PingFang SC;display:flex;align-items:center}.iov-pro-sub-title__icon{margin-right:8px;width:18px;height:18px;background-position:0 0;background-repeat:no-repeat;background-size:contain}.iov-pro-sub-title__name{margin-right:8px;font-weight:600;font-size:14px;color:#212026}.iov-pro-sub-title__desc{margin-right:8px;font-size:13px;color:#65677a}.iov-pro-sub-title__help{margin-right:8px}.iov-pro-sub-title__help .el-link{margin-right:8px;font-size:13px;height:26px;color:#2f48ff;line-height:26px;padding:0 4px;border-radius:4px;transition:all .2s ease}.iov-pro-sub-title__help .el-link .iconfont{font-size:12px;margin-right:4px}.iov-pro-sub-title__help .el-link:not(.is-disabled):hover{background:rgba(42,104,255,.08)}.iov-pro-submit-module{padding:16px 0 20px;border-radius:0px 0px 8px 8px;position:fixed;left:228px;right:20px;bottom:0;z-index:9;font-size:0;background:#fff;text-align:center;box-shadow:0 0 12px 0 rgba(196,198,207,.2)}.iov-pro-table__table .is-right .iov-pro-space.horizontal{justify-content:flex-end}.iov-pro-table__table .is-center .iov-pro-space.horizontal{justify-content:center}.iov-pro-table__pagination{text-align:right;padding:12px 0 0}.iov-pro-table-filter__icon{border-radius:2px;color:#abafb5;cursor:pointer;display:block;font-size:14px;width:20px;height:20px;line-height:20px;text-align:center}.iov-pro-table-filter__icon.is-actived{color:#2f48ff}.iov-pro-table-filter__icon.is-actived:hover{color:#2f48ff}.iov-pro-table-filter__icon:hover{background-color:#e5e6eb;color:#777d87}.iov-pro-table-filter__operation{border-top:1px solid #edeff3;text-align:right;padding:8px}.iov-pro-table-filter__checkbox-group{padding:4px}.iov-pro-table-filter__checkbox{box-sizing:border-box;line-height:32px;padding:0 12px;width:100%}.iov-pro-table-filter__checkbox:hover{background-color:#f0f4fd}.iov-pro-table-filter__popper{margin-top:4px;padding:0;min-width:120px}.iov-pro-table-search__icon{border-radius:2px;color:#abafb5;cursor:pointer;display:inline-block;font-size:14px;width:20px;height:20px;line-height:20px;text-align:center}.iov-pro-table-search__icon.is-actived{color:#2f48ff}.iov-pro-table-search__icon.is-actived:hover{color:#2f48ff}.iov-pro-table-search__icon:hover{background-color:#e5e6eb;color:#777d87}.iov-pro-table-search__operation{padding:8px;text-align:right}.iov-pro-table-search__input-wrapper{padding:8px 8px 0}.iov-pro-table-search__popper{margin-top:4px;padding:0}.iov-pro-table-sort{box-sizing:border-box;color:#abafb5;cursor:pointer;display:flex;flex-direction:column;width:20px;height:20px;padding:3px}.iov-pro-table-sort .iovprofont{display:block;height:50%}.iov-pro-table-sort .iovprofont.iov-icon-sort-up{line-height:14px}.iov-pro-table-sort .iovprofont.iov-icon-sort-down{line-height:2px}.iov-pro-table-sort.ascending .iov-icon-sort-up{color:#2f48ff}.iov-pro-table-sort.descending .iov-icon-sort-down{color:#2f48ff}.iov-pro-toolbar{align-items:center;display:flex}.iov-pro-toolbar__icon{background-color:#f2f3f5;background-position:center center;background-repeat:no-repeat;background-size:16px 16px;border-radius:4px;cursor:pointer;color:#212026;display:block;width:26px;height:26px;text-align:center;line-height:26px}.iov-pro-toolbar__icon img{width:16px;height:16px;vertical-align:middle}.iov-pro-toolbar__icon:hover{color:#2f48ff}.iov-pro-toolbar__icon:active,.iov-pro-toolbar__icon.is-active{color:#1d2cd2}.iov-pro-toolbar__dropdown-menu{padding:4px}.iov-pro-toolbar__dropdown-menu .el-dropdown-menu__item{font-size:13px;line-height:32px;padding:0 12px}.iov-pro-toolbar__dropdown-menu .el-dropdown-menu__item:hover{background-color:#f6f7f8;color:#212026}.iov-pro-toolbar__dropdown-menu .el-dropdown-menu__item:active{font-weight:600}.iov-pro-toolbar__setting-popper{padding:0}.iov-pro-toolbar__setting-header{align-items:center;border-bottom:1px solid #edeff3;display:flex;padding:0 16px;height:42px;justify-content:space-between}.iov-pro-toolbar__setting-body{overflow:auto;padding:4px;max-height:190px}.iov-pro-toolbar__setting-item{align-items:center;border-radius:2px;display:flex;height:32px;justify-content:space-between;padding:0 12px}.iov-pro-toolbar__setting-item:hover{background:#f6f7f8}.iov-pro-toolbar__setting-item--drag{color:#777d87;cursor:grab;font-size:16px}.iov-pro-toolbar__setting-item--drag.undraggable{cursor:not-allowed}.iov-pro-toolbar__setting-item .el-checkbox{align-items:center;display:flex}.iov-pro-toolbar__setting-item .el-checkbox .el-checkbox__input{height:16px}.iov-pro-toolbar__setting-item .el-checkbox .el-checkbox__label{max-width:102px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iov-pro-toolbar__setting-item .el-checkbox.is-disabled .el-checkbox__label{color:#0d1722}.iov-pro-toolbar__setting-footer{align-items:center;border-top:1px solid #edeff3;display:flex;padding:0 8px;height:42px;justify-content:flex-end}