技术栈:mysql+uinapp+php
banner.vue:
<template>
<view>
<swiper class="home-swiper-banner" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
<swiper-item v-for="(item,index) in banners" :key="index">
<navigator :url="item.link">
<image :src="item.src" mode="aspectFill" style="border-radius: 16rpx"></image>
</navigator>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default{
props: ['banners'],
data(){
return {
banners1:[],
}
},
}
</script>
<style>
.home-swiper-banner{
height: 250rpx;
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 10rpx;
overflow: hidden;
}
.home-swiper-banner image{
width: 100%;
height: 250rpx;
}
</style>
<template>
<view class="home-header" style="background-color: #f75444">
<view class="pd24_20">
<view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
<view class="flex alcenter">
<view class="member-face">
<image class="face" :src="statics.defaultFace"></image>
</view>
<view class="ml15">
<view class="ft16 cl-main">暂未登录</view>
<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
</view>
</view>
<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
</view>
<view v-else class="flex alcenter space">
<view class="flex alcenter" @click="opsets">
<view class="member-face">
<image class="face" :src="avatar"></image>
<image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
</view>
<view class="ml15">
<view class="ft16 cl-main">{{ userinfo.nickname || '' }}</view>
<view class="mt12 ft12 cl-notice">ID:{{ userinfo.user_id || '' }}</view>
</view>
</view>
<view class="btn-mini opsetads" @click="opset">
<image mode="aspectFit" style="width: 100%; height: 100%;" :src="staticUrl + 'sz.png?v=1'">
</view>
</view>
<view style="width: 100%; height: 30upx;"></view>
<home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard>
<view class="mt24">
<home-banner :banners="banners"></home-banner>
</view>
<view class="flex wrap space mt16">
<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter" style="width: 320rpx;" >
<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
</view>
<view v-else style="width: 320rpx;">
<button class="box pd16_15 flex alcenter" :open-type="item.type" style="padding: 32rpx 30rpx; margin: 0;">
<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
</button>
</view>
</view>
</view>
标签:app,uinapp,250rpx,height,userinfo,home,h5,banner From: https://blog.csdn.net/2301_76244095/article/details/139373451