diff --git a/custom.page.js b/custom.page.js
index 67c67e9..c0d301a 100644
--- a/custom.page.js
+++ b/custom.page.js
@@ -4,7 +4,7 @@ import path from 'path'
 
 const config = {
    pages:'./src/pages',
-   pagesInclude:['ycnc']
+   pagesInclude:['ycysp/pay.vue']
 }
 const { pages, pagesInclude } = config
 
diff --git a/src/pages.json b/src/pages.json
index e0e218b..c7641be 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,40 +1,24 @@
 {
   "pages": [
     {
-      "path": "pages/ycnc/index",
-      "type": "home",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "奶茶活动",
-        "navigationBarBackgroundColor": "#FFF"
-      }
+      "path": "pages/ycysp/coupon",
+      "type": "page"
     },
     {
-      "path": "pages/ycnc/detail",
-      "type": "page",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "商品详情",
-        "navigationBarBackgroundColor": "#FFF"
-      }
+      "path": "pages/ycysp/pay",
+      "type": "page"
     },
     {
-      "path": "pages/ycnc/order",
-      "type": "page",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "我的订单",
-        "navigationBarBackgroundColor": "#FFF"
-      }
+      "path": "pages/ycysp/component/member",
+      "type": "page"
     },
     {
-      "path": "pages/ycnc/orderDetail",
-      "type": "page",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "订单详情",
-        "navigationBarBackgroundColor": "#FFF"
-      }
+      "path": "pages/ycysp/component/recharge-item",
+      "type": "page"
+    },
+    {
+      "path": "pages/ycysp/component/ticket-recieve",
+      "type": "page"
     }
   ],
   "globalStyle": {
diff --git a/src/pages/ycysp/component/member.vue b/src/pages/ycysp/component/member.vue
new file mode 100644
index 0000000..559f048
--- /dev/null
+++ b/src/pages/ycysp/component/member.vue
@@ -0,0 +1,18 @@
+<template>
+  <view class="wrapper"></view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, unref, onMounted} from 'vue';
+
+</script>
+<style scoped lang="scss">
+.wrapper{
+    // width:226rpx;
+    width:100%;
+    height:110rpx;
+    box-sizing: border-box;
+    background: url('@/static/ycysp/cloud.webp') no-repeat;
+    background-size: 100% 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/component/recharge-item.vue b/src/pages/ycysp/component/recharge-item.vue
new file mode 100644
index 0000000..34137d2
--- /dev/null
+++ b/src/pages/ycysp/component/recharge-item.vue
@@ -0,0 +1,63 @@
+<template>
+    <view class="flex flex-col flex-items-center flex-justify-center re-wrapper">
+      <view class="type-name">黄金月卡</view>
+      <view class="flex type-amount">
+        <view class="flex flex-col flex-justify-end icon">￥</view>
+        <view class="num">18</view>
+      </view>
+      <view class="type-ori">原价30</view>
+    </view>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, reactive, unref, onMounted} from 'vue';
+  
+  </script>
+  <style scoped lang="scss">
+  .re-wrapper{
+    width:100%;
+    height:200rpx;
+    box-sizing: border-box;
+    border-radius: 10rpx;
+    opacity: 1;
+    background: #DCEFFF;
+    box-sizing: border-box;
+    border: 1.6rpx solid #2D91FF;
+  }
+  .type-name{
+    /* 选项框标题 */
+    font-size: 26rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #070B1B;
+  }
+  .type-amount{
+    margin-top:6rpx;
+    .icon{
+      font-size: 28rpx;
+      font-weight: 600;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #659BEB;
+      margin-bottom:4rpx;
+    }
+    .num{
+      /* 价格 */
+      font-size: 48rpx;
+      font-weight: 600;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #659BEB;
+    }
+  }
+  .type-ori{
+    font-size: 24rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    text-decoration: line-through;
+    color: #A4C4FA;
+    margin-top:6rpx;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/pages/ycysp/component/ticket-recieve.vue b/src/pages/ycysp/component/ticket-recieve.vue
new file mode 100644
index 0000000..eba3f40
--- /dev/null
+++ b/src/pages/ycysp/component/ticket-recieve.vue
@@ -0,0 +1,152 @@
+<template>
+  <view class="flex pos-relative wrapper flex-justify-between" :class="{small:['small'].includes(type),large:['large'].includes(type)}">
+    <view class="flex flex-items-center flex-justify-center pos-absolute tips" v-if="['small'].includes(type)">每日限量50张</view>
+    <view class="amount">
+        <view class="icon">￥</view>
+        <view class="number">10</view>
+    </view>
+    <view class="operation" v-if="['small'].includes(type)">
+        <view class="name">优酷喵喵年卡适用</view>
+        <view class="flex flex-items-center flex-justify-center btn">立即领取</view>
+    </view>
+    <view class="operation-large" v-else>
+        <view class="name-tips">
+            <view class="name-large">芒果全屏会员年卡适用</view>
+            <view class="tips-large">每日限量50张</view>
+        </view>
+        <view class="flex flex-items-center flex-justify-center btn-large">立即领取</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, unref, onMounted} from 'vue';
+
+const props = defineProps({
+   type:{
+    type:String,
+    default:'small'
+   }
+})
+
+</script>
+<style scoped lang="scss">
+.wrapper{
+    height: 136rpx;
+    color: #0E9BF2;
+}
+.small{
+    width: 322rpx;
+    background: url('@/static/ycysp/ticket-small.webp') no-repeat;
+    margin-bottom:18rpx;
+    background-size: cover;
+}
+.large{
+    width: 662rpx;
+    background: url('@/static/ycysp/ticket-large.webp') no-repeat;
+    background-size: cover;
+}
+.tips{
+    border-radius: 20rpx 0rpx 20rpx 0rpx;
+    opacity: 1;
+    background: #69C5FF;width: 100rpx;
+    height: 20rpx;
+    width: 100rpx;
+    font-size: 12rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.04em;
+    color: #FFFFFF;
+}
+.amount{
+    display: flex;
+    justify-content: center;
+    // width:120rpx;
+    width:140rpx;
+    height:100%;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.04em;
+}
+.icon{
+    font-size: 18rpx;
+    display: flex;
+    align-items: center;
+    margin-top:20rpx;
+}
+.number{
+    font-size: 48rpx;
+    display: flex;
+    align-items: center;
+}
+.operation{
+    width:180rpx;
+    height:100%;
+    display:flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+    padding:0 15rpx;
+}
+.name{
+    width:100%;
+    font-size: 22rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #1F93DA;
+    overflow: hidden; /*文本超出隐藏*/
+	display:-webkit-box; /*盒子模型微弹性伸缩模型*/
+	-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
+	-webkit-line-clamp: 2; /*文本显示3行*/
+}
+.btn{
+    margin-top:10rpx;
+    width: 134rpx;
+    height: 34rpx;
+    background: linear-gradient(270deg, #9ad2ff  0%, #0e9bf2  100%);
+    border-radius:38rpx;
+    font-size: 20rpx;
+    font-weight: normal;
+    line-height: 24rpx;
+    color: #FFFFFF;
+}
+.operation-large{
+    width:500rpx;
+    height:100%;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding:0 24rpx 0 10rpx;
+}
+.name-tips{
+    display: flex;
+    flex-direction: column;
+}
+.name-large{
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.04em;
+    color: #1F93DA;
+}
+.tips-large{
+    font-size: 20rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.04em;
+    color: #8CA1D1;
+    margin-top:4rpx;
+}
+.btn-large{
+    width: 162rpx;
+    height: 64rpx;
+    background: linear-gradient(270deg, #9ad2ff  0%, #0e9bf2  100%);
+    border-radius:68rpx;
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 64rpx;
+    color: #FFFFFF;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/coupon.vue b/src/pages/ycysp/coupon.vue
new file mode 100644
index 0000000..0af89bc
--- /dev/null
+++ b/src/pages/ycysp/coupon.vue
@@ -0,0 +1,16 @@
+<template>
+  <view class="page-wrapper">
+    
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, unref, onMounted} from 'vue';
+
+</script>
+<style scoped lang="scss">
+.page-wrapper{
+    width:100vw;
+    height:100vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/home.vue b/src/pages/ycysp/home.vue
new file mode 100644
index 0000000..4478193
--- /dev/null
+++ b/src/pages/ycysp/home.vue
@@ -0,0 +1,255 @@
+<template>
+  <scroll-view class="page-wrapper" scroll-y>
+    <view class="w-full box-border banner-container">
+      <image
+        src="@/static/ycysp/banner.webp"
+        mode="scaleToFill"
+        class="w-full h-full"
+      />
+    </view>
+    <!-- //优惠券 -->
+    <view class="ticket-container">
+      <view class="title">
+        <view class="title-line"></view>
+        <view class="title-text">领券更划算</view>
+        <view class="title-more">我的优惠券</view>
+      </view>
+      <view class="flex flex-wrap flex-justify-between">
+        <ticketRecieve />
+        <ticketRecieve />
+        <ticketRecieve type="large"/>
+      </view>
+    </view>
+    <!-- //选择充值类型的会员 -->
+    <view class="member-container">
+      <view class="title">
+        <view class="title-text">选择影音会员</view>
+      </view>
+      <scroll-view scroll-x class="scroll">
+        <view class="swiper">
+          <view v-for="(item,index) in typeArr" class="member-item">
+            <member key="index"/>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <!-- //充值选项 -->
+    <view class="recharge-container">
+      <view class="title">
+        <view class="title-text">充值选项</view>
+      </view>
+      <scroll-view scroll-x class="recharge-scroll">
+      
+          <view v-for="(item,index) in typeArr" class="recharge-item">
+            <rechargeItem key="index"/>
+          </view>
+      </scroll-view>
+    </view>
+    <!-- //手机号 -->
+     <view class="input-container">
+        <input type="text" placeholder="请输入手机号码充值"  placeholder-class="pcs">
+     </view>
+     <!-- 下一步 -->
+     <view class="flex flex-items-center flex-justify-center next-btn">
+       下一步
+     </view>
+     <!-- 描述 -->
+      <view class="description">
+        <view class="small-title">产品介绍</view>
+        <view class="small-text">1、充值后可登录官方APP<text class="small-red">查看会员状态及有效期，</text>过期不可使用。</view>
+        <view class="small-text">2、<text class="small-red">充值前请您确认充值信息是否正确，一旦提交无法取消或更改。</text>如因账号信息输入错误导致充值至他人账户，仍视为充值成功，无法补券。</view>
+        <view class="small-text">3、此权益中包含的优酷/腾讯黄金会员、芒果视频会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏。<text class="small-red">腾讯视频、QQ音乐支持QQ号或手机号，</text>其余会员账号均为手机号。</view>
+        <view class="small-text">4、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。</view>
+        <view class="small-text">5、如有疑问请联系成都蓝色兄弟网络科技有限公司，<text class="small-red">客服电话400-118-1216</text>（服务时间09:00-18:00）。</view>
+      </view>
+      <view style="height:40rpx;"></view>
+      <!-- 我的订单 -->
+       <view class="flex flex-justify-center flex-items-center order-btn">我的<br/>订单</view>
+  </scroll-view>
+</template>
+
+<script setup >
+import { ref, reactive, unref, onMounted} from 'vue';
+import ticketRecieve from './component/ticket-recieve.vue';
+import member from './component/member.vue';
+import rechargeItem from './component/recharge-item.vue';
+
+const typeArr = new Array(8).fill(new Date().getTime())
+
+</script>
+
+<style scoped lang="scss">
+.page-wrapper{
+    width:100vw;
+    height:100vh;
+    opacity: 1;
+    background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+    overflow-y: auto;
+}
+.banner-container{
+  height:338rpx;
+  padding: 36rpx 20rpx 0 4rpx;
+  background: url('@/static/ycysp/banner-bg.webp') no-repeat;
+  background-size: 100% auto;
+}
+.ticket-container{
+  width: 710rpx;
+  height: 416rpx;
+  border-radius: 28rpx;
+  opacity: 1;
+  background: #FFFFFF;
+  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
+  margin:40rpx auto 0;
+  box-sizing: border-box;
+  padding: 24rpx;
+}
+.title{
+  width:100%;
+  height:50rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom:20rpx;
+  .title-line{
+    width: 10rpx;
+    height: 34rpx;
+    border-radius: 0rpx 6rpx 6rpx 0rpx;
+    opacity: 1;
+    background: linear-gradient(180deg, #95CEFF 0%, #439FFF 100%);
+  }
+  .title-text{
+    font-size: 36rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.04em;
+    font-family: PingFang SC;
+    color: #212F3B;
+    margin-left:14rpx;
+  }
+  .title-more{
+    position: absolute;
+    right:0;
+    font-family: PingFang SC;
+    font-size: 26rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0.04em;
+    color: #666E7E;
+  }
+}
+.member-container{
+  width:100%;
+  padding-left:20rpx;
+  box-sizing: border-box;
+  margin:40rpx auto 0;
+}
+.scroll{
+  width:100%;
+  height:240rpx;
+  overflow-x: auto;
+}
+.swiper{
+  width:calc((100vw - 68rpx) / 3 * 4 + 64rpx)
+  // white-space: nowrap;
+}
+.member-item{
+  display: inline-block;
+  margin:0 16rpx 16rpx 0;
+  width:calc((100vw - 68rpx) / 3);
+}
+.recharge-container{
+  width:100%;
+  margin:40rpx auto 0;
+  padding-left:20rpx;
+  box-sizing: border-box;
+}
+.recharge-scroll{
+  width:100%;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.recharge-item{
+  display: inline-block;
+  margin:0 16rpx 16rpx 0;
+  width:calc((100vw - 20rpx) / 3.5);
+}
+.input-container{
+  width: 710rpx;
+  height: 88rpx;
+  border-radius: 84rpx;
+  opacity: 1;
+  background: #EEF7FF;
+  margin: 40rpx auto 0;
+  display: flex;
+  align-items: center;
+  padding:0 40rpx;
+  box-sizing: border-box;
+  input{
+    font-size: 32rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #8DBFF6;
+  }
+}
+.pcs{
+  font-size: 32rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: #8DBFF6;
+}
+.next-btn{
+  width: 710rpx;
+  height: 88rpx;
+  padding: 12rpx 28rpx;
+  margin: 40rpx auto 0;
+  font-size: 32rpx;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: #FFFFFF;
+  background: linear-gradient(270deg, #3194FF 0%, #96CFFF 100%);
+  box-sizing: border-box;
+  border-radius: 392rpx;
+}
+.description{
+  width:100%;
+  box-sizing: border-box;
+  padding: 0 20rpx;
+  margin-top:40rpx;
+}
+.small-title{
+  /* 标题二 */
+  font-size: 28rpx;
+  font-weight: normal;
+  line-height: 32rpx;
+  letter-spacing: 0px;
+  color: #0F0F0F;
+  margin-bottom:20rpx;
+}
+.small-text{
+  font-size: 24rpx;
+  font-weight: normal;
+  line-height: 44rpx;
+  color: #383838
+}
+.small-red{
+  color: #FF0000
+}
+.order-btn{
+  position: fixed;
+  right: 20rpx;
+  top:100rpx;
+  width: 96rpx;
+  height: 96rpx;
+  font-size: 24rpx;
+  font-weight: normal;
+  line-height: 32rpx;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  opacity: 1;
+  background: rgba(45, 145, 255, 0.6);
+  border-radius:96rpx;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ycysp/pay.vue b/src/pages/ycysp/pay.vue
new file mode 100644
index 0000000..9c5efd8
--- /dev/null
+++ b/src/pages/ycysp/pay.vue
@@ -0,0 +1,112 @@
+<template>
+  <view class="flex flex-col flex-items-center flex-justify-between page-wrapper">
+    <view class="info">
+        <view class="title-small">订单详情</view>
+        <view class="flex detail-info">
+            <view class="detail-img"></view>
+            <view class="detail-other">
+                <view class="flex flex-justify-between name-info">
+                    <text>优酷VIP视频月卡</text>
+                    <text><text style="font-size:20rpx">￥</text>15元</text>
+                </view>
+                <view class="flex flex-justify-between count-info">
+                    <text>数量</text>
+                    <text>x1</text>
+                </view>
+            </view>
+        </view>
+        <view class="order-info">
+            <view class="order-item">充值账户：152****7226</view>
+            <view class="order-item">充值类型：月卡</view>
+        </view>
+    </view>
+    <view class="pay-btn">立即支付</view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, unref, onMounted} from 'vue';
+
+</script>
+<style scoped lang="scss">
+.page-wrapper{
+    width:100vw;
+    height:100vh;
+    opacity: 1;
+    background: linear-gradient(180deg, #FFFFFF 18%, #F3F3F3 40%, #FAFBFD 60%, #FAFBFD 61%, #FAFBFD 65%);
+    padding:33rpx 0;
+    box-sizing: border-box;
+}
+.info{
+    width: 702rpx;
+    height: 374rpx;
+    border-radius: 24rpx;
+    opacity: 1;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    padding:32rpx 24rpx;
+}
+.title-small{
+    font-size: 28rpx;
+    font-weight: normal;
+    line-height: 32rpx;
+    letter-spacing: 0px;
+    color: #333333;
+}
+.detail-info{
+    padding:24rpx 0;
+    border-bottom:1rpx solid #E1E1F0;
+}
+.detail-img{
+    width:92rpx;
+    height:92rpx;
+    border:1px solid red;
+    margin-right:30rpx;
+}
+.detail-other{
+    flex:1;
+    font-weight:400;
+    line-height: 32rpx;
+    letter-spacing: 0px;
+    .name-info{
+        font-size: 24rpx;
+        color: #333333;
+    }
+    .count-info{
+        font-size: 20rpx;
+        color: #9E9E9E;
+        margin-top:12rpx;
+    }
+}
+.order-info{
+    border-bottom:1rpx solid #E1E1F0;
+    padding-bottom:24rpx;
+}
+.order-item{
+    font-size: 22rpx;
+    font-weight: normal;
+    line-height: 32rpx;
+    letter-spacing: 0px;
+    color: #6C6C6C;
+    margin-top:24rpx;
+}
+.pay-btn{
+    width: 710rpx;
+    height: 88rpx;
+    /* 自动布局 */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 12rpx 28rpx;
+    border-radius: 392rpx;
+    opacity: 1;
+    background: linear-gradient(270deg, #2C91FF 0%, #9AD2FF 100%);
+    box-sizing: border-box;
+    font-size: 32rpx;
+    font-weight: normal;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #FFFFFF;
+}
+</style>
\ No newline at end of file
diff --git a/src/static/ycysp/banner-bg.webp b/src/static/ycysp/banner-bg.webp
new file mode 100644
index 0000000..f7777bf
Binary files /dev/null and b/src/static/ycysp/banner-bg.webp differ
diff --git a/src/static/ycysp/banner.webp b/src/static/ycysp/banner.webp
new file mode 100644
index 0000000..67638ca
Binary files /dev/null and b/src/static/ycysp/banner.webp differ
diff --git a/src/static/ycysp/cloud.webp b/src/static/ycysp/cloud.webp
new file mode 100644
index 0000000..a944d8d
Binary files /dev/null and b/src/static/ycysp/cloud.webp differ
diff --git a/src/static/ycysp/ticket-large.webp b/src/static/ycysp/ticket-large.webp
new file mode 100644
index 0000000..1a5ebc0
Binary files /dev/null and b/src/static/ycysp/ticket-large.webp differ
diff --git a/src/static/ycysp/ticket-small.webp b/src/static/ycysp/ticket-small.webp
new file mode 100644
index 0000000..17e005b
Binary files /dev/null and b/src/static/ycysp/ticket-small.webp differ
diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 2c45296..45464f5 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -4,10 +4,11 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/ycnc/index" |
-       "/pages/ycnc/detail" |
-       "/pages/ycnc/order" |
-       "/pages/ycnc/orderDetail";
+  url: "/pages/ycysp/coupon" |
+       "/pages/ycysp/pay" |
+       "/pages/ycysp/component/member" |
+       "/pages/ycysp/component/recharge-item" |
+       "/pages/ycysp/component/ticket-recieve";
 }
 interface RedirectToOptions extends NavigateToOptions {}