437 lines
9.9 KiB
Vue
437 lines
9.9 KiB
Vue
<!-- 新建项目弹窗 -->
|
||
<style lang="less" scoped>
|
||
.Main :deep(.el-dialog) {
|
||
background: rgba(38, 39, 42, 1) !important;
|
||
padding: 0px !important;
|
||
}
|
||
.Main :deep(.el-input__inner) {
|
||
color: #FFf;
|
||
}
|
||
|
||
|
||
|
||
.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-thumb {
|
||
background: transparent;
|
||
border-radius: 4px;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.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: rgba(30, 30, 30, 30);
|
||
align-items: center;
|
||
padding: 10px;
|
||
}
|
||
|
||
.my-header h4 {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #FFf;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.contentBox {
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
min-height: 500px;
|
||
}
|
||
.CenterBox {
|
||
flex: 1;
|
||
}
|
||
.LeftBox,
|
||
.CenterBox,
|
||
.RightBox {
|
||
height: 100%;
|
||
margin: 0 5px;
|
||
border-radius: 4px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.LeftBox:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.RightBox:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.LeftItem {
|
||
height: 150px;
|
||
width: 300px;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 10px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.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;
|
||
padding-top: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.CenterItem {
|
||
width: calc(33.333% - 7px);
|
||
height: 150px;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
background: rgb(30, 30, 30);
|
||
color: #fff;
|
||
}
|
||
.empty-folders {
|
||
width: 100%;
|
||
height: 120px;
|
||
text-align: center;
|
||
line-height: 120px;
|
||
background: rgb(46, 47, 51);
|
||
margin-bottom: 4px;
|
||
padding-top: 30px;
|
||
box-sizing: border-box;
|
||
color: #ffffff85;
|
||
&.sp {
|
||
height: 180px;
|
||
width: 290px;
|
||
border-radius: 8px;
|
||
padding-top: 50px;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.CenterItem:hover {
|
||
background: #0078d4;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 激活大屏分类 */
|
||
.ActiveCenterItem {
|
||
background: #0e6ad3;
|
||
}
|
||
|
||
.CenterItem img {
|
||
width: 100%;
|
||
height: 120px;
|
||
object-fit: cover;
|
||
border-radius: 4px 4px 0 0;
|
||
}
|
||
|
||
.CenterItem span {
|
||
display: block;
|
||
height: 30px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.RightBox {
|
||
width: 290px;
|
||
padding-top: 65px;
|
||
box-sizing: border-box;
|
||
color: #f5f5f5;
|
||
}
|
||
|
||
|
||
.RightBox img {
|
||
width: 100%;
|
||
height: 180px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.RightBox h2 {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.RightBox p {
|
||
height: 110px;
|
||
padding: 0px;
|
||
margin: 0px;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.NameBox h4 {
|
||
padding: 0px;
|
||
margin: 10px 0px;
|
||
}
|
||
|
||
.FootBtn {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.close-btn {
|
||
background: transparent;
|
||
color: #fff;
|
||
border: 1px solid #ffffff90 !important;
|
||
}
|
||
}
|
||
.is-select {
|
||
border: 1px solid #0078d4;
|
||
position: relative;
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #0078d420;
|
||
}
|
||
}
|
||
</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" @click="selectType(value)" :class="value.type == selectTypeValue ? 'is-select' : ''" 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" @click="selectTemplate(value)" :class="value.type == selectTemplateValue.type ? 'is-select' : ''" v-for="value in largeScreenClassList">
|
||
<img v-if="value.img" :src="value.img" alt="">
|
||
<div class="empty-folders" v-else>
|
||
<el-icon :size="50"><Files /></el-icon>
|
||
</div>
|
||
<span>{{ value.name }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
<div class="RightBox">
|
||
<img v-if="selectTemplateValue.img" :src="selectTemplateValue.img" alt="">
|
||
<div class="empty-folders sp" v-else>
|
||
<el-icon :size="50"><Files /></el-icon>
|
||
</div>
|
||
<h2>{{ selectTemplateValue.name }}</h2>
|
||
<p>{{ selectTemplateValue.description }}</p>
|
||
<div class="FileInfo">项目信息：大小{{ selectTemplateValue.size }}MB</div>
|
||
<div class="NameBox">
|
||
<h4>项目名称</h4>
|
||
<el-input v-model="projectName" id="ai-speech-project-name" placeholder="请输入名称" />
|
||
</div>
|
||
<div class="FootBtn">
|
||
<el-button id="ai-speech-close_buildproject" class="close-btn" @click="handleClose">取消</el-button>
|
||
<el-button id="ai-speech-buildproject" type="primary" @click="submitFun">创建项目</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
</template>
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
import { useRouter } from "vue-router";
|
||
const router = useRouter();
|
||
const open = ref(false)
|
||
const selectTypeValue = ref(1);
|
||
const projectName = ref("");
|
||
const selectTemplateValue = ref({
|
||
name: '空白项目',
|
||
img: '',
|
||
url: '/dataScreen',
|
||
type: 1,
|
||
description: '空白模板',
|
||
size: 0
|
||
});
|
||
|
||
// 项目分类
|
||
const projectClassList = [
|
||
{
|
||
id: 1,
|
||
name: '大屏看板',
|
||
img: '/src/assets/images/sjdp2.png',
|
||
url: '/dataScreen',
|
||
type: 1
|
||
},
|
||
// {
|
||
// name: '地图可视化',
|
||
// img: '/src/assets/images/sjdp2.png',
|
||
// url: '/dataScreen'
|
||
// },
|
||
{
|
||
id: 3,
|
||
name: '3D数字孪生',
|
||
img: '/src/assets/images/sjdp1.png',
|
||
url: '/dataScreen',
|
||
type: 2
|
||
},
|
||
// {
|
||
// name: '3D地理信息',
|
||
// img: '/src/assets/images/sjdp2.png',
|
||
// url: '/dataScreen'
|
||
// },
|
||
// {
|
||
// name: 'BI看板',
|
||
// img: '/src/assets/images/sjdp1.png',
|
||
// url: '/dataScreen'
|
||
// },
|
||
]
|
||
|
||
// 选中项目
|
||
const selectedProject = ref(1)
|
||
|
||
// 大屏分类
|
||
|
||
const largeScreenClassList = [
|
||
{
|
||
id: 1,
|
||
name: '空白项目',
|
||
img: '',
|
||
url: '/dataScreen',
|
||
type: 1,
|
||
description: '空白模板',
|
||
size: 0
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '新手入门示列',
|
||
img: '/src/assets/images/sjdp2.png',
|
||
url: '/dataScreen',
|
||
type: 2,
|
||
description: '包含基础元素及新手演示视频',
|
||
size: 3
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '大屏基础示列',
|
||
img: '/src/assets/images/sjdp1.png',
|
||
url: '/dataScreen',
|
||
type: 3,
|
||
description: '包含所有2D基础元素的大屏示列',
|
||
size: 5
|
||
},
|
||
|
||
]
|
||
// tab切换
|
||
const activeName = ref('ALL')
|
||
// 选中大屏
|
||
const selectedLargeScreen = ref(1)
|
||
|
||
// 项目名称
|
||
|
||
// 接收父级参数
|
||
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 selectType = (data) => {
|
||
selectTypeValue.value = data.type;
|
||
}
|
||
|
||
const selectTemplate = (data) => {
|
||
selectTemplateValue.value = data;
|
||
}
|
||
|
||
|
||
|
||
// 关闭弹窗
|
||
const handleClose = () => {
|
||
open.value = false
|
||
}
|
||
|
||
const submitFun = () => {
|
||
console.log(projectName.value, "=====> 项目名称");
|
||
router.push('/LargeScreen');
|
||
|
||
}
|
||
</script> |