diff --git a/src/main/java/xuan/controller/LiuYaoController.java b/src/main/java/xuan/controller/LiuYaoController.java
new file mode 100644
index 0000000..df64ad9
--- /dev/null
+++ b/src/main/java/xuan/controller/LiuYaoController.java
@@ -0,0 +1,219 @@
+package xuan.controller;
+
+import org.springframework.web.bind.annotation.*;
+import xuan.core.liuyao.LiuYao;
+import xuan.core.liuyao.settings.LiuYaoJiChuSetting;
+import xuan.core.liuyao.settings.LiuYaoShenShaSetting;
+
+import java.util.HashMap;
+import java.util.Map;
+
+@RestController
+@RequestMapping("/api/liuyao")
+public class LiuYaoController {
+
+    @PostMapping("/paipan")
+    public Map<String, Object> paiPan(@RequestBody LiuYaoRequest request) {
+        Map<String, Object> result = new HashMap<>();
+        try {
+            LiuYaoJiChuSetting setting = new LiuYaoJiChuSetting();
+            setting.setName(request.getName() != null ? request.getName() : "某人");
+            setting.setOccupy(request.getOccupy() != null ? request.getOccupy() : "某事");
+            setting.setSex(request.getSex() != null ? request.getSex() : 1);
+            setting.setDate(request.getDate() != null ? request.getDate() : "2024-01-01 00:00:00");
+            setting.setDateType(request.getDateType() != null ? request.getDateType() : 0);
+            setting.setLeapMonthType(request.getLeapMonthType() != null ? request.getLeapMonthType() : 0);
+            setting.setXuShiSuiType(request.getXuShiSuiType() != null ? request.getXuShiSuiType() : 0);
+            setting.setJieQiType(request.getJieQiType() != null ? request.getJieQiType() : 1);
+            setting.setYearGanZhiType(request.getYearGanZhiType() != null ? request.getYearGanZhiType() : 2);
+            setting.setMonthGanZhiType(request.getMonthGanZhiType() != null ? request.getMonthGanZhiType() : 1);
+            setting.setDayGanZhiType(request.getDayGanZhiType() != null ? request.getDayGanZhiType() : 0);
+            setting.setPaiPanType(request.getPaiPanType() != null ? request.getPaiPanType() : 0);
+            setting.setLiuYaoYaoXiang(request.getLiuYaoYaoXiang() != null ? request.getLiuYaoYaoXiang() : "——,——,——,——,——,——");
+
+            LiuYao liuYao = new LiuYao(setting);
+            liuYao.liuYaoShenShaSetting(new LiuYaoShenShaSetting());
+
+            result.put("success", true);
+            result.put("data", buildLiuYaoData(liuYao));
+        } catch (Exception e) {
+            result.put("success", false);
+            result.put("error", e.getMessage());
+        }
+        return result;
+    }
+
+    private Map<String, Object> buildLiuYaoData(LiuYao liuYao) {
+        Map<String, Object> data = new HashMap<>();
+        
+        data.put("name", liuYao.getName());
+        data.put("sex", liuYao.getSex());
+        data.put("age", liuYao.getAge());
+        data.put("solar", liuYao.getSolarStr2());
+        data.put("lunar", liuYao.getLunarStr2());
+        data.put("xingQi", liuYao.getXingQi());
+        data.put("jiJie", liuYao.getJiJie());
+        data.put("shengXiao", liuYao.getShengXiao());
+        data.put("xingZuo", liuYao.getXingZuo());
+        data.put("yueXiang", liuYao.getYueXiang());
+        data.put("yueJiang", liuYao.getYueJiang());
+        data.put("yueJiangShen", liuYao.getYueJiangShen());
+        data.put("wuBuYuShi", liuYao.getWuBuYuShi());
+        
+        data.put("yearGanZhi", liuYao.getYearGanZhi());
+        data.put("monthGanZhi", liuYao.getMonthGanZhi());
+        data.put("dayGanZhi", liuYao.getDayGanZhi());
+        data.put("hourGanZhi", liuYao.getHourGanZhi());
+        
+        data.put("shangGuaName", liuYao.getShangGuaName());
+        data.put("xiaGuaName", liuYao.getXiaGuaName());
+        data.put("benGuaName", liuYao.getBenGuaName());
+        data.put("bianGuaName", liuYao.getBianGuaName());
+        data.put("huGuaName", liuYao.getHuGuaName());
+        data.put("cuoGuaName", liuYao.getCuoGuaName());
+        data.put("zongGuaName", liuYao.getZongGuaName());
+        data.put("fuGuaName", liuYao.getFuGuaName());
+        
+        data.put("shangGuaAs", liuYao.getShangGuaAs());
+        data.put("xiaGuaAs", liuYao.getXiaGuaAs());
+        data.put("benGuaAs", liuYao.getBenGuaAs());
+        data.put("bianGuaAs", liuYao.getBianGuaAs());
+        data.put("huGuaAs", liuYao.getHuGuaAs());
+        data.put("cuoGuaAs", liuYao.getCuoGuaAs());
+        data.put("zongGuaAs", liuYao.getZongGuaAs());
+        data.put("fuGuaAs", liuYao.getFuGuaAs());
+        
+        data.put("benGuaType", liuYao.getBenGuaType());
+        data.put("bianGuaType", liuYao.getBianGuaType());
+        data.put("huGuaType", liuYao.getHuGuaType());
+        data.put("cuoGuaType", liuYao.getCuoGuaType());
+        data.put("zongGuaType", liuYao.getZongGuaType());
+        data.put("fuGuaType", liuYao.getFuGuaType());
+        
+        data.put("benGuaGuaShen", liuYao.getBenGuaGuaShen());
+        data.put("bianGuaGuaShen", liuYao.getBianGuaGuaShen());
+        data.put("huGuaGuaShen", liuYao.getHuGuaGuaShen());
+        data.put("cuoGuaGuaShen", liuYao.getCuoGuaGuaShen());
+        data.put("zongGuaGuaShen", liuYao.getZongGuaGuaShen());
+        data.put("fuGuaGuaShen", liuYao.getFuGuaGuaShen());
+        
+        data.put("benGuaGuaCi", liuYao.getBenGuaGuaCi());
+        data.put("bianGuaGuaCi", liuYao.getBianGuaGuaCi());
+        data.put("huGuaGuaCi", liuYao.getHuGuaGuaCi());
+        data.put("cuoGuaGuaCi", liuYao.getCuoGuaGuaCi());
+        data.put("zongGuaGuaCi", liuYao.getZongGuaGuaCi());
+        data.put("fuGuaGuaCi", liuYao.getFuGuaGuaCi());
+        
+        data.put("benGuaLiuYaoName", liuYao.getBenGuaLiuYaoName());
+        data.put("bianGuaLiuYaoName", liuYao.getBianGuaLiuYaoName());
+        data.put("huGuaLiuYaoName", liuYao.getHuGuaLiuYaoName());
+        data.put("cuoGuaLiuYaoName", liuYao.getCuoGuaLiuYaoName());
+        data.put("zongGuaLiuYaoName", liuYao.getZongGuaLiuYaoName());
+        data.put("fuGuaLiuYaoName", liuYao.getFuGuaLiuYaoName());
+        
+        data.put("benGuaLiuYaoAs", liuYao.getBenGuaLiuYaoAs());
+        data.put("bianGuaLiuYaoAs", liuYao.getBianGuaLiuYaoAs());
+        data.put("huGuaLiuYaoAs", liuYao.getHuGuaLiuYaoAs());
+        data.put("cuoGuaLiuYaoAs", liuYao.getCuoGuaLiuYaoAs());
+        data.put("zongGuaLiuYaoAs", liuYao.getZongGuaLiuYaoAs());
+        data.put("fuGuaLiuYaoAs", liuYao.getFuGuaLiuYaoAs());
+        
+        data.put("benGuaLiuYaoShiYing", liuYao.getBenGuaLiuYaoShiYing());
+        data.put("bianGuaLiuYaoShiYing", liuYao.getBianGuaLiuYaoShiYing());
+        data.put("huGuaLiuYaoShiYing", liuYao.getHuGuaLiuYaoShiYing());
+        data.put("cuoGuaLiuYaoShiYing", liuYao.getCuoGuaLiuYaoShiYing());
+        data.put("zongGuaLiuYaoShiYing", liuYao.getZongGuaLiuYaoShiYing());
+        data.put("fuGuaLiuYaoShiYing", liuYao.getFuGuaLiuYaoShiYing());
+        
+        data.put("benGuaLiuYaoLiuQin", liuYao.getBenGuaLiuYaoLiuQin());
+        data.put("bianGuaLiuYaoLiuQin", liuYao.getBianGuaLiuYaoLiuQin());
+        data.put("huGuaLiuYaoLiuQin", liuYao.getHuGuaLiuYaoLiuQin());
+        data.put("cuoGuaLiuYaoLiuQin", liuYao.getCuoGuaLiuYaoLiuQin());
+        data.put("zongGuaLiuYaoLiuQin", liuYao.getZongGuaLiuYaoLiuQin());
+        data.put("fuGuaLiuYaoLiuQin", liuYao.getFuGuaLiuYaoLiuQin());
+        
+        data.put("benGuaLiuYaoGanZhi", liuYao.getBenGuaLiuYaoGanZhi());
+        data.put("bianGuaLiuYaoGanZhi", liuYao.getBianGuaLiuYaoGanZhi());
+        data.put("huGuaLiuYaoGanZhi", liuYao.getHuGuaLiuYaoGanZhi());
+        data.put("cuoGuaLiuYaoGanZhi", liuYao.getCuoGuaLiuYaoGanZhi());
+        data.put("zongGuaLiuYaoGanZhi", liuYao.getZongGuaLiuYaoGanZhi());
+        data.put("fuGuaLiuYaoGanZhi", liuYao.getFuGuaLiuYaoGanZhi());
+        
+        data.put("benGuaLiuYaoWuXing", liuYao.getBenGuaLiuYaoWuXing());
+        data.put("bianGuaLiuYaoWuXing", liuYao.getBianGuaLiuYaoWuXing());
+        data.put("huGuaLiuYaoWuXing", liuYao.getHuGuaLiuYaoWuXing());
+        data.put("cuoGuaLiuYaoWuXing", liuYao.getCuoGuaLiuYaoWuXing());
+        data.put("zongGuaLiuYaoWuXing", liuYao.getZongGuaLiuYaoWuXing());
+        data.put("fuGuaLiuYaoWuXing", liuYao.getFuGuaLiuYaoWuXing());
+        
+        data.put("benGuaLiuYaoLiuShen", liuYao.getBenGuaLiuYaoLiuShen());
+        data.put("bianGuaLiuYaoLiuShen", liuYao.getBianGuaLiuYaoLiuShen());
+        data.put("huGuaLiuYaoLiuShen", liuYao.getHuGuaLiuYaoLiuShen());
+        data.put("cuoGuaLiuYaoLiuShen", liuYao.getCuoGuaLiuYaoLiuShen());
+        data.put("zongGuaLiuYaoLiuShen", liuYao.getZongGuaLiuYaoLiuShen());
+        data.put("fuGuaLiuYaoLiuShen", liuYao.getFuGuaLiuYaoLiuShen());
+        
+        data.put("benGuaLiuYaoYaoCi", liuYao.getBenGuaLiuYaoYaoCi());
+        data.put("bianGuaLiuYaoYaoCi", liuYao.getBianGuaLiuYaoYaoCi());
+        data.put("huGuaLiuYaoYaoCi", liuYao.getHuGuaLiuYaoYaoCi());
+        data.put("cuoGuaLiuYaoYaoCi", liuYao.getCuoGuaLiuYaoYaoCi());
+        data.put("zongGuaLiuYaoYaoCi", liuYao.getZongGuaLiuYaoYaoCi());
+        data.put("fuGuaLiuYaoYaoCi", liuYao.getFuGuaLiuYaoYaoCi());
+        
+        data.put("benGuaLiuYaoNaYin", liuYao.getBenGuaLiuYaoNaYin());
+        data.put("bianGuaLiuYaoNaYin", liuYao.getBianGuaLiuYaoNaYin());
+        data.put("huGuaLiuYaoNaYin", liuYao.getHuGuaLiuYaoNaYin());
+        data.put("cuoGuaLiuYaoNaYin", liuYao.getCuoGuaLiuYaoNaYin());
+        data.put("zongGuaLiuYaoNaYin", liuYao.getZongGuaLiuYaoNaYin());
+        data.put("fuGuaLiuYaoNaYin", liuYao.getFuGuaLiuYaoNaYin());
+        
+        data.put("fuGuaLiuYaoFuShen", liuYao.getFuGuaLiuYaoFuShen());
+        data.put("shenSha", liuYao.getShenSha());
+        
+        return data;
+    }
+
+    public static class LiuYaoRequest {
+        private String name;
+        private String occupy;
+        private Integer sex;
+        private String date;
+        private Integer dateType;
+        private Integer leapMonthType;
+        private Integer xuShiSuiType;
+        private Integer jieQiType;
+        private Integer yearGanZhiType;
+        private Integer monthGanZhiType;
+        private Integer dayGanZhiType;
+        private Integer paiPanType;
+        private String liuYaoYaoXiang;
+
+        public String getName() { return name; }
+        public void setName(String name) { this.name = name; }
+        public String getOccupy() { return occupy; }
+        public void setOccupy(String occupy) { this.occupy = occupy; }
+        public Integer getSex() { return sex; }
+        public void setSex(Integer sex) { this.sex = sex; }
+        public String getDate() { return date; }
+        public void setDate(String date) { this.date = date; }
+        public Integer getDateType() { return dateType; }
+        public void setDateType(Integer dateType) { this.dateType = dateType; }
+        public Integer getLeapMonthType() { return leapMonthType; }
+        public void setLeapMonthType(Integer leapMonthType) { this.leapMonthType = leapMonthType; }
+        public Integer getXuShiSuiType() { return xuShiSuiType; }
+        public void setXuShiSuiType(Integer xuShiSuiType) { this.xuShiSuiType = xuShiSuiType; }
+        public Integer getJieQiType() { return jieQiType; }
+        public void setJieQiType(Integer jieQiType) { this.jieQiType = jieQiType; }
+        public Integer getYearGanZhiType() { return yearGanZhiType; }
+        public void setYearGanZhiType(Integer yearGanZhiType) { this.yearGanZhiType = yearGanZhiType; }
+        public Integer getMonthGanZhiType() { return monthGanZhiType; }
+        public void setMonthGanZhiType(Integer monthGanZhiType) { this.monthGanZhiType = monthGanZhiType; }
+        public Integer getDayGanZhiType() { return dayGanZhiType; }
+        public void setDayGanZhiType(Integer dayGanZhiType) { this.dayGanZhiType = dayGanZhiType; }
+        public Integer getPaiPanType() { return paiPanType; }
+        public void setPaiPanType(Integer paiPanType) { this.paiPanType = paiPanType; }
+        public String getLiuYaoYaoXiang() { return liuYaoYaoXiang; }
+        public void setLiuYaoYaoXiang(String liuYaoYaoXiang) { this.liuYaoYaoXiang = liuYaoYaoXiang; }
+    }
+
+}
diff --git a/xuan-deduct-uniapp/src/pages/liuyao/liuyao.vue b/xuan-deduct-uniapp/src/pages/liuyao/liuyao.vue
index 587710d..487c580 100644
--- a/xuan-deduct-uniapp/src/pages/liuyao/liuyao.vue
+++ b/xuan-deduct-uniapp/src/pages/liuyao/liuyao.vue
@@ -1,17 +1,179 @@
 <template>
   <view class="container">
