<template>
|
<div class="searchBox">
|
<div>
|
<el-input
|
v-model="searchValue"
|
class="searchInput"
|
placeholder="请输入地名"
|
>
|
<template #suffix>
|
<el-icon
|
title="清除"
|
@click="setSearchClose"
|
class="el-input__icon"
|
>
|
<Close />
|
</el-icon>
|
</template>
|
<template #prefix>
|
<el-icon
|
@click="setSearchClick"
|
title="查询"
|
class="el-input__icon"
|
>
|
<search />
|
</el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div
|
v-if="searchFLag"
|
class="search_content"
|
>
|
<el-collapse
|
v-model="activeNames"
|
@change="handleChange"
|
>
|
<el-collapse-item
|
title="查询结果"
|
name="1"
|
>
|
<div class="search_content_text">总查询结果:{{ listData.count }}</div>
|
<div class="search_content_text paging">
|
总页数：{{listData.page }}
|
<el-button
|
size="small"
|
text
|
:icon="DArrowLeft"
|
class="pagingBtn"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="ArrowLeft"
|
class="pagingBtn1"
|
/>
|
<el-input
|
class="numInput"
|
v-model="listData.num"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="ArrowRight"
|
class="pagingBtn1"
|
/>
|
<el-button
|
size="small"
|
text
|
:icon="DArrowRight"
|
class="pagingBtn"
|
/>
|
</div>
|
<div class="table_box">
|
<div class="table_header">
|
<div class="table_th_x">序号</div>
|
<div class="table_th">地名</div>
|
</div>
|
<div class="table_childer">
|
<div class="table_tr">
|
<div class="table_th_x"></div>
|
<div class="table_th"></div>
|
</div>
|
<div class="table_tr">
|
<div class="table_th_x"></div>
|
<div class="table_th"></div>
|
</div>
|
<div class="table_tr">
|
<div class="table_th_x"></div>
|
<div class="table_th"></div>
|
</div>
|
</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import {
|
Search,
|
DArrowLeft,
|
ArrowLeft,
|
ArrowRight,
|
DArrowRight,
|
} from "@element-plus/icons-vue";
|
|
let searchValue = ref("");
|
|
const activeNames = ref(["1"]);
|
const listData = ref({
|
count: 0,
|
page: 0,
|
num: 1,
|
});
|
const NumhandleChange = (value: number) => {
|
console.log(value);
|
};
|
const handleChange = (val: string[]) => {
|
console.log(val);
|
};
|
const setSearchClose = () => {
|
searchFLag.value = false;
|
|
searchValue.value = "";
|
};
|
const setSearchClick = () => {
|
if (!searchValue) return;
|
searchFLag.value = true;
|
};
|
const searchFLag = ref(false);
|
const tableData = reactive([
|
{
|
date: "1",
|
name: "Tom",
|
},
|
{
|
date: "2",
|
name: "Tom",
|
},
|
{
|
date: "3",
|
name: "Tom",
|
},
|
{
|
date: "4",
|
name: "Tom",
|
},
|
]);
|
onMounted(() => {});
|
</script>
|
<style lang="less" scoped>
|
.searchBox {
|
margin-left: 34px;
|
}
|
.searchInput {
|
width: 222px;
|
height: 35px;
|
/deep/.el-input__icon {
|
color: #d6e4ff;
|
}
|
}
|
.search_content {
|
margin-top: 8px;
|
width: 222px;
|
// background: rgba(7, 8, 14, 0.8);
|
border-radius: 4px;
|
.el-collapse,
|
/deep/ .el-collapse-item__wrap {
|
border: 0;
|
background-color: transparent;
|
}
|
/deep/ .el-collapse-item__header {
|
border-radius: 4px 4px 0px 0px;
|
height: 35px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
padding: 10px 20px;
|
box-sizing: border-box;
|
color: #d6e4ff;
|
border: 0;
|
}
|
/deep/ .el-collapse-item__content {
|
background: rgba(7, 8, 14, 0.8);
|
padding: 14px;
|
}
|
|
.search_content_text {
|
font-size: 12px;
|
color: #d6e4ff;
|
}
|
.numInput {
|
width: 49px;
|
height: 23px;
|
padding: 0 5px;
|
}
|
.paging {
|
margin-top: 14px;
|
}
|
.pagingBtn {
|
width: 15px;
|
height: 12px;
|
margin: 0;
|
font-size: 16px;
|
color: RGBA(186, 199, 223, 1);
|
}
|
.pagingBtn1 {
|
width: 8px;
|
height: 12px;
|
margin: 0;
|
padding: 0;
|
font-size: 16px;
|
color: RGBA(186, 199, 223, 1);
|
}
|
.pagingBtn:hover,
|
.pagingBtn1:hover {
|
background: transparent;
|
}
|
.pagingBtn1.is-text:not(.is-disabled):focus,
|
.pagingBtn1.is-text:not(.is-disabled):hover,
|
.pagingBtn.is-text:not(.is-disabled):focus,
|
.pagingBtn.is-text:not(.is-disabled):hover {
|
background: transparent;
|
}
|
.table_box {
|
margin-top: 17px;
|
border-radius: 4px;
|
border: 1px solid #d6e4ff;
|
.table_header {
|
height: 27px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
}
|
.table_th_x {
|
width: 50px;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
font-size: 14px;
|
|
color: #d6e4ff;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
box-sizing: border-box;
|
}
|
.table_th {
|
font-size: 14px;
|
color: #d6e4ff;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
overflow: hidden;
|
}
|
.table_tr {
|
height: 27px;
|
display: flex;
|
background: #000000;
|
}
|
.table_tr:nth-child(2n) {
|
background: #0e151f;
|
}
|
}
|
}
|
</style>
|
