首页header设计

enum/commonEnum.js

@@ -2,7 +2,14 @@ export const commonEnum = {
     LOGIN_SRC:'https://api.ccttiot.com/image-1754981670820.png',
     HOME_ACTIVE:'https://api.ccttiot.com/image-1754981895711.png',
     HOME:'https://api.ccttiot.com/image-1754981938495.png',
-    // https://api.ccttiot.com/image-1754981988082.png'
+    RENT:'https://api.ccttiot.com/image-1754981988082.png',
-
+    RENT_ACTIVE:'  https://api.ccttiot.com/image-1754986634575.png',
+    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",
+    TEMP1:"https://api.ccttiot.com/image-1754987048988.png",
+    TEMP2:"https://api.ccttiot.com/image-1754987114695.png",
+    TEMP3:"https://api.ccttiot.com/image-1754987141539.png"
 };
 export default commonEnum;

pages/index/index.vue

@@ -1,26 +1,12 @@
 <template>
   <view class="home-container">
-    <!-- 状态栏 -->
-    <view class="status-bar">
-      <text class="time">9:41</text>
-      <view class="status-icons">
-        <text class="signal">📶</text>
-        <text class="wifi">📶</text>
-        <text class="battery">🔋</text>
-      </view>
-    </view>
-
     <!-- 头部信息 -->
     <view class="header">
       <view class="location-info">
-        <text class="location-icon">📍</text>
+        <image class="location" :src="commonEnum.LOCATION"></image>
         <text class="company-name">福鼎创特物联科技有限公司</text>
         <text class="arrow">></text>
       </view>
-      <view class="header-actions">
-        <text class="action-icon">⋯</text>
-        <text class="action-icon">🎯</text>
-      </view>
     </view>
 
     <!-- 公告栏 -->
@@ -99,9 +85,11 @@
 </template>
 
 <script>