-    <view class="developing">
-      <text class="developing-icon">🔮</text>
-      <text class="developing-title">六爻排盘</text>
-      <text class="developing-desc">功能开发中，敬请期待...</text>
+    <view class="header-card">
+      <view class="header-icon">
+        <text class="icon-text">爻</text>
+      </view>
+      <text class="header-title">六爻排盘</text>
+      <text class="header-subtitle">易经占卜 · 预测吉凶</text>
+    </view>
+    
+    <view class="form-card">
+      <view class="form-section">
+        <view class="section-header">
+          <view class="section-dot"></view>
+          <text class="section-title">起卦信息</text>
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">姓名</text>
+          </view>
+          <input class="form-input" v-model="name" placeholder="请输入姓名" />
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">占事</text>
+          </view>
+          <input class="form-input" v-model="occupy" placeholder="请输入占问事项" />
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">起卦日期</text>
+          </view>
+          <picker mode="date" :value="solarDate" @change="onDateChange" class="form-picker">
+            <view class="picker-content">
+              <text class="picker-value">{{ solarDate }}</text>
+              <text class="picker-arrow">›</text>
+            </view>
+          </picker>
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">起卦时间</text>
+          </view>
+          <picker mode="time" :value="birthTime" @change="onTimeChange" class="form-picker">
+            <view class="picker-content">
+              <text class="picker-value">{{ birthTime }}</text>
+              <text class="picker-arrow">›</text>
+            </view>
+          </picker>
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">性别</text>
+          </view>
+          <view class="gender-group">
+            <view class="gender-item" :class="{ active: gender === '男' }" @click="gender = '男'">
+              <text class="gender-text">男</text>
+            </view>
+            <view class="gender-item" :class="{ active: gender === '女' }" @click="gender = '女'">
+              <text class="gender-text">女</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <view class="form-section" style="margin-top: 30rpx;">
+        <view class="section-header">
+          <view class="section-dot"></view>
+          <text class="section-title">起卦方式</text>
+        </view>
+        
+        <view class="form-item">
+          <view class="form-label-wrapper">
+            <text class="form-label">起卦方法</text>
+          </view>
+          <view class="gender-group">
+            <view class="gender-item" :class="{ active: paiPanType === 0 }" @click="paiPanType = 0">
+              <text class="gender-text">时间起卦</text>
+            </view>
+            <view class="gender-item" :class="{ active: paiPanType === 1 }" @click="paiPanType = 1">
+              <text class="gender-text">手动输入</text>
+            </view>
+          </view>
+        </view>
+        
+        <view v-if="paiPanType === 1" class="yao-input-section">
+          <text class="yao-input-title">请输入六爻（用逗号分隔）</text>
+          <text class="yao-input-desc">格式示例：—,—,--,--,--,—（阳爻用"—"，阴爻用"--"）</text>
+          <input class="yao-input" v-model="liuYaoYaoXiang" placeholder="—,—,--,--,--,—" />
+        </view>
+      </view>
+    </view>
+    
+    <view class="tips-card">
+      <text class="tips-title">起卦说明</text>
+      <text class="tips-content">六爻排盘通过起卦时间或手动输入卦象，推算本卦、变卦、互卦、错卦、综卦等信息，预测事物发展趋势。</text>
+    </view>
+    
+    <view class="btn-wrapper">
+      <button class="submit-btn" @click="calculate" :disabled="loading">
+        <text class="btn-text">{{ loading ? '排盘中...' : '开始排盘' }}</text>
+      </button>
     </view>
   </view>
 </template>
 
 <script>
