175 lines
3.8 KiB
Vue
175 lines
3.8 KiB
Vue
<template>
|
|
<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 style="margin-top: 20rpx;">
|
|
<u-button @click="openShop" type="primary" style="width: 200rpx;">商城</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<Tabbar id="tabbarId"></Tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<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' },
|
|
]
|
|
|
|
const openShop = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/mall/mall'
|
|
})
|
|
}
|
|
|
|
onUniReady(() => {
|
|
loadHeight()
|
|
})
|
|
</script>
|
|
|
|
<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> |