+import commonEnum from "../../enum/commonEnum";
 export default {
   data() {
     return {
+      commonEnum : commonEnum,
       title: '设备租赁',
       currentBannerIndex: 0,
       bannerList: [
@@ -185,7 +173,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped >
 .home-container {
   background-color: #f5f5f5;
   min-height: 100vh;
@@ -212,39 +200,32 @@ export default {
 
 /* 头部信息 */
 .header {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
-  padding: 20rpx 30rpx;
+  padding: 106rpx 30rpx 20rpx 30rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
+  .location-info {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    flex: 1;
+    .location{
+      width: 27rpx;
+      height: 31rpx;
+    }
+    .company-name {
 
-.location-info {
+      color: #3D3D3D;
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-  flex: 1;
-}
 
-.company-name {
+      font-size: 16px;
-  font-size: 28rpx;
+      font-weight: 500;
-  color: #333;
+    }
-  font-weight: 500;
+    .arrow {
-}
+      font-size: 24rpx;
-
+      color: #666;
-.arrow {
+    }
-  font-size: 24rpx;
+  }
-  color: #666;
-}
-
-.header-actions {
-  display: flex;
-  gap: 20rpx;
-}
-
-.action-icon {
-  font-size: 32rpx;
-  color: #333;
 }
 
 /* 公告栏 */
@@ -255,19 +236,20 @@ export default {
   align-items: center;
   gap: 15rpx;
   overflow: hidden;
+  .speaker-icon {
+    font-size: 24rpx;
+    color: #333;
+  }
+
+  .announcement-text {
+    font-size: 24rpx;
+    color: #333;
+    white-space: nowrap;
+    animation: scroll-text 20s linear infinite;
+  }
 }
 
-.speaker-icon {
-  font-size: 24rpx;
-  color: #333;
-}
 
-.announcement-text {
-  font-size: 24rpx;
-  color: #333;
-  white-space: nowrap;
-  animation: scroll-text 20s linear infinite;
-}
 
 @keyframes scroll-text {
   0% { transform: translateX(100%); }

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    // https://api.ccttiot.com/image-1754981988082.png'\r\n\r\n};\r\nexport default commonEnum;"],"names":[],"mappings":";AAAY,MAAC,aAAa;AAAA,EACtB,WAAU;AAAA,EACV,aAAY;AAAA,EACZ,MAAK;AAAA;AAGT;;"}
+{"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;;"}

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

@@ -2,8 +2,16 @@
 const commonEnum = {
   LOGIN_SRC: "https://api.ccttiot.com/image-1754981670820.png",
   HOME_ACTIVE: "https://api.ccttiot.com/image-1754981895711.png",
-  HOME: "https://api.ccttiot.com/image-1754981938495.png"
+  HOME: "https://api.ccttiot.com/image-1754981938495.png",
-  // https://api.ccttiot.com/image-1754981988082.png'
+  RENT: "https://api.ccttiot.com/image-1754981988082.png",
+  RENT_ACTIVE: "  https://api.ccttiot.com/image-1754986634575.png",
+  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",
+  TEMP1: "https://api.ccttiot.com/image-1754987048988.png",
+  TEMP2: "https://api.ccttiot.com/image-1754987114695.png",
+  TEMP3: "https://api.ccttiot.com/image-1754987141539.png"
 };
 exports.commonEnum = commonEnum;
 //# sourceMappingURL=../../.sourcemap/mp-weixin/enum/commonEnum.js.map

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

@@ -1,8 +1,10 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
+const enum_commonEnum = require("../../enum/commonEnum.js");
 const _sfc_main = {
   data() {
     return {
+      commonEnum: enum_commonEnum.commonEnum,
       title: "设备租赁",
       currentBannerIndex: 0,
       bannerList: [
@@ -81,7 +83,8 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return {
-    a: common_vendor.f($data.bannerList, (banner, index, i0) => {
+    a: $data.commonEnum.LOCATION,
+    b: common_vendor.f($data.bannerList, (banner, index, i0) => {
       return {
         a: common_vendor.t(banner.name),
         b: common_vendor.t(banner.desc),
@@ -91,14 +94,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         f: $data.currentBannerIndex === index
       };
     }),
-    b: common_vendor.f($data.bannerList, (banner, index, i0) => {
+    c: 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)
       };
     }),
-    c: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
+    d: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
       return {
         a: equipment.image,
         b: common_vendor.t(equipment.name),
@@ -111,7 +114,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         i: common_vendor.o(($event) => $options.onEquipmentClick(equipment), equipment.id)
       };
     }),
-    d: common_vendor.f(["首页", "申请租赁", "个人中心"], (nav, index, i0) => {
+    e: 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="status-bar data-v-1cf27b2a"><text class="time data-v-1cf27b2a">9:41</text><view class="status-icons data-v-1cf27b2a"><text class="signal data-v-1cf27b2a">📶</text><text class="wifi data-v-1cf27b2a">📶</text><text class="battery data-v-1cf27b2a">🔋</text></view></view><view class="header data-v-1cf27b2a"><view class="location-info data-v-1cf27b2a"><text class="location-icon data-v-1cf27b2a">📍</text><text class="company-name data-v-1cf27b2a">福鼎创特物联科技有限公司</text><text class="arrow data-v-1cf27b2a">></text></view><view class="header-actions data-v-1cf27b2a"><text class="action-icon data-v-1cf27b2a">⋯</text><text class="action-icon 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="{{a}}" 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="{{b}}" 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="{{c}}" 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="{{d}}" 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"><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>

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

@@ -1,8 +1,33 @@
-
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
 .home-container.data-v-1cf27b2a {
   background-color: #f5f5f5;
   min-height: 100vh;
-  padding-bottom: 120rpx; /* 为底部导航留出空间 */
+  padding-bottom: 120rpx;
+  /* 为底部导航留出空间 */
   max-width: 750rpx;
   margin: 0 auto;
 }
@@ -24,35 +49,31 @@
 
 /* 头部信息 */
 .header.data-v-1cf27b2a {
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
-  padding: 20rpx 30rpx;
+  padding: 106rpx 30rpx 20rpx 30rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.location-info.data-v-1cf27b2a {
+.header .location-info.data-v-1cf27b2a {
   display: flex;
   align-items: center;
   gap: 10rpx;
   flex: 1;
 }
-.company-name.data-v-1cf27b2a {
+.header .location-info .location.data-v-1cf27b2a {
-  font-size: 28rpx;
+  width: 27rpx;
-  color: #333;
+  height: 31rpx;
+}
+.header .location-info .company-name.data-v-1cf27b2a {
+  color: #3D3D3D;
+  font-size: 16px;
   font-weight: 500;
 }
-.arrow.data-v-1cf27b2a {
+.header .location-info .arrow.data-v-1cf27b2a {
   font-size: 24rpx;
   color: #666;
 }
-.header-actions.data-v-1cf27b2a {
-  display: flex;
-  gap: 20rpx;
-}
-.action-icon.data-v-1cf27b2a {
-  font-size: 32rpx;
-  color: #333;
-}
 
 /* 公告栏 */
 .announcement-bar.data-v-1cf27b2a {
@@ -63,23 +84,24 @@
   gap: 15rpx;
   overflow: hidden;
 }
-.speaker-icon.data-v-1cf27b2a {
+.announcement-bar .speaker-icon.data-v-1cf27b2a {
   font-size: 24rpx;
   color: #333;
 }
-.announcement-text.data-v-1cf27b2a {
+.announcement-bar .announcement-text.data-v-1cf27b2a {
   font-size: 24rpx;
   color: #333;
   white-space: nowrap;
   animation: scroll-text-1cf27b2a 20s linear infinite;
 }
 @keyframes scroll-text-1cf27b2a {
-0% { transform: translateX(100%);
+0% {
+    transform: translateX(100%);
 }
-100% { transform: translateX(-100%);
+100% {
+    transform: translateX(-100%);
 }
 }
-
 /* 轮播图 */
 .banner-section.data-v-1cf27b2a {
   padding: 30rpx;
@@ -272,4 +294,4 @@
 .nav-item.active .nav-icon.data-v-1cf27b2a,
 .nav-item.active .nav-text.data-v-1cf27b2a {
   color: #ff9a9e;
-}
+}