<view class="appointment"> <view class="app-moduler"> <navigator url="url" class="mod-item"> <view class="mod-signup"> <image src="{{signupimg}}"></image> </view> <view class="mod-img"> <image src="{{imgsrc}}" class="mod-image"></image> </view> <view class="mod-title"> <text>标题标题标题标题标题</text> </view> <view class="mod-info"> <view class="mod-icon"> <image src="{{iconsrc}}" class="icon"></image> </view> <view class="moinfont">17人已申请</view> </view> </navigator> <navigator url="url" class="mod-item"> <view class="mod-signup"> <image src="{{signupimg}}"></image> </view> <view class="mod-img"> <image src="{{imgsrc}}" class="mod-image"></image> </view> <view class="mod-title"> <text>标题标题标题标题标题</text> </view> <view class="mod-info"> <view class="mod-icon"> <image src="{{iconsrc}}" class="icon"></image> </view> <view class="moinfont">17人已申请</view> </view> </navigator> <navigator url="url" class="mod-item"> <view class="mod-signup"> <image src="{{signupimg}}"></image> </view> <view class="mod-img"> <image src="{{imgsrc}}" class="mod-image"></image> </view> <view class="mod-title"> <text>标题标题标题标题标题</text> </view> <view class="mod-info"> <view class="mod-icon"> <image src="{{iconsrc}}" class="icon"></image> </view> <view class="moinfont">17人已申请</view> </view> </navigator> <navigator url="url" class="mod-item"> <view class="mod-signup"> <image src="{{signupimg}}"></image> </view> <view class="mod-img"> <image src="{{imgsrc}}" class="mod-image"></image> </view> <view class="mod-title"> <text>标题标题标题标题标题</text> </view> <view class="mod-info"> <view class="mod-icon"> <image src="{{iconsrc}}" class="icon"></image> </view> <view class="moinfont">17人已申请</view> </view> </navigator> </view> </view>
.mod-item{ width:46%; height:300rpx; float: left; margin-left:20rpx; margin-top:40rpx; position: relative; } .mod-signup{ position: absolute; } .mod-signup image{ width:76rpx; height:42rpx; } .mod-img{ width:100%; height:180rpx; } .mod-image{ width: 100%; height:180rpx; } .mod-title{ font-size:32rpx; font-family: '微软雅黑'; display:flex; height:45rpx; margin-top:15rpx; flex-direction:column; justify-content: center; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; overflow: hidden; } .mod-info{ display: flex; flex-direction: column; height:40rpx; } .mod-icon{ display: flex; flex-direction: row; width: 40rpx; height: 40rpx; } .icon{ width: 40rpx; height: 40rpx; } .moinfont{ font-size: 28rpx; text-indent: 60rpx; font-family: '微软雅黑'; color:#bfbfbf; } .more-info{ display: flex; flex-direction: column; font-size:32rpx; font-family: '微软雅黑'; line-height: 98rpx; text-indent: 30rpx; color:#586C94; }
//signup.js //获取应用实例 var app = getApp() Page({ data: { signupimg: '../../image/signup.png', imgsrc: 'https://ss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?searchbox_feed&quality=120&wh_rate=0&size=f648_364&ref=http%3A%2F%2Fwww.baidu.com&sec=0&di=1619440b1bc5580ece1e18c556a408d7&src=http%3A%2F%2Ft12.baidu.com%2Fit%2Fu%3D2318927072%2C2551034291%26fm%3D175%26s%3DF9E09B544C2154095A6098DF030090F1%26w%3D660%26h%3D370%26img.JPEG', iconsrc: '../../image/usercount.png', }, })