Merge remote-tracking branch 'origin/master'

# Conflicts:
#	vue_project/src/api/index.js
#	vue_project/src/components/LoginForm.vue

vue_project/package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
     "@element-plus/icons-vue": "^2.3.1",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fullcalendar/bootstrap5": "^6.1.13",
     "@fullcalendar/core": "^6.1.13",
     "@fullcalendar/daygrid": "^6.1.13",
     "@fullcalendar/interaction": "^6.1.13",
@@ -19,19 +21,18 @@
     "@fullcalendar/vue3": "^6.1.13",
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
-    "@nextui-org/navbar": "^2.0.32",
     "@vue/babel-plugin-jsx": "^1.2.2",
     "@vueuse/components": "^10.10.0",
     "@vueuse/core": "^10.10.0",
     "axios": "^1.7.2",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "core-js": "^3.8.3",
     "element-plus": "^2.7.4",
     "js-cookie": "^3.0.5",
-    "mdb-ui-kit": "^7.3.0",
     "pinia": "^2.1.7",
     "vue": "^3.2.13",
-    "vue-router": "^4.3.2",
-    "vuetify": "^3.6.8"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

vue_project/src/api/index.js

@@ -6,14 +6,17 @@ export const login = (data) => {
 };
 
 // 注册获取验证码的接口 
