修改右侧操作按钮及样式

assets/css/custom.less

 //定义变量
 // @import './themes/deepBlank.less';
-@import './themes/green.less';
-//  @import './themes/default.less';
+// @import './themes/green.less';
+ @import './themes/default.less';

assets/css/iview-reset.less

@@ -421,7 +421,13 @@
 }
 //左侧搜索框
 .search{
+  .ivu-input{ 
+    border-radius: 4px;
+    border: 1px solid #182C51 ;
+  }
   .ivu-input-icon{
+    height: 36px;
+    line-height: 36px;
     background: @search-icon !important;
     color: @font_search !important;
     border-radius: 0px 4px 4px 0px;

assets/css/themes/deepBlank.less

@@ -97,6 +97,7 @@
 @padding_input_border:#222341;
 @search_icon_bg: #106FFE;
 @table_checkbox_bg: #106FFE;
+
 @table_checkbox_bd:#FFFFFF;
 @table_checkbox_bd_header:#FFFFFF;
 @table_line_shadow:none;
@@ -120,6 +121,7 @@
 @table-body-bg:#2F2F57;
 @table-body-bd:transparent;
 @table_check_bd:1px solid #ffffff;
+@table_check_body_bd:1px solid #ffffff;
 @table-body-bg_even:rgba(34, 35, 65, 0.41);
 @table-body-bd_odd:transparent;
 @checkbox-inner:transparent;
@@ -138,7 +140,10 @@
 @table_line:#106FFE;//不能改变高显行
 @table-bottom_line:transparent;
 @table-bottom-border:#ffffff;
-// @border-right_line:transparent;
+@action-buttons_col:#106FFE;
+@add_col:#ffffff;
+@buttons_bg:rgba(47, 47, 87, 0.6);
+@add_border-right:rgba(255, 255, 255, 0.06);
 //工单列表等背景色
 @part_body_backcolor:#2F2F57;
 //表格页面背景色处理

assets/css/themes/default.less

@@ -121,6 +121,7 @@
 @table-body-bg: #fff;
 @table-body-bd:none;
 @table_check_bd:transparent;
+@table_check_body_bd:1px solid #e8eaec;
 @table-body-bg_even:#f8f8f9;
 @table-body-bd_odd: 1px solid #e8eaec;
 @checkbox-inner:transparent;
@@ -139,7 +140,10 @@
 @table_line:#ebf7ff;
 @table-bottom_line:#dcdee2;
 @table-bottom-border:#ffffff;
-// @border-right_line:#dcdee2;
+@action-buttons_col:#515a6e;
+@buttons_bg:rgba(186, 232, 238, 0.06);
+@add_border-right:rgba(98, 97, 102, 0.06);
+@add_col:#5f6470;
 //工单列表等背景色
 @part_body_backcolor:#ffffff;
 //表格页面背景色处理

assets/css/themes/green.less

@@ -60,7 +60,7 @@
 @form-footer-color: #fff;
 @form-divider-boder-color: #e8eaec;
 @input-bg-color: #fff;
-@input-boder-color: #182C51;;
+@input-boder-color: rgba(24, 44, 81, 0.1);
 
 
 
@@ -120,6 +120,7 @@
 @table-header-color:#ffffff;
 @table-body-bg: #fff;
 @table_check_bd:1px solid #ffffff;
+@table_check_body_bd:1px solid #253D6D;
 @table-body-bd:transparent;
 @table-body-bg_even:rgba(4, 187, 140, 0.06);
 @table-body-bd_odd:transparent;
@@ -137,10 +138,12 @@
 @part_top_border:1px solid #ffffff;
 @table_border-bg:transparent;
 @table_line: #ffffff;
-
+@buttons_bg:rgba(255, 255, 255, 0.6);
 @table-bottom_line:transparent;
 @table-bottom-border:#ffffff;
-// @border-right_line:transparent;
+@action-buttons_col:#04BB8C;
+@add_border-right:rgba(24, 44, 81, 0.2);
+@add_col:#253D6D;
 //工单列表等背景色
 @part_body_backcolor:#ffffff;
 //表格页面背景色处理

pages/technology/index.vue

@@ -32,8 +32,7 @@
         </a>
     </div>
     <Content class="con" :class="!showMenu?'con_bord':''">
-        <theme ></theme>
-        <!-- <DataGrid :columns="columns" ref="grid" :action="action"  exportTitle="工艺规程" >
+        <DataGrid :columns="columns" ref="grid" :action="action"  exportTitle="工艺规程" >
             <template slot="easySearch">
                 <Form ref="formInline" :model="easySearch" inline>
                     <FormItem prop="keys">
@@ -61,7 +60,7 @@
                 </Dropdown>
                <Button @click="openModalIm" icon="icon iconfont icondaoru" class="search_text" type="text">导入</Button>
             </template>
-        </DataGrid> -->
+        </DataGrid>
          <Modal v-model="modal" :title="title" width="1120" footer-hide>
             <component :is="detail" :eid="curId" :uid="uId" :title="title" :headid="hid" @on-close="cancel" @on-ok="ok" />
         </Modal> 
@@ -124,7 +123,6 @@ export default {
         sendAudit,
         routingchangeorder,
         changelist,
-        theme
     },
     head: {
         title: "工艺规程",
@@ -133,14 +131,6 @@ export default {
     },
     data() {
         return {
-             formInline:{
-                value:''
-            },
-            ruleValidate: {
-                    value: [
-                        { required: true, message: '输入不能为空', trigger: 'blur' }
-                    ],
-            },
             showMenu: true,
             treeHeight: "",
             action: Api.index,

pages/theme/index.vue

@@ -43,23 +43,33 @@
     </Row>
     <Row>
       <Col span="24" class="table_style">
-        <Table
-          :border="false"
-          stripe
-          :columns="columns1"
-          :data="data1"
-          context-menu
-          show-context-menu
-          @on-contextmenu="handleContextMenu"
-        ></Table>
-        <template slot="contextMenu">
-          <DropdownItem
-            @click.native="handleContextMenuEdit"
-            style="backgorund: red"
-            >编辑</DropdownItem
+        <Table :border="false" stripe :columns="columns1" :data="data1">
+          <template
+            slot="action"
+            slot-scope="{ row, index }"
+            style="width: 100%; height: 100%"
           >
-          <DropdownItem style="color: #ed4014">删除</DropdownItem>
-        </template>
+            <a href="" class="action-buttons"
+              >• • •
+              <div class="buttons">
+                <a  class="add mr20">
+                  <Icon type="icon iconfont icongongdan-gongyichakan" />
+                  查看</a>    
+                <a  class="add mr20">
+                  <Icon type="icon iconfont iconbianji" />
+                  编辑</a>
+                 <a  class="add mr20">
+                  <Icon type="icon iconfont iconshanchu" />
+                  删除</a
+                >
+                 <!-- <a  class="add mr20">
+                  <Icon type="icon iconfont iconshanchu" />
+                  分解</a
+                > -->
+              </div>
+            </a>
+          </template>
+        </Table>
       </Col>
     </Row>
     <Row>
@@ -206,26 +216,7 @@ export default {
           key: "action",
           minWidth: 100,
           align: "center",
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "div",
-                {
-                  style: {
-                    marginRight: "5px",
-                    color: " #106FFE",
-                    fontSize: "18px",
-                  },
-                  on: {
-                    click: () => {
-                      this.show(params.index);
-                    },
-                  },
-                },
-                "•   •   •"
-              ),
-            ]);
-          },
+          slot: "action",
         },
       ],
       data1: [
@@ -290,16 +281,7 @@ export default {
     };
   },
   props: [],
