完善弹窗
This commit is contained in:
parent
d31248aad9
commit
f6f7f42455
|
|
@ -0,0 +1,43 @@
|
|||
# 依赖目录
|
||||
node_modules
|
||||
npm-debug.log
|
||||
yarn-debug.log
|
||||
yarn-error.log
|
||||
pnpm-debug.log
|
||||
|
||||
# 构建输出目录
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# 编辑器目录和文件
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# 本地环境文件
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# 日志文件
|
||||
logs
|
||||
*.log
|
||||
|
||||
# 测试覆盖率目录
|
||||
coverage
|
||||
|
||||
# 缓存目录
|
||||
.npm
|
||||
.eslintcache
|
||||
.stylelintcache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,317 @@
|
|||
<!-- 新建项目弹窗 -->
|
||||
<style scoped>
|
||||
.Main :deep(.el-dialog) {
|
||||
background: #535050 !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 - 默认隐藏 */
|
||||
.LeftBox::-webkit-scrollbar,
|
||||
.CenterBox::-webkit-scrollbar,
|
||||
.RightBox::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.LeftBox::-webkit-scrollbar-track,
|
||||
.CenterBox::-webkit-scrollbar-track,
|
||||
.RightBox::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.LeftBox::-webkit-scrollbar-thumb,
|
||||
.CenterBox::-webkit-scrollbar-thumb,
|
||||
.RightBox::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.LeftBox:hover::-webkit-scrollbar,
|
||||
.CenterBox:hover::-webkit-scrollbar,
|
||||
.RightBox:hover::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.LeftBox:hover::-webkit-scrollbar-track,
|
||||
.CenterBox:hover::-webkit-scrollbar-track,
|
||||
.RightBox:hover::-webkit-scrollbar-track {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.LeftBox:hover::-webkit-scrollbar-thumb,
|
||||
.CenterBox:hover::-webkit-scrollbar-thumb,
|
||||
.RightBox:hover::-webkit-scrollbar-thumb {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.LeftBox:hover::-webkit-scrollbar-thumb:hover,
|
||||
.CenterBox:hover::-webkit-scrollbar-thumb:hover,
|
||||
.RightBox:hover::-webkit-scrollbar-thumb:hover {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
/* 对话框整体滚动条样式 - 默认隐藏 */
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 对话框悬停时显示滚动条 */
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-track {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.my-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #8f8888;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.my-header h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #FFf;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
padding: 10px;
|
||||
background: #ff8899;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.LeftBox,
|
||||
.CenterBox,
|
||||
.RightBox {
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
background: #ddd;
|
||||
margin: 0 5px;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.LeftBox:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.RightBox:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.LeftItem {
|
||||
height: 100px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.LeftItem span {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.CenterBox {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.CenterBottom{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.CenterItem {
|
||||
width: calc(33.333% - 7px);
|
||||
height: 120px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.CenterItem:hover {
|
||||
background: #e0e0e0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.CenterItem img{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.CenterItem span {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="Main">
|
||||
<el-dialog v-model="open" width="1200px" :show-close="false">
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="my-header">
|
||||
<h4 :id="titleId" :class="titleClass">新建项目</h4>
|
||||
</div>
|
||||
</template>
|
||||
<div class="contentBox">
|
||||
<div class="LeftBox">
|
||||
<div class="LeftItem" v-for="value in projectClassList"
|
||||
:style="{ backgroundImage: `url(${value.img})` }">
|
||||
<span>{{ value.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" CenterBox">
|
||||
<div class="CenterTop">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="全部" name="ALL">
|
||||
<div class="CenterBottom">
|
||||
<div class="CenterItem" v-for="value in largeScreenClassList">
|
||||
<img :src="value.img" alt="">
|
||||
<span>{{ value.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RightBox"></div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="open = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">创建项目</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
const open = ref(false)
|
||||
// 项目分类
|
||||
const projectClassList = [
|
||||
{
|
||||
name: '大屏看板',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: '地图可视化',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: '3D数字孪生',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: '3D地理信息',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: 'BI看板',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
]
|
||||
// 大屏分类
|
||||
const largeScreenClassList = [
|
||||
{
|
||||
name: '空白项目',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: '新手入门示列',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
name: '大屏基础示列',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
// tab切换
|
||||
const activeName = ref('ALL')
|
||||
|
||||
// 接收父级参数
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:open'])
|
||||
|
||||
// 监听open变化
|
||||
watch(() => props.open, (newVal) => {
|
||||
console.log("触发事件3", newVal)
|
||||
open.value = newVal
|
||||
})
|
||||
|
||||
// 监听内部open变化
|
||||
watch(open, (newVal) => {
|
||||
emit('update:open', newVal)
|
||||
})
|
||||
|
||||
// 处理提交
|
||||
const handleSubmit = () => {
|
||||
console.log('提交项目')
|
||||
open.value = false
|
||||
}
|
||||
</script>
|
||||
|
|
@ -14,12 +14,10 @@
|
|||
<!-- 导航菜单 -->
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li
|
||||
@click="selectMenu(item)"
|
||||
v-for="item in menu"
|
||||
:class="item.active ? 'active' : ''"
|
||||
>
|
||||
<el-icon :size="20"><component :is="item.icon" /></el-icon>
|
||||
<li @click="selectMenu(item)" v-for="item in menu" :class="item.active ? 'active' : ''">
|
||||
<el-icon :size="20">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -60,7 +58,7 @@
|
|||
<!-- 项目操作栏 -->
|
||||
<section class="project-actions">
|
||||
<div class="action-buttons">
|
||||
<button>新建</button>
|
||||
<button @click="openNewProject">新建</button>
|
||||
<button>新建文件夹</button>
|
||||
<button>导入项目</button>
|
||||
</div>
|
||||
|
|
@ -95,12 +93,17 @@
|
|||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- 新建项目弹窗 -->
|
||||
<projectModal v-model:open="dialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
<script setup>
|
||||
// 新建项目弹窗
|
||||
import projectModal from '@/view/components/projectModal.vue'
|
||||
import { ref } from "vue";
|
||||
const activeValue = ref(1);
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const menu = ref([
|
||||
{
|
||||
name: "我的项目",
|
||||
|
|
@ -143,6 +146,13 @@ const selectMenu = (data) => {
|
|||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 打开新建项目
|
||||
const openNewProject = () => {
|
||||
console.log("触发事件1", projectModal)
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -171,6 +181,7 @@ const selectMenu = (data) => {
|
|||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -178,10 +189,12 @@ const selectMenu = (data) => {
|
|||
border-radius: 50%;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
|
@ -193,6 +206,7 @@ const selectMenu = (data) => {
|
|||
padding: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -202,18 +216,22 @@ const selectMenu = (data) => {
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
color: #ffffff99;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu li:hover {
|
||||
background: rgba(5, 85, 158, 0.4);
|
||||
}
|
||||
|
||||
.nav-menu li.active {
|
||||
background: rgb(5, 85, 158);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #333;
|
||||
|
|
@ -229,6 +247,7 @@ const selectMenu = (data) => {
|
|||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
@ -236,10 +255,12 @@ const selectMenu = (data) => {
|
|||
border-radius: 4px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.ad-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ad-btn {
|
||||
background: #0078d4;
|
||||
border: none;
|
||||
|
|
@ -249,6 +270,7 @@ const selectMenu = (data) => {
|
|||
color: #fff;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.ad-btn:hover {
|
||||
background: #005a9e;
|
||||
}
|
||||
|
|
@ -260,11 +282,13 @@ const selectMenu = (data) => {
|
|||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -286,6 +310,7 @@ const selectMenu = (data) => {
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
|
|
@ -296,9 +321,11 @@ const selectMenu = (data) => {
|
|||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
|
@ -307,15 +334,18 @@ const selectMenu = (data) => {
|
|||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.header-banner h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-banner p {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 200px;
|
||||
|
|
@ -326,6 +356,7 @@ const selectMenu = (data) => {
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 200px;
|
||||
|
|
@ -337,6 +368,7 @@ const selectMenu = (data) => {
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-group span {
|
||||
margin: 0 6px;
|
||||
color: #999;
|
||||
|
|
@ -350,6 +382,7 @@ const selectMenu = (data) => {
|
|||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
background: rgb(26, 27, 29);
|
||||
border: 1px solid #444;
|
||||
|
|
@ -360,21 +393,26 @@ const selectMenu = (data) => {
|
|||
margin-right: 8px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.action-buttons button:hover {
|
||||
background: #383838;
|
||||
}
|
||||
|
||||
.tab-group span {
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.tab-group span:hover {
|
||||
color: #0078d4;
|
||||
}
|
||||
|
||||
.tab-group span.active {
|
||||
color: #0078d4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
background: rgb(26, 27, 29);
|
||||
border: 1px solid #444;
|
||||
|
|
@ -383,6 +421,7 @@ const selectMenu = (data) => {
|
|||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -393,6 +432,7 @@ const selectMenu = (data) => {
|
|||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
width: 240px;
|
||||
background: rgb(26, 27, 29);
|
||||
|
|
@ -401,9 +441,11 @@ const selectMenu = (data) => {
|
|||
text-align: center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
|
|
@ -411,22 +453,27 @@ const selectMenu = (data) => {
|
|||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.card-actions span {
|
||||
margin: 0 6px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card-actions span:hover {
|
||||
color: #0078d4;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 160px;
|
||||
background: rgb(15, 15, 15);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default defineConfig({
|
|||
},
|
||||
server: {
|
||||
host: '0.0.0.0', // 关键：允许通过IP访问（监听所有网络接口）
|
||||
port: 8080, // 可选：指定端口（默认5173）
|
||||
port: 86,
|
||||
open: true, // 可选：启动时自动打开浏览器，
|
||||
proxy: {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue