增加其他分屏功能

.electron-vue/webpack.renderer.config.js

@@ -33,7 +33,14 @@ let rendererConfig = {
     rules: [
       {
         test: /\.less$/,
-        use: ['vue-style-loader', 'css-loader', 'less-loader']
+        use: ['vue-style-loader', 'css-loader', 'less-loader',
+          {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: path.resolve(__dirname,'../src/renderer/assets/less/common.less'),//改路径为存放less全局变量的路径
+            }
+          }
+        ]
       },
       {
         test: /\.css$/,

package.json

@@ -86,6 +86,7 @@
     "mini-css-extract-plugin": "0.4.0",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
+    "sass-resources-loader": "^2.0.1",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
     "vue-html-loader": "^1.2.4",

src/renderer/assets/less/admin.less

@@ -104,6 +104,20 @@
           grid-template-rows: repeat(2,50%);
         }
 
+        /*9分屏*/
+        .split_screen_nine {
+          display: grid;
+          grid-template-columns: repeat(3,33.3333%);
+          grid-template-rows: repeat(3,33.3333%);
+        }
+
+        /*16分屏*/
+        .split_screen_sixteen {
+          display: grid;
+          grid-template-columns: repeat(4,25%);
+          grid-template-rows: repeat(4,25%);
+        }
+
         /*控制按钮*/
         .control_btns {
           width: 100%;

src/renderer/assets/less/common.less

@@ -0,0 +1 @@
+/*全局共用变量*/

src/renderer/assets/less/login.less

@@ -1,40 +1,64 @@
 /*登录界面样式*/
+@BorderStr: #FFFFFF;
+@ForegroundStr:#D6D6D6;
+@BTNForegroundStr:#000000;
+@BrackgroupStr:#03A9F4;
+@FontSize:16px;
+@ValidatType:1;
+@EnityName:Login;
+@ID:cb3c80b1-f1e4-459d-88ae-e2979666b5e3;
+@Name:V1--Login0;
+@Left:294px;
+@Top:194px;
+@Width:411px;
+@Height:266px;
+@ZIndex:20100;
+@WindowID:b7872c9a-45ec-46c6-a388-f8d364a9f2d7;
+
 
 .login {
   width: 100%;
   height: 980px;
-  background-image: url('../images/bg.jpg');
+  background-color: @BrackgroupStr;
   background-size: 100% 100%;
+  position: relative;
+  //background-image: url('../../assets/images/bg.jpg');
 
   .login-header {
     display: flex;
     align-items: center;
     height: 80px;
     background-color: rgba(21, 20, 13, 0.5);
-    img {
-      width: 40px;
-      height: 40px;
-      margin: 0 15px 0 50px;
-    }
     h1 {
-      font-size: 30px;
+      font-size: @FontSize;
       color: white;
+      margin-left:20px;
     }
   }
 
   .login-content {
-    width: 400px;
-    height: 300px;
-    background-color: #fff;
-    margin: 50px auto;
+    width: @Width;
+    height: @Height;
+    background-color: @ForegroundStr;
+    border: 1px solid @BorderStr;
+    position: absolute;
+    left:@Left;
+    top:@Top;
+    z-index: @ZIndex;
+    /*margin: 50px auto;
     padding: 20px 40px;
-    border-radius: 2px;
+    border-radius: 2px;*/
     h2 {
       text-align: center;
-      font-size: 30px;
+      font-size: @FontSize;
       font-weight:bold;
       margin-bottom: 20px;
     }
+
+    .el-input {
+      width:90%;
+    }
+
     .login-form {
       .login-form-button {
         width: 100%;

src/renderer/components/Admin.vue

@@ -28,7 +28,7 @@
                 </div>
                 <div class="bigscreen_control">
                     <draggable
-                            :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : 'split_screen_four']"
+                            :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                             element="div"
                             v-model="signalList"
                             :options="dragOptions2"
@@ -39,16 +39,8 @@
                         <div v-for="(item,key) in signalList" :key="key" class="item">
                             {{item.name}}
                         </div>
-
-                        <!--<div class="item">PC1</div>
-                        <div class="item">PC2</div>
-                        <div class="item">PC3</div>
-                        <div class="item">PC4</div>-->
                     </draggable>
 
-                    <!--<div class="split_screen">
-                    </div>-->
-
                     <div class="control_btns">
                         <!--分屏按钮-->
                         <div class="split_btns">
@@ -87,15 +79,6 @@
                             </div>
                         </div>
                     </draggable>
-
-                        <!--<div class="signal_item" v-for="(item,index) in deviceList" :key="index">
-                            <div class="signal_item_bg">
-                                <div class="signal_item_bg_body">
-                                    <div class="signal_item_bg_body_space"></div>
-                                    <div class="signal_item_bg_body_font">{{item.name}}</div>
-                                </div>
-                            </div>
-                        </div>-->
                 </div>
             </div>
             <div class="footmenu">

src/renderer/components/Login.vue

@@ -24,8 +24,7 @@
 </template>
 
 <script>
-    // import '../assets/less/login.less'
-    import loginjson from '../assets/data/EnityLogin'
+    import '../assets/less/login.less'
 
     export default {
         data() {
@@ -82,7 +81,7 @@
 
 <style lang="less">
 
-    .login {
+    /*.login {
         width: 100%;
         height: 980px;
         background-image: url('../assets/images/bg.jpg');
@@ -124,5 +123,5 @@
                 }
             }
         }
-    }
+    }*/
 </style>