129 lines
2.7 KiB
Vue
129 lines
2.7 KiB
Vue
<template>
|
|
<view>
|
|
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
|
|
<!-- 自定义导航 -->
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
|
|
</view>
|
|
<view class="color">
|
|
<view class="headPortrait">图片</view>
|
|
<view class="Off-card">
|
|
<view class="card" v-for="item in text">{{ item.txt }}</view>
|
|
</view>
|
|
<view class="Off-card">
|
|
<view class="Long-card" v-for="item in 2">1</view>
|
|
</view>
|
|
<view class="scheme">
|
|
<view style="font-weight: 700">今日方案</view>
|
|
<view style="display: flex; width: 150rpx; justify-content: space-around">
|
|
<view style="font-size: 20rpx">查看更多</view>
|
|
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="Pitch-card">
|
|
<view class="">1</view>
|
|
<view class="">2</view>
|
|
<view class="">3</view>
|
|
<view class="">4</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
// 获取安全区域的边界
|
|
const { safeAreaInsets } = uni.getSystemInfoSync();
|
|
|
|
const text = ref([
|
|
{
|
|
txt: '学院'
|
|
},
|
|
{
|
|
txt: '方法'
|
|
},
|
|
{
|
|
txt: '高玩区'
|
|
}
|
|
]);
|
|
|
|
// #ifdef H5 || APP
|
|
console.log('运行在 App');
|
|
// #endif
|
|
|
|
// #ifndef MP-WEIXIN
|
|
console.log('不是运行在微信小程序');
|
|
// #endif
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.color {
|
|
background-image: linear-gradient(to bottom, rgba(246, 233, 224), rgba(255, 255, 255));
|
|
height: 750rpx;
|
|
display: flow-root;
|
|
}
|
|
.index-page {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
|
|
/* #ifdef H5 */
|
|
padding-top: 20rpx;
|
|
/* #endif */
|
|
}
|
|
|
|
.page-navbar {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
padding: 0 30rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #000;
|
|
text-align: center;
|
|
}
|
|
.headPortrait {
|
|
width: 650rpx;
|
|
height: 250rpx;
|
|
border-radius: 20rpx;
|
|
margin: auto;
|
|
margin-top: 100rpx;
|
|
background-color: #fff;
|
|
border: 1rpx solid #b6b5b3;
|
|
}
|
|
.Off-card {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
margin-top: 15rpx;
|
|
}
|
|
.card {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 20rpx;
|
|
border: 1rpx solid #b6b5b3;
|
|
}
|
|
.Long-card {
|
|
background-color: #fff;
|
|
width: 300rpx;
|
|
height: 120rpx;
|
|
margin-top: 15rpx;
|
|
border-radius: 15rpx;
|
|
border: 1rpx solid #b6b5b3;
|
|
}
|
|
.scheme {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 35rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.Pitch-card {
|
|
width: 650rpx;
|
|
height: 250rpx;
|
|
border-radius: 15rpx;
|
|
margin: auto;
|
|
background-color: #fff;
|
|
border: 1rpx solid #b6b5b3;
|
|
}
|
|
</style>
|