| | |
| | | <template> |
| | | <view class="search" v-if="show" @click="close"> |
| | | <view class="search_box" @click.stop="test"> |
| | | <view class="search_box_item" v-if="status === 0"> |
| | | <view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-if="status === 0"> |
| | | <view class="icon"> |
| | | <image src="@/static/ic_search@2x.png" mode="widthFix"></image> |
| | | </view> |
| | |
| | | <input type="text" class="search_box_item_right_ipt" :focus="focus" v-model="category" @input="inputCategory(name1 ? 2 : 1)" placeholder-class="placeholder" placeholder="搜索" /> |
| | | </view> |
| | | </view> |
| | | <view class="search_box_item" v-else> |
| | | <view class="search_box_item" :style="{background: !search ? 'rgba(13, 30, 65, 0.70)' : search.bgType === 1 ? percentage(search.bgColor, search.bgAlpha) : 'rgba(13, 30, 65, 0.70)'}" v-else> |
| | | <view class="icon"> |
| | | <image src="@/static/ic_search@2x.png" mode="widthFix"></image> |
| | | </view> |
| | |
| | | </view> |
| | | <view class="search_box_item_xl" v-if="searchData && searchData.length > 0"> |
| | | <view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i"> |
| | | <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)">{{ item.name }}</view><span v-if="item.price">¥{{ item.price }}</span> |
| | | <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb"> |
| | | |
| | | <span :style="{color: fontColorIndex === i ? fontColor : ''}">{{item.name}}</span> |
| | | </view> |
| | | <span v-if="item.price">¥{{ item.price }}</span> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | name2: '', |
| | | |
| | | index: 0, |
| | | focus: true |
| | | focus: true, |
| | | fontColorIndex: '' |
| | | } |
| | | }, |
| | | props: { |
| | |
| | | status: { |
| | | type: Number |
| | | }, |
| | | search: { |
| | | type: Object | null |
| | | }, |
| | | categoryName: { |
| | | type: Number | String |
| | | }, |
| | | categoryid: { |
| | | type: Number | String |
| | | }, |
| | | |
| | | fontColor:{ |
| | | type: Number | String |
| | | } |
| | | }, |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | aaa(index) { |
| | | this.fontColorIndex = index |
| | | }, |
| | | bbb() { |
| | | this.fontColorIndex = '' |
| | | }, |
| | | percentage(bgColor, alpha) { |
| | | let res = +(alpha * 2.55).toFixed(0) |
| | | return bgColor + res.toString(16) |
| | | }, |
| | | confirm() { |
| | | if (this.type === 2) { |
| | | console.log('type') |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | .search_box { |
| | | width: 560px; |
| | | width: 660px; |
| | | height: auto; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | // color: #FFF200; |
| | | // } |
| | | // } |
| | | .active { |
| | | .active { |
| | | color: #FFF200 !important; |
| | | } |
| | | } |
| | | .search_box_item_xl_item_name { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | } |
| | | .search_box_item { |
| | | width: 100%; |
| | | height: 62px; |
| | | height: 72px; |
| | | background: rgba(5,35,102,0.7); |
| | | border-radius: 32px; |
| | | display: flex; |