| | |
| | | </script> |
| | | |
| | | <template> |
| | | <public-content> |
| | | <template #content> |
| | | <div> |
| | | <!-- <public-content> |
| | | <template #content> --> |
| | | <div class="box-content"> |
| | | |
| | | <div> |
| | | <div class="search-container"> |
| | | <input type="text" v-model="searchQuery" placeholder="请输入企业名称" class="search-input" |
| | | @keyup.enter="handleSearch" /> |
| | | <button class="search-button" @click="handleSearch">搜索</button> |
| | | </div> |
| | | </div> |
| | | |
| | | <div> |
| | | <div v-for="item in 5"> |
| | | <div class="data-content-item"> |
| | | <div> 测试企业111111</div> |
| | | <el-button size="small" type="primary">进入企业</el-button> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | </div> |
| | | </div> |
| | | <!-- </template> |
| | | </public-content> --> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .box-content { |
| | | color: #fff; |
| | | } |
| | | |
| | | .search-container { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin: 10px 0px; |
| | | } |
| | | |
| | | .search-input { |
| | | width: 79%; |
| | | /* 可以根据需要调整宽度 */ |
| | | padding: 10px; |
| | | border: 1px solid #ccc; |
| | | border-radius: 4px 0 0 4px; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-button { |
| | | padding: 10px 20px; |
| | | border: 1px solid #ccc; |
| | | border-radius: 0 4px 4px 0; |
| | | background-color: #007bff; |
| | | color: white; |
| | | cursor: pointer; |
| | | transition: background-color 0.3s; |
| | | } |
| | | |
| | | .search-button:hover { |
| | | background-color: #0056b3; |
| | | } |
| | | |
| | | .data-content-item { |
| | | display: flex; |
| | | margin: 2px 2px; |
| | | padding: 5px 0; |
| | | background-color: #747bff; |
| | | justify-content: space-between; |
| | | // 超过高度自动显示滚动条 |
| | | overflow-y: auto; |
| | | } |
| | | </style> |