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

首页header设计

Browse Source
This commit is contained in:
minimaxagent1 2025-08-12 16:39:15 +08:00
parent bea633cea7
commit 08159a01dd
8 changed files with 110 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
enum/commonEnum.js
View File

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

90
pages/index/index.vue
View File

@ -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%);
padding: 20rpx 30rpx;
background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
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 {
display: flex;
align-items: center;
gap: 10rpx;
flex: 1;
}
color: #3D3D3D;
.company-name {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.arrow {
font-size: 24rpx;
color: #666;
}
.header-actions {
display: flex;
gap: 20rpx;
}
.action-icon {
font-size: 32rpx;
color: #333;
font-size: 16px;
font-weight: 500;
}
.arrow {
font-size: 24rpx;
color: #666;
}
}
}
/* 公告栏 */
@ -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%); }

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

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

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

@ -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"
// https://api.ccttiot.com/image-1754981988082.png'
HOME: "https://api.ccttiot.com/image-1754981938495.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

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

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

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

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

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

@ -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%);
padding: 20rpx 30rpx;
background: linear-gradient(135deg, #FFDDCA 0%, #FFDDCA 100%);
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 {
font-size: 28rpx;
color: #333;
.header .location-info .location.data-v-1cf27b2a {
width: 27rpx;
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;
}
}