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

首页-公告设计

Browse Source
This commit is contained in:
minimaxagent1 2025-08-12 17:49:16 +08:00
parent 08159a01dd
commit 303cedc8e4
8 changed files with 81 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
enum/commonEnum.js
View File

@ -7,7 +7,7 @@ export const commonEnum = {
PERSONAL_CENTER:"https://api.ccttiot.com/image-1754986718771.png",
PERSONAL_CENTER_ACTIVE:"https://api.ccttiot.com/image-1754986763842.png",
LOCATION:'https://api.ccttiot.com/image-1754986786418.png',
ANNOUNCEMENT:"https://api.ccttiot.com/image-1754986879805.png",
ANNOUNCEMENT_ICON:"https://api.ccttiot.com/image-1754990087627.png",
TEMP1:"https://api.ccttiot.com/image-1754987048988.png",
TEMP2:"https://api.ccttiot.com/image-1754987114695.png",
TEMP3:"https://api.ccttiot.com/image-1754987141539.png"

82
pages/index/index.vue
View File

@ -1,5 +1,6 @@
<template>
<view class="home-container">
<!-- 头部信息 -->
<view class="header">
<view class="location-info">
@ -11,8 +12,11 @@
<!-- 公告栏 -->
<view class="announcement-bar">
<text class="speaker-icon">📢</text>
<text class="announcement-text">暂无更多公告! 暂无更多公告! 暂无更多公告!</text>
<image class="announcementIcon" :src="commonEnum.ANNOUNCEMENT_ICON"></image>
<view class="announcement-box">
<text class="announcement-text">暂无更多公告! 暂无更多公告! 暂无更多公告!</text>
</view>
</view>
<!-- 轮播图 -->
@ -174,33 +178,25 @@ export default {
</script>
<style lang="scss" scoped >
.home-container {
background-color: #f5f5f5;
background: linear-gradient(
to bottom,
#FFDDCA 0px,
#FFDDCA 450rpx,
#f5f5f5 450rpx,
#f5f5f5 100%
);
min-height: 100vh;
padding-bottom: 120rpx; /* 为底部导航留出空间 */
max-width: 750rpx;
margin: 0 auto;
}
/* 状态栏 */
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background-color: #f5f5f5;
font-size: 28rpx;
color: #333;
}
.status-icons {
display: flex;
gap: 10rpx;
z-index: -2;
}
/* 头部信息 */
.header {
background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
padding: 106rpx 30rpx 20rpx 30rpx;
display: flex;
justify-content: space-between;
@ -215,9 +211,7 @@ export default {
height: 31rpx;
}
.company-name {
color: #3D3D3D;
font-size: 16px;
font-weight: 500;
}
@ -230,32 +224,44 @@ export default {
/* 公告栏 */
.announcement-bar {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
background: white;
opacity: 0.5;
margin: 34rpx 19rpx 0 19rpx;
padding: 15rpx 30rpx;
display: flex;
align-items: center;
gap: 15rpx;
overflow: hidden;
.speaker-icon {
font-size: 24rpx;
color: #333;
height: 34rpx;
border-radius: 100rpx;
border: #4cd964 solid 1px;
.announcementIcon {
height: 32rpx;
width: 32rpx;
flex-shrink: 0;
}
.announcement-text {
font-size: 24rpx;
color: #333;
white-space: nowrap;
animation: scroll-text 20s linear infinite;
.announcement-box{
flex: 1;
overflow: hidden;
position: relative;
.announcement-text {
font-size: 13px;
opacity: 1;
color: black;
white-space: nowrap;
animation: scroll-text 10s linear infinite;
border: #4cd964 solid 1px;
display: inline-block;
padding-left: 100%;
}
@keyframes scroll-text {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
}
}
@keyframes scroll-text {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* 轮播图 */
.banner-section {
padding: 30rpx;

2
unpackage/dist/dev/.sourcemap/mp-weixin/enum/commonEnum.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"commonEnum.js","sources":["enum/commonEnum.js"],"sourcesContent":["export const commonEnum = {\r\n LOGIN_SRC:'https://api.ccttiot.com/image-1754981670820.png',\r\n HOME_ACTIVE:'https://api.ccttiot.com/image-1754981895711.png',\r\n HOME:'https://api.ccttiot.com/image-1754981938495.png',\r\n RENT:'https://api.ccttiot.com/image-1754981988082.png',\r\n RENT_ACTIVE:' https://api.ccttiot.com/image-1754986634575.png',\r\n PERSONAL_CENTER:\"https://api.ccttiot.com/image-1754986718771.png\",\r\n PERSONAL_CENTER_ACTIVE:\"https://api.ccttiot.com/image-1754986763842.png\",\r\n LOCATION:'https://api.ccttiot.com/image-1754986786418.png',\r\n ANNOUNCEMENT:\"https://api.ccttiot.com/image-1754986879805.png\",\r\n TEMP1:\"https://api.ccttiot.com/image-1754987048988.png\",\r\n TEMP2:\"https://api.ccttiot.com/image-1754987114695.png\",\r\n TEMP3:\"https://api.ccttiot.com/image-1754987141539.png\"\r\n};\r\nexport default commonEnum;"],"names":[],"mappings":";AAAY,MAAC,aAAa;AAAA,EACtB,WAAU;AAAA,EACV,aAAY;AAAA,EACZ,MAAK;AAAA,EACL,MAAK;AAAA,EACL,aAAY;AAAA,EACZ,iBAAgB;AAAA,EAChB,wBAAuB;AAAA,EACvB,UAAS;AAAA,EACT,cAAa;AAAA,EACb,OAAM;AAAA,EACN,OAAM;AAAA,EACN,OAAM;AACV;;"}
{"version":3,"file":"commonEnum.js","sources":["enum/commonEnum.js"],"sourcesContent":["export const commonEnum = {\r\n LOGIN_SRC:'https://api.ccttiot.com/image-1754981670820.png',\r\n HOME_ACTIVE:'https://api.ccttiot.com/image-1754981895711.png',\r\n HOME:'https://api.ccttiot.com/image-1754981938495.png',\r\n RENT:'https://api.ccttiot.com/image-1754981988082.png',\r\n RENT_ACTIVE:' https://api.ccttiot.com/image-1754986634575.png',\r\n PERSONAL_CENTER:\"https://api.ccttiot.com/image-1754986718771.png\",\r\n PERSONAL_CENTER_ACTIVE:\"https://api.ccttiot.com/image-1754986763842.png\",\r\n LOCATION:'https://api.ccttiot.com/image-1754986786418.png',\r\n ANNOUNCEMENT_ICON:\"https://api.ccttiot.com/image-1754990087627.png\",\r\n TEMP1:\"https://api.ccttiot.com/image-1754987048988.png\",\r\n TEMP2:\"https://api.ccttiot.com/image-1754987114695.png\",\r\n TEMP3:\"https://api.ccttiot.com/image-1754987141539.png\"\r\n};\r\nexport default commonEnum;"],"names":[],"mappings":";AAAY,MAAC,aAAa;AAAA,EACtB,WAAU;AAAA,EACV,aAAY;AAAA,EACZ,MAAK;AAAA,EACL,MAAK;AAAA,EACL,aAAY;AAAA,EACZ,iBAAgB;AAAA,EAChB,wBAAuB;AAAA,EACvB,UAAS;AAAA,EACT,mBAAkB;AAAA,EAClB,OAAM;AAAA,EACN,OAAM;AAAA,EACN,OAAM;AACV;;"}

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

2
unpackage/dist/dev/mp-weixin/enum/commonEnum.js vendored
View File

@ -8,7 +8,7 @@ const commonEnum = {
PERSONAL_CENTER: "https://api.ccttiot.com/image-1754986718771.png",
PERSONAL_CENTER_ACTIVE: "https://api.ccttiot.com/image-1754986763842.png",
LOCATION: "https://api.ccttiot.com/image-1754986786418.png",
ANNOUNCEMENT: "https://api.ccttiot.com/image-1754986879805.png",
ANNOUNCEMENT_ICON: "https://api.ccttiot.com/image-1754990087627.png",
TEMP1: "https://api.ccttiot.com/image-1754987048988.png",
TEMP2: "https://api.ccttiot.com/image-1754987114695.png",
TEMP3: "https://api.ccttiot.com/image-1754987141539.png"

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

@ -84,7 +84,8 @@ const _sfc_main = {
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: $data.commonEnum.LOCATION,
b: common_vendor.f($data.bannerList, (banner, index, i0) => {
b: $data.commonEnum.ANNOUNCEMENT_ICON,
c: common_vendor.f($data.bannerList, (banner, index, i0) => {
return {
a: common_vendor.t(banner.name),
b: common_vendor.t(banner.desc),
@ -94,14 +95,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
f: $data.currentBannerIndex === index
};
}),
c: common_vendor.f($data.bannerList, (banner, index, i0) => {
d: common_vendor.f($data.bannerList, (banner, index, i0) => {
return {
a: index,
b: $data.currentBannerIndex === index ? 1 : "",
c: common_vendor.o(($event) => $options.onDotClick(index), index)
};
}),
d: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
e: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
return {
a: equipment.image,
b: common_vendor.t(equipment.name),
@ -114,7 +115,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
i: common_vendor.o(($event) => $options.onEquipmentClick(equipment), equipment.id)
};
}),
e: common_vendor.f(["首页", "申请租赁", "个人中心"], (nav, index, i0) => {
f: common_vendor.f(["首页", "申请租赁", "个人中心"], (nav, index, i0) => {
return {
a: common_vendor.t(index === 0 ? "🏠" : index === 1 ? "➕" : "😊"),
b: common_vendor.t(nav),

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"><text class="speaker-icon data-v-1cf27b2a">📢</text><text class="announcement-text data-v-1cf27b2a">暂无更多公告! 暂无更多公告! 暂无更多公告!</text></view><view class="banner-section data-v-1cf27b2a"><view wx:for="{{b}}" 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="{{c}}" 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="{{d}}" 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="{{e}}" 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 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>

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

@ -24,32 +24,17 @@
/* 透明度 */
/* 文章场景相关 */
.home-container.data-v-1cf27b2a {
background-color: #f5f5f5;
background: linear-gradient(to bottom, #FFDDCA 0px, #FFDDCA 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
min-height: 100vh;
padding-bottom: 120rpx;
/* 为底部导航留出空间 */
max-width: 750rpx;
margin: 0 auto;
}
/* 状态栏 */
.status-bar.data-v-1cf27b2a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background-color: #f5f5f5;
font-size: 28rpx;
color: #333;
}
.status-icons.data-v-1cf27b2a {
display: flex;
gap: 10rpx;
z-index: -2;
}
/* 头部信息 */
.header.data-v-1cf27b2a {
background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
padding: 106rpx 30rpx 20rpx 30rpx;
display: flex;
justify-content: space-between;
@ -77,31 +62,47 @@
/* 公告栏 */
.announcement-bar.data-v-1cf27b2a {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
background: white;
opacity: 0.5;
margin: 34rpx 19rpx 0 19rpx;
padding: 15rpx 30rpx;
display: flex;
align-items: center;
gap: 15rpx;
overflow: hidden;
height: 34rpx;
border-radius: 100rpx;
border: #4cd964 solid 1px;
}
.announcement-bar .speaker-icon.data-v-1cf27b2a {
font-size: 24rpx;
color: #333;
.announcement-bar .announcementIcon.data-v-1cf27b2a {
height: 32rpx;
width: 32rpx;
flex-shrink: 0;
}
.announcement-bar .announcement-text.data-v-1cf27b2a {
font-size: 24rpx;
color: #333;
.announcement-bar .announcement-box.data-v-1cf27b2a {
flex: 1;
overflow: hidden;
position: relative;
}
.announcement-bar .announcement-box .announcement-text.data-v-1cf27b2a {
font-size: 13px;
opacity: 1;
color: black;
white-space: nowrap;
animation: scroll-text-1cf27b2a 20s linear infinite;
animation: scroll-text-1cf27b2a 10s linear infinite;
border: #4cd964 solid 1px;
display: inline-block;
padding-left: 100%;
}
@keyframes scroll-text-1cf27b2a {
0% {
transform: translateX(100%);
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 轮播图 */
.banner-section.data-v-1cf27b2a {
padding: 30rpx;