diff --git a/Yi.Bbs.Vue3/src/views/signIn/Index.vue b/Yi.Bbs.Vue3/src/views/signIn/Index.vue
new file mode 100644
index 00000000..6f7b51bf
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/signIn/Index.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="everyday-box">
+    <h4>每日签到</h4>
+    <h5>
+      <el-button class="btn-signin" type="primary" @click="signInOnclic">点击完成今日签到</el-button>当前已连续签到{{number}}天
+
+      <el-tooltip >
+        <template #content>
+          1.每天随机3-10<br />
+          2.连续签到每次累加多+1<br />
+          3.随机到以9结尾，额外再获取1倍*2<br />
+          4.每次签到最大上限为30
+        </template>
+ 
+       <span>说明<el-icon><WarningFilled /></el-icon></span>
+      </el-tooltip>
+ 
+    </h5>
+    
+
+    <el-calendar  v-model="signInRecordData">
+      <template #date-cell="{ data }">
+        <p :class="containSameDay(data.date) ? 'is-selected' : ''">
+          {{ data.day.split("-").slice(1).join("月") + "日" }}
+          <br/>
+          {{containSameDay(data.date)? "已签到✔️" : "" }}
+        </p>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, computed, nextTick, watch } from "vue";
+import { signIn, signInRecord } from "@/apis/integralApi.js";
+import useAuths from "@/hooks/useAuths";
+const { isLogin } = useAuths();
+const number=ref(0);
+const signInData=ref([]);
+const signInRecordData = ref(new Date());
+const signInOnclic = async () => {
+  const { data: data } = await signIn();
+
+  ElMessage({
+    message: `恭喜！运气爆棚，今日获得：${data.value} 钱钱`,
+    type: "success",
+  });
+ await loadSignInData();
+};
+
+const loadSignInData=async()=>{
+  if (isLogin) {
+    const {  data:{signInItem,currentContinuousNumber} } = await signInRecord();
+    number.value=currentContinuousNumber;
+    signInData.value=signInItem;
+  }
+}
+
+onMounted(async () => {
+  //登录后才去查询签到记录
+ await loadSignInData();
+});
+
+const containSameDay=(time)=>{
+ return signInData.value.filter(x=>isSameDay(x.creationTime,time)).length==0?false:true;
+}
+
+//判断两个时间是否为同一天
+const isSameDay=(time1, time2)=> {
+  const date1 = new Date(time1);
+  const date2 = new Date(time2);
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.everyday-box {
+  width: 100%;
+  height: 100%;
+  padding: 0px  30px;
+  .btn-signin
+{
+  margin-right: 20px;
+}
+h5{
+  color: #181818;
+}
+}
+.is-selected {
+  color: #1989fa;
+}
+</style>