整理代码

src/assets/css/element_ui.css

@@ -1,396 +1,3 @@
-/* 重置下拉框样式 */
-.el-form {
-  margin-left: 20px;
-}
-
-.el-form .el-form-item {
-  margin-bottom: 0px;
-}
-
-
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
-  background-color: #515354;
-}
-
-.el-select-dropdown {
-  background-color: #2D3744;
-  border: 1px solid #535557;
-}
-
-.el-select-dropdown__item {
-  color: #fff;
-  border-bottom: 1px solid #535557;
-}
-
-.el-select-dropdown__item:last-child {
-  border-bottom: none;
-}
-
-.el-popper[x-placement^="bottom"] {
-  margin-top: 0px;
-}
-
-.el-popper[x-placement^="bottom"] .popper__arrow::after {
-  border-bottom-color: #19446E;
-}
-
-/* 重置种植动态搜索区域 */
-.el-form {
-  height: 30px;
-}
-
-.el-form .el-form-item__content {
-  line-height: 30px;
-}
-
-
-
-
-.el-input-group>.el-input__inner {
-  position: relative;
-  /*width: 220px;*/
-  height: 40px;
-  font-size: 14px;
-  padding: 0px 6px;
-  background-color: transparent;
-  color: #ffffff;
-  border: 1px solid #333;
-  border-radius: 4px;
-}
-
-.el-select .el-input__inner {
-  cursor: pointer;
-  padding-right: 35px;
-  width: 100%;
-  height: 30px;
-  font-size: 14px;
-  padding: 0px 6px;
-  /*background-color: #041841;*/
-  /*color: #92CCFA;*/
-  /*border: 1px solid #19446E;*/
-}
-
-.el-select .el-input__inner:focus {
-  border-color: #19446E !important;
-}
-
-.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-  background: #2a2a2a;
-}
-
-.el-button--text {
-  color: #bbc2d0;
-}
-
-.el-select-dropdown__item.selected {
-  color: #fff;
-  font-weight: 700;
-}
-
-.el-input__suffix .el-input__suffix-inner {
-  display: flex;
-  align-items: center;
-}
-
-.el-select:hover .el-input__inner {
-  border-color: #19446E;
-}
-
-/*.el-select-dropdown__item {*/
-/*  color: #92CCFA;*/
-/*}*/
-
-/*.el-icon-arrow-up:before {*/
-/*  color: #92CCFA;*/
-/*}*/
-
-.el-popper[x-placement^=bottom] .popper__arrow {
-  display: none;
-}
-
-.el-popper[x-placement^="bottom"] {
-  margin-top: 3px;
-}
-
-.el-input-group__append {
-  background: #1b222c;
-  color: #a9b1bc;
-  border: 1px solid #333;
-}
-
-.el-button {
-  height: 30px;
-  padding: 0px 10px;
-}
-
-/* 重置列表翻页按钮 */
-.el-pagination.is-background .btn-prev,
-.el-pagination.is-background .btn-next {
-  background-color: transparent;
-  width: 35px;
-  height: 20px;
-  color: #00ccff;
-  border: 1px solid #00ccff;
-  border-radius: 4px;
-}
-
-.el-pagination.is-background .btn-prev:active,
-.el-pagination.is-background .btn-prev:hover,
-.el-pagination.is-background .btn-next:active,
-.el-pagination.is-background .btn-next:hover {
-  background-color: #00ccff;
-  color: #fff;
-}
-
-/* 表格公共样式 */
-.el-table--mini th {
-  padding: 1px 0;
-}
-
-.el-table__fixed-right::before, .el-table__fixed::before {
-  height:0;
-}
-
-.el-table {
-  color: #bbc2d0 !important;
-  font-size: 14px !important;
-  background: rgb(42, 42, 42);
-  border-color: rgb(51, 51, 51);
-}
-
-.el-table__body-wrapper::-webkit-scrollbar {
-  width: 3px;
-  height: 4px;
-}
-
-.el-table__body-wrapper::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  width: 3px;
-  height: 4px;
-  background: #09f;
-  border-radius: 2px;
-}
-
-
-.el-table__body-wrapper::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  height: 4px;
-  background: rgb(5, 9, 24);
-}
-
-
-.el-table thead {
-  color: #bbc2d0;
-}
-.el-table th.el-table__cell {
-  background: #333;
-}
-.el-pagination__total {
-  color: #a9a9aa;
-}
-.el-pager li{
-    background: transparent;
-    color: #a9a9aa;
-}
-.el-pagination .btn-next, .el-pagination .btn-prev {
-  background: center center no-repeat transparent;
-}
-.el-pagination button:disabled {
-  background: transparent;
-}
-
-.el-table td,
-.el-table th.is-leaf {
-  border: #333;
-}
-
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid #333;
-}
-
-.el-table th,
-.el-table tr {
-  background: rgba(27, 34, 44, 1);
-}
-
-.el-table--mini td,
-.el-table--mini th {
-  padding: 1px 0;
-}
-
-.el-table__body tr.current-row>td {
-  background-color: #082030;
-}
-
-.el-table--enable-row-hover .el-table__body tr:hover>td {
-  background-color: #082030;
-}
-
-.el-table::before {
-  height: 1px;
-}
-
-.el-table--border::after,
-.el-table--group::after,
-.el-table::before {
-  background-color: #09131a;
-}
-
-.el-table .line-row {
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0) !important;
-  background-size: 100% 100%;
-}
-
-.el-table .dark-row {
-  background-color: rgba(0, 0, 0, 0) !important;
-}
-
-.el-table__fixed {
-  background-color: #0f1027;
-  height: 103%!important;
-}
-
-/* 走马灯公共样式 */
-
-.swiper-container-horizontal>.slider-pagination-bullets {
-  bottom: 0px !important;
-  left: 0;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+.el-pagination {
   text-align: right;
 }
-
-.swiper-container-horizontal .slider-pagination-bullet-active {
-  background: #fff !important;
-}
-
-.swiper-container-horizontal .slider-pagination-bullet {
-  background: #BEBEBE !important;
-}
-
-/* 日期选择公共样式 */
-.el-input--mini .el-input__icon {
-  line-height: 25px;
-}
-
-.el-input__icon {
-  width: 12px;
-}
-
-.el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
-.el-input--suffix .el-input__inner {
-  padding-right: 5px;
-}
-
-cur-select {
-  background: #ccc;
-}
-
-/*.el-date-editor.el-input,*/
-/*.el-date-editor.el-input__inner {*/
-/*  width: 90px;*/
-/*}*/
-
-.el-date-editor .el-range-input {
-  background: transparent;
-  color: #fff;
-}
-
-.el-picker-panel {
-  color: #fff;
-  /*border: 1px solid #09f;*/
-  background: #2d3744;
-  margin: 5px 0;
-}
-
-.el-form-item__label {
-  color: #bbc2d0;
-}
-
-.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
-  background: #747272;
-}
-
-.el-input--mini .el-input__inner {
-  height: 25px;
-  line-height: 25px;
-}
-
-.el-input__icon {
-  line-height: 25px;
-}
-
-.el-input__inner {
-  /*background-color: #060042;*/
-  /*border: 1px solid #09f;*/
-  color: #fff;
-}
-
-.el-input__inner:hover {
-  border-color: white;
-}
-
-.el-radio-button__inner {
-  background-color: rgba(255, 255, 255, 0);
-  border: 1px solid #fff;
-  color: #fff;
-  border-radius: 0 8px 8px 0;
-  padding: 9px 12px;
-}
-
-/* progress进度条样式重置 */
-.el-progress {
-  width: 80%;
-
-}
-
-.el-progress-bar__outer {
-  background-color: transparent;
-}
-
-.el-progress__text {
-  color: #09f;
-}
-
-/* .el-progress-bar__inner {
-  background-image: linear-gradient(to right, #0001fe, #0093fc);
-} */
-
-/* .progress1 .el-progress-bar__inner {
-  background-image: linear-gradient(to right, #eb5a48, #bd4bdc);
-}
-
-.progress2 .el-progress-bar__inner {
-  background-image: linear-gradient(to right, #f9bd01, #ff6962);
-}
-
-.progress3 .el-progress-bar__inner {
-  background-image: linear-gradient(to right, #00fb6a, #009dfa);
-} */
-.datePickerLight {
-  color: #606266 !important;
-  border: 1px solid #E4E7ED !important;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1) !important;
-  background: #FFF !important;
-}
-.el-dropdown-menu {
-  width: 300px !important;
-  background-color: rgb(2, 4, 50) !important;
-  border: 1px solid rgb(2, 4, 50) !important;
-}
-.el-dropdown-menu__item:focus,
-.el-dropdown-menu__item:not(.is-disabled):hover {
-  background-color: rgb(12, 24, 94) !important;
-  color: #66b1ff;
-}
-.el-dropdown-menu__item {
-  color: #fff !important;
-}
-.el-tabs__item {
-  color: #bbc2d0
-}

src/pages/index/components/berth_list.vue

@@ -10,7 +10,7 @@
         </el-form-item>
         </el-form>
         <br>
-        <el-table :data="tableData" style="background: #F0FFFF;border-color: #333;">
+        <el-table :data="tableData">
           <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>
         </el-table>

src/pages/index/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import ElementUI from "element-ui"
 import "element-ui/lib/theme-chalk/index.css"
 import "../../assets/css/global.css"
+import "../../assets/css/element_ui.css"
 import mixins from '../../mixins'
 import index from './index.vue'
 import router from "../../router/index"