-  methods: {
-    handleContextMenu(row) {
-      const index = this.data1.findIndex((item) => item.name === row.name);
-      console.log(index);
-      this.contextLine = index + 1;
-    },
-    handleContextMenuEdit() {
-      this.$Message.info("Click edit of line" + this.contextLine);
-    },
-  },
+  methods: {},
 };
 </script>
 <style lang="less" >
@@ -317,9 +299,10 @@ export default {
     line-height: 36px;
     height: 36px;
     border-radius: 4px 0px 0px 4px;
-    border: 1px solid @padding_input_border;
+    border: 1px solid @padding_input_border !important;
   }
-  .search_icon { //修改的搜索框样式
+  .search_icon {
+    //修改的搜索框样式
     width: 36px;
     height: 34px;
     background: @search_icon_bg;
@@ -356,7 +339,11 @@ export default {
     .ivu-icon {
       color: @search_text_span !important;
     }
+    .ivu-dropdown-rel .zhanshi {
+        font-size: 22px;
+      }
     .ivu-select-dropdown {
+      
       background-color: #222341 !important;
       .ivu-dropdown-item {
         color: #ffffff !important;
@@ -392,7 +379,8 @@ export default {
       color: @table-color !important;
       font-weight: 400;
       font-size: 14px;
-      th,td {
+      th,
+      td {
         //表格内checkbox
         .ivu-checkbox-inner {
           background: @checkbox-inner;
@@ -404,6 +392,38 @@ export default {
           border: @table_check_bd;
           background: @table_checkbox_bg !important;
         }
+        .ivu-table-cell {
+          overflow: visible;
+          .action-buttons {
+            color: @action-buttons_col;
+            position: relative;
+            height: 60px;
+            .buttons {
+              position: absolute;
+              display: none;
+              right: -58px;
+              top: -22px;
+              width: -webkit-max-content; // 兼容
+              width: -moz-max-content; // 兼容
+              width: max-content;
+              height: 60px; 
+              background:@buttons_bg ;
+              z-index: 9;
+              .add {       
+                font-weight: bold;
+                line-height:60px;
+                color:@add_col ;        
+                font-size: 16px;                          
+                height: 18px;
+                padding:0 17px;
+                border-right: 1px solid @add_border-right;
+              }
+            }
+          }
+          .action-buttons:hover .buttons {
+            display: block;
+          }
+        }
       }
       .ivu-table-header {
         border: 1px solid @table-header-bg;
@@ -435,13 +455,15 @@ export default {
             border-right: 1px solid @table-tr-bd;
             border-left: 1px solid @table-tr-bd;
             border-bottom: 1px solid @table-body-bg;
+            //选中状态
+            .ivu-checkbox-checked .ivu-checkbox-inner {
+              border: @table_check_body_bd;
+            }
             span {
               color: @table_body_allcol;
             }
-            .ivu-table-cell {
-              span {
-                color: @table_body_allcol;
-              }
+            .ivu-table-cell span {
+              color: @table_body_allcol;
             }
           }
         }

pages/theme/test.vue

+<template>
+<div>
+<h2>hello,routers!</h2>
+<nuxt-link to="/theme/test/ok">ok</nuxt-link>
+<nuxt-link to="/theme/test">index</nuxt-link>
+<hr/>
+<nuxt-child keep-alive></nuxt-child>
+</div>
+</template>
+<script>
+export default {
+    layout: "empty",
+}
+</script>
\ No newline at end of file

pages/theme/test/index.vue

+<template>
+<h2>33333-----hello,routers!</h2>
+</template>
\ No newline at end of file

pages/theme/test/ok.vue

+<template>
+<div>
+<h2>Ok,luoying!</h2>
+</div>
+</template>
+<script>
+export default {
+    layout: "empty",
+}
+</script>
\ No newline at end of file