小小美化

src/components/Login.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="login-container">
+    <!-- 背景视频 -->
+    <video src="../../public/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
+    <div class="video-overlay"></div>
+
+    <!-- 登录卡片 -->
     <el-card class="login-card" shadow="always">
       <template #header>
         <div class="card-header">
-          <h2>欢迎登录</h2>
+          <img src="../../public/logo.png" alt="logo" class="login-logo">
+          <h2>蜜雪冰城管理系统</h2>
           <p class="subtitle">请输入您的账号信息</p>
         </div>
       </template>
@@ -100,17 +106,58 @@ const handleLogin = async () => {
 
 <style scoped>
 .login-container {
+  position: relative;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   min-height: 100vh;
+  padding: 20px 60px 20px 20px;
+  overflow: hidden;
+}
+
+/* 背景视频 */
+.bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1;
+}
+
+/* 登录卡片 */
+.login-card {
+  position: relative;
+  z-index: 2;
+  width: 420px;
+  border-radius: 16px;
+  border: none;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.login-card :deep(.el-card__header) {
+  border-bottom: 2px solid #E60012;
   padding: 20px;
 }
 
-.login-card {
+.login-logo {
-  width: 420px;
+  display: block;
-  border-radius: 12px;
+  width: 60px;
-  border: none;
+  height: 60px;
+  margin: 0 auto 12px;
+  object-fit: contain;
 }
 
 .card-header {
@@ -119,7 +166,9 @@ const handleLogin = async () => {
 
 .card-header h2 {
   margin: 0 0 8px;
-  color: #303133;
+  color: #E60012;
+  font-size: 22px;
+  font-weight: 600;
 }
 
 .subtitle {
@@ -128,10 +177,33 @@ const handleLogin = async () => {
   color: #909399;
 }
 
+/* 输入框聚焦时红色边框 */
+.login-card :deep(.el-input__wrapper:focus-within) {
+  box-shadow: 0 0 0 1px #E60012 inset;
+}
+
+/* 登录按钮 */
 .login-btn {
   display: block;
   margin: 0 auto;
   text-align: center;
   width: 75%;
+  background: #E60012;
+  border-color: #E60012;
+}
+
+.login-btn:hover {
+  background: #d50010;
+  border-color: #d50010;
+}
+
+/* 记住我复选框 */
+.login-card :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #E60012;
+  border-color: #E60012;
+}
+
+.login-card :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+  color: #E60012;
 }
 </style>

src/components/contract.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { ref,computed } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const searchKeyword = ref('')
+const selectField = ref('1')
+const dateRange = ref([])
+const loading=ref(false)
+
+//过滤搜索结果
+const filteredContracts=computed(()=>{
+
+})
+
+//处理搜索
+const handleSearch=()=>{
+
+}
+
+//日期变更处理
+const handleDateChange=()=>{
+    handleSearch();
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchKeyword.value = ''
+  searchField.value = '1'
+  dateRange.value = []
+  handleSearch()
+}
+
+// 日期快捷选项
+const dateShortcuts = [
+  {
+    text: '最近一周',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 7 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近一个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 30 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  },
+  {
+    text: '最近三个月',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 90 * 24 * 3600 * 1000)
+      return [start, end]
+    }
+  }
+]
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return ''
+  return date
+}
+</script>
+
+<template>
+ <div class="contract-container">
+        <!-- 搜索栏区域 -->
+        <div class="contract-search">
+            <div class="search-row">
+                <el-input v-model="searchKeyword" style="max-width: 600px" placeholder="Please input"
+                    class="contract-search-with-select">
+                    <template #prepend>
+                        <el-select v-model="searchField" placeholder="Select" style="width: 115px">
+                            <el-option label="编号" value="1" />
+                            <el-option label="名称" value="2" />
+                            <el-option label="类型" value="3" />
+                        </el-select>
+                    </template>
+                    <template #append>
+                        <el-button :icon="Search" />
+                    </template>
+                </el-input>
+            </div>
+            <div class="search-row date-range">
+                <span class="date-label">日期范围</span>
+                <el-date-picker
+                    v-model="dateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    :shortcuts="dateShortcuts"
+                    @change="handleDateChange"
+                />
+            </div>
+
+            <el-button type="primary" @click="addCustomer" style="margin-left: 20px">
+                新增合同
+            </el-button>
+            <el-button type="default" @click="resetSearch" style="margin-left:20px">
+                重置
+            </el-button>
+        </div>
+
+        <!-- 合同列表 -->
+        <div class="contract-list">
+            <div v-if="loading" class="loading-container">
+                <el-skeleton :rows="5" animated />
+            </div>
+
+            <div v-else-if="filteredContracts.length===0" class="empty-container">
+                <el-empty description="暂无合同数据" />
+            </div>
+
+            <div v-else>
+                <div class="list-header">
+                    <span class="total-count">共找到{{ filteredContracts.length }}条合同</span>
+                </div>
+
+                <div class="contract-cards">
+                    <el-card
+                        v-for="contract in filteredContracts"
+                        :key="contract.id"
+                        class="contract-card"
+                        shadow="hover"
+                        @click="viewDetail"
+                    >
+                        <div class="contract-info">
+                            <div class="contract-no">
+                                <el-tag size="small" type="primary">编号</el-tag>
+                                <span class="no-value">{{ contract.contractNo }}</span>
+                            </div>
+                            <div class="contract-name">
+                                <el-icon><Document /></el-icon>
+                                <span class="name-value">{{ contract.contractName }}</span>
+                            </div>
+                            <div class="contract-date">
+                                <el-icon><Calendar /></el-icon>
+                                <span class="date-value">{{ formatDate(contract.signDate) }}</span>
+                            </div>
+                        </div>
+                    </el-card>
+                </div>
+            </div>
+        </div>
+
+        <!-- 新增客户表单 -->
+        <div v-if="showAddForm" class="customer-info-label">
+            <el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
+                <el-form-item label="姓名">
+                    <el-input v-model="form.name" placeholder="请输入姓名" />
+                </el-form-item>
+
+                <el-form-item label="电话">
+                    <el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
+                        placeholder="请输入11位手机号" style="width: 100%" />
+                </el-form-item>
+
+                <el-form-item label="地区">
+                    <el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
+                        placeholder="请选择省/市/区" clearable style="width: 100%" />
+                </el-form-item>
+
+                <el-form-item label="详细地址">
+                    <el-input v-model="form.address" placeholder=" 请输入详细地址" />
+                </el-form-item>
+
+                <el-form-item label="电子邮箱">
+                    <el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
+                </el-form-item>
+
+                <el-form-item label="代理商类型">
+                    <el-radio-group v-model="form.customer_type">
+                        <el-radio value="VIP">地区总代理</el-radio>
+                        <el-radio value="Normal">普通代理</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="saveCustomer">保存</el-button>
+                    <el-button type="danger" @click="cancelAdd">取消</el-button>
+                </el-form-item>
+            </el-form>
+
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/customer.vue

