diff --git a/src/assets/image/close.png b/src/assets/image/close.png
new file mode 100644
index 0000000..c1b6507
Binary files /dev/null and b/src/assets/image/close.png differ
diff --git a/src/assets/image/fail.png b/src/assets/image/fail.png
new file mode 100644
index 0000000..645c6a0
Binary files /dev/null and b/src/assets/image/fail.png differ
diff --git a/src/assets/image/posi.png b/src/assets/image/posi.png
new file mode 100644
index 0000000..e470742
Binary files /dev/null and b/src/assets/image/posi.png differ
diff --git a/src/assets/image/pro.png b/src/assets/image/pro.png
new file mode 100644
index 0000000..829d199
Binary files /dev/null and b/src/assets/image/pro.png differ
diff --git a/src/assets/image/pro_gray.png b/src/assets/image/pro_gray.png
new file mode 100644
index 0000000..7aacb8d
Binary files /dev/null and b/src/assets/image/pro_gray.png differ
diff --git a/src/assets/image/pull.png b/src/assets/image/pull.png
new file mode 100644
index 0000000..280be4e
Binary files /dev/null and b/src/assets/image/pull.png differ
diff --git a/src/assets/image/succ.png b/src/assets/image/succ.png
new file mode 100644
index 0000000..b667e65
Binary files /dev/null and b/src/assets/image/succ.png differ
diff --git a/src/assets/image/time.png b/src/assets/image/time.png
new file mode 100644
index 0000000..f817b80
Binary files /dev/null and b/src/assets/image/time.png differ
diff --git a/src/assets/image/time_gary.png b/src/assets/image/time_gary.png
new file mode 100644
index 0000000..6265643
Binary files /dev/null and b/src/assets/image/time_gary.png differ
diff --git a/src/assets/image/up.png b/src/assets/image/up.png
new file mode 100644
index 0000000..1e44622
Binary files /dev/null and b/src/assets/image/up.png differ
diff --git a/src/router/index.js b/src/router/index.js
index accee5a..14bcb36 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,9 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import Guidance from "../views/Guidance.vue";
+import examination from "../views/examination.vue";
+import ExamProject from "../views/examProject.vue";
+import MyExam from "../views/myExam.vue";
 
 Vue.use(VueRouter);
 
@@ -12,7 +15,7 @@ const routes = [
     component: HomeView,
     meta: {
       title: "选择医院",
-    }
+    },
   },
   {
     path: "/guidance",
@@ -20,7 +23,31 @@ const routes = [
     component: Guidance,
     meta: {
       title: "预约须知",
-    }
+    },
+  },
+  {
+    path: "/examination",
+    name: "examination",
+    component: examination,
+    meta: {
+      title: "体检项目",
+    },
+  },
+  {
+    path: "/examProject",
+    name: "ExamProject",
+    component: ExamProject,
+    meta: {
+      title: "预约项目",
+    },
+  },
+  {
+    path: "/myExam",
+    name: "MyExam",
+    component: MyExam,
+    meta: {
+      title: "我的预约",
+    },
   },
   {
     path: "/about",
@@ -37,7 +64,9 @@ const router = new VueRouter({
   routes,
 });
 router.beforeEach((to, from, next) => {
-  to.meta.title?document.title = to.meta.title:document.title ='体检预约'
-  next()
-})
+  to.meta.title
+    ? (document.title = to.meta.title)
+    : (document.title = "体检预约");
+  next();
+});
 export default router;
