|
|
<template> |
|
|
<div class="container"> |
|
|
<div class="main"> |
|
|
<div class="app-list"> |
|
|
<el-popover |
|
|
placement="right" |
|
|
:width="260" |
|
|
trigger="contextmenu" |
|
|
ref="popover1" |
|
|
> |
|
|
<template #reference> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img |
|
|
style="width: 100%" |
|
|
src="@/assets/images/zip.png" |
|
|
alt="" |
|
|
srcset="" |
|
|
/> |
|
|
</div> |
|
|
<div class="file-name">LabVIEW2014压缩包</div> |
|
|
</div> |
|
|
</template> |
|
|
<div class="setting-list"> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<!-- <img src="@/assets/images/home.png" alt="" /> --> |
|
|
</div> |
|
|
<div class="name" style="font-weight: 700">打开</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">管理员身份运行</div> |
|
|
</div> |
|
|
<div class="item" @click="unpack"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到当前文件夹</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到...</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到"LabVIEW2024 (64位)\"</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">其他压缩命令</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">Edit width Notepad++</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-popover> |
|
|
<el-popover |
|
|
placement="right" |
|
|
:width="260" |
|
|
trigger="contextmenu" |
|
|
v-if="falg" |
|
|
ref="popover2" |
|
|
> |
|
|
<template #reference> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img |
|
|
style="width: 100%" |
|
|
src="@/assets/images/filesGroup.png" |
|
|
alt="" |
|
|
srcset="" |
|
|
/> |
|
|
</div> |
|
|
<div class="file-name">文件夹</div> |
|
|
</div> |
|
|
</template> |
|
|
<div class="setting-list"> |
|
|
<div class="item" @click="openSrttingDialog"> |
|
|
<div class="icon"> |
|
|
<!-- <img src="@/assets/images/home.png" alt="" /> --> |
|
|
</div> |
|
|
<div class="name" style="font-weight: 700">打开</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">管理员身份运行</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到当前文件夹</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到...</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到"LabVIEW2024 (64位)\"</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">其他压缩命令</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">Edit width Notepad++</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-popover> |
|
|
<el-popover |
|
|
placement="right" |
|
|
:width="260" |
|
|
trigger="contextmenu" |
|
|
v-if="product" |
|
|
ref="popover2" |
|
|
> |
|
|
<template #reference> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img |
|
|
style="width: 100%" |
|
|
src="@/assets/images/bg14.png" |
|
|
alt="" |
|
|
srcset="" |
|
|
/> |
|
|
</div> |
|
|
<div class="file-name">LabVIEW2014</div> |
|
|
</div> |
|
|
</template> |
|
|
<div class="setting-list"> |
|
|
<div class="item" @click="openSrttingDialog"> |
|
|
<div class="icon"> |
|
|
<!-- <img src="@/assets/images/home.png" alt="" /> --> |
|
|
</div> |
|
|
<div class="name" style="font-weight: 700">打开</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">管理员身份运行</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到当前文件夹</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到...</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">解压到"LabVIEW2024 (64位)\"</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">其他压缩命令</div> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<div class="icon"> |
|
|
<img src="@/assets/images/home.png" alt="" /> |
|
|
</div> |
|
|
<div class="name">Edit width Notepad++</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-popover> |
|
|
</div> |
|
|
<div class="openFilesGroupDialg"> |
|
|
<div class="step1" v-show="step === 1"> |
|
|
<div class="title">LabVIEW 2014 (Chinese)</div> |
|
|
<div class="description"> |
|
|
<p> |
|
|
This self - extracting archive will create an installation image |
|
|
on your hard drive and launch the installation. |
|
|
</p> |
|
|
<p style="margin-top: 20px"> |
|
|
After installation completes, you may delete the installation |
|
|
image to recover disk space. You should not delete the |
|
|
installation image if you wish to be able to modify or repair the |
|
|
installation in the future. |
|
|
</p> |
|
|
</div> |
|
|
<div class="footer"> |
|
|
<div class="submit" @click="setStep(2)">确认</div> |
|
|
<div class="close">取消</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="step2" v-show="step === 2"> |
|
|
<div class="title">WinZip Self - Extractor - 2014LV - WinChn.exe</div> |
|
|
<div class="setting-box"> |
|
|
<div class="left"> |
|
|
<div class="description"> |
|
|
To unzip all files in 2014LV - WinChn.exe to the specified |
|
|
folder press the Unzip button. |
|
|
</div> |
|
|
<div class="tips">Unzip to folder:</div> |
|
|
<div class="selectUrl"> |
|
|
<el-input |
|
|
value="C:\User\LabVIEW Chinses\2014" |
|
|
:disabled="true" |
|
|
></el-input> |
|
|
<el-button>Browse</el-button> |
|
|
</div> |
|
|
<div class="click-select"> |
|
|
<el-checkbox-group v-model="checkList"> |
|
|
<!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ --> |
|
|
<div> |
|
|
<el-checkbox |
|
|
label="Alibaba PuHuiTi 2.0-55 Regular" |
|
|
:value="1" |
|
|
/> |
|
|
</div> |
|
|
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 --> |
|
|
<el-checkbox |
|
|
label="When done unzipping open:.\steup.exe" |
|
|
:value="2" |
|
|
/> |
|
|
</el-checkbox-group> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<div |
|
|
class="item" |
|
|
style="color: #fff; background-color: #005fb8" |
|
|
@click="dialogVisible = true" |
|
|
> |
|
|
Unizip |
|
|
</div> |
|
|
<div class="item">Run WinZIP</div> |
|
|
<div class="item">Close</div> |
|
|
<div class="item">About</div> |
|
|
<div class="item">Help</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<el-dialog |
|
|
v-model="dialogVisible" |
|
|
title="WinZip Slf - Extractor" |
|
|
width="360" |
|
|
top="15%" |
|
|
> |
|
|
<span>962 file (s) unzipped successfully</span> |
|
|
<template #footer> |
|
|
<div class="dialog-footer"> |
|
|
<el-button |
|
|
@click="setStep(0)" |
|
|
style="background-color: #005fb8; color: #fff" |
|
|
>确认</el-button |
|
|
> |
|
|
</div> |
|
|
</template> |
|
|
</el-dialog> |
|
|
<el-dialog |
|
|
v-model="Installation" |
|
|
title="LabVIEW 2014" |
|
|
width="760" |
|
|
style="padding: 0" |
|
|
> |
|
|
<template #header> |
|
|
<div class="dialog-header">LabVIEW 2014</div> |
|
|
</template> |
|
|
<div class="installation-box"> |
|
|
<div class="step1" v-show="installationStep === 1"> |
|
|
<div class="title">LabVIEW 2014</div> |
|
|
<div class="description"> |
|
|
<div class="item"> |
|
|
LabVIEW 2014 运行本次安装之前请退出所有其它程序。 |
|
|
</div> |
|
|
<div class="item">使用病毒扫描工具可能提高安装速度。</div> |
|
|
<div class="item">使用本程序时需遵守附带的许可协议。</div> |
|
|
<div class="item"> |
|
|
Corporation 是 Microsoft Silverlight 的授权分销商。 |
|
|
</div> |
|
|
<div class="item">©1986–2014 National Instruments. 版权所有。</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="step2" v-show="installationStep === 2"> |
|
|
<div class="title">用户信息</div> |
|
|
<div class="tip">请输入以下信息</div> |
|
|
<div class="name"> |
|
|
<span>全名：</span><el-input style="width: 280px;margin-left: 30px;"placeholder="软件安全管家"></el-input> |
|
|
</div> |
|
|
<div class="unit"> |
|
|
<span>单位：</span><el-input style="width: 280px;margin-left: 30px;"placeholder="中国大陆"></el-input> |
|
|
</div> |
|
|
</div> |
|
|
<div class="step3" v-show="installationStep === 3"> |
|
|
<div class="title">序列号</div> |
|
|
<div class="tip">请输入以下产品序列号</div> |
|
|
<div class="serial"> |
|
|
<div class="name" >序列号：</div> |
|
|
<el-form label-width="400px" style="max-width: 720" > |
|
|
<el-form-item label="LabVIEW 2014（基本版 / 完整版 / 专业版）："label-width="307px"> |
|
|
<el-input style="width: 300px;margin-left: 95px;" /> |
|
|
</el-form-item> |
|
|
<el-form-item label="应用程序生成器 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白："> |
|
|
<el-input style="width: 300px"/> |
|
|
</el-form-item> |
|
|
<el-form-item label="Report Generation 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白："> |
|
|
<el-input style="width: 300px"/> |
|
|
</el-form-item> |
|
|
<el-form-item label="atabase 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白）："> |
|
|
<el-input style="width: 300px"/> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="step4" v-show="installationStep === 4"> |
|
|
<div class="title">目标目录</div> |
|
|
<div class="tip">选择主安装目录</div> |
|
|
<div class="item">选择 NI 软件的安装文件夹</div> |
|
|
<el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/> |
|
|
<el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button> |
|
|
<div class="item">选择NI LabVIEW 2014的安装文件夹</div> |
|
|
<el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/> |
|
|
<el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button> |
|
|
</div> |
|
|
<div class="step5" v-show="installationStep === 5"> |
|
|
<div class="title">组件</div> |
|
|
<div class="tip">选择需要安装的组件</div> |
|
|
<div class="headers"> |
|
|
<div class="header"> |
|
|
<div class="item">NI LabVIEW 2014</div> |
|
|
<div class="item">Database Connectivity工具包</div> |
|
|
<div class="item">Report Generation工具包</div> |
|
|
<div class="item">V Package Manager 2014</div> |
|
|
<div class="item">附加组件</div> |
|
|
<div class="item">HI Measurement & Automation Explorer</div> |
|
|
<div class="item">设备驱动程序</div> |
|
|
</div> |
|
|
<div class="image-container"> |
|
|
<p style="margin-bottom: 20px;">测量和仪器的图形化编程</p> |
|
|
<img src="@/assets/images/bg13.png" alt=""> |
|
|
<p style="margin-top: 20px;">该组件将安装至本地硬盘</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="name">选择NI LabVIEW 2014的安装文件夹</div> |
|
|
<el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;"/> |
|
|
<el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button> |
|
|
</div> |
|
|
<div class="step6" v-show="installationStep === 6"> |
|
|
<div class="title">产品通知</div> |
|
|
<div class="tip">请查看所选配置的相关信息。</div> |
|
|
<div class="item"> |
|
|
警告：可能已启用Windows防火墙默认状态下，Windows操作系统启用防火墙。首次打开LabVIEW时，可能会弹出一个对话框，要求您选择是否从网络接收信息。建议选择“解除阻止”，以使用LabVIEW的所有网络功能。详细信息请访问ni.com/info，并输入信息代码expm69查询。 |
|
|
<br>产品注意事项 |
|
|
<br>安装该产品之前，必须安装Microsoft Office XP或更高版本。“Report Generation工具包-用于Microsoft Office”提供的一组VI可用于创建和编辑Microsoft Word和Microsoft Excel格式的报表。通过报表生成工具，用户可使用Word、Excel或自定义模板创建风格一致的专业报表；减少报表显示、打印或保存前编程的工作量。还可以在*.rd文档和Excel工作表中执行Visual Basic宏，实现自定义的功能。更多关于Report Generation工具包的信息，请访问ni.com/info并输入信息代码report。 |
|
|
<br>正在安装自等社过猪保要票影的前我地,是器得品和更新。如执行搜索，则gational Instruments将在遵循保密协议的前提下，使用您的搜索查询来改进搜索结果和相关性。 |
|
|
</div> |
|
|
</div> |
|
|
<div class="step7" v-show="installationStep === 7"> |
|
|
<p class="name">总进度</p> |
|
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="80" style="margin-bottom: 25px"/> |
|
|
<p class="name">复制新文件</p> |
|
|
<el-progress :percentage="100" status="success" :stroke-width="20" /> |
|
|
</div> |
|
|
<div class="step7" v-show="installationStep === 8"> |
|
|
<p class="name">总进度</p> |
|
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="80" style="margin-bottom: 25px"/> |
|
|
<p class="name">复制新文件</p> |
|
|
<el-progress :percentage="100" status="success" :stroke-width="20" /> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<template #footer> |
|
|
<div class="dialog-footer"> |
|
|
<el-button |
|
|
v-show="installationStep === 5" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>恢复默认设置</el-button |
|
|
> |
|
|
<el-button |
|
|
v-show="installationStep === 5" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>磁盘占用</el-button |
|
|
> |
|
|
<el-button |
|
|
v-show="installationStep === 6" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>保存文件</el-button |
|
|
> |
|
|
<el-button |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>上一步</el-button |
|
|
> |
|
|
<el-button |
|
|
type="primary" |
|
|
@click="setInstallationStep" |
|
|
style="background-color: #0052d9; color: #fff; border: 0" |
|
|
> |
|
|
下一步 |
|
|
</el-button> |
|
|
<el-button |
|
|
type="primary" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
> |
|
|
取消 |
|
|
</el-button> |
|
|
</div> |
|
|
</template> |
|
|
</el-dialog> |
|
|
<el-dialog |
|
|
v-model="Popup" |
|
|
width="650px" |
|
|
height="500px" |
|
|
top="10%" |
|
|
style="left: 5%;padding: 0;" |
|
|
> |
|
|
<template #header> |
|
|
<div class="dialog-header" >安装LabVIEW硬件支持</div> |
|
|
</template> |
|
|
<div class="installation-box"> |
|
|
<div v-show="installationStep === 8"> |
|
|
<div style="margin-top: 8px; margin-bottom: 80px;font-size: 16px;line-height: 1.6;letter-spacing: 0.5px;font-weight: bold">如需使LabVIEW支持硬件设备，必须安装相应的设备驱动程序即便以前版本的LabVIEW已经安装相应设备驱动程序，仍需。需为当前版本的LabVIEW重新安装。</div> |
|
|
<div class="item">如所需文件处于其他位置，请在下面输入相应路径。</div> |
|
|
<el-select disabled placeholder="C:\Users\LabVIEW Chinese\2014" style="width: 300px;margin-top: 10px;margin-left: 15px;"/> |
|
|
<el-button disabled style="margin-left: 5px;margin-top: 10px;">浏览</el-button> |
|
|
</div> |
|
|
<div class="step9" v-show="installationStep === 9"style="height: 250px;font-weight: bold;font-size: 16px;"> |
|
|
安装完成! |
|
|
</div> |
|
|
</div> |
|
|
<template #footer> |
|
|
<div class="dialog-footer"> |
|
|
<el-button |
|
|
v-show="installationStep === 8" |
|
|
size="large" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>安装支持</el-button |
|
|
> |
|
|
<el-button |
|
|
v-show="installationStep === 8" |
|
|
type="primary" |
|
|
size="large" |
|
|
@click="setInstallationStep" |
|
|
style="background-color: #0052d9; color: #fff; border: 0" |
|
|
> |
|
|
不需要支持 |
|
|
</el-button> |
|
|
<el-button |
|
|
v-show="installationStep === 9" |
|
|
size="large" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
>上一步</el-button |
|
|
> |
|
|
<el-button |
|
|
v-show="installationStep === 9" |
|
|
type="primary" |
|
|
size="large" |
|
|
@click="Installation = false" |
|
|
style="background-color: #f3f3f3; color: #000000; border-color: #ccc" |
|
|
|
|
|
> |
|
|
下一步 |
|
|
</el-button> |
|
|
<el-button |
|
|
v-show="installationStep === 9" |
|
|
size="large" |
|
|
@click="Completed" |
|
|
style="background-color: #0052d9; color: #fff; border: 0" |
|
|
>完成</el-button |
|
|
> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
</el-dialog> |
|
|
</template> |
|
|
|
|
|
<script setup lang="ts"> |
|
|
import { ref } from "vue"; |
|
|
type Falg = boolean; |
|
|
type Step = number; |
|
|
const falg = ref<Falg>(false); |
|
|
const product = ref<Falg>(false); |
|
|
const step = ref<Step>(0); |
|
|
const popover1 = ref<any>(null); |
|
|
const popover2 = ref<any>(null); |
|
|
const dialogVisible = ref<Falg>(false); |
|
|
const Installation = ref<Falg>(false); |
|
|
const Popup = ref<Falg>(false); |
|
|
const installationStep = ref<Step>(1); |
|
|
const checkList = ref<Step[]>([1, 2]); |
|
|
const unpack = (): void => { |
|
|
falg.value = true; |
|
|
console.log(falg); |
|
|
popover1.value.hide(); |
|
|
}; |
|
|
const setStep = (index: number): void => { |
|
|
step.value = index; |
|
|
if (index === 0) { |
|
|
dialogVisible.value = false; |
|
|
setTimeout(() => { |
|
|
Installation.value = true; |
|
|
}, 500); |
|
|
} |
|
|
}; |
|
|
const openSrttingDialog = (): void => { |
|
|
console.log(1); |
|
|
|
|
|
step.value = 1; |
|
|
popover2.value.hide(); |
|
|
}; |
|
|
const setInstallationStep = (): void => { |
|
|
installationStep.value++; |
|
|
if(installationStep.value == 8){ |
|
|
Popup.value = true |
|
|
} |
|
|
if(installationStep.value == 9){ |
|
|
Installation.value = false |
|
|
Popup.value = true |
|
|
} |
|
|
}; |
|
|
const Completed = ():void => { |
|
|
Popup.value = false |
|
|
product.value = true; |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style scoped lang="scss"> |
|
|
.container { |
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-top: 120px; |
|
|
.main { |
|
|
position: relative; |
|
|
width: 1442px; |
|
|
height: 753px; |
|
|
// background-color: pink; |
|
|
.app-list { |
|
|
width: 500px; |
|
|
height: 500px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-wrap: wrap; |
|
|
.item { |
|
|
width: 205px; |
|
|
height: 232px; |
|
|
// background: #ffffff; |
|
|
margin-right: 40px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
// justify-content: center; |
|
|
cursor: pointer; |
|
|
&:hover { |
|
|
border: 1px solid #41d3ff; |
|
|
} |
|
|
.icon { |
|
|
width: 103px; |
|
|
height: 103px; |
|
|
} |
|
|
.file-name { |
|
|
font-size: 24px; |
|
|
margin-top: 20px; |
|
|
color: #fff; |
|
|
line-height: 32px; |
|
|
padding: 0 10px; |
|
|
} |
|
|
&:nth-child(6n) { |
|
|
margin-right: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
.openFilesGroupDialg { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
background-color: #fff; |
|
|
border-radius: 5px; |
|
|
.step1 { |
|
|
width: 540px; |
|
|
height: 282px; |
|
|
.title { |
|
|
font-size: 18px; |
|
|
font-weight: 700; |
|
|
padding: 20px; |
|
|
} |
|
|
.description { |
|
|
font-size: 14px; |
|
|
line-height: 20px; |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
margin-top: 20px; |
|
|
padding: 0 20px; |
|
|
} |
|
|
.footer { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-top: 20px; |
|
|
background-color: #f5f4f4; |
|
|
height: 80px; |
|
|
padding: 20px; |
|
|
|
|
|
div { |
|
|
width: 242px; |
|
|
height: 32px; |
|
|
text-align: center; |
|
|
line-height: 32px; |
|
|
font-size: 14px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
} |
|
|
.submit { |
|
|
background-color: #005fb8; |
|
|
color: #fff; |
|
|
} |
|
|
.close { |
|
|
border: 1px solid #ccc; |
|
|
} |
|
|
} |
|
|
} |
|
|
.step2 { |
|
|
width: 540px; |
|
|
height: 380px; |
|
|
border-radius: 5px; |
|
|
background-color: #f3f3f3; |
|
|
.title { |
|
|
background-color: #fff; |
|
|
height: 60px; |
|
|
font-size: 18px; |
|
|
line-height: 60px; |
|
|
padding: 0 20px; |
|
|
} |
|
|
.setting-box { |
|
|
width: 100%; |
|
|
height: calc(540px - 60px); |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
.left { |
|
|
flex: 1; |
|
|
.description { |
|
|
font-size: 14px; |
|
|
line-height: 20px; |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
margin-top: 20px; |
|
|
} |
|
|
.tips { |
|
|
font-size: 14px; |
|
|
line-height: 20px; |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
margin-top: 20px; |
|
|
} |
|
|
.selectUrl { |
|
|
display: flex; |
|
|
margin-top: 10px; |
|
|
} |
|
|
.click-select { |
|
|
margin-top: 20px; |
|
|
} |
|
|
} |
|
|
.right { |
|
|
width: 130px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
.item { |
|
|
width: 96px; |
|
|
height: 32px; |
|
|
text-align: center; |
|
|
line-height: 32px; |
|
|
margin-bottom: 10px; |
|
|
border-radius: 5px; |
|
|
border: 1px solid #ccc; |
|
|
font-size: 14px; |
|
|
font-weight: 200; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
// background: url("@/assets/images/bg2.png") no-repeat; |
|
|
} |
|
|
.setting-list { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
.item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
height: 30px; |
|
|
cursor: pointer; |
|
|
border-radius: 5px; |
|
|
&:hover { |
|
|
background-color: #c9c9c9; |
|
|
} |
|
|
.icon { |
|
|
width: 22px; |
|
|
height: 22px; |
|
|
img { |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
.name { |
|
|
margin-left: 10px; |
|
|
} |
|
|
} |
|
|
} |
|
|
.installation-box { |
|
|
padding: 20px; |
|
|
.step1 { |
|
|
.title { |
|
|
font-size: 36px; |
|
|
color: #f2994a; |
|
|
font-weight: 700; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.description { |
|
|
margin-top: 50px; |
|
|
font-size: 14px; |
|
|
line-height: 30px; |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
margin-bottom: 30px; |
|
|
.item { |
|
|
position: relative; |
|
|
margin-left: 20px; |
|
|
&::before { |
|
|
content: " "; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
left: -15px; |
|
|
width: 5px; |
|
|
height: 5px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.step2 { |
|
|
min-height: 230px; |
|
|
.title { |
|
|
font-size: 24px; |
|
|
color: #585858; |
|
|
font-weight: 700; |
|
|
margin-top: 10px; |
|
|
} |
|
|
.tip { |
|
|
font-size: 16px; |
|
|
line-height: 30px; |
|
|
color: #585858; |
|
|
|
|
|
margin-top: 10px; |
|
|
} |
|
|
.name, |
|
|
.unit { |
|
|
padding-left: 37px; |
|
|
margin-top: 25px; |
|
|
|
|
|
} |
|
|
} |
|
|
.step3{ |
|
|
// width: 540px; |
|
|
// height: 500px; |
|
|
// border-radius: 5px; |
|
|
// background-color: #fff; |
|
|
.title { |
|
|
font-size: 25px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.tip{ |
|
|
margin-top: 20px; |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.serial{ |
|
|
margin-top: 40px; |
|
|
.name{ |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
margin-left: 400px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
:deep(.el-form-item__label ){ |
|
|
text-align: left; /* 设置label左对齐 */ |
|
|
line-height: 20px; |
|
|
} |
|
|
} |
|
|
} |
|
|
.step4{ |
|
|
.title { |
|
|
font-size: 25px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.tip { |
|
|
margin-top: 20px; |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.item{ |
|
|
margin-top: 50px; |
|
|
} |
|
|
.item:before { |
|
|
content: "• "; /* 在内容前添加一个小点和空格 */ |
|
|
color: rgb(0, 0, 0); /* 设置小点的颜色 */ |
|
|
font-size: 15px; /* 设置小点的大小 */ |
|
|
margin-right: 5px; /* 设置小点和文本之间的间距 */ |
|
|
} |
|
|
} |
|
|
.step5{ |
|
|
.title { |
|
|
font-size: 25px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.tip { |
|
|
margin-top: 20px; |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.headers{ |
|
|
display: flex; /* 使用Flexbox布局 */ |
|
|
justify-content: space-between; /* 让子元素在容器中左右对齐 */ |
|
|
} |
|
|
.header{ |
|
|
display: flex; /* 使用Flexbox布局 */ |
|
|
flex-direction: column; /* 设置子元素竖向排列 */ |
|
|
align-items: flex-start; /* 对齐方式，让子元素的起始位置对齐 */ |
|
|
width: auto; |
|
|
} |
|
|
.item{ |
|
|
margin-top: 20px; |
|
|
margin-left: 30px; |
|
|
font-size: 13px; |
|
|
|
|
|
} |
|
|
.item:before { |
|
|
content: '▸ '; /* 在内容前添加一个小点和空格 */ |
|
|
color: rgb(0, 0, 0); /* 设置小点的颜色 */ |
|
|
font-size: 13px; /* 设置小点的大小 */ |
|
|
margin-right: 5px; /* 设置小点和文本之间的间距 */ |
|
|
} |
|
|
.image-container { |
|
|
background-color: #ebebeb; |
|
|
width: 300px; /* 或者根据需要调整宽度 */ |
|
|
margin-left: auto; /* 推动到右侧 */ |
|
|
padding: 10px; |
|
|
display: flex; /* 启用Flexbox布局 */ |
|
|
flex-direction: column; /* 设置子元素竖向排列 */ |
|
|
justify-content: center; /* 垂直居中 */ |
|
|
align-items: center; /* 水平居中 */ |
|
|
} |
|
|
.name{ |
|
|
margin-top: 40px; |
|
|
} |
|
|
.name:before { |
|
|
content: "• "; /* 在内容前添加一个小点和空格 */ |
|
|
color: rgb(0, 0, 0); /* 设置小点的颜色 */ |
|
|
font-size: 15px; /* 设置小点的大小 */ |
|
|
margin-right: 5px; /* 设置小点和文本之间的间距 */ |
|
|
} |
|
|
} |
|
|
.step6{ |
|
|
.title { |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
color: #f2994a; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.item{ |
|
|
margin-top: 40px; |
|
|
line-height: 1.6; /* 设置行高 */ |
|
|
letter-spacing: 0.5px; /* 设置字母间距 */ |
|
|
} |
|
|
} |
|
|
.step7{ |
|
|
padding: 50px; |
|
|
// width: 600px; |
|
|
.name{ |
|
|
margin-bottom: 8px; |
|
|
font-size: 15px; |
|
|
font-weight: bold; /* 设置文字加粗 */ |
|
|
} |
|
|
.item:before { |
|
|
content: "• "; /* 在内容前添加一个小点和空格 */ |
|
|
color: rgb(0, 0, 0); /* 设置小点的颜色 */ |
|
|
font-size: 15px; /* 设置小点的大小 */ |
|
|
margin-right: 5px; /* 设置小点和文本之间的间距 */ |
|
|
} |
|
|
} |
|
|
} |
|
|
.dialog-header { |
|
|
padding: 20px; |
|
|
border-bottom: 1px solid #ccc; |
|
|
font-size: 16px; |
|
|
font-weight: 700; |
|
|
} |
|
|
.dialog-footer { |
|
|
height: 88px; |
|
|
background-color: #f3f3f3; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: end; |
|
|
padding: 0 20px; |
|
|
} |
|
|
:deep(.el-input__inner) { |
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
</style>
|
|
|
|
