2024.5.4

完成了课堂极限测试的基本内容，开始制作软件的各个页面内容

<template>
<view class="index">

<index-header bgColor="bg-index-header" @headerSwitch="headerSwitch"/>

<!-- 视频组件 -->
<cu-video class="video" :video_list="videoList"/>

</view>
</template>

<script>
import indexHeader from '@/components/index-header.vue';
import cuVideo from '@/components/cu-video.vue';
export default {
components: {
indexHeader,
cuVideo
},
data() {
return {
title: 'Hello',
videoList:[]
}
},
onLoad() {
this.getVideoList();
},
onShow() {
console.log('界面显示')
},
methods: {

getVideoList(refresh) {
uni.request({
url: 'https://api.52170.xin/video',
dataType: 'json',
success: res => {
console.log(res.data.data.list);
for (let item of res.data.data.list) {
this.videoList.push({
video_id: item.video_id,
nickname: item.nickname,
video_describe: item.video_describe,
cover_url: item.cover_url,
video_url: item.video_url,
dianzan: item.dianzan,
pinglun: item.pinglun,
zhuanfa: item.zhuanfa,
is_dianzan: item.is_dianzan,
flag: false
});
}

}
});
},
// 顶部切换
headerSwitch(val){
// console.log(val);
this.getVideoList();
}




}

}
</script>

<style lang="less">
.index {
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
background-color: #333333;
height: 100vh;
}
.tabbar{
.action{
.plus{
image{
width: 100upx;
height: 60upx;
}
}
}
}
</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>