初始化 完成安装步骤

main
JayChou 3 months ago
commit 0ec955a8d0
  1. 4
      .env.development
  2. 4
      .env.production
  3. 24
      .gitignore
  4. 3
      .vscode/extensions.json
  5. 5
      README.md
  6. 14
      index.html
  7. 15835
      package-lock.json
  8. 34
      package.json
  9. 1888
      pnpm-lock.yaml
  10. 1
      public/vite.svg
  11. 16
      src/App.vue
  12. 2
      src/api/index.ts
  13. BIN
      src/assets/images/bg1.png
  14. BIN
      src/assets/images/bg2.png
  15. BIN
      src/assets/images/bg3.png
  16. BIN
      src/assets/images/filesGroup.png
  17. BIN
      src/assets/images/home.png
  18. BIN
      src/assets/images/topbgc.png
  19. BIN
      src/assets/images/zip.png
  20. 48
      src/layout/index.vue
  21. 15
      src/main.ts
  22. 27
      src/router/index.ts
  23. 6
      src/store/index.ts
  24. 15
      src/store/modules/setting.ts
  25. 27
      src/styles/index.scss
  26. 188
      src/styles/reset.scss
  27. 0
      src/styles/variable.scss
  28. 118
      src/utils/rem.js
  29. 23
      src/utils/request.ts
  30. 580
      src/views/largeDataScreen/home.vue
  31. 1
      src/vite-env.d.ts
  32. 27
      tsconfig.app.json
  33. 31
      tsconfig.json
  34. 11
      tsconfig.node.json
  35. 47
      vite.config.ts

@ -0,0 +1,4 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '大屏数据'
VITE_APP_BASE_API = 'http://10.115.6.28:18083/'

@ -0,0 +1,4 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '大屏数据'
VITE_APP_BASE_API = '/api'

24
.gitignore vendored

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

@ -0,0 +1,5 @@
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.4/echarts-gl.min.js"></script>
</html>

15835
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,34 @@
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --open",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"@kjgl77/datav-vue3": "^1.7.3",
"axios": "^1.7.2",
"element-plus": "^2.9.5",
"lib-flexible": "^0.3.2",
"pinia": "^2.1.7",
"postcss-plugin-px2rem": "^0.8.1",
"sass": "^1.77.6",
"sass-loader": "^14.2.1",
"vue": "^3.4.29",
"vue-router": "4"
},
"devDependencies": {
"@types/node": "^20.14.9",
"@vitejs/plugin-vue": "^5.0.5",
"postcss": "^8.4.39",
"postcss-html": "^1.7.0",
"postcss-scss": "^4.0.9",
"px2rem-loader": "^0.1.9",
"typescript": "^5.2.2",
"vite": "^5.3.1",
"vue-tsc": "^2.0.21"
}
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -0,0 +1,16 @@
<template>
<router-view></router-view>
</template>
<script lang='ts' setup>
// import { onMounted, reactive, ref, toRefs, watch } from 'vue'
// window.addEventListener("beforeunload", function (e) {
// e.preventDefault();
// e.returnValue = "";
// return "";
// });
</script>
<style lang='scss' scoped>
</style>

@ -0,0 +1,2 @@
import request from '@/utils/request'

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

@ -0,0 +1,48 @@
<template>
<div class="container-bgc">
<div class="top">
<div class="title">{{ setting.title }}</div>
</div>
<router-view v-slot="{ Component }">
<keep-alive >
<component :is="Component"></component>
</keep-alive>
</router-view>
<keep-alive> </keep-alive>
<div class="bottom"></div>
</div>
</template>
<script lang="ts" setup>
// import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting";
const setting = settingStore();
console.log(setting.title);
</script>
<style lang="scss" scoped>
.container-bgc {
position: relative;
width: 100%;
// height: 1080px;
height: 1080px;
background-color: #091d22;
background: url("../assets//images/bg2.png") no-repeat;
.top {
width: 100%;
height: 75px;
text-align: center;
font-size: 42px;
line-height: 75px;
font-style: italic;
background: url("../assets/images/topbgc.png") no-repeat;
// background-position: center bottom -10px;
.title {
color: #fff;
}
}
}
</style>

@ -0,0 +1,15 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import '@/styles/index.scss'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件
import '@/utils/rem.js'
import DataVVue3 from '@kjgl77/datav-vue3'
import pinia from '@/store/index'
const app = createApp(App)
app.use(ElementPlus)
app.use(pinia)
app.use(DataVVue3)
app.use(router)
app.mount('#app')

