2024.04.23日团队开发第四天

 

学习时间	2h
代码行数	160行
博客量	1篇
学习内容	对前端页面进行了优化，编写了最基本的登录页面的后端代码 <template> <view class="msg"> <cu-custom bgColor="bg-black" :isBack="false"> <block slot="backText">返回</block> <block slot="content">消息</block> </cu-custom> <!-- tools --> <view class="cu-list grid col-4 tools align-center justify-center"> <view class="flex align-center justify-center"> <image src="../../static/msg/fans.png" mode="widthFix"></image> <text>粉丝</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/zan.png" mode="widthFix"></image> <text>赞</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/at.png" mode="widthFix"></image> <text>@我的</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/comment.png" mode="widthFix"></image> <text>评论</text> </view> </view> <!-- list --> <view class="cu-list menu-avatar msg-list"> <view class="cu-item"> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> <view class="content"> <view class="text-grey">17组</view> <view class="text-gray text-sm flex"> <view class="text-cut"> <text class="cuIcon-infofill text-red margin-right-xs"></text> 团队大作业 </view> </view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-grey sm">5</view> </view> </view> <view class="cu-item"> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"> <view class="cu-tag badge">2</view> </view> <view class="content"> <view class="text-grey"> <view class="text-cut">16组</view> <view class="cu-tag round bg-orange sm">无</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 风生水起队 </view> </view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cuIcon-notice_forbid_fill text-gray"></view> </view> </view> <view class="cu-item "> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view> <view class="content"> <view class="text-pink"><view class="text-cut">无2</view></view> <view class="text-gray text-sm flex"> <view class="text-cut">风生水起队</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-red sm">5</view> </view> </view> <view class="cu-item grayscale"> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view> <view class="content"> <view><view class="text-cut">无3</view> <view class="cu-tag round bg-orange sm">断开连接...</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 无</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-red sm">5</view> </view> </view> <view class="cu-item cur"> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);"> <view class="cu-tag badge"></view> </view> <view class="content"> <view> <view class="text-cut">无4</view> <view class="cu-tag round bg-orange sm">6人</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 无：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cuIcon-notice_forbid_fill text-gray"></view> </view> </view> </view> </view> </template> <script> export default { data() { return { }; } } </script> <style lang="less"> .msg{ width: 100vw; height: 100vh; background-color: #161823; } .tools{ view{ display: flex; flex-direction: column; } image{ width: 100upx; height: 100upx; display: flex; } } .cu-list.grid{ background-color: #161823; padding: 30upx 0; color: #FFFFFF; border-bottom: 1px solid rgba(110,111,117,0.5); } .cu-list+.cu-list{ margin-top: 0; } .cu-list.menu-avatar>.cu-item{ background-color: #161823; border-color: rgba(110,111,117,0.5); } </style> <template> <view class="msg"> <cu-custom bgColor="bg-black" :isBack="false"> <block slot="backText">返回</block> <block slot="content">消息</block> </cu-custom> <!-- tools --> <view class="cu-list grid col-4 tools align-center justify-center"> <view class="flex align-center justify-center"> <image src="../../static/msg/fans.png" mode="widthFix"></image> <text>粉丝</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/zan.png" mode="widthFix"></image> <text>赞</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/at.png" mode="widthFix"></image> <text>@我的</text> </view> <view class="flex align-center justify-center"> <image src="../../static/msg/comment.png" mode="widthFix"></image> <text>评论</text> </view> </view> <!-- list --> <view class="cu-list menu-avatar msg-list"> <view class="cu-item"> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> <view class="content"> <view class="text-grey">17组</view> <view class="text-gray text-sm flex"> <view class="text-cut"> <text class="cuIcon-infofill text-red margin-right-xs"></text> 团队大作业 </view> </view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-grey sm">5</view> </view> </view> <view class="cu-item"> <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"> <view class="cu-tag badge">2</view> </view> <view class="content"> <view class="text-grey"> <view class="text-cut">16组</view> <view class="cu-tag round bg-orange sm">无</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 风生水起队 </view> </view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cuIcon-notice_forbid_fill text-gray"></view> </view> </view> <view class="cu-item "> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view> <view class="content"> <view class="text-pink"><view class="text-cut">无2</view></view> <view class="text-gray text-sm flex"> <view class="text-cut">风生水起队</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-red sm">5</view> </view> </view> <view class="cu-item grayscale"> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view> <view class="content"> <view><view class="text-cut">无3</view> <view class="cu-tag round bg-orange sm">断开连接...</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 无</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cu-tag round bg-red sm">5</view> </view> </view> <view class="cu-item cur"> <view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);"> <view class="cu-tag badge"></view> </view> <view class="content"> <view> <view class="text-cut">无4</view> <view class="cu-tag round bg-orange sm">6人</view> </view> <view class="text-gray text-sm flex"> <view class="text-cut"> 无：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</view></view> </view> <view class="action"> <view class="text-grey text-xs">22:20</view> <view class="cuIcon-notice_forbid_fill text-gray"></view> </view> </view> </view> </view> </template> <script> export default { data() { return { }; } } </script> <style lang="less"> .msg{ width: 100vw; height: 100vh; background-color: #161823; } .tools{ view{ display: flex; flex-direction: column; } image{ width: 100upx; height: 100upx; display: flex; } } .cu-list.grid{ background-color: #161823; padding: 30upx 0; color: #FFFFFF; border-bottom: 1px solid rgba(110,111,117,0.5); } .cu-list+.cu-list{ margin-top: 0; } .cu-list.menu-avatar>.cu-item{ background-color: #161823; border-color: rgba(110,111,117,0.5); } </style>