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