pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面

Browse Source
This commit is contained in:
pengxiaolong
2025-05-12 21:23:37 +08:00
parent ab626be4b4
commit 033cb649f8
52 changed files with 9183 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
components/contentList/contentList.vue Normal file
View File

@@ -0,0 +1,222 @@
<template>
<scroll-view scroll-y="true" class="scroll">
<uni-card class="content-list" v-for="(item, index) in list">
<!-- `````````````````````````` -->
<image class="headShot" src="../../static/logo.png" mode="scaleToFill" />
<!-- `````````````````````````````````````` -->
<view class="content-list-title">
<view class="cardname">{{ item.title }}</view>
<view class="content-list-info">
<view :class="{Gendermale:Gender,Genderfemale:!Gender}"><!-- 性别换背景 -->
<image v-if="Gender" class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
<image v-else class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
<view class="age">{{ item.gender }}</view>
</view>
<view class="RoomID">房间ID:{{ item.id }}</view>
<view class="Charm">魅力值</view>
<view class="charmValue"> {{ item.score }}</view>
</view>
</view>
<!-- `````````````````````````````````````````````````````` -->
</uni-card>
</scroll-view>
</template>
<script>
export default {
data() {
return {
title: "Hello",
Gender: true,
// 列表数据
list: [
{
title: "极乐世界",
id: "9088",
gender: "男",
score: 8.8,
},
{
title: "极乐世界2",
id: "9089",
gender: "女",
score: 7.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
{
title: "极乐世界3",
id: "9090",
gender: "男",
score: 9.8,
},
],
// 列表数据结束
};
},
onLoad() {
// 页面加载时执行
},
methods: {
// 方法定义
},
};
</script>
<style scoped>
.scroll {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-list {
display: flex;
align-items: center;
width: 712rpx;
height: 161rpx;
background: #ffffff;
border-radius: 15rpx;
margin-bottom: 12rpx;
margin-left: 20rpx;
}
.headShot {
width: 101rpx;
height: 101rpx;
border-radius: 50rpx;
margin-left: 30rpx;
margin-right: 33rpx;
}
.content-list-info {
display: flex;
align-items: center;
}
.cardname {
font-size: 31rpx;
color: #161616;
line-height: 38rpx;
}
.Genderimg {
width: 15rpx;
height: 15rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}
.age {
color: #ffffff;
font-size: 14rpx;
}
.Gendermale{
background: url(../../static/maleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.Genderfemale{
background: url(../../static/femaleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.RoomID {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
margin-right: 152rpx;
}
.Charm {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
margin-right: 12rpx;
}
.charmValue {
font-size: 23rpx;
color: #161616;
line-height: 38rpx;
}
</style>