dj

src/views/Home.vue

@@ -1,16 +1,9 @@
 <template>
   <div style="background: #F4F8FF">
     <el-container>
-      <el-header
-        style="height:50px; line-height: 40px"
-        class="principalheader"
-      >
+      <el-header style="height:50px; line-height: 40px" class="principalheader">
         <div class="navs">
-          <img
-            src="@/assets/images/logo2.png"
-            alt=""
-            style="width: 24px; height: 24px"
-          />
+          <img src="@/assets/images/logo2.png" alt="" style="width: 24px; height: 24px" />
           <div class="maintitle">神豚体检管理系统</div>
 
           <!--动态生成菜单 add by pengj 'text-align: center;width:' + (window.pageWidth - 280) + 'px;display:flex;'-->
@@ -30,11 +23,7 @@
           </div>
           <!--  -->
           <div class="btn">
-            <img
-              src="@/assets/images/me.png"
-              alt=""
-              class="currentuser"
-            />
+            <img src="@/assets/images/me.png" alt="" class="currentuser" />
             <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
             <el-dropdown>
               <span class="el-dropdown-link" style="color:#222531;font-weight: 700;">
@@ -47,54 +36,28 @@
                 {{ user }} <i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="logout"
-                  >退出登录</el-dropdown-item
-                >
-                <el-dropdown-item @click.native="editpassword"
-                  >修改密码</el-dropdown-item
-                >
-                <el-dropdown-item @click.native="toggleDevTools"
-                  >调试工具</el-dropdown-item
-                >
+                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
+                <el-dropdown-item @click.native="editpassword">修改密码</el-dropdown-item>
+                <el-dropdown-item @click.native="toggleDevTools">调试工具</el-dropdown-item>
+                <el-dropdown-item @click.native="windowMin">最小化</el-dropdown-item>
+                <el-dropdown-item @click.native="windowMax">最大化</el-dropdown-item>
+                <el-dropdown-item @click.native="windowClose">关闭</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
         </div>
       </el-header>
       <!-- 修改密码弹框 -->
-      <el-dialog
-        title="修改密码"
-        :visible.sync="dialogVisible"
-        width="30%"
-        :close-on-click-modal="false"
-      >
-        <el-form
-          :model="form"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-        >
+      <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
+        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
           <el-form-item label="旧密码" prop="oldPassWord">
-            <el-input
-              v-model="form.oldPassWord"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+            <el-input v-model="form.oldPassWord" autocomplete="new-password" show-password></el-input>
           </el-form-item>
           <el-form-item label="新密码" prop="newPassWord">
-            <el-input
-              v-model="form.newPassWord"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+            <el-input v-model="form.newPassWord" autocomplete="new-password" show-password></el-input>
           </el-form-item>
           <el-form-item label="确认密码" prop="newPassWord">
-            <el-input
-              v-model="confirmpassword"
-              type="password"
-              autocomplete="new-password"
-              show-password
-            ></el-input>
+            <el-input v-model="confirmpassword" type="password" autocomplete="new-password" show-password></el-input>
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
@@ -438,18 +401,44 @@ export default {
       }
       this.$peisAPI.toggleDevTools();
     },
+    // 最小化
+    windowMin() {
+      if (!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return
+      }
+      this.$peisAPI.windowMin();
+    },
+    // 最大化
+    windowMax() {
+      if (!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return
+      }
+      this.$peisAPI.windowMax();
+    },
+    windowClose() {
+      if (!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return
+      }
+      this.$peisAPI.windowClose();
+    },
+
   },
   components: { router },
 };
 </script>
 <style scoped>
 @import '../assets/css/global_card.css';
+
 :deep .el-dropdown-menu__item {
   color: #52555F;
   font-size: 14px;
   font-weight: 400;
   font-family: "NotoSansSC-Regular";
 }