-export const registerVerify = (account) => {
+export const registerVerify = (data) => {
   return request({
     method: "post",
     url: "register/verify",
     headers: {
       "Content-Type": "application/json",
     },
-    data: `phone:${account}`
+    data: {
+      "phone":data,
+      "type":"register"
+    }
   })
 };
 

vue_project/src/assets/images/exome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="184" height="184" fill="none" viewBox="0 0 184 184"><g fill="#F5841B" fill-rule="evenodd" clip-path="url(#a)" clip-rule="evenodd"><path d="m23 173.5.1-.7v.7Zm37.7-42.6a278.3 278.3 0 0 1-27 19.3 379.5 379.5 0 0 1 52.7-64 378.5 378.5 0 0 1 64-52.6 272 272 0 0 1-19.5 27.1 50 50 0 0 1 10 22.4c31.8-37.5 48.9-70.3 39.6-79.6-11.8-11.7-60.8 18.4-109.6 67.2-48.9 48.8-79 97.9-67.2 109.6 9.3 9.3 42-7.7 79.4-39.3a50 50 0 0 1-22.4-10Zm113-108h-.7.6ZM161 10.3l-.1.7v-.7ZM11 160.8h-.6.7Z"/><path d="M11 23.1h.6a2 2 0 0 1-.7 0Zm75.8 74.7a378.6 378.6 0 0 1-52.6-64 274 274 0 0 1 26.2 18.8 50 50 0 0 1 22.2-10.4C45.6 11.1 13.3-5.5 4 3.7-7.6 15.4 22.5 64.5 71.3 113.3s97.9 79 109.6 67.2c9.3-9.3-7.8-42.3-39.8-80a50 50 0 0 1-10.2 22.2 304 304 0 0 1 20 27.7 378.6 378.6 0 0 1-64-52.6Zm74.7 75.9v-.7.7ZM174 161h-.7.7ZM23.6 11.2v-.7.7Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h184v184H0z"/></clipPath></defs></svg>

vue_project/src/components/CalendarTable.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="calendar-table">
-    <table>
-      <thead>
-        <tr>
-          <th>日</th>
-          <th>一</th>
-          <th>二</th>
-          <th>三</th>
-          <th>四</th>
-          <th>五</th>
-          <th>六</th>
-        </tr>
-      </thead>
-      <tbody>
-        <!-- 填充的月份数据 -->
-        <tr v-for="(week, weekIndex) in formattedCalendar" :key="weekIndex">
-          <td v-for="(day, dayIndex) in week" :key="dayIndex" :class="{ 'event': day.event }">
-            <span v-if="day.date !== null">{{ day.date }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CalendarTable',
-  data() {
-    // 起始和结束日期
-    const startDate = new Date(2023, 7, 26); // 2023年8月26日，注意月份减1
-    const endDate = new Date(2024, 1, 16); // 2024年2月16日，注意结束日期需加一天以包含该日
-
-    // 初始化日期数组并填充起始日期前的空位以对齐星期
-    let currentDate = new Date(startDate);
-    currentDate.setDate(currentDate.getDate() - currentDate.getDay()); // 回退到当周的周一
-    let calendarData = [];
-
-    while (currentDate <= endDate) {
-      calendarData.push(new Date(currentDate));
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
-
-    // 将日期分组到每周
-    const weeks = [];
-    for (let i = 0; i < calendarData.length; i += 7) {
-      weeks.push(calendarData.slice(i, i + 7));
-    }
-
-    // 假设的事件数据，这里应根据实际需求添加
-    const events = {
-      '2023-08-26': '示例事件1', // 假定示例事件
-      // ...其他事件
-      '2024-02-16': '示例事件2' // 结束日期的事件
-    };
-
-    // 格式化日期并标记事件
-    const formattedCalendar = weeks.map(week =>
-      week.map(day => {
-        const dateString = day.toISOString().split('T')[0];
-        return {
-          date: day.getDate(),
-          event: events[dateString]
-        };
-      })
-    );
-
-    return {
-      formattedCalendar
-    };
-  }
-};
-</script>
-
-<style scoped>
-.calendar-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.calendar-table th,
-.calendar-table td {
-  border: 1px solid #ddd;
-  padding: 4px;
-  text-align: center;
-}
-
-.calendar-table th {
-  background-color: #ccc;
-  font-weight: bold;
-}
-
-.calendar-table td {
-  height: 50px;
-  width: 50px;
-  padding: 13px;
-}
-
-.calendar-table tr:nth-child(even) td {
-  background-color: #f8f8f8;
-}
-
-.calendar-table .event {
-  font-weight: bold;
-  color: purple;
-}
-
-.calendar-table td span {
-  display: block;
-  text-align: left;
-  margin-left: 5px;
-}
-</style>

vue_project/src/components/LoginForm.vue

@@ -2,51 +2,52 @@
   <div class="content">
     <div class="wrapper">
       <div class="form-wrapper">
-        <div class="signup-form">
+        <div class="login-form">
           <div class="tips">
-            <h1>注册账号.</h1>
-            <span>已经有账号?</span>
-            <router-link to="/login"
-              ><span class="login-into">登录</span></router-link
+            <h1>登录.</h1>
+            <span>没有账号?</span>
+            <router-link to="/register"
+              ><span class="signup-into">注册</span></router-link
             >
           </div>
           <div class="form-wrapper">
-            <!-- 用户名 -->
+            <!-- 账号 -->
             <div class="input-wrapper user">
-              <input
-                type="text"
-                class="inputs"
-                v-model="registerForm.username"
-              />
+              <input type="text" class="inputs" v-model="loginForm.username" />
             </div>
             <!-- 密码 -->
             <div class="input-wrapper pwd">
               <input
                 type="password"
                 class="inputs"
-                v-model="registerForm.password"
+                v-model="loginForm.password"
               />
             </div>
-            <!-- 电话号码 -->
-            <div class="input-wrapper phone">
-              <input
-                type="text"
-                class="inputs"
-                v-model="registerForm.account"
-              />
+
+            <div class="input-wrapper veri-code">
+              <input type="text" class="inputs veri-code-input" />
             </div>
-            <!-- 验证码 -->
-            <div class="input-wrapper veri-code" style="opacity: 1; z-index: 1">
-              <input
-                type="text"
-                class="inputs veri-code-input"
-                v-model="registerForm.captcha"
-              />
-              <span class="veri-code-tips" @click="veriCodeTipsClick"
-                >Click To Get</span
-              >
+
+            <div class="btn-wrapper">
+              <button class="form-btn login-btn" @click="onLogin">
+                Sign In
+              </button>
+            </div>
+            <div class="other-login">
+              <div class="divider">
+                <span class="line"></span>
+                <span class="divider-text">or</span>
+                <span class="line"></span>
+              </div>
+              <div class="other-login-wrapper">
+                <div class="other-login-item">
+                  <img src="../assets/images/qq (1).png" alt="QQ" />
+                </div>
+                <div class="other-login-item">
+                  <img src="../assets/images/微信 (1).png" alt="WeChat" />
+                </div>
+              </div>
             </div>
-            <button class="form-btn" @click="">Sign Up</button>
           </div>
         </div>
       </div>
@@ -54,86 +55,40 @@
   </div>
 </template>
 
-
 <script setup>
 import { ref } from "vue";
-import { registerVerify } from "../api/index";
+import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
+import { login } from "../api/index";
+const router = useRouter();
 
-let reckonTime; //计数器
-let reckonTimeFlag = 5; //倒计时
-const reckonFlag = ref(true); //重复点击判断
-
-const registerForm = ref({
-  username: "", //用户名
-  password: "", //密码
-  account: "", //手机号
-  captcha: "", //验证码
+const loginForm = ref({
+  username: "",
+  password: "",
 });
 
-//定时器
-const countDown = () => {
-  // 设置验证码读取效果
-  let veriCodeTips = document.querySelector(".veri-code-tips");
-  veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`;
-  reckonTimeFlag--;
-  if (reckonTimeFlag < 0) {
-    clearInterval(reckonTime);
-    reckonTimeFlag = 5;
-    veriCodeTips.innerHTML = `Click To Get`;
-    veriCodeTips.style.color = "rgb(39, 150, 247)";
-  }
-};
-
-//点击事件触发的方法
-const veriCodeTipsClick = () => {
-  // 防止重复点击  重复触发计数器
-  if (registerForm.value.account == "" || registerForm.value.account == null) {
-    ElMessage.error("手机号不能为空");
-  } else {
-    if (!reckonFlag.value) {
-      return;
-    } else {
-      reckonFlag.value = false;
-      setTimeout(() => {
-        reckonFlag.value = true;
-      }, 5000);
-      let veriCodeTips = document.querySelector(".veri-code-tips");
-      veriCodeTips.style.color = "rgb(153, 151, 151)";
-      reckonTime = setInterval(countDown, 1000);
-      countDown();
-      getRegisterVerify();
-    }
-  }
-};
-
-// 验证码获取
-const getRegisterVerify = async () => {
-  ElMessage.success("手机号是:" + registerForm.value.account);
-  await registerVerify(registerForm.value.account).then(
+//向服务器发送请求
+const onLogin = async () => {
+  ElMessage.info("正在登录");
+  await login(loginForm.value).then(
     (response) => {
-      ElMessage.success("验证码是：" + response);
+      console.log(response);
+      if (response.data.data.code == 501) {
+        ElMessage.error("账号或密码错误，请重试");
+      } else {
+        ElMessage.success("登录成功");
+        router.push({ path: "/index" });
+      }
     },
     (error) => {
-      console.log("注册失败");
-    }
-  );
-};
-
-// 注册校验
-const onRegister = async () => {
-  await registerApi(registerForm.value).then(
-    (response) => {
-      ElMessage.success("验证码是：" + response);
-    },
-    (error) => {
-      console.log("注册失败");
+      console.log("登录失败");
     }
   );
 };
 </script>
 
 <style scoped>
-@import url("../assets/css/style.css");
+/* @import url("../assets/css/style.css"); */
+
 @import url("../assets/css/style.scss");
 </style>

vue_project/src/components/RegisterForm.vue

@@ -6,16 +6,47 @@
           <div class="tips">
             <h1>注册账号.</h1>
             <span>已经有账号?</span>
-            <router-link to="/login"><span class="login-into">登录</span></router-link>
+            <router-link to="/login"
+              ><span class="login-into">登录</span></router-link
+            >
           </div>
           <div class="form-wrapper">
+            <!-- 用户名 -->
             <div class="input-wrapper user">
-              <input type="text" class="inputs">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.username"
+              />
             </div>
+            <!-- 密码 -->
             <div class="input-wrapper pwd">
-              <input type="password" class="inputs">
+              <input
+                type="password"
+                class="inputs"
+                v-model="registerForm.password"
+              />
             </div>
-            <button class="form-btn">创建新账号</button>
+            <!-- 电话号码 -->
+            <div class="input-wrapper phone">
+              <input
+                type="text"
+                class="inputs"
+                v-model="registerForm.account"
+              />
+            </div>
+            <!-- 验证码 -->
+            <div class="input-wrapper veri-code" style="opacity: 1; z-index: 1">
+              <input
+                type="text"
+                class="inputs veri-code-input"
+                v-model="registerForm.captcha"
+              />
+              <span class="veri-code-tips" @click="veriCodeTipsClick"
+                >Click To Get</span
+              >
+            </div>
+            <button class="form-btn" @click="onRegister">Sign Up</button>
           </div>
         </div>
       </div>
@@ -23,22 +54,95 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-     
-    };
-  },
-  methods: {
-    
+
+<script setup>
+import { ref } from "vue";
+import { registerVerify } from "../api/index";
+import { ElMessage } from "element-plus";
+
+let reckonTime; //计数器
+let reckonTimeFlag = 5; //倒计时
+const reckonFlag = ref(true); //重复点击判断
+
+const registerForm = ref({
+  username: "", //用户名
+  password: "", //密码
+  account: "", //手机号
+  captcha: "", //验证码
+});
+
+//定时器
+const countDown = () => {
+  // 设置验证码读取效果
+  let veriCodeTips = document.querySelector(".veri-code-tips");
+  veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`;
+  reckonTimeFlag--;
+  if (reckonTimeFlag < 0) {
+    clearInterval(reckonTime);
+    reckonTimeFlag = 5;
+    veriCodeTips.innerHTML = `Click To Get`;
+    veriCodeTips.style.color = "rgb(39, 150, 247)";
   }
+};
 
+//点击事件触发的方法
+const veriCodeTipsClick = () => {
+  // 防止重复点击  重复触发计数器
+  if (registerForm.value.account == "" || registerForm.value.account == null) {
+    ElMessage.error("手机号不能为空");
+  } else {
+    if (!reckonFlag.value) {
+      return;
+    } else {
+      reckonFlag.value = false;
+      setTimeout(() => {
+        reckonFlag.value = true;
+      }, 5000);
+      let veriCodeTips = document.querySelector(".veri-code-tips");
+      veriCodeTips.style.color = "rgb(153, 151, 151)";
+      reckonTime = setInterval(countDown, 1000);
+      countDown();
+      getRegisterVerify();
+    }
+  }
+};
+
+// 验证码获取
+const getRegisterVerify = async () => {
+  await registerVerify(registerForm.value.account).then(
+    (response) => {
+      if (response.data.status == 200) {
+        ElMessage.success("验证码：" + response.data.data);
+        registerForm.value.captcha = response.data.data;
+      } else if (response.data.status == 500 && response.data.data != "501") {
+        ElMessage.warning(
+          "验证码10分钟内有效, 请勿重复点击：" + response.data.data
+        );
+        registerForm.value.captcha = response.data.data;
+      } else if (response.data.data == 501) {
+        ElMessage.error("手机号已经注册");
+      }
+    },
+    (error) => {
+      console.log("验证码获取失败");
+    }
+  );
+};
+
+// 注册校验
+const onRegister = async () => {
+  await registerApi(registerForm.value).then(
+    (response) => {
+      ElMessage.success("注册成功" + response);
+    },
+    (error) => {
+      console.log("注册失败");
+    }
+  );
 };
 </script>
 
 <style scoped>
-  @import url('../assets/css/style.css');
-  @import url('../assets/css/style.scss');
-
+@import url("../assets/css/style.css");
+@import url("../assets/css/style.scss");
 </style>

vue_project/src/components/demo.vue

@@ -1,93 +0,0 @@
-<template>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions" class="calendar"></FullCalendar>
-  
-</template>
-
-<script>
-import FullCalendar from '@fullcalendar/vue3';
-import dayGridPlugin from '@fullcalendar/daygrid';
-
-export default {
-  components: {
-    FullCalendar
-  },
-  data() {
-    return {
-      calendarOptions: {
-        plugins: [dayGridPlugin],
-        initialView: 'dayGridYear',
-        locale: 'zh-cn', // 设置语言为中国简体中文
-        headerToolbar: {
-          left: 'prev,next today',
-          center: 'title',
-          right: 'dayGridYear,dayGridMonth,dayGridWeek,dayGridDay' // 更新按钮以匹配新的视图
-        },
-        views: {
-          customYearGrid: { // 创建一个新的自定义视图
-            type: 'dayGrid',
-            duration: { months: 12 }, // 覆盖一整年
-            slotDuration: '24:00:00', // 每天显示24小时
-            slotLabelInterval: { hours: 24 }, // 标签间隔为一天
-            slotLabelFormat: [
-              { weekday: 'short', day: 'numeric', omitCommas: true } // 显示星期和日期，去掉逗号
-            ],
-            titleFormat: { year: 'numeric' }, // 日历标题显示年份
-            buttonText: {
-              today: "今天",
-              year: "年",
-              month: "月",
-              week: "周",
-              day: "日",
-              list: "周列表",
-            },
-            dayMaxEvents: true, // 允许多行显示事件
-          },
-        },
-        firstDay: 1,
-        unselectAuto: true,
-        selectable: true,
-        buttonText: {
-          today: "今天",
-          year: "年",
-          month: "月",
-          week: "周",
-          day: "日",
-          list: "周列表",
-        },
-        height: 1150,
-        validRange: this.validRange,
-        events: [
-          {
-            start: '2024-11-10T10:00:00',
-            end: '2024-11-10T16:00:00',
-            display: 'background'
-          }
-        ],
-        datesSet: this.datesSet,
-        eventClick: this.handleEventClick,
-        dateClick: this.handleDateClick,
-        eventDrop: this.calendarEventDropOrResize,
-        eventResize: this.calendarEventResize,
-        displayEventTime: false,
-      },
-      validRange: {
-        start: "2021-01-01",
-        end: "2021-12-31",
-      },
-    };
-  },
-  methods: {
-    // ...（之前的methods内容保持不变）
-  },
-};
-</script>
-
-<style scoped>
-.calendar {
-  width: 70%;
-  height: 100%;
-  margin-left: 250px;
-  margin-top: 70px;
-  margin-bottom: 70px;
-}
-</style>

vue_project/src/components/index.vue

@@ -6,20 +6,20 @@
   <!-- header -->
   <indexHeader/>
 </div>
-<demoVue/>
+<indexBody/>
 
 </template>
 
 <script>
 import indexNavVue from './indexNav.vue';
 import indexHeader from './indexHeader.vue';
-import demoVue from './demo.vue';
+import indexBody from './indexBody.vue';
 
 export default {
     components: {
         indexNavVue,
         indexHeader,
-        demoVue,
+        indexBody,
     }
 }
 </script>

vue_project/src/components/indexBody.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+
+  </div>
+
+
+  <FullCalendar class="calendar" ref="fullCalendar" :options="calendarOptions">
+  </FullCalendar>
+
+</template>
+
+
+<script>
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import multiMonthPlugin from "@fullcalendar/multimonth";
+import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+import { onMounted } from "vue";
+
+
+
+
+export default {
+
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    FullCalendar,
+
+  },
+
+  data() {
+    return {
+      calendarOptions: {
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, multiMonthPlugin, bootstrap5Plugin],
+        initialView: "dayGridYear",
+        locale: "zh",
+        firstDay: 1,
+        unselectAuto: true, //当点击页⾯⽇历以外的位置时，是否⾃动取消当前的选中状态。false是不取消
+        selectable: true, //是否可以选中日历格
+        editable: true,
+        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
+        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
+        buttonText: {
+          prev: "上一页",
+          next: "下一页",
+          today: "今天",
+          month: "月",
+          week: "周",
+          day: "日",
+          list: "周列表",
+        },
+        headerToolbar: {
+          left: "prev,next today",
+          center: "title",
+          right: "dayGridYear,multiMonthYearGrid,multiMonthYearStack,dayGridMonth,timeGridWeek,timeGridDay listWeek",
+          themeSystem: "bootstrap5",
+        },
+        views: {
+          multiMonthYearGrid: {
+            type: 'multiMonthYear',
+            buttonText: '年(网格)'
+          },
+          multiMonthYearStack: {
+            type: 'multiMonthYear',
+            buttonText: '年(叠)',
+            multiMonthMaxColumns: 1
+          },
+          dayGridYear: {
+            buttonText: '年(连续的)'
+          }
+        },
+
+        height: 1150,
+        validRange: this.validRange, //设置可显示的总日期范围
+        events: [], //背景色 (添加相同时间的背景色时颜色会重叠)
+        datesSet: this.datesSet, //日期渲染；修改日期范围后触发
+        eventMouseEnter: this.handleEventMouseEnter, //点击日程触发
+        dateClick: this.handleDateClick, //点击日期触发
+        eventDrop: this.calendarEventDropOrResize, //拖动事件触发
+        eventResize: this.calendarEventDropOrResize, //缩放事件触发
+        displayEventTime: false, //不显示具体时间
+        themeSystem: 'bootstrap5',
+        aspectRatio: 1.2, //宽高比
+
+
+      },
+      validRange: {
+        start: "2022-08-26",
+        end: "2023-02-16",
+      },
+
+    };
+
+  },
+  onMounted() {
+    console.log(1);
+      setTimeout(() => { 
+        
+        console.log(this.calendarOptions); }, 2000)
+
+    },
+  methods: {
+    datesSet(info) {
+      //注意：该方法在页面初始化时就会触发一次
+      console.log(info);
+      // this.search()  //请求本页数据
+      this.calendarOptions.events = [
+        {
+          id: 111,
+          title: "国庆节放假",
+          start: "2024-10-01",
+          end: "2024-10-08",
+          color: "#ffcc99",
+          editable: true, //允许拖动缩放，不写默认就是false
+          overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
+        },
+        {
+          id: 222,
+          title: "五一劳动节放假",
+          start: "2024-05-01",
+          end: "2024-05-06",
+          color: "#ffcc99",
+          editable: true, //允许拖动缩放
+        },
+        {
+          id: 333,
+          title: "端午节放假",
+          start: "2024-06-08",
+          end: "2024-06-11",
+          color: "#ffcc99",
+          editable: true,
+        },
+      ];
+
+    },
+
+
+  },
+};
+
+</script>
+
+<style scoped>
+.calendar {
+  width: 70%;
+  height: 100%;
+  margin-left: 250px;
+  margin-top: 70px;
+  margin-bottom: 70px;
+}
+</style>

vue_project/src/components/indexNav.vue

@@ -15,7 +15,7 @@
                 </div>
                 <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                     <div class="flex flex-shrink-0 items-center">
-                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                        <img class="h-8 w-auto" src="../assets/images/exome.svg"
                             alt="Your Company" />
                     </div>
                     <div class="hidden sm:ml-6 sm:block">
@@ -43,7 +43,7 @@
                                 <span class="absolute -inset-1.5" />
                                 <span class="sr-only">Open user menu</span>
                                 <img class="h-8 w-8 rounded-full"
-                                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                    src="../assets/images/商务职业男.png"
                                     alt="" />
                             </MenuButton>
                         </div>

vue_project/src/main.js

@@ -12,6 +12,8 @@ import 'element-plus/theme-chalk/index.css';
 // 引入pinia
 import pinia from './stores'  ;//引入
 import './assets/css/Tailwind.css';
+// bootstrap
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 
 

vue_project/src/router/router.js

@@ -30,7 +30,7 @@ export const staticRoutes = [
     {
       //注册
       path: "/demo",
-      component: () => import("../components/demo.vue"),
+      component: () => import("../components/indexBody.vue"),
       name: "demo",
     }
     // {