登录授权

src/renderer/src/router/index.ts

@@ -2,21 +2,21 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import homeIndex from '@/views/home/index.vue'
 
 const routes = [
-  // {
-  //   path: '/',
-  //   component: () => import('@/views/login/index.vue'),
-  //   hidden: true
-  // },
   {
     path: '/',
-    component: () => import('@/views/author/index.vue'),
-    hidden: true
-  },
-  {
-    path: '/login',
     component: () => import('@/views/login/index.vue'),
     hidden: true
   },
+  // {
+  //   path: '/',
+  //   component: () => import('@/views/author/index.vue'),
+  //   hidden: true
+  // },
+  // {
+  //   path: '/login',
+  //   component: () => import('@/views/login/index.vue'),
+  //   hidden: true
+  // },
   { path: '/ts', component: () => import('@/views/TS/list.vue'), hidden: true },
   { path: '/tsEdit', name: 'tsEdit', component: () => import('@/views/TS/edit.vue'), hidden: true },
   { path: '/404', component: () => import('@/views/404.vue'), hidden: true },

src/renderer/src/views/components/headers/components/setTool/setTool.vue

@@ -13,8 +13,18 @@
         </div>
       </div>
     </div> -->
-    <el-tooltip v-for="(item, i) of setList" :key="item.id" :content="t('iconTitle.' + item.name)" effect="customized" :hide-after="0">
+    <el-tooltip
-      <div class="set_item" :class="{ 'last-item': i === setList.length - 1 }" @click="item.callback">
+      v-for="(item, i) of setList"
+      :key="item.id"
+      :content="t('iconTitle.' + item.name)"
+      effect="customized"
+      :hide-after="0"
+    >
+      <div
+        class="set_item"
+        :class="{ 'last-item': i === setList.length - 1 }"
+        @click="item.callback"
+      >
         <svg-icon :name="item.icon" :size="20"></svg-icon>
       </div>
     </el-tooltip>
@@ -48,7 +58,12 @@ const logout = async (e) => {
     window.earth = null
   }
   if (res.code === 200) {
-    router.push({ path: '/login' })
+    router.push({
+      path: '/',
+      query: {
+        type: 'logout'
+      }
+    })
     // localStorage.clear()
   }
 }