@@ -61,8 +61,9 @@ const clearSearch = () => {
                 <template #prepend>
                     <el-select v-model="select" placeholder="Select" style="width: 115px">
                         <el-option label="姓名" value="1" />
-                        <el-option label="电话" value="2" />
+                        <el-option label="编号" value="2" />
-                        <el-option label="邮箱" value="3" />
+                        <el-option label="电话" value="3" />
+                        <el-option label="邮箱" value="4" />
                     </el-select>
                 </template>
                 <template #append>
@@ -70,7 +71,7 @@ const clearSearch = () => {
                 </template>
             </el-input>
 
-            <el-button type="primary" @click="addCustomer" style="margin-left: 20px">
+            <el-button color="#E60012" :dark="isDark" @click="addCustomer" style="margin-left: 20px">
                 新增用户
             </el-button>
         </div>

src/components/home.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="home-container">
-    <div class="banner">
+    <!-- 顶部视频横幅 -->
-      <video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop></video>
+    <div class="video-banner">
-    </div>
+      <video src="../../public/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
-  </div>
+      <div class="video-overlay">
-
+        <h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
-  <div class="home-body">
-    <div class="first-head">雪王简介</div>
-    <div class="intro-content">
-      <div class="pic">
-        <img src="../../public/mixue.png" alt="雪王">
       </div>
-      <div class="txt">
+    </div>
-        <div class="second-head">
+
-          "我是手拿冰淇凌权杖的雪王"
+    <!-- 雪王简介 -->
-          <br>
+    <div class="intro-section">
-          "一生只爱冰淇凌与茶"
+      <div class="section-header">
+        <div class="header-line"></div>
+        <h2 class="section-title">雪王简介</h2>
+        <div class="header-line"></div>
+      </div>
+
+      <div class="intro-content">
+        <div class="pic-wrapper">
+          <img src="../../public/mixue.png" alt="雪王" class="xuewang-img">
+        </div>
+        <div class="txt-wrapper">
+          <div class="quote">
+            "我是手拿冰淇凌权杖的雪王"
+            <br>
+            "一生只爱冰淇凌与茶"
+          </div>
+          <ul class="info-list">
+            <li v-for="(item, index) in snowKingInfo" :key="index">
+              <span class="info-label">{{ item.label }}</span>
+              <span class="info-divider"></span>
+              <span class="info-value">{{ item.value }}</span>
+            </li>
+          </ul>
         </div>
-        <ul class="xuewang-list">
-          <li v-for="(item, index) in snowKingInfo" :key="index">
-            <span class="label">{{ item.label }}</span>
-            <span class="divider"></span>
-            <span class="value">{{ item.value }}</span>
-          </li>
-        </ul>
       </div>
     </div>
   </div>
@@ -43,152 +53,182 @@ const snowKingInfo = ref([
 
 <style scoped>
 .home-container {
-  padding: 0;
+  min-height: 100%;
-  text-align: center;
 }
 
-.banner {
+/* ========== 视频横幅 ========== */
-  width: 100%;
+.video-banner {
-  height: 90vh;
+  position: relative;
-  min-height: 500px;
+  width: calc(100% + 40px);
+  margin: -20px -20px 0 -20px;
+  height: 300px;
+  overflow: hidden;
 }
 
-.banner video {
+.bg-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.home-body {
+.video-overlay {
-  padding: 100px 80px;
+  position: absolute;
-  background: linear-gradient(180deg, #FEF7F7 0%, rgba(254, 247, 247, 0.00) 64.96%);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(230, 0, 18, 0.3) 0%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.first-head {
+.banner-title {
-  text-align: center;
+  color: #fff;
-  font-size: 58px;
+  font-size: 32px;
+  font-weight: 600;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  margin: 0;
+}
+
+/* ========== 简介区域 ========== */
+.intro-section {
+  padding: 40px 20px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.header-line {
+  flex: 1;
+  max-width: 200px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #E60012, transparent);
+}
+
+.section-title {
+  font-size: 32px;
   font-weight: 700;
-  color: #2E2F30;
+  color: #E60012;
-  margin-bottom: 68px;
+  margin: 0;
-  line-height: 1.17;
+  white-space: nowrap;
 }
 
 .intro-content {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  max-width: 1400px;
+  gap: 60px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
-.pic {
+/* 雪王图片 */
-  width: 750px;
+.pic-wrapper {
-  height: 660px;
+  flex-shrink: 0;
-  border-radius: 30px;
+  width: 400px;
+  height: 400px;
+  border-radius: 20px;
   overflow: hidden;
+  box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
+  transition: transform 0.3s;
 }
 
-.pic img {
+.pic-wrapper:hover {
+  transform: translateY(-5px);
+}
+
+.xuewang-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.5s;
 }
 
-.pic:hover img {
+/* 文字内容 */
-  transform: scale(1.05);
+.txt-wrapper {
+  flex: 1;
+  max-width: 500px;
 }
 
-.txt {
+.quote {
-  width: 676px;
+  font-size: 28px;
-}
-
-.second-head {
-  font-size: 46px;
   font-weight: 700;
   color: #E60012;
-  line-height: 1.33;
+  line-height: 1.5;
-  margin-bottom: 67px;
+  margin-bottom: 40px;
+  padding-left: 20px;
+  border-left: 4px solid #E60012;
 }
 
-.xuewang-list {
+.info-list {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
-.xuewang-list li {
+.info-list li {
   display: flex;
   align-items: center;
-  margin-bottom: 18px;
+  padding: 14px 0;
-  color: #666;
+  border-bottom: 1px dashed #eee;
-  font-size: 24px;
+  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
 }
 
-.xuewang-list li:last-child {
+.info-list li:last-child {
-  margin-bottom: 0;
+  border-bottom: none;
 }
 
-.xuewang-list .label {
+.info-label {
-  color: #2E2F30;
+  font-weight: 600;
-  font-weight: 700;
+  color: #303133;
-  min-width: 80px;
+  min-width: 70px;
 }
 
-.xuewang-list .divider {
+.info-divider {
   width: 1px;
-  height: 18px;
+  height: 16px;
-  background-color: #999;
+  background: #E60012;
-  margin: 0 15px;
+  margin: 0 16px;
 }
 
-.xuewang-list .value {
+.info-value {
-  display: flex;
+  color: #606266;
-  align-items: center;
+  flex: 1;
 }
 
-/* 响应式适配 */
+/* ========== 响应式适配 ========== */
-@media (max-width: 1200px) {
+@media (max-width: 900px) {
   .intro-content {
     flex-direction: column;
+    gap: 30px;
   }
 
-  .pic {
+  .pic-wrapper {
     width: 100%;
+    max-width: 400px;
     height: auto;
-    aspect-ratio: 750/660;
+    aspect-ratio: 1;
   }
 
-  .txt {
+  .txt-wrapper {
     width: 100%;
-    margin-top: 48px;
-  }
-}
-
-@media (max-width: 768px) {
-  .home-body {
-    padding: 50px 20px;
   }
 
-  .first-head {
+  .banner-title {
-    font-size: 36px;
+    font-size: 24px;
-    margin-bottom: 40px;
   }
 
-  .second-head {
+  .video-banner {
-    font-size: 28px;
+    height: 200px;
-    margin-bottom: 40px;
-  }
-
-  .xuewang-list li {
-    font-size: 18px;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .xuewang-list .divider {
-    display: none;
   }
 }
 </style>

src/components/page2.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-<h1>hello ,im 2</h1>
-</template>
-
-<style scoped>
-
-</style>

src/components/panel.vue

@@ -8,84 +8,83 @@ const isCollapse = ref(false)
 const switchFold = () => {
   isCollapse.value = !isCollapse.value
 }
-
-
 </script>
 
 <template>
   <el-container style="height: 100vh">
-    <el-header style="display: flex; align-items: center;">
+    <!-- 顶部导航栏 -->
+    <el-header class="app-header">
       <el-menu
         :ellipsis="false"
         mode="horizontal"
         router
-        style="flex: 1;"
+        class="header-menu"
       >
-        <!-- 左侧 -->
+        <!-- 左侧 Logo -->
-        <el-menu-item index="">
+        <el-menu-item index="" class="logo-item">
-          <h1 style="margin: 0;">信息管理系统</h1>
+          <img src="../../public/logo.png" alt="logo" class="logo-img">
+          <h1 class="logo-title">蜜雪冰城管理系统</h1>
         </el-menu-item>
 
-        <!-- 右侧：margin-left: auto 把它推到底部 -->
+        <!-- 右侧退出 -->
-        <el-menu-item index="/login" style="margin-left: auto">
+        <el-menu-item index="/login" class="logout-item">
           <el-icon><SwitchButton/></el-icon>
-          <template #title>LogOut</template>
+          <template #title>退出登录</template>
         </el-menu-item>
       </el-menu>
     </el-header>
 
     <el-container>
-      <el-aside style="display: flex; flex-direction: column" width="200px">
+      <!-- 侧边栏 -->
+      <el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
         <el-menu
           :collapse="isCollapse"
           :default-active="route.path"
           router
-          style="flex: 1; display: flex; flex-direction: column"
+          class="aside-menu"
         >
-          <!-- <el-sub-menu index="1">
+          <el-menu-item index="/panel/home">
-            <template #title>
+            <el-icon><House /></el-icon>
-              <el-icon><IconMenu/></el-icon>
+            <template #title>首页</template>
-              <span>一号栏</span>
+          </el-menu-item>
-            </template>
-          </el-sub-menu> -->
 
-           <el-menu-item index="/panel/home">
+          <el-menu-item index="/panel/customer">
-              <el-icon><House /></el-icon>
+            <el-icon><Avatar /></el-icon>
-              <template #title>首页</template>
+            <template #title>客户管理</template>
-            </el-menu-item>
+          </el-menu-item>
 
-          <el-menu-item index="/panel/page1">
+          <el-menu-item index="/panel/contract">
-              <el-icon><Avatar /></el-icon>
-              <template #title>客户管理</template>
-            </el-menu-item>
-
-          <el-menu-item index="/panel/page2">
             <el-icon><Document /></el-icon>
             <template #title>合同管理</template>
           </el-menu-item>
-          <el-menu-item index="/panel/page3">
+
+          <el-menu-item index="/panel/service">
             <el-icon><Service /></el-icon>
             <template #title>售后管理</template>
           </el-menu-item>
+
           <el-menu-item index="/panel/page3">
             <el-icon><IceTea /></el-icon>
             <template #title>产品管理</template>
           </el-menu-item>
+
           <el-menu-item index="/panel/page3">
             <el-icon><User /></el-icon>
             <template #title>员工管理</template>
           </el-menu-item>
 
-          <!-- ⭐ 关键：margin-top: auto 把它推到最底部 -->
+          <!-- 底部收缩按钮 -->
-          <el-menu-item style="margin-top: auto" @click="switchFold">
+          <el-menu-item index="" class="collapse-btn" @click="switchFold">
-            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}" ><ArrowLeft /></el-icon>
+            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
+              <ArrowLeft />
+            </el-icon>
             <template #title>收缩</template>
           </el-menu-item>
         </el-menu>
       </el-aside>
 
-      <el-main>
+      <!-- 主内容区 -->
-        <!-- ⭐ 这个 router-view 渲染嵌套的子路由（page1/page2/page3） -->
+      <el-main class="app-main">
         <router-view />
       </el-main>
     </el-container>
@@ -93,37 +92,121 @@ const switchFold = () => {
 </template>
 
 <style scoped>
+/* ========== 顶部导航栏 ========== */
+.app-header {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-bottom: 2px solid #E60012;
+  padding: 0;
+  height: 60px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
 
+.header-menu {
+  flex: 1;
+  border-bottom: none !important;
+}
+
+.logo-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-img {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+.logo-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #E60012;
+  white-space: nowrap;
+}
+
+.logout-item {
+  margin-left: auto !important;
+  color: #909399;
+}
+
+.logout-item:hover {
+  color: #E60012 !important;
+}
+
+/* ========== 侧边栏 ========== */
+.app-aside {
+  transition: width 0.3s ease;
+  background: #fff;
+  border-right: 1px solid #eee;
+}
+
+.aside-menu {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-right: none;
+}
+
+.aside-menu:not(.el-menu--collapse) {
+  width: 200px;
+}
+
+/* 菜单项样式 */
+.aside-menu .el-menu-item {
+  height: 50px;
+  line-height: 50px;
+  margin: 4px 8px;
+  border-radius: 8px;
+  color: #606266;
+  transition: all 0.3s;
+}
+
+.aside-menu .el-menu-item:hover {
+  background: #FEF0F0;
+  color: #E60012;
+}
+
+.aside-menu .el-menu-item.is-active {
+  background: #E60012;
+  color: #fff;
+}
+
+.aside-menu .el-menu-item.is-active .el-icon {
+  color: #fff;
+}
+
+/* 底部收缩按钮 */
+.collapse-btn {
+  margin-top: auto !important;
+}
+
+/* ========== 主内容区 ========== */
+.app-main {
+  padding: 20px;
+  background: #f5f7fa;
+  overflow-y: auto;
+}
+
+/* ========== 收缩动画 ========== */
 .rotate-180-animation {
-  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
+  animation: rotate-180 0.3s ease-in-out forwards;
-  animation: rotate-180 0.3s ease-in-out;
-  animation-fill-mode:forwards;
 }
 
 .rotate-180-animation-reverse {
-  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
+  animation: rotate-180-reverse 0.3s ease-in-out forwards;
-  animation: rotate-180-reverse 0.3s ease-in-out;
-  animation-fill-mode:forwards;
 }
 
 @keyframes rotate-180 {
-  from {
+  from { transform: rotate(0deg); }
-    transform: rotate(0deg);
+  to { transform: rotate(180deg); }
-  }
-  to {
-    transform: rotate(180deg);
-  }
 }
 
 @keyframes rotate-180-reverse {
-  from {
+  from { transform: rotate(180deg); }
-    transform: rotate(180deg);
+  to { transform: rotate(0deg); }
-  }
-  to {
-    transform: rotate(0deg);
-  }
 }
-
-
 </style>
-

src/router.js

@@ -2,9 +2,9 @@ import {createRouter, createWebHistory} from "vue-router";
 import Login from "./components/Login.vue";
 import Home from "./components/home.vue"
 import Panel from "./components/panel.vue";
-import Page1 from "./components/page1.vue";
+import Customer from "./components/customer.vue";
-import Page2 from "./components/page2.vue";
+import Contract from "./components/contract.vue";
-import Page3 from "./components/page3.vue";
+import Service from "./components/service.vue";
 
 const routes = [
     { path: "/", redirect: "/login" },
@@ -15,9 +15,9 @@ const routes = [
         redirect: "/panel/home",
         children: [
             { path: "home", component:Home},
-            { path: "page1", component: Page1 },
+            { path: "customer", component: Customer },
-            { path: "page2", component: Page2 },
+            { path: "contract", component: Contract },
-            { path: "page3", component: Page3 },
+            { path: "service", component: Service },
         ],
     },
 ]