罗世杰：feat：完成Dropdown组件的封装 fix：更改了pubulishSlide的样式bug

components/DropDown/DropDown.vue

@@ -1,14 +1,15 @@
 <template>
 	<view class="container">
+		<view class="tabs-bg"/>
 		<view class="tabs">
 			<view
 				class="title-view"
 				v-for="(item, index) in title"
+				:key="item"
 				@click="changeActiveIndex(index)"
 				:class="{isActive: activeIndex === index}"
 			>
 				<text>{{item}}</text>
-				<!-- <text>{{index}}</text> -->
 				<view class="arrow" v-if="activeIndex !== index">
 					<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
 				</view>
@@ -18,27 +19,51 @@
 				
 			</view>
 		</view>
-		
+		<view class="item-border">
+			<DropDownItem v-if="activeIndex !== -1" :list="tablist"/>
+		</view>
 	</view>
 </template>
 
 <script>
+	/**
+	 * @property {Array} postlist   传递一个二维数组
+	 */
+	import DropDownItem from "./DropDownItem.vue"
 	export default {
 		name:"DropDown",
+		components: {
+			DropDownItem
+		},
+		props: {
+			postlist: {
+				type:Array,
+				default(){
+					return	[['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
+				}
+			}
+		},
 		data() {
 			return {
 				title: ['行业','区域','面积','筛选'],
-				activeIndex: -1
+				activeIndex: -1,
+				// postlist: [['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
 			};
 		},
+		computed: {
+			tablist: function() {
+				return this.postlist[this.activeIndex]
+			}
+		},
 		methods: {
 			changeActiveIndex(index){
 				if(this.activeIndex === index){
 					this.activeIndex = -1;
-				}
-				this.activeIndex = index
+				}else 
+					this.activeIndex = index
 			}
-		}
+		},
+		
 	}
 </script>
 
@@ -47,12 +72,23 @@
 		color: #CC3333;
 	}
 	.container{
-		
+		margin-top: 10px;
+		position: relative;
+		.tabs-bg {
+			position: absolute;
+			background-color: $uni-bg-color-grey;
+			height: 120rpx;
+			width: 100%;
+			transform: translateY(-20rpx);
+			z-index: 2;
+		}
 		.tabs{
 			background-color: #fff;
 			height: 100rpx;
 			display: flex;
 			justify-content: space-around;
+			position: relative;
+			z-index: 3;
 		}
 		.title-view {
 			display: flex;
@@ -70,5 +106,9 @@
 			justify-content: center;
 		}
 	}
-	
+	.item-border{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
 </style>