You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.1 KiB
115 lines
2.1 KiB
<template>
|
|
<view>
|
|
<!-- <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-upload-image></lf-upload-image>
|
|
<drag />
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F6F6F6;
|
|
}
|
|
</style>
|
|
<script>
|
|
import lfUploadImage from "@/components/lf-uploadImage/lf-uploadImage.vue"
|
|
import drag from './drag.vue';
|
|
export default {
|
|
components: { lfUploadImage, drag },
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</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>
|