diff --git a/vue/gold-system/src/assets/background.jpg b/vue/gold-system/src/assets/background.jpg
new file mode 100644
index 0000000..8135c88
Binary files /dev/null and b/vue/gold-system/src/assets/background.jpg differ
diff --git a/vue/gold-system/src/views/login.vue b/vue/gold-system/src/views/login.vue
index ce97256..51f2ac1 100644
--- a/vue/gold-system/src/views/login.vue
+++ b/vue/gold-system/src/views/login.vue
@@ -1,13 +1,46 @@
-<script setup></script>
+<script setup>
+import { ref, onMounted, reactive, computed } from "vue";
+const form = ref({ name: "", password: "" });
+</script>
 <template>
-  <div class="background">
-    洪锡林大帅哥 董浩霖大帅哥 黄岐镇大帅哥 张鲁平大帅哥 吕丽娅大美女
-  </div>
+  <el-row class="login-page">
+    <el-image :span="12" class="bg" src="@/assets/background.jpg"></el-image>
+    <el-col :span="6" :offset="3" class="form">
+      <el-card style="max-width: 1000px" class="box">
+        <template #header>用户登录</template>
+        <el-form :model="form" label-width="auto" style="max-width: 600px">
+          <el-form-item label="用户名">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input v-model="form.password" type="password" />
+          </el-form-item>
+          <el-button type="primary">登录</el-button>
+        </el-form>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 <style scoped>
+.bg {
+  background: url("@/assets/background.jpg") no-repeat 60% center / 240px auto;
+  border-radius: 0 20px 20px 0;
+  height: 100vh;
+}
 .background {
-  color: #fff;
+  color: #fffdfd;
   text-align: center;
   font-size: 24px;
+  background-color: #08193d;
 }
+/* .box {
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+} */
 </style>