caimei-applets-caimei/components/cm-module/listTemplate/ZuheList.vue

<template>
	<view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
		<view class="good-search clearfix" v-if="searchStatus">
			<view id="shop">
				<view class="style addstyle ">单一商品</view>
				<view class="style zuhe">组合商品</view>
			</view>
			<view class="search-from name">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input class="input" 
					   type="text" 
					   focus
					   confirm-type="search" 
					   v-model="searchInputVal" 
					   placeholder="请输入商品关键词" 
					   @input="onShowClose" 
					   @confirm="searchOpertor"
					   maxlength="20"/>
				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
			</view>
			<view class="search-btn">
				<button class="search-btn" type="default" @click.stop="searchOpertor">搜索</button>
			</view>
		</view>
		<list-skeleton v-if="showSkeleton"></list-skeleton>
	</view>
</template>
<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			};
		},
	}
		
</script>

<style>
.commodity-list-wrapper {
		scroll-view {
			height: 100%;
		}
		.style{
			width: 128rpx;
			height: 64rpx;
			background: #fff;
			font-size: 26rpx;
			display: inline-block;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			border: 2rpx solid #EEEEEE;
			position: relative;
			margin-right: 12rpx;
			}
		.danyi i{
			color: #E15616;	
			position: absolute;
			top: 20rpx;
			right: 4rpx;
			font-weight: bold
			}
		.addstyle{
				background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
				color: #FFFFFF;
			}
		.show-more-btn {
			width: 276rpx;
			height: 52rpx;
			line-height: 52rpx;
			border: 2rpx solid #D8D8D8;
			background: #F7F7F7;
			font-size: 26rpx;
			margin: 26rpx 0;
			position: absolute;
			left: 50%;
			margin-left: -138rpx;
		}
	}
	.good-search{
		height: 64rpx;
		width: 702rpx;
		padding: 24rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.search-from{
			width: 330rpx;
			height: 64rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			float: left;
			position: relative;
			.input{
				// width: 500rpx;
				height: 64rpx;
				float: left;
				line-height: 64rpx;
				color: $text-color;
				font-size: $font-size-24;
			}
			.icon-iconfonticonfontsousuo1{
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				display: block;
				font-size: $font-size-38;
				float: left;
				color: #999999;
			}
			.icon-shanchu1{
				font-size: $font-size-32;
				color: #999999;
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				top: 0;
				right: 0;
				text-align: center;
				z-index: 10;
			}
		}
		.search-btn{
			// width: 90rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: $font-size-28;
			color: $color-system;
			float: left;
			background: #FFFFFF;
			margin-left: 10rpx
		}
	 }
	}
</style>