+
 .dropdownmain:hover,
 .el-dropdown-menu__item:not(.is-disabled):hover {
   background-color: rgba(20, 96, 243, 0.1);
@@ -459,11 +448,13 @@ export default {
   font-size: 14px;
   font-family: "NotoSansSC-Bold";
 }
+
 .titleimg :hover {
   width: 30px;
   background-color: rgb(34, 149, 98);
   z-index: 99;
 }
+
 .el-dropdown-link:hover {
   /* background-color: rgb(202, 249, 203); */
   color: #396FFA;
@@ -473,16 +464,20 @@ export default {
   border-top-right-radius: 5px; */
   font-family: "NotoSansSC-Bold";
 }
+
 ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
   font-size: 16px;
 }
+
 .dropdowncolor {
   font-size: 12px;
 }
+
 .el-dropdown {
   color: rgb(140, 135, 134);
   font-size: 12px;
 }
+
 .currentuser {
   width: 32px;
   height: 32px;
@@ -493,6 +488,7 @@ export default {
   font-size: 18px;
   z-index: 99;
 }
+
 .registrationimgimges {
   width: 20px;
   height: 20px;
@@ -500,6 +496,7 @@ export default {
   left: -15px;
   top: 15px;
 }
+
 .commonsettingimg {
   width: 20px;
   height: 20px;
@@ -507,21 +504,25 @@ export default {
   left: -15px;
   top: 15px;
 }
+
 .chargeimg {
   position: absolute;
   left: -15px;
   top: 15px;
 }
+
 .basicimg {
   position: absolute;
   left: -17px;
   top: 15px;
 }
+
 .iconimg {
   position: absolute;
   left: 0px;
   top: 10px;
 }
+
 .el-dropdown-link {
   font-size: 14px;
   margin: 0;
@@ -529,6 +530,7 @@ export default {
   color: #52555F;
   font-family: "NotoSansSC-Regular";
 }
+
 .principalheader {
   background-color: #fff;
   opacity: 1;
@@ -580,11 +582,13 @@ export default {
   /* justify-content: space-between; */
   flex-flow: 1;
 }
+
 ::v-deep .el-card__body {
   /* height: 90vh; */
   height: 100%;
   overflow-y: auto;
 }
+
 .maintitle {
   width: 180px;
   font-size: 20px;
@@ -593,6 +597,7 @@ export default {
   margin-left: 10px;
   font-family: "NotoSansSC-Bold";
 }
+
 ::v-deep .el-dropdown-menu item:not(.is-disabled) {
   color: #fff;
 }
@@ -600,14 +605,17 @@ export default {
 .el-header {
   height: 40px;
 }
+
 ::v-deep .el-select-dropdown {
   background: #ccc;
 }
+
 .operateimg {
   position: relative;
   left: 0;
   top: 5px;
 }
+
 .el-aside {
   /* height: calc(100vh, -70px); */
   height: calc(100vh - 0px);
@@ -645,6 +653,7 @@ export default {
   font-weight: 700;
   color: #fff;
 }
+
 /* .actived {
   color: #396FFA!important;
   border-bottom: 4px solid #396FFA;
@@ -655,6 +664,7 @@ export default {
   font-weight: 700;
   font-family: "NotoSansSC-Bold";
 }
+
 .actived .el-dropdown-link:after {
   content: '';
   width: 100%;
@@ -664,6 +674,7 @@ export default {
   bottom: 4px;
   left: 0;
 }
+
 /* .project-dropdown{
   max-height:300px;
   overflow: auto;

src/views/login/Login.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="bg">
+    <div style="display: flex;justify-content: space-between;padding-top: 5px;">
+      <div></div>
+      <div style="display: flex;">
+        <i class="el-icon-minus" @click="btnMin" style="padding-right: 5px;"></i>
+        <i class="el-icon-copy-document" @click="btnMax" style="padding-right: 5px;"></i>
+        <i class="el-icon-close"  @click="btnClose" style="padding-right: 5px;"></i>
+      </div>      
+    </div>
     <div class="box">
       <div class="mainbody">
         <div class="title">
@@ -7,40 +15,29 @@
           <div>神豚体检管理系统</div>
         </div>
         <div class="userform">
-          <div style="color: #232748;font-size: 24px;font-weight: 700;margin-bottom: 20px;font-family: NotoSansSC-Bold;">登录账号</div>
-          <el-form
-            :model="form"
-            :rules="rules"
-            ref="form"
-            class="demo-ruleForm"
-          >
+          <div style="color: #232748;font-size: 24px;font-weight: 700;margin-bottom: 20px;font-family: NotoSansSC-Bold;">
+            登录账号</div>
+          <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
             <el-form-item label="" prop="Username" style="margin-bottom: 20px">
-              <div style="font-size:16px;font-weight: 400;color: #232748;    line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">用户名</div>
-              <el-input
-                class="inputcolor"
-                v-model="form.Username"
-                placeholder="请输入用户名"
-                prefix-icon="el-icon-s-custom"
-                style="color: #fff"
-                @keyup.native.enter="nextFocus('Username')"
-              ></el-input>
+              <div
+                style="font-size:16px;font-weight: 400;color: #232748;    line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">
+                用户名</div>
+              <el-input class="inputcolor" v-model="form.Username" placeholder="请输入用户名" prefix-icon="el-icon-s-custom"
+                style="color: #fff" @keyup.native.enter="nextFocus('Username')"></el-input>
             </el-form-item>
             <el-form-item label="" prop="Password" style="margin-bottom: 5px">
-              <div style="font-size:16px;font-weight: 400;color: #232748;line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">密码</div>
-              <el-input
-                v-model="form.Password"
-                placeholder="请输入密码"
-                type="password"
-                prefix-icon="el-icon-unlock"
-                @keyup.native.enter="nextFocus('Password')"
-                ref="password"
-              ></el-input>
+              <div
+                style="font-size:16px;font-weight: 400;color: #232748;line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">
+                密码</div>
+              <el-input v-model="form.Password" placeholder="请输入密码" type="password" prefix-icon="el-icon-unlock"
+                @keyup.native.enter="nextFocus('Password')" ref="password"></el-input>
             </el-form-item>
             <el-row>
               <el-col :span="12">
                 <el-form-item>
                   <el-checkbox></el-checkbox>
-                  <span style="    font-family: NotoSansSC-Regular;color: #232748;font-weight: 400;font-size: 14px;margin-left: 5px;">记住密码</span>
+                  <span
+                    style="    font-family: NotoSansSC-Regular;color: #232748;font-weight: 400;font-size: 14px;margin-left: 5px;">记住密码</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -94,6 +91,27 @@ export default {
     }
   },
   methods: {
+    btnMin(){
+      if(!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return       
+      }
+      this.$peisAPI.windowMin();
+    },
+    btnMax(){
+      if(!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return       
+      }
+      this.$peisAPI.windowMax();
+    },
+    btnClose(){
+      if(!this.$peisAPI) {
+        this.$message.info("此功能，需要在壳客户端才可运行！")
+        return       
+      }
+      this.$peisAPI.windowClose();
+    },
     nextFocus(e) {
       if (e == 'Username') {
         this.$refs['password'].focus()
@@ -185,12 +203,15 @@ export default {
   width: 100%;
   min-height: 100vh;
 }
+
 .el-form-item.is-error .el-input__inner {
   color: none;
 }
+
 .inputcolor {
   border: none;
 }
+
 .box {
   position: absolute;
   right: 140px;
@@ -202,6 +223,7 @@ export default {
   justify-content: center;
   align-items: center;
   flex-direction: column;
+
   .title {
     width: 443px;
     height: 107px;
@@ -209,16 +231,17 @@ export default {
     justify-content: center;
     align-items: center;
     margin-bottom: 10px;
+
     img {
       width: 45.86px;
       height: 45.86px;
     }
+
     div {
       font-size: 38px;
       margin-left: 15px;
       color: #232748;
-    font-weight: 600
-;
+      font-weight: 600;
     }
   }
 }
@@ -230,12 +253,14 @@ export default {
   border-radius: 12px;
   padding: 40px 32px;
 }
+
 // .btn :hover {
 //   // background-color: rgb(0, 183, 92);
 // }
 ::v-deep .el-input__icon {
   font-size: 18px;
 }
+
 .btn {
   background-color: #396FFA;
   ;
@@ -247,12 +272,15 @@ export default {
   height: 40px;
   width: 100%;
 }
+
 :deep .el-input--prefix .el-input__inner {
   padding-left: 30px;
 }
+
 :deep .el-form-item {
   margin-bottom: 22px;
 }
+
 :deep .el-button {
   color: #fff;
 }