zhouyulong/electron-4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录授权

Browse Source
This commit is contained in:
夏大胆
2025-11-07 17:33:37 +08:00
parent c7091590e1
commit 9df8a05831
3 changed files with 767 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/src/router/index.ts
View File

@ -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 },

31
src/renderer/src/views/components/headers/components/setTool/setTool.vue
View File

@ -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">
<div class="set_item" :class="{ 'last-item': i === setList.length - 1 }" @click="item.callback">
<el-tooltip
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) => { },
callback: (e) => { }
dbcallback: (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(
180deg,
rgba(var(--color-base1), 0),
rgba(var(--color-base1), 1),
rgba(204, 204, 204, 0));
rgba(204, 204, 204, 0)
);
}
.set_item.last-item::after {

772
src/renderer/src/views/login/index.vue
View File

@ -1,20 +1,35 @@
<template>
<div class="login-container" 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">
<div
class="login-container"
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"
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"
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"
label-position="left">
<el-form
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="请输入用户名"
:prefix-icon="User" />
<el-input
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"
autoComplete="on" placeholder="请输入密码" :prefix-icon="Unlock" show-password></el-input>
<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;"
xmlns="http://www.w3.org/2000/svg" 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>
<svg
class="checkbox-svg"
v-show="checkboxVModel"
style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg"
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;"
xmlns="http://www.w3.org/2000/svg" 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>
<svg
class="checkbox-svg"
v-show="!checkboxVModel"
style="pointer-events: none"
xmlns="http://www.w3.org/2000/svg"
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"
y2="12.878036499023438" gradientUnits="userSpaceOnUse">
<linearGradient
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"
label="string">记住密码</el-checkbox>
<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"
:value="item.name">
<el-option
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"
:value="item.Name">
<el-option
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>