diff --git a/src/views/examProject.vue b/src/views/examProject.vue
new file mode 100644
index 0000000..470d6de
--- /dev/null
+++ b/src/views/examProject.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="pro_con">
+    <div class="pro_box" v-for="item in proArr" :key="item.time">
+      <div class="pro_top">
+        <div class="img_box">
+          <img src="~@/assets/image/time.png" alt="" />
+        </div>
+        <div class="time_box">
+            <div class="time_text">{{item.day}}</div>
+            <div class="date_txt">{{item.monmet}}</div>
+        </div>
+      </div>
+      <div class="pro_bottom">
+        <div class="pro_left">
+            <div class="img_box">
+                <img src="~@/assets/image/pro.png" alt="" />
+            </div>
+            <div class="pro_name">{{item.name}}</div>
+            <div class="pro_pos">{{item.posi}}</div>
+        </div>
+        <div class="pro_right">
+            <div class="cancel" @click="cancelButton(item)">取消预约</div>
+        </div>
+      </div>
+    </div>
+    <div class="act_box">
+      <div  class="act_btn" @click="confirm">确认</div>
+    </div>
+    <van-overlay :show="isShow">
+        <div class="wrapper" @click.stop v-show="isSuccess">
+            <div class="img_box">
+                <img src="~@/assets/image/succ.png" alt="">
+            </div>
+            <div class="tips">预约成功</div>
+            <div class="tip_txt">
+                <div>预约成功后若不能按时体检请提前取消</div>
+                <div>未提前取消且未按期体检将被拉入黑名单</div>
+                <div>被拉黑用户10日内不可再预约</div>
+            </div>
+            <div class="btn">知道了</div>
+        </div>
+        <div class="wrapper" @click.stop v-show="!isSuccess">
+            <div class="img_box">
+                <img src="~@/assets/image/fail.png" alt="">
+            </div>
+            <div class="tips">预约失败</div>
+            <div class="tip_txt">
+                <div>您选择的时间段已无号，请重新预约</div>
+            </div>
+            <div class="btn">知道了</div>
+        </div>
+        <div class="close_box"><img src="~@/assets/image/close.png" alt=""></div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        proData:{},
+        proArr:[],
+        isShow:false,
+        isSuccess:false
+    };
+  },
+  mounted() {
+    console.log(this.$route.params);
+    this.proData = this.$route.params;
+    this.proData.selectArr.map(item =>{
+        this.proArr.push({
+            day:this.proData.time,
+            name:item.name,
+            monmet:item.time,
+            posi:item.posi
+        })
+    })
+  },
+  methods: {
+    cancelButton(val){
+        this.proArr =  this.proArr.filter(item => item.name != val.name)
+        if(this.proArr.length == 0){
+            this.$router.push({
+                name:'examination'
+            })
+        }
+        // lightAppJssdk.notification.alert ({
+        //     message: "这是一个弹窗",
+        //     title: "提示",//可传空
+        //     buttonName: "收到",
+        //     success:function(data){
+        //         //onSuccess将在点击button之后回调
+        //         /*回调*/
+
+        //     },
+        //     fail:function(data){ //错误返回
+        //     }
+        // });
+    },
+
+    confirm(){
+        console.log(this.proArr)
+        if(this.proArr.length != 0){
+            this.isShow = true
+        }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pro_con {
+  width: 100%;
+  height: 100%;
+
+  .pro_box {
+    width: 98%;
+    margin-top: 0.2rem;
+    background: #fff;
+    margin: 0.4rem auto;
+    margin-bottom: 0.7rem;
+    
+
+    .pro_top{
+        display: flex;
+        padding-bottom: 0.26rem;
+        border-bottom: 1px solid #EEEEEE;
+        .img_box{
+            display: flex;
+            align-items: center;
+            margin-right: 0.24rem;
+            img{
+                width: 0.5rem;
+                height: 0.5rem;
+            }
+        }
+        .time_box{
+            .time_text{
+                width: 1.46rem;
+                height: 0.32rem;
+                text-align: center;
+                background: #F6F6F6;
+                border-radius: 0.08rem;
+                line-height: 0.32rem;
+                font-size: 0.24rem;
+                color: #999999;
+            }
+            .date_txt{
+                font-size: 0.3rem;
+                font-weight: bold;
+                color: #333;
+                line-height: 0.46rem;
+            }
+        }
+    }
+
+    .pro_bottom{
+        display: flex;
+        justify-content: space-between;
+        height: 0.6rem;
+        margin-top: 0.24rem;
+
+        .pro_left{
+            display: flex;
+        
+
+            .img_box{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                img{
+                    width: 0.5rem;
+                    height: 0.5rem;
+                
+                }
+            }
+            .pro_name{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                font-size: 0.3rem;
+                color: #333;
+                font-weight: bold;
+                margin-left: 0.24rem;
+            }
+            .pro_pos{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                font-size: 0.24rem;
+                color: #999;
+                margin-left: 0.24rem;
+            }
+        }
+        .pro_right{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        
+            .cancel{
+                width: 1.5rem;
+                height: 0.5rem;
+                background: rgba(22, 119, 255,.1);
+                border-radius: 0.26rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.24rem;
+                color: #1677FF;
+                margin-right: 0.24rem;
+            }
+        }
+    }
+  }
+
+  .act_box {
+    position:absolute;
+    left:0;
+    right:0;
+    bottom:0;
+    padding: 0.24rem;
+    background: #fff;
+    .act_btn{
+      color: #FFFFFF;
+      font-size: 0.3rem;
+      font-family: PingFang SC-Bold, PingFang SC;
+      font-weight: bold;
+      line-height:0.96rem;
+      text-align: center;
+      background: #1677FF;
+      border-radius: 0.08rem;
+    }
+  }
+
+  .wrapper{
+    width: 5.98rem;
+    height: 6.66rem;
+    background: #FFFFFF;
+    border-radius: 0.16rem;
+    margin: 0 auto;
+    margin-top: 2.76rem;
+
+    .img_box{
+        display: flex;
+        justify-content: center;
+        img{
+            width: 1rem;
+            height: 1rem;
+            margin-top: 1.2rem;
+        }
+    }
+    .tips{
+        display: flex;
+        justify-content: center;
+        font-size: 0.34rem;
+        color:#000;
+        font-weight: bold;
+        margin: 0.56rem 0 0.2rem 0;
+        font-family: PingFang SC-Regular, PingFang SC;
+        
+    }
+
+    .tip_txt{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 0.24rem;
+        color: #666;
+        font-family: PingFang SC-Regular, PingFang SC;
+    }
+    .btn{
+        width: 3rem;
+        height: 0.8rem;
+        background: #1677FF;
+        border-radius: 0.08rem;
+        margin: 0 auto;
+        margin-top: 0.6rem;
+        font-size: 0.3rem;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: PingFang SC-Regular, PingFang SC;
+    }
+  }
+
+  .close_box{
+        display: flex;
+        justify-content: center;
+        margin-top: 0.6rem;
+        img{
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+  }
+}
+</style>
diff --git a/src/views/examination.vue b/src/views/examination.vue
new file mode 100644
index 0000000..7896723
--- /dev/null
+++ b/src/views/examination.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="exam_contaniner">
+    <div class="top_box">
+        <div class="week-box" v-if="!isCal"> 
+            <div class="week_box" style="display:flex">
+                <div class="week_num" v-for="item in weekData" :key="item">{{item}}</div>
+            </div>
+            <div class="week_text">
+                <div class="week_txt" v-for="item in weekArr" :key="item" @click="changeDate(item)" :class="[(item < today ? 'week_none' : ''),item == isToday ? 'today_week' : '',numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? 'isnum' : 'none' : '']">
+                    <div class="top_info"></div>
+                    {{item}}
+                    <div class="bottom_info" v-text="numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? '有号' :'无号' : ''"></div>
+                </div>
+            </div>
+        </div>
+        <div v-if="isCal">
+            <van-swipe class="my-swipe"  :stop-propagation="false">
+                <van-swipe-item>
+                    <van-calendar 
+                        class="can_box" 
+                        ref="calendar" 
+                        first-day-of-week="1" 
+                        v-model="show" 
+                        @confirm="onConfirm" 
+                        :poppable="false" 
+                        :show-mark="false" 
+                        :show-title="false" 
+                        :show-subtitle="false" 
+                        :show-confirm="false"
+                        :min-date="minDate"
+                        :max-date="maxDate"
+                        :formatter="formatter"
+                    />
+                </van-swipe-item>
+                <van-swipe-item>
+                    <van-calendar 
+                        class="can_box" 
+                        ref="calendar1" 
+                        first-day-of-week="1" 
+                        v-model="show" 
+                        @confirm="onConfirm1" 
+                        :poppable="false" 
+                        :show-mark="false" 
+                        :show-title="false" 
+                        :show-subtitle="false" 
+                        :show-confirm="false"
+                        :min-date="minDate1"
+                        :max-date="maxDate1"
+                    />
+                </van-swipe-item>
+            </van-swipe>
+        </div>
+        <div class="pull_box" @click="isShow">
+            <img v-show="!isCal" src="~@/assets/image/pull.png" alt="">
+            <img v-show="isCal" src="~@/assets/image/up.png" alt="">
+        </div>
+    </div>
+    <div class="center_box">
+        <div class="exam_box" v-for="item in examData" :key="item.name">
+            <div class="exam_top">
+                <div class="top_left">
+                    <div class="name_txt">{{item.name}}</div>
+                    <div class="posi_txt">
+                        <img style="width:0.24rem;height:0.24rem" src="~@/assets/image/posi.png" alt="">
+                        <div style="color: #999;font-size: 0.24rem;">{{item.position}}</div>
+                    </div>
+                </div>
+                <div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.residue}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.total}}</div>
+                </div>
+            </div>
+            <div class="exam_bottom">
+                <div class="exam_txt" v-for="item1 in item.examArr" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.num == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : '')]">
+                    <div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.moment}}</span> {{item1.time}}</div>
+                    <div style="font-size:0.24rem;color:#333333;">剩余:{{item1.num}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="btn_box">
+        <van-button v-show="selectArr.length == 0" type="info" block disabled >预约</van-button>
+        <van-button v-show="selectArr.length !== 0" type="info" block  @click="handleExam">预约</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {    
+        return {
+            show:true,
+            text:"下拉",
+            isCal:false,
+            radio:1,
+            weekArr:[],
+            weekData:['一','二','三','四','五','六','日'],
+            minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()),
+            minDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
+            maxDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate()),
+            numData:[{date:'2023-02-09',isNum:1},{date:'2023-02-11',isNum:0},
+            {date:'2023-02-15',isNum:1},{date:'2023-02-20',isNum:0}],
+            examData:[
+                {name:'单眼视力',position:'门诊楼3楼眼科门诊',total:20,residue:15,examArr:[
+                    {moment:'上午',time:'8:00-8:30',num:2},
+                    {moment:'上午',time:'8:30-9:00',num:0},
+                    {moment:'上午',time:'9:00-9:30',num:1},
+                    {moment:'上午',time:'9:30-10:00',num:1},
+                ]},
+                {name:'肢体',position:'门诊楼3楼',total:20,residue:15,examArr:[
+                    {moment:'上午',time:'8:00-8:30',num:2},
+                    {moment:'上午',time:'8:30-9:00',num:0},
+                    {moment:'上午',time:'9:00-9:30',num:1},
+                    {moment:'上午',time:'9:30-10:00',num:1},
+                ]},
+                {name:'听力',position:'门诊楼3楼听力门诊',total:20,residue:15,examArr:[
+                    {moment:'上午',time:'8:00-8:30',num:2},
+                    {moment:'上午',time:'8:30-9:00',num:0},
+                    {moment:'上午',time:'9:00-9:30',num:1},
+                    {moment:'上午',time:'9:30-10:00',num:1},
+                ]}
+            ],
+            selectArr:[],
+            selectDate:'',
+            today:'',
+            isToday:''
+        }
+    },
+    created() {
+        this.getList()
+    },
+    mounted() {
+        var WeekFirstDay=new Date(new Date()-(new Date().getDay()-1)*86400000); 
+        this.today = new Date().getDate();
+        this.isToday = this.today;
+        let year = new Date().getFullYear();
+        let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
+        this.selectDate = year + '-' + month + '-' + (this.today < 10 ? '0' + this.today : this.today);
+        for(var i = WeekFirstDay.getDate();i<= parseInt(WeekFirstDay.getDate()) + 6;i++){
+            this.weekArr.push(i)
+        }
+        var todayWeek = new Date().getDay();
+        this.weekData.map((item,index) =>{
+            if(index + 1 == todayWeek){
+                // item = '今日'
+                this.weekData[index] = '今日'
+            }
+        })
+    },
+    methods: {
+        getList(){
+            this.examData.map(item =>{
+                item.examArr.map(item1 =>{
+                    item1.isSelect = false
+                })
+            })
+            console.log(this.examData)
+        },
+        formatter(day){
+            /*
+                这里的参数包含以下属性
+                bottomInfo: undefined
+                date: Sat May 22 2021 00:00:00 GMT+0800 (中国标准时间) {}
+                text: 22
+                type: "
+
+                我们只需要修改type值为 disabled 即可
+            */
+            if(day.date.getDate() < new Date().getDate()){
+                day.type = 'disabled'
+            }else{
+                this.numData.forEach(item =>{
+                    if(day.date.getDate() == item.date.slice(-2)){
+                        item.isNum == 0 ? day.bottomInfo  = '有号' : day.bottomInfo  = '无号'
+                        item.isNum == 0 ? day.className  = 'num1' : day.className  = 'num2'
+                        
+                    }
+                })
+            }
+            // if(day.date.getDate() == new Date().getDate()){
+                day.topInfo = ` `
+                // day.className = 'today'
+                
+            // }
+            return day
+        },
+        changeDate(item){
+            console.log(item)
+            this.isToday = item
+        },
+        isShow(){
+            console.log(111)
+            this.isCal = !this.isCal    
+        },
+        clickExam(val,val1){
+            this.selectArr = []
+            let arr = JSON.parse(JSON.stringify(this.examData))
+            arr.find(item =>{
+                if(item.name == val.name){
+                    console.log(item)
+                    item.examArr.find(item1 =>{
+                        if(item1.time == val1.time){
+                            item1.isSelect = true
+                        }else{
+                            item1.isSelect = false
+                        }
+                    })
+                }
+            })
+            this.examData = arr
+            this.examData.map(item =>{
+                item.examArr.map(item1 =>{
+                    if(item1.isSelect){
+                        this.selectArr.push({
+                            name:item.name,
+                            posi:item.position,
+                            time:item1.moment + ' ' +  item1.time,
+                        })
+                    }
+                })
+            })
+        },
+        onConfirm(date){
+            let year = date.getFullYear();
+            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+            let text = year + '-' + month + '-' + day
+            let val = this.numData.find(item => item.date == text)
+            console.log(val)
+            if(val){
+                this.selectDate = val.date
+            }else{
+                // this.$toast('异常')
+            }
+        },
+        onConfirm1(){},
+        handleExam(){
+            console.log(this.selectArr,this.selectDate)
+            this.$router.replace({
+                name:'ExamProject',
+                params:{
+                    time:this.selectDate,
+                    selectArr:this.selectArr
+                }
+            })
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.exam_contaniner{
+    width: 100%;
+    overflow-y: scroll;
+    height: 100%;
+    overflow-x: hidden;
+    background: #F9F9F9;
+
+    .top_box{
+        background: #fff;
+        .week-box{
+            .week_box{
+                width: 100%;
+                height: 0.6rem;
+                padding-top: 0.7rem;
+
+                .week_num{
+                    flex: 1;
+                    font-size: 0.32rem;
+                    line-height: 0.6rem;
+                    text-align: center;
+                }
+            }
+            .week_text{
+                display: flex;
+                width: 100%;
+                height: 1.28rem;
+                .week_txt{
+                    position: relative;
+                    width: 13.5%;
+                    height: 84%;
+                    font-size: 0.32rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    text-align: center;
+                    margin: 0.24rem 0.35% 0 0.35%;
+                    // margin-top: 0.12rem;
+
+                    .bottom_info{
+                        position: absolute;
+                        right: 0;
+                        left: 0;
+                        font-size: 10px;
+                        line-height: 14px;
+                        bottom: 6px;
+                    }
+
+                    .top_info{
+                        position: absolute;
+                        right: 0;
+                        left: 0;
+                        top: 6px;
+                        font-size: 10px;
+                        line-height: 14px;
+                    }
+                }
+                .week_none{
+                    color:#ccc;
+                    pointer-events:none;
+                }
+
+                .none{
+                    background: rgba(22, 119, 255,0.5);
+                    border-radius: 50%;
+                    color:#fff;
+                }
+                .isnum{
+                    background: rgb(22, 119, 255,);
+                    border-radius: 50%;
+                    color:#fff;
+                }
+                .today_week{
+                    background: #1677FF;
+                    border-radius: 50%;
+                    color:#fff;
+
+                    .top_info{
+                        width: 0.1rem;
+                        height: 0.1rem;
+                        background: #fff;
+                        border-radius: 50%;
+                        margin: 0 auto;
+                        margin-top: 0.1rem;
+                    }
+                }
+            }
+        }
+
+        .pull_box{
+            display: flex;
+            justify-content: center;
+            margin-top: 0.24rem;
+
+            img{
+                width: 0.4rem;
+                height: 0.4rem;
+            }
+        }
+        .my-swipe .van-swipe-item {
+            width: 100%;
+            font-size: 0.4rem;
+            text-align: center;
+        }
+
+        .can_box{
+            padding-top:0.7rem
+        }
+    }
+    .center_box{
+        width: 100%;
+        margin-top: 0.2rem;
+        .exam_box{
+            width: 100%;
+            background: #fff;
+            padding-bottom: 0.4rem;
+            margin-bottom: 0.2rem;
+
+            .exam_top{
+                width: 100%;
+                height: 1.6rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .top_left{
+                    width: 80%;
+                    height: 80%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    margin-left: 5%;
+
+                    .name_txt{
+                        font-size: 0.3rem;
+                        color: #333;
+                        font-weight: bold;
+                    }
+                    .posi_txt{
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+                .top_right{
+                    width: 1.48rem;
+                    height: 0.6rem;
+                    border-top-left-radius: 0.4rem;
+                    border-bottom-left-radius: 0.4rem;
+                    border-right: none;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background: rgba(72, 118, 255,0.2);
+                }
+            }
+            .exam_bottom{
+                width: 93%;
+                display: flex;
+                justify-content: space-between;
+                margin: 0 auto;
+                flex-wrap: wrap;
+
+                .exam_txt{
+                    width: 2.2rem;
+                    height: 1rem;
+                    background: #F6F6F6;
+                    border: 1px solid #1677FF;
+                    border-radius: 0.08rem;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    align-items: center;
+                    font-size: 0.22rem;
+                    margin-bottom: 0.2rem;
+                }
+
+                .isAct{
+                    background: #F6F6F6;
+                    border: 1px solid #F6F6F6;
+                    pointer-events:none;
+                    .txt{
+                        color:rgba(102, 102, 102,0.3) !important;
+                    }
+                    div{
+                        span{
+                            color:rgba(102, 102, 102,0.3) !important;
+
+                        }
+                        color: rgba(51, 51, 51,0.3) !important;
+                    }
+                }
+
+                .active{
+                    background: #1677FF ;
+                    div{
+                        span{
+                            color: #fff !important;
+                        }
+                        color: #fff !important;
+                    }
+
+
+                }
+            }
+        }
+    }
+
+    .btn_box{
+        width:90%;
+        height: 1.6rem;
+        margin:0 auto;
+        margin-top: 0.4rem;
+        cursor: not-allowed
+    }
+}
+::v-deep{
+    .van-calendar__header {
+        box-shadow: none !important;
+    }
+    .van-calendar__month-title{
+        display: none;
+    }
+    .num1{
+        background: rgb(22, 119, 255);
+        border-radius: 50%;
+        color: #fff;
+    }
+    .num2{
+        background: rgba(22, 119, 255,0.5);
+        border-radius: 50%;
+        color: #fff;
+    }
+    .van-calendar__weekday{
+        font-size: 0.32rem;
+    }
+        .van-calendar__selected-day{
+            .van-calendar__top-info{
+                width: 0.1rem;
+                height: 0.1rem;
+                background: #fff;
+                border-radius: 50%;
+                margin: 0 auto;
+                margin-top: 0.1rem;
+            }
+        }
+    .van-calendar__days{
+        height: 6.4rem;
+
+        .van-calendar__day{
+            height: 17%;
+            width: 13.5%;
+            margin: 0 0.35%;
+
+            .van-calendar__selected-day{
+                width: 100%;
+                height: 100%;
+                background: #1677FF;
+                border-radius: 50%;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/myExam.vue b/src/views/myExam.vue
new file mode 100644
index 0000000..cc2062a
--- /dev/null
+++ b/src/views/myExam.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="my_exam">
+    <div class="exam_box">
+      <div class="time_box">2023-01-08</div>
+      <div class="pro_box">
+        <div class="pro_top">
+          <div class="img_box">
+            <img src="~@/assets/image/time.png" alt="" />
+          </div>
+          <div class="time_box">
+            <div class="time_text">2023-01-08</div>
+            <div class="date_txt">上午 9:00-9:30</div>
+          </div>
+        </div>
+        <div class="pro_bottom">
+          <div class="pro_left">
+            <div class="img_box">
+              <img src="~@/assets/image/pro.png" alt="" />
+            </div>
+            <div class="pro_name">单眼视力</div>
+            <div class="pro_pos">门诊楼3楼眼科门诊</div>
+          </div>
+          <div class="pro_right">
+            <div class="cancel">取消预约</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.my_exam {
+  width: 100%;
+  height: 100%;
+  background: #f9f9f9;
+  .exam_box {
+    background: #fff;
+    padding: 0.5rem 0.24rem 0 0.24rem;
+
+    .time_box {
+      font-size: 0.3rem;
+      font-family: PingFang SC-Bold, PingFang SC;
+      font-weight: bold;
+      color: #333333;
+      line-height: 0.46rem;
+    }
+
+    .pro_box {
+    width: 98%;
+    margin-top: 0.2rem;
+    background: #fff;
+    margin: 0.4rem auto;
+    margin-bottom: 0.7rem;
+    
+
+    .pro_top{
+        display: flex;
+        padding-bottom: 0.26rem;
+        border-bottom: 1px solid #EEEEEE;
+        .img_box{
+            display: flex;
+            align-items: center;
+            margin-right: 0.24rem;
+            img{
+                width: 0.5rem;
+                height: 0.5rem;
+            }
+        }
+        .time_box{
+            .time_text{
+                width: 1.46rem;
+                height: 0.32rem;
+                text-align: center;
+                background: #F6F6F6;
+                border-radius: 0.08rem;
+                line-height: 0.32rem;
+                font-size: 0.24rem;
+                color: #999999;
+            }
+            .date_txt{
+                font-size: 0.3rem;
+                font-weight: bold;
+                color: #333;
+                line-height: 0.46rem;
+            }
+        }
+    }
+
+    .pro_bottom{
+        display: flex;
+        justify-content: space-between;
+        height: 0.6rem;
+        margin-top: 0.24rem;
+
+        .pro_left{
+            display: flex;
+        
+
+            .img_box{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                img{
+                    width: 0.5rem;
+                    height: 0.5rem;
+                
+                }
+            }
+            .pro_name{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                font-size: 0.3rem;
+                color: #333;
+                font-weight: bold;
+                margin-left: 0.24rem;
+            }
+            .pro_pos{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                font-size: 0.24rem;
+                color: #999;
+                margin-left: 0.24rem;
+            }
+        }
+        .pro_right{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        
+            .cancel{
+                width: 1.5rem;
+                height: 0.5rem;
+                background: rgba(22, 119, 255,.1);
+                border-radius: 0.26rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.24rem;
+                color: #1677FF;
+                margin-right: 0.24rem;
+            }
+        }
+    }
+  }
+  }
+}
+</style>