样式

src/layout/components/Navbar.vue

@@ -7,15 +7,6 @@
     <div class="right-menu">
       <router-link v-if="routesType==='cluster' && menus.includes('cluster')" class="selectBtn" to="/clusterSelect">多集群管理</router-link>
       <!-- <a v-if="menus.includes('containerCost')" class="selectBtn" @click="toContainerCost">计量计费</a> -->
-      <!-- <el-dropdown>
-        <span class="el-dropdown-link">
-          换肤<i class="el-icon-arrow-down el-icon--right" />
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item @click.native="changeLight">浅色</el-dropdown-item>
-          <el-dropdown-item @click.native="changeDark">深色</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown> -->
       <!-- <a class="selectBtn" href="">
         <svg-icon icon-class="ziyuanguanli" />
         云际存储
@@ -36,6 +27,16 @@
         </el-tooltip> -->
 
       </template>
+      <!-- <el-dropdown class="right-menu-item hover-effect" trigger="click">
+        <div class="selectBtn avatar-wrapper">
+          换肤
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="changeLight">浅色</el-dropdown-item>
+          <el-dropdown-item @click.native="changeDark">深色</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown> -->
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="selectBtn avatar-wrapper">

src/styles/index.scss

@@ -353,6 +353,9 @@ span.title-tips {
       padding: 6px;
     }
   }
