首页-公告设计

enum/commonEnum.js

@@ -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"

pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="home-container">
+
     <!-- 头部信息 -->
     <view class="header">
       <view class="location-info">
@@ -11,10 +12,13 @@
 
     <!-- 公告栏 -->
     <view class="announcement-bar">
-      <text class="speaker-icon">📢</text>
+      <image class="announcementIcon" :src="commonEnum.ANNOUNCEMENT_ICON"></image>
+      <view class="announcement-box">
         <text class="announcement-text">暂无更多公告! 暂无更多公告! 暂无更多公告!</text>
       </view>
 
+    </view>
+
     <!-- 轮播图 -->
     <view class="banner-section">
       <view class="banner-card" v-for="(banner, index) in bannerList" :key="banner.id" v-show="currentBannerIndex === index">
@@ -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;
-}
+  z-index: -2;
-
-/* 状态栏 */
-.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;
 }
 
 /* 头部信息 */
 .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 {
+  height: 34rpx;
-    font-size: 24rpx;
+  border-radius: 100rpx;
-    color: #333;
+  border: #4cd964 solid 1px;
+  .announcementIcon {
+    height: 32rpx;
+    width: 32rpx;
+    flex-shrink: 0;
   }
-
+  .announcement-box{
+    flex: 1;
+    overflow: hidden;
+    position: relative;
     .announcement-text {
-    font-size: 24rpx;
+      font-size: 13px;
-    color: #333;
+      opacity: 1;
+      color: black;
       white-space: nowrap;
-    animation: scroll-text 20s linear infinite;
+      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;

unpackage/dist/dev/.sourcemap/mp-weixin/enum/commonEnum.js.map

@@ -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;;"}

unpackage/dist/dev/mp-weixin/enum/commonEnum.js

@@ -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"

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -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),

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -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>

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -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;
-}
+  z-index: -2;
-
-/* 状态栏 */
-.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;
 }
 
 /* 头部信息 */
 .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 {
+.announcement-bar .announcementIcon.data-v-1cf27b2a {
-  font-size: 24rpx;
+  height: 32rpx;
-  color: #333;
+  width: 32rpx;
+  flex-shrink: 0;
 }
-.announcement-bar .announcement-text.data-v-1cf27b2a {
+.announcement-bar .announcement-box.data-v-1cf27b2a {
-  font-size: 24rpx;
+  flex: 1;
-  color: #333;
+  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;