<template>
|
<div>
|
<!-- 搜索框 -->
|
<div class="search">
|
<div class="search_content">
|
<div class="left_search">
|
<div class="search_img">
|
<img src="../../assets/img/searchs.png" alt />
|
</div>
|
<div class="search_input">
|
<input
|
type="text"
|
class="searchs"
|
:placeholder="$t('hj37')"
|
ref="search"
|
id="sousuo"
|
v-model="gpcode"
|
@input="gpinput"
|
/>
|
</div>
|
</div>
|
<div class="right_search" @click="sousuo">{{ $t("Search") }}</div>
|
</div>
|
</div>
|
<tabsList ref="tabsList" />
|
</div>
|
</template>
|
|
<script>
|
import tabsList from "./tradingList/tabs";
|
export default {
|
name: "TradingList",
|
components: { tabsList },
|
data() {
|
return {
|
gpcode: "",
|
};
|
},
|
methods: {
|
sousuo() {
|
this.$refs.tabsList.sousuo = this.gpcode;
|
},
|
gpinput(e) {
|
this.gpcode = e.target.value;
|
this.$refs.tabsList.sousuo = e.target.value;
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.search {
|
height: 1rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 15px 22px;
|
position: relative;
|
z-index: 99;
|
|
.search_content {
|
width: 100%;
|
height: 90%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.left_search {
|
width: 100%;
|
height: 100%;
|
background: #fff;
|
border-radius: 0.5rem;
|
display: flex;
|
.search_img {
|
width: 1rem;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
img {
|
width: 0.5rem;
|
height: 0.5rem;
|
}
|
}
|
|
.search_input {
|
width: 100%;
|
overflow: hidden;
|
height: 100%;
|
display: flex;
|
}
|
}
|
|
.right_search {
|
width: 140px;
|
line-height: 0.9rem;
|
text-align: center;
|
height: 100%;
|
border-radius: 0.5rem;
|
background-color: #0066ed;
|
color: #ffffff;
|
font-weight: bold;
|
margin-left: 20px;
|
}
|
}
|
</style>
|
