記一個小界面

如下圖：

代碼如下，樣式都寫在wxml里面

<view style="display:flex;flex-direction:column;text-align:center ;margin:30rpx 30rpx;border:2rpx solid #949494;height:540rpx;border-radius:20rpx;box-shadow:0px -5px 0px 0px #E5E5E5,-5px 0px 0px 0px #E5E5E5,5px 0px 0px 0px #E5E5E5,0px 5px 0px 0px #E5E5E5;"><view><image style="height:120rpx;width:120rpx;margin-top:40rpx;" src='/images/Excel.png' mode="widthFix,heightFix"></image><view style="font-size:36rpx;font-weight:570;margin-top:20rpx;">狀態標題</view></view><view style="font-size:28rpx;color:#949494;margin:30rpx 0;">提示語言111111</view><view style="display:flex;flex-direction:row;justify-content:center;margin:50rpx 0 40rpx 0;"><view><view style=" border:2rpx solid #9F7D77; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;padding:2rpx;"><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#9F7D77;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">1</text></view></view> <view style="color:#9F7D77;font-size:28rpx;margin-top:10rpx;">11</view></view><view style="width:42rpx;height:2rpx;background:#aaa;margin:0 4rpx;position:relative;top:30rpx;"></view><view><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;"> <view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#949494;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">2</text></view></view><view style="color:#949494;font-size:28rpx;margin-top:10rpx;">22</view></view><view style="width:42rpx;height:2rpx;background:#aaa;margin:0 4rpx;position:relative;top:30rpx;"></view><view><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;"> <view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#949494;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">3</text></view></view><view style="color:#949494;font-size:28rpx;margin-top:10rpx;">33</view></view><view style="width:42rpx;height:2rpx;background:#aaa;margin:0 4rpx;position:relative;top:30rpx;"></view><view><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;"> <view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#949494;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">4</text></view></view><view style="color:#949494;font-size:28rpx;margin-top:10rpx;">44</view></view><view style="width:42rpx;height:2rpx;background:#aaa;margin:0 4rpx;position:relative;top:30rpx;"> </view><view><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;"> <view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#949494;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">5</text></view></view><view style="color:#949494;font-size:28rpx;margin-top:10rpx;">55</view></view><view style="width:42rpx;height:2rpx;background:#aaa;margin:0 4rpx;position:relative;top:30rpx;"> </view><view><view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 60rpx; height: 60rpx; line-height: 60rpx;"> <view style=" border:2rpx solid #FFFFFF; border-radius: 50%; width: 56rpx; height: 56rpx; line-height: 56rpx;background:#949494;color:#FFFFFF;font-size:34rpx;"><text style="font-style:oblique;padding-right: 8rpx;">6</text></view></view><view style="color:#949494;font-size:28rpx;margin-top:10rpx;">66</view></view></view></view>

?

總結

以上是生活随笔為你收集整理的微信小程序小模块界面，边框带阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。