@ -0,0 +1,27 @@
import { createRouter, createWebHashHistory } from "vue-router";
import layout from '@/layout/index.vue'
const routerList :any = [
{
path: "/",
component: layout,
children:[
{
path:'',
name:'Home',
component:() => import('@/views/largeDataScreen/home.vue')
},
]
},
];
const router :any = createRouter({
history: createWebHashHistory(),
routes: routerList,
scrollBehavior() {
return {
left: 0,
top: 0,
}
},
})
export default router

@ -0,0 +1,6 @@
// 引入仓库
import { createPinia } from 'pinia'
// 创建仓库
const pinia = createPinia()
// 暴露仓库
export default pinia

@ -0,0 +1,15 @@
import { defineStore } from "pinia"
const settingStore = defineStore("settingStore", {
state: ():any => {
return {
title: "虚拟仿真实验项目",
};
},
actions: {
setTitle(name: any) {
this.title = name;
},
},
});
export default settingStore;

@ -0,0 +1,27 @@
@import url('./reset.scss');
/* 滚动条整体宽度 */
::-webkit-scrollbar {
width: 10px;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: darkgrey;
border-radius: 10px;
}
/* 滑块处于活动状态时的样式 */
::-webkit-scrollbar-thumb:active {
background-color: lightgrey;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 10px;
}
/* 轨道悬停样式 */
::-webkit-scrollbar-track:hover {
background-color: #e1e1e1;
}

@ -0,0 +1,188 @@
/**
* ENGINE
* v0.2 | 20150615
* License: none (public domain)
*/
*,
*:after,
*:before {
box-sizing: border-box;
outline: none;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
input,
textarea,
button {
font-family: inhert;
font-size: inherit;
color: inherit;
}
select {
text-indent: .01px;
text-overflow: '';
border: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {
display: none;
}
code,
pre {
font-family: monospace, monospace;
font-size: 1em;
}

@ -0,0 +1,118 @@
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 1920) {
width = 1920 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));

@ -0,0 +1,23 @@
// 引入第三方请求库axios
import axios from 'axios'
// 创建axios实例
const server = axios.create({
baseURL:import.meta.env.VITE_APP_BASE_API,
timeout:10000,
})
// 创建请求拦截器
server.interceptors.request.use((config) => {
return config
})
// 创建相应拦截器
server.interceptors.response.use((response:any) => {
if(response.status === 200){
return response.data
}
// return response
})
// 暴露axios实例
export default server

@ -0,0 +1,580 @@
<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>
</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">©19862014 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;"></el-input>
</div>
<div class="unit">
<span>单位</span><el-input style="width: 280px;margin-left: 30px;"></el-input>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button
@click="Installation = false"
style="background-color: #f3f3f3; color: #000; 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: #000; border-color: #ccc"
>
取消
</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 step = ref<Step>(0);
const popover1 = ref<any>(null);
const popover2 = ref<any>(null);
const dialogVisible = ref<Falg>(false);
const Installation = ref<Falg>(true);
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++;
};
</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: 100%;
height: 100%;
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;
}
}
}
.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>

1
src/vite-env.d.ts vendored

@ -0,0 +1 @@
/// <reference types="vite/client" />

@ -0,0 +1,27 @@
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

@ -0,0 +1,31 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./", //
"paths": {
//baseUrl
"@/*": ["src/*"]
},
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}

@ -0,0 +1,47 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// @ts-ignore
import postcssPluginPx2rem from "postcss-plugin-px2rem"; //引入插件
// https://vitejs.dev/config/
//配置参数
const px2remOptions = {
rootValue: 192, //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制
// propWhiteList: [], // 默认值是一个空数组,这意味着禁用白名单并启用所有属性。
// propBlackList: [], // 黑名单
// exclude:false, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
mediaQuery: false, //(布尔值)允许在媒体查询中转换px
minPixelValue: 0 , //设置要替换的最小像素值(3px会被转rem)。 默认 0
}
export default defineConfig({
plugins: [vue()],
server:{
host: '0.0.0.0',
port: 8866,
},
resolve: {
alias: {
"@": path.resolve("./src"), // 相对路径别名配置,使用 @ 代替 src
},
},
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: '@import "./src/styles/variable.scss";',
},
},
postcss: {
plugins: [
// 配置响应式插件
postcssPluginPx2rem(px2remOptions)
],
},
},
});
Loading…
Cancel
Save