提交 a7445bfb authored 作者: coderBryanFu's avatar coderBryanFu

feat:新增组件SearchBox

上级 2e069ef9
<template>
<div class="search-wrapper">
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="inputValue" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt />
搜索
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
searchText: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
})
const emit = defineEmits(['search', 'update:searchText'])
const inputValue = computed({
get: () => props.searchText,
set: (value) => emit('update:searchText', value)
})
const handleSearch = () => {
emit('search')
}
</script>
<style lang="scss" scoped>
.search-wrapper {
width: 960px;
height: 48px;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 838px;
height: 48px;
background-color: transparent;
font-size: 14px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 46px;
margin-right: -3px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: #fff;
img {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
}
}
</style>
\ No newline at end of file
......@@ -35,7 +35,7 @@
<script setup>
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
......
......@@ -23,7 +23,7 @@
// 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API
......
......@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElRadioGroup, ElRadioButton, ElSpace } from 'element-plus';
import * as echarts from 'echarts';
import { getSanctionList } from '@/api/companyPages';
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue'
export interface LineDataItem {
......
......@@ -133,7 +133,7 @@ import {
getSingleSanctionEntityEquity
} from "@/api/exportControlV2.0";
import RelationGraph from "./components/RelationGraph.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue";
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue";
const sanRecordId = ref("");
const activeTab = ref(["实体穿透分析"]);
......
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
<rect id="大学,学府,法院" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="矢量 573" d="M21.9922 6.66992L21.9922 8.00391L21.5996 8.00391C21.1699 8.00391 20.7598 8.17383 20.4473 8.4707L20.4434 8.47461C20.3008 8.60742 20.1328 8.67188 19.9375 8.67188L4.05078 8.67188C3.85352 8.67188 3.6875 8.60742 3.54688 8.47461C3.54492 8.47266 3.54297 8.47266 3.54102 8.4707C3.22852 8.17578 2.81836 8.00586 2.38867 8.00586L2 8.00586L2 6.66992L11.9961 2.67188L21.9922 6.66992ZM21.2715 19.3301L2.71875 19.3301C2.52344 19.3301 2.35547 19.3945 2.21484 19.5273C2.07031 19.6602 2 19.8164 2 19.998L2 21.332L21.9922 21.332L21.9922 19.998C21.9922 19.8164 21.9199 19.6602 21.7773 19.5273C21.6348 19.3945 21.4688 19.3301 21.2715 19.3301L21.2715 19.3301ZM20.6621 17.998L20.6621 18.6621L3.33398 18.6621L3.33398 17.998C3.33398 17.8184 3.4043 17.6602 3.54883 17.5273C3.69141 17.3945 3.85938 17.3301 4.05273 17.3301L4.66797 17.3301L4.66602 9.33399L7.33203 9.33399L7.33203 17.3301L8.66602 17.3301L8.66602 9.33398L11.3301 9.33398L11.3301 17.3301L12.6699 17.3301L12.6699 9.33398L15.334 9.33398L15.334 17.3301L16.6641 17.3301L16.6641 9.33398L19.3281 9.33398L19.3281 17.3301L19.9434 17.3301C20.1406 17.3301 20.3047 17.3945 20.4473 17.5273C20.5898 17.6602 20.6621 17.8184 20.6621 17.998L20.6621 17.998Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<rect id="容器 1929" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7ZM3 9.73244C2.4022 9.38663 2 8.74028 2 8C2 7.25972 2.4022 6.61337 3 6.26756L3 5C3 4.44772 3.44772 4 4 4C4.55228 4 5 4.44772 5 5L5 6.26756C5.5978 6.61337 6 7.25972 6 8C6 8.74028 5.5978 9.38663 5 9.73244L5 14.2676C5.5978 14.6134 6 15.2597 6 16C6 16.7403 5.5978 17.3866 5 17.7324L5 19C5 19.5523 4.55228 20 4 20C3.44772 20 3 19.5523 3 19L3 17.7324C2.4022 17.3866 2 16.7403 2 16C2 15.2597 2.4022 14.6134 3 14.2676L3 9.73244ZM4 17C4.55228 17 5 16.5523 5 16C5 15.4477 4.55228 15 4 15C3.44772 15 3 15.4477 3 16C3 16.5523 3.44772 17 4 17ZM22 6C22 5.44772 21.5523 5 21 5L9 5C8.44772 5 8 5.44772 8 6L8 10C8 10.5523 8.44772 11 9 11L21 11C21.5523 11 22 10.5523 22 10L22 6ZM22 14C22 13.4477 21.5523 13 21 13L9 13C8.44772 13 8 13.4477 8 14L8 18C8 18.5523 8.44772 19 9 19L21 19C21.5523 19 22 18.5523 22 18L22 14Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
......@@ -483,6 +483,8 @@ const handleClickToDetail = () => {
};
const handleClickCardToDetail = (id, name) => {
// console.log('id',id);
window.sessionStorage.setItem("curTabName", name);
const route = router.resolve({
path: "/marketAccessLayout",
......@@ -2379,6 +2381,7 @@ onMounted(async () => {
.box8 {
width: 521px;
height: 460px;
.box-header-right {
height: 48px;
display: flex;
......@@ -2461,6 +2464,7 @@ onMounted(async () => {
margin: 0 auto;
margin-top: 34px;
display: flex;
gap: 16px;
.left {
width: 360px;
......@@ -2536,9 +2540,7 @@ onMounted(async () => {
}
.right {
margin-left: 16px;
width: 1224px;
// min-height: 700px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
......@@ -2547,12 +2549,12 @@ onMounted(async () => {
.right-header {
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 22px;
height: 18px;
width: 24px;
height: 24px;
margin-top: 13px;
margin-left: 19px;
img {
......@@ -2563,6 +2565,7 @@ onMounted(async () => {
.title {
height: 26px;
margin-top: 11px;
margin-left: 19px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
......@@ -2576,24 +2579,17 @@ onMounted(async () => {
}
.right-main {
padding-top: 18px;
// min-height: 586px;
box-sizing: border-box;
padding: 18px 27px 0 24px;
height: calc(100% - 108px);
// max-height: 1540px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
// height: 780px;
.right-main-item {
height: 154px;
// min-height: 94px;
display: flex;
cursor: pointer;
height: max-content;
// &:hover {
// background: var(--color-bg-hover) !important;
// }
.item-left {
width: 100px;
height: 48px;
......@@ -2615,7 +2611,6 @@ onMounted(async () => {
.item-center {
width: 30px;
// height: 154px;
.icon {
width: 30px;
height: 30px;
......@@ -2641,6 +2636,13 @@ onMounted(async () => {
.item-right {
padding-left: 20px;
&:hover {
.item-right-header>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.item-right-header {
height: 26px;
display: flex;
......@@ -2694,11 +2696,6 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: var(--color-main-active);
text-decoration: underline;
}
}
.status {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论