2025-09-17
主页修改
This commit is contained in:
@@ -10,7 +10,8 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/home/index",
|
"path": "pages/home/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "主页"
|
"navigationBarTitleText": "主页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,10 +1,165 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tabbar></Tabbar>
|
<view class="message-container">
|
||||||
|
<!-- 固定背景的容器 -->
|
||||||
|
<view class="background-container"></view>
|
||||||
|
|
||||||
|
<!-- 可滚动的内容区域 -->
|
||||||
|
<view class="content-container" :style="'height:'+height+'px'">
|
||||||
|
|
||||||
|
<u-swiper :list="list" name="url" height="324"></u-swiper>
|
||||||
|
|
||||||
|
<view class="menu-list">
|
||||||
|
<swiper class="swiper">
|
||||||
|
<swiper-item>
|
||||||
|
<u-grid :col="4">
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="photo" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">图片</view>
|
||||||
|
</u-grid-item>
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="lock" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">锁头</view>
|
||||||
|
</u-grid-item>
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="hourglass" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">沙漏</view>
|
||||||
|
</u-grid-item>
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="hourglass" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">沙漏</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<u-grid :col="4">
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="photo" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">图片</view>
|
||||||
|
</u-grid-item>
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="lock" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">锁头</view>
|
||||||
|
</u-grid-item>
|
||||||
|
<u-grid-item>
|
||||||
|
<u-icon name="hourglass" :size="46"></u-icon>
|
||||||
|
<view class="grid-text">沙漏</view>
|
||||||
|
</u-grid-item>
|
||||||
|
</u-grid>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<view class="indicator-dots">
|
||||||
|
<view class="indicator-dots-item indicator-dots-active">
|
||||||
|
</view>
|
||||||
|
<view class="indicator-dots-item">
|
||||||
|
</view>
|
||||||
|
<view class="indicator-dots-item">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<Tabbar id="tabbarId"></Tabbar>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, getCurrentInstance } from 'vue';
|
||||||
|
import {
|
||||||
|
onReady
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
|
import { onReady as onUniReady } from '@dcloudio/uni-app';
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
|
||||||
|
const height = ref(0)
|
||||||
|
|
||||||
|
const loadHeight = () => {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success(res) {
|
||||||
|
let screenHeight = res.screenHeight
|
||||||
|
uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
|
||||||
|
height.value = screenHeight - data.height
|
||||||
|
}).exec()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ url: '/static/banner/1.png' },
|
||||||
|
{ url: '/static/banner/2.png' },
|
||||||
|
{ url: '/static/banner/3.png' },
|
||||||
|
]
|
||||||
|
|
||||||
|
onUniReady(() => {
|
||||||
|
loadHeight()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.message-container {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 防止容器本身滚动 */
|
||||||
|
|
||||||
|
/* 固定背景 */
|
||||||
|
.background-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||||||
|
z-index: 1;
|
||||||
|
/* 确保背景在内容下方 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容滚动区域 */
|
||||||
|
.content-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
/* 确保内容在背景上方 */
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 100%;
|
||||||
|
// padding: 32rpx;
|
||||||
|
|
||||||
|
.menu-list {
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
height: 170rpx;
|
||||||
|
|
||||||
|
.grid-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
color: $u-type-info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.indicator-dots {
|
||||||
|
// margin-top: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-dots-item {
|
||||||
|
background-color: $u-tips-color;
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-dots-active {
|
||||||
|
background-color: $u-type-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
BIN
static/banner/1.png
Normal file
BIN
static/banner/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
BIN
static/banner/2.png
Normal file
BIN
static/banner/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
static/banner/3.png
Normal file
BIN
static/banner/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Reference in New Issue
Block a user