+import api from '@/utils/api.js'
+
 export default {
   data() {
-    return {}
+    return {
+      name: '',
+      occupy: '',
+      solarDate: '2000-01-01',
+      birthTime: '12:00',
+      gender: '男',
+      paiPanType: 0,
+      liuYaoYaoXiang: '—,—,--,--,--,—',
+      loading: false
+    }
+  },
+  methods: {
+    onDateChange(e) {
+      this.solarDate = e.detail.value
+    },
+    onTimeChange(e) {
+      this.birthTime = e.detail.value
+    },
+    async calculate() {
+      if (this.loading) return
+      
+      this.loading = true
+      
+      uni.showLoading({
+        title: '排盘中...',
+        mask: true
+      })
+      
+      try {
+        const dateStr = this.solarDate + ' ' + this.birthTime + ':00'
+        
+        const result = await api.liuyaoApi.paiPan({
+          name: this.name || '某人',
+          occupy: this.occupy || '某事',
+          sex: this.gender === '男' ? 1 : 0,
+          date: dateStr,
+          dateType: 0,
+          paiPanType: this.paiPanType,
+          liuYaoYaoXiang: this.liuYaoYaoXiang
+        })
+        
+        getApp().globalData.liuyaoResult = result
+        
+        uni.hideLoading()
+        
+        uni.navigateTo({
+          url: '/pages/liuyao/result'
+        })
+      } catch (e) {
+        uni.hideLoading()
+        console.error('排盘错误:', e)
+        uni.showToast({
+          title: '排盘失败：' + (e.message || '未知错误'),
+          icon: 'none',
+          duration: 3000
+        })
+      } finally {
+        this.loading = false
+      }
+    }
   }
 }
 </script>
