diff --git a/web/src/views/system/log/loginLog/api.js b/web/src/views/system/log/loginLog/api.js
new file mode 100644
index 0000000..337a05f
--- /dev/null
+++ b/web/src/views/system/log/loginLog/api.js
@@ -0,0 +1,19 @@
+/*
+ * @创建文件时间: 2021-06-08 10:40:32
+ * @Auther: 猿小天
+ * @最后修改人: 猿小天
+ * @最后修改时间: 2021-06-09 10:36:20
+ * 联系Qq:1638245306
+ * @文件介绍: 操作日志
+ */
+import { request } from '@/api/service'
+
+export const urlPrefix = '/api/system/login_log/'
+
+export function GetList (query) {
+  return request({
+    url: urlPrefix,
+    method: 'get',
+    params: query
+  })
+}
diff --git a/web/src/views/system/log/loginLog/crud.js b/web/src/views/system/log/loginLog/crud.js
new file mode 100644
index 0000000..d7352c8
--- /dev/null
+++ b/web/src/views/system/log/loginLog/crud.js
@@ -0,0 +1,293 @@
+import { BUTTON_WHETHER_BOOL } from '@/config/button'
+
+export const crudOptions = (vm) => {
+  return {
+    pageOptions: {
+      compact: true
+    },
+    options: {
+      tableType: 'vxe-table',
+      rowKey: true, // 必须设置，true or false
+      rowId: 'id',
+      height: '100%', // 表格高度100%, 使用toolbar必须设置
+      highlightCurrentRow: false
+
+    },
+    rowHandle: {
+      fixed: 'right',
+      view: {
+        thin: true,
+        text: '',
+        disabled () {
+          return !vm.hasPermissions('Retrieve')
+        }
+      },
+      width: 70,
+      edit: {
+        thin: true,
+        text: '',
+        show: false,
+        disabled () {
+          return !vm.hasPermissions('Update')
+        }
+      },
+      remove: {
+        thin: true,
+        text: '删除',
+        show: false,
+        disabled () {
+          return !vm.hasPermissions('Delete')
+        }
+      }
+    },
+    viewOptions: {
+      componentType: 'form'
+    },
+    formOptions: {
+      disabled: true,
+      defaultSpan: 12 // 默认的表单 span
+    },
+    indexRow: { // 或者直接传true,不显示title，不居中
+      title: '序号',
+      align: 'center',
+      width: 70
+    },
+    columns: [
+      {
+        title: '关键词',
+        key: 'search',
+        show: false,
+        disabled: true,
+        search: {
+          disabled: false
+        },
+        form: {
+          show: false,
+          component: {
+            placeholder: '请输入关键词'
+          }
+        }
+      },
+      {
+        title: 'ID',
+        key: 'id',
+        width: 90,
+        disabled: true,
+        form: {
+          disabled: true
+        }
+      },
+      {
+        title: '登录用户名',
+        key: 'username',
+        search: {
+          disabled: false
+        },
+        width: 140,
+        type: 'input',
+        form: {
+          disabled: true,
+          component: {
+            placeholder: '请输入登录用户名'
+          }
+        }
+      },
+      {
+        title: '登录ip',
+        key: 'ip',
+        search: {
+          disabled: false
+        },
+        width: 130,
+        type: 'input',
+        form: {
+          disabled: true,
+          component: {
+            placeholder: '请输入登录ip'
+          }
+        }
+      }, {
+        title: '运营商',
+        key: 'isp',
+        search: {
+          disabled: true
+        },
+        disabled: true,
+        width: 180,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入操作系统'
+          }
+        }
+      }, {
+        title: '大州',
+        key: 'continent',
+        width: 80,
+        type: 'input',
+        form: {
+          disabled: true,
+          component: {
+            placeholder: '请输入州'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '国家',
+        key: 'country',
+        width: 80,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入国家'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '省份',
+        key: 'province',
+        width: 80,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入省份'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '城市',
+        key: 'city',
+        width: 80,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入城市'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '县区',
+        key: 'district',
+        width: 80,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入县区'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '区域代码',
+        key: 'area_code',
+        width: 100,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入区域代码'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '英文全称',
+        key: 'country_english',
+        width: 120,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入英文全称'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '简称',
+        key: 'country_code',
+        width: 100,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入简称'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '经度',
+        key: 'longitude',
+        width: 80,
+        type: 'input',
+        disabled: true,
+        form: {
+          component: {
+            placeholder: '请输入经度'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '纬度',
+        key: 'latitude',
+        width: 80,
+        type: 'input',
+        disabled: true,
+        form: {
+          component: {
+            placeholder: '请输入纬度'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '登录类型',
+        key: 'login_type',
+        width: 100,
+        type: 'select',
+        search: {
+          disabled: false
+        },
+        dict: {
+          data: [{ label: '普通登录', value: 1 }]
+        },
+        form: {
+          component: {
+            placeholder: '请选择登录类型'
+          }
+        },
+        component: { props: { color: 'auto' } } // 自动染色
+      }, {
+        title: '操作系统',
+        key: 'os',
+        width: 180,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入操作系统'
+          }
+        }
+      }, {
+        title: '浏览器名',
+        key: 'browser',
+        width: 180,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入操作系统'
+          }
+        }
+      }, {
+        title: 'agent信息',
+        key: 'agent',
+        disabled: true,
+        width: 180,
+        type: 'input',
+        form: {
+          component: {
+            placeholder: '请输入操作系统'
+          }
+        }
+      }, {
+        fixed: 'right',
+        title: '登录时间',
+        key: 'create_datetime',
+        width: 160,
+        type: 'datetime'
+      }
+    ]
+  }
+}
diff --git a/web/src/views/system/log/loginLog/index.vue b/web/src/views/system/log/loginLog/index.vue
new file mode 100644
index 0000000..cd6c6a3
--- /dev/null
+++ b/web/src/views/system/log/loginLog/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
+    <d2-crud-x
+      ref="d2Crud"
+      v-bind="_crudProps"
+      v-on="_crudListeners"
+      crud.options.tableType="vxe-table"
+    >
+      <div slot="header">
+        <crud-search
+          ref="search"
+          :options="crud.searchOptions"
+          @submit="handleSearch"
+        />
+        <crud-toolbar
+          :search.sync="crud.searchOptions.show"
+          :compact.sync="crud.pageOptions.compact"
+          :columns="crud.columns"
+          @refresh="doRefresh()"
+          @columns-filter-changed="handleColumnsFilterChanged"
+        />
+      </div>
+    </d2-crud-x>
+  </d2-container>
+</template>
+
+<script>
+import * as api from './api'
+import { crudOptions } from './crud'
+import { d2CrudPlus } from 'd2-crud-plus'
+
+export default {
+  name: 'operationLog',
+
+  mixins: [d2CrudPlus.crud],
+  data () {
+    return {}
+  },
+  methods: {
+    getCrudOptions () {
+      return crudOptions(this)
+    },
+    pageRequest (query) {
+      return api.GetList(query)
+    }
+  }
+}
+</script>