diff --git a/pages/search/index.vue b/pages/search/index.vue
index 1658bb4..274136b 100644
--- a/pages/search/index.vue
+++ b/pages/search/index.vue
@@ -10,18 +10,54 @@
搜索发现
-
+
+
换一批
-
+
{{item.name}}
+
+
+
+
+
+
+
+ 热门数码产品汇总
+
+
+
+ {{k+1}}
+
+
+ {{k+1}}
+
+
+ {{k+1}}
+
+
+ {{k+1}}
+
+
+
+
+ 荣耀PlAY 7T
+
+
+ 今日开售
+
+
+
+
+
+
@@ -29,20 +65,19 @@
export default {
data() {
return {
+ showEye:true,
searchValue: '',
- searchData:[
- {
- name:'小米手机'
- },{
- name:'华为'
- },{
- name:'vivo'
- },{
- name:'NOVA12'
- },{
- name:'空调'
- }
- ]
+ searchData: [{
+ name: '小米手机'
+ }, {
+ name: '华为'
+ }, {
+ name: 'vivo'
+ }, {
+ name: 'NOVA12'
+ }, {
+ name: '空调'
+ }]
}
},
@@ -101,12 +136,14 @@
color: #FFFFFF;
}
}
- .find{
+
+ .find {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 44rpx;
- .findTitle{
+
+ .findTitle {
width: 200rpx;
height: 44rpx;
font-size: 32rpx;
@@ -115,7 +152,8 @@
color: #000000;
line-height: 44rpx;
margin-left: 40rpx;
- .findIcon{
+
+ .findIcon {
width: 36rpx;
height: 27rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
@@ -123,7 +161,8 @@
margin-left: 22rpx;
}
}
- .others{
+
+ .others {
width: 72rpx;
height: 34rpx;
font-size: 24rpx;
@@ -133,12 +172,14 @@
line-height: 34rpx;
}
}
- .hotSearch{
+
+ .hotSearch {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 20rpx;
- .hotItem{
+
+ .hotItem {
height: 64rpx;
background: #FFFFFF;
border-radius: 68rpx 68rpx 68rpx 68rpx;
@@ -152,11 +193,114 @@
margin-right: 12rpx;
margin-bottom: 24rpx;
padding-left: 30rpx;
- .hotImg{
+
+ .hotImg {
width: 25rpx;
height: 29rpx;
opacity: 1;
}
}
}
+ .hotSuggest{
+ width: 100%;
+ margin-left: 32rpx;
+ .hotList{
+ width:100%;
+ white-space: nowrap;
+ .hotItem{
+ margin-right: 26rpx;
+ display: inline-block;
+ width: 484rpx;
+ height: 612rpx;
+ overflow-y: auto;
+ background-image: url('../../static/search/hotBack.png');
+ background-size: 100% 100%;
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
+ opacity: 1;
+ border: 2rpx solid #FFFFFF;
+ .itemHeade{
+ display: flex;
+ align-items: center;
+ .headeIcon{
+ margin: 18rpx 0 0 22rpx;
+ width: 48rpx;
+ height: 60rpx;
+ opacity: 1;
+ image{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .headTitle{
+ width: 224rpx;
+ height: 40rpx;
+ font-size: 28rpx;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 600;
+ color: #F3202A;
+ line-height: 40rpx;
+ margin-left: 14rpx;
+ }
+ }
+ .itemMain{
+ display: flex;
+ align-items: center;
+ margin: 22rpx 0 0 26rpx;
+ .numCommon{
+ width: 34rpx;
+ height: 28rpx;
+ background-size: 100% 100%;
+ text-align: center;
+ font-size: 20rpx;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 600;
+ color: #FFFFFF;
+ line-height: 28rpx;
+ }
+ .num1{
+ background-image: url('/static/search/first.png');
+ }
+ .num2{
+ background-image: url('/static/search/second.png');
+ }
+ .num3{
+ background-image: url('/static/search/third.png');
+ }
+ .num4{
+ background-image: url('/static/search/common.png');
+ }
+ .goodsImg{
+ width: 100rpx;
+ height: 90rpx;
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
+ opacity: 1;
+ margin-left: 10rpx;
+ }
+ .goodsInfo{
+ margin-left: 18rpx;
+ .goodName{
+ width: 138rpx;
+ height: 34rpx;
+ font-size: 24rpx;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ line-height: 34rpx;
+ text-align: center;
+ }
+ .goodsSale{
+ width: 96rpx;
+ height: 34rpx;
+ font-size: 24rpx;
+ font-family: PingFang SC, PingFang SC;
+ font-weight: 400;
+ color: #9B9B9B;
+ line-height: 34rpx;
+ margin-top: 6rpx;
+ }
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/static/search/closeEye.png b/static/search/closeEye.png
new file mode 100644
index 0000000..e7edd72
Binary files /dev/null and b/static/search/closeEye.png differ
diff --git a/static/search/common.png b/static/search/common.png
new file mode 100644
index 0000000..e92397b
Binary files /dev/null and b/static/search/common.png differ
diff --git a/static/search/first.png b/static/search/first.png
new file mode 100644
index 0000000..7501f79
Binary files /dev/null and b/static/search/first.png differ
diff --git a/static/search/hotBack.png b/static/search/hotBack.png
new file mode 100644
index 0000000..d018ad9
Binary files /dev/null and b/static/search/hotBack.png differ
diff --git a/static/search/hotImg.png b/static/search/hotImg.png
new file mode 100644
index 0000000..0f33cf8
Binary files /dev/null and b/static/search/hotImg.png differ
diff --git a/static/search/openEye.png b/static/search/openEye.png
new file mode 100644
index 0000000..ff46551
Binary files /dev/null and b/static/search/openEye.png differ
diff --git a/static/search/second.png b/static/search/second.png
new file mode 100644
index 0000000..e7ca638
Binary files /dev/null and b/static/search/second.png differ
diff --git a/static/search/third.png b/static/search/third.png
new file mode 100644
index 0000000..bd744d3
Binary files /dev/null and b/static/search/third.png differ