98 lines
2.3 KiB
Vue
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>
|