Compare commits
2 Commits
6482d2a4ee
...
62827114b6
| Author | SHA1 | Date |
|---|---|---|
 liangbin
|
62827114b6 | |
|
liangbin
|
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>
|
||||
|
|
@ -20,11 +20,10 @@
|
|||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<template v-for="(item, index) in menu">
|
||||
<li
|
||||
@click="selectMenu(item)"
|
||||
:class="item.active ? 'active' : ''"
|
||||
>
|
||||
<el-icon :size="20"><component :is="item.icon" /></el-icon>
|
||||
<li @click="selectMenu(item)" :class="item.active ? 'active' : ''">
|
||||
<el-icon :size="20">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
<div v-if="index == 2" class="split-line"></div>
|
||||
|
|
@ -32,6 +31,18 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<!-- 导航菜单 -->
|
||||
<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>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 广告卡片 -->
|
||||
<el-card header-class="card-header" body-class="card-body">
|
||||
|
|
@ -70,33 +81,29 @@
|
|||
<section class="project-actions">
|
||||
<div class="action-buttons">
|
||||
<button id="ai-speech-add-project" @click="addProject">
|
||||
<el-icon :size="16"><DocumentAdd /></el-icon><span>新建</span>
|
||||
<el-icon :size="16">
|
||||
<DocumentAdd />
|
||||
</el-icon><span>新建</span>
|
||||
</button>
|
||||
<button>
|
||||
<el-icon :size="16"><FolderAdd /></el-icon><span>新建文件夹</span>
|
||||
<el-icon :size="16">
|
||||
<FolderAdd />
|
||||
</el-icon><span>新建文件夹</span>
|
||||
</button>
|
||||
<button>
|
||||
<el-icon :size="16"><UploadFilled /></el-icon><span>导入项目</span>
|
||||
<el-icon :size="16">
|
||||
<UploadFilled />
|
||||
</el-icon><span>导入项目</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<el-tabs
|
||||
v-model="tabName"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
style="margin: 20px 0 8px 0"
|
||||
>
|
||||
<el-tabs v-model="tabName" class="demo-tabs" @tab-click="handleClick" style="margin: 20px 0 8px 0">
|
||||
<el-tab-pane label="本地项目" name="local"></el-tab-pane>
|
||||
<el-tab-pane label="云托管项目" name="cloud"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
style="width: 260px"
|
||||
class="responsive-input"
|
||||
placeholder="搜索项目"
|
||||
prefix-icon="Search"
|
||||
/>
|
||||
<el-input v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
|
||||
prefix-icon="Search" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -106,10 +113,18 @@
|
|||
<div class="project-item-info">
|
||||
<div class="card-title">{{ item.name }}</div>
|
||||
<div class="card-actions">
|
||||
<span><el-icon :size="18"><Promotion /></el-icon></span>
|
||||
<span><el-icon :size="18"><Delete /></el-icon></span>
|
||||
<span><el-icon :size="18"><Share /></el-icon></span>
|
||||
<span><el-icon><MoreFilled /></el-icon></span>
|
||||
<span><el-icon :size="18">
|
||||
<Promotion />
|
||||
</el-icon></span>
|
||||
<span><el-icon :size="18">
|
||||
<Delete />
|
||||
</el-icon></span>
|
||||
<span><el-icon :size="18">
|
||||
<Share />
|
||||
</el-icon></span>
|
||||
<span><el-icon>
|
||||
<MoreFilled />
|
||||
</el-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-img"></div>
|
||||
|
|
@ -118,11 +133,17 @@
|
|||
|
||||
</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 dialogVisible = ref(false)
|
||||
|
||||
const menu = ref([
|
||||
{
|
||||
name: "我的项目",
|
||||
|
|
@ -180,6 +201,7 @@ const handleClick = (tab, event) => {
|
|||
};
|
||||
|
||||
const addProject = () => {
|
||||
dialogVisible.value = true;
|
||||
console.log("正在点击新建按钮 ======> addProject ");
|
||||
}
|
||||
|
||||
|
|
@ -212,28 +234,33 @@ const addProject = () => {
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #444;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.user-label {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
|
|
@ -248,6 +275,7 @@ const addProject = () => {
|
|||
padding: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -257,18 +285,22 @@ const addProject = () => {
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
color: #f8f8ff99;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu li:hover {
|
||||
background: rgba(5, 85, 158, 0.4);
|
||||
}
|
||||
|
||||
.nav-menu li.active {
|
||||
background: #0078d4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #333;
|
||||
|
|
@ -284,21 +316,25 @@ const addProject = () => {
|
|||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-img {
|
||||
width: 80%;
|
||||
height: 80px;
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
margin: 0 auto 12px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ad-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ad-btn {
|
||||
background: #0078d4;
|
||||
border: none;
|
||||
|
|
@ -308,6 +344,7 @@ const addProject = () => {
|
|||
color: #fff;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.ad-btn:hover {
|
||||
background: #005a9e;
|
||||
}
|
||||
|
|
@ -319,11 +356,13 @@ const addProject = () => {
|
|||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -344,6 +383,7 @@ const addProject = () => {
|
|||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -352,6 +392,7 @@ const addProject = () => {
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
|
|
@ -362,6 +403,7 @@ const addProject = () => {
|
|||
position: absolute;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
&-info {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -371,15 +413,18 @@ const addProject = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -390,6 +435,7 @@ const addProject = () => {
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 200px;
|
||||
|
|
@ -401,6 +447,7 @@ const addProject = () => {
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-group span {
|
||||
margin: 0 6px;
|
||||
color: #999;
|
||||
|
|
@ -414,9 +461,11 @@ const addProject = () => {
|
|||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
background: rgb(26, 27, 29);
|
||||
border: 1px solid #444;
|
||||
|
|
@ -427,31 +476,38 @@ const addProject = () => {
|
|||
margin-right: 8px;
|
||||
transition: background 0.3s;
|
||||
display: flex;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons button:hover {
|
||||
background: #0078d4;
|
||||
border: 1px solid #0078d4;
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
background: rgb(26, 27, 29);
|
||||
border: 1px solid #444;
|
||||
|
|
@ -460,6 +516,7 @@ const addProject = () => {
|
|||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -472,6 +529,7 @@ const addProject = () => {
|
|||
padding: 16px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
|
|
@ -482,9 +540,11 @@ const addProject = () => {
|
|||
transition: transform 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
|
|
@ -492,22 +552,27 @@ const addProject = () => {
|
|||
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