<template><viewclass="search-bar"><viewclass="search-container"><imageclass="search-icon"src="/static/xt-search/scan.png"mode="widthFix"></image><inputclass="search-input"placeholder="搜索美食/民宿/攻略等"placeholder-style="color:#999" /><viewclass="search-button" @click="doSearch">搜索</view></view></view></template><script>exportdefault {methods: {      doSearch() {console.log("执行第一个搜索")      }    }  }</script><stylescoped>.search-bar {background-color: #fff;border-radius: 20rpx;padding: 10rpx;  }.search-container {display: flex;align-items: center;height: 72rpx;padding: 06rpx 020rpx;border-radius: 40rpx;border: 3rpx solid transparent;background: linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, #B1A8E6, #9ED5F5, #88E7CB) border-box;  }.search-icon {width: 32rpx;height: 32rpx;margin-right: 16rpx;  }.search-input {flex: 1;height: 100%;font-size: 28rpx;color: #333;  }.search-button {padding: 036rpx;height: 56rpx;line-height: 56rpx;border-radius: 28rpx;font-size: 28rpx;color: #fff;background: linear-gradient(90deg, #63D1E8, #7BE8A3);  }</style>

<template><viewclass="header-search-bar"><viewclass="city-selector" @click="selectCity"><textclass="city-text">杭州</text><textclass="down-arrow">▼</text></view><viewclass="header-search-container"><imagesrc="/static/xt-search/searchIcon.png"class="header-search-icon"mode="widthFix"></image><inputclass="header-search-input"placeholder="雪天前端"placeholder-style="color:#999" /></view><viewclass="message-icon-wrapper" @click="openMessage"><imagesrc="/static/xt-search/messageIcon.png"class="message-icon"mode="widthFix"></image><viewclass="badge">12</view></view></view></template><script>exportdefault {methods: {      selectCity() {console.log("打开城市选择器")      },      openMessage() {console.log("打开消息列表")      }    }  }</script><stylescoped>.header-search-bar {display: flex;align-items: center;padding: 20rpx;background-color: #fef6f6;border-radius: 20rpx;  }.city-selector {display: flex;align-items: center;margin-right: 20rpx;  }.city-text {font-size: 32rpx;color: #333;font-weight: 500;  }.down-arrow {font-size: 24rpx;color: #666;margin-left: 8rpx;  }.header-search-container {flex: 1;display: flex;align-items: center;height: 72rpx;padding: 024rpx;border-radius: 36rpx;background-color: #fff;border: 2rpx solid #f0e0e0;  }.header-search-icon {width: 32rpx;height: 32rpx;margin-right: 16rpx;  }.header-search-input {flex: 1;height: 100%;font-size: 28rpx;color: #333;  }.message-icon-wrapper {position: relative;margin-left: 20rpx;  }.message-icon {width: 60rpx;height: 60rpx;  }.badge {position: absolute;top: -12rpx;right: -12rpx;min-width: 32rpx;height: 32rpx;line-height: 32rpx;padding: 08rpx;background-color: #ff4d4f;color: #fff;font-size: 20rpx;border-radius: 16rpx;text-align: center;  }</style>

<template><viewclass="third-search-bar"><viewclass="third-title">雪天前端</view><viewclass="third-search-container"><viewclass="third-search-inner"><imageclass="third-search-icon"src="/static/xt-search/scan.png"mode="widthFix"></image><inputclass="third-search-input"placeholder="搜索关键字"placeholder-style="color:#999" /></view><viewclass="third-search-btn" @click="thirdSearch">搜索</view></view></view></template><script>exportdefault {methods: {      thirdSearch() {console.log("执行第三个搜索")      }    }  }</script><stylescoped>.third-search-bar {display: flex;align-items: center;padding: 20rpx;background-color: #e8f9e8;border-radius: 20rpx;  }.third-title {font-size: 48rpx;font-weight: bold;color: #333;margin-right: 24rpx;  }.third-search-container {flex: 1;display: flex;align-items: center;height: 80rpx;border-radius: 40rpx;background-color: #fff;border: 3rpx solid #333;overflow: hidden;  }.third-search-inner {flex: 1;display: flex;align-items: center;padding: 024rpx;  }.third-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.third-search-input {flex: 1;height: 100%;font-size: 28rpx;color: #333;background: transparent;  }.third-search-btn {width: 140rpx;height: 100%;line-height: 80rpx;text-align: center;font-size: 32rpx;font-weight: bold;color: #333;background-color: #89e889;  }</style>

<template><viewclass="fourth-search-bar"><viewclass="fourth-search-container"><imageclass="fourth-search-icon"src="/static/xt-search/scan.png"mode="widthFix"></image><inputclass="fourth-search-input"placeholder="二手市场大降价"placeholder-style="color:#333" /><viewclass="fourth-hot-tag">热</view><viewclass="fourth-search-btn" @click="fourthSearch">搜索</view></view></view></template><script>exportdefault {methods: {      fourthSearch() {console.log("执行搜索")      }    }  }</script><stylescoped>.fourth-search-bar {padding: 20rpx 0;background-color: #fff;border-radius: 20rpx;  }.fourth-search-container {display: flex;align-items: center;height: 80rpx;padding: 06rpx 024rpx;border-radius: 40rpx;background: linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, #ffff7f, #fff478) border-box;border: 3rpx solid transparent;  }.fourth-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.fourth-search-input {flex: 1;height: 100%;font-size: 32rpx;color: #333;  }.fourth-hot-tag {padding: 4rpx 12rpx;margin: 016rpx;font-size: 24rpx;color: #ff6600;background-color: #fff5e6;border-radius: 8rpx;  }.fourth-search-btn {width: 140rpx;height: 64rpx;line-height: 64rpx;text-align: center;font-size: 32rpx;font-weight: bold;color: #333;background: linear-gradient(90deg, #fff2cc, #ffeb99);border-radius: 32rpx;  }</style>

<template><viewclass="fifth-search-bar"><viewclass="fifth-search-container"><imageclass="fifth-search-icon"src="/static/xt-search/scan.png"mode="widthFix"></image><inputclass="fifth-search-input"placeholder="iphone17 plus抢购"placeholder-style="color:#999" /><imageclass="fifth-camera-icon"src="/static/xt-search/camera.png"mode="widthFix"></image><viewclass="fifth-search-btn" @click="fifthSearch"><imagesrc="/static/xt-search/search-orange.png"mode="widthFix"></image></view></view></view></template><script>exportdefault {methods: {      fifthSearch() {console.log("执行第五个搜索")      }    }  }</script><stylescoped>.fifth-search-bar {padding: 20rpx;background-color: #fff;border-radius: 20rpx;  }.fifth-search-container {display: flex;align-items: center;height: 80rpx;padding: 06rpx 024rpx;border-radius: 40rpx;background-color: #fff;border: 3rpx solid #cc8866;  }.fifth-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.fifth-search-input {flex: 1;height: 100%;font-size: 32rpx;color: #999;  }.fifth-camera-icon {width: 60rpx;height: 60rpx;margin: 020rpx;  }.fifth-search-btn {width: 90rpx;height: 70rpx;display: flex;align-items: center;justify-content: center;background: linear-gradient(90deg, #ff7744, #ff5522);border-radius: 40rpx;  }.fifth-search-btnimage {width: 40rpx;height: 40rpx;  }</style>

<template><viewclass="sixth-search-bar"><viewclass="sixth-search-container"><imageclass="sixth-search-icon"src="/static/xt-search/scan.png"mode="widthFix"></image><inputclass="sixth-search-input"placeholder="搜索商品或店铺名"placeholder-style="color:#999" /></view><viewclass="sixth-login-btn" @click="sixthLogin"><imagesrc="/static/xt-search/user.png"mode="widthFix"></image><text>登录</text></view></view></template><script>exportdefault {methods: {      sixthLogin() {console.log("打开登录弹窗")      }    }  }</script><stylescoped>.sixth-search-bar {display: flex;align-items: center;padding: 20rpx;background-color: #fff;border-radius: 20rpx;  }.sixth-search-container {flex: 1;display: flex;align-items: center;height: 80rpx;padding: 024rpx;border-radius: 40rpx;background: linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, #e6f2ff, #f0f8ff) border-box;border: 3rpx solid transparent;  }.sixth-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.sixth-search-input {flex: 1;height: 100%;font-size: 32rpx;color: #333;  }.sixth-login-btn {display: flex;align-items: center;margin-left: 20rpx;font-size: 32rpx;color: #4488dd;  }.sixth-login-btnimage {width: 40rpx;height: 40rpx;margin-right: 8rpx;  }</style>

<template><viewclass="seventh-search-bar"><viewclass="seventh-left-icon" @click="seventhLeftClick"><imagesrc="/static/xt-search/menu.png"mode="widthFix"></image></view><viewclass="seventh-search-container"><imageclass="seventh-search-icon"src="/static/xt-search/searchIcon.png"mode="widthFix"></image><inputclass="seventh-search-input"placeholder="雪天前端"placeholder-style="color:#999" /><viewclass="seventh-mic-icon" @click="seventhMicClick"><imagesrc="/static/xt-search/mic.png"mode="widthFix"></image></view></view><viewclass="seventh-right-icon" @click="seventhRightClick"><imagesrc="/static/xt-search/message-filled.png"mode="widthFix"></image><viewclass="seventh-badge">7</view></view></view></template><script>exportdefault {methods: {      seventhLeftClick() {console.log("第七个左侧图标点击")      },      seventhMicClick() {console.log("第七个麦克风点击")      },      seventhRightClick() {console.log("第七个消息图标点击")      }    }  }</script><stylescoped>.seventh-search-bar {display: flex;align-items: center;padding: 20rpx;background-color: #009688;border-radius: 20rpx;  }.seventh-left-icon {width: 60rpx;height: 60rpx;margin-right: 20rpx;  }.seventh-left-iconimage {width: 100%;height: 100%;  }.seventh-search-container {flex: 1;display: flex;align-items: center;height: 80rpx;padding: 024rpx;border-radius: 40rpx;background-color: #fff;  }.seventh-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.seventh-search-input {flex: 1;height: 100%;font-size: 32rpx;color: #333;  }.seventh-mic-icon {width: 40rpx;height: 40rpx;margin-left: 20rpx;  }.seventh-mic-iconimage {width: 100%;height: 100%;  }.seventh-right-icon {position: relative;width: 60rpx;height: 60rpx;margin-left: 20rpx;  }.seventh-right-iconimage {width: 100%;height: 100%;  }.seventh-badge {position: absolute;top: -10rpx;right: -10rpx;width: 36rpx;height: 36rpx;line-height: 36rpx;text-align: center;background-color: #ff4d4f;color: #fff;font-size: 20rpx;border-radius: 50%;  }</style>

<template><viewclass="eighth-search-bar"><viewclass="eighth-brand"><imageclass="eighth-brand-icon"src="/static/xt-search/user.png"mode="widthFix"></image><textclass="eighth-brand-text">snow</text></view><viewclass="eighth-search-container"><imageclass="eighth-search-icon"src="/static/xt-search/searchIcon.png"mode="widthFix"></image><inputclass="eighth-search-input"placeholder="搜索雪天前端~"placeholder-style="color:#999" /></view><viewclass="eighth-menu-icon" @click="eighthMenuClick"><imagesrc="/static/xt-search/scan.png"mode="widthFix"></image></view></view></template><script>exportdefault {methods: {      eighthMenuClick() {console.log("第八个菜单图标点击")      }    }  }</script><stylescoped>.eighth-search-bar {display: flex;align-items: center;padding: 20rpx;background-color: #d4f4c4;border-radius: 20rpx;  }.eighth-brand {display: flex;align-items: center;margin-right: 20rpx;  }.eighth-brand-icon {width: 80rpx;height: 80rpx;margin-right: 12rpx;  }.eighth-brand-text {font-size: 40rpx;font-weight: bold;color: #222;  }.eighth-search-container {flex: 1;display: flex;align-items: center;height: 80rpx;padding: 024rpx;border-radius: 40rpx;background-color: rgba(255, 255, 255, 0.7);  }.eighth-search-icon {width: 36rpx;height: 36rpx;margin-right: 16rpx;  }.eighth-search-input {flex: 1;height: 100%;font-size: 32rpx;color: #333;background: transparent;  }.eighth-menu-icon {width: 60rpx;height: 60rpx;margin-left: 20rpx;  }.eighth-menu-iconimage {width: 100%;height: 100%;  }</style>