From ba3a85f2bf6dc706ba2f74e88e9d81197533f1b7 Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期四, 24 十月 2024 18:30:12 +0800 Subject: [PATCH] 优化 --- h5/components/search.vue | 15 +++++++++++---- 1 files changed, 11 insertions(+), 4 deletions(-) diff --git a/h5/components/search.vue b/h5/components/search.vue index 53ba890..59e2820 100644 --- a/h5/components/search.vue +++ b/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> @@ -77,6 +77,9 @@ status: { type: Number }, + search: { + type: Object | null + }, categoryName: { type: Number | String }, @@ -98,6 +101,10 @@ } }, methods: { + 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 +317,7 @@ align-items: center; justify-content: center; .search_box { - width: 560px; + width: 660px; height: auto; display: flex; flex-direction: column; @@ -381,7 +388,7 @@ } .search_box_item { width: 100%; - height: 62px; + height: 72px; background: rgba(5,35,102,0.7); border-radius: 32px; display: flex; -- Gitblit v1.9.3