161 lines
3.8 KiB
Vue
161 lines
3.8 KiB
Vue
<template>
|
|
<div
|
|
style="display: flex;align-items: center;justify-content: center;border:1px solid red;width: 100%;max-width: 1400px;">
|
|
|
|
<img style="width: 180px;height: 60px;padding-right: 20px;" src="https://www.kaiyuancloud.cn/idfile?path=logo_ncmatch.png" alt="">
|
|
<div
|
|
style="min-width:800px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: space-between;">
|
|
|
|
<!-- 中间搜索区域 -->
|
|
<div class="search-section" style="position: relative;margin: 0 20px;">
|
|
<div class="search-bar">
|
|
<input v-model="searchKeyword" type="text" class="search-input" placeholder="搜你想搜...">
|
|
|
|
<button class="search-btn" @click="handleSearch">搜索</button>
|
|
</div>
|
|
|
|
|
|
<!-- 热搜关键词 -->
|
|
<div class="hot-search">
|
|
<a v-for="keyword in hotSearchKeywords" :key="keyword" href="#" class="hot-keyword">
|
|
{{ keyword }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- position: absolute;right: -150px;top: 0px; -->
|
|
<span
|
|
style="height: 44px;line-height: 44px;border-radius: 8px;border:1px solid #275AFF; color: #275AFF;font-size: 18px;font-weight: 500;padding: 0 20px;z-index: 10;display: flex;align-items: center;gap: 10px;">
|
|
<img style="width: 24px;height: 24px;" src="../mainPage/img/robot.svg" alt="">
|
|
NC AI</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'search',
|
|
data() {
|
|
return {
|
|
hotSearchKeywords: [
|
|
'昆仑芯-P800',
|
|
'天垓-150',
|
|
'4090',
|
|
'云服务器-GPU',
|
|
'人脸识别',
|
|
'SDWAN',
|
|
'互联网专线',
|
|
'DCI',
|
|
'AI专线',
|
|
'对象存储',
|
|
'智慧医疗',
|
|
'智慧客服',
|
|
'A800',
|
|
'A100',
|
|
'910B'
|
|
],
|
|
hotMenuList: [
|
|
{
|
|
id: "hot",
|
|
name: "热门推荐",
|
|
icon: require("../../newImg/niu.png"),
|
|
activeIcon: require("../../newImg/niuActive.png")
|
|
},
|
|
{
|
|
id: "hlzx",
|
|
name: "互联网专线",
|
|
icon: require("../../newImg/niu.png"),
|
|
activeIcon: require("../../newImg/niuActive.png"),
|
|
},
|
|
{
|
|
id: "SDWAN",
|
|
name: "SDWAN",
|
|
icon: require("../../newImg/niu.png"),
|
|
activeIcon: require("../../newImg/niuActive.png"),
|
|
},
|
|
{
|
|
id: "DCI",
|
|
name: "DCI",
|
|
icon: require("../../newImg/niu.png"),
|
|
activeIcon: require("../../newImg/niuActive.png"),
|
|
},
|
|
{
|
|
id: "AI",
|
|
name: "AI专线",
|
|
icon: require("../../newImg/niu.png"),
|
|
activeIcon: require("../../newImg/niuActive.png"),
|
|
}
|
|
],
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.search-section {
|
|
border: 1px solid red;
|
|
flex: 1;
|
|
min-width: 850px;
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
background: white;
|
|
border: 2px solid #3f68d8;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 12px 15px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.camera-icon {
|
|
padding: 0 10px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-btn {
|
|
background: #0864dd;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
background: #173ad4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hot-search {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
|
|
.hot-keyword {
|
|
&:nth-child(-n+3) {
|
|
color: #e1251b;
|
|
}
|
|
|
|
color: #666;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
|
|
&:hover {
|
|
color: #e1251b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.search-section {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |