<script setup>
import {onMounted,ref} from 'vue'
const handleTabChange = ()=>{
uni.navigateTo({ url: '/pages/circle/circle' })
}
const windowHeight = ref(0)
const scale = ref(0)
onMounted(()=>{
const windowInfo = uni.getSystemInfo()
uni.getSystemInfo({
success: (res) => {
// 提取可视区域高度（px），与 getWindowInfo() 的 windowHeight 一致
windowHeight.value = res.windowHeight*2;
console.log('可视区域高度(px)：', res.windowHeight);
scale.value = windowHeight.value/800
console.log("压缩比例",scale.value);
},
fail: (err) => {
console.error('获取系统信息失败：', err);
}
})
})
</script>
<template>
<view class="container">
<!
-- 消息通知
-->
<view class="message">
<img src="../../static/images/铃铛.png" alt="" style="width: 65rpx;height: 65rpx;">
</view>
<!
-- 个人信息区
-->
<view class="information">
<img src="@/static/images/未登录头像.png" alt="" style="width: 120rpx;height: 120rpx;">
<view class="personal
-information">
<view class="name">
<text id="nickname">未登录</text>
<text id="compileInformation">编辑资料</text>
</view>
<view class="id
-location">
<text id="id">id:983602377</text>
<text id="location">江苏</text>
</view>
</view>
</view>
<!
-- 个人简介区
-->
<view class="introduce">
<view id="show">
<text>个人简介</text>
<img src="../../static/images/铅笔.png" alt="" style="width: 30rpx;height: 30rpx;">
</view>
<view id="compileIntroduce">
<input
type="text"
placeholder="分享人生格言，让大家认识你..."
>
</view>
</view>
<!
-- 兴趣标签
-->
<view class="interest
-tags">
<view class="title">
<text>兴趣标签</text>
<img src="../../static/images/小箭头.png" alt="" style="width: 10rpx;height: 15rpx;">
</view>
<view class="tags">
<view class="tags
-item">民间故事</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
<view class="tags
-item">京剧鉴赏</view>
</view>
</view>
<!
-- 发布的帖子和参加的活动
-->
<view class="participation">
<view class="title">
<view>
<text>帖子</text>
<view style="width: 64rpx;height: 8rpx;border
-radius: 20rpx;background: rgba(254, 212, 198, 1);"></view>
</view>
<view>
<text>活动</text>
<view style="width: 64rpx;height: 8rpx;border
-radius: 20rpx;background: rgba(254, 212, 198, 1);"></view>
</view>
</view>
<view class="content">
<view class="content
-list">
<view class="content
-item">
<view class="cover">
<img src="../../static/images/活动图片1.png" alt="" style="width: 280rpx; height: 356rpx;">
</view>
<view class="message">
<view class="host">
<img src="../../static/images/活动头像1.png" alt="" style="width: 30rpx; height: 30rpx;">
<text class="nickname">风起</text>
</view>
<view class="count">
<img src="../../static/images/参加人数.png" alt="" style="width:17rpx;height:17rpx;">
<text class="particapant">321</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!
-- 自定义导航栏
-->
<view class="tabbar" :style="{backgroundSize:`${800*scale}rpx ${800*scale}rpx`,backgroundPosition:`
-346rpx ${
-(windowHeight
-145)}rpx`}">
<view class="circle" @click="handleTabChange">
<img src="@/static/tabs/星球未选中.png" alt="" style="width: 50rpx; height: 50rpx; margin
-bottom:10rpx;">
<text style="color: rgba(204, 204, 204, 1)">星趣圈</text>
</view>
<view class="my">
<img src="@/static/tabs/我的选中.png" alt="" style="width: 50rpx; height: 50rpx; margin
-bottom:10rpx;">
<text style="color: rgba(255, 204, 184, 1);">我的</text>
</view>
</view>
</view>
</template>
<style lang="s
css">
page{
position:fixed;
top:0rpx;
left:0rpx;
height:100%;
width:100%;
background
-image:url('https://img.js.design/assets/img/68a6c2073f22157da6132401.png');
background
-size: cover;
background
-repeat: no
-repeat;
background
-position:
-346rpx 0rpx;
}
.container{
overflow
-y: scroll;
overflow
-x: scroll;
height: 100%;
position: relative;
// 消息通知
.message{
position:absolute;
left:640rpx;
top:80rpx;
}
// 个人信息
.information{
position:absolute;
top:147rpx;
left:36rpx;
width: 457rpx;
height:120rpx;
display:flex;
gap: 34rpx;
.personal
-information{
display:flex;
flex
-direction: column;
gap:26rpx;
.name{
display:flex;
align
-items: center;
gap:19rpx;
#nickname{
font
-size: 36rpx;
font
-weight: 700;
}
#compileInformation{
width: 120rpx;
height: 36rpx;
background
-color: rgba(254, 212, 198, 0.62);
border:1rpx solid rgba(128, 128, 128, 1);
border
-radius: 20rpx;
font
-size: 20rpx;
font
-weight: 500;
line
-height: 36rpx;
color: rgba(128, 128, 128, 1);
text
-align: center;
}
}
.id
-location{
display:flex;
gap:29rpx;
align
-items: center;
#id{
font
-size: 24rpx;
font
-weight: 500;
color: rgba(166, 166, 166, 1);
}
#location{
width: 96rpx;
height: 35rpx;
border
-radius: 30rpx;
background: rgba(254, 212, 198, 0.62);
border:1rpx solid rgba(128, 128, 128, 1);
border
-radius: 20rpx;
font
-size: 24rpx;
font
-weight: 500;
text
-align: center;
line
-height: 35rpx;
color: rgba(128, 128, 128, 1);
}
}
}
}
// 个人简介
.introduce{
position:absolute;
top:300rpx;
left:60rpx;
display:flex;
flex
-direction: column;
gap:28rpx;
#show{
margin
-left:4rpx;
display:flex;
gap:5rpx;
width: 131rpx;
height: 30rpx;
text{
font
-size: 24rpx;
font
-weight: 500;
color: rgba(0, 0, 0, 1);
}
}
#compileIntroduce{
input{
font
-size: 24rpx;
font
-weight: 400;
background
-color: rgba(255, 250, 247, 1);
border
-radius: 10rpx;
padding:10rpx;
width: 610rpx;height: 45rpx;
}
}
}
// 兴趣标签
.interest
-tags{
position:absolute;
left:64rpx;
top:480rpx;
.title{
display:inline
-block;
height:25rpx;
margin
-bottom:28rpx;
text{
font
-size: 24rpx;
font
-weight: 500;
margin
-right:17rpx;
}
img{
vertical
-align: bottom;
}
}
.tags{
width:630rpx;
display:grid;
grid
-template
-columns: repeat(5,1fr);
gap:12rpx;
.tags
-item{
background
-color: rgba(255, 201, 201, 1);
width: 101rpx;
height: 25rpx;
text
-align: center;
border
-radius: 10rpx;
font
-size: 18rpx;
font
-weight: 500;
line
-height:25rpx;
color:white;
}
}
}
// 参与
.participation{
position:absolute;
top:648rpx;
width: 100%;
box-sizing: border
-box;
.title{
height:85rpx;
width: 670rpx;
border
-radius: 20rpx;
background
-color: rgba(255, 255, 255, 1);
margin:0 auto;
margin
-bottom:21rpx;
font
-size: 28rpx;
font
-weight: 500;
display:flex;
gap:91rpx;
align
-items: center;
text
-align: center;
&>view:first
-child{
margin
-left:91rpx;
}
}
.content{
width: 670rpx;
margin: 0 auto;
padding:19rpx 26rpx;
border
-radius: 20rpx;
background
-color: rgba(255, 247, 247, 0.7);
box-sizing: border
-box;
margin
-bottom:145rpx;
.content
-list{
display:grid;
grid
-template
-columns: repeat(2,1fr);
gap:16rpx;
.content
-item{
display: flex;
flex
-direction: column;
gap:20rpx;
align
-items: center;
width: 300rpx;
height:429rpx;
border
-radius: 10rpx;
background
-color: rgba(255, 255, 255, 1);
padding:8rpx 10rpx 15rpx 10rpx;
box-sizing: border
-box;
border:1rpx solid red;
.cover{
width:280rpx;
border:1rpx solid red;
}
.message{
width: 280rpx;
height:30rpx;
display:flex;
justify
-content: space
-between;
align
-items: center;
border:1rpx solid red;
.host{
display:flex;
gap:12rpx;
.nickname{
font
-size: 14rpx;
font
-weight: 500;
line
-height:30rpx;
}
}
.count{
display:flex;
gap:7rpx;
height:30rpx;
align
-items: center;
margin
-right:20rpx;
.particapant{
font
-size: 11rpx;
font
-weight: 500;
color: rgba(128, 128, 128, 1);
}
}
}
}
}
}
}
// 导航栏
.tabbar{
position:fixed;
bottom:0rpx;
width: 100%;
height:145rpx;
display:flex;
justify
-content: space
-evenly;
font
-size: 20rpx;
font
-weight: 400;
background:url('https://img.js.design/assets/img/68a6c2073f22157da6132401.png');
.circle{
padding
-top:21rpx;
display:flex;
flex
-direction: column;
align
-items: center;
}
.my{
padding
-top:21rpx;
display:flex;
flex
-direction: column;
align
-items: center;
}
}
}
</style>
深入理解CSS box-sizing属性
box-sizing属性决定了元素的总宽度和高度如何计算。content-box将边框和内填充包含在内，实际尺寸超出设置的宽高；而border-box则按设定的宽高计算，内容区域会受到内填充和边框的影响。理解这一属性对于前端布局至关重要。
扫一扫
2338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
