sf
jiangping
2025-04-30 dcdb0231034810232f2542f3865666ebf72daf11
h5/components/search.vue
@@ -1,7 +1,7 @@
<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>
@@ -10,7 +10,7 @@
               <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>
@@ -21,7 +21,11 @@
         </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>
         
@@ -62,7 +66,8 @@
            name2: '',
            
            index: 0,
            focus: true
            focus: true,
            fontColorIndex: ''
         }
      },
      props: {
@@ -77,10 +82,17 @@
         status: {
            type: Number
         },
         search: {
            type: Object | null
         },
         categoryName: {
            type: Number | String
         },
         categoryid: {
            type: Number | String
         },
         fontColor:{
            type: Number | String
         }
      },
@@ -98,6 +110,16 @@
         }
      },
      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')
@@ -310,7 +332,7 @@
      align-items: center;
      justify-content: center;
      .search_box {
         width: 560px;
         width: 660px;
         height: auto;
         display: flex;
         flex-direction: column;
@@ -350,9 +372,9 @@
               //       color: #FFF200;
               //    }
               // }
               .active {
                 .active {
                  color: #FFF200 !important;
               }
               }
               .search_box_item_xl_item_name {
                  flex: 1;
                  height: 100%;
@@ -381,7 +403,7 @@
         }
         .search_box_item {
            width: 100%;
            height: 62px;
            height: 72px;
            background: rgba(5,35,102,0.7);
            border-radius: 32px;
            display: flex;