首页 > 其他分享 >2024.04.23日团队开发第四天

2024.04.23日团队开发第四天

时间:2024-05-21 17:23:06浏览次数:22  
标签:2024.04 20 22 23 color list flex 第四天 cu

 

学习时间 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>

 

   

标签:2024.04,20,22,23,color,list,flex,第四天,cu
From: https://www.cnblogs.com/dmx-03/p/18204542

相关文章

  • dxNavBar1做导航菜单,类QQ的抽屉效果(23)
     从右边的项鼠标拖到左边的分组内然后修改分组/项的名称Caption ......
  • 2024.04.22
    所学时间:2小时代码行数:127行博客园数:1篇所学知识:编写web作业,完成了大致页面。<%@pageimport="java.util.*"%><%@pageimport="java.text.*"%><%@pagesession="true"%><%@pagelanguage="java"%><%@pagecontentType=......
  • 2024.04.17
        学习时间1h代码行数50行博客量2篇学习内容主要进行了《从小工到大工》的阅读,并且对代码进行了优化  <template><viewclass="index"><index-headerbgColor="bg-index-header"@headerSwitch="headerSwitch"/>......
  • 错误: 找不到或无法加载主类 XXX类 || jmap -histo:live 2345 | less
    今天在学习jvm的时候,想要通过jmap-histo:live20368|less命令查看堆中存活对象信息。但是在windows系统中貌似好像不支持这个命令 于是我将自己的程序上传到了Linux系统中,但是经过编译完了之后,运行该class文件的时候,提示:错误:找不到或无法加载主类XXX类。这个错误的原......
  • CMU_15445数据库课程2023Fall
    这一个Project是让我们了解C++的语法以及改数据库项目的整体框架,基本的锁的使用,怎么Debug.一些零碎的知识碎片我放到最后了,以前是写C的,C++的很多语法还不是很熟悉,很多新的语法更不知道该怎么用.这次作业完成也是受益良多.Copy_on_Write字典树首先必须明确一个概念,......
  • 23ai免费版本环境快速就绪
    笔者感受就是搞一套Oracle23ai的学习测试环境,从未如此的简单高效。因为近期Oracle23ai这个话题很火,很多人也在找实验环境想亲自体验测试一番。其实搞这样的环境没有任何的门槛,甚至无需注册任何账号,直接安装免费的OracleVMVirtualBox,下载现成的23ai环境,双击导入,就可以开始一......
  • C123【模板】扩展域并查集 P1892 [BOI2003] 团伙
    视频链接:C123【模板】扩展域并查集P1892[BOI2003]团伙_哔哩哔哩_bilibili  P1892[BOI2003]团伙-洛谷|计算机科学教育新生态(luogu.com.cn)//扩展域并查集#include<iostream>#include<cstring>#include<algorithm>usingnamespacestd;intn,m,a,b,......
  • SAP S4HANA 2023 PCE系统上ME23N界面里的打印预览功能不能使用?
    SAPS4HANA2023PCE系统上ME23N界面里的打印预览功能不能使用?  在老版本的SAPECC系统上,在采购订单的显示界面,我们是可以点击‘打印预览’按钮去看采购订单的打印效果的。这是一个有经验的MM模块顾问熟知的。 但是笔者的这个认知在SAPS4HANA2023PCE系统上被颠覆了!笔......
  • 代码随想录算法训练营第十三天 | 239. 滑动窗口最大值 347. 前k个高频元素
    239.滑动窗口最大值题目链接文章讲解视频讲解思路:使用单调队列,来维护有可能成为最大值的元素;   当窗口向右滑动时,判断移除的元素是否是队首元素如果是的话出队;   新加入的元素依次和队尾元素作比较,如果大于队尾元素则将队尾元素循环出队,这样可以保证队列中始终维持......
  • SQL优化-20231016
    数据结构数据库的表和索引缺一不可表特点:无序,插入速度快,查找速度慢索引(B+Tree)特点:有序,插入速度慢,查找速度快查找的效率比较,如果按照读取的数据块来计算?测试数据TABLE_OWNERTABLE_NAMEINDEX_NAMECOLUMNS......