@@ -21,32 +183,235 @@ export default {
   padding: 20rpx;
   background-color: #f5f5f5;
   min-height: 100vh;
+}
+
+.header-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20rpx;
+  padding: 40rpx;
+  margin-bottom: 20rpx;
+  text-align: center;
+  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
+}
+
+.header-icon {
+  width: 80rpx;
+  height: 80rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto 20rpx;
 }
 
-.developing {
-  text-align: center;
-  padding: 60rpx;
-}
-
-.developing-icon {
-  font-size: 120rpx;
-  display: block;
-  margin-bottom: 40rpx;
-}
-
-.developing-title {
+.icon-text {
   font-size: 40rpx;
+  color: #fff;
   font-weight: bold;
-  color: #333;
+}
+
+.header-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
   display: block;
+  margin-bottom: 10rpx;
+}
+
+.header-subtitle {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.form-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.form-section {
   margin-bottom: 20rpx;
 }
 
-.developing-desc {
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.section-dot {
+  width: 8rpx;
+  height: 8rpx;
+  background: #667eea;
+  border-radius: 50%;
+  margin-right: 10rpx;
+}
+
+.section-title {
   font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.form-item {
+  margin-bottom: 25rpx;
+}
+
+.form-label-wrapper {
+  margin-bottom: 10rpx;
+}
+
+.form-label {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.form-input {
+  width: 100%;
+  height: 80rpx;
+  background: #f8f8f8;
+  border-radius: 10rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.form-picker {
+  width: 100%;
+}
+
+.picker-content {
+  width: 100%;
+  height: 80rpx;
+  background: #f8f8f8;
+  border-radius: 10rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.picker-value {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.picker-arrow {
+  font-size: 32rpx;
   color: #999;
 }
+
+.gender-group {
+  display: flex;
+  gap: 20rpx;
+}
+
+.gender-item {
+  flex: 1;
+  height: 80rpx;
+  background: #f8f8f8;
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.gender-item.active {
+  background: #667eea;
+}
+
+.gender-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.gender-item.active .gender-text {
+  color: #fff;
+}
+
+.yao-input-section {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background: #f8f8f8;
+  border-radius: 10rpx;
+}
+
+.yao-input-title {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.yao-input-desc {
+  font-size: 22rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 15rpx;
+}
+
+.yao-input {
+  width: 100%;
+  height: 80rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.tips-card {
+  background: #fff5e6;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  border-left: 6rpx solid #ffa500;
+}
+
+.tips-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #ff8c00;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.tips-content {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.btn-wrapper {
+  padding: 20rpx 0;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 90rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 45rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
+}
+
+.submit-btn[disabled] {
+  opacity: 0.6;
+}
+
+.btn-text {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: bold;
+}
 </style>
diff --git a/xuan-deduct-uniapp/src/pages/liuyao/result.vue b/xuan-deduct-uniapp/src/pages/liuyao/result.vue
new file mode 100644
index 0000000..daff536
--- /dev/null
+++ b/xuan-deduct-uniapp/src/pages/liuyao/result.vue
@@ -0,0 +1,496 @@
+<template>
+  <view class="container">
+    <view class="header-card">
+      <view class="header-row">
+        <view class="header-icon">
+          <text class="icon-text">爻</text>
+        </view>
+        <view class="header-info">
+          <text class="header-title">{{ result.name || '六爻卦象' }}</text>
+          <text class="header-subtitle">{{ result.benGuaName }} · {{ result.benGuaType }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="info-card">
+      <view class="info-row">
+        <view class="info-item">
+          <text class="info-label">公历</text>
+          <text class="info-value">{{ result.solar || '-' }}</text>
+        </view>
+        <view class="info-divider"></view>
+        <view class="info-item">
+          <text class="info-label">农历</text>
+          <text class="info-value">{{ result.lunar || '-' }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="gua-card">
+      <view class="card-header">
+        <view class="card-dot"></view>
+        <text class="card-title">卦象总览</text>
+      </view>
+      
+      <view class="gua-overview">
+        <view class="gua-item">
+          <text class="gua-label">本卦</text>
+          <text class="gua-symbol">{{ result.benGuaAs }}</text>
+          <text class="gua-name">{{ result.benGuaName }}</text>
+        </view>
+        <view class="gua-arrow">→</view>
+        <view class="gua-item">
+          <text class="gua-label">变卦</text>
+          <text class="gua-symbol">{{ result.bianGuaAs }}</text>
+          <text class="gua-name">{{ result.bianGuaName }}</text>
+        </view>
+      </view>
+      
+      <view class="gua-grid">
+        <view class="gua-grid-item">
+          <text class="grid-label">互卦</text>
+          <text class="grid-value">{{ result.huGuaName }} {{ result.huGuaAs }}</text>
+        </view>
+        <view class="gua-grid-item">
+          <text class="grid-label">错卦</text>
+          <text class="grid-value">{{ result.cuoGuaName }} {{ result.cuoGuaAs }}</text>
+        </view>
+        <view class="gua-grid-item">
+          <text class="grid-label">综卦</text>
+          <text class="grid-value">{{ result.zongGuaName }} {{ result.zongGuaAs }}</text>
+        </view>
+        <view class="gua-grid-item">
+          <text class="grid-label">伏卦</text>
+          <text class="grid-value">{{ result.fuGuaName }} {{ result.fuGuaAs }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="liuyao-card">
+      <view class="card-header">
+        <view class="card-dot cyan"></view>
+        <text class="card-title">六爻详盘</text>
+      </view>
+      
+      <view class="liuyao-table">
+        <view class="liuyao-row liuyao-header">
+          <view class="liuyao-cell header-cell">爻位</view>
+          <view class="liuyao-cell header-cell">六神</view>
+          <view class="liuyao-cell header-cell">世应</view>
+          <view class="liuyao-cell header-cell">卦象</view>
+          <view class="liuyao-cell header-cell">六亲</view>
+          <view class="liuyao-cell header-cell">干支</view>
+          <view class="liuyao-cell header-cell">五行</view>
+          <view class="liuyao-cell header-cell">纳音</view>
+        </view>
+        
+        <view v-for="(yao, index) in liuYaoData" :key="index" class="liuyao-row">
+          <view class="liuyao-cell label-cell">{{ yao.name }}</view>
+          <view class="liuyao-cell">{{ yao.liuShen }}</view>
+          <view class="liuyao-cell">{{ yao.shiYing }}</view>
+          <view class="liuyao-cell yao-cell">{{ yao.yaoXiang }}</view>
+          <view class="liuyao-cell">{{ yao.liuQin }}</view>
+          <view class="liuyao-cell">{{ yao.ganZhi }}</view>
+          <view class="liuyao-cell">{{ yao.wuXing }}</view>
+          <view class="liuyao-cell small-cell">{{ yao.naYin }}</view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="guaci-card">
+      <view class="card-header">
+        <view class="card-dot orange"></view>
+        <text class="card-title">卦辞爻辞</text>
+      </view>
+      
+      <view class="guaci-section">
+        <text class="guaci-title">本卦卦辞</text>
+        <text class="guaci-content">{{ result.benGuaGuaCi || '暂无' }}</text>
+      </view>
+      
+      <view class="guaci-section">
+        <text class="guaci-title">变卦卦辞</text>
+        <text class="guaci-content">{{ result.bianGuaGuaCi || '暂无' }}</text>
+      </view>
+      
+      <view class="yaoci-section">
+        <text class="yaoci-title">本卦爻辞</text>
+        <view v-for="(yaoCi, index) in result.benGuaLiuYaoYaoCi" :key="index" class="yaoci-item">
+          <text class="yaoci-name">{{ result.benGuaLiuYaoName[index] }}：</text>
+          <text class="yaoci-text">{{ yaoCi }}</text>
+        </view>
+      </view>
+    </view>
+    
+    <view class="extra-card">
+      <view class="card-header">
+        <view class="card-dot purple"></view>
+        <text class="card-title">其他信息</text>
+      </view>
+      
+      <view class="extra-grid">
+        <view class="extra-item">
+          <text class="extra-label">上卦</text>
+          <text class="extra-value">{{ result.shangGuaName }} {{ result.shangGuaAs }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">下卦</text>
+          <text class="extra-value">{{ result.xiaGuaName }} {{ result.xiaGuaAs }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">本卦卦身</text>
+          <text class="extra-value">{{ result.benGuaGuaShen || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">变卦卦身</text>
+          <text class="extra-value">{{ result.bianGuaGuaShen || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">月相</text>
+          <text class="extra-value">{{ result.yueXiang || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">月将</text>
+          <text class="extra-value">{{ result.yueJiang || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">月将神</text>
+          <text class="extra-value">{{ result.yueJiangShen || '-' }}</text>
+        </view>
+        <view class="extra-item">
+          <text class="extra-label">五不遇时</text>
+          <text class="extra-value">{{ result.wuBuYuShi ? '是' : '否' }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      result: {}
+    }
+  },
+  computed: {
+    liuYaoData() {
+      if (!this.result.benGuaLiuYaoName) return []
+      
+      const data = []
+      for (let i = 0; i < 6; i++) {
+        data.push({
+          name: this.result.benGuaLiuYaoName[i] || '-',
+          liuShen: this.result.benGuaLiuYaoLiuShen[i] || '-',
+          shiYing: this.result.benGuaLiuYaoShiYing[i] || '-',
+          yaoXiang: this.result.benGuaLiuYaoAs[i] || '-',
+          liuQin: this.result.benGuaLiuYaoLiuQin[i] || '-',
+          ganZhi: this.result.benGuaLiuYaoGanZhi[i] || '-',
+          wuXing: this.result.benGuaLiuYaoWuXing[i] || '-',
+          naYin: this.result.benGuaLiuYaoNaYin[i] || '-'
+        })
+      }
+      return data.reverse()
+    }
+  },
+  onLoad() {
+    this.result = getApp().globalData.liuyaoResult || {}
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  width: 70rpx;
+  height: 70rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+}
+
+.icon-text {
+  font-size: 36rpx;
+  color: #fff;
+  font-weight: bold;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.header-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.header-subtitle {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.info-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 25rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+}
+
+.info-item {
+  flex: 1;
+  text-align: center;
+}
+
+.info-label {
+  font-size: 24rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.info-value {
+  font-size: 26rpx;
+  color: #333;
+}
+
+.info-divider {
+  width: 1rpx;
+  height: 50rpx;
+  background: #eee;
+}
+
+.gua-card, .liuyao-card, .guaci-card, .extra-card {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 25rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.card-dot {
+  width: 8rpx;
+  height: 8rpx;
+  background: #667eea;
+  border-radius: 50%;
+  margin-right: 10rpx;
+}
+
+.card-dot.cyan {
+  background: #00bcd4;
+}
+
+.card-dot.orange {
+  background: #ff9800;
+}
+
+.card-dot.purple {
+  background: #9c27b0;
+}
+
+.card-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.gua-overview {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 30rpx 0;
+  margin-bottom: 20rpx;
+}
+
+.gua-item {
+  text-align: center;
+}
+
+.gua-label {
+  font-size: 24rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.gua-symbol {
+  font-size: 60rpx;
+  color: #667eea;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.gua-name {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.gua-arrow {
+  font-size: 40rpx;
+  color: #999;
+}
+
+.gua-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15rpx;
+}
+
+.gua-grid-item {
+  background: #f8f8f8;
+  padding: 15rpx;
+  border-radius: 10rpx;
+}
+
+.grid-label {
+  font-size: 22rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 5rpx;
+}
+
+.grid-value {
+  font-size: 24rpx;
+  color: #333;
+}
+
+.liuyao-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.liuyao-row {
+  display: flex;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.liuyao-row:last-child {
+  border-bottom: none;
+}
+
+.liuyao-cell {
+  flex: 1;
+  min-width: 80rpx;
+  padding: 15rpx 5rpx;
+  text-align: center;
+  font-size: 22rpx;
+  color: #333;
+}
+
+.liuyao-cell.header-cell {
+  font-weight: bold;
+  color: #666;
+  background: #f8f8f8;
+}
+
+.liuyao-cell.label-cell {
+  font-weight: bold;
+  color: #667eea;
+}
+
+.liuyao-cell.yao-cell {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.liuyao-cell.small-cell {
+  font-size: 20rpx;
+}
+
+.guaci-section, .yaoci-section {
+  margin-bottom: 20rpx;
+}
+
+.guaci-title, .yaoci-title {
+  font-size: 26rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 10rpx;
+}
+
+.guaci-content {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.yaoci-item {
+  margin-bottom: 10rpx;
+  padding: 10rpx;
+  background: #f8f8f8;
+  border-radius: 8rpx;
+}
+
+.yaoci-name {
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #667eea;
+}
+
+.yaoci-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.extra-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15rpx;
+}
+
+.extra-item {
+  background: #f8f8f8;
+  padding: 15rpx;
+  border-radius: 10rpx;
+}
+
+.extra-label {
+  font-size: 22rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 5rpx;
+}
+
+.extra-value {
+  font-size: 24rpx;
+  color: #333;
+}
+</style>
diff --git a/xuan-deduct-uniapp/src/utils/api.js b/xuan-deduct-uniapp/src/utils/api.js
index ce0f78a..bf9e1b1 100644
--- a/xuan-deduct-uniapp/src/utils/api.js
+++ b/xuan-deduct-uniapp/src/utils/api.js
@@ -53,7 +53,32 @@ const baziApi = {
   }
 }
 
+const liuyaoApi = {
+  paiPan: (data) => {
+    return request({
+      url: '/liuyao/paipan',
+      method: 'POST',
+      data: {
+        name: data.name || '某人',
+        occupy: data.occupy || '某事',
+        sex: data.sex || 1,
+        date: data.date,
+        dateType: data.dateType || 0,
+        leapMonthType: data.leapMonthType || 0,
+        xuShiSuiType: data.xuShiSuiType || 0,
+        jieQiType: data.jieQiType || 1,
+        yearGanZhiType: data.yearGanZhiType || 2,
+        monthGanZhiType: data.monthGanZhiType || 1,
+        dayGanZhiType: data.dayGanZhiType || 0,
+        paiPanType: data.paiPanType || 0,
+        liuYaoYaoXiang: data.liuYaoYaoXiang || '—,—,--,--,--,—'
+      }
+    })
+  }
+}
+
 export default {
   baziApi,
+  liuyaoApi,
   request
 }