commit

04.系统编码/Frontend/.idea/workspace.xml

@@ -21,10 +21,15 @@
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="nodejs_package_manager_path" value="npm" />
-    <property name="settings.editor.selected.configurable" value="vcs.Git" />
+    <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
     <property name="ts.external.directory.path" value="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\node_modules\typescript\lib" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\public\images" />
+    </key>
+  </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="默认任务">
@@ -39,7 +44,8 @@
       <workItem from="1638178911648" duration="1742000" />
       <workItem from="1638188568745" duration="5341000" />
       <workItem from="1638233761575" duration="1033000" />
-      <workItem from="1638235051409" duration="42000" />
+      <workItem from="1638235051409" duration="129000" />
+      <workItem from="1638235200843" duration="11502000" />
     </task>
     <servers />
   </component>

04.系统编码/Frontend/src/components/Login.vue

@@ -1,42 +1,54 @@
 <template>
   <div class="box">
-
-
-
       <div class="loginInput">
         <div class="litterSemicircle"><img src="/images/logo.png"/> </div>
-
         <div class="importInput">
-          <div>
             <h1>南京生态环境评估决策平台</h1>
-          <el-input v-model="input4" placeholder="请输入账户" class="input">
+            <el-input placeholder="请输入账户" type="text" class="input" v-model="inputName">
               <template #prefix>
-              <el-icon class="el-input__icon"><search /></el-icon>
+                <el-icon ><img src="/images/pen.png"></el-icon>
               </template>
             </el-input>
+          <el-input  placeholder="请输入登录密码" type="password" v-model="inputPassword"  class="input" >
+            <template #prefix>
+              <el-icon><img src="/images/lock.png"></el-icon>
+            </template>
+          </el-input>
+          <el-button type="primary" class="btn" @click="onLoginClick">登录</el-button>
         </div>
       </div>
-
-
-
-   </div>
-
-
     </div>
 </template>
 
 <script lang="ts">
+import {reactive, toRefs} from "vue";
+import { ElMessageBox, ElMessage } from 'element-plus'
 export default {
   name: 'Login',
   setup() {
-    return {}
+    let option = reactive({
+      inputName: null,
+      inputPassword: null,
+      centerDialogVisible:false
+    })
+
+    const onLoginClick = () => {
+      if(option.inputName==null || option.inputPassword==null){
+        ElMessageBox.alert('请完善信息', '提示', {
+          confirmButtonText: '确认',
+        })
       }
     }
-</script>
-<style lang="less" scoped>
-  .box {
 
+    return {
+      ...toRefs(option),
+      onLoginClick
+    }
+  }
+}
+</script>
 
+<style lang="less" scoped>
     .loginInput {
       width: 651px;
       height: 689px;
@@ -60,7 +72,6 @@ export default {
         justify-content: center;
         left: 50%;
         transform: translate(-50%, -50%);
-
       }
 
       .importInput {
@@ -71,10 +82,13 @@ export default {
         opacity: 1;
         border-radius: 10px;
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
+        align-content: flex-start;
 
         h1 {
           width: 393px;
+          height: 40px;
           font-size: 30px;
           font-family: Microsoft YaHei;
           font-weight: bold;
@@ -83,20 +97,53 @@ export default {
           text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
           opacity: 1;
           margin-top: 120px;
+          margin-bottom: 52px;
+          padding-left: 12px;
         }
+
+        :deep(.input) {
+          width: 496px;
+          height: 69px;
+          background: #FFFFFF;
+          border: 1px solid #BCBCBC;
+          opacity: 1;
+          margin-bottom: 71px;
+
+          .el-input__inner{
+            height: 100% !important;
+            position: relative;
+            border: none;
+            font-size: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 24px;
+            color: #999999;
+            padding-left: 54px;
+          }
+
         }
 
+          img {
+            width: 18px;
+            height: 17.92px;
+            position: absolute;
+            top: -7px;
+          }
+      }
+      }
       img {
         width: 157.33px;
         height: 157.15px;
         margin-top: 35px;
       }
-
+    .btn{
-    }
+        width: 496px;
+        height: 69px;
+        background: #498DF0;
+        opacity: 1;
+        color: #FFFFFF;
+        border: none;
+        font-size: 22px;
+        margin-bottom: 127px;
       }
-
-
-
-
-
   </style>