dykj-football/pages/user/compontents/attention.vue
2024-04-18 15:58:25 +08:00

98 lines
2.3 KiB
Vue

<template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">关注列表</view>
</view>
<view class="attentionList">
<view v-for="(index,item) in 3" :key="index">
<view class="ListStrip">
<view class="ListName">
<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
<span>{{'法无边'}}</span>
</view>
<view class="ListContent">
<view class="contentText">
<span>{{'二月探花'}}</span>
<span>{{'五连红'}}</span>
</view>
<view class="">
<u-tag text="法国" type="warning" size="mini" plain></u-tag>
</view>
<view class="">
<u-tag text="法国各级联赛" type="warning" size="mini" plain></u-tag>
</view>
</view>
</view>
</view>
<view class="listBottom">没有更多了</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.attentionList {
width: 100%;
padding: 5%;
.ListStrip {
width: 90%;
height: 17vh;
border: 1px solid #f1f1f1;
border-radius: 10px;
margin-bottom: 5%;
display: flex;
justify-content: space-between;
.ListName {
width: 40%;
display: flex;
justify-content: space-evenly;
margin-top: 7%;
font-size: 12px;
}
.ListContent {
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
padding-right: 5%;
.contentText {
width: 80%;
display: flex;
justify-content: space-evenly;
color: #cc3e3e;
font-size: 14px;
font-weight: 700;
}
}
}
}
.listBottom {
text-align: center;
width: 90%;
font-weight: 600;
color: #c4c4c4;
}
</style>