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