修改激活页面
This commit is contained in:
parent
73191de5b8
commit
69ec3e8d62
BIN
frontend/src/renderer/src/assets/license/tab1.png
Normal file
BIN
frontend/src/renderer/src/assets/license/tab1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
BIN
frontend/src/renderer/src/assets/license/tab1_1.png
Normal file
BIN
frontend/src/renderer/src/assets/license/tab1_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 564 B |
BIN
frontend/src/renderer/src/assets/license/tab2.png
Normal file
BIN
frontend/src/renderer/src/assets/license/tab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 759 B |
BIN
frontend/src/renderer/src/assets/license/tab2_1.png
Normal file
BIN
frontend/src/renderer/src/assets/license/tab2_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 987 B |
BIN
frontend/src/renderer/src/assets/license/upload.png
Normal file
BIN
frontend/src/renderer/src/assets/license/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -9,7 +9,10 @@
|
||||
<div class="system-title">
|
||||
平衡体态检测系统
|
||||
<span v-if="licenseBadge" :class="['license-badge', licenseClass]">{{ licenseBadge }}</span>
|
||||
|
||||
<!-- <button v-if="showActivateButton" class="activate-btn" @click="goActivate">激活</button> -->
|
||||
<button v-if="showActivateButton" class="activate-btn" @click="goActivate">激活</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
@ -20,19 +23,6 @@
|
||||
<span class="username">{{ userInfo.name }}</span>
|
||||
<div class="user-line"></div>
|
||||
<span class="username user-return" @click="handleUserCommand">退出</span>
|
||||
<!-- <el-dropdown @command="handleUserCommand">
|
||||
<el-button link class="user-dropdown">
|
||||
<el-icon>
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="profile">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,10 +42,13 @@
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="isLicense" title="授权中心" width="800px" :before-close="handleLicenseClose"
|
||||
<div v-if="isLicense" class="License-dialog-box">
|
||||
<License v-if="isLicense" @closeLicense="handleLicenseClose"/>
|
||||
</div>
|
||||
<!-- <el-dialog v-model="isLicense" title="授权中心" width="800px" :before-close="handleLicenseClose"
|
||||
class="userInfoviewDialog">
|
||||
<License v-if="isLicense" @closeLicense="handleLicenseClose"/>
|
||||
</el-dialog>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -286,22 +279,43 @@
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.badge-invalid { background-color: rgba(67, 67, 67, 1); color: #949494; }
|
||||
.badge-invalid {
|
||||
width: 79px;
|
||||
height: 28px;
|
||||
line-height:28px ;
|
||||
text-align: center;
|
||||
background-color: #324065;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
}
|
||||
.badge-trial { background-color: rgba(67, 67, 67, 1); color: #949494; }
|
||||
.badge-valid { background-color: rgba(38, 111, 255, 1); color: #fff; }
|
||||
.badge-valid {
|
||||
width: 79px;
|
||||
height: 28px;
|
||||
line-height:28px ;
|
||||
border-radius: 24px;
|
||||
padding:0;
|
||||
text-align: center;
|
||||
background-color: rgba(38, 111, 255, 1); color: #fff;
|
||||
}
|
||||
.activate-btn {
|
||||
width: 58px;
|
||||
height: 24px;
|
||||
margin-left: 8px;
|
||||
padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
border: 1px solid rgba(38, 111, 255, 1);
|
||||
background-color: rgba(38, 111, 255, 1);
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: rgb(25, 29, 40);
|
||||
font-size: 13px;
|
||||
border: 1px solid rgb(59, 242, 198);
|
||||
background-color: rgb(59, 242, 198);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.activate-btn:hover {
|
||||
background-color: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
background-color: #6cf9d8;
|
||||
border-color: #6cf9d8;
|
||||
}
|
||||
.userInfoviewDialog{
|
||||
background-color: #323232 !important;
|
||||
@ -326,4 +340,14 @@
|
||||
color: rgb(0, 140, 255);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.License-dialog-box{
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,10 +1,96 @@
|
||||
<template>
|
||||
<div class="license-container">
|
||||
<div class="page-header">
|
||||
<!-- <h2>授权中心</h2> -->
|
||||
<div class="desc">在此申请激活文件或上传授权包激活。</div>
|
||||
<div class="form-container-header">
|
||||
<div>授权中心</div>
|
||||
<img src="@/assets/new/u264.svg" alt="" style="cursor: pointer;" @click="handleCancel">
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<div style="display: flex;border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
margin-left: 30px;margin-right: 30px;padding-top: 20px;">
|
||||
<div class="license_tabbox" @click="handleTabClick('request')"
|
||||
:class="activeTab == 'request'?'license_tabactive':''" >
|
||||
<img v-if="activeTab == 'request'" src="@/assets/license/tab1_1.png" alt="">
|
||||
<img v-else src="@/assets/license/tab1.png" alt="">
|
||||
<span class="license_tabtext">授权申请</span>
|
||||
</div>
|
||||
<div class="license_tabbox"
|
||||
:class="activeTab == 'activate'?'license_tabactive':''"
|
||||
@click="handleTabClick('activate')">
|
||||
<img v-if="activeTab == 'request'" src="@/assets/license/tab2.png" alt="">
|
||||
<img v-else src="@/assets/license/tab2_1.png" alt="">
|
||||
<span class="license_tabtext">授权申请</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeTab == 'request'" class="tab-content">
|
||||
<el-form :model="form" label-width="70px" class="license-form">
|
||||
<div class="license_line_title">
|
||||
<div class="license_line"></div>
|
||||
<div>申请信息</div>
|
||||
</div>
|
||||
<el-form-item label="公司名称">
|
||||
<el-input v-model="form.company_name" placeholder="请输入公司名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input v-model="form.contact_info" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<div class="license_line_title" style="padding-top:20px">
|
||||
<div class="license_line"></div>
|
||||
<div>软件信息</div>
|
||||
</div>
|
||||
<el-form-item label="产品">
|
||||
<el-input :model-value="software.product" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="版本">
|
||||
<el-input :model-value="software.version" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="机器码">
|
||||
<el-input :model-value="software.machine_id" disabled />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <div class="actions">
|
||||
<el-button type="primary" :loading="exporting">导出激活文件</el-button>
|
||||
</div> -->
|
||||
<div class="form-actions-display">
|
||||
<el-button @click="handleCancel" class="formreturnCancel">取消</el-button>
|
||||
<el-button type="primary" :loading="saveLoading" @click="exportActivationFile"
|
||||
class="formsaveCancel">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" v-if="activeTab == 'activate'">
|
||||
<div style="height: 420px;">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
:auto-upload="false"
|
||||
:show-file-list="true"
|
||||
:on-change="onZipChange"
|
||||
accept=".zip"
|
||||
>
|
||||
<div>
|
||||
<img src="@/assets/license/upload.png" alt="" srcset="">
|
||||
<div class="axhub-upload-text">点击或拖拽文件到此处上传</div>
|
||||
<div class="axhub-upload-hint">仅支持上传-zip文件</div>
|
||||
</div>
|
||||
<template #tip>
|
||||
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;display: flex;justify-content: center;">
|
||||
<el-button class="activatePackage"
|
||||
type="primary"
|
||||
:disabled="!zipFile"
|
||||
@click="activatePackage"
|
||||
:loading="activating">激活授权文件</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="授权申请" name="request">
|
||||
<div class="tab-content">
|
||||
<el-form :model="form" label-width="120px" class="license-form">
|
||||
@ -46,7 +132,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tabs> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -68,11 +154,15 @@ const software = reactive({
|
||||
version: '1.0.0',
|
||||
machine_id: ''
|
||||
})
|
||||
|
||||
function handleTabClick(e){
|
||||
activeTab.value = e
|
||||
}
|
||||
const exporting = ref(false)
|
||||
const activating = ref(false)
|
||||
const zipFile = ref(null)
|
||||
|
||||
function handleCancel() {
|
||||
emit('closeLicense', false);
|
||||
}
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// 获取机器码
|
||||
@ -179,26 +269,183 @@ const activatePackage = async () => {
|
||||
|
||||
<style>
|
||||
.license-container {
|
||||
padding:0 16px;
|
||||
width: 608px;
|
||||
height:654px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: #465367;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 16px rgba(17, 24, 33, 1);
|
||||
color: #fff;
|
||||
}
|
||||
.page-header { margin-bottom: 12px; }
|
||||
.page-header h2 { margin: 0 0 4px 0; font-size: 20px; }
|
||||
.desc { color: #bbb; font-size: 14px; }
|
||||
.tab-content { padding: 12px 0; }
|
||||
.actions { margin-top: 12px; }
|
||||
.hint { margin-top: 8px; color: #bbb; font-size: 14px; }
|
||||
.license-form { max-width: 100%; }
|
||||
|
||||
.el-tabs__item{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
.license_tabbox{
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hintbox{
|
||||
.license_tabbox img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.license_tabtext{
|
||||
color: #949494;
|
||||
position: relative;
|
||||
}
|
||||
.license_tabactive .license_tabtext{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 30px 30px;
|
||||
}
|
||||
.license_line_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.license_line{
|
||||
width: 4px;
|
||||
height: 13px;
|
||||
background-color: rgba(11, 148, 213, 1);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.tab-content .el-form-item__label{
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #949494;
|
||||
}
|
||||
.tab-content .el-input__wrapper{
|
||||
background: #2a3649;
|
||||
border-color: #2a3649;
|
||||
box-shadow: 0 0 0 1px #2a3649 inset;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
}
|
||||
.tab-content .el-input__wrapper:hover{
|
||||
box-shadow: 0 0 0 1px #2a3649 inset;
|
||||
}
|
||||
.tab-content .el-input__inner{
|
||||
color: #fff;
|
||||
}
|
||||
.tab-content .el-input.is-disabled .el-input__wrapper{
|
||||
background: #2a3649;
|
||||
border-color: #2a3649;
|
||||
box-shadow: 0 0 0 1px #2a3649 inset;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
}
|
||||
.tab-content .el-input.is-disabled .el-input__inner {
|
||||
color: #fff !important;
|
||||
}
|
||||
.tab-content .form-actions-display{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.tab-content .formreturnCancel{
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: rgba(89, 113, 148, 1);
|
||||
border: 1px solid rgba(89, 113, 148, 1);
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.tab-content .formreturnCancel:hover{
|
||||
background: #425b89;
|
||||
color: #266fff;
|
||||
border: 1px solid #266fff;
|
||||
}
|
||||
.tab-content .formsaveCancel{
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: #0b94d5;
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.tab-content .formsaveCancel:hover{
|
||||
|
||||
background: #5189ff;
|
||||
border: 1px solid #5189ff;
|
||||
|
||||
}
|
||||
.license-container .form-container-header{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.license-container .el-upload-dragger{
|
||||
height: 337px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px dashed rgba(80, 80, 80, 1);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.license-container .el-upload-dragger:hover{
|
||||
border-color: #4984e8 !important;
|
||||
}
|
||||
.axhub-upload-text{
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.axhub-upload-hint{
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.license-container .el-upload-list__item-name{
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.license-container .el-upload-list__item:hover{
|
||||
background-color: #566272;
|
||||
}
|
||||
.license-container .el-icon--close{
|
||||
color: rgba(255, 255, 255,1);
|
||||
}
|
||||
.activatePackage{
|
||||
width: 118px;
|
||||
height: 40px;
|
||||
background: #266fff;
|
||||
border-color: #266fff;
|
||||
color: #fff;
|
||||
}
|
||||
.activatePackage:hover{
|
||||
background: #5189ff;
|
||||
border-color: #5189ff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user