zh_order_food_xcx/pages-my/my-publish.vue

<template>
	<view class="flex-common-css">
		<Nav title="我的发布" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css content-box box-sizing-border"
			@scrolltolower="scrolltolower">
			<view class="item-box box-sizing-border b-rad-20 mb-20 bgc-f flex-justify-space"
				v-for="(item,index) in listData" :key="index" @click="goToUrl(item)">
				<image class="item-head-img flex-shrink0 b-rad-50 mr-16" src="../static/img/my/user-img.png"
					mode="aspectFill"></image>
				<view class="itme-right common-view-css">
					<view class="item-name flex-justify-space mb-16">
						<view class="">
							<view class="mb-4 fc-3 fs-28">
								恒生科技和半导体
							</view>
							<view class="fs-24 fc-9">
								1小时前
							</view>
						</view>
						<view class="align-items-center">
							<image class="rd-img mr-8" src="@/static/img/my/rd.png" mode=""></image>
							<view class="fs-26 fc-9">
								125
							</view>
						</view>
					</view>
					<view class="text-overflow-ellipsis-t fs-30 fc-3 mb-16">
						欢迎打脸，科技类型很顽强，不是刚刚说1 1吧，换着领涨，这个季节玩什么光伏储白 酒，普
					</view>
					<view class="item-img-box mb-20 align-items-center flex-wrap-wrap">
						<image class="b-rad-12" v-for="imgUrl in item.img" :src="imgUrl" mode="aspectFill"
							:class="item.img.length==1?'item-img-one':item.img.length==2?'item-img-two':'item-img-three'">
						</image>
					</view>
					<view class="align-items-center mb-40">
						<view class="label-box align-items-center mr-20 b-rad-200 bgc-F2F2F2">
							<image class="wz mr-8" src="@/static/img/my/wz.png" mode=""></image>
							<view class="fs-24 fc-9">
								重庆工商职业学校
							</view>
						</view>
						<view class="label-box align-items-center b-rad-200 bgc-F2F2F2">
							<image class="wz mr-8" src="@/static/img/my/ht.png" mode=""></image>
							<view class="fs-24 fc-9">
								买卖闲置
							</view>
						</view>
					</view>
					<view class="flex-justify-space">
						<view class="align-items-center">
							<image class="but-icons mr-8" src="@/static/img/my/fx.png" mode=""></image>
							<view class="fs-24 fc-9">
								分享
							</view>
						</view>
						<view class="align-items-center">
							<image class="but-icons mr-8" src="@/static/img/my/z.png" mode=""></image>
							<view class="fs-24 fc-9">
								12
							</view>
						</view>
						<view class="align-items-center">
							<image class="but-icons mr-8" src="@/static/img/my/hf.png" mode=""></image>
							<view class="fs-24 fc-9">
								16
							</view>
						</view>
						<uni-icons color="#999999" type="trash" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		<movable-area class="add-box">
			<movable-view direction="all" y="300">
				<view class="add-but b-rad-50 text-align-center" @click="addInfo()">
					<uni-icons type="plusempty" color="#fff" size="30"></uni-icons>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				listData: [{
					img: [
						'https://img2.baidu.com/it/u=363454452,1934740400&fm=253&fmt=auto&app=138&f=JPEG?w=864&h=486'
					]
				}, {
					img: ['https://img1.baidu.com/it/u=391647807,608347418&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
						'https://img1.baidu.com/it/u=2042516722,265172545&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
					]
				}, {
					img: ['https://img0.baidu.com/it/u=3650197984,2591413134&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						'https://img0.baidu.com/it/u=1452587454,2859975382&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						'https://img1.baidu.com/it/u=2550250358,534330568&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500',
						'https://img2.baidu.com/it/u=1185521512,762382298&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
					]
				}]
			};
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			goToUrl() {
				
			},
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 20rpx 24rpx;
	}

	.item-box {
		padding: 24rpx;
	}

	.item-name {
		align-items: flex-start;
	}

	.item-head-img {
		width: 80rpx;
		height: 80rpx;
	}

	.rd-img {
		width: 40rpx;
		height: 40rpx;
	}

	.label-box {
		padding: 0 12rpx;
		height: 38rpx;
		line-height: 38rpx;
	}

	.wz {
		width: 32rpx;
		height: 32rpx;
	}

	.but-icons {
		width: 40rpx;
		height: 40rpx;
	}

	.item-img-box {
		width: calc(100% + 6rpx);
	}

	.item-img-one {
		width: 360rpx;
		height: 360rpx;
	}

	.item-img-two {
		width: 276rpx;
		height: 276rpx;
		margin: 0 6rpx 0 0;
	}

	.item-img-three {
		width: 182rpx;
		height: 182rpx;
		margin: 0 6rpx 6rpx 0;
	}
	.add-box{
		position: fixed;
		right: 98rpx;
		top: 10vh;
		max-width: 88rpx;
		height: 80vh;
		z-index: 999;
	}
	.add-but{
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient( 284deg, #0290FC 0%, #01D8FF 100%);
	}
</style>