Parcourir la source

诚祥网站开发

tanxue il y a 1 semaine
Parent
commit
da2a765ab9

+ 28 - 22
assets/scss/cus-client/cus-client-common.scss

@@ -87,6 +87,10 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 .mr35 {margin-right: 35px;}
 .mr40 {margin-right: 40px;}
 
+/* 内边距*/
+.ptb20{padding: 20px 0;}
+.ptb30{padding: 30px 0;}
+
 /*文字对齐方式*/
 .tl{text-align:left;}
 .tr{text-align:right;}
@@ -253,6 +257,30 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
 }
 
+// 产品和服务
+.products-services-box{
+  width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 36px;
+  // 头部图片
+  img{float: unset;height: auto;}
+
+  // 内容区域
+  .products-services-content{
+    width: 410px;float: right;padding: 0;box-sizing: border-box;margin: 0 20px;flex-shrink: 0;
+    @include setFontStyle(-6);
+    h5{@include setFontStyle(4);color: #328971;margin-bottom: 10px;line-height: 1.6;}
+    i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
+    p{
+      font-size: 16px;font-weight: 500;color: #333333;
+      margin-bottom: 32px;text-align: justify;line-height: 1.8;}
+  }
+}
+.products-contrary-box{
+  // 头部图片
+  img{float: left;}
+  // 内容区域
+  .products-services-content{float: right;}
+}
+
 /* 网站分页 */
 .client-el-pagination{text-align: center;margin-top: 36px}
 
@@ -428,29 +456,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     img{max-width: 100%;display: block;vertical-align:unset;margin-bottom: 16px;}
   }
 }
