{{ product.name }}
@@ -67,6 +83,8 @@ export default {
return {
cloudData: {},
activeSupplierIndex: 0, // 默认选中第一个供应商
+ searchValue: '', // 搜索关键词
+ isSearching: false, // 是否正在搜索
// 咨询弹窗相关
showConsultDialog: false,
@@ -98,6 +116,27 @@ export default {
}
},
methods: {
+ // 处理搜索
+ handleSearch() {
+ this.isSearching = !!this.searchValue.trim()
+ console.log('搜索关键词:', this.searchValue)
+ },
+
+ // 判断产品是否应该显示
+ shouldShowProduct(product) {
+ if (!this.isSearching) {
+ return true
+ }
+ // 模糊搜索
+ const keyword = this.searchValue.toLowerCase().trim()
+ return (
+ (product.name && product.name.toLowerCase().includes(keyword)) ||
+ (product.description && product.description.toLowerCase().includes(keyword)) ||
+ (product.label && product.label.toLowerCase().includes(keyword)) ||
+ (product.ssecTitle && product.ssecTitle.toLowerCase().includes(keyword))
+ )
+ },
+
// 判断是否显示供应商标签
showProductDesc(product) {
// 如果是百度云且有label字段
diff --git a/f/web-kboss/src/views/H5/less/all/index.css b/f/web-kboss/src/views/H5/less/all/index.css
index d6d7b2e..ea94141 100644
--- a/f/web-kboss/src/views/H5/less/all/index.css
+++ b/f/web-kboss/src/views/H5/less/all/index.css
@@ -111,8 +111,42 @@
.search {
width: 100%;
margin: 0.2rem 0;
+ padding: 0.2rem;
+}
+.search .search-box {
display: flex;
+ justify-content: space-between;
+ background-color: #f3f3f3;
+ border-radius: 0.24rem;
}
.search .search-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
font-size: 0.2rem;
+ width: 18%;
+ color: #fff;
+ padding: 0.2rem 0;
+ background: linear-gradient(90deg, #1f70ff, #3a8cff);
+ border-bottom-right-radius: 0.24rem;
+ border-top-right-radius: 0.24rem;
+ font-size: 0.24rem;
+}
+.search .input {
+ width: 80%;
+ padding: 0.2rem 0;
+ padding-left: 0.2rem;
+}
+.search .input input {
+ border: none;
+ /* 去除边框 */
+ outline: none;
+ /* 去除焦点时的外框 */
+ background: none;
+ /* 去除背景色 */
+ padding: 0;
+ /* 去除内边距 */
+ margin: 0;
+ /* 去除外边距，根据需要设置 */
+ width: 100%;
}
diff --git a/f/web-kboss/src/views/H5/less/all/index.less b/f/web-kboss/src/views/H5/less/all/index.less
index eb41e3c..97c993a 100644
--- a/f/web-kboss/src/views/H5/less/all/index.less
+++ b/f/web-kboss/src/views/H5/less/all/index.less
@@ -5,20 +5,24 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
- font-size: .39rem; /* 增大30%: .3rem * 1.3 = .39rem */
+ font-size: .39rem;
+ /* 增大30%: .3rem * 1.3 = .39rem */
font-weight: bold;
margin: .3rem 0;
}
.supplier-container {
display: flex;
- flex-wrap: wrap; /* 允许换行 */
+ flex-wrap: wrap;
+ /* 允许换行 */
padding: .2rem .22rem;
- gap: .15rem; /* 使用gap控制间距 */
+ gap: .15rem;
+ /* 使用gap控制间距 */
}
.supplier {
- flex-shrink: 0; /* 防止收缩 */
+ flex-shrink: 0;
+ /* 防止收缩 */
.supplier-title {
font-size: .28rem;
@@ -29,7 +33,8 @@
cursor: pointer;
transition: all 0.3s ease;
- white-space: nowrap; /* 防止文字换行 */
+ white-space: nowrap;
+ /* 防止文字换行 */
&:hover {
background-color: #e0e0e0;
@@ -52,6 +57,7 @@
flex-wrap: wrap;
justify-content: space-between;
padding: 0 .3rem;
+
.box-item {
display: flex;
width: 48%;
@@ -69,19 +75,21 @@
border-color: #1f70ff;
}
- .item-tit{
+ .item-tit {
font-size: .26rem;
color: #000;
font-weight: bold;
margin-bottom: .1rem;
}
- .item-detail{
+
+ .item-detail {
color: #666;
font-size: .22rem;
margin: .15rem 0;
line-height: 1.4;
}
- .item-desc{
+
+ .item-desc {
color: #666;
background-color: #f8f9fa;
font-size: .2rem;
@@ -90,11 +98,13 @@
margin-bottom: .15rem;
border: .01rem solid #e9ecef;
}
- .item-btn{
+
+ .item-btn {
width: 100%;
display: flex;
justify-content: flex-end;
- .btn{
+
+ .btn {
background: linear-gradient(90deg, #1f70ff, #3a8cff);
color: #fff;
padding: .08rem .2rem;
@@ -113,11 +123,49 @@
}
}
}
-.search{
+
+.search {
width: 100%;
margin: .2rem 0;
- display: flex;
- .search-btn{
+ padding: .2rem;
+
+ .search-box {
+ display: flex;
+ justify-content: space-between;
+ background-color: #f3f3f3;
+ border-radius: .24rem;
+ }
+
+ .search-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
font-size: .2rem;
+ width: 18%;
+ color: #fff;
+ padding: .2rem 0;
+ background: linear-gradient(90deg, #1f70ff, #3a8cff);
+ border-bottom-right-radius: .24rem;
+ border-top-right-radius: .24rem;
+ font-size: .24rem;
+ }
+
+ .input {
+ width: 80%;
+ padding: .2rem 0;
+ padding-left: .2rem;
+ input {
+ border: none;
+ /* 去除边框 */
+ outline: none;
+ /* 去除焦点时的外框 */
+ background: none;
+ /* 去除背景色 */
+ padding: 0;
+ /* 去除内边距 */
+ margin: 0;
+ /* 去除外边距，根据需要设置 */
+ width: 100%;
+ }
}
}
diff --git a/f/web-kboss/src/views/H5/less/cloud/cloud.css b/f/web-kboss/src/views/H5/less/cloud/cloud.css
index 1c7b3ac..cb2c877 100644
--- a/f/web-kboss/src/views/H5/less/cloud/cloud.css
+++ b/f/web-kboss/src/views/H5/less/cloud/cloud.css
@@ -117,3 +117,45 @@
transform: translateY(-0.02rem);
box-shadow: 0 0.04rem 0.1rem rgba(31, 112, 255, 0.3);
}
+.search {
+ width: 100%;
+ margin: 0.2rem 0;
+ padding: 0.2rem;
+}
+.search .search-box {
+ display: flex;
+ justify-content: space-between;
+ background-color: #f3f3f3;
+ border-radius: 0.24rem;
+}
+.search .search-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.2rem;
+ width: 18%;
+ color: #fff;
+ padding: 0.2rem 0;
+ background: linear-gradient(90deg, #1f70ff, #3a8cff);
+ border-bottom-right-radius: 0.24rem;
+ border-top-right-radius: 0.24rem;
+ font-size: 0.24rem;
+}
+.search .input {
+ width: 80%;
+ padding: 0.2rem 0;
+ padding-left: 0.2rem;
+}
+.search .input input {
+ border: none;
+ /* 去除边框 */
+ outline: none;
+ /* 去除焦点时的外框 */
+ background: none;
+ /* 去除背景色 */
+ padding: 0;
+ /* 去除内边距 */
+ margin: 0;
+ /* 去除外边距，根据需要设置 */
+ width: 100%;
+}
diff --git a/f/web-kboss/src/views/H5/less/cloud/cloud.less b/f/web-kboss/src/views/H5/less/cloud/cloud.less
index 9e8a370..36c97be 100644
--- a/f/web-kboss/src/views/H5/less/cloud/cloud.less
+++ b/f/web-kboss/src/views/H5/less/cloud/cloud.less
@@ -134,3 +134,48 @@
}
}
}
+.search {
+ width: 100%;
+ margin: .2rem 0;
+ padding: .2rem;
+
+ .search-box {
+ display: flex;
+ justify-content: space-between;
+ background-color: #f3f3f3;
+ border-radius: .24rem;
+ }
+
+ .search-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: .2rem;
+ width: 18%;
+ color: #fff;
+ padding: .2rem 0;
+ background: linear-gradient(90deg, #1f70ff, #3a8cff);
+ border-bottom-right-radius: .24rem;
+ border-top-right-radius: .24rem;
+ font-size: .24rem;
+ }
+
+ .input {
+ width: 80%;
+ padding: .2rem 0;
+ padding-left: .2rem;
+ input {
+ border: none;
+ /* 去除边框 */
+ outline: none;
+ /* 去除焦点时的外框 */
+ background: none;
+ /* 去除背景色 */
+ padding: 0;
+ /* 去除内边距 */
+ margin: 0;
+ /* 去除外边距，根据需要设置 */
+ width: 100%;
+ }
+ }
+}
diff --git a/f/web-kboss/src/views/H5/net/index.vue b/f/web-kboss/src/views/H5/net/index.vue
index c8b5bcc..87357bc 100644
--- a/f/web-kboss/src/views/H5/net/index.vue
+++ b/f/web-kboss/src/views/H5/net/index.vue
@@ -4,7 +4,22 @@
开元云
-
+
+
@@ -76,13 +92,14 @@ import { reqProductConsult } from '@/api/H5/index'
export default {
components: {
ProductConsultDialog,
-
},
data() {
return {
cloudData: {},
activeSupplierIndex: 0, // 默认选中第一个供应商
+ searchValue: '', // 搜索关键词
+ isSearching: false, // 是否正在搜索
// 咨询弹窗相关
showConsultDialog: false,
@@ -116,6 +133,25 @@ export default {
}
},
+ // 处理搜索
+ handleSearch() {
+ this.isSearching = !!this.searchValue.trim()
+ console.log('搜索关键词:', this.searchValue)
+ },
+
+ // 判断产品是否应该显示
+ shouldShowProduct(product) {
+ if (!this.isSearching) {
+ return true
+ }
+ // 模糊搜索
+ const keyword = this.searchValue.toLowerCase().trim()
+ return (
+ (product.name && product.name.toLowerCase().includes(keyword)) ||
+ (product.description && product.description.toLowerCase().includes(keyword))
+ )
+ },
+
// 选择供应商
selectSupplier(index) {
this.activeSupplierIndex = index
diff --git a/f/web-kboss/src/views/H5/use/index.vue b/f/web-kboss/src/views/H5/use/index.vue
index f34b462..9c487b2 100644
--- a/f/web-kboss/src/views/H5/use/index.vue
+++ b/f/web-kboss/src/views/H5/use/index.vue
@@ -6,12 +6,19 @@
+
@@ -28,7 +35,7 @@
-
+
{{ product.name }}
@@ -73,6 +80,8 @@ export default {
return {
cloudData: {},
activeSupplierIndex: 0, // 默认选中第一个供应商
+ searchValue: '', // 搜索关键词
+ isSearching: false, // 是否正在搜索
// 咨询弹窗相关
showConsultDialog: false,
@@ -106,6 +115,25 @@ export default {
}
},
+ // 处理搜索
+ handleSearch() {
+ this.isSearching = !!this.searchValue.trim()
+ console.log('搜索关键词:', this.searchValue)
+ },
+
+ // 判断产品是否应该显示
+ shouldShowProduct(product) {
+ if (!this.isSearching) {
+ return true
+ }
+ // 模糊搜索：检查产品名称或分类名称中是否包含搜索关键词
+ const keyword = this.searchValue.toLowerCase().trim()
+ return (
+ (product.name && product.name.toLowerCase().includes(keyword)) ||
+ (this.currentCategory && this.currentCategory.thrTitle && this.currentCategory.thrTitle.toLowerCase().includes(keyword))
+ )
+ },
+
// 选择供应商
selectSupplier(index) {
this.activeSupplierIndex = index