<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>
