parent
9faf0ab0bd
commit
71703677e7
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 268 KiB |
@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref("");
|
||||
const showList = ref(false);
|
||||
const handlerShowList = () => (showList.value = true);
|
||||
const mock_list = [
|
||||
{
|
||||
title: "任务审批管理",
|
||||
data: [
|
||||
{
|
||||
title: "某某企业名称占位-1月拜访计划计划",
|
||||
},
|
||||
{
|
||||
title: "某某企业名称占位符占位占位-12月拜访计划计划",
|
||||
},
|
||||
{
|
||||
title: "某某企业-某某事业部-第四季度拜访计划计划",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "任务终审管理",
|
||||
data: [
|
||||
{
|
||||
title: "某某企业名称占位-1月拜访计划计划",
|
||||
},
|
||||
{
|
||||
title: "某某企业名称占位符占位占位-12月拜访计划计划",
|
||||
},
|
||||
{
|
||||
title: "某某企业名称占位符占位占位-12月拜访计划计划",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="input_wrap">
|
||||
<div class="ip_box">
|
||||
<img src="../../assets/images/IP.png" alt="">
|
||||
</div>
|
||||
<div class="input_box">
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
placeholder="搜索任务ID、任务名称、提报人、拜访终端"
|
||||
type="text"
|
||||
@mousedown="handlerShowList"
|
||||
>
|
||||
<template #prefix>
|
||||
<SvgIcon name="magnifying-1" size="18"></SvgIcon>
|
||||
</template>
|
||||
</n-input>
|
||||
</div>
|
||||
<div class="list_box" v-show="showList">
|
||||
<div
|
||||
class="list_classfiy_item"
|
||||
v-for="(item, index) in mock_list"
|
||||
:key="index"
|
||||
:style="(index == mock_list.length-1)?'':'border-bottom:1px solid #e4e4e4'"
|
||||
>
|
||||
<div class="list_title">{{ item.title }}</div>
|
||||
<div class="list_item" v-for="(sitem,sindex) in item.data" :key="sindex">
|
||||
<SvgIcon name="task-icon" size="16"></SvgIcon>
|
||||
<a style="margin-left: 5px">{{ sitem.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input_wrap {
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
.ip_box{
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
left: calc(50% - 40px);
|
||||
top: 30px;
|
||||
img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.input_box {
|
||||
z-index: 1;
|
||||
background: #ffffff;
|
||||
border: 1px solid #507afd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15),
|
||||
0px 0px 0px 0.5px #d4e3fc;
|
||||
}
|
||||
.list_box {
|
||||
opacity: 0.8;
|
||||
background: #fefefe;
|
||||
border: 1px dashed #f4f4f4;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15);
|
||||
margin-top: 15px;
|
||||
padding: 8px 16px;
|
||||
.list_classfiy_item {
|
||||
.list_title {
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC, PingFang SC-Regular;
|
||||
font-weight: Regular;
|
||||
color: #999999;
|
||||
line-height: 17px;
|
||||
margin: 10px 0 10px 5px;
|
||||
}
|
||||
.list_item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.n-input .n-input-wrapper) {
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal v-model:show="show" :mask="false" transform-origin="center">
|
||||
<Search />
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Search from "@/components/Search/Search.vue";
|
||||
import { ref } from "vue";
|
||||
const show = ref(false);
|
||||
function showModal() {
|
||||
show.value = true;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
Loading…
Reference in new issue