blindDate/pages/test/test.vue

<template>
	<view style="padding: 30rpx 32rpx;">
		<!-- <view class="content"> -->
			<!-- float 方案 -->
			<!-- <view class="item" :class="{'max-item': item == 0}" v-for="item in 6">{{ item + 1 }}</view> -->
			
			<!-- flex 方案 -->
			<!-- <view class="lf-flex-wrap">
				<view class="flex" 
					:style="{order: item + 1}"
					:class="{'flex-max': item == 0}" 
					v-for="item in 6"
				>{{ item + 1 }}</view>
			</view> -->
		<!-- </view> -->
		
		<!-- <div class="box-wrapper">
		      <div style="margin-top:0px" class="box"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box"></div>
		      <div class="box"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		  </div> -->
		  
		  <lf-nav baColor="pink" :showIcon="true" :search="true" ></lf-nav>
		  <lf-upload-image></lf-upload-image>
		  <view style="height: 100rpx;"></view>
		  <!-- <drag /> -->
		  <view>111111</view>
		  <lf-time-picker v-model="timeShow">
			  <view @click="timeShow = true">点击此处打开时间选择组件</view>
		  </lf-time-picker>
		  <view style="height: 100rpx;">
			  <text class="le lf-icon-xingxing-kong"></text>
		  </view>
		  <lf-rate allowHalf="true" :isFill="false"></lf-rate>
		  <view v-for="item in 60" :key="item">{{ item }}</view>
		  <view>欧耶</view>
		  
		  <lf-tabbar v-model="active" :animate="animate" :close-animate-on-raisede="false" @change="handleChange">
			  <lf-tabbar-item v-for="item in tabbars"
				  :key="item.name"
				  :name="item.name"
				  :icon="item.icon"
				  :dot="item.dot"
				  :info="item.info"
				  :raisede="item.raisede"
				  :style="{'width': 100 / tabbars.length +'%'}"
				  icon-prefix="lf-icon">
				  {{ item.text }}
				</lf-tabbar-item>
		  </lf-tabbar>
	</view>
</template>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<script>
	import lfNav from '@/components/lf-nav/lf-nav.vue'
	import lfUploadImage from "@/components/lf-uploadImage/lf-uploadImage.vue"
	import lfTimePicker from '@/components/lf-timePicker/lf-timePicker.vue'
	import lfRate from '@/components/lf-rate/lf-rate.vue'
	import drag from './drag.vue';
	import lfTabbarItem from "@/components/lf-tabbar/lf-tabbar-item.vue"
	import lfTabbar from "@/components/lf-tabbar/lf-tabbar.vue"
	export default {
		components: { lfUploadImage, drag, lfTimePicker, lfRate, lfNav, lfTabbar, lfTabbarItem },
		data(){
			return {
				timeShow: false,
				 active: 'home',
				  animate: 'rubberBand',
				  tabbars: [
					{
					  name: 'home',
					  text: '首页',
					  icon: 'jiantouxia'
					},
					{
					  name: 'brand',
					  text: '品牌',
					  icon: 'jiantouxia'
					},
					{
					  name: 'find',
					  text: '发现',
					  icon: 'jiantouxia'
					},
					{
					  name: 'mine',
					  text: '我的',
					  icon: 'jiantouxia'
					}
				  ]
			}
		},
		onLoad(){
			
		},
		methods: {
			handleChange (e) {
			  console.log('change::', e)
			  uni.showToast({
				title: e.name,
				icon: 'none'
			  })
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.box{
		height: 123px;
		padding: 1em;
		margin-top: 1em;
		-moz-page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		border: 1px solid #000;
		background: #909090;
	}
	.spe{
		height: 225px;
	}
	.box-wrapper{
		-moz-column-count:4; /* Firefox */
		-webkit-column-count:4; /* Safari 和 Chrome */
		column-count:4;
		-moz-column-gap: 1em;
		-webkit-column-gap: 1em;
		column-gap: 1em;
	}
	
	.content{
		width: 750rpx;
		height: max-content;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 27rpx;
		overflow: hidden;
		
		.flex{
			width: 222rpx;
			height: 222rpx;
			background-color: #DD6161;
			margin: 5rpx;
		}
		.flex-max{
			width: 454rpx;
			height: 454rpx;
		}
		
		
		/* float
		.item{
			width: 222rpx;
			height: 222rpx;
			background-color: #DD6161;
			float: left;
			margin: 5rpx;
		}
		.max-item{
			width: 454rpx;
			height: 453rpx;
		}
		*/
	}
</style>