-// 产品和服务
-.products-services-box{
-    width: 100%;display: inline-block;
-    // 头部图片
-    img{width: 620px;height: 485px;float: right;}
 
-    // 内容区域
-    .products-services-content{
-      width: 410px;float: right;padding: 0;box-sizing: border-box;margin: 0 20px;
-      @include setFontStyle(-6);
-      h5{@include setFontStyle(4);color: #328971;margin-bottom: 10px;line-height: 1.6;}
-      i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
-      p{
-        font-size: 16px;font-weight: 500;color: #333333;
-        margin-bottom: 32px;text-align: justify;line-height: 1.8;}
-    }
-}
-.products-contrary-box{
-  // 头部图片
-  img{float: left;}
-  // 内容区域
-  .products-services-content{float: right;}
-}
 // 考试平台和培训平台样式--多下边线
 .platform-products-services{
   li:not(:last-child){border-bottom:1px solid #eee; }

+ 28 - 8
assets/scss/cus-client/cus-client-page.scss

@@ -18,10 +18,7 @@
     }
 
     // img list
-    .products-services-box{
-      width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 36px;
-      img {float: unset;height: auto;}
-    }
+    .products-services-box img{width: 620px}
 
     /* 合作客户 */
     .client-customer-box{
@@ -81,9 +78,7 @@
 
   /********  describe: 产品与服务  author: TX  date:2026-01-04  ********/
   .client-cpyfw-page{
-    .cpty-box {
-      display: flex;flex-wrap: wrap;justify-content: space-between;margin: 32px 0 46px;
-    }
+    .cpty-box {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 32px 0 46px;cursor: pointer;}
 
     // 产品体验
     .cpty-card-box {
@@ -102,12 +97,37 @@
 
     // 功能强大的家政管理系统
     .jzgl-box{
-      width: 100%;height: 360px;background-position: center;
+      width: 100%;height: 360px;background-position: center;background-size: cover;background-repeat: no-repeat;
+      padding: 46px 0 36px;
       .jzgl-box-text{
         width: 1000px;margin: 0 auto;
         color: #333;font-size: 20px;line-height: 2;text-align: center;margin-top: 46px;
       }
     }
+
+    // img list
+    .cpyfw-products-services{
+      img{width: 580px}
+      .products-services-content h5{margin-bottom: 36px;}
+      }
+
+    // 家政人员
+    .cpyfw-jzry-box{
+      width: 100%;height: 560px;background-position: center;background-size: cover;background-repeat: no-repeat;
+      .jzry-content-box{position: relative;box-sizing: border-box;padding-top: 260px;}
+      .jzry-card{
+        width: 332px;box-sizing: border-box;
+        position: absolute;display: flex;align-items: center;background: #fff;border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.05);padding: 12px 16px;
+        img{width: 60px;margin-right: 16px;}
+        .card-title{font-size: 18px;margin-bottom: 6px;font-weight: bolder;}
+        .card-desc{font-size: 16px;}
+      }
+      .jzry-card:nth-child(1){left: 0}
+      .jzry-card:nth-child(2){top: 120px;left: 50%;transform: translateX(-50%);}
+      .jzry-card:nth-child(3){right: 0}
+      .jzry-img{width: 300px;margin: 0 auto;display: block;}
+    }
   }
 
   /********  describe: 培训平台--图片(和考试默认图片不同) author: TX  date:2020-08-14  ********/

+ 136 - 1
pages/cpyfw/index.vue

@@ -1,11 +1,146 @@
 <template>
-    <div>产品与服务</div>
+    <div class="client-cpyfw-page">
+      <div :style="{backgroundImage: 'url(' + bannerDefault + ')'}" class="client-banner-box"></div>
+      <!-- 产品体验 -->
+      <div class="client-container">
+        <h4 class="client-title">产品体验</h4>
+        <div class="cpty-box">
+          <!-- 家政公司 -->
+          <div class="cpty-card-box">
+            <img :src="tyImg1"/>
+            <h3 class="title">家政公司</h3>
+            <p class="desc">家政人员培训,全流程管理</p>
+          </div>
+
+          <!-- 家政人员 -->
+          <div class="cpty-card-box">
+            <img :src="tyImg2"/>
+            <h3 class="title">家政人员</h3>
+            <p class="desc">家政类课程学习,家政工作推荐</p>
+          </div>
+
+          <!-- 管理端 -->
+          <div class="cpty-card-box">
+            <img :src="tyImg3"/>
+            <h3 class="title">管理端</h3>
+            <p class="desc">灵活创建,数据化维护</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 功能强大的家政管理系统 -->
+      <div class="jzgl-box" :style="{backgroundImage: 'url(' + jzglBj + ')'}">
+        <h4 class="client-title">功能强大的家政管理系统</h4>
+        <div class="client-container">
+          <p class="jzgl-box-text">
+            《家政学》家政管理系统以“全流程数字化、服务标准化、管理智能化”为核心,通过四大端的协同联动,覆盖家政服务从“需求发起-人员匹配-服务执行-评价结算”的全链条,解决行业痛点。
+          </p>
+        </div>
+      </div>
+
+      <!-- img list -->
+      <div class="client-products-services cpyfw-products-services">
+        <div class="client-container">
+          <div class="products-services-box website-row-reverse ptb30">
+            <img :src="productsImg1" alt="多端协同,信息实时同步" />
+            <div class="products-services-content">
+              <h5>多端协同,信息实时同步</h5>
+              <p><b>订单无缝流转:</b>户主在"户主端"下单后,订单实时同步至"家政公司管理端",公司分配后,"用户端(家政人员)"立即收到接单通知,避免信息延迟导致的订单流失。</p>
+              <p><b>状态实时更新:</b>家政人员标记"服务中"后,户主端可查看实时服务进度;服务完成后,订单状态同步至管理后台,财务端可立即触发结算流程,实现"服务-结算"无缝衔接。</p>
+            </div>
+          </div>
+        </div>
+        <div class="client-container">
+          <div class="products-services-box ptb30">
+            <img :src="productsImg2" alt="全流程标准化,降低服务风险" />
+            <div class="products-services-content">
+              <h5>全流程标准化,降低服务风险</h5>
+              <p><b>人员标准化:</b>家政人员需完成身份认证、资质上传(如健康证、技能证书)、培训考核后才可接单,管理后台实时审核,确保人员合规。</p>
+              <p><b>服务标准化:</b>内置各服务类型的标准流程,家政人员可按流程执行,户主可对照标准验收,减少服务纠纷。</p>
+              <p><b>合同标准化:</b>户主端下单后自动生成电子合同,包含服务范围、费用、权责等核心条款,支持在线签署与存档,避免口头约定的法律风险。</p>
+            </div>
+          </div>
+        </div>
+        <div class="client-container ptb30">
+          <div class="products-services-box website-row-reverse">
+            <img :src="productsImg3" alt="智能化工具,提升效率与体验" />
+            <div class="products-services-content">
+              <h5>智能化工具,提升效率与体验</h5>
+              <p><b>智能匹配:</b>基于"户主需求+家政人员技能+服务区域"三重维度,系统完成人员匹配,相比人工筛选效率提升80%。</p>
+              <p><b>智能预警:</b>若订单长时间未接单、家政人员迟到,系统自动向家政公司发送预警,及时介入处理。</p>
+              <p><b>智能数据分析:</b>家政公司管理端可自动分析"高需求服务类型""客户流失原因""人员绩效短板",为运营优化提供数据支撑;管理后台可实时监控行业动态,辅助资源调配。</p>
+            </div>
+          </div>
+        </div>
+        <div class="client-container">
+          <div class="products-services-box ptb30">
+            <img :src="productsImg4" alt="安全可靠,保障各方权益" />
+            <div class="products-services-content">
+              <h5>安全可靠,保障各方权益</h5>
+              <p><b>数据安全:</b>采用云端加密存储技术,客户信息、订单数据、财务记录均经过多重加密,防止信息泄露;支持定期数据备份,避免数据丢失。</p>
+              <p><b>资金安全:</b>户主端支付的订单费用先由系统托管,服务完成且户主确认无误后,再结算至家政公司,保障户主资金安全;家政人员的收入明细可实时查询,结算记录永久存档,避免薪资纠纷。</p>
+              <p><b>服务安全:</b>对接家政人员背景调查接口(如身份核验、不良记录查询),从源头降低服务风险;户主可实时查看家政人员的位置轨迹(服务期间),增强安全感。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 家政人员-->
+      <div class="cpyfw-jzry-box" :style="{backgroundImage: 'url(' + jzBj + ')'}">
+        <div class="client-container jzry-content-box">
+            <div class="jzry-card">
+              <img :src="jzImg1"/>
+              <div>
+                <h3 class="card-title">家政人员</h3>
+                <p class="card-desc">家政类课程学习,家政工作推荐</p>
+              </div>
+            </div>
+
+            <div class="jzry-card">
+              <img :src="jzImg2"/>
+              <div>
+                <h3 class="card-title">家政公司</h3>
+                <p class="card-desc">降本、提效、拓客三管齐下</p>
+              </div>
+            </div>
+
+            <div class="jzry-card">
+              <img :src="jzImg3"/>
+              <div>
+                <h3 class="card-title">管理后台</h3>
+                <p class="card-desc">灵活创建,数据化维护</p>
+              </div>
+            </div>
+            <img :src="jzImg4" class="jzry-img">
+        </div>
+      </div>
+    </div>
 </template>
 
 <script>
     export default {
       name:       'gywm',
       layout:     'templateA',
+      data() {
+        return {
+          bannerDefault:   require(`~/static/images/website/banner/cx-banner-cp.png`),
+          // 产品体验
+          tyImg1:   require(`~/static/images/website/product/cpty-icon1.png`),
+          tyImg2:   require(`~/static/images/website/product/cpty-icon2.png`),
+          tyImg3:   require(`~/static/images/website/product/cpty-icon3.png`),
+          jzglBj:   require(`~/static/images/website/product/row-bj1.png`),
+          // img list
+          productsImg1:   require(`~/static/images/website/product/cp-img1.png`),
+          productsImg2:   require(`~/static/images/website/product/cp-img2.png`),
+          productsImg3:   require(`~/static/images/website/product/cp-img3.png`),
+          productsImg4:   require(`~/static/images/website/product/cp-img4.png`),
+          // 家政人员
+          jzImg1:   require(`~/static/images/website/product/cp-icon1.png`),
+          jzImg2:   require(`~/static/images/website/product/cp-icon2.png`),
+          jzImg3:   require(`~/static/images/website/product/cp-icon3.png`),
+          jzBj:   require(`~/static/images/website/product/row-bj2.png`),
+          jzImg4:   require(`~/static/images/website/product/cp-img5.png`),
+        }}
     };
 </script>