@@ -69,8 +84,8 @@ const setList = ref([
     icon: 'beidou',
     name: 'locate',
     className: 'header_public',
-    dbcallback: (e) => { },
+    dbcallback: (e) => {},
-    callback: (e) => { }
+    callback: (e) => {}
     //   dbcallback: this.flyTo,
     //   callback: this.locate,
   },
@@ -152,10 +167,12 @@ ipcRenderer.on('fullscreen-status-changed', (event, isFullscreen) => {
     top: 0;
     bottom: 0;
     width: 1px;
-    background: linear-gradient(180deg,
+    background: linear-gradient(
-        rgba(var(--color-base1), 0),
+      180deg,
-        rgba(var(--color-base1), 1),
+      rgba(var(--color-base1), 0),
-        rgba(204, 204, 204, 0));
+      rgba(var(--color-base1), 1),
+      rgba(204, 204, 204, 0)
+    );
   }
 
   .set_item.last-item::after {

src/renderer/src/views/login/index.vue

@@ -1,20 +1,35 @@
 <template>
-  <div class="login-container" style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0">
+  <div
-    <transition name="video-fade" mode="out-in"
+    class="login-container"
-      style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover">
+    style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0"
+  >
+    <transition
+      name="video-fade"
+      mode="out-in"
+      style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"
+    >
       <!-- 第一个视频，播放一次 -->
-      <video v-if="!isFirstVideoPlayed" ref="firstVideoRef" key="first-video" muted @ended="onFirstVideoEnded"
+      <!-- <video v-if="!isFirstVideoPlayed" ref="firstVideoRef" key="first-video" muted @ended="onFirstVideoEnded"
         src="../../assets/video/login_front.mp4"
-        style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"></video>
+        style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"></video> -->
       <!-- 第二个视频，循环播放 -->
-      <video v-else key="second-video" autoplay loop muted src="../../assets/video/login_feature.mp4"
+      <!-- <video v-else key="second-video" autoplay loop muted src="../../assets/video/login_feature.mp4"
-        style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"></video>
+        style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"></video> -->
+      <video
+        key="second-video"
+        autoplay
+        loop
+        muted
+        src="../../assets/video/author_video.mp4"
+        style="position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; object-fit: cover"
+      ></video>
     </transition>
-    <div class="rightBox" v-if="isDesktop">
+    <!-- 登录页面 -->
+    <div class="rightBox" v-if="isDesktop && !isAuth">
       <el-button size="small" :icon="Setting" @click="serviceDialog = true"> </el-button>
       <el-button size="small" :icon="SwitchButton" @click="goExit"> </el-button>
     </div>
-    <transition name="fade">
+    <transition name="fade" v-if="!isAuth">
       <div v-show="true" class="content">
         <div class="titleBox">
           <div class="titleItem">
@@ -24,45 +39,95 @@
             </div>
           </div>
         </div>
-        <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginFormRef"
+        <el-form
-          label-position="left">
+          class="login-form"
+          autoComplete="on"
+          :model="loginForm"
+          :rules="loginRules"
+          ref="loginFormRef"
+          label-position="left"
+        >
           <el-form-item prop="username">
-            <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名"
+            <el-input
-              :prefix-icon="User" />
+              name="username"
+              type="text"
+              v-model="loginForm.username"
+              autoComplete="on"
+              placeholder="请输入用户名"
+              :prefix-icon="User"
+            />
           </el-form-item>
           <el-form-item prop="password">
-            <el-input type="password" @keyup.enter.native="handleLogin(loginFormRef)" v-model="loginForm.password"
+            <el-input
-              autoComplete="on" placeholder="请输入密码" :prefix-icon="Unlock" show-password></el-input>
+              type="password"
+              @keyup.enter.native="handleLogin(loginFormRef)"
+              v-model="loginForm.password"
+              autoComplete="on"
+              placeholder="请输入密码"
+              :prefix-icon="Unlock"
+              show-password
+            ></el-input>
           </el-form-item>
           <el-form-item class="rememberForget">
             <!-- justify-content: space-around;align-items: center; -->
             <div style="display: flex">
-              <svg class="checkbox-svg" v-show="checkboxVModel" style="pointer-events: none;"
+              <svg
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"
+                class="checkbox-svg"
-                viewBox="0 0 14 14" fill="none">
+                v-show="checkboxVModel"
-                <path fill="rgba(var(--color-base1), 1)"
+                style="pointer-events: none"
-                  d="M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z">
+                xmlns="http://www.w3.org/2000/svg"
-                </path>
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+              >
+                <path
+                  fill="rgba(var(--color-base1), 1)"
+                  d="M7.34788e-16 2L-2.20436e-15 12C-2.40727e-15 13.1046 0.895431 14 2 14L12 14C13.1046 14 14 13.1046 14 12L14 2C14 0.895431 13.1046 -1.46958e-15 12 -1.46958e-15L2 -1.46958e-15C0.895431 -1.60485e-15 8.02424e-16 0.895431 7.34788e-16 2Z"
+                ></path>
                 <path
                   d="M5.47283 8.3039L3.10764 6.12807C3.06194 6.08647 2.99525 6.08647 2.94955 6.12946L2.04424 6.98093C1.98989 7.03224 1.98495 7.12376 2.03312 7.18201L6.03602 11.9566C6.09778 12.0301 6.20647 12.0065 6.24105 11.9136C7.03644 9.69343 9.25835 5.63439 11.9619 2.69585C11.999 2.65564 12.0101 2.59601 11.9904 2.54331L11.8211 2.08568C11.7915 2.00525 11.7038 1.97474 11.6396 2.02328C8.63587 4.21019 6.45966 6.92546 5.47283 8.3039Z"
-                  fill="#004242"></path>
+                  fill="#004242"
+                ></path>
               </svg>
-              <svg class="checkbox-svg" v-show="!checkboxVModel" style="pointer-events: none;"
+              <svg
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"
+                class="checkbox-svg"
-                viewBox="0 0 14 14" fill="none">
+                v-show="!checkboxVModel"
-                <path fill-rule="evenodd" fill="url(#linear_border_2442_533_0)"
+                style="pointer-events: none"
-                  d="M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z">
+                xmlns="http://www.w3.org/2000/svg"
-                </path>
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+              >
+                <path
+                  fill-rule="evenodd"
+                  fill="url(#linear_border_2442_533_0)"
+                  d="M0 12L0 2C0 0.895431 0.895431 0 2 0L12 0C13.1046 0 14 0.895431 14 2L14 12C14 13.1046 13.1046 14 12 14L2 14C0.895431 14 0 13.1046 0 12ZM2 12.5C1.72386 12.5 1.5 12.2761 1.5 12L1.5 2C1.5 1.72386 1.72386 1.5 2 1.5L12 1.5C12.2761 1.5 12.5 1.72386 12.5 2L12.5 12C12.5 12.2761 12.2761 12.5 12 12.5L2 12.5Z"
+                ></path>
                 <defs>
-                  <linearGradient id="linear_border_2442_533_0" x1="0" y1="-0.5574798583984375" x2="12.1173095703125"
+                  <linearGradient
-                    y2="12.878036499023438" gradientUnits="userSpaceOnUse">
+                    id="linear_border_2442_533_0"
+                    x1="0"
+                    y1="-0.5574798583984375"
+                    x2="12.1173095703125"
+                    y2="12.878036499023438"
+                    gradientUnits="userSpaceOnUse"
+                  >
                     <stop offset="0.0625" stop-color="rgba(var(--color-base1), 1)" />
                     <stop offset="1" stop-color="var(--color-border1)" />
                   </linearGradient>
                 </defs>
               </svg>
-              <el-checkbox :disabled="loading" v-model="checkboxVModel" @change="rememberpwd"
+              <el-checkbox
-                label="string">记住密码</el-checkbox>
+                :disabled="loading"
+                v-model="checkboxVModel"
+                @change="rememberpwd"
+                label="string"
+                >记住密码</el-checkbox
+              >
               <!-- <div style="cursor: pointer;">忘记密码？</div> -->
             </div>
           </el-form-item>
@@ -85,15 +150,24 @@
         <h2 class="greet"><span>欢迎您使用</span>实景三维电子沙盘系统</h2>
         <div class="serviceContent">
           <el-tabs v-model="selectedService" class="demo-tabs" @tab-click="handleSelect">
-            <el-tab-pane v-for="item in serviceOptions" :label="item.name" :name="item.name"></el-tab-pane>
+            <el-tab-pane
+              v-for="item in serviceOptions"
+              :label="item.name"
+              :name="item.name"
+            ></el-tab-pane>
           </el-tabs>
           <div class="tabPanel">
             <template v-if="selectedService == '接口服务'">
               <div class="item">
                 <span class="itemLabel">服务选择</span>
                 <el-select class="select" popper-class="login-select-popper" v-model="servVal">
-                  <el-option size="mini" v-for="item in servOptions" :key="item.value" :label="item.name"
+                  <el-option
-                    :value="item.name">
+                    size="mini"
+                    v-for="item in servOptions"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.name"
+                  >
                   </el-option>
                 </el-select>
               </div>
@@ -125,8 +199,13 @@
               <div class="item">
                 <span class="itemLabel">串口选择</span>
                 <el-select class="select" popper-class="login-select-popper" v-model="gpsVal">
-                  <el-option size="mini" v-for="item in gpsOptions" :key="item.value" :label="item.Product"
+                  <el-option
-                    :value="item.Name">
+                    size="mini"
+                    v-for="item in gpsOptions"
+                    :key="item.value"
+                    :label="item.Product"
+                    :value="item.Name"
+                  >
                   </el-option>
                 </el-select>
               </div>
@@ -140,6 +219,77 @@
         </div>
       </div>
     </div>
+    <!-- 授权页面 -->
+    <Dialog
+      ref="baseDialog"
+      class="graffiti"
+      title="系统授权"
+      :closeCallback="closeCallBack"
+      left="calc(50vw - 188px)"
+      top="calc(50vh - 191px)"
+    >
+      <template #content>
+        <div class="auth_info custom_scroll_bar content_h">
+          <div class="auth_info_box">
+            <div>
+              <span class="fankuai"></span>
+              {{ t('auths.authCode') }}
+            </div>
+            <div
+              class="auth_info_text"
+              @click="copy(authInfo.license_code)"
+              style="cursor: pointer"
+              title="点击可复制"
+            >
+              {{ authInfo.license_code || '' }}
+              <svg-icon name="copy" :size="20" style="margin-left: 30px"></svg-icon>
+            </div>
+          </div>
+          <div class="auth_info_box">
+            <div>
+              <span class="fankuai"></span>
+              {{ t('auths.authTime') }}
+            </div>
+            <div class="auth_info_text" v-if="authInfo.status != null">
+              <template v-if="authInfo.generateTime != ''">
+                {{ authInfo.generateTime || '2023-01-01' }}-
+              </template>
+              {{ authInfo.expireTime || '2023-01-01' }}
+            </div>
+            <div v-else class="auth_info_text">暂无</div>
+          </div>
+          <div class="auth_info_box">
+            <div>
+              <span class="fankuai"></span>
+              {{ t('auths.authType') }}
+            </div>
+            <div
+              v-if="authInfo.status != null"
+              class="auth_info_text"
+              style="font-size: 16px"
+              :style="{
+                color: authInfo.status ? 'rgba(27, 248, 195, 1)' : 'rgba(255, 161, 69, 1)'
+              }"
+            >
+              {{ authInfo.status ? t('auths.authTempExpire') : t('auths.authexpire') }}
+            </div>
+            <!-- <div v-else class="auth_info_text">{{ authInfo.message || '无' }}</div> -->
+            <div
+              v-else
+              class="auth_info_text"
+              style="font-size: 16px; color: rgba(241, 108, 85, 1)"
+            >
+              {{ t('auths.noAuthexpire') }}
+            </div>
+          </div>
+          <!-- <uploadFiles accept=".lic" :maxSize="1"></uploadFiles> -->
+        </div>
+      </template>
+      <template #footer>
+        <uploadFiles accept=".lic" :maxSize="1"></uploadFiles>
+        <button @click="close">退出系统</button>
+      </template>
+    </Dialog>
   </div>
 </template>
 
@@ -191,6 +341,164 @@ onMounted(() => {
   loginInit()
   initialize()
 })
+
+//授权判断
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import useClipboard from 'vue-clipboard3'
+import { AuthApi } from '@/api/setting/auth'
+import Dialog from '@/components/dialog/baseDialog.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { $sendElectronChanel } from '@/utils/communication'
+
+let isAuth = ref(true)
+
+const { ipcRenderer } = require('electron')
+const router = useRouter()
+const getAuthInfo = async () => {
+  try {
+    const res = await AuthApi.showAuth()
+    if (typeof res.data === 'object') {
+      authInfo.value.generateTime = res.data.generateTime
+      authInfo.value.expireTime = res.data.expireTime
+      getStatus2()
+      getStatus(res.data.expireTime)
+    }
+  } catch (error) {
+    // 统一处理错误
+    ElMessageBox.confirm('您没有进行系统授权哦，系统功能将无法使用?', '提示', {
+      confirmButtonText: '去授权',
+      cancelButtonText: '退出系统',
+      type: 'warning',
+      closeOnClickModal: false
+    })
+      .then(async () => {
+        try {
+          baseDialog.value?.open()
+        } catch (error) {
+          console.error('打开授权对话框失败:', error)
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+        ipcRenderer.send('quit-app')
+      })
+  }
+}
+const baseDialog = ref(null)
+const getStatus = (date) => {
+  const timestamp = new Date(date).getTime()
+
+  const currentTimestamp = Date.now()
+  if (timestamp > currentTimestamp) {
+    // router.push({ path: '/login' })
+    isAuth.value = false
+  } else {
+    ElMessageBox.confirm('您没有进行系统授权哦，系统功能将无法使用?', '提示', {
+      confirmButtonText: '去授权',
+      cancelButtonText: '退出系统',
+      type: 'warning',
+      closeOnClickModal: false
+    })
+      .then(async () => {
+        try {
+          baseDialog.value?.open()
+        } catch (error) {
+          console.error('打开授权对话框失败:', error)
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+        ipcRenderer.send('quit-app')
+      })
+  }
+}
+
+//授权页面
+
+// const closeCallBack = (e) => {
+//   baseDialog.value?.close()
+// }
+const close = (e) => {
+  ElMessageBox.confirm('确定要退出系统吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      ipcRenderer.send('quit-app')
+    })
+    .catch(() => {
+      // 用户点击取消，不执行任何操作
+    })
+}
+
+const eventBus = inject('bus')
+const { t } = useI18n()
+const authInfo = ref({
+  license_code: '',
+  //授权信息
+  generateTime: '', //开始时间
+  expireTime: '', //结束时间
+  authDays: null, //授权时间
+  status: null
+})
+//上传授权文件成功
+eventBus.on('upload', (data) => {
+  if (data) {
+    isAuth.value = false
+    baseDialog.value?.close()
+  }
+})
+
+const { toClipboard } = useClipboard()
+
+const getAuthInfo2 = async () => {
+  const res = await AuthApi.showAuth()
+  if (typeof res.data === 'object') {
+    authInfo.value.generateTime = res.data.generateTime
+    authInfo.value.expireTime = res.data.expireTime
+    getStatus2()
+  }
+}
+
+const getStatus2 = () => {
+  const timestamp = new Date(authInfo.value.expireTime).getTime()
+
+  const currentTimestamp = Date.now()
+
+  if (timestamp > currentTimestamp) {
+    authInfo.value.status = true
+  } else {
+    authInfo.value.status = false
+  }
+  window.checkAuthIsValid = authInfo.value.status
+}
+const getAuthCode = async () => {
+  const res = await AuthApi.authInfo()
+  authInfo.value.license_code = res.data
+}
+setTimeout(() => {
+  getAuthCode()
+}, 5000)
+//复制
+
+const copy = async (text) => {
+  try {
+    await toClipboard(text)
+    ElMessage.success('复制成功')
+  } catch (e) {
+    ElMessage.error('复制失败')
+  }
+}
+if (!router.currentRoute.value.query.type) {
+  setTimeout(() => {
+    getAuthCode()
+    getAuthInfo()
+  }, 5000)
+} else {
+  isAuth.value = false
+}
 </script>
 <style lang="scss">
 // 添加过渡样式
@@ -286,7 +594,6 @@ onMounted(() => {
   .el-select__tags-text {
     color: rgba(0, 66, 66, 1) !important;
   }
-
 }
 </style>
 <style scoped lang="scss">
@@ -390,7 +697,6 @@ onMounted(() => {
             color: #fff;
           }
         }
-
       }
     }
   }
@@ -472,7 +778,7 @@ onMounted(() => {
           border-radius: 0 0 0 90%;
           background: rgba(var(--color-base1), 1);
 
-          &>span {
+          & > span {
             font-size: 1rem;
             position: absolute;
             right: 0px;
@@ -569,7 +875,8 @@ onMounted(() => {
             align-items: center;
             margin: 15px 0;
 
-            .select {}
+            .select {
+            }
           }
         }
       }
@@ -606,4 +913,387 @@ onMounted(() => {
     }
   }
 }
+//授权
+.auth_info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  color: rgba(var(--color-text2), 0.8);
+
+  .auth_info_text {
+    color: #fff;
+    font-size: 14px;
+    font-weight: 700;
+    margin: 7px 0 15px 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .auth_info_box {
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(204, 204, 204, 0.2);
+  }
+
+  .el-button--primary {
+    color: #fff !important;
+    font-size: 16px;
+    background: rgba(var(--color-base1), 0.2) !important;
+    font-weight: bolder;
+    border-color: transparent;
+    border-radius: 4px;
+  }
+}
+
+.fankuai {
+  width: 10px;
+  height: 10px;
+  // 旋转角度
+  transform: rotate(45deg);
+  border: 2px solid rgba(var(--color-base1), 1);
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.YJ-custom-base-dialog {
+  position: absolute;
+  color: #ffffff;
+  font-size: 14px;
+  z-index: 99;
+  background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%), rgba(0, 0, 0, 0.6);
+  border: 1.5px solid;
+  border-image: linear-gradient(to bottom, rgba(var(--color-base1), 1) 6.25%, rgb(0, 200, 255) 100%)
+    1;
+  text-align: left;
+  font-family: 'sy-boldface';
+}
+
+.YJ-custom-base-dialog * {
+  box-sizing: border-box;
+}
+
+.YJ-custom-base-dialog:after {
+  display: block;
+  position: absolute;
+  content: '';
+  left: -1.5px;
+  top: -6px;
+  width: 70.5px;
+  height: 6px;
+  opacity: 1;
+  background: rgba(var(--color-base1), 1);
+  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
+}
+
+.YJ-custom-base-dialog svg {
+  fill: #ffffff;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+}
+
+.YJ-custom-base-dialog .custom-divider {
+  width: 100%;
+  display: block;
+  border-top: 1px solid rgba(204, 204, 204, 0.2);
+}
+
+.YJ-custom-base-dialog .text-number {
+  font-family: 'D-Din-Bold';
+  margin-left: 5px;
+}
+
+::v-deep .title-box {
+  line-height: 46px;
+  padding: 5px 16px 5px 16px !important;
+  position: relative;
+}
+
+::v-deep .title-box > .close-box {
+  display: none;
+}
+
+::v-deep .title-box > .title {
+  font-family: 'Ali-mother-counts-bold';
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  line-height: 0px;
+  color: rgba(255, 255, 255, 1);
+  text-align: left;
+  text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
+  -webkit-pointer-events: none;
+  -moz-pointer-events: none;
+  -ms-pointer-events: none;
+  -o-pointer-events: none;
+  pointer-events: none;
+}
+
+::v-deep .foot {
+  position: relative;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: center;
+}
+
+::v-deep .foot > button {
+  margin-left: 10px;
+  border-radius: 4px;
+  background: rgba(var(--color-base1), 0.2);
+  border: 1px solid rgba(var(--color-base1), 0.5);
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  padding: 5px 20px;
+  cursor: pointer;
+}
+
+::v-deep .foot > button:hover {
+  border: 1px solid rgba(var(--color-base1), 1);
+  color: rgba(var(--color-base1), 1);
+}
+
+::v-deep .foot > .show > .label {
+  margin: 0px 10px;
+}
+
+::v-deep .el-message-box {
+  --el-messagebox-title-color: #fff !important;
+  --el-messagebox-content-color: #fff !important;
+  background:
+    linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
+    rgba(0, 0, 0, 0.6) !important;
+}
+
+#app {
+  .service {
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+
+    .contentBox {
+      padding: 0 40px 40px 40px;
+      background-color: #ffffff;
+      backdrop-filter: blur(2px);
+      width: 450px;
+      position: absolute;
+      color: rgba(51, 51, 51, 1);
+      left: 50%;
+      top: 29%;
+      transform: translate(-50%, 0%);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .hello {
+        color: rgba(0, 66, 66, 1);
+        font-family: 'ddin';
+        font-size: 30px;
+        font-weight: 700;
+        line-height: 30px;
+        margin-bottom: 16px;
+      }
+
+      .greet {
+        color: rgba(0, 66, 66, 1);
+        font-family: 'SourceHanSans';
+        font-size: 18px;
+        line-height: 18px;
+        font-weight: 500;
+
+        span {
+          color: rgba(153, 153, 153, 1);
+          font-weight: 500;
+          margin-right: 5px;
+        }
+      }
+
+      .titleBox {
+        height: 40px;
+
+        .title {
+          line-height: 50px;
+          padding-left: 15px;
+          font-size: 1rem;
+          text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
+        }
+
+        .closeBox {
+          right: 0;
+          position: absolute;
+          display: inline-block;
+          width: 30px;
+          height: 30px;
+          border-radius: 0 0 0 90%;
+          background: rgba(var(--color-base1), 1);
+
+          & > span {
+            font-size: 1rem;
+            position: absolute;
+            right: 0px;
+            cursor: pointer;
+            color: rgba(0, 66, 66, 1);
+            font-weight: 700;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+
+      .serviceContent {
+        margin-top: 30px;
+        flex: auto;
+
+        ::v-deep .el-tabs {
+          .el-tabs__header {
+            margin-bottom: 5px;
+
+            .el-tabs__nav-wrap {
+              .el-tabs__nav-scroll {
+                .el-tabs__nav {
+                  .el-tabs__active-bar {
+                    background: rgba(0, 66, 66, 1);
+                    height: 3px;
+                  }
+
+                  .el-tabs__item {
+                    color: rgba(153, 153, 153, 1);
+                    font-size: 16px;
+                    font-weight: 500;
+                  }
+
+                  .el-tabs__item:focus-visible {
+                    box-shadow: none;
+                  }
+
+                  .el-tabs__item.is-active {
+                    font-size: 18px;
+                    color: rgba(0, 66, 66, 1);
+                  }
+                }
+              }
+            }
+
+            .el-tabs__nav-wrap::after {
+              height: 1px;
+            }
+          }
+        }
+
+        .tab {
+          border-radius: 5px;
+          //width: 50%;
+          width: 300px;
+          margin: 0 auto;
+          overflow: hidden;
+          background: rgba(var(--color-base1), 0.2);
+          display: flex;
+
+          .tab-item {
+            display: inline-block;
+            flex: 1;
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .activeService {
+            border: 1px solid rgba(var(--color-base1), 1);
+            border-radius: 5px;
+          }
+        }
+
+        .itemLabel {
+          width: 64px;
+          flex: 0 0 64px;
+          white-space: nowrap;
+          text-align: right;
+          display: inline-block;
+          margin-right: 10px;
+        }
+
+        .tabPanel {
+          margin: 0;
+
+          .item {
+            display: flex;
+            align-items: center;
+            margin: 15px 0;
+
+            .select {
+            }
+          }
+        }
+      }
+    }
+
+    .btn {
+      text-align: center;
+
+      button {
+        width: 166px;
+        height: 40px;
+        border-radius: 0;
+        ::v-deep span {
+          font-weight: 500;
+        }
+
+        &:hover {
+          border: 1px solid rgba(var(--color-base1), 1) !important;
+        }
+      }
+
+      button:nth-child(1) {
+        background: rgba(0, 255, 255, 1) !important;
+        border-color: #ff000000 !important;
+        color: rgba(0, 66, 66, 1) !important;
+      }
+
+      button:nth-child(2) {
+        background: rgba(255, 255, 255, 1) !important;
+        border-color: rgba(204, 204, 204, 0.4) !important;
+        color: rgba(102, 102, 102, 1) !important;
+      }
+    }
+  }
+}
+::v-deep .el-popper {
+  z-index: 9999 !important;
+}
+</style>
+<style lang="scss">
+.el-message-box {
+  --el-messagebox-title-color: #fff !important;
+  --el-messagebox-content-color: #fff !important;
+  background:
+    linear-gradient(180deg, rgba(var(--color-base1), 0) 0%, rgba(var(--color-base1), 0.2) 100%),
+    rgba(0, 0, 0, 0.6) !important;
+
+  .el-message-box__btns {
+    .el-button {
+      --el-button-text-color: #fff;
+      --el-button-bg-color: rgba(var(--color-base1), 0.2) !important;
+      --el-button-hover-bg-color: rgba(var(--color-base1), 0.2) !important;
+      --el-button-border-color: rgba(var(--color-base1), 0.5) !important;
+      --el-button-hover-border-color: rgba(var(--color-base1), 1) !important;
+      --el-button-hover-text-color: rgba(var(--color-base1), 1) !important;
+    }
+
+    .el-button--primary {
+      --el-button-bg-color: rgba(var(--color-base1), 0.2) !important;
+      --el-button-hover-bg-color: rgba(var(--color-base1), 0.2) !important;
+    }
+
+    .el-button:focus-visible {
+      outline: none !important;
+    }
+  }
+}
 </style>