feat:新增签到layout

Yi.Bbs.Vue3/src/layout/signIn/components/signBody.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="sign-box">
+    <div class="menuList">菜单栏</div>
+    <div class="page">
+      <RouterView />
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.sign-box {
+  display: flex;
+  justify-content: space-between;
+  width: 1300px;
+  height: 100%;
+  padding: 20px 0 10px;
+  .menuList {
+    width: 25%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+  .page {
+    width: 70%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+}
+</style>

Yi.Bbs.Vue3/src/layout/signIn/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="common-layout">
+    <el-container class="common-container">
+      <el-header
+        class="common-header"
+        ref="header"
+        :class="[isFixed ? 'fixed' : '']"
+      >
+        <AppHeader />
+      </el-header>
+      <el-main class="common-main">
+        <SignBody />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import AppHeader from "../AppHeader.vue";
+import SignBody from "./components/signBody.vue";
+
+const header = ref(null);
+const isFixed = ref(false);
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+const handleScroll = () => {
+  const scrollTop =
+    window.scrollY ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  const currentEle = header.value.$el;
+  if (scrollTop > currentEle.offsetTop) {
+    isFixed.value = true;
+  } else {
+    isFixed.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.common {
+  &-layout {
+    width: 100%;
+    height: 100%;
+  }
+  &-container {
+    width: 100%;
+    height: 100%;
+  }
+  &-header {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+  }
+  &-main {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+}
+
+.el-main {
+  margin: 0;
+  padding: 0;
+  min-height: 10rem;
+  background-color: #f0f2f5;
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+}
+</style>

Yi.Bbs.Vue3/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Layout from "../layout/Index.vue";
 import NotFound from "../views/error/404.vue";
 import LoginLayout from "../layout/LoginLayout.vue";
+import SignInLayout from "../layout/signIn/index.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior(to, from, savedPosition) {
@@ -98,6 +99,22 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/sign",
+      name: "signInLayout",
+      component: SignInLayout,
+      redirect: "/sign/everyday",
+      children: [
+        {
+          name: "everyday",
+          path: "everyday",
+          component: () => import("../views/signIn/index.vue"),
+          meta: {
+            title: "每日签到",
+          },
+        },
+      ],
+    },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
   ],
 });

Yi.Bbs.Vue3/src/views/home/Index.vue

@@ -85,6 +85,19 @@
               </div>
             </div>
           </div>
+          <!-- 签到 -->
+          <el-col :span="24">
+            <InfoCard header="签到">
+              <template #content>
+                <div class="signIn">
+                  <div class="left">欢迎来到意社区！</div>
+                  <div class="right">
+                    <div class="signIn-btn" @click="handleToSign">去签到</div>
+                  </div>
+                </div>
+              </template>
+            </InfoCard>
+          </el-col>
 
           <el-col :span="24">
             <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
@@ -176,6 +189,7 @@
 
 <script setup>
 import { onMounted, ref, reactive, computed, nextTick, watch } from "vue";
+import { useRouter } from "vue-router";
 import DisscussCard from "@/components/DisscussCard.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import PlateCard from "@/components/PlateCard.vue";
@@ -202,6 +216,8 @@ import useSocketStore from "@/stores/socket";
 import signalR from "@/utils/signalR";
 import useAuths from "@/hooks/useAuths";
 
+const router = useRouter();
+
 const { getToken } = useAuths();
 const token = getToken();
 
@@ -221,7 +237,6 @@ const isAllDiscussFinished = ref(false);
 const userAnalyseInfo = ref({});
 const onlineNumber = ref(0);
 
-const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
 const query = reactive({
   skipCount: 1,
@@ -281,6 +296,10 @@ const statisOptions = computed(() => {
   };
 });
 
+const handleToSign = () => {
+  router.push("/sign");
+};
+
 // 推送的实时人数获取
 const currentOnlineNum = computed(() => useSocketStore().getOnlineNum());
 watch(
@@ -397,6 +416,24 @@ watch(
       }
     }
   }
+  .signIn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #8a919f;
+    &-btn {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 74px;
+      height: 36px;
+      border-radius: 4px;
+      border: 1px solid rgba(30, 128, 255, 0.3);
+      background-color: rgba(30, 128, 255, 0.1);
+      color: #1e80ff;
+    }
+  }
 
   .VisitsLineChart >>> .el-card__body {
     padding: 0.5rem;

Yi.Bbs.Vue3/src/views/signIn/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="everyday-box">每日签到页持续coding中~~~</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.everyday-box {
+  width: 100%;
+  height: 100%;
+}
+</style>