子系统页面样式修改
This commit is contained in:
parent
7f10d905ea
commit
baf81d907a
BIN
src/assert/images/img44.jpg
Normal file
BIN
src/assert/images/img44.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
@ -1,65 +1,16 @@
|
||||
<template>
|
||||
<div class="flex relative">
|
||||
<nav aria-label="Breadcrumb" class="flex ml-12">
|
||||
<ol class="mt-4 inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
|
||||
<li class="inline-flex items-center">
|
||||
<a class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" href="#">
|
||||
我管理的
|
||||
</a>
|
||||
</li>
|
||||
<li @click="$router.push('/WorkLoad/I_Manage')">
|
||||
<div class="flex items-center">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 9 4-4-4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
<a class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white" href="#">梁溪区纪委大数据管理平台项目</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" fill="none" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m1 9 4-4-4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
<a class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white" href="#">后台管理系统</a>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<a-breadcrumb class="mt-6 ml-6">
|
||||
<a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">子模块</a></a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="flex absolute right-8 mt-6 space-x-4">
|
||||
<button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
|
||||
<button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button>
|
||||
<button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子模块</button>
|
||||
</div>
|
||||
<a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子系统">
|
||||
<a-form>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="子系统名称："><a-input class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="状态：">
|
||||
<a-select
|
||||
ref="select"
|
||||
style="width: 145px;margin-left: 1.7vw"
|
||||
@focus="focus"
|
||||
>
|
||||
<a-select-option value="jack">进行中</a-select-option>
|
||||
<a-select-option value="lucy">未开始</a-select-option>
|
||||
<a-select-option value="disabled">已完成</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="周期："><a-input class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="系统描述：">
|
||||
<a-textarea :rows="1" class="w-36 h-8" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-modal >
|
||||
</div>
|
||||
<div class="mt-12 ml-12 flex space-x-16 h-full">
|
||||
<div class="mt-12 ml-8 flex space-x-16 h-full">
|
||||
<div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
|
||||
<p class="text-lg">子系统名称：后台管理系统</p>
|
||||
<p>子系统周期：10天</p>
|
||||
@ -149,6 +100,36 @@
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
<!--新增子模块对话框-->
|
||||
<a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子模块">
|
||||
<a-form>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="子模块名称："><a-input class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="状态：">
|
||||
<a-select
|
||||
ref="select"
|
||||
style="width: 145px;margin-left: 1.7vw"
|
||||
@focus="focus"
|
||||
>
|
||||
<a-select-option value="jack">进行中</a-select-option>
|
||||
<a-select-option value="lucy">未开始</a-select-option>
|
||||
<a-select-option value="disabled">已完成</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="周期："><a-input class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="系统描述：">
|
||||
<a-textarea :rows="1" class="w-36 h-8" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-modal >
|
||||
</template>
|
||||
<script setup>
|
||||
import {CaretUpOutlined, CheckOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
@ -1,51 +1,53 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-full">
|
||||
<a-breadcrumb class="mt-6 ml-6">
|
||||
<a-breadcrumb-item>我管理的项目</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="flex flex-row justify-between mt-3">
|
||||
<div>
|
||||
<!-- 第一个是 全部 所以独立出来 -->
|
||||
<a-checkable-tag
|
||||
v-model:checked="tagAll"
|
||||
@change="checked => handleClickAll(checked)"
|
||||
>
|
||||
全部
|
||||
</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)"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</a-checkable-tag>
|
||||
</div>
|
||||
<div>
|
||||
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 ml-12 flex space-x-16 h-full">
|
||||
<div class="flex space-x-9">
|
||||
<a-card v-for="(ChildProject, index) in ChildProjects" :key="index" class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-2xl font-bold tracking-tight text-gray-900">{{ChildProject.name}}</p>
|
||||
<div class="flex mt-7 space-x-3">
|
||||
<p class="ml-14 text-lg">剩余</p>
|
||||
<p class="text-xl text-green-400 font-bold">10天</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/ChildSystem')">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<div class="container">
|
||||
<a-breadcrumb class="mt-6 ml-6">
|
||||
<a-breadcrumb-item>我管理的项目</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="flex flex-row justify-between mt-3 ml-6">
|
||||
<div>
|
||||
<!-- 第一个是 全部 所以独立出来 -->
|
||||
<a-checkable-tag
|
||||
v-model:checked="tagAll"
|
||||
@change="checked => handleClickAll(checked)"
|
||||
>
|
||||
全部
|
||||
</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)"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</a-checkable-tag>
|
||||
</div>
|
||||
<div>
|
||||
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 ml-12 flex space-x-16 h-full">
|
||||
<div class="flex space-x-9">
|
||||
<a-card v-for="(ChildProject, index) in ChildProjects" :key="index" class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-2xl font-bold tracking-tight text-gray-900">{{ChildProject.name}}</p>
|
||||
<div class="flex mt-7 space-x-3">
|
||||
<p class="ml-14 text-lg">剩余</p>
|
||||
<p class="text-xl text-green-400 font-bold">10天</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/ChildSystem')">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
@ -1,28 +1,82 @@
|
||||
<template>
|
||||
<a-breadcrumb class="mt-6 ml-6">
|
||||
<a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="mt-12 ml-12 flex space-x-16 h-full">
|
||||
<div class="flex space-x-9">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-2xl font-bold tracking-tight text-gray-900"></p>
|
||||
<div class="flex mt-7 space-x-3">
|
||||
<p class="ml-14 text-lg">剩余</p>
|
||||
<p class="text-xl text-green-400 font-bold">10天</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/ChildModule')">
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container ml-6">
|
||||
<a-breadcrumb class="mt-6 ml-6">
|
||||
<a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
|
||||
<a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="flex absolute right-8 mt-6 space-x-4">
|
||||
<button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
|
||||
<button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button>
|
||||
</div>
|
||||
<div class="mt-12 ml-8 flex space-x-16 h-full">
|
||||
<div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
|
||||
<p class="text-lg">项目名称：梁溪区纪委大数据管理平台</p>
|
||||
<p>项目周期：3个月</p>
|
||||
<p>项目开始时间：</p>
|
||||
<p>项目完成时间：</p>
|
||||
<div class="space-y-2">
|
||||
<p>工作量：</p>
|
||||
<p>20人/天</p>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="flex space-x-5">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[260px] h-[300px] bg-cover bg-center bg-[url('@/assert/images/img44.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<div class="flex flex-col">
|
||||
<p class="ml-6 mt-4 text-3xl font-bold tracking-tight text-gray-900">01</p>
|
||||
<p class="ml-3 text-xl">子系统名称</p>
|
||||
</div>
|
||||
<div class="ml-auto mr-10">
|
||||
<button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/ChildModule')" >
|
||||
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--新增子系统对话框-->
|
||||
<a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子系统">
|
||||
<a-form>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="子系统名称："><a-input class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="状态：">
|
||||
<a-select
|
||||
ref="select"
|
||||
style="width: 145px;margin-left: 1.7vw"
|
||||
@focus="focus"
|
||||
>
|
||||
<a-select-option value="jack">进行中</a-select-option>
|
||||
<a-select-option value="lucy">未开始</a-select-option>
|
||||
<a-select-option value="disabled">已完成</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="周期："><a-input class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
|
||||
<a-form-item class="my-4" label="系统描述：">
|
||||
<a-textarea :rows="1" class="w-36 h-8" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-modal >
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, ref} from "vue";
|
||||
|
||||
const showButton = reactive([]);
|
||||
const AddModule = ref(false)
|
||||
function showAddModal(){
|
||||
AddModule.value = true;
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user