更新头部导航栏
This commit is contained in:
parent
26a1a38d56
commit
ac9513e651
@ -71,62 +71,136 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar-dropdown" class="w-full md:block md:w-auto">
|
||||
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
|
||||
<li>
|
||||
<a aria-current="page" id="home" class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/" onclick="changeColor('home')">
|
||||
首页
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a id="project" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" onclick="changeColor('projects')">
|
||||
项目
|
||||
</a>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<button id="about" class=" nav-link flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="changeColor('about')">
|
||||
关于
|
||||
<svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
|
||||
<ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a id="team" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#" @click="changeColor('team')">团队</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="new" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New" @click="changeColor('new')">新闻</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div id="navbar-dropdown" class="w-full md:block md:w-auto">-->
|
||||
<!-- <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">-->
|
||||
<!-- <li>-->
|
||||
<!-- <a aria-current="page" id="home" class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/" onclick="changeColor('home')">-->
|
||||
<!-- 首页-->
|
||||
<!-- </a>-->
|
||||
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a id="project" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" onclick="changeColor('projects')">-->
|
||||
<!-- 项目-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="relative">-->
|
||||
<!-- <button id="about" class=" nav-link flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="changeColor('about')">-->
|
||||
<!-- 关于-->
|
||||
<!-- <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">-->
|
||||
<!-- <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
<!-- <!– Dropdown menu –>-->
|
||||
<!-- <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">-->
|
||||
<!-- <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
|
||||
<!-- <li>-->
|
||||
<!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a id="team" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#" @click="changeColor('team')">团队</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a id="new" class=" nav-link block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New" @click="changeColor('new')">新闻</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import {h, onMounted, ref} from "vue";
|
||||
import requests from "../../js/request.js";
|
||||
import {message} from "ant-design-vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {BellOutlined, MailOutlined, MessageOutlined, ToolOutlined, UserOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
key: 'mail',
|
||||
// label: '首页',
|
||||
title: '首页',
|
||||
label: h(
|
||||
'a',
|
||||
{
|
||||
onClick: () =>{
|
||||
router.push('/')
|
||||
updateCurrent('mail')
|
||||
}
|
||||
},
|
||||
'首页',
|
||||
),
|
||||
|
||||
},
|
||||
{
|
||||
key: 'app',
|
||||
label: h(
|
||||
'a',
|
||||
{
|
||||
onClick: () => {
|
||||
router.push('/Project')
|
||||
updateCurrent('app')
|
||||
}
|
||||
|
||||
},
|
||||
'项目',
|
||||
),
|
||||
title: '项目',
|
||||
},
|
||||
{
|
||||
key: 'sub1',
|
||||
label: '关于',
|
||||
title: '关于',
|
||||
children: [
|
||||
{
|
||||
label: '关于我们',
|
||||
key: 'setting:1',
|
||||
},
|
||||
{
|
||||
label: '加入我们',
|
||||
key: 'setting:2',
|
||||
},
|
||||
{
|
||||
label: '项目合作',
|
||||
key: 'setting:3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'alipay',
|
||||
title: '团队',
|
||||
label: '团队'
|
||||
},
|
||||
{
|
||||
key: 'new',
|
||||
title: '新闻',
|
||||
label: '新闻',}
|
||||
|
||||
]);
|
||||
const appValue = current[0].key; // 使用点号访问属性
|
||||
const current = ref();
|
||||
// 传对应key给current但是没用怎么回事
|
||||
function updateCurrent(key) {
|
||||
current.value = [key];
|
||||
console.log('6666',current.value)
|
||||
|
||||
}
|
||||
const router = useRouter()
|
||||
const closable = ref(false)
|
||||
const isDropdownOpen = ref(false);
|
||||
|
||||
@ -659,6 +659,5 @@ export default {
|
||||
|
||||
messageGet,
|
||||
|
||||
getTagsProjectList
|
||||
|
||||
}
|
||||
@ -2,86 +2,112 @@
|
||||
<div class="relative h-full bg-gray-50 flex w-[100vw]">
|
||||
<div class="mt-12">
|
||||
<nav class="ml-16 flex space-x-[30vw]">
|
||||
<div class="inline-flex rounded-md " role="group">
|
||||
<button
|
||||
<!-- <div class="inline-flex rounded-md " role="group">-->
|
||||
<!-- <button-->
|
||||
|
||||
<!-- type="button"-->
|
||||
<!-- @click="toggleSelectionDisabled"-->
|
||||
<!-- class="w-[8vw] rounded-lg "-->
|
||||
<!-- :class="buttonClass('DisableSelection')"-->
|
||||
<!-- >-->
|
||||
<!-- 全部-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- :class="buttonClass('web')"-->
|
||||
<!-- type="button"-->
|
||||
<!-- @click="toggleSelection('web')"-->
|
||||
<!-- class="w-[6vw] rounded-lg"-->
|
||||
<!-- >-->
|
||||
<!-- Web-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- :class="buttonClass('Ai')"-->
|
||||
<!-- type="button"-->
|
||||
<!-- @click="toggleSelection('Ai')"-->
|
||||
<!-- class="w-[6vw] rounded-lg"-->
|
||||
<!-- >-->
|
||||
<!-- Ai-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- :class="buttonClass('App')"-->
|
||||
<!-- type="button"-->
|
||||
<!-- @click="toggleSelection('App')"-->
|
||||
<!-- class="w-[6vw] rounded-lg "-->
|
||||
<!-- >-->
|
||||
<!-- App-->
|
||||
<!-- </button>-->
|
||||
<!-- <button-->
|
||||
<!-- :class="buttonClass('大数据')"-->
|
||||
<!-- type="button"-->
|
||||
<!-- @click="toggleSelection('大数据')"-->
|
||||
<!-- class="w-[6vw] rounded-lg "-->
|
||||
<!-- >-->
|
||||
<!-- 大数据-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<div class="flex flex-row justify-between">
|
||||
<div>
|
||||
<!-- 第一个是 全部 所以独立出来 -->
|
||||
<a-checkable-tag
|
||||
v-model:checked="tagAll"
|
||||
@change="checked => handleClickAll(checked)"
|
||||
|
||||
type="button"
|
||||
@click="toggleSelectionDisabled"
|
||||
class="w-[8vw] rounded-lg "
|
||||
:class="buttonClass('DisableSelection')"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('web')"
|
||||
type="button"
|
||||
@click="toggleSelection('web')"
|
||||
class="w-[6vw] rounded-lg"
|
||||
</a-checkable-tag>
|
||||
<a-checkable-tag
|
||||
v-for="(tag, index) in tagsData"
|
||||
:key="tag.id"
|
||||
v-model:checked="selectTags[index]"
|
||||
@change="checked => handleChange(tag, checked)"
|
||||
>
|
||||
Web
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('Ai')"
|
||||
type="button"
|
||||
@click="toggleSelection('Ai')"
|
||||
class="w-[6vw] rounded-lg"
|
||||
>
|
||||
Ai
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('App')"
|
||||
type="button"
|
||||
@click="toggleSelection('App')"
|
||||
class="w-[6vw] rounded-lg "
|
||||
>
|
||||
App
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('大数据')"
|
||||
type="button"
|
||||
@click="toggleSelection('大数据')"
|
||||
class="w-[6vw] rounded-lg "
|
||||
>
|
||||
大数据
|
||||
</button>
|
||||
{{ tag.name }}
|
||||
</a-checkable-tag>
|
||||
</div>
|
||||
<div class="flex space-x-12">
|
||||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
|
||||
v-model="selectedStatus.weikaishi"
|
||||
/>
|
||||
<span class="text-sm">未开始</span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
|
||||
v-model="selectedStatus.jinxingzhong"
|
||||
/>
|
||||
<span class="text-sm">进行中</span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
|
||||
v-model="selectedStatus.yiwancheng"
|
||||
/>
|
||||
<span class="text-sm">已完成</span>
|
||||
</label>
|
||||
|
||||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
|
||||
v-model="selectedStatus.stop"
|
||||
/>
|
||||
<span class="text-sm ">暂停</span>
|
||||
</label>
|
||||
<div>
|
||||
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex space-x-12">-->
|
||||
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
|
||||
<!-- <input-->
|
||||
<!-- type="checkbox"-->
|
||||
<!-- class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"-->
|
||||
<!-- v-model="selectedStatus.weikaishi"-->
|
||||
<!-- />-->
|
||||
<!-- <span class="text-sm">未开始</span>-->
|
||||
<!-- </label>-->
|
||||
|
||||
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
|
||||
<!-- <input-->
|
||||
<!-- type="checkbox"-->
|
||||
<!-- class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"-->
|
||||
<!-- v-model="selectedStatus.jinxingzhong"-->
|
||||
<!-- />-->
|
||||
<!-- <span class="text-sm">进行中</span>-->
|
||||
<!-- </label>-->
|
||||
|
||||
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
|
||||
<!-- <input-->
|
||||
<!-- type="checkbox"-->
|
||||
<!-- class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"-->
|
||||
<!-- v-model="selectedStatus.yiwancheng"-->
|
||||
<!-- />-->
|
||||
<!-- <span class="text-sm">已完成</span>-->
|
||||
<!-- </label>-->
|
||||
|
||||
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
|
||||
<!-- <input-->
|
||||
<!-- type="checkbox"-->
|
||||
<!-- class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "-->
|
||||
<!-- v-model="selectedStatus.stop"-->
|
||||
<!-- />-->
|
||||
<!-- <span class="text-sm ">暂停</span>-->
|
||||
<!-- </label>-->
|
||||
<!-- </div>-->
|
||||
</nav>
|
||||
|
||||
<div class="flex flex-wrap mt-5 w-full">
|
||||
@ -134,6 +160,10 @@ watch(current1, () => {
|
||||
console.log('current', current1.value);
|
||||
});
|
||||
onMounted(() =>{
|
||||
request.getTagsProjectList(token).then(res=>{
|
||||
console.log(res.data.data)
|
||||
tagsData.value=res.data.data
|
||||
})
|
||||
getAllProject()
|
||||
})
|
||||
function getAllProject(){
|
||||
@ -145,7 +175,52 @@ function getAllProject(){
|
||||
})
|
||||
}
|
||||
|
||||
const tagsData = ref([]);
|
||||
const selectTags = ref([false, false, false, false]);
|
||||
|
||||
const projStatus = ref();
|
||||
const tagAll=ref(true)
|
||||
|
||||
const token = window.localStorage.getItem('token')
|
||||
|
||||
const projList=ref([])
|
||||
|
||||
|
||||
|
||||
//当选中全部时，其他的都不选中
|
||||
const handleClickAll=(checked)=>{
|
||||
if(checked){
|
||||
selectTags.value.forEach((item,index)=>{
|
||||
selectTags.value[index]=false
|
||||
})
|
||||
// 发送获取全部数据的请求
|
||||
request.projectGetCustom(selectedTagNames.value).then(res=>{
|
||||
console.log(res.data.data)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const selectedTagNames =ref([])
|
||||
// 当选中其他的时候， 全部 不选中
|
||||
const handleChange = (tag, checked) => {
|
||||
if(checked){
|
||||
tagAll.value=false
|
||||
// selectedTagNames.value.push(tag.name=''); // 将项目名称添加到数组中
|
||||
}
|
||||
else{
|
||||
let flag=true
|
||||
selectTags.value.forEach((item,index)=>{
|
||||
if(item){
|
||||
flag=false
|
||||
// selectedTagNames.value.push(tag.name); // 将项目名称添加到数组中
|
||||
}
|
||||
})
|
||||
if(flag){
|
||||
tagAll.value=true
|
||||
// selectedTagNames.value.splice(index, 1); // 从数组中移除项目名称
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//选择全部按钮，其他按钮不可选
|
||||
const toggleSelectionDisabled = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user