+  &:hover, &:focus {
+    background-color: var(--buttonInfoHoverBgC);
+  }
 }
 .el-pagination__jump, .el-pagination__total {
   color: var(--paginationColor);
@@ -670,8 +673,11 @@ span.default {
   background-color: var(--alertInfoBgC);
   color: var(--inputTextC);
 }
-
-
+.el-popover{
+  background: var(--elPopoverBgC);
+  border: 1px solid var(--elPopoverBoderC);
+  color: var(--elPopoverC);
+}
 
 
 

src/styles/variables.scss

@@ -52,6 +52,7 @@ $menuBg-jcceDark:inherit;
   --buttonDefaultColor: #666666; //el-button--default字体颜色
   --buttonDefaultBgColor: white; //el-button--default背景色
   --buttonDefaultBorderC: #DCDFE6; //el-button--default边框颜色
+  --buttonInfoHoverBgC: #e8f4ff; //el-button 鼠标浮上背景色
   --paginationColor: #606266; // el-pagination字体颜色
   --isLightBgColor: #F7F7F7; // el-alert背景颜色
   --isLightColor: #999999; // el-alert字体颜色
@@ -85,6 +86,9 @@ $menuBg-jcceDark:inherit;
   --stepProcessDoingC: #303133; // 步骤条进行中颜色
   --alertInfoBgC: #f4f4f5; // 弹出框info背景颜色
   --loginBgC: #f7f7f7; // 登录页背景颜色
+  --elPopoverBgC: #FFFFFF; // el-popover 背景颜色
+  --elPopoverBoderC: #e6ebf5; // el-popover 边框颜色
+  --elPopoverC: #606266; // el-popover 字体颜色
 
   --listDetailColor: #454B53; // 容器管理详情
 
@@ -126,6 +130,7 @@ $menuBg-jcceDark:inherit;
   --buttonDefaultColor: white; //el-button--default字体颜色
   --buttonDefaultBgColor:  rgba(255,255,255,0.1); //el-button--default背景色
   --buttonDefaultBorderC: rgba(255,255,255,0.01); //el-button--default边框颜色
+  --buttonInfoHoverBgC: rgba(0,0,0,0.09); //el-button 鼠标浮上背景色
   --paginationColor: #FFFFFF; // el-pagination字体颜色
   --isLightBgColor: rgba(247, 247, 247, 0.1); // el-alert背景颜色
   --isLightColor: #FFFFFF; // el-alert字体颜色
@@ -145,7 +150,7 @@ $menuBg-jcceDark:inherit;
   --loadingMaskColor: rgba(44, 58, 78, 0.7); // el-loading-mask 背景颜色
   --textareaInnerBgC: rgba(255,255,255,0.1); // el-textarea__inner 背景颜色
   --textareaInnerC: #FFFFFF; // el-textarea__inner 字体颜色
-  --selectDropdownBgC: rgba(44, 58, 78, 1); // 选择器背景颜色
+  --selectDropdownBgC: #2c3a4e; // 选择器背景颜色
   --selectDropdownC: #DDDDDD; // 选择器字体颜色
   --selectDropdownHoverBgC: rgba(255,255,255,0.1); // 选择器悬浮时背景颜色
   --inputInnerBgC: rgba(255, 255, 255, 0.1); // 输入框背景颜色
@@ -159,6 +164,9 @@ $menuBg-jcceDark:inherit;
   --stepProcessDoingC: #FFFFFF; // 步骤条进行中颜色
   --alertInfoBgC: rgba(255, 255, 255, 0.2); // 弹出框info背景颜色
   --loginBgC: #050f27; // 登录页背景颜色
+  --elPopoverBgC: #2C3A4E; // el-popover 背景颜色
+  --elPopoverBoderC: #2C3A4E; // el-popover 边框颜色
+  --elPopoverC: #FFFFFF; // el-popover 字体颜色
 
   --listDetailColor: #FFFFFF; // 容器管理详情
 

src/views/functionManagement/functionList.vue

@@ -17,7 +17,7 @@
               title="确认删除此函数么？"
               @onConfirm="deleteFunc(item.functionId)"
             >
-              <el-button slot="reference" size="small">删除</el-button>
+              <el-button slot="reference" style="margin-right:10px">删除</el-button>
             </el-popconfirm>
             <el-button
               type="primary"
@@ -87,7 +87,7 @@
     </el-dialog>
     <el-dialog :close-on-click-modal="false" :visible.sync="dialogExecuteVisible" title="函数详情">
       <div class="bg-gray">
-        <table class="el-table funcTable">
+        <table class="el-table funcTable table">
           <tr>
             <td>Function Name:</td>
             <td :colspan="3">{{ form.functionName }}</td>
@@ -147,14 +147,12 @@ import dedent from 'dedent'
 import { codemirror } from 'vue-codemirror'
 // language
 import 'codemirror/mode/python/python.js'
-
 import 'codemirror/lib/codemirror.css'
-
 // theme css
 import 'codemirror/theme/base16-light.css'
-
 // require active-line.js
 import 'codemirror/addon/selection/active-line.js'
+import variables from '@/styles/variables.js'
 
 // import pagination from '@/mixin/pagination';
 export default {
@@ -175,6 +173,7 @@ export default {
       percentage: 0,
       second: 0,
       cmOption: {
+        theme: variables[localStorage.getItem('jcceTheme')].codeMirrorTheme || 'default',
         autoCloseBrackets: true,
         tabSize: 4,
         styleActiveLine: true,
@@ -310,7 +309,7 @@ export default {
     background-color: #468EFC;
   }
   .el-card{
-    border: 1px solid #EEEEEE;
+    // border: 1px solid #EEEEEE;
     border-radius: 5px;
     margin-top:0;
     .btn-group{
@@ -366,18 +365,18 @@ export default {
     margin-bottom: 30px;
     border-spacing: 0;
     tr{
-      border-top: 1px solid #ebeef5;
+      border-top: 1px solid var(--tableTdBorderColor);
     }
     tr:last-child(){
-      border-bottom: 1px solid #ebeef5;
+      border-bottom: 1px solid var(--tableTdBorderColor);
     }
     td{
       width: 16.6%;
       padding-left:10px;
-      border-left: 1px solid #ebeef5;
+      border-left: 1px solid var(--tableTdBorderColor);
     }
     td:last-child(){
-      border-right: 1px solid #ebeef5;
+      border-right: 1px solid var(--tableTdBorderColor);
     }
   }
   .progress{

vue.config.js

@@ -60,8 +60,8 @@ module.exports = {
       },
       '^/jcc-': {
         ws: false,
-        // target: 'https://10.101.15.6/apis', /* 测试环境 */
-        target: 'https://jointcloud.net/apis', /* 演示环境 */
+        target: 'https://10.101.15.6/apis', /* 测试环境 */
+        // target: 'https://jointcloud.net/apis', /* 演示环境 */
         changeOrigin: true,
         secure: false
       },
@@ -73,14 +73,14 @@ module.exports = {
       // },
       '/monitoringscreen/': {
         ws: false,
-        // target: 'https://10.101.15.6/apis',
-        target: 'https://jointcloud.net/apis', /* 演示环境 */
+        target: 'https://10.101.15.6/apis',
+        // target: 'https://jointcloud.net/apis', /* 演示环境 */
         changeOrigin: true
       },
       '^/edgex': {
         ws: false,
-        // target: 'https://10.101.15.6/' /* 测试环境 */
-        target: 'https://jointcloud.net/prod-api/' /* 演示环境 */
+        target: 'https://10.101.15.6/' /* 测试环境 */
+        // target: 'https://jointcloud.net/prod-api/' /* 演示环境 */
       }
     }
     // before: require('./mock/mock-server.js')