diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..73c4a95
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,5 @@
+NODE_ENV='development'
+#   请求域名前缀
+VUE_APP_URL='https://swsz.api.js-dyyj.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist_dev'
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..8808c55
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,5 @@
+NODE_ENV='production'
+#   请求域名前缀
+VUE_APP_URL='https://api.sutenong.com'
+#   打包后输出目录
+VUE_APP_OUTPUTDIR='dist'
\ No newline at end of file
diff --git a/src/libs/axios.js b/src/libs/axios.js
index 728d487..d7fc7af 100644
--- a/src/libs/axios.js
+++ b/src/libs/axios.js
@@ -17,7 +17,7 @@ http.interceptors.request.use((config) => {
     config.baseURL = process.env.VUE_APP_URL;
   }
   
-  const token = store.state.user.userInfo.token;
+  const token = store.state.user?.userInfo?.token || '';
   config.headers['token'] = token
   config.headers['Content-Type'] = 'application/json;charset=UTF-8';
   
@@ -84,7 +84,7 @@ http.interceptors.response.use(response => {
 });
 
 // 请求方法挂载
-Vue.prototype.get = (params, url, loading = true) => {
+Vue.prototype.get = (params, url, loading = false) => {
   return new Promise((resolve, reject) => {
     http.get(url, { 
       params,
@@ -99,7 +99,7 @@ Vue.prototype.get = (params, url, loading = true) => {
   })
 }
 
-Vue.prototype.post = (data, url, loading = true) => {
+Vue.prototype.post = (data, url, loading = false) => {
   return new Promise((resolve, reject) => {
     http.post(url, data, {
       loading // 传递加载状态参数
diff --git a/src/libs/utils.js b/src/libs/utils.js
index aa1e801..ae8c394 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -75,53 +75,8 @@ export default {
 					return 'https://changshu.js-dyyj.com' + img;
 				}
 			},
-			// 跳回小程序
-			gotoDetailMini(item) {
-				console.log(item)
-				if(item.link_type == 1) {
-					// 外部小程序
-					let data = {
-						type: 'xcx',
-						url: item.ext_link
-					}
-					uni.navigateTo({
-						url: '/subPackages/h5Web/h5Web?data=' + JSON.stringify(data)
-					})
-					return
-				}else if(item.link_type == 2){
-					// 外部H5
-					// window.location.href = item.ext_link
-					window.location.href = 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?type=ticket&platform=changshu&id=' + item.id
-					return
-				}
-				// switch (item.genre){
-				// 	// 景点
-				// 	case 'ticket':
-				// 		uni.navigateTo({
-				// 			url: '/subPackages/ticketBooking/detail?id=' + item.id
-				// 		})
-				// 		break;
-				// 	// 酒店
-				// 	case 'hotel':
-				// 		uni.navigateTo({
-				// 			url: '/subPackages/hotelHomestay/detail?id=' + item.id
-				// 		})
-				// 		break;
-				// 	// 美食
-				// 	case 'food':
-				// 		uni.navigateTo({
-				// 			url: '/subPackages/food/foodDetail?id=' + item.id
-				// 		})
-				// 		break;
-				// 	// 攻略
-				// 	case 'article':
-				// 		uni.navigateTo({
-				// 			url: '/subPackages/travelGuide/detail?id=' + item.id
-				// 		})
-				// 		break;
-				// 	default:
-				// 		break;
-				// }
+			gotoPath(path) {
+				this.$router.push(path)
 			}
 		}
 	}
diff --git a/src/router/index.js b/src/router/index.js
index c44c2da..5d4c31f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -179,24 +179,24 @@ const router = new Router({
     //   },
     //   component: () => import('@/views/OrderDetail.vue')
     // },
-    // {
-    //   path: '/login',
-    //   name: 'Login',
-    //   meta: {
-    //     title: '登录 - 精品商城',
-    //     keepAlive: false
-    //   },
-    //   component: () => import('@/views/Login.vue')
-    // },
-    // {
-    //   path: '/register',
-    //   name: 'Register',
-    //   meta: {
-    //     title: '注册 - 精品商城',
-    //     keepAlive: false
-    //   },
-    //   component: () => import('@/views/Register.vue')
-    // },
+    {
+      path: '/login',
+      name: 'Login',
+      meta: {
+        title: '登录 - 精品商城',
+        keepAlive: false
+      },
+      component: () => import('@/views/Login.vue')
+    },
+    {
+      path: '/register',
+      name: 'Register',
+      meta: {
+        title: '注册 - 精品商城',
+        keepAlive: false
+      },
+      component: () => import('@/views/Register.vue')
+    },
     // {
     //   path: '*',
     //   name: 'NotFound',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d0d2430..906682c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="home-page">
     <!-- 轮播图 -->
-    <el-carousel 
-      height="500px" 
+    <el-carousel
+      height="500px"
       indicator-position="outside"
       class="home-carousel"
     >
       <el-carousel-item v-for="item in 4" :key="item">
-        <img 
-          v-lazy="`https://picsum.photos/1200/500?random=${item}`" 
-          alt="轮播图片" 
+        <img
+          v-lazy="`https://picsum.photos/1200/500?random=${item}`"
+          alt="轮播图片"
           class="carousel-img"
-        >
+        />
       </el-carousel-item>
     </el-carousel>
-    
+
     <!-- 分类导航 -->
     <div class="category-nav">
       <h2 class="section-title">商品分类</h2>
       <div class="category-list">
-        <div 
-          v-for="category in categories" 
-          :key="category.id" 
+        <div
+          v-for="category in categories"
+          :key="category.id"
           class="category-item"
           @click="$router.push(`/category/${category.id}`)"
         >
@@ -30,37 +30,41 @@
         </div>
       </div>
     </div>
-    
+
     <!-- 热门商品 -->
     <div class="hot-products">
       <div class="section-header">
         <h2 class="section-title">热门商品</h2>
-        <a href="#" class="more-link">查看更多 <i class="el-icon-arrow-right"></i></a>
+        <a href="#" class="more-link"
+          >查看更多 <i class="el-icon-arrow-right"></i
+        ></a>
       </div>
-      
+
       <ProductList :products="hotProducts" />
     </div>
-    
+
     <!-- 新品上市 -->
     <div class="new-products">
       <div class="section-header">
         <h2 class="section-title">新品上市</h2>
-        <a href="#" class="more-link">查看更多 <i class="el-icon-arrow-right"></i></a>
+        <a href="#" class="more-link"
+          >查看更多 <i class="el-icon-arrow-right"></i
+        ></a>
       </div>
-      
+
       <ProductList :products="newProducts" />
     </div>
-    
+
     <!-- 促销活动 -->
     <div class="promotion-section">
       <h2 class="section-title">限时促销</h2>
       <div class="promotion-container">
         <div class="promotion-item">
-          <img 
-            v-lazy="`https://picsum.photos/600/300?random=10`" 
-            alt="促销活动图片" 
+          <img
+            v-lazy="`https://picsum.photos/600/300?random=10`"
+            alt="促销活动图片"
             class="promotion-img"
-          >
+          />
           <div class="promotion-info">
             <h3>夏季大促</h3>
             <p>全场商品低至5折</p>
@@ -68,11 +72,11 @@
           </div>
         </div>
         <div class="promotion-item">
-          <img 
-            v-lazy="`https://picsum.photos/600/300?random=11`" 
-            alt="促销活动图片" 
+          <img
+            v-lazy="`https://picsum.photos/600/300?random=11`"
+            alt="促销活动图片"
             class="promotion-img"
-          >
+          />
           <div class="promotion-info">
             <h3>新品首发</h3>
             <p>限量发售，先到先得</p>
@@ -85,13 +89,13 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
-import ProductList from '../components/product/ProductList'
+import { mapGetters, mapActions } from "vuex";
+import ProductList from "../components/product/ProductList";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
-    ProductList
+    ProductList,
   },
   data() {
     return {
@@ -99,152 +103,148 @@ export default {
       hotProducts: [
         {
           id: 1,
-          name: '超薄笔记本电脑',
+          name: "超薄笔记本电脑",
           price: 5999,
           originalPrice: 6999,
-          image: 'https://picsum.photos/300/300?random=1',
+          image: "https://picsum.photos/300/300?random=1",
           sales: 1254,
-          categoryId: 1
+          categoryId: 1,
         },
         {
           id: 2,
-          name: '智能手表',
+          name: "智能手表",
           price: 1599,
           originalPrice: 1799,
-          image: 'https://picsum.photos/300/300?random=2',
+          image: "https://picsum.photos/300/300?random=2",
           sales: 856,
-          categoryId: 1
+          categoryId: 1,
         },
         {
           id: 3,
-          name: '纯棉T恤',
+          name: "纯棉T恤",
           price: 99,
           originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=3',
+          image: "https://picsum.photos/300/300?random=3",
           sales: 2356,
-          categoryId: 2
+          categoryId: 2,
         },
         {
           id: 4,
-          name: '休闲牛仔裤',
+          name: "休闲牛仔裤",
           price: 199,
           originalPrice: 399,
-          image: 'https://picsum.photos/300/300?random=4',
+          image: "https://picsum.photos/300/300?random=4",
           sales: 1890,
-          categoryId: 2
+          categoryId: 2,
         },
         {
           id: 5,
-          name: '舒适沙发',
+          name: "舒适沙发",
           price: 2999,
           originalPrice: 3999,
-          image: 'https://picsum.photos/300/300?random=5',
+          image: "https://picsum.photos/300/300?random=5",
           sales: 324,
-          categoryId: 3
+          categoryId: 3,
         },
         {
           id: 6,
-          name: '智能扫地机器人',
+          name: "智能扫地机器人",
           price: 1899,
           originalPrice: 2299,
-          image: 'https://picsum.photos/300/300?random=6',
+          image: "https://picsum.photos/300/300?random=6",
           sales: 754,
-          categoryId: 3
-        }
+          categoryId: 3,
+        },
       ],
       // 模拟新品数据
       newProducts: [
         {
           id: 7,
-          name: '高清投影仪',
+          name: "高清投影仪",
           price: 3299,
           originalPrice: 3699,
-          image: 'https://picsum.photos/300/300?random=7',
+          image: "https://picsum.photos/300/300?random=7",
           sales: 156,
-          categoryId: 1
+          categoryId: 1,
         },
         {
           id: 8,
-          name: '保湿面霜',
+          name: "保湿面霜",
           price: 299,
           originalPrice: 359,
-          image: 'https://picsum.photos/300/300?random=8',
+          image: "https://picsum.photos/300/300?random=8",
           sales: 423,
-          categoryId: 4
+          categoryId: 4,
         },
         {
           id: 9,
-          name: '有机水果礼盒',
+          name: "有机水果礼盒",
           price: 159,
           originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=9',
+          image: "https://picsum.photos/300/300?random=9",
           sales: 287,
-          categoryId: 5
+          categoryId: 5,
         },
         {
           id: 10,
-          name: '经典文学名著',
+          name: "经典文学名著",
           price: 129,
           originalPrice: 199,
-          image: 'https://picsum.photos/300/300?random=10',
+          image: "https://picsum.photos/300/300?random=10",
           sales: 342,
-          categoryId: 6
+          categoryId: 6,
         },
         {
           id: 11,
-          name: '无线蓝牙耳机',
+          name: "无线蓝牙耳机",
           price: 799,
           originalPrice: 999,
-          image: 'https://picsum.photos/300/300?random=11',
+          image: "https://picsum.photos/300/300?random=11",
           sales: 567,
-          categoryId: 1
+          categoryId: 1,
         },
         {
           id: 12,
-          name: '运动鞋',
+          name: "运动鞋",
           price: 499,
           originalPrice: 699,
-          image: 'https://picsum.photos/300/300?random=12',
+          image: "https://picsum.photos/300/300?random=12",
           sales: 432,
-          categoryId: 2
-        }
-      ]
-    }
+          categoryId: 2,
+        },
+      ],
+    };
   },
   computed: {
-    ...mapGetters([
-      'getCategories'
-    ]),
+    ...mapGetters(["getCategories"]),
     categories() {
-      return this.getCategories
-    }
+      return this.getCategories;
+    },
   },
   created() {
-    this.fetchCategories()
+    this.fetchCategories();
   },
   methods: {
-    ...mapActions([
-      'fetchCategories'
-    ])
-  }
-}
+    ...mapActions(["fetchCategories"]),
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .home-page {
   .home-carousel {
     margin-bottom: 30px;
-    
+
     .carousel-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
-  
+
   .category-nav {
     margin-bottom: 40px;
-    
+
     .category-list {
       display: flex;
       justify-content: space-between;
@@ -252,7 +252,7 @@ export default {
       gap: 20px;
       margin-top: 20px;
     }
-    
+
     .category-item {
       flex: 1;
       min-width: 120px;
@@ -265,26 +265,26 @@ export default {
       border-radius: 8px;
       cursor: pointer;
       transition: all 0.3s ease;
-      
+
       &:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         border-color: #409eff;
       }
-      
+
       .category-icon {
         font-size: 36px;
         color: #409eff;
         margin-bottom: 15px;
       }
-      
+
       .category-name {
         font-size: 16px;
         font-weight: 500;
       }
     }
   }
-  
+
   .section-title {
     font-size: 24px;
     color: #333;
@@ -293,65 +293,66 @@ export default {
     display: inline-block;
     margin-bottom: 20px;
   }
-  
+
   .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
-    
+
     .more-link {
       color: #409eff;
       font-size: 14px;
       display: flex;
       align-items: center;
-      
+
       &:hover {
         text-decoration: underline;
       }
-      
+
       i {
         margin-left: 5px;
         font-size: 16px;
       }
     }
   }
-  
-  .hot-products, .new-products {
+
+  .hot-products,
+  .new-products {
     margin-bottom: 40px;
   }
-  
+
   .promotion-section {
     margin: 40px 0;
-    
+
     .promotion-container {
       display: flex;
       gap: 20px;
       margin-top: 20px;
-      
+
       @media (max-width: 768px) {
         flex-direction: column;
       }
     }
-    
+
     .promotion-item {
       flex: 1;
       position: relative;
       height: 300px;
       border-radius: 8px;
       overflow: hidden;
-      
+
       .promotion-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.5s ease;
-        
+
         &:hover {
           transform: scale(1.05);
         }
       }
-      
+
       .promotion-info {
         position: absolute;
         top: 0;
@@ -366,12 +367,12 @@ export default {
         justify-content: center;
         padding: 20px;
         text-align: center;
-        
+
         h3 {
           font-size: 24px;
           margin-bottom: 10px;
         }
-        
+
         p {
           font-size: 16px;
           margin-bottom: 20px;
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 91a086d..55f530a 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -30,6 +30,7 @@ export default {
   },
   data() {
     return {
+      topBanner: [],
       newProducts: [
         {
           id: 7,
@@ -74,6 +75,25 @@ export default {
       ],
     };
   },
+  created() {
+    this.getTopBanner();
+  },
+  methods: {
+    getTopBanner() {
+      // 头部banner
+      this.post(
+        {
+          type_id: 6,
+          position: 0,
+        },
+        "/api/adv/getAdv"
+      ).then((res) => {
+        if (res) {
+          this.topBanner = res.data;
+        }
+      });
+    },
+  },
 };
 </script>
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..1bb4003
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="login-page">
+    <!-- 背景图容器 -->
+    <div class="bg-container">
+      <img src="@/assets/logo.png" alt="login background" class="bg-img" />
+    </div>
+
+    <!-- 登录表单卡片 -->
+    <div class="form-card">
+      <!-- 切换登录方式 -->
+      <div class="tab-bar">
+        <div
+          class="tab-item"
+          :class="{ active: loginType === 'sms' }"
+          @click="loginType = 'sms'"
+        >
+          短信登录
+        </div>
+        <div
+          class="tab-item"
+          :class="{ active: loginType === 'password' }"
+          @click="loginType = 'password'"
+        >
+          密码登录
+        </div>
+      </div>
+
+      <!-- 表单内容 -->
+      <el-form
+        ref="loginForm"
+        :model="form"
+        :rules="rules"
+        label-width="0"
+        class="login-form"
+      >
+        <!-- 手机号输入（通用） -->
+        <el-form-item prop="phone">
+          <el-input
+            v-model="form.phone"
+            placeholder="请输入手机号码"
+            clearable
+            prefix-icon="el-icon-phone"
+          />
+        </el-form-item>
+
+        <!-- 短信验证码（短信登录时显示） -->
+        <el-form-item prop="code" v-if="loginType === 'sms'">
+          <el-input
+            v-model="form.code"
+            placeholder="请输入验证码"
+            clearable
+            style="width: 65%"
+            prefix-icon="el-icon-message"
+          />
+          <el-button
+            type="primary"
+            class="code-btn"
+            @click="handleGetCode"
+            :disabled="codeDisabled"
+          >
+            {{ codeText }}
+          </el-button>
+        </el-form-item>
+
+        <!-- 密码输入（密码登录时显示） -->
+        <el-form-item prop="password" v-if="loginType === 'password'">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+            clearable
+            prefix-icon="el-icon-lock"
+          />
+        </el-form-item>
+
+        <!-- 记住账号 -->
+        <el-form-item class="remember-item">
+          <el-checkbox v-model="rememberPhone" size="mini">
+            记住用户名/手机号码
+          </el-checkbox>
+        </el-form-item>
+
+        <!-- 登录按钮 -->
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="login-btn"
+            @click="handleLogin"
+            :loading="submitting"
+          >
+            立即登录
+          </el-button>
+        </el-form-item>
+
+        <!-- 注册引导 -->
+        <div class="register-guide">
+          首次使用？
+          <router-link
+            to="/Register"
+            class="register-link"
+            @click="goToRegister"
+          >
+            点击注册
+          </router-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      // 登录方式：sms-短信 / password-密码
+      loginType: "sms",
+      form: {
+        phone: "",
+        code: "",
+        password: "",
+      },
+      rules: {
+        phone: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            pattern: /^1\d{10}$/,
+            message: "手机号码格式错误",
+            trigger: "blur",
+          },
+        ],
+        code: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { pattern: /^\d{6}$/, message: "验证码为6位数字", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, message: "密码至少6位", trigger: "blur" },
+        ],
+      },
+      // 验证码逻辑
+      codeText: "获取验证码",
+      codeDisabled: false,
+      countdown: 60,
+
+      // 记住账号
+      rememberPhone: false,
+
+      // 加载状态
+      submitting: false,
+    };
+  },
+  mounted() {
+    // 读取记住的手机号（示例：从localStorage读取）
+    const rememberedPhone = localStorage.getItem("rememberedPhone");
+    if (rememberedPhone) {
+      this.form.phone = rememberedPhone;
+      this.rememberPhone = true;
+    }
+  },
+  methods: {
+    // 切换登录方式（演示用，实际可通过路由或状态管理实现）
+    switchLoginType(type) {
+      this.loginType = type;
+      this.resetForm();
+    },
+
+    // 重置表单
+    resetForm() {
+      this.form.code = "";
+      this.form.password = "";
+      this.$refs.loginForm.resetValidation();
+    },
+
+    // 获取短信验证码
+    handleGetCode() {
+      if (!this.form.phone) {
+        this.$message.warning("请先输入手机号码");
+        return;
+      }
+      // 模拟接口请求
+      this.codeDisabled = true;
+      this.codeText = `重新发送(${this.countdown}s)`;
+      const timer = setInterval(() => {
+        this.countdown--;
+        this.codeText = `重新发送(${this.countdown}s)`;
+        if (this.countdown <= 0) {
+          clearInterval(timer);
+          this.codeText = "获取验证码";
+          this.codeDisabled = false;
+          this.countdown = 60;
+        }
+      }, 1000);
+      // 实际项目替换为：
+      // axios.post('/api/sendSms', { phone: this.form.phone }).then(res => {})
+    },
+
+    // 登录提交
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.submitting = true;
+          // 模拟登录请求
+          setTimeout(() => {
+            this.$message.success("登录成功！");
+            this.submitting = false;
+            // 记住账号
+            if (this.rememberPhone) {
+              localStorage.setItem("rememberedPhone", this.form.phone);
+            } else {
+              localStorage.removeItem("rememberedPhone");
+            }
+            // 实际项目替换为：
+            // axios.post('/api/login', this.form).then(res => {
+            //   this.$router.push('/home')
+            // })
+          }, 1500);
+        }
+      });
+    },
+
+    // 前往注册页
+    goToRegister() {
+      this.$router.push("/register");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+
+  // 背景图容器
+  .bg-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+
+    .bg-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  // 登录表单卡片
+  .form-card {
+    position: absolute;
+    right: 8%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 360px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
+    z-index: 2;
+    padding: 30px 25px;
+
+    // 标签切换栏
+    .tab-bar {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 25px;
+
+      .tab-item {
+        width: 50%;
+        text-align: center;
+        padding: 10px 0;
+        color: #666;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+
+        &.active {
+          color: #1890ff;
+          border-bottom-color: #1890ff;
+        }
+      }
+    }
+
+    // 表单样式
+    .login-form {
+      .el-form-item {
+        margin-bottom: 20px;
+      }
+
+      .el-input {
+        height: 40px;
+        line-height: 40px;
+      }
+
+      // 验证码按钮
+      .code-btn {
+        padding: 0 15px;
+        height: 40px;
+      }
+
+      // 记住账号
+      .remember-item {
+        padding-left: 0;
+        margin-bottom: 10px;
+      }
+
+      // 登录按钮
+      .login-btn {
+        width: 100%;
+        background: #ff4d4f;
+        border: none;
+        &:hover {
+          background: #e03e40;
+        }
+      }
+
+      // 注册引导
+      .register-guide {
+        text-align: center;
+        margin-top: 15px;
+        color: #999;
+
+        .register-link {
+          color: #ff4d4f;
+          text-decoration: underline;
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  // 响应式适配
+  @media (max-width: 992px) {
+    .form-card {
+      right: 5%;
+      width: 320px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .form-card {
+      right: 50%;
+      transform: translate(50%, -50%);
+      width: 90%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
new file mode 100644
index 0000000..6415bf7
--- /dev/null
+++ b/src/views/Register.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="register-page">
+    <!-- 顶部Logo与电话 -->
+    <div class="header">
+      <div class="logo-area">
+        <img src="@/assets/logo.png" alt="logo" class="logo-img" />
+        <span class="domain">yunming.com</span>
+      </div>
+      <div class="hotline">400-123-4xxx</div>
+    </div>
+    
+    <!-- 注册表单主体 -->
+    <div class="form-container">
+      <h2 class="form-title">注册页</h2>
+      <el-form
+        ref="registerForm"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        class="register-form"
+      >
+        <!-- 手机号 -->
+        <el-form-item label="手机号码" prop="phone">
+          <el-input
+            v-model="form.phone"
+            placeholder="请输入手机号码"
+            clearable
+            prefix-icon="el-icon-phone"
+          />
+        </el-form-item>
+
+        <!-- 手机验证码 -->
+        <el-form-item label="手机验证码" prop="code">
+          <el-input
+            v-model="form.code"
+            placeholder="请输入验证码"
+            clearable
+            style="width: 60%"
+            prefix-icon="el-icon-message"
+          />
+          <el-button
+            type="success"
+            class="code-btn"
+            @click="handleGetCode"
+            :disabled="codeBtnDisabled"
+          >
+            {{ codeBtnText }}
+          </el-button>
+        </el-form-item>
+
+        <!-- 用户名 -->
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="账户唯一识别，可用来登录"
+            clearable
+            prefix-icon="el-icon-user"
+          />
+          <div class="form-tip">
+            请输入4-32位字符，只能包含英文字母、数字和下划线，不能为纯数字/不能为纯下划线
+          </div>
+        </el-form-item>
+
+        <!-- 设重密码 -->
+        <el-form-item label="设重密码" prop="password">
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请设置登录密码"
+            clearable
+            prefix-icon="el-icon-lock"
+            @input="handlePasswordInput"
+          />
+          <div class="form-tip">
+            请输入8-30位密码，密码必须同时包含字母和数字
+          </div>
+        </el-form-item>
+
+        <!-- 确认密码 -->
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            placeholder="请再次输入登录密码"
+            clearable
+            prefix-icon="el-icon-lock"
+          />
+          <div class="form-tip">请与上方填写的密码保持一致</div>
+        </el-form-item>
+
+        <!-- 协议勾选 -->
+        <el-form-item>
+          <el-checkbox v-model="agreement" class="agreement-checkbox">
+            我已阅读并同意
+            <a href="javascript:;" class="protocol-link">《用户注册协议》</a>
+            《<a href="javascript:;" class="protocol-link">隐私协议</a>》
+          </el-checkbox>
+        </el-form-item>
+
+        <!-- 注册按钮 -->
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="register-btn"
+            @click="handleRegister"
+            :disabled="!agreement || submitting"
+          >
+            {{ submitting ? "注册中..." : "立即注册" }}
+          </el-button>
+        </el-form-item>
+
+        <!-- 兜底提示 -->
+        <div class="bottom-tip" v-if="false">
+          如需注册供应商请点击
+          <a href="javascript:;" class="supplier-link">这里</a>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RegisterPage",
+  data() {
+    // 密码强度校验函数
+    const validatePassword = (rule, value, callback) => {
+      if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,30}$/.test(value)) {
+        callback(new Error("请输入8-30位密码，必须同时包含字母和数字"));
+      } else {
+        callback();
+      }
+    };
+
+    // 用户名校验函数
+    const validateUsername = (rule, value, callback) => {
+      if (!/^(?!_+$)(?!\d+$)[a-zA-Z0-9_]{4,32}$/.test(value)) {
+        callback(
+          new Error(
+            "请输入4-32位字符，只能包含字母、数字和下划线，不能为纯数字/纯下划线"
+          )
+        );
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      form: {
+        phone: "",
+        code: "",
+        username: "",
+        password: "",
+        confirmPassword: "",
+      },
+      rules: {
+        phone: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            pattern: /^1\d{10}$/,
+            message: "请输入正确的手机号码格式",
+            trigger: "blur",
+          },
+        ],
+        code: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          {
+            pattern: /^\d{6}$/,
+            message: "请输入6位数字验证码",
+            trigger: "blur",
+          },
+        ],
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { validator: validateUsername, trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { validator: validatePassword, trigger: "blur" },
+        ],
+        confirmPassword: [
+          { required: true, message: "请确认密码", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== this.form.password) {
+                callback(new Error("两次输入密码不一致"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+      agreement: false, // 协议勾选状态
+      codeBtnText: "获取验证码",
+      codeBtnDisabled: false,
+      submitting: false, // 注册按钮加载状态
+      countdown: 60, // 验证码倒计时
+    };
+  },
+  methods: {
+    // 获取验证码
+    handleGetCode() {
+      if (!this.form.phone) {
+        this.$message.warning("请先输入手机号码");
+        return;
+      }
+      // 模拟接口请求
+      this.codeBtnDisabled = true;
+      this.codeBtnText = `重新发送(${this.countdown}s)`;
+      const timer = setInterval(() => {
+        this.countdown--;
+        this.codeBtnText = `重新发送(${this.countdown}s)`;
+        if (this.countdown <= 0) {
+          clearInterval(timer);
+          this.codeBtnText = "获取验证码";
+          this.codeBtnDisabled = false;
+          this.countdown = 60;
+        }
+      }, 1000);
+      // 实际项目中可替换为：
+      // axios.post('/api/sendCode', { phone: this.form.phone }).then(res => {})
+    },
+
+    // 密码输入实时校验（可选）
+    handlePasswordInput() {
+      // 可在此实现密码强度实时反馈
+    },
+
+    // 注册提交
+    handleRegister() {
+      this.$refs.registerForm.validate((valid) => {
+        if (valid && this.agreement) {
+          this.submitting = true;
+          // 模拟注册请求
+          setTimeout(() => {
+            this.$message.success("注册成功！");
+            this.submitting = false;
+            // 实际项目中可替换为：
+            // axios.post('/api/register', this.form).then(res => {
+            //   this.$router.push('/login')
+            // })
+          }, 1500);
+        } else if (!this.agreement) {
+          this.$message.warning("请勾选用户协议");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.register-page {
+  min-height: 100vh;
+  background-color: #fff;
+  padding: 40px 20px;
+
+  // 顶部区域
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 40px;
+
+    .logo-area {
+      display: flex;
+      align-items: center;
+
+      .logo-img {
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      .domain {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+
+    .hotline {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  // 表单容器
+  .form-container {
+    max-width: 600px;
+    margin: 0 auto;
+
+    .form-title {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 30px;
+      color: #333;
+    }
+
+    // 表单项间距
+    .el-form-item {
+      margin-bottom: 20px;
+    }
+
+    // 验证码按钮
+    .code-btn {
+      margin-left: 10px;
+      padding: 0 20px;
+      height: 40px;
+    }
+
+    // 表单提示文本
+    .form-tip {
+      font-size: 12px;
+      color: #999;
+      margin-top: 4px;
+      line-height: 1.4;
+    }
+
+    // 协议勾选
+    .agreement-checkbox {
+      font-size: 12px;
+      color: #666;
+
+      .protocol-link {
+        color: #ff4d4f;
+        text-decoration: underline;
+        margin: 0 4px;
+      }
+    }
+
+    // 注册按钮
+    .register-btn {
+      width: 100%;
+      background-color: #c00;
+      border: none;
+      &:hover {
+        background-color: #a00;
+      }
+    }
+
+    // 兜底提示
+    .bottom-tip {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 12px;
+      color: #666;
+
+      .supplier-link {
+        color: #ff4d4f;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file