WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页-轮播图1.0

Browse Source
This commit is contained in:
minimaxagent1 2025-08-12 18:00:36 +08:00
parent 303cedc8e4
commit d4d9af4489
5 changed files with 127 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pages/index/index.vue
View File

@ -21,7 +21,14 @@
<!-- 轮播图 -->
<view class="banner-section">
<view class="banner-card" v-for="(banner, index) in bannerList" :key="banner.id" v-show="currentBannerIndex === index">
<view class="banner-container">
<view
class="banner-card"
v-for="(banner, index) in bannerList"
:key="banner.id"
:class="{ active: currentBannerIndex === index }"
@click="onBannerClick(index)"
>
<view class="banner-left">
<view class="product-info">
<text class="flame-icon">🔥</text>
@ -34,6 +41,7 @@
<text class="product-features">{{banner.features}}</text>
</view>
</view>
</view>
<!-- 轮播指示器 -->
<view class="banner-dots">
<view
@ -110,6 +118,27 @@ export default {
desc: '高效节能设备',
features: '新一代节能燃烧器，热效率提升30%，节能环保，安全可靠。',
image: '/static/burner.svg'
},
{
id: 3,
name: '商用炉具',
desc: '专业厨房设备',
features: '专业商用炉具，采用不锈钢材质，耐高温，易清洁，适合大型餐饮场所使用。',
image: '/static/stove.svg'
},
{
id: 4,
name: '燃气灶具',
desc: '高效燃气设备',
features: '高效燃气灶具，燃烧充分，热效率高，节能环保，安全可靠。',
image: '/static/burner.svg'
},
{
id: 5,
name: '厨房设备',
desc: '一体化解决方案',
features: '提供完整的厨房设备解决方案，从设计到安装，一站式服务。',
image: '/static/stove.svg'
}
],
equipmentList: [
@ -149,6 +178,11 @@ export default {
this.currentBannerIndex = index;
},
// 点击轮播图
onBannerClick(index) {
this.currentBannerIndex = index;
},
// 去续费
onRenew(equipment) {
uni.showToast({
@ -267,13 +301,34 @@ export default {
padding: 30rpx;
}
.banner-container {
position: relative;
height: 400rpx;
overflow: hidden;
border-radius: 20rpx;
}
.banner-card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
display: flex;
gap: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
opacity: 0;
transform: scale(0.8);
transition: all 0.5s ease;
cursor: pointer;
}
.banner-card.active {
opacity: 1;
transform: scale(1);
}
.banner-left {
@ -325,19 +380,22 @@ export default {
.banner-dots {
display: flex;
justify-content: center;
gap: 10rpx;
margin-top: 20rpx;
gap: 15rpx;
margin-top: 30rpx;
}
.dot {
width: 16rpx;
height: 16rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #ddd;
transition: all 0.3s ease;
cursor: pointer;
}
.dot.active {
background-color: #ff9a9e;
transform: scale(1.2);
}
/* 设备列表 */

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

28
unpackage/dist/dev/mp-weixin/pages/index/index.js vendored
View File

@ -21,6 +21,27 @@ const _sfc_main = {
desc: "高效节能设备",
features: "新一代节能燃烧器，热效率提升30%，节能环保，安全可靠。",
image: "/static/burner.svg"
},
{
id: 3,
name: "商用炉具",
desc: "专业厨房设备",
features: "专业商用炉具，采用不锈钢材质，耐高温，易清洁，适合大型餐饮场所使用。",
image: "/static/stove.svg"
},
{
id: 4,
name: "燃气灶具",
desc: "高效燃气设备",
features: "高效燃气灶具，燃烧充分，热效率高，节能环保，安全可靠。",
image: "/static/burner.svg"
},
{
id: 5,
name: "厨房设备",
desc: "一体化解决方案",
features: "提供完整的厨房设备解决方案，从设计到安装，一站式服务。",
image: "/static/stove.svg"
}
],
equipmentList: [
@ -57,6 +78,10 @@ const _sfc_main = {
onDotClick(index) {
this.currentBannerIndex = index;
},
// 点击轮播图
onBannerClick(index) {
this.currentBannerIndex = index;
},
// 去续费
onRenew(equipment) {
common_vendor.index.showToast({
@ -92,7 +117,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
c: banner.image,
d: common_vendor.t(banner.features),
e: banner.id,
f: $data.currentBannerIndex === index
f: $data.currentBannerIndex === index ? 1 : "",
g: common_vendor.o(($event) => $options.onBannerClick(index), banner.id)
};
}),
d: common_vendor.f($data.bannerList, (banner, index, i0) => {

2
unpackage/dist/dev/mp-weixin/pages/index/index.wxml vendored
View File

@ -1 +1 @@
<view class="home-container data-v-1cf27b2a"><view class="header data-v-1cf27b2a"><view class="location-info data-v-1cf27b2a"><image class="location data-v-1cf27b2a" src="{{a}}"></image><text class="company-name data-v-1cf27b2a">福鼎创特物联科技有限公司</text><text class="arrow data-v-1cf27b2a">></text></view></view><view class="announcement-bar data-v-1cf27b2a"><image class="announcementIcon data-v-1cf27b2a" src="{{b}}"></image><view class="announcement-box data-v-1cf27b2a"><text class="announcement-text data-v-1cf27b2a">暂无更多公告! 暂无更多公告! 暂无更多公告!</text></view></view><view class="banner-section data-v-1cf27b2a"><view wx:for="{{c}}" wx:for-item="banner" wx:key="e" class="banner-card data-v-1cf27b2a" hidden="{{!banner.f}}"><view class="banner-left data-v-1cf27b2a"><view class="product-info data-v-1cf27b2a"><text class="flame-icon data-v-1cf27b2a">🔥</text><text class="product-name data-v-1cf27b2a">{{banner.a}}</text><text class="product-desc data-v-1cf27b2a">{{banner.b}}</text></view><image class="product-image data-v-1cf27b2a" src="{{banner.c}}" mode="aspectFit"></image></view><view class="banner-right data-v-1cf27b2a"><text class="product-features data-v-1cf27b2a">{{banner.d}}</text></view></view><view class="banner-dots data-v-1cf27b2a"><view wx:for="{{d}}" wx:for-item="banner" wx:key="a" class="{{['dot', 'data-v-1cf27b2a', banner.b && 'active']}}" bindtap="{{banner.c}}"></view></view></view><view class="equipment-section data-v-1cf27b2a"><view class="section-title data-v-1cf27b2a">我的租赁设备</view><view class="equipment-list data-v-1cf27b2a"><view wx:for="{{e}}" wx:for-item="equipment" wx:key="h" class="equipment-item data-v-1cf27b2a" bindtap="{{equipment.i}}"><image class="equipment-image data-v-1cf27b2a" src="{{equipment.a}}" mode="aspectFit"></image><view class="equipment-info data-v-1cf27b2a"><view class="equipment-header data-v-1cf27b2a"><text class="equipment-name data-v-1cf27b2a">{{equipment.b}}</text><text class="{{['status-badge', 'data-v-1cf27b2a', equipment.d]}}">{{equipment.c}}</text></view><view class="equipment-details data-v-1cf27b2a"><text class="detail-item data-v-1cf27b2a">租赁时间: {{equipment.e}}</text><text class="detail-item data-v-1cf27b2a">到期时间: {{equipment.f}}</text></view><button class="renew-btn data-v-1cf27b2a" catchtap="{{equipment.g}}">去续费</button></view></view></view></view><view class="bottom-nav data-v-1cf27b2a"><view wx:for="{{f}}" wx:for-item="nav" wx:key="c" class="{{['nav-item', 'data-v-1cf27b2a', nav.d && 'active']}}" bindtap="{{nav.e}}"><text class="nav-icon data-v-1cf27b2a">{{nav.a}}</text><text class="nav-text data-v-1cf27b2a">{{nav.b}}</text></view></view></view>
<view class="home-container data-v-1cf27b2a"><view class="header data-v-1cf27b2a"><view class="location-info data-v-1cf27b2a"><image class="location data-v-1cf27b2a" src="{{a}}"></image><text class="company-name data-v-1cf27b2a">福鼎创特物联科技有限公司</text><text class="arrow data-v-1cf27b2a">></text></view></view><view class="announcement-bar data-v-1cf27b2a"><image class="announcementIcon data-v-1cf27b2a" src="{{b}}"></image><view class="announcement-box data-v-1cf27b2a"><text class="announcement-text data-v-1cf27b2a">暂无更多公告! 暂无更多公告! 暂无更多公告!</text></view></view><view class="banner-section data-v-1cf27b2a"><view class="banner-container data-v-1cf27b2a"><view wx:for="{{c}}" wx:for-item="banner" wx:key="e" class="{{['banner-card', 'data-v-1cf27b2a', banner.f && 'active']}}" bindtap="{{banner.g}}"><view class="banner-left data-v-1cf27b2a"><view class="product-info data-v-1cf27b2a"><text class="flame-icon data-v-1cf27b2a">🔥</text><text class="product-name data-v-1cf27b2a">{{banner.a}}</text><text class="product-desc data-v-1cf27b2a">{{banner.b}}</text></view><image class="product-image data-v-1cf27b2a" src="{{banner.c}}" mode="aspectFit"></image></view><view class="banner-right data-v-1cf27b2a"><text class="product-features data-v-1cf27b2a">{{banner.d}}</text></view></view></view><view class="banner-dots data-v-1cf27b2a"><view wx:for="{{d}}" wx:for-item="banner" wx:key="a" class="{{['dot', 'data-v-1cf27b2a', banner.b && 'active']}}" bindtap="{{banner.c}}"></view></view></view><view class="equipment-section data-v-1cf27b2a"><view class="section-title data-v-1cf27b2a">我的租赁设备</view><view class="equipment-list data-v-1cf27b2a"><view wx:for="{{e}}" wx:for-item="equipment" wx:key="h" class="equipment-item data-v-1cf27b2a" bindtap="{{equipment.i}}"><image class="equipment-image data-v-1cf27b2a" src="{{equipment.a}}" mode="aspectFit"></image><view class="equipment-info data-v-1cf27b2a"><view class="equipment-header data-v-1cf27b2a"><text class="equipment-name data-v-1cf27b2a">{{equipment.b}}</text><text class="{{['status-badge', 'data-v-1cf27b2a', equipment.d]}}">{{equipment.c}}</text></view><view class="equipment-details data-v-1cf27b2a"><text class="detail-item data-v-1cf27b2a">租赁时间: {{equipment.e}}</text><text class="detail-item data-v-1cf27b2a">到期时间: {{equipment.f}}</text></view><button class="renew-btn data-v-1cf27b2a" catchtap="{{equipment.g}}">去续费</button></view></view></view></view><view class="bottom-nav data-v-1cf27b2a"><view wx:for="{{f}}" wx:for-item="nav" wx:key="c" class="{{['nav-item', 'data-v-1cf27b2a', nav.d && 'active']}}" bindtap="{{nav.e}}"><text class="nav-icon data-v-1cf27b2a">{{nav.a}}</text><text class="nav-text data-v-1cf27b2a">{{nav.b}}</text></view></view></view>

30
unpackage/dist/dev/mp-weixin/pages/index/index.wxss vendored
View File

@ -107,13 +107,32 @@
.banner-section.data-v-1cf27b2a {
padding: 30rpx;
}
.banner-container.data-v-1cf27b2a {
position: relative;
height: 400rpx;
overflow: hidden;
border-radius: 20rpx;
}
.banner-card.data-v-1cf27b2a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
display: flex;
gap: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
opacity: 0;
transform: scale(0.8);
transition: all 0.5s ease;
cursor: pointer;
}
.banner-card.active.data-v-1cf27b2a {
opacity: 1;
transform: scale(1);
}
.banner-left.data-v-1cf27b2a {
display: flex;
@ -156,17 +175,20 @@
.banner-dots.data-v-1cf27b2a {
display: flex;
justify-content: center;
gap: 10rpx;
margin-top: 20rpx;
gap: 15rpx;
margin-top: 30rpx;
}
.dot.data-v-1cf27b2a {
width: 16rpx;
height: 16rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #ddd;
transition: all 0.3s ease;
cursor: pointer;
}
.dot.active.data-v-1cf27b2a {
background-color: #ff9a9e;
transform: scale(1.2);
}
/* 设备列表 */