From c7ffd3bbb173bdedc0b8e1fecc217d2194af7f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Thu, 10 Jul 2025 18:20:46 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20=E5=88=B0=E5=AE=B6=E6=9C=8D?=
=?UTF-8?q?=E5=8A=A1=E9=A6=96=E9=A1=B5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/homeServer/index/index.css | 382 ++++++++++++++++++++++++++++
packages/homeServer/index/index.vue | 256 +++++++++++++++++--
pages.json | 5 +-
3 files changed, 614 insertions(+), 29 deletions(-)
diff --git a/packages/homeServer/index/index.css b/packages/homeServer/index/index.css
index e69de29b..b1b7a004 100644
--- a/packages/homeServer/index/index.css
+++ b/packages/homeServer/index/index.css
@@ -0,0 +1,382 @@
+.container {
+ margin-top: 87rpx;
+ padding: 0 15rpx;
+ background-color: whte;
+ min-height: 100vh;
+}
+
+/* 头部样式 */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20rpx 20rpx;
+ background-color: #fff;
+}
+
+.title {
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+}
+
+.header-right {
+ display: flex;
+ gap: 30rpx;
+}
+
+.icon {
+ width: 40rpx;
+ height: 40rpx;
+}
+
+/* 位置和搜索样式 */
+.location-search {
+ display: flex;
+ padding: 16rpx 30rpx;
+ background-color: #f5f7fb;
+ border-radius: 60rpx;
+ gap: 16rpx;
+ display: flex;
+ height: 35rpx;
+ margin-top: 15rpx;
+}
+
+.location {
+ display: flex;
+ align-items: center;
+ gap: 8rpx;
+ padding-right: 16rpx;
+ border-right: 2rpx solid #eee;
+}
+
+.location-text {
+ font-size: 26rpx;
+ color: #333;
+}
+
+.arrow-down {
+ width: 24rpx;
+ height: 24rpx;
+}
+
+.search-box {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 12rpx;
+ background-color: #f5f7fb;
+ border-radius: 60rpx;
+ padding: 14rpx 24rpx;
+}
+
+.search-icon {
+ width: 25rpx;
+ height: 25rpx;
+ margin-right: 5rpx;
+}
+
+.search-placeholder {
+ font-size: 26rpx;
+ color: #999;
+}
+
+/* 服务分类样式 */
+.service-category {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 20rpx;
+ padding: 20rpx;
+ background-color: #fff;
+ margin-bottom: 20rpx;
+}
+
+.category-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.category-icon {
+ width: 80rpx;
+ height: 80rpx;
+ margin-bottom: 12rpx;
+}
+
+.category-name {
+ font-size: 24rpx;
+ color: #333;
+}
+
+/* 公告样式 */
+.announcement {
+ display: flex;
+ align-items: center;
+ padding: 16rpx 20rpx;
+ background-color: #f4f4f4;
+ margin-bottom: 20rpx;
+ border-radius: 15rpx;
+}
+
+.announcement-title {
+ font-size: 28rpx;
+ font-weight: bold;
+ color: #FF512A;
+}
+
+.hrStyle{
+ margin: 0 15rpx;
+ color: #c5c5c5;
+}
+
+.announcement-content {
+ flex: 1;
+ font-size: 26rpx;
+ color: #666;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.arrow-right {
+ width: 28rpx;
+ height: 28rpx;
+}
+
+/* 广告横幅样式 */
+.banner-container {
+ padding: 0 20rpx 20rpx;
+}
+
+.banner-swiper {
+ border-radius: 16rpx;
+ overflow: hidden;
+}
+
+.banner-img {
+ width: 100%;
+}
+
+
+.serverList {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.serverItem {
+ border-radius: 30rpx;
+ width: 208rpx;
+ height: 114rpx;
+ box-sizing: border-box;
+ padding-top: 11rpx;
+ padding-left: 13rpx;
+ font-weight: 600;
+ font-size: 26rpx;
+ color: #222222;
+ position: relative;
+ margin-bottom: 12rpx;
+}
+.serverList_left {
+ display: block;
+ width: 260rpx;
+ height: 369rpx;
+ margin-right: 17rpx;
+
+}
+
+.serverList_left swiper{
+ height: 100%;
+}
+
+.serverList_right {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.serverItem1 {
+ background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%);
+ margin-right: 12rpx;
+}
+
+.serverItem2 {
+ background: #FFF4E5;
+}
+
+.serverItem1 image {
+ position: absolute;
+ right: 12rpx;
+ top: 14rpx;
+ width: 103rpx;
+ height: 100rpx;
+}
+
+.serverItem2 image {
+ position: absolute;
+ right: 6rpx;
+ top: 8rpx;
+ width: 108rpx;
+ height: 108rpx;
+}
+
+/* 立即联系样式 */
+.contact-section {
+ display: flex;
+ align-items: center;
+ gap: 20rpx;
+ padding: 24rpx;
+ background-color: #fcf4f0;
+ margin: 20rpx 0;
+ border-radius: 16rpx;
+}
+
+.contact-icon {
+ width: 60rpx;
+ height: 60rpx;
+}
+
+.contact-text {
+ flex: 1;
+}
+
+.contact-title {
+ font-size: 28rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 4rpx;
+}
+
+.contact-subtitle {
+ font-size: 24rpx;
+ color: #999;
+}
+
+/* */
+.interval{
+ width: 100vw;
+ height: 20rpx;
+ background-color: #f7f6fb;
+ margin-left: calc(-50vw + 50%);
+ margin-right: calc(-50vw + 50%);
+}
+
+/* 热门服务样式 */
+.hot-services {
+ padding: 20rpx;
+}
+
+.section-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20rpx;
+}
+
+.section-title {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #333;
+}
+
+.section-arrow {
+ width: 32rpx;
+ height: 32rpx;
+ margin-right: 10rpx;
+}
+
+.service-list {
+ display: flex;
+ flex-direction: column;
+ gap: 20rpx;
+}
+
+.service-card {
+ background-color: #fff;
+ border-radius: 16rpx;
+ overflow: hidden;
+}
+
+/* 服务信息样式 */
+.service-info {
+ display: flex;
+ align-items: flex-end;
+ width: 100%;
+ padding: 20rpx;
+}
+
+.service-info-left {
+ width: 60%;
+}
+
+.service-info-right {
+ width: 35%;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.service-footer {
+ align-items: center;
+ gap: 15rpx;
+}
+
+.service-image {
+ width: 100%;
+ height: 240rpx;
+}
+
+.service-badge {
+ position: absolute;
+ top: 20rpx;
+ left: 20rpx;
+ background-color: #FF512A;
+ color: #fff;
+ font-size: 24rpx;
+ padding: 4rpx 16rpx;
+ border-radius: 20rpx;
+}
+
+.service-name {
+ font-size: 30rpx;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 8rpx;
+}
+
+.service-tag {
+ display: inline-block;
+ /* background-color: #f5f5f5; */
+ color: #e1ca9b;
+ font-size: 22rpx;
+ padding: 2rpx 16rpx;
+ border-radius: 20rpx;
+ margin-bottom: 16rpx;
+}
+
+.service-desc {
+ font-size: 24rpx;
+ color: #666;
+ margin-bottom: 20rpx;
+ line-height: 1.5;
+}
+
+.service-footer {
+ /* display: flex;
+ justify-content: space-between;
+ align-items: center; */
+}
+
+.service-count {
+ font-size: 24rpx;
+ color: #999;
+ margin-left: 15rpx;
+}
+
+.service-button {
+ background-color: #FF512A;
+ color: #fff;
+ font-size: 26rpx;
+ padding: 12rpx 36rpx;
+ border-radius: 60rpx;
+}
\ No newline at end of file
diff --git a/packages/homeServer/index/index.vue b/packages/homeServer/index/index.vue
index dc343d9e..61d3920c 100644
--- a/packages/homeServer/index/index.vue
+++ b/packages/homeServer/index/index.vue
@@ -1,44 +1,244 @@
-
-
+
+
+
+
+
+
+
+ {{ currentLocation }}
+
+
+
+
+ 请输入您要找的服务
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+ 到家公告
+ |
+ 公告内容公告内容公告内容公告内容...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+ 立即联系
+
+ 未找到您需要的服务?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ service.name }}
+ {{ service.tag }}
+
+ {{ service.description }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/homeServer/index/index.css b/packages/homeServer/index/index.css
index e60cc3db..1af355ac 100644
--- a/packages/homeServer/index/index.css
+++ b/packages/homeServer/index/index.css
@@ -36,7 +36,6 @@
background-color: #f5f7fb;
border-radius: 60rpx;
gap: 16rpx;
- display: flex;
height: 35rpx;
margin-top: 15rpx;
}
@@ -117,13 +116,23 @@
border-radius: 15rpx;
}
+.announcement-flex {
+ display: flex;
+ align-items: center;
+}
+
.announcement-title {
font-size: 28rpx;
font-weight: bold;
color: #FF512A;
}
-.hrStyle{
+.announcement-img {
+ width: 25rpx;
+ height: 30rpx;
+}
+
+.hrStyle {
margin: 0 15rpx;
color: #c5c5c5;
}
@@ -156,68 +165,48 @@
width: 100%;
}
-
.serverList {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
}
.serverItem {
- border-radius: 30rpx;
- width: 208rpx;
- height: 114rpx;
- box-sizing: border-box;
- padding-top: 11rpx;
- padding-left: 13rpx;
- font-weight: 600;
- font-size: 26rpx;
- color: #222222;
- position: relative;
- margin-bottom: 12rpx;
+ border-radius: 30rpx;
+ box-sizing: border-box;
+ font-weight: 600;
+ font-size: 26rpx;
+ color: #222222;
+ position: relative;
+ margin-bottom: 12rpx;
}
+
.serverList_left {
- display: block;
- width: 260rpx;
- height: 369rpx;
- margin-right: 17rpx;
-
+ display: block;
+ width: 260rpx;
+ height: 350rpx;
+ margin-right: 17rpx;
+ border-radius: 30rpx;
}
-.serverList_left swiper{
- height: 100%;
+.serverList_left image {
+ height: 100%;
}
.serverList_right {
- flex: 1;
- display: flex;
- flex-wrap: wrap;
+ width: 445rpx;
+ height: 350rpx;
}
.serverItem1 {
- background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%);
- margin-right: 12rpx;
+ width: 440rpx;
+ height: 170rpx;
}
.serverItem2 {
- background: #FFF4E5;
-}
-
-.serverItem1 image {
- position: absolute;
- right: 12rpx;
- top: 14rpx;
- width: 103rpx;
- height: 100rpx;
-}
-
-.serverItem2 image {
- position: absolute;
- right: 6rpx;
- top: 8rpx;
- width: 108rpx;
- height: 108rpx;
+ width: 440rpx;
+ height: 170rpx;
}
/* 立即联系样式 */
@@ -232,8 +221,13 @@
}
.contact-icon {
- width: 60rpx;
- height: 60rpx;
+ width: 80rpx;
+ height: 80rpx;
+}
+
+.contact-icon2 {
+ width: 50rpx;
+ height: 50rpx;
}
.contact-text {
@@ -253,7 +247,7 @@
}
/* */
-.interval{
+.interval {
width: 100vw;
height: 20rpx;
background-color: #f7f6fb;
@@ -282,7 +276,7 @@
.section-arrow {
width: 32rpx;
- height: 32rpx;
+ height: 32rpx;
margin-right: 10rpx;
}
@@ -310,6 +304,11 @@
width: 60%;
}
+.service-info-left-top {
+ display: flex;
+ align-items: flex-end;
+}
+
.service-info-right {
width: 35%;
display: flex;
@@ -326,6 +325,11 @@
height: 240rpx;
}
+.service-image2 {
+ width: 35rpx;
+ height: 35rpx;
+}
+
.service-badge {
position: absolute;
top: 20rpx;
@@ -341,16 +345,17 @@
font-size: 30rpx;
font-weight: bold;
color: #333;
- margin-bottom: 8rpx;
+ margin-bottom: 4rpx;
+ margin-right: 15rpx;
}
.service-tag {
display: inline-block;
color: #e1ca9b;
font-size: 22rpx;
- padding: 2rpx 16rpx;
+ padding: 2rpx 0;
border-radius: 20rpx;
- margin-bottom: 16rpx;
+ margin-bottom: 4rpx;
}
.service-desc {
@@ -380,7 +385,7 @@
height: 100rpx;
position: fixed;
right: 33rpx;
- bottom: 250rpx;
+ bottom: 320rpx;
z-index: 10;
}
diff --git a/packages/homeServer/index/index.vue b/packages/homeServer/index/index.vue
index a3d60d2c..7910538c 100644
--- a/packages/homeServer/index/index.vue
+++ b/packages/homeServer/index/index.vue
@@ -36,22 +36,34 @@
- 到家公告
+
+ 到家
+ 公告
+
+
|
公告内容公告内容公告内容公告内容...
-
+
-
-
+
+
+
+
- {{ item.title }}
@@ -68,20 +79,29 @@
-
+
立即联系
未找到您需要的服务?
-
+
@@ -90,14 +110,20 @@
v-for="(service, index) in hotServiceList"
:key="index"
>
-
-
+
- {{ service.name }}
- {{ service.tag }}
+
+ {{ service.name }}
+
+ {{ service.tag }}
+
{{ service.description }}
@@ -127,9 +153,7 @@
max="99"
:value="value"
>
-
+
@@ -156,43 +180,59 @@ export default {
serviceCategories: [
{
name: "家电维修",
- icon: "",
+ icon: "http://localhost:8080/index_top1.png",
},
{
name: "数码维修",
- icon: "",
+ icon: "http://localhost:8080/index_top2.png",
},
{
name: "电器清洗",
- icon: "",
+ icon: "http://localhost:8080/index_top3.png",
},
{
name: "洗衣洗鞋",
- icon: "",
+ icon: "http://localhost:8080/index_top4.png",
},
{
name: "精细擦窗",
- icon: "",
+ icon: "http://localhost:8080/index_top5.png",
},
{
name: "整理收纳",
- icon: "",
+ icon: "http://localhost:8080/index_top6.png",
},
{
name: "家庭保姆",
- icon: "",
+ icon: "http://localhost:8080/index_top7.png",
},
{
name: "母婴服务",
- icon: "",
+ icon: "http://localhost:8080/index_top8.png",
},
{
name: "管道疏通",
- icon: "",
+ icon: "http://localhost:8080/index_top9.png",
},
{
name: "家庭保洁",
- icon: "",
+ icon: "http://localhost:8080/index_top10.png",
+ },
+ ],
+ homeLeftList: [
+ {
+ title: "",
+ pic_src: "http://localhost:8080/guanggao1.png",
+ },
+ ],
+ homeRightList: [
+ {
+ title: "",
+ pic_src: "http://localhost:8080/guanggao2.png",
+ },
+ {
+ title: "",
+ pic_src: "http://localhost:8080/guanggao3.png",
},
],
// 热门服务数据
@@ -200,7 +240,6 @@ export default {
{
id: 1,
name: "空调清洗",
- image: "",
badge: "推荐",
tag: "平台保障",
description: "专业保洁团队,全屋深度清洁,去除顽固污渍,还您清新居所",
@@ -225,16 +264,20 @@ export default {
// 导航到服务详情
navigateToService(item) {
uni.navigateTo({
- url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
- JSON.stringify(item)
- )}`,
+ url: "/packages/homeServer/classify/index",
});
+ // uni.navigateTo({
+ // url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
+ // JSON.stringify(item)
+ // )}`,
+ // });
},
// 导航到预约页面
navigateToReservation(service) {
- uni.navigateTo({
- url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
- });
+ // uni.navigateTo({
+ // url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
+ // });
+ NavgateTo("/packages/homeServer/searchInfo/index");
},
// 联系客服
contactService() {
@@ -255,6 +298,11 @@ export default {
duration: 300,
});
},
+
+ // 查看公告
+ lookNotice() {
+ NavgateTo("/packages/homeServer/noticeDetials/index");
+ },
},
onLoad() {
this.getCurrentLocation();
diff --git a/packages/homeServer/masterInfo/index.vue b/packages/homeServer/masterInfo/index.vue
index b1ad107e..592a5e0d 100644
--- a/packages/homeServer/masterInfo/index.vue
+++ b/packages/homeServer/masterInfo/index.vue
@@ -1,325 +1,410 @@
-
-
-
-
-
-
- 刘师傅
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+ 林师傅
+
+
+
+
+ 4.8
-
-
-
-
-
- 林师傅
-
-
-
-
- 4.8
-
-
- 价格范围: ¥500-¥800
-
-
-
-
-
-
-
-
+
+ 价格范围: ¥500-¥800
-
-
-
推荐师傅
-
-
-
-
-
-
林师傅
-
-
-
-
- 4.8
-
-
- 查看资料
-
-
-
-
-
-
- 52岁 广东梅州人 5-10年
-
-
-
- 500+预定100+评价
-
-
-
-
-
- 价格范围: ¥500-¥800
-
-
-
-
+
+
-
-
-
-
-
-
-
- 林师傅
-
-
-
-
- 4.8
-
-
- 价格范围: ¥500-¥800
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-