From 050b59b649d3eab515cb41bab75f92428f234fe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=9D=E5=BF=83?= <13773726377@163.com>
Date: Wed, 10 Dec 2025 15:03:29 +0800
Subject: [PATCH] 1

---
 src/components/Footer.vue        |  238 ++++-
 src/components/GoTop.vue         |   12 +-
 src/components/Header.vue        |  143 ++-
 src/main.js                      |    4 +-
 src/router/index.js              |   86 +-
 src/view/CompanyIntroduction.vue |  668 +++++++++++++-
 src/view/ContactUs.vue           |  272 ++++--
 src/view/HomePage.vue            | 1457 +++++++++++++++++++++++-------
 src/view/JobChance.vue           |  454 +++++++++-
 src/view/NewsInformation.vue     |  603 +++++++++++--
 src/view/Service.vue             |  345 +++++--
 src/view/WagooCat.vue            |  259 ++++++
 src/view/customer.vue            |  372 ++++++++
 src/view/franchise.vue           |  820 +++++++++++++++++
 src/view/problem.vue             |  333 +++++++
 15 files changed, 5335 insertions(+), 731 deletions(-)
 create mode 100644 src/view/WagooCat.vue
 create mode 100644 src/view/customer.vue
 create mode 100644 src/view/franchise.vue
 create mode 100644 src/view/problem.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5c5be5f..6c1bb7e 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,21 +1,54 @@
 <template>
     <div id="footer" class="container-fluid">
-        <div class="logo">
-            <!-- <img src="@/assets/img/logo_black.png" /> -->
+      <div class="top">
+      </div>
+      <div class="footer-chent">  
+         <div class="logoo">
+         <div class="filing2">
+          <div class="qucode" >
+           <img class="rq" v-if="qucode1"  src="@/assets/img/xiaochengxu.png" alt="" />
+           <img class="ys3" v-on:mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"  src="@/assets/img/m4.png" alt="" />
+          </div>
+             <div class="qucode" >
+           <img class="rq1" v-if="qucode2"  src="@/assets/img/gzh.png" alt="" />
+            <img class="ys4" v-on:mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2"  src="@/assets/img/m1.png" alt="" />
+            </div>
+             <div class="qucode" >
+             <img class="rq1" v-if="qucode3"  src="@/assets/img/hongshu.png" alt="" />
+             <img class="ys4"  v-on:mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3"  src="@/assets/img/m2.png" alt="" />
+              </div>
+                <div class="qucode" >
+             <img class="rq1" v-if="qucode4"  src="@/assets/img/dygzh.png" alt="" />
+           <img class="ys4"  v-on:mouseenter="handleMouseEnter4" @mouseleave="handleMouseLeave4"   src="@/assets/img/m3.png" alt="" />
+             </div>
+               <div class="qucode" >
+             <img class="rq1" v-if="qucode5"  src="@/assets/img/weiboh.png" alt="" />
+           <img class="ys4"  v-on:mouseenter="handleMouseEnter5" @mouseleave="handleMouseLeave5"   src="@/assets/img/m5.png" alt="" />
+             </div>
+      </div>
+       <img class="lo"  src="@/assets/img/wagoo-log.png" alt="" />
+      </div>
+      <p class="x">微信抖音搜索或扫码关注Wagoo,第一时间获取福利及Wagoo相关咨询。</p>
+      <p class="xx"></p>
+      <div class="filing">
+      <span class="x1">沪ICP备2024103050号</span>
+           <img class="ys1"  src="@/assets/img/ga.png" alt="" />
+      </div>
+      </div>
+        <!-- <div class="logo">
         </div>
-        <p class="title">泰阿新材（深圳）有限公司</p>
+        <p class="title">帮宠到家（上海）有限公司</p>
         <p class="address_tel_fax">
         </p><p>地址：{{ address }}</p>
-        <!-- <p>QQ群：<a style="color:#fff" target="_blank" href="#">{{ qqgroup }}</a></p> -->
         <p class="email_wx">
-        <!-- </p><p>博客：<a :href='blog + "neveryu/"' style="color:#fff">{{ blog }}</a></p> -->
         </p><p>电话：755-23612502</p>
         <p>公司邮箱：mk01@texcsz.top</p>
-        <p class="copy">Copyright &copy; 2023 - Now {{ company }}</p>
+        <p class="copy">Copyright &copy; 2023 - Now {{ company }}</p> -->
     </div>
 </template>
 
 <script setup name="Footer">
+    import { reactive, ref } from 'vue';
     const address = import.meta.env.VITE_APP_ADDRESS;
     const phone = import.meta.env.VITE_APP_PHONE;
     const email = import.meta.env.VITE_APP_EMAIL;
@@ -23,6 +56,47 @@
     const company = import.meta.env.VITE_APP_COMPANYNAME;
     const blog = import.meta.env.VITE_APP_BLOG;
     const qqgroup = import.meta.env.VITE_APP_QQGROUP;
+
+    const qucode1 = ref(false);
+    const qucode2 = ref(false);
+    const qucode3 = ref(false);
+    const qucode4 = ref(false);
+    const qucode5 = ref(false);
+
+    const handleMouseEnter = () => {
+    qucode1.value = true
+    };
+    const handleMouseLeave = () => {
+    qucode1.value = false
+    };
+
+    const handleMouseEnter2 = () => {
+    qucode2.value = true
+    };
+    const handleMouseLeave2 = () => {
+    qucode2.value = false
+    };
+    const handleMouseEnter3 = () => {
+    qucode3.value = true
+    };
+    const handleMouseLeave3 = () => {
+    qucode3.value = false
+    };
+    const handleMouseEnter4 = () => {
+    qucode4.value = true
+    };
+    const handleMouseLeave4 = () => {
+    qucode4.value = false
+    };
+     const handleMouseEnter5 = () => {
+    qucode5.value = true
+    };
+    const handleMouseLeave5 = () => {
+    qucode5.value = false
+    };
+
+
+   
 </script>
 
 <style scoped>
@@ -30,10 +104,121 @@
   width: 100%;
   height: 100%;
   color: #fff;
-  background: #474747;
+  background: #FF19A0;
   overflow: hidden;
-  text-align: center;
+  /* text-align: center; */
+  /* padding: 30px; */
+  /* padding-right: 100px; */
 }
+.container-fluid{
+  padding: 0;
+}
+.top{
+  height:62px;
+  width: 100%;
+  background: #fff;
+}
+.footer-chent{
+  width: 90%;
+  margin: 0 auto;
+}
+.qucode{
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.rq{
+  position: absolute;
+  top: -124px;
+    left: -28px;
+  z-index: 99;
+  width: 100px;
+height: 120px;
+/* border: 1px solid #000; */
+}
+.rq1{
+  position: absolute;
+  top: -124px;
+    left: -4px;
+  z-index: 99;
+  width: 100px;
+height: 120px;
+/* border: 1px solid #000; */
+}
+.rq2{
+  position: absolute;
+  top: -124px;
+    left: -4px;
+  z-index: 99;
+  width: 100px;
+height: 120px;
+/* border: 1px solid #000; */
+}
+.rq3{
+  position: absolute;
+  top: -124px;
+    left: -4px;
+  z-index: 99;
+  width: 100px;
+height: 120px;
+/* border: 1px solid #000; */
+}
+.x{
+  font-family: PingFangSC;
+font-size: 24px;
+}
+.xx{
+  width: 100%;
+  height: 1px;
+  background: #fff;
+}
+.x1{
+  font-family: PingFangSC;
+font-size: 24px;
+}
+.lo{
+   width: 45px;
+  height:25px;
+}
+.logoo{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.filing{
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+}
+.filing2{
+  display: flex;
+  align-items: center;
+
+  margin: 80px 0 30px 0;
+}
+.ys1{
+  width: 30px;
+height: 31px;
+margin-left: 5px;
+}
+.ys2{
+  width: 30px;
+height: 31px;
+margin-left:20px;
+}
+.ys3{
+  width: 48px;
+height: 48px;
+cursor:pointer
+/* margin-left:20px; */
+}
+.ys4{
+  width: 48px;
+height: 48px;
+margin-left:20px;
+cursor:pointer
+}
+
 
 .logo {
   width: 95px;
@@ -63,6 +248,43 @@
   margin: 50px 0 10px;
 }
 
+@media screen and (max-width: 768px) {
+  .logoo{
+  display: block;
+  /* justify-content: space-between;
+  align-items: center; */
+}
+.lo{
+      width: 90px;
+    height: 50px;
+    margin: 0 auto;
+}
+.x{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #FFFFFF;
+margin-top:20px;
+}
+.x1{
+   font-family: PingFangSC;
+font-size: 12px;
+color: #FFFFFF;
+margin-bottom:20px;
+
+}
+.ys1{
+      width: 30px;
+    height: 31px;
+    margin: 0 0 20px 5px;
+}
+.top {
+    height: 41px;
+    width: 100%;
+    background: #F9F9F9;
+}
+
+}
+
 @media screen and (max-width: 997px) {
   .title {
     font-size: 20px;
diff --git a/src/components/GoTop.vue b/src/components/GoTop.vue
index 383c41b..4c1b46d 100644
--- a/src/components/GoTop.vue
+++ b/src/components/GoTop.vue
@@ -8,13 +8,11 @@
 import { ref } from 'vue'
 const flag = ref(false)
 function GoTop() {
-  ;(function smoothscroll() {
-    var currentScroll =
-      document.documentElement.scrollTop || document.body.scrollTop
-    if (currentScroll > 0) {
-      window.requestAnimationFrame(smoothscroll)
-      window.scrollTo(0, currentScroll - currentScroll / 10)
-    }
+(function smoothscroll() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth' // 平滑滚动效果
+  });
   })()
 }
 </script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 26f2656..32d0fa4 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,7 @@
 <template>
     <!-- 头部整体盒子 -->
     <div id="header" class="container-fuild">
+     
         <!-- 头部顶部 -->
         <!--
             <div class="container-fuild header-top hidden-xs">
@@ -28,14 +29,16 @@
             </div>
         -->
         <!-- 电脑导航 -->
-        <div class="container header-nav hidden-xs" style="display: flex;justify-content: space-between;">
+        <div class="container header-nav hidden-xs" >
+          
             <!-- 导航logo -->
-            <div class="header-nav-logo">
+            <!-- <div class="header-nav-logo">
                 <img src="@/assets/img/logo_black.png" />
             </div>
-            <h1 style="line-height: 70px;">凝聚创新科技，铸造军工力量</h1>
+            <h1 style="line-height: 70px;">凝聚创新科技，铸造军工力量</h1> -->
             <!-- 导航内容 -->
-            <ul class="header-nav-wrapper" style="margin-left: 25%;">
+            <ul class="header-nav-wrapper" style="margin-left:11%;">
+               <img class="homeimg" src="@/assets/img/wagoo-log.png" alt="" />
                 <li
                     v-for="(item, index) in navList"
                     :key="index"
@@ -60,23 +63,25 @@
         </div>
         <!-- 手机导航 -->
         <div class="container-fuild header-nav-m visible-xs">
-            <div class="header-nav-m-logo">
+             <img class="homeimg2" src="@/assets/img/wagoo-log.png" alt="" />
+            <!-- <div class="header-nav-m-logo">
                 <img
                     class="center-block"
                     src="@/assets/img/logo_black.png"
                     alt="logo"
                 />
-            </div>
+            </div> -->
             <!-- 导航栏 -->
             <div class="header-nav-m-menu text-center">
-                {{ menuName }}
+                <!-- {{ menuName }} -->
                 <div
                     class="header-nav-m-menu-wrapper"
                     data-toggle="collapse"
                     data-target="#menu"
                     @click="menuClick"
                 >
-                    <span :class="menuClass"></span>
+                <img class="navigation" src="@/assets/img/dh.png" alt="" />
+                    <!-- <span :class="menuClass"></span> -->
                 </div>
                 <!-- 导航内容 -->
                 <ul id="menu" class="collapse header-nav-m-wrapper">
@@ -95,6 +100,7 @@
                     </li>
                 </ul>
             </div>
+           
         </div>
     </div>
 </template>
@@ -119,6 +125,7 @@
         //     name: '软件产品',
         //     path: '/software',
         //     children: [
+        
         //         {
         //             name: '智能小镇管理系统',
         //             path: '/software/smartTown',
@@ -130,32 +137,53 @@
         //     ],
         // },
         {
-            name: '相关服务',
+            name: '宠物服务',
             path: '/service',
             children: [],
         },
-        // {
-        //     name: '新闻动态',
-        //     path: '/newsinformation',
-        //     children: [],
-        // },
         {
-            name: '公司介绍',
+            name: '服务案列',
+            path: '/newsinformation',
+            children: [],
+        },
+        {
+            name: '服务项目',
             path: '/companyintroduction',
             children: [],
         },
-        // {
-        //     name: '工作机会',
-        //     path: '/jobchance',
-        //     children: [],
-        // },
-        // {
-        //     name: '联系我们',
-        //     path: '/contactus',
-        //     children: [],
-        // },
+        {
+            name: '活动风采',
+            path: '/jobchance',
+            children: [],
+        },
+        {
+            name: '加入我们',
+            path: '/contactus',
+            children: [],
+        },
+          {
+            name: '加盟咨询',
+            path: '/franchise',
+            children: [],
+        },
+         {
+            name: '问题与解答',
+            path: '/problem',
+            children: [],
+        },
+         {
+            name: '客户与伙伴',
+            path: '/customer',
+            children: [],
+        },
+         {
+            name: '关于我们',
+            path: '/WagooCat',
+            children: [],
+        },
     ];
     function navClick(index, name) {
+      console.log(index,name,'??')
         navIndex.value = index;
         sessionStorage.setItem('navIndex', index);
         menuName.value = name;
@@ -172,10 +200,15 @@
 <style scoped>
 /* 顶部 */
 #header {
-  background: #f4f4f4;
+  background: #FF19A0;
   transition: all ease 0.6s;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 9999;
 }
 
+
 #header .header-top {
   height: 50px;
   color: #fff;
@@ -183,6 +216,26 @@
   line-height: 50px;
   background: #474747;
 }
+.homeimg{
+  position: absolute;
+  top: 11px;
+  left:100px;
+  width: 60px;
+  height:36px;
+}
+
+.homeimg2{
+  position: absolute;
+  top: 13px;
+  left:55px;
+  width: 60px;
+  height:30px;
+
+}
+.navigation{
+  width:35px;
+  height:45px;
+}
 
 /* 顶部的图标 */
 #header .header-top span {
@@ -191,7 +244,7 @@
 
 /* 导航栏 */
 #header .header-nav {
-  height: 110px;
+  height: 60px;
 }
 
 /* 导航栏logo */
@@ -221,24 +274,25 @@
 
 #header .header-nav .header-nav-wrapper {
   line-height: 110px;
-  float: right;
+  /* float: right; */
   margin: 0;
-  max-width: 800px;
+  max-width:920px;
 }
 
 /* 导航栏 每个导航 */
 #header .header-nav .header-nav-wrapper > li {
   float: left;
-  margin: 0 15px;
+  height: 55px;
+  margin: -25px 15px 0 15px;
   position: relative;
 }
 
 /* 导航栏 每个导航下面的 a 链接 */
 #header .header-nav .header-nav-wrapper > li > a {
-  color: #000;
+  color: #fff;
   font-size: 15px;
-  font-weight: bold;
-  padding: 15px 0;
+  font-weight: 400;
+  padding: 10px 0;
   position: relative;
 }
 
@@ -252,7 +306,7 @@
   height: 2px;
   opacity: 0;
   transition: all 0.6s ease;
-  background-color: #1e73be;
+  background-color: #fff;
 }
 
 /* 导航栏 每个导航下面的 a 链接的右侧小三角 */
@@ -263,7 +317,8 @@
 
 /* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
 #header .header-nav .header-nav-wrapper > li > a:hover {
-  color: #1e73be;
+  color: #fff;
+  font-weight: 700;
   text-decoration: none;
 }
 
@@ -281,9 +336,10 @@
 
 /* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
 #header .header-nav .header-nav-wrapper > li.active > a {
-  color: #1e73be;
+  color: #fff;
   text-decoration: none;
-  border-bottom: 2px solid #1e73be;
+  font-weight: 700;
+  border-bottom: 2px solid #fff;
 }
 
 /* 导航栏 每个导航下面的二级导航容器 */
@@ -349,7 +405,7 @@
     height: 50px;
     font-size: 20px;
     line-height: 50px;
-    background: #474747;
+    /* background: #474747; */
     position: relative;
   }
 
@@ -372,7 +428,7 @@
     top: 50px;
     left: 0;
     width: 100%;
-    background: #474747;
+    background: #fff;
     z-index: 9999999;
   }
 
@@ -380,14 +436,15 @@
   #header .header-nav-m .header-nav-m-wrapper > li {
     height: 40px;
     line-height: 40px;
-    border-bottom: 1px solid #ccc;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
   }
 
   /* 导航栏 每个导航下面的 a 链接 */
   #header .header-nav-m .header-nav-m-wrapper > li > a {
-    color: #fff;
-    font-size: 15px;
-    font-weight: bold;
+    color: #3D3D3D;
+    font-size: 16px;
+    font-family: PingFangSC;
+    /* font-weight: bold; */
     padding: 15px 0;
     position: relative;
   }
diff --git a/src/main.js b/src/main.js
index 456c90d..3746243 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import { createRouter } from '@/router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 /* swiper */
 // import 'swiper/swiper.min.css'
@@ -19,6 +21,6 @@ import App from './App.vue'
 
 const router = createRouter()
 const app = createApp(App)
-
+app.use(ElementPlus)
 app.use(router).mount('#app')
 
diff --git a/src/router/index.js b/src/router/index.js
index add7c68..9a56878 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,46 +27,46 @@ const routes = [
           title: '首页'
         }
       },
-      {
-        path: '/software',
-        name: 'software',
-        component: () => import('@/view/Software.vue'),
-        redirect: '/software/smartTown',
-        meta: {
-          title: '软件产品'
-        },
-        children: [
-          {
-            path: '/software/smartTown',
-            name: 'smartTown',
-            component: () => import('@/view/Software_smartTown.vue'),
-            meta: {
-              title: '软件产品丨智能小镇管理系统'
-            }
-          },
-          {
-            path: '/software/bigData',
-            name: 'bigData',
-            component: () => import('@/view/Software_bigData.vue'),
-            meta: {
-              title: '软件产品丨大数据管理系统'
-            }
-          }
-        ]
-      },
+      // {
+      //   path: '/software',
+      //   name: 'software',
+      //   component: () => import('@/view/Software.vue'),
+      //   redirect: '/software/smartTown',
+      //   meta: {
+      //     title: '软件产品'
+      //   },
+      //   children: [
+      //     {
+      //       path: '/software/smartTown',
+      //       name: 'smartTown',
+      //       component: () => import('@/view/Software_smartTown.vue'),
+      //       meta: {
+      //         title: '软件产品丨智能小镇管理系统'
+      //       }
+      //     },
+      //     {
+      //       path: '/software/bigData',
+      //       name: 'bigData',
+      //       component: () => import('@/view/Software_bigData.vue'),
+      //       meta: {
+      //         title: '软件产品丨大数据管理系统'
+      //       }
+      //     }
+      //   ]
+      // },
       {
         path: '/service',
         name: 'service',
         component: () => import('@/view/Service.vue'),
         props: true,
         meta: {
-          title: '相关服务'
+          title: '宠物服务'
         }
       },
       {
-        path: '/servicedetail',
-        name: 'serviceDetail',
-        component: () => import('@/view/ServiceDetail.vue'),
+        path: '/franchise',
+        name: 'franchise',
+        component: () => import('@/view/franchise.vue'),
         props: true,
         meta: {
           title: '相关服务-详情'
@@ -79,6 +79,30 @@ const routes = [
         meta: {
           title: '新闻动态'
         }
+      },
+       {
+        path: '/problem',
+        name: 'problem',
+        component: () => import('@/view/problem.vue'),
+        meta: {
+          title: '问题与解答'
+        }
+      },
+        {
+        path: '/customer',
+        name: 'customer',
+        component: () => import('@/view/customer.vue'),
+        meta: {
+          title: '客户与伙伴'
+        }
+      },
+        {
+        path: '/WagooCat',
+        name: 'WagooCat',
+        component: () => import('@/view/WagooCat.vue'),
+        meta: {
+          title: '客户与伙伴'
+        }
       },
       {
         path: '/companyintroduction',
diff --git a/src/view/CompanyIntroduction.vue b/src/view/CompanyIntroduction.vue
index 02dc568..b945228 100644
--- a/src/view/CompanyIntroduction.vue
+++ b/src/view/CompanyIntroduction.vue
@@ -1,46 +1,502 @@
 <template>
     <div id="CompanyIntroduction">
-        <div class="banner container-fuild text-center">关于我们</div>
-        <div class="container">
-            <div class="CompanyIntroduction-container row">
-                <div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
-                    <!-- <img
-                        class="center-block img-responsive"
-                        src="@/assets/img/about_img.png"
-                    /> -->
-                    <img
-                        class="center-block img-responsive"
-                        src="@/assets/img/about_img1.png"
-                    />
-                </div>
-                <div class="col-md-6 col-sm-12 col-xs-12">
-                    <h3>泰阿新材（深圳）有限公司</h3>
-                    <p class=".text-justify">
-                        泰阿新材（深圳）有限公司成立于2023年，位于广东省深圳市福田区，是一家专业从事计算机、
-                        通信、电子设备制造等相关材料，集技术、研发、生产、销售为一体的科技型企业。
-                    </p>
-                    <p class=".text-justify">
-                        公司拥有在电子通信领域具有资深经验的技术团队，具备产品的方案设计，技术研发，生产和
-                        全系统交付能力，我们致力于为客户提供TEC温控 、短波通讯设备、电力等核心技术及产品解
-                        决方案，目前已为多家军工企业、科研机构、高校、研究所等提供优质的产品和服务。公司秉承
-                        品质、安全为先，客户需求至上的理念，为客户创造更多价值。
-                    </p>
-                </div>
-            </div>
+       <img class="bd3" src="@/assets/img/bd3.png" alt="" />
+       <div class="title">
+        <div class="title2">
+             <div   v-for="(item, index) in navList"
+            :key="index" class="title-item">
+          <span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
+          <div v-if="itemValu == item.name" class="h" />
         </div>
+        </div>
+       </div>
+       <!-- 精品洗护体验4大项 -->
+       <div class="box" v-if="itemValu == '精品洗护体验4大项' ">
+        <div class="care">
+           <img class="jp1" src="@/assets/img/jp1.png" alt="" />
+           <div class="xh">
+            <p class="p1">Step1预检护航</p>
+            <p class="p">云端接宠</p>
+            <p class="p">健康体检</p>
+            <p class="p">云端建档</p>
+            <p class="p">1对1方案定制</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="jp1" src="@/assets/img/jp2.png" alt="" />
+           <div class="xh">
+            <p class="p1">Step2预检护航</p>
+            <p class="p">赛级毛发精修</p>
+            <p class="p">耳道深度清洁</p>
+            <p class="p">无感腺体护理</p>
+            <p class="p">双效清洁矩阵</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="jp1" src="@/assets/img/jp3.png" alt="" />
+           <div class="xh">
+            <p class="p1">Step3预检护航</p>
+            <p class="p">纳米级吸水</p>
+            <p class="p">低噪扫风</p>
+            <p class="p">恒温隧道烘干</p>
+            <p class="p">毛流定型</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="jp1" src="@/assets/img/jp4.png" alt="" />
+           <div class="xh">
+            <p class="p1">Step4预检护航</p>
+              <p class="p">全身镜检</p>
+            <p class="p">分子级留香</p>
+            <p class="p">工具灭菌</p>
+            <p class="p">健康护照</p>
+            <p class="p">全车终末消毒</p>
+           </div>
+        </div>
+       </div>
+       <!-- 洗护服务6阶段 -->
+       <div class="box"  v-if="itemValu == '洗护服务6阶段'">
+        <div class="care">
+           <img class="care1" src="@/assets/img/care1.png" alt="" />
+           <div>
+            <p class="p1">Step1接宠阶段</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="care2" src="@/assets/img/care2.png" alt="" />
+           <div>
+            <p class="p1">Step2洗护阶段</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="care3" src="@/assets/img/care3.png" alt="" />
+           <div>
+            <p class="p1">Step3干毛阶段</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="care4" src="@/assets/img/care4.png" alt="" />
+           <div>
+            <p class="p1">Step4检查阶段</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="care5" src="@/assets/img/care5.png" alt="" />
+           <div>
+            <p class="p1">Step5交宠阶段</p>
+           </div>
+        </div>
+          <div class="care">
+           <img class="care6" src="@/assets/img/care6.png" alt="" />
+           <div>
+            <p class="p1">Step6设备清洁</p>
+           </div>
+        </div>
+       </div>
+       <!-- 洗护流程30步 -->
+         <div  v-if="itemValu == '洗护流程30步'">
+           <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">1.接宠阶段</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/tx1.png" alt="" />
+                <p class="sm">上门接宠</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/tx2.png" alt="" />
+                <p class="sm">洗前预检</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/tx3.png" alt="" />
+                <p class="sm">洗前称重</p>
+            </div>
+           </div>
+       </div>
+         <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">2.洗护阶段</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx1.png" alt="" />
+                <p class="sm">配清洁液</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx2.png" alt="" />
+                <p class="sm">配护毛素</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx3.png" alt="" />
+                <p class="sm">修剪指甲</p>
+            </div>
+              <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx4.png" alt="" />
+                <p class="sm">修脚底毛</p>
+            </div>
+              <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx5.png" alt="" />
+                <p class="sm">修腹底毛</p>
+            </div>
+              <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx6.png" alt="" />
+                <p class="sm">修肛周毛</p>
+            </div>
+               <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx7.png" alt="" />
+                <p class="sm">清洁耳朵</p>
+            </div>
+               <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx8.png" alt="" />
+                <p class="sm">护理眼睛</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx9.png" alt="" />
+                <p class="sm">梳理毛发</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx10.png" alt="" />
+                <p class="sm">调试水温</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx11.png" alt="" />
+                <p class="sm">抱宠入池</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx12.png" alt="" />
+                <p class="sm">挤肛门腺</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx13.png" alt="" />
+                <p class="sm">温水冲洗</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx14.png" alt="" />
+                <p class="sm">一遍清洁</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx15.png" alt="" />
+                <p class="sm">二遍清洁</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx16.png" alt="" />
+                <p class="sm">洗护液冲净</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx17.png" alt="" />
+                <p class="sm">一遍护毛</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx18.png" alt="" />
+                <p class="sm">按摩吸收</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/txx19.png" alt="" />
+                <p class="sm">护毛素冲净</p>
+            </div>
+            
+           </div>
+       </div>
+          <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">3.干毛阶段</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm1.png" alt="" />
+                <p class="sm">吹风收干</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm2.png" alt="" />
+                <p class="sm">烘箱烘干</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm3.png" alt="" />
+                <p class="sm">扫水吹干</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm4.png" alt="" />
+                <p class="sm">毛巾擦干</p>
+            </div>
+           </div>
+       </div>
+           <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">4.检查阶段</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm5.png" alt="" />
+                <p class="sm">上门接宠</p>
+            </div>
+           </div>
+       </div>
+           <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">5.交宠阶段</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm6.png" alt="" />
+                <p class="sm">精油留香</p>
+            </div>
+           </div>
+       </div>
+           <div class="outerLayer">
+           <div class="receiving">
+            <p class="jd">6.设备清洁</p>
+           </div>
+           <div class="receive">
+            <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm7.png" alt="" />
+                <p class="sm">整理工具</p>
+            </div>
+             <div class="avatar">
+                <img class="tx1" src="@/assets/img/bm8.png" alt="" />
+                <p class="sm">设备清洁</p>
+            </div>
+           </div>
+            
+       </div>
+
+         </div>
+         <!-- 精品洗护产品 -->
+         <div class="product" v-if="itemValu == '精选洗护产品'">
+          <p class="p-title">选用美国高端宠物洗护品牌DAVIS（戴维斯）赛级香波，采用高品质成分，如天然植物精油、氨基酸、蛋白质等，这些成分能够为宠物毛发提供深层滋养和修复，同时保持毛发的健康状态。</p>
+          <div class="brand">
+       <img class="left1" src="@/assets/img/left1.png" alt="" />
+       <img class="left2" src="@/assets/img/left2.png" alt="" />
+          </div>
+         </div>
+         <!-- 移动服务优势 -->
+         <div v-if="itemValu == '移动服务优势'">
+            <img class="compare1" src="@/assets/img/cpa1.png" alt="" />
+         </div>
+         <!-- 服务前后对比 -->
+         <div class="compare2" v-if="itemValu == '服务前后对比'">
+                    <img class="compare" src="@/assets/img/compare111.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare2.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare3.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare4.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare5.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare6.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare7.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare8.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare9.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare10.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare11.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare12.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare13.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare14.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare15.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare16.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare17.png" alt="" />
+                    <img class="compare" src="@/assets/img/compare18.png" alt="" />
+         </div>
     </div>
 </template>
 
 <script setup name="CompanyIntroduction">
+    import { reactive, ref } from 'vue';
     import WOW from 'wow.js';
     import { onMounted } from 'vue';
+     const itemValu = ref('精品洗护体验4大项')
+      const navList = [
+        {
+            name: '精品洗护体验4大项',
+        },
+        {
+            name: '洗护服务6阶段',
+        },
+        {
+            name: '洗护流程30步',
+        },
+        {
+            name: '精选洗护产品',
+        },
+        {
+            name: '移动服务优势',
+        },
+        {
+            name: '服务前后对比',
+        }
+    ];
     onMounted(() => {
         const wow = new WOW();
         wow.init();
     });
+  function  titlecli(item){
+   itemValu.value = item.name
+    }
 </script>
 
 <style scoped>
+.bd3{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.compare2{
+  margin: 30px auto;
+  display: flex;
+  width: 78%;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.compare{
+  width: 180px;
+height: 180px;
+}
+
+.p-title{
+  font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+text-align: center;
+margin-top: 20px;
+}
+.brand{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+.left1{
+  width: 37%;
+height: 917.45px;
+}
+.left2{
+  width: 37%;
+height: 917.45px;
+}
+.compare1{
+  width: 78%;
+  margin: 40px auto;
+height: 540px;
+}
+.sm{
+  font-family: PingFangSC;
+font-size: 24px;
+color: #3D3D3D;
+margin-top: 10px;
+}
+.tx1{
+  width: 180px;
+height: 180px;
+margin-left: 20px;
+}
+.receive{
+  display: flex;
+  margin-top: 30px;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 75%;
+}
+.avatar{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.outerLayer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 20px;
+}
+.receiving{
+ display: flex;
+ justify-content: center;
+ line-height: 34px;
+ width: 124px;
+height: 36px;
+border-radius: 155px;
+background: #FF19A0;
+}
+.jd{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #FFFFFF;
+}
+.title{
+  margin-top: 30px;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width: 60%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #666666;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 18px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+}
+.h{
+ width: 100%;
+height: 2px;
+background: #FF19A0;
+margin-top: 20px;
+}
+.jp1{
+  width: 282px;
+  height: 282px;
+}
+.care1{
+  width: 180px;
+height: 180px;
+}
+.care2{
+  width: 180px;
+height: 180px;
+}.care3{
+  width: 180px;
+height: 180px;
+}.care4{
+  width: 180px;
+height: 180px;
+}.care5{
+  width: 180px;
+height: 180px;
+}.care6{
+  width: 180px;
+height: 180px;
+}
+.p1{
+  width: 90%;
+  margin: 10px auto;
+  font-family: PingFangSC;
+font-size: 16px;
+color: #333333;
+/* margin-top: 10px; */
+}
+.p{
+  font-family: PingFangSC;
+font-size: 14px;
+  color: #666666;
+}
+.box{
+  margin: 0 auto;
+  margin-top: 30px;
+  width: 64%;
+  display: flex;
+  justify-content: space-around;
+}
+.care{
+  display: flex;
+  flex-direction: column;
+}
 .banner {
   color: #fff;
   font-size: 30px;
@@ -65,6 +521,164 @@
   font-size: 14px;
   line-height: 2.5rem;
 }
+@media screen and (max-width: 768px) {
+   .bd3{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj3.png');
+  }
+  .compare2{
+        margin: 20px auto;
+    display: flex;
+    width: 95%;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  .compare{
+ width: 48%;
+height: 48%;
+}
+  .compare1{
+    width: 90%;
+    /* height: 824px; */
+    margin: 20px auto;
+     content: url('@/assets/img/cpa2.png');
+  }
+  .p-title{
+    font-family: PingFangSC;
+    font-size: 14px;
+    color: #666666;
+    
+    /* text-align: center; */
+    margin: 20px auto;
+    width: 80%;
+  }
+  .xh{
+    width: 90%;
+    margin: 0 auto;
+  }
+  .left1{
+   width: 80%;
+height: 449.36px;
+     content: url('@/assets/img/left3.png');
+  }
+  .left2{
+    width: 80%;
+height: 449.36px;
+     content: url('@/assets/img/left4.png');
+  }
+  .brand{
+    display: flex;
+    flex-direction: column;
+
+  }
+  .tx1{
+    width: 80px;
+    height: 80px;
+    margin-left: 10px;
+  }
+  .receive{
+  display: flex;
+  margin-top: 30px;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+  .sm{
+    font-family: PingFangSC;
+font-size: 12px;
+color: #3D3D3D;
+  }
+  .care1{
+  width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj1.png');
+ }
+ .care2{
+  width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj2.png');
+ }
+ .care3{
+   width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj3.png');
+ }
+ .care4{
+ width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj4.png');
+ }
+ .care5{
+ width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj5.png');
+ }
+ .care6{
+  width: 90%;
+   margin: 0 auto;
+  height: 288px;
+  content: url('@/assets/img/carsj6.png');
+ }
+  .box{
+  margin: 0 auto;
+  margin-top: 30px;
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 90%;
+  margin: 0 auto;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+}
 @media screen and (max-width: 997px) {
   .CompanyIntroduction-container {
     padding: 10px 0;
diff --git a/src/view/ContactUs.vue b/src/view/ContactUs.vue
index 7e1a07c..5c6e5aa 100644
--- a/src/view/ContactUs.vue
+++ b/src/view/ContactUs.vue
@@ -1,112 +1,146 @@
 <template>
   <div id="ContactUs">
-    <div class="banner container-fuild text-center">联系我们</div>
-    <div class="container">
-      <div class="container-fuild ContactUs-container">
-        <div class="row">
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <form class="form-horizontal" role="form">
-              <div class="form-group">
-                <label for="name" class="col-sm-2 control-label">姓名</label>
-                <div class="col-sm-10 col-xs-12">
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="name"
-                    placeholder="请输入名字"
-                  />
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="email" class="col-sm-2 control-label">邮箱</label>
-                <div class="col-sm-10">
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="email"
-                    placeholder="请输入邮箱"
-                  />
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="tel" class="col-sm-2 control-label">电话</label>
-                <div class="col-sm-10">
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="tel"
-                    placeholder="请输入电话"
-                  />
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="content" class="col-sm-2 control-label">内容</label>
-                <div class="col-sm-10">
-                  <textarea
-                    class="form-control"
-                    id="content"
-                    rows="8"
-                    placeholder="请输入内容"
-                  ></textarea>
-                </div>
-              </div>
-              <div class="form-group">
-                <div class="col-sm-offset-2 col-sm-10">
-                  <button
-                    class="btn btn-default btn-block"
-                    @click.stop="submitForm"
-                  >
-                    提交
-                  </button>
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="col-xs-12 col-sm-12 col-md-6">
-            <div id="map" class="wow zoomIn"></div>
-          </div>
+       <img class="bank1" src="@/assets/img/bd5.png" alt="" />
+        <div class="title">
+        <div class="title2">
+             <div   v-for="(item, index) in navList"
+            :key="index" class="title-item">
+          <span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
+          <div v-if="itemValu == item.name" class="h" />
         </div>
-      </div>
-    </div>
+        </div>
+       </div>
+       <div class="responsibility">
+        <p>岗位职责</p>
+        <p class="p">1.Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现;</p>
+        <p class="p">2.对UI设计的结果进行页面制作(CSS/css3+xhtml/html5+JS);</p>
+        <p class="p">3.熟悉编写可复用的用户界面组件;</p>
+        <p class="p">4.从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案;</p>
+        <p class="p">5.配合程序员进行代码的调试、bug修复、浏览器兼容性调优;</p>
+        <p class="p">6.能够独立完成前端框架的封装和组件的编写;</p>
+        <p class="p">7.负责网站系统的页面制作、实现网站用户交互的效果;</p>
+        <p class="p">8.了解前后端框架分离实现原理。</p>
+       </div>
+        <div class="responsibility">
+        <p>任职资格</p>
+        <p class="p">1.Web前端功能设计、开发和实现，与后台工程师协作，完成数据交互、动态展现;</p>
+        <p class="p">2.对UI设计的结果进行页面制作(CSS/css3+xhtml/html5+JS);</p>
+        <p class="p">3.熟悉编写可复用的用户界面组件;</p>
+        <p class="p">4.从视觉和易用性角度，为网站设计提供改进建议，为网站/客户端的页面提供持续优化方案;</p>
+        <p class="p">5.配合程序员进行代码的调试、bug修复、浏览器兼容性调优;</p>
+       </div>
+        <div class="responsibility">
+        <p>联系我们</p>
+        <p class="p">招聘：Hr@bcdj.cn</p>
+       </div>
   </div>
 </template>
 <script setup name="ContactUs">
 import WOW from 'wow.js'
 import { onMounted } from 'vue'
+  import { reactive, ref } from 'vue';
+     const itemValu = ref('前端开发')
+
 // 百度地图BMap构造函数
 let BMap = null
+const navList = [
+        {
+            name: '前端开发',
+        },
+        {
+            name: '后端开发',
+        },
+        {
+            name: '测试工程',
+        },
+        {
+            name: 'ul设计',
+        },
+        {
+            name: '产品经理',
+        },
+        {
+            name: '项目经理',
+        }
+    ];
 onMounted(() => {
-  BMap = window.BMap
-  var map = new BMap.Map('map') // 创建地图实例
-  var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
-  map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
-  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
-  var marker = new BMap.Marker(point) // 创建标注
-  map.addOverlay(marker) // 将标注添加到地图中
-  var opts = {
-    width: 50, // 信息窗口宽度
-    height: 10, // 信息窗口高度
-    title: '武汉XXX公司' // 信息窗口标题
-  }
-  var infoWindow = new BMap.InfoWindow(
-    `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
-     <br>
-     <span>联系方式：423</span>`,
-    opts
-  ) // 创建信息窗口对象
-  map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
-  var wow = new WOW()
-  wow.init()
+  // BMap = window.BMap
+  // var map = new BMap.Map('map') // 创建地图实例
+  // var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
+  // map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
+  // map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
+  // var marker = new BMap.Marker(point) // 创建标注
+  // map.addOverlay(marker) // 将标注添加到地图中
+  // var opts = {
+  //   width: 50, // 信息窗口宽度
+  //   height: 10, // 信息窗口高度
+  //   title: '武汉XXX公司' // 信息窗口标题
+  // }
+  // var infoWindow = new BMap.InfoWindow(
+  //   `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
+  //    <br>
+  //    <span>联系方式：423</span>`,
+  //   opts
+  // ) // 创建信息窗口对象
+  // map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
+  // var wow = new WOW()
+  // wow.init()
 })
 function submitForm() {
   window.open(
     'https://neveryu.github.io/web-bookmarks/interview/',
     'web-bookmarks'
   )
+}
+ function  titlecli(item){
+   itemValu.value = item.name
 }
 </script>
 
 <style scoped>
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.title{
+  margin-top: 30px;
+}
+.responsibility{
+  width: 70%;
+  margin: 30px auto;
+}
+.p{
+font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width: 37%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #666666;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 18px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+}
+.h{
+ width: 110%;
+height: 2px;
+background: #FF19A0;
+margin-top: 20px;
+}
 .banner {
   color: #fff;
   font-size: 30px;
@@ -131,6 +165,68 @@ function submitForm() {
   margin-right: 0;
   margin-left: 0;
 }
+@media screen and (max-width: 768px){
+  .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj5.png');
+  }
+  .p{
+font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+     
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width:62px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.responsibility[data-v-f270821d] {
+    width: 90%;
+    margin: 30px auto;
+}
+}
 @media screen and (max-width: 997px) {
   .ContactUs-container {
     padding: 20px 0;
diff --git a/src/view/HomePage.vue b/src/view/HomePage.vue
index f83e14a..09b6baf 100644
--- a/src/view/HomePage.vue
+++ b/src/view/HomePage.vue
@@ -1,352 +1,747 @@
 <template>
-    <div id="HomePage">
-        <!-- 轮播图 -->
-        <swiper
-            id="swiper"
-            :modules="modules"
-            :slidesPerView="1"
-            :spaceBetween="0"
-            navigation
-            lazy
-            loop
-            autoplay
-            :pagination="{
-                clickable: true,
-            }"
-        >
-            <swiper-slide
-                v-for="(item, index) in swiperList"
-                :key="index"
-                class="banner-swiper"
-            >
-                <img class="swiper-lazy" :data-src="item.img" alt="轮播图" />
-                <div class="swiper-lazy-preloader"></div>
-                <div class="swiper-slide-title">
-                    <h1>{{ item.title }}</h1>
-                    <p>{{ item.content }}</p>
-                </div>
-            </swiper-slide>
-        </swiper>
-        <!-- 大数据管理系统 -->
-        <div id="bigData" class="container-fuild">
-            <div class="bigData-container row">
-                <div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
-                    <img
-                        class="img-responsive"
-                        src="@/assets/img/service1.png"
-                        alt="散热半导体芯片"
-                    />
-                </div>
-                <div class="col-md-6 col-sm-12 col-xs-12">
-                    <h2 class="bigData-title">
-                        散热半导体芯片
-                        <small>/ Heat Dissipation Semiconductor Chip</small>
-                    </h2>
-                    <p>
-                        热电材料可以直接将热能转化为电能或直接将电能转换热能，能量转换是通过内部载流子运动
-                        实现的，因而其组成的热电器件无噪音和污染物产生，还具有体积小易于集成，无移动部件，可
-                        靠性高等优点。这些特性使热电技术在废热回收和热电制冷等应用中具有独特的优势。
-                    </p>
-                    <p>
-                        半导体制冷芯片是由许多微小而有效的热泵组成的半导体器件。通过施加一个低压直流电源，
-                        热量将从半导体制冷芯片的一面转移到另一面，从而产生一面变热另一面变冷的现象。超微半
-                        导体制冷芯片使用高性能碲化铋材料与先进封装技术，尺寸可小于2mm*2mm*1mm，温度精
-                        准度可控制在±0.01℃，制冷功率密度达35W/cm²，满足航空航天领域的性能和可靠性要求。
-                    </p>
-                    <!-- <h2 class="bigData-device">PC/PAD/Phone &nbsp; 全设备支持</h2> -->
-                    <!-- <a href="javascript:;" class="btn btn-block btn-info btn-lg">联系我们</a> -->
-                </div>
-            </div>
-        </div>
-        <!-- 您身边的IT专家 -->
-        <div id="contactUs" class="container-fuild text-center">
-            <div class="contactUs-container container slideInUp wow">
-             <!--   <h1>您身边的温控专家</h1>
-                <h3>7x24小时提供出色的温控服务</h3>
-                <button
-                    class="btn btn-default btn-sm"
-                    onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';"
-                    onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';"
-                >
-                    联系我们
-                </button> -->
-              <!--  <div class="contactUs-contactWay">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div> -->
-            </div>
-        </div>
-        <!-- 客户评价 -->
-        <!--
-            <div id="customer" class="container-fuild">
-            <div class="container customer-container">
-            <p class="customer-title text-center">客户评价</p>
-            <swiper
-            class="customer-swiper hidden-xs swiper-container"
-            :modules="modules"
-            :slidesPerView="1"
-            :spaceBetween="0"
-            navigation
-            loop
-            autoplay
-            :pagination="{
-            clickable: true,
-            }"
-            >
-            <swiper-slide
-            v-for="(item, index) in customerList"
-            :key="index"
-            class="customer-block swiper-slide"
-            >
-            <div class="customer-logo">
-            <img class="center-block" :src="item.logo" alt="logo" />
-            </div>
-            <div class="customer-yh">
-            <img src="@/assets/img/yinhao.png" alt="引号" />
-            </div>
-            <div class="customer-content1">
-            <small>{{ item.content }}</small>
-            </div>
-            <div class="customer-content2">{{ item.title }}</div>
-            </swiper-slide>
-            </swiper>
-            <div class="customer-block row visible-xs">
-            <div
-            v-for="(item, index) in customerList"
-            :key="index"
-            class="col-xs-12"
-            >
-            <div class="customer-logo">
-            <img class="center-block" :src="item.logo" alt="logo" />
-            </div>
-            <div class="customer-yh">
-            <img src="@/assets/img/yinhao.png" alt="引号" />
-            </div>
-            <div class="customer-content1">
-            <small>{{ item.content }}</small>
-            </div>
-            <div class="customer-content2">
-            <small>{{ item.title }}</small>
-            </div>
-            </div>
-            </div>
-            </div>
-            </div>
-        -->
-        <!-- 为什么选择我们 -->
-        <div id="whyChooseUs" class="conatiner-fuild">
-            <div class="container">
-                <div class="text-center whyChooseUs-title">
-                    <p>为什么选择我们的服务</p>
-                    <p>THE REASON TO CHOOSING US</p>
-                </div>
-                <div class="row">
-                    <div
-                        v-for="(item, index) in serverList"
-                        :key="index"
-                        class="col-md-3 col-sm-6 col-xs-12 server-wrapper"
-                    >
-                        <div
-                            class="server-block slideInUp wow"
-                            onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
-                            onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
-                        >
-                            <img class="center-block" :src="item.logo" alt="logo" />
-                            <p class="text-center">{{ item.title }}</p>
-                            <div
-                                class="text-center"
-                                onmouseenter="this.style.color='#28f'"
-                                onmouseleave="this.style.color='#ccc'"
-                                v-html="item.content"
-                            ></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div id="HomePage">
+    <!-- 轮播图 -->
+    <div>
+      <img class="homeimg" src="@/assets/img/carousel.png" alt="" />
     </div>
+    <!-- 头部title -->
+    <div class="log-title">
+      <div class="item">
+        <div><span class="s">12</span> <span class="w">万</span></div>
+        <div style="margin-top: 1px">
+          <span class="f">服务宠物数量</span>
+        </div>
+      </div>
+
+      <div class="item">
+        <div><span class="s">11</span> <span class="w">万</span></div>
+        <div style="margin-top: 1px">
+          <span class="f">会员人数</span>
+        </div>
+      </div>
+
+      <div class="item">
+        <div>
+          <span class="s">89%</span>
+        </div>
+        <div style="margin-top: 1px">
+          <span class="f">会员满意度</span>
+        </div>
+      </div>
+
+      <div class="item">
+        <div>
+          <span class="s">99%</span>
+        </div>
+        <div style="margin-top: 1px">
+          <span class="f">持续使用率</span>
+        </div>
+      </div>
+    </div>
+    <!-- 宠物服务 -->
+    <div class="cw-service">
+      <div class="top">
+        <span class="c1">宠物服务</span>
+        <span class="c2">Pet services</span>
+      </div>
+      <div class="outer-layer">
+        <div class="service-t">
+          <div class="service-item">
+            <img class="y1" src="@/assets/img/y2.png" alt="" />
+            <p class="yd1">SPA级护理</p>
+            <p class="yd2">
+             深层清洁护皮肤，细节打理焕神采，特色项目助放松，宠爱从 “头” 到 “脚”
+            </p>
+          </div>
+          <div class="service-item">
+            <img class="y1" src="@/assets/img/y3.png" alt="" />
+            <p class="yd1">上门美容</p>
+            <p class="yd2">
+             由专业美容师提供个性化造型设计，让宠物更加时尚可爱
+            </p>
+          </div>
+          <div class="service-item">
+            <img class="y1" src="@/assets/img/y4.png" alt="" />
+            <p class="yd1">上门训犬</p>
+            <p class="yd2">
+              专业训犬，纠正爱犬不良习惯，让养宠变得简单
+            </p>
+          </div>
+          <div class="service-item">
+            <img class="y1" src="@/assets/img/y5.png" alt="" />
+            <p class="yd1">公益助力</p>
+            <p class="yd2">
+              积分有光，善行无界 帮助每个毛孩子找到一个温暖的家
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="underline">
+        <div class="h1"></div>
+        <div class="h2"></div>
+      </div>
+    </div>
+    <!-- 关于我们 -->
+    <div id="bigData" class="container-fuild" >
+      <div class="top">
+        <span class="c1">关于我们</span>
+        <span class="c2">About Us</span>
+      </div>
+      <div class="bigData-container row" style="margin-top: 20px">
+        <div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">
+            <video src="@/assets/img/sp.mp4" controls   class="img-responsive" @play="onPlay" @pause="onPause">
+    </video>
+          <!-- <img
+            class="img-responsive"
+            src="@/assets/img/sp.png"
+            alt="散热半导体芯片"
+          /> -->
+        </div>
+        <div class="col-md-6 col-sm-12 col-xs-12">
+          <h4 class="bigData-title">
+            Wagoo是谁？
+            <!-- <small>/ Heat Dissipation Semiconductor Chip</small> -->
+          </h4>
+          <p class="b">
+            帮宠到家”旗下品牌--Wagoo致力于打造【一站式移动宠物服务平台】，以“移动宠爱，悦享生活”为起点，聚焦宠物与主人的全方位需求，打破传统宠物店“三公里”限制，为爱宠提供便捷，舒适的上门洗护体验，力求让每一次体验都成为宠物与主人之间的美好回忆。
+          </p>
+          <h4 class="bigData-title">
+            品牌理念
+            <!-- <small>/ Heat Dissipation Semiconductor Chip</small> -->
+          </h4>
+          <p class="b">
+            Wagoo，将便捷、专业与深情关爱巧妙融合，打造每一次无与伦比的宠物护理体验。
+            秉承“移动宠爱，悦享生活”的核心理念，我们凭借创新的服务模式与全方位的宠物护理解决方案，为宠物与宠物主人开启一段前所未有的愉悦与便捷之旅。
+          </p>
+          <p class="b">
+            移动空间，宠爱无界：Wagoo
+            移动宠物洗护车，颠覆传统，打破时空束缚。无需再受限于宠物店的位置与时间，只需轻触小程序，轻松预约，我们的洗护车便如约而至，上门服务。这份随时随地的便捷，让宠物主人在繁忙生活中也能随时给予爱宠最贴心的关怀与呵护。
+          </p>
+          <div class="details" @click="viewDetails">
+            <!-- <span class="view">查看详情</span> -->
+              <router-link class="view" :to=" '/WagooCat' ">
+                             关于我们
+                            <i class="underline"></i>
+              </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 服务案例 -->
+    <div class="customer-f">
+      <div class="top">
+        <span class="c1">服务案例</span>
+        <span class="c2">Service Case</span>
+      </div>
+      <div class="comments-y">
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw1.png" alt="" />
+            <img class="cw" src="@/assets/img/cw2.png" alt="" />
+            <img class="cw" src="@/assets/img/cw3.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw4.png" alt="" />
+            <img class="cw" src="@/assets/img/cw5.png" alt="" />
+            <img class="cw" src="@/assets/img/cw6.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw7.png" alt="" />
+            <img class="cw" src="@/assets/img/cw8.png" alt="" />
+            <img class="cw" src="@/assets/img/cw9.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+             第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw10.png" alt="" />
+            <img class="cw" src="@/assets/img/cw11.png" alt="" />
+            <img class="cw" src="@/assets/img/cw12.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="details2">
+         <router-link class="view" :to=" '/newsinformation' ">
+                             服务案例
+                            <i class="underline"></i>
+              </router-link>
+        <!-- <span class="view2">查看更多</span> -->
+      </div>
+    </div>
+    <!-- 我们的优势 -->
+    <div class="whyChooseUs2">
+      <div class="container5" >
+         <div class="top">
+        <span class="c1">我们的优势</span>
+        <span class="c2">Our advantages</span>
+      </div>
+      <div class="ys">
+           <img class="ys1"  src="@/assets/img/ys1.png" alt="" />
+      </div>
+      </div>
+    </div>
+    <!-- 服务项目 -->
+    <div class="whyChooseUs">
+      <div class="container4" >
+         <div class="top">
+        <span class="c1">服务项目</span>
+        <span class="c2" style="margin-bottom:8px;">Service items</span>
+      </div>
+      <div class="project">
+         <img class="r1" src="@/assets/img/r1.png" alt="" />
+         <img class="r1" src="@/assets/img/r2.png" alt="" />
+         <img class="r1" src="@/assets/img/r3.png" alt="" />
+      </div>
+ <div class="project2">
+       <img class="r1" src="@/assets/img/r4.png" alt="" />
+         <img class="r1" src="@/assets/img/r5.png" alt="" />
+         <img class="r1" src="@/assets/img/r6.png" alt="" />
+      </div>
+      </div>
+    </div>
+    <!-- 活动风采 -->
+    <div class="customer-f3">
+      <div class="top">
+        <span class="c1">活动风采</span>
+        <span class="c2">Activity Highlights</span>
+      </div>
+      <div class="exhibition">
+         <div class="case-item2">
+           <img class="act1" src="@/assets/img/act1.png" alt="" />
+          <p class="zh">展会-亚宠展</p>
+          <span class="zh1">亚宠展：全球宠物行业旗舰展，覆盖全产业链的B2B贸易与综合消费展。</span>
+          <div class="time-act">
+            <span class="time">2025年06月20日</span> <span class="time">展会活动</span>
+          </div>
+        </div>
+         <div class="case-item2">
+           <img class="act1" src="@/assets/img/act2.png" alt="" />
+          <p class="zh">展会-上海宠物时装周</p>
+          <span class="zh1">上海宠物时装周：专注于宠物时尚、生活方式的品牌发布与文化盛宴。</span>
+          <div class="time-act">
+            <span class="time">2025年06月20日</span> <span class="time">展会活动</span>
+          </div>
+        </div>
+         <div class="case-item2">
+           <img class="act1" src="@/assets/img/act3.png" alt="" />
+          <p class="zh">宠物友好银行-浦发银行</p>
+          <span class="zh1">在这里可以直接携宠进入银行办理业务 等待的时间毛孩子还能享受洗香香服务 养宠人瞬间化身真正的时间管理大师</span>
+          <div class="time-act">
+            <span class="time">2025年06月20日</span> <span class="time">宠物友好银行</span>
+          </div>
+        </div>
+         <div class="case-item2">
+           <img class="act1" src="@/assets/img/act4.png" alt="" />
+          <p class="zh">阿纳迪酒店</p>
+          <span class="zh1">展会-上海宠物时装周展会-上海宠物时装周展会-上海宠物时装周展会-上海宠物时装周装周周装周</span>
+          <div class="time-act">
+            <span class="time">2025年06月20日</span> <span class="time">酒店活动</span>
+          </div>
+        </div>
+      </div>
+      <div class="details2">
+        <router-link class="view2" :to=" '/jobchance' ">
+                             活动风采
+                            <i class="underline"></i>
+              </router-link>
+      </div>
+    </div>
+
+    <!-- 合作伙伴 -->
+       <div class="whyChooseUs">
+      <div class="container4" >
+         <div class="top1">
+        <span class="c1">合作伙伴</span>
+        <span class="c2" style="margin-bottom:8px;">Partner</span>
+      </div>
+      <div class="project3">
+         <img class="zr1" src="@/assets/img/hz1.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz2.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz3.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz4.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz5.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz6.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz7.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz8.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz9.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz10.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz11.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz12.png" alt="" />
+           <img class="zr1" src="@/assets/img/hz13.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz14.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz15.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz16.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz17.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz18.png" alt="" />
+      </div>
+   
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup name="HomePage">
-    import WOW from 'wow.js';
-    import { getCurrentInstance, onMounted } from 'vue';
-    // import Swiper from 'swiper'
-    import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper';
-    import { Swiper, SwiperSlide } from 'swiper/vue';
-    import 'swiper/css';
-    import 'swiper/css/navigation';
-    import 'swiper/css/pagination';
-    import 'swiper/css/scrollbar';
-    import 'swiper/css/lazy';
-    import 'swiper/css/autoplay';
+import WOW from 'wow.js'
+import { getCurrentInstance, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router';
+//导入能返回路由器和路由对象的方法！
+const route = useRoute();
+const router = useRouter();
+// import Swiper from 'swiper'
+import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/scrollbar'
+import 'swiper/css/lazy'
+import 'swiper/css/autoplay'
 
-    import banner1 from '@/assets/img/banner1.png';
-    import banner2 from '@/assets/img/banner2.png';
-    import banner3 from '@/assets/img/banner3.png';
-    import banner4 from '@/assets/img/banner4.png';
+import banner1 from '@/assets/img/carousel.png'
+import banner2 from '@/assets/img/banner2.png'
+import banner3 from '@/assets/img/banner3.png'
+import banner4 from '@/assets/img/banner4.png'
 
-    import logo_hp from '@/assets/img/logo_hp.png';
-    import logo_kk from '@/assets/img/logo_kk.png';
-    import logo_toyota from '@/assets/img/logo_toyota.png';
+import logo_hp from '@/assets/img/logo_hp.png'
+import logo_kk from '@/assets/img/logo_kk.png'
+import logo_toyota from '@/assets/img/logo_toyota.png'
 
-    import img_tel from '/images/service1-49.png';
-    import img_computer from '@/assets/img/computer.png';
-    import img_qq from '/images/service1-50.png';
-    import img_skill from '@/assets/img/skill.png';
+import img_tel from '@/assets/img/carousel.png'
+import img_computer from '@/assets/img/computer.png'
+// import img_qq from '/images/service1-50.png';
+import img_skill from '@/assets/img/skill.png'
 
-    const swiperList = [
-        {
-            img: banner1,
-            title: '泰阿',
-            content: '智慧工厂，保证高质量生产工艺',
-        },
-        {
-            img: banner2,
-            title: '碳中和，温控方案',
-            content: '致力于双碳方案，成为专业的温控解决方案平台',
-        },
-        {
-            img: banner3,
-            title: '研发实力强',
-            content: '全程自助研发，研产销一体，提供完整的节能温控解决方案',
-        },
-        {
-            img: banner4,
-            title: '企业使命',
-            content: '为互联网数据中心、5G通讯基站、超算中心、科研机构、金融数据中心、游戏渲染、医疗行业、电力行业等众多领域节能提供高效的温控服务',
-        },
-    ];
+const swiperList = [
+  {
+    img: banner1
+  }
 
-    const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay];
+]
 
-    const customerList = [
-        {
-            logo: logo_hp,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_kk,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_toyota,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_kk,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_hp,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_toyota,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_kk,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_hp,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_toyota,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_hp,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_kk,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-        {
-            logo: logo_hp,
-            title:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-            content:
-                '您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素。',
-        },
-    ];
+const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]
 
-    const serverList = [
-        {
-            logo: img_tel,
-            title: '精准控温',
-            content: '<p>利用半导体热电材料的Peltier效应实现热能转移',
-        },
-        {
-            logo: img_computer,
-            title: '微型化热管理',
-            content: '<p>利用帕尔贴原理，实现主动控温，适用于小空间精确',
-        },
-        {
-            logo: img_qq,
-            title: '超微尺寸',
-            content: '<p>半导体制冷芯片尺寸可小于2mm*2mm*1mm。</p>',
-        },
-        {
-            logo: img_skill,
-            title: '应用领域广泛',
-            content: '<p>在工业与高端制造方面，已经投入到多领域使用。</p>',
-        },
-    ];
+// const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
+onMounted(() => {
+  // console.log('mounted', proxy)
+  // console.log(proxy.$wow, '------')
+  /* wowjs动画 */
+  new WOW({
+    boxClass: 'wow',
+    animateClass: 'animated',
+    offset: 0,
+    mobile: true,
+    live: true
+  }).init()
+})
+// function viewDetails() {
+//   try {
+//      router.push({ name: '/WagooCat' });
+// } catch (error) {
+//      console.log(error,'--?');
+// }
+ 
 
-    // const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
-    onMounted(() => {
-        // console.log('mounted', proxy)
-        // console.log(proxy.$wow, '------')
-        /* wowjs动画 */
-        new WOW({
-            boxClass: 'wow',
-            animateClass: 'animated',
-            offset: 0,
-            mobile: true,
-            live: true,
-        }).init();
-    });
-    
+//   //  router.push({ name: 'Service' })
+//         // menuName.value = name;
+//     }
+
+ 
 </script>
 
-<style scoped>
+<style scoped >
+.log-title {
+  display: flex;
+  flex-wrap: wrap;
+  width:67%;
+  margin: 0 auto;
+  /* justify-content: space-around; */
+}
+.container5{
+  width:67%;
+  margin: 0 auto;
+}
+.container4{
+  width:67%;
+  margin: 0 auto;
+}
+.container{
+  width: 68%;
+}
+
+.item {
+  text-align: center;
+  flex: 1 1 20%; /* 或者其他百分比，确保在大屏时每个项占用25%的宽度 */
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+.details {
+  width: 73px;
+  height: 26px;
+  margin-top: 20px;
+  border-radius: 4px;
+  border: 0.5px solid #ff19a0;
+  text-align: center;
+  line-height: 24px;
+}
+.view {
+  font-family: PingFangSC;
+  font-size: 14px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.details2 {
+  width: 73px;
+  height: 26px;
+  margin: 20px auto;
+  border-radius: 4px;
+  border: 0.5px solid #ff19a0;
+  text-align: center;
+  line-height: 24px;
+}
+.view2 {
+  font-family: PingFangSC;
+  font-size: 14px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.s {
+  color: #ff19a0;
+  font-family: PingFangSC;
+  font-size: 50px;
+  font-weight: 500;
+}
+.w {
+  font-family: PingFangSC;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333333;
+}
+.b {
+  font-size: 14px;
+  font-family: PingFangSC;
+  color: #666666;
+}
+.f {
+  font-family: PingFangSC;
+  font-size: 18px;
+  font-weight: normal;
+  color: #333333;
+}
+.homeimg {
+  width: 100%;
+}
+.underline {
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  margin-top: 10px;
+}
+.h1 {
+  width: 78px;
+  height: 4px;
+  border-radius: 155px;
+  background: #ff19a0;
+  margin-right: 10px;
+}
+.h2 {
+  margin-left: 10px;
+  width: 78px;
+  height: 4px;
+  border-radius: 159px;
+  background: #ededed;
+}
+.service-t {
+  width:67%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 30px;
+}
+.exhibition{
+  display: flex;
+  width:67%;
+  justify-content: space-around;
+  margin: 5px auto;
+  /* padding-left: 56px; */
+}
+
+.case-item {
+  width: 282px;
+  /* height: 257px; */
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 10px;
+}
+.case-item2 {
+  width: 282px;
+  /* height: 257px; */
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 10px;
+}
+.zh{
+  font-family: PingFangSC;
+font-size: 16px;
+font-weight: normal;
+color: #333333;
+margin-top: 10px;
+}
+.zh1{
+  font-family: PingFangSC;
+font-size: 13px;
+font-weight: normal;
+color: #999999;
+display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.time-act{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+
+}
+.time{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #333333;
+}
+.case-top {
+  display: flex;
+  align-items: center;
+}
+.avatar1 {
+  width: 60px;
+  height: 60px;
+}
+.case-t {
+  display: flex;
+  flex-direction: column;
+  margin: 12px 0 0 15px;
+  gap: 10px;
+}
+.case-r {
+  display: flex;
+  align-items: center;
+}
+.case-y {
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-weight: normal;
+  color: #272427;
+}
+.case-x {
+  width: 24px;
+  height: 14px;
+  margin-left: 5px;
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.xk {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.sj {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #9b939a;
+}
+.review {
+  display: flex;
+  margin-top: 10px;
+}
+.case-x2 {
+  width: 24px;
+  height: 14px;
+  /* margin-left:5px; */
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.case-x3 {
+  width: 40px;
+  height: 14px;
+  margin-left:5px;
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.xk2 {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.star {
+  display: flex;
+  align-items: center;
+}
+.xx {
+  width: 10px;
+  height: 9.26px;
+  margin: 0 0 2px 6px;
+}
+.comment {
+  margin-top: 5px;
+}
+.ct {
+  font-family: PingFangSC;
+  font-size: 12px;
+  font-weight: normal;
+  color: #726e71;
+}
+.display-cw {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.comments-y {
+  width: 67%;
+  display: flex;
+  margin: 20px auto;
+  /* justify-content: center; */
+  justify-content: space-around;
+}
+.cw {
+  width: 85px;
+  height: 85px;
+  border-radius: 10px;
+}
+.customer-f3 {
+  padding: 20px 0;
+  box-sizing: border-box;
+  transition: all ease 0.6s;
+}
+
+.customer-f {
+  padding: 20px 0 10px 0;
+  box-sizing: border-box;
+  background: #efefef;
+  transition: all ease 0.6s;
+}
+.ys{
+  margin-top: 15px;
+}
+.zr1{
+  width: 180px;
+height: 180px;
+margin-top: 20px;
+}
+
 /* 整体盒子 */
 #HomePage {
   width: 100%;
@@ -393,21 +788,89 @@
   font-weight: 700;
 }
 
+.cw-service {
+  width: 100%;
+  height: 400px;
+  background: #f9f9f9;
+  margin-top: 5px;
+  padding: 20px 10px;
+}
+.service-item {
+  width: 282px;
+  height: 188px;
+  border-radius: 8px;
+  padding: 20px 16px;
+  background: #ffffff;
+  text-align: center;
+}
+.y1 {
+  margin: 0 auto;
+  width: 60px;
+  height: 60px;
+}
+.yd1 {
+  font-family: PingFangSC;
+  font-size: 18px;
+  font-weight: normal;
+  color: #333333;
+  margin-top: 10px;
+}
+.ys1{
+    width: 101%;
+  }
+.yd2 {
+  font-family: PingFangSC;
+  font-size: 14px;
+  font-weight: normal;
+  color: #333333;
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+
+}
+.top1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+.c1 {
+  color: #333333;
+  font-family: PingFangSC;
+  font-size: 32px;
+  font-weight: 500;
+}
+.c2 {
+  font-family: PingFangSC;
+  font-size: 20px;
+  font-weight: normal;
+  color: #999999;
+}
+.act1{
+  width: 282px;
+height: 282px;
+}
+
 /* 大数据管理系统 */
 #bigData {
-  padding: 100px;
+  padding: 20px 0px 40px 10px;
   transition: all ease 0.6s;
   box-sizing: border-box;
+  width: 67%;
+  margin: 0 auto;
 }
 
 #bigData .bigData-title {
   padding-bottom: 10px;
-  border-bottom: 1px solid #ccc;
+  /* border-bottom: 1px solid #ccc; */
 }
 
 #bigData p {
   font-size: 14px;
-  color: #333;
+  color: #666666;
   line-height: 2rem;
 }
 
@@ -458,7 +921,7 @@
 
 /* 客户评价 */
 #customer {
-  padding: 50px 0;
+  padding: 20px 0;
   box-sizing: border-box;
   background: #efefef;
   transition: all ease 0.6s;
@@ -494,6 +957,36 @@
 #customer .customer-content2 {
   padding-top: 20px;
 }
+.project{
+  display: flex;
+  margin: 8px auto;
+  justify-content: space-between;
+}
+.project3{
+  display: flex;
+  margin:0 auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.project2{
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+}
+.r1{
+  width:403px;
+height: 240px;
+border-radius: 8px;
+margin-left:8px;
+}
+
+.whyChooseUs{
+  padding:10px 20px 20px 20px;
+  background: #F9F9F9;
+}
+.whyChooseUs2{
+  padding:20px 20px 20px 20px;
+}
 
 /* 为什么选择我们 */
 #whyChooseUs {
@@ -538,9 +1031,239 @@
   #swiper {
     height: 200px;
   }
+  .item {
+    flex: 1 1 50%; /* 小屏时每个项占用50%的宽度 */
+  }
+  .ys1{
+    width: 100%;
+     content: url('@/assets/img/ys.png');
+  }
+  
+   .homeimg{
+     width: 100%;
+     /* height: 500px; */
+     content: url('@/assets/img/rqq.png');
+  }
+  .top1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+  .top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+
+}
+ .homeimg {
+  width: 100%;
+  margin-top: 50px;
+}
+  .zr1{
+  width: 60px;
+height: 60px;
+margin-top: 0px;
+}
+.project3{
+  display: flex;
+  margin:0 auto;
+  flex-wrap: wrap;
+  gap: 13px;
+  justify-content: space-between;
+}
+.container4{
+  width:100%;
+  margin: 0 auto;
+}
+  .container{
+  width: 100%;
+}
+.container5{
+  width:100%;
+}
+.case-item2 {
+  width: 81%;
+  margin: 0 auto;
+  height:403px;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 10px;
+}
+.customer-f3 {
+  padding:0;
+  box-sizing: border-box;
+  transition: all ease 0.6s;
+}
+.exhibition{
+  display: flex;
+  flex-direction: column;
+  width:95%;
+  /* justify-content: space-around; */
+  margin: 5px auto;
+  /* padding-left: 56px; */
+}
+.act1{
+  width: 100%;
+  height: 288px;
+}
+
+  .details {
+    width: 73px;
+    height: 26px;
+    margin: 20px auto;
+    border-radius: 4px;
+    border: 0.5px solid #ff19a0;
+    text-align: center;
+    line-height: 24px;
+  }
+  .underline{
+        display: flex;
+    /* align-items: center; */
+    justify-content: center;
+    margin-top: 10px;
+  }
+  .s {
+    color: #ff19a0;
+    font-family: PingFangSC;
+    font-size: 20px;
+    font-weight: 500;
+  }
+  .f {
+    font-family: PingFangSC;
+    font-size: 15px;
+    font-weight: normal;
+    color: #333333;
+  }
+  .c1 {
+    color: #333333;
+    font-family: PingFangSC;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .c2 {
+    font-family: PingFangSC;
+    font-size: 10px;
+    font-weight: normal;
+    color: #999999;
+  }
+  .b {
+    font-size: 14px;
+    font-family: PingFangSC;
+    color: #666666;
+  }
+  .outer-layer {
+    width:100%;
+    overflow: auto;
+  }
+
+  .service-t {
+    display: flex;
+    width: 825px;
+    justify-content: space-around;
+    margin-top: 15px;
+  }
+  .service-item {
+    width: 180px;
+    height: 168px;
+    border-radius: 8px;
+    padding: 16px;
+    background: #ffffff;
+    text-align: center;
+  }
+  .cw-service {
+    width: 100%;
+    height: 300px;
+    background: #f9f9f9;
+    margin-top: 5px;
+    padding: 10px 10px;
+  }
+  .y1 {
+    margin: 0 auto;
+    width: 40px;
+    height: 40px;
+  }
+  .yd1 {
+    font-family: PingFangSC;
+    font-size: 12px;
+    font-weight: normal;
+    color: #333333;
+    margin-top: 10px;
+  }
+  .yd2 {
+    font-family: PingFangSC;
+    font-size: 11px;
+    font-weight: normal;
+    color: #333333;
+  }
+  .comments-y {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0;
+    /* margin: 20px auto; */
+    /* justify-content: center; */
+    flex-direction: column;
+  }
+  .case-item {
+    width: 100%;
+    height: 280px;
+    border-radius: 8px;
+    background: #ffffff;
+    padding: 10px;
+    margin-top: 10px;
+  }
+  .cw {
+    width: 32%;
+    height: 120px;
+    border-radius: 10px;
+  }
+  .avatar1 {
+    width: 40px;
+    height: 40px;
+  }
+  .customer-f {
+  padding: 1px 16px 2px 16px;
+  box-sizing: border-box;
+  background: #efefef;
+  transition: all ease 0.6s;
+}
+.whyChooseUs{
+  padding: 1px 16px 2px 16px;
+}
+
+.container{
+  padding: 0;
+}
+.project{
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  margin: 10px auto;
+}
+.project2{
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+  /* margin: 10px auto; */
+}
+
+.r1{
+ top: 187.14px;
+width:80%;
+border-radius: 8px;
+margin: 8px auto;
+}
+
+.whyChooseUs2{
+  padding:10px 20px 20px 20px;
+}
 
   #bigData {
-    padding: 30px;
+    padding: 10px 30px 0 30px;
+    width: 100%;
   }
 
   #bigData .bigData-title {
@@ -646,6 +1369,62 @@
   #swiper {
     height: 400px;
   }
+ 
+  .s {
+    color: #ff19a0;
+    font-family: PingFangSC;
+    font-size: 30px;
+    font-weight: 500;
+  }
+  .b {
+    font-size: 14px;
+    font-family: PingFangSC;
+    color: #666666;
+  }
+  .outer-layer {
+    width: 400px;
+    /* overflow: auto; */
+  }
+  .service-t {
+    display: flex;
+    width: 825px;
+    justify-content: space-around;
+    margin-top: 15px;
+  }
+  .service-item {
+    width: 180px;
+    height: 168px;
+    border-radius: 8px;
+    padding: 16px;
+    background: #ffffff;
+    text-align: center;
+  }
+  .cw-service {
+    width: 100%;
+    height: 400px;
+    background: #f9f9f9;
+    margin-top: 5px;
+    padding: 20px 10px;
+  }
+ 
+  .y1 {
+    margin: 0 auto;
+    width: 40px;
+    height: 40px;
+  }
+  .yd1 {
+    font-family: PingFangSC;
+    font-size: 12px;
+    font-weight: normal;
+    color: #333333;
+    margin-top: 10px;
+  }
+  .yd2 {
+    font-family: PingFangSC;
+    font-size: 11px;
+    font-weight: normal;
+    color: #333333;
+  }
 
   #bigData {
     padding: 60px;
diff --git a/src/view/JobChance.vue b/src/view/JobChance.vue
index d58f856..1609c80 100644
--- a/src/view/JobChance.vue
+++ b/src/view/JobChance.vue
@@ -1,53 +1,181 @@
 <template>
   <div id="JobChance">
-    <div class="banner container-fuild text-center">工作机会</div>
-    <div class="container">
-      <div class="JobChance-container wow pulse">
-        <h2>软件工程师</h2>
-        <p>岗位职责</p>
-        <ol>
-          <li>负责公司产品及项目系统的功能开发、代码优化；</li>
-          <li>负责项目组人员任务的分配与监督，及时解决项目技术问题；</li>
-          <li>
-            参与系统需求分析与设计，并负责完成PHP核心代码，接口规范制定，架构设计。
-          </li>
-        </ol>
-        <p>任职要求</p>
-        <ol>
-          <li>
-            精通PHP+MySql+Apache开发，精通使用JavaScript、AJAX、JQuery等技术；3年以上WEB应用程序开发经验，
-            有大型网站或电子商务网站工作经验者优先；
-          </li>
-          <li>熟悉jQuery，具有AJAX、HTML、CSS、JAVASCRIPT等方面的开发经验；</li>
-          <li>
-            熟悉PHP模板技术、框架技术及设计模式，有php框架系统进行开发经验者优先，如：phpcms，dedecms等；
-          </li>
-          <li>
-            精通数据库原理，精通MYSQL、了解Mongo等并有相关关系数据库设计开发经验,
-            了解Mysql的数据库配置管理、性能优化；
-          </li>
-          <li>
-            熟悉常见的数据结构和算法，具备良好的编程习惯及较强的文档编写能力；
-          </li>
-          <li>熟悉各种WEB缓存技术,熟悉大型网站构架和性能优化；</li>
-          <li>
-            对网站系统架构的部署、搭建、优化、排错等方面有丰富经验，对高负载、大访问量情况下的系统架构有经验者优先。
-          </li>
-        </ol>
-        <button
-          class="center-block btn btn-warning btn-lg"
-          @click.stop="submitForm"
-        >
-          投递简历
-        </button>
+    <div>
+       <img class="bank1" src="@/assets/img/bd4.png" alt="" />
+        <div class="title" v-if="imDetails">
+        <div class="title2">
+             <div   v-for="(item, index) in navList"
+            :key="index" :class="[itemValu == item.name ? ' title-item2' : ' title-item']">
+          <span :class="[itemValu == item.name ? 'j1' : 'j' ]" @click="titlecli(item)">{{item.name}}</span>
+        </div>
+        </div>
+       </div>
+    </div>
+    <div class="acti-gance" v-if="imDetails">
+      <div class="el-item" @click="petItem('上海宠物时装周')"  v-if="itemValu == '展会活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance1.png" alt="" />
+          <p class="zh1">展会-上海宠物时装周</p>
+          <p class="zh2">上海宠物时装周：专注于宠物时尚、生活方式的品牌发布与文化盛宴。</p>
+          <div class="exhibition">
+            <span class="z1">2025年11月03日</span> <span class="z1">展会活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('它博集')"  v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance2.png" alt="" />
+          <p class="zh1">它博集</p>
+          <p class="zh2">它博集以超大型创意人宠市集为载体，主张人宠双向友好的城市生活方式，打造多元人宠生活体验与消费新场景。</p>
+          <div class="exhibition">
+            <span class="z1">2025年10月16日</span> <span class="z1">市集活动</span>
+          </div>
+      </div>
+        <div class="el-item"  @click="petItem('阿纳迪酒店')" v-if="itemValu == '酒店活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance3.png" alt="" />
+          <p class="zh1">阿纳迪酒店</p>
+          <p class="zh2">在户外区域还能带着宠物简单活动，比如散步消食、练习宠物瑜伽等，进一步丰富了人宠互动的体验。</p>
+          <div class="exhibition">
+            <span class="z1">2025年10月14日</span> <span class="z1">酒店活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('光影节')" v-if="itemValu == '市集活动' || itemValu == '所有活动' " >
+          <img class="elegance1" src="@/assets/img/elegance4.png" alt="" />
+          <p class="zh1">光影节</p>
+          <p class="zh2">上海国际光影节与宠物时尚秀的跨界合作活动。现场有可爱甜美、多巴胺配色、优雅高定等多种风格的宠物时装发布，还有人宠共秀环节</p>
+          <div class="exhibition">
+            <span class="z1">2025年10月09日</span> <span class="z1">市集活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('浦江欢乐颂政府')" v-if="itemValu == '社区活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance5.png" alt="" />
+          <p class="zh1">浦江欢乐颂政府活动</p>
+          <p class="zh2">浦江欢乐颂的宠物主题活动内容十分多元，涵盖趣味竞赛、潮流展演、主题市集、手工社交及公益活动等多种类型，既有人宠互动的欢乐环节，也有贴合宠物产业的消费与公益场景</p>
+          <div class="exhibition">
+            <span class="z1">2025年09月30日</span> <span class="z1">社区活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('宠享无界')" v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance6.png" alt="" />
+          <p class="zh1">宠享无界</p>
+          <p class="zh2">活动内容十分丰富，既有萌宠市集可选购宠物相关好物，也有宠物运动会供毛孩子闯关赢奖品，还有每日主题不同的 DIY 手工坊，能亲手给宠物制作项圈、小衣服等。</p>
+          <div class="exhibition">
+            <span class="z1">2025年09月28日</span> <span class="z1">市集活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('浦发银行')" v-if="itemValu == '银行活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance7.png" alt="" />
+          <p class="zh1">浦发银行</p>
+          <p class="zh2">浦发银行围绕宠物经济，以打造宠物友好型网点为核心，搭配特色金融产品、趣味主题活动和宠物公益项目，构建了完善的 “宠物 + 金融” 服务体系，后续还拓展了多家升级版网点</p>
+          <div class="exhibition">
+            <span class="z1">2025年09月28日</span> <span class="z1">银行活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('BFC')" v-if="itemValu == '商场活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance8.png" alt="" />
+          <p class="zh1">BFC</p>
+          <p class="zh2">BFC外滩金融中心是沪上知名的宠物友好地标，2024年更是将人宠友好纳入四大核心业态之一。它不仅打造了完善的人宠友好业态专区、配备贴心设施，还长期举办各类宠物主题活动，全方位满足养宠人群的多元需求</p>
+          <div class="exhibition">
+            <span class="z1">2025年09月11日</span> <span class="z1">商场活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('亚宠展')" v-if="itemValu == '展会活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance9.png" alt="" />
+          <p class="zh1">展会-亚宠展</p>
+          <p class="zh2">2025年上海举办的是第27届亚洲宠物展，该展会于8月20日-24日在上海新国际博览中心开展，以 31 万平方米的超大展览规模、丰富的特色活动和前沿的行业布局，成为当年亚太地区宠物行业的旗舰盛会</p>
+          <div class="exhibition">
+            <span class="z1">2025年08月26日</span> <span class="z1">展会活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('柴迷')" v-if="itemValu == '酒店活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance10.png" alt="" />
+          <p class="zh1">柴迷活动</p>
+          <p class="zh2">活动准备了柴犬主题定制周边，包括伴手礼袋、奖牌、冰箱贴、牵引套装、手办等。此外还有品牌联动福利，比如奕珮到家携手 aTwoValley 免费发放 500 瓶淳感 A2β 宠物牛奶，宠主转发指定内容到朋友圈就能现场领取。</p>
+          <div class="exhibition">
+            <span class="z1">2025年07月11日</span> <span class="z1">酒店活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('翠湖天地')" v-if="itemValu == '银行活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance11.png" alt="" />
+          <p class="zh1">翠湖天地</p>
+          <p class="zh2">活动现场有宠物领养、免费体检及专家问诊、DIY 宠物创意项圈和定制营养餐等环节，还有宠物主题市集，提供洗护体验、免费疫苗等服务，吸引了众多宠物主人和毛孩子参与。</p>
+          <div class="exhibition">
+            <span class="z1">2025年07月11日</span> <span class="z1">宠物友好银行</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('马尔济斯')" v-if="itemValu == '公园活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance12.png" alt="" />
+          <p class="zh1">马尔济斯泳池派对</p>
+          <p class="zh2">设置了毛孩比基尼泳池派对这类相关泳池互动板块，但这并非马尔济斯专属活动，而是面向各类宠物的通用互动环节。</p>
+          <div class="exhibition">
+            <span class="z1">2025年07月05日</span> <span class="z1">公园活动</span>
+          </div>
+      </div>
+        <div class="el-item" @click="petItem('BMF')" v-if="itemValu == '市集活动' || itemValu == '所有活动' ">
+          <img class="elegance1" src="@/assets/img/elegance13.png" alt="" />
+          <p class="zh1">BMF</p>
+          <p class="zh2">2025年6月21-22日在上海浦东新区银城路155 号GALA AVENUE光音广场举办的BMF滨江汪喵集</p>
+          <div class="exhibition">
+            <span class="z1">2025年06月26日</span> <span class="z1">市集活动</span>
+          </div>
       </div>
     </div>
+
+    <div  class="details" v-if="imGoBack">
+      <div class="upper">
+        <span @click="goBack" class="f">返回上一级</span>  <img class="fh" src="@/assets/img/fh.png" alt="" />  <span class="d">当前页面</span>
+      </div>
+      <div class="pudong">
+        <p class="pd1">浦发银行</p>
+        <p class="pd2">浦发银行围绕宠物经济，以打造宠物友好型网点为核心，搭配特色金融产品、趣味主题活动和宠物公益项目，构建了完善的 “宠物 + 金融” 服务体系，后续还拓展了多家升级版网点。</p>
+      <div class="pat-bank">
+          <img class="bank2" src="@/assets/img/bank1.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank2.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank3.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank4.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank5.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank6.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank7.png" alt="" />
+          <img class="bank2" src="@/assets/img/bank8.png" alt="" />
+      </div>
+      </div>
+
+    </div>
+  
   </div>
 </template>
 
 <script setup name="JobChance">
+import { reactive, ref } from 'vue';
 import WOW from 'wow.js'
 import { onMounted } from 'vue'
+const imDetails = ref(true)
+const imGoBack = ref(false)
+const itemValu = ref('所有活动')
+  const navList = [
+        {
+            name: '所有活动',
+        },
+        {
+            name: '展会活动',
+        },
+        {
+            name: '酒店活动',
+        },
+        {
+            name: '社区活动',
+        },
+        {
+            name: '公园活动',
+        },
+        {
+            name: '市集活动',
+        },
+        {
+            name: '商场活动',
+        },
+        {
+            name: '银行活动',
+        }
+      
+    ];
 onMounted(() => {
   let wow = new WOW()
   wow.init()
@@ -55,9 +183,157 @@ onMounted(() => {
 function submitForm() {
   window.open('https://neveryu.github.io/neveryu/', 'NeverYu')
 }
+ function  titlecli(item){
+   itemValu.value = item.name
+    // console.log( itemValu.value,'--')
+    }
+
+  function  petItem(item){
+    imDetails.value = false
+    imGoBack.value = true
+    console.log(item,'-?')
+
+  }
+   function goBack(){
+     imDetails.value = true
+    imGoBack.value = false
+
+  }
 </script>
 
 <style scoped>
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.bank2{
+  width: 282px;
+  height: 282px;
+  /* margin-top: 40px; */
+}
+.pudong{
+ text-align: center;
+}
+.pd1{
+  font-family: PingFangSC;
+  font-size: 16px;
+  color: #333333;
+  margin: 2px 0;
+}
+.pd2{
+  font-family: PingFangSC;
+font-size: 13px;
+color: #999999;
+/* margin: 2px 0; */
+
+}
+.pat-bank{
+  margin: 0 auto;
+  display: flex;
+  gap: 20px;
+  width: 65%;
+  flex-wrap: wrap;
+}
+.acti-gance{
+  display: flex;
+  flex-wrap: wrap;
+  width:63%;
+  margin: 30px auto;
+  gap: 20px;
+}
+.upper{
+  display: flex;
+  align-items: center;
+  width: 80%;
+  margin:0 auto;
+  margin-top: 30px;
+}
+.f{
+  font-family: PingFangSC;
+font-size: 14px;
+color: #909399;
+}
+.d{
+  font-family: PingFangSC;
+font-size: 14px;
+color: #303133;
+}
+.fh{
+  width: 6px;
+  height:10px;
+  margin: 0 5px;
+}
+.exhibition{
+  display: flex;
+  justify-content: space-between;
+}
+.z1{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #333333;
+}
+.el-item{
+  display: flex;
+  flex-direction: column;
+ width: 282px;
+
+}
+.elegance1{
+  width: 282px;
+height: 282px;
+}
+.zh1{
+  font-family: PingFangSC;
+font-size: 16px;
+color: #333333;
+}
+.zh2{
+  font-family: PingFangSC;
+font-size: 13px;
+color: #999999;
+}
+.title{
+  margin-top: 30px;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width:39%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.title-item{
+ width: 76px;
+height: 34px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.05);
+  /* border: 1px solid #000; */
+}
+.title-item2{
+ width: 76px;
+height: 34px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #FF19A0;
+  /* border: 1px solid #000; */
+}
+.j{
+  font-family: PingFangSC;
+font-size: 14px;
+color: #999999;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 14px;
+font-weight: 500;
+color: #FFFFFF;
+ cursor: pointer;
+}
 .banner {
   color: #fff;
   font-size: 30px;
@@ -92,6 +368,104 @@ function submitForm() {
 .JobChance-container ol > li {
   font-size: 14px;
   line-height: 2.7rem;
+}
+@media screen and (max-width: 768px){
+   .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj4.png');
+  }
+  .upper{
+    display: flex;
+    align-items: center;
+    width: 40%;
+    margin: 0 auto;
+    margin-top: 10px;
+}
+.pat-bank {
+    margin: 0 auto;
+    display: flex;
+    gap: 10px;
+    width: 91%;
+    flex-wrap: wrap;
+}
+.bank2 {
+    width:100%;
+    height: 282px;
+    /* margin-top: 40px; */
+}
+.pd2 {
+    font-family: PingFangSC;
+    font-size: 13px;
+    color: #999999;
+    width: 90%;
+    margin: 10px auto;
+    /* margin: 2px 0; */
+}
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FFFFFF;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.acti-gance {
+    display: flex;
+    flex-wrap: wrap;
+    width: 92%;
+    margin: 30px auto;
+    gap: 20px;
+}
+.el-item {
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    margin: 0 auto;
+}
+.elegance1 {
+    width: 100%;
+    /* margin: 0 auto; */
+    height: 288px;
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
 }
 @media screen and (max-width: 997px) {
   .JobChance-container {
diff --git a/src/view/NewsInformation.vue b/src/view/NewsInformation.vue
index 65af9bc..18efa9c 100644
--- a/src/view/NewsInformation.vue
+++ b/src/view/NewsInformation.vue
@@ -1,90 +1,285 @@
 <template>
   <div id="NewsInformation">
-    <div class="container">
-      <div class="container text-center">
-        <h3>新闻动态</h3>
-        <p style="color: #b2b2b2">Company News</p>
-      </div>
-      <div class="nav container text-center">
-        <a href="javascript:;" class="active">公司新闻</a>
-        <a href="javascript:;">行业动态</a>
-      </div>
-      <ul class="news-container container-fuild">
-        <li v-for="(item, index) in newsList" :key="index" class="wow fadeIn">
-          <div class="content">
-            <p>{{ item.title }}</p>
-            <p>{{ item.introduce }}</p>
+      <img class="bd1" src="@/assets/img/bd2.png" alt="" />
+        <div class="customer-f">
+      
+       <div class="comments-y">
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
           </div>
-          <div class="time">
-            <p>{{ item.date }}</p>
-            <span>{{ item.year }}</span>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
           </div>
-          <div class="circle">
-            <img src="@/assets/img/circle.png" />
-            <i class="line center-block"></i>
+          <div class="comment">
+            <p class="ct">
+              第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
+            </p>
           </div>
-        </li>
-      </ul>
-      <div class="contaianer-fuild text-center more">
-        <i class="glyphicon glyphicon-th"></i>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw1.png" alt="" />
+            <img class="cw" src="@/assets/img/cw2.png" alt="" />
+            <img class="cw" src="@/assets/img/cw3.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw4.png" alt="" />
+            <img class="cw" src="@/assets/img/cw5.png" alt="" />
+            <img class="cw" src="@/assets/img/cw6.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw7.png" alt="" />
+            <img class="cw" src="@/assets/img/cw8.png" alt="" />
+            <img class="cw" src="@/assets/img/cw9.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+             第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw10.png" alt="" />
+            <img class="cw" src="@/assets/img/cw11.png" alt="" />
+            <img class="cw" src="@/assets/img/cw12.png" alt="" />
+          </div>
+        </div>
       </div>
+        <div class="comments-y">
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar1.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              第一次叫上门给宠物洗澡服务，宠物美容师技术很好，服务很到位，宠物也感觉适应一点也不反抗，下次还找这家......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw1.png" alt="" />
+            <img class="cw" src="@/assets/img/cw2.png" alt="" />
+            <img class="cw" src="@/assets/img/cw3.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar2.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              真的好方便，基本做到足不出户。我家的吹风会害怕，吹的时候挣脱绳子差点逃走。没想到车子还有烘干箱，虽然时间长，但是猫咪没有那么害怕了，很......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw4.png" alt="" />
+            <img class="cw" src="@/assets/img/cw5.png" alt="" />
+            <img class="cw" src="@/assets/img/cw6.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar3.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x3">
+                  <span class="xk">回头客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+              预约到家门口洗澡，超级方便啊！车子好漂亮，里面也很干净，小哥哥超nice的，耐心巨好，洗得很仔细！耳朵都掏了两遍～天很热，但是里面有空调，......
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw7.png" alt="" />
+            <img class="cw" src="@/assets/img/cw8.png" alt="" />
+            <img class="cw" src="@/assets/img/cw9.png" alt="" />
+          </div>
+        </div>
+
+        <div class="case-item">
+          <div class="case-top">
+            <img class="avatar1" src="@/assets/img/avatar4.png" alt="" />
+            <div class="case-t">
+              <div class="case-r">
+                <span class="case-y">用户_30788</span>
+                <div class="case-x">
+                  <span class="xk">新客</span>
+                </div>
+              </div>
+              <p class="sj">2025-06-05</p>
+            </div>
+          </div>
+          <div class="review">
+            <div class="case-x2">
+              <span class="xk2">超赞</span>
+            </div>
+            <div class="star" v-for="item in 5" :key="item">
+              <img class="xx" src="@/assets/img/xx.png" alt="" />
+            </div>
+          </div>
+          <div class="comment">
+            <p class="ct">
+             第一次下单上门洗狗完美解决场地和出门去宠物店的麻烦，而且还是洗着洗着下大暴雨了，美容师还很尽职尽责完成了，狗狗剪的非常漂亮审美也很好。
+            </p>
+          </div>
+          <div class="display-cw">
+            <img class="cw" src="@/assets/img/cw10.png" alt="" />
+            <img class="cw" src="@/assets/img/cw11.png" alt="" />
+            <img class="cw" src="@/assets/img/cw12.png" alt="" />
+          </div>
+        </div>
+      </div>
+   
     </div>
+    <!-- <div class="container">
+     
+    </div> -->
   </div>
 </template>
 
 <script setup name="NewsInformation">
 import WOW from 'wow.js'
 import { onMounted } from 'vue'
-const newsList = [
-  {
-    id: '001',
-    title: '世界上第一个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  },
-  {
-    id: '002',
-    title: '世界上第二个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  },
-  {
-    id: '003',
-    title: '世界上第三个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  },
-  {
-    id: '004',
-    title: '世界上第四个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第四份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  },
-  {
-    id: '005',
-    title: '世界上第五个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第五份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  },
-  {
-    id: '006',
-    title: '世界上第六个程序员',
-    introduce:
-      '为计算程序拟定“算法”，写作的第五份“程序设计流程图”，被珍视为“第一位给计算机',
-    date: '05-24',
-    year: '2019'
-  }
-]
 onMounted(() => {
   var wow = new WOW()
   wow.init()
@@ -92,6 +287,194 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.customer-f {
+  padding: 20px 0 10px 0;
+  box-sizing: border-box;
+  background: #efefef;
+  transition: all ease 0.6s;
+}
+.comments-y {
+  width: 64%;
+  display: flex;
+  margin: 20px auto;
+  /* justify-content: center; */
+  justify-content: space-around;
+}
+.bd1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.case-item {
+  width: 282px;
+  /* height: 257px; */
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 10px;
+}
+.case-item2 {
+  width: 282px;
+  /* height: 257px; */
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 10px;
+}
+.zh{
+  font-family: PingFangSC;
+font-size: 16px;
+font-weight: normal;
+color: #333333;
+margin-top: 10px;
+}
+.zh1{
+  font-family: PingFangSC;
+font-size: 13px;
+font-weight: normal;
+color: #999999;
+display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.time-act{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+
+}
+.time{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #333333;
+}
+.case-top {
+  display: flex;
+  align-items: center;
+}
+.avatar1 {
+  width: 60px;
+  height: 60px;
+}
+.case-t {
+  display: flex;
+  flex-direction: column;
+  margin: 12px 0 0 15px;
+  gap: 10px;
+}
+.case-r {
+  display: flex;
+  align-items: center;
+}
+.case-y {
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-weight: normal;
+  color: #272427;
+}
+.case-x {
+  width: 24px;
+  height: 14px;
+  margin-left: 5px;
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.xk {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.sj {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #9b939a;
+}
+.review {
+  display: flex;
+  margin-top: 10px;
+}
+.case-x2 {
+  width: 24px;
+  height: 14px;
+  /* margin-left:5px; */
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.case-x3 {
+  width: 40px;
+  height: 14px;
+  margin-left:5px;
+  border-radius: 2px;
+  background: #ffecf3;
+  text-align: center;
+  line-height: 12px;
+}
+.xk2 {
+  font-family: PingFangSC;
+  font-size: 10px;
+  font-weight: normal;
+  color: #ff19a0;
+}
+.star {
+  display: flex;
+  align-items: center;
+}
+.xx {
+  width: 10px;
+  height: 9.26px;
+  margin: 0 0 2px 6px;
+}
+.comment {
+  margin-top: 5px;
+}
+.ct {
+  font-family: PingFangSC;
+  font-size: 12px;
+  font-weight: normal;
+  color: #726e71;
+}
+.display-cw {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.comments-y {
+  width: 64%;
+  display: flex;
+  margin: 20px auto;
+  /* justify-content: center; */
+  justify-content: space-around;
+}
+.cw {
+  width: 85px;
+  height: 85px;
+  border-radius: 10px;
+}
+.customer-f3 {
+  padding: 20px 0;
+  box-sizing: border-box;
+  transition: all ease 0.6s;
+}
+
+.customer-f {
+  padding: 20px 0 10px 0;
+  box-sizing: border-box;
+  background: #efefef;
+  transition: all ease 0.6s;
+}
+.ys{
+  margin-top: 15px;
+}
+.zr1{
+  width: 180px;
+height: 180px;
+margin-top: 20px;
+}
 .nav {
   margin: 20px 0;
 }
@@ -209,6 +592,78 @@ onMounted(() => {
   .news-container > li > .circle {
     display: none;
   }
+}
+/* 媒体查询（手机） */
+@media screen and (max-width: 768px){
+    .bd1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj2.png');
+  }
+  .comments-y {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0;
+    /* margin: 20px auto; */
+    /* justify-content: center; */
+    flex-direction: column;
+  }
+  .case-item {
+    width: 100%;
+    height: 280px;
+    border-radius: 8px;
+    background: #ffffff;
+    padding: 10px;
+    margin-top: 10px;
+  }
+  .cw {
+    width: 32%;
+    height: 120px;
+    border-radius: 10px;
+  }
+  .avatar1 {
+    width: 40px;
+    height: 40px;
+  }
+  .customer-f {
+  padding: 1px 16px 2px 16px;
+  box-sizing: border-box;
+  background: #efefef;
+  transition: all ease 0.6s;
+}
+.whyChooseUs{
+  padding: 1px 16px 2px 16px;
+}
+
+.container{
+  padding: 0;
+}
+.project{
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  margin: 10px auto;
+}
+.project2{
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+  /* margin: 10px auto; */
+}
+
+.r1{
+ top: 187.14px;
+width:100%;
+border-radius: 8px;
+margin: 8px auto;
+}
+
+}
+/* 媒体查询（平板） */
+@media screen and (min-width: 768px) and (max-width: 996px){
+
 }
 </style>
 
diff --git a/src/view/Service.vue b/src/view/Service.vue
index 9f466ac..4e4485c 100644
--- a/src/view/Service.vue
+++ b/src/view/Service.vue
@@ -1,88 +1,209 @@
 <template>
-    <div id="Service">
-        <div class="container text-center">
-            <h3>我们的服务</h3>
-            <p style="color: #b2b2b2">The Best Service You Never See</p>
-        </div>
-        <div class="container">
-            <div class="Service-container row">
-                <div
-                    v-for="(item, index) in serviceList"
-                    :key="index"
-                    class="Service-item col-md-3 col-sm-6 col-xs-12 slideInUp wow"
-                    @click="ServiceClick(item.id)"
-                >
-                    <div class="Service-item-wrapper">
-                        <div class="Service-item-top">
-                            <h4>{{ item.title }}</h4>
-                            <i></i>
-                            <p>{{ item.eng_title }}</p>
-                        </div>
-                        <div class="Service-item-img">
-                            <img :src="item.img" alt="服务" />
-                        </div>
-                        <div class="Service-item-border"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div id="Service">
+    <img class="bd1" src="@/assets/img/bd1.png" alt="" />
+    <div class="container">
+      <div class="content">
+        <p class="p1">移动洗护/上门服务，省心便捷</p>
+        <p class="p2">
+          免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
+        </p>
+        <p class="p2">
+          一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
+        </p>
+        <p class="p2">
+          灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
+        </p>
+        <p class="p2">
+          恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
+        </p>
+      </div>
+      <img class="wago1" src="@/assets/img/wago1.png" alt="" />
     </div>
+    <div class="container2">
+      <img class="wago2" src="@/assets/img/wago2.png" alt="" />
+      <div class="content">
+        <p class="p1">移动洗护/上门服务，省心便捷</p>
+        <p class="p2">
+          免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
+        </p>
+        <p class="p2">
+          一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
+        </p>
+        <p class="p2">
+          灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
+        </p>
+        <p class="p2">
+          恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <div class="content">
+        <p class="p1">移动洗护/上门服务，省心便捷</p>
+        <p class="p2">
+          免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
+        </p>
+        <p class="p2">
+          一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
+        </p>
+        <p class="p2">
+          灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
+        </p>
+        <p class="p2">
+          恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
+        </p>
+      </div>
+      <img class="wago3" src="@/assets/img/wago3.png" alt="" />
+    </div>
+    <div class="container2">
+      <img class="wago4" src="@/assets/img/wago4.png" alt="" />
+      <div class="content">
+        <p class="p1">移动洗护/上门服务，省心便捷</p>
+        <p class="p2">
+          免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
+        </p>
+        <p class="p2">
+          一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
+        </p>
+        <p class="p2">
+          灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
+        </p>
+        <p class="p2">
+          恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <div class="content">
+        <p class="p1">移动洗护/上门服务，省心便捷</p>
+        <p class="p2">
+          免去舟车劳顿：专业洗护车上门服务，宠物无需外出，避免焦虑和应激；
+        </p>
+        <p class="p2">
+          一对一专属护理：一车一宠，每只宠物独享洗护空间，安全私密，无交叉感染风险；
+        </p>
+        <p class="p2">
+          灵活预约，随时可享：小程序一键预约，选择最方便的时间和地点；
+        </p>
+        <p class="p2">
+          恒温水洗+智能吹干：专业设备控制水温，舒适洗护，避免宠物着凉；
+        </p>
+      </div>
+      <img class="wago5" src="@/assets/img/wago5.png" alt="" />
+    </div>
+  </div>
 </template>
 
 <script setup name="Service">
-    import { useRouter } from 'vue-router';
-    import { onMounted } from 'vue';
-    import WOW from 'wow.js';
-    import service1 from '@/assets/img/service1.jpg';
-    import service2 from '@/assets/img/service2.jpg';
-    import service3 from '@/assets/img/service3.jpg';
-    import service4 from '@/assets/img/service4.jpg';
-    const serviceList = [
-        {
-            id: 'section-1',
-            title: '散热半导体芯片',
-            eng_title: 'Heat Dissipation Semiconductor Chip',
-            img: service1,
-        },
-        {
-            id: 'section-2',
-            title: 'TEC晶振',
-            eng_title: 'TEC Crystal Oscillator',
-            img: service2,
-        },
-        {
-            id: 'section-3',
-            title: '液冷解决方案',
-            eng_title: 'Liquid Cooling Solution',
-            img: service3,
-        },
-        {
-            id: 'section-4',
-            title: '温控应用场景',
-            eng_title: 'Temperature Control Application Scenarios',
-            img: service4,
-        },
-    ];
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+import WOW from 'wow.js'
+import service1 from '@/assets/img/service1.jpg'
+import service2 from '@/assets/img/service2.jpg'
+import service3 from '@/assets/img/service3.jpg'
+import service4 from '@/assets/img/service4.jpg'
+const serviceList = [
+  {
+    id: 'section-1',
+    title: '散热半导体芯片',
+    eng_title: 'Heat Dissipation Semiconductor Chip',
+    img: service1
+  },
+  {
+    id: 'section-2',
+    title: 'TEC晶振',
+    eng_title: 'TEC Crystal Oscillator',
+    img: service2
+  }
+]
 
-    const router = useRouter();
+const router = useRouter()
 
-    function ServiceClick(id) {
-        router.push({
-            name: 'serviceDetail',
-            state: {
-                id,
-            },
-        });
+function ServiceClick(id) {
+  router.push({
+    name: 'serviceDetail',
+    state: {
+      id
     }
-    onMounted(() => {
-        const wow = new WOW();
-        wow.init();
-    });
+  })
+}
+onMounted(() => {
+  const wow = new WOW()
+  wow.init()
+})
 </script>
 
 <style scoped>
-.Service-container {
+/* .Service-container {
   padding: 30px 50px;
+  display: flex;
+} */
+.container {
+  display: flex;
+  width: 60%;
+  margin-top: 40px;
+  justify-content: space-between;
+}
+.container2 {
+  display: flex;
+  width: 70%;
+  margin-top: 40px;
+  justify-content: space-between;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.container4 {
+  display: flex;
+  width: 84%;
+  margin-top: 40px;
+  justify-content: space-between;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.p1 {
+  font-family: PingFangSC;
+  font-size: 16px;
+  font-weight: normal;
+  color: #333333;
+}
+.p2 {
+  font-family: PingFangSC;
+  font-size: 14px;
+  font-weight: normal;
+  color: #666666;
+}
+.content {
+  width: 588px;
+  height: 243px;
+}
+.bd1 {
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.wago1 {
+  width: 588px;
+  height: 330.75px;
+}
+.wago2 {
+  width: 588px;
+  height: 330.75px;
+}
+.wago3 {
+  width: 588px;
+  height: 330.75px;
+}
+.wago4 {
+  width: 588px;
+  height: 330.75px;
+}
+.wago5 {
+  width: 588px;
+  height: 330.75px;
 }
 .Service-item {
   margin-bottom: 50px;
@@ -148,4 +269,82 @@
   width: 90%;
   height: 90%;
 }
+/* 媒体查询（手机） */
+@media screen and (max-width: 768px) {
+  .bd1 {
+    width: 100%;
+    height: 500px;
+    content: url('@/assets/img/sj1.png');
+  }
+  .wago1 {
+    width: 80%;
+    margin: 0 auto;
+    height: 162px;
+    content: url('@/assets/img/cat1.png');
+  }
+  .wago2 {
+   width: 80%;
+    margin: 0 auto;
+    height: 162px;
+    content: url('@/assets/img/cat2.png');
+  }
+  .wago3 {
+   width: 80%;
+    margin: 0 auto;
+    height: 162px;
+    content: url('@/assets/img/cat3.png');
+  }
+  .wago4 {
+     width: 80%;
+    margin: 0 auto;
+    height: 162px;
+    content: url('@/assets/img/cat4.png');
+  }
+  .wago5 {
+    width: 80%;
+    margin: 0 auto;
+    height: 162px;
+    content: url('@/assets/img/cat5.png');
+  }
+ 
+  .container {
+    display: flex;
+    width: 100%;
+    margin-top: 20px;
+    flex-direction: column;
+    /* justify-content: space-between; */
+  }
+  .container2 {
+    display: flex;
+    width: 100%;
+    margin-top: 20px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    /* flex-direction: column; */
+    flex-direction: column-reverse;
+    /* justify-content: space-between; */
+  }
+  .container4 {
+    display: flex;
+    width: 100%;
+    margin-top: 20px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    /* flex-direction: column; */
+    flex-direction: column-reverse;
+    /* justify-content: space-between; */
+  }
+  .content {
+    width: 80%;
+    margin: 0 auto;
+  }
+  
+}
+/* 媒体查询（平板） */
+@media screen and (min-width: 768px) and (max-width: 996px) {
+}
 </style>
diff --git a/src/view/WagooCat.vue b/src/view/WagooCat.vue
new file mode 100644
index 0000000..33bc9f1
--- /dev/null
+++ b/src/view/WagooCat.vue
@@ -0,0 +1,259 @@
+<template>
+  <div id="ContactUs">
+       <img class="bank1" src="@/assets/img/bd9.png" alt="" />
+       <div class="brand">
+        <p class="pp1">Wagoo是谁？</p>
+        <p class="pp2">“帮宠到家”旗下品牌--Wagoo致力于打造【一站式移动宠物服务平台】，以“移动宠爱，悦享生活”为起点，聚焦宠物与主人的全方位需求，打破传统宠物店“三公里”限制，为爱宠提供便捷，舒适的上门洗护体验，力求让每一次体验都成为宠物与主人之间的美好回忆。</p>
+         <video src="@/assets/img/sp.mp4" controls class="m1" @play="onPlay" @pause="onPause">
+    </video>
+       <!-- <img class="m1" src="@/assets/img/sp.png" alt="" /> -->
+       <p class="pp3">品牌理念</p>
+        <p class="pp4">Wagoo，将便捷、专业与深情关爱巧妙融合，打造每一次无与伦比的宠物护理体验。 秉承“移动宠爱，悦享生活”的核心理念，我们凭借创新的服务模式与全方位的宠物护理解决方案，为宠物与宠物主人开启一段前所未有的愉悦与便捷之旅。</p>
+        <p class="pp4">移动空间，宠爱无界：Wagoo 移动宠物洗护车，颠覆传统，打破时空束缚。无需再受限于宠物店的位置与时间，只需轻触小程序，轻松预约，我们的洗护车便如约而至，上门服务。这份随时随地的便捷，让宠物主人在繁忙生活中也能随时给予爱宠最贴心的关怀与呵护。</p>
+        <p class="pp4">专业护理，尊享品质：深知专业护理对宠物健康的重要性，移动洗护车 Wagoo car汇聚专业美容师与训犬师精英团队，他们技艺精湛，经验丰富，为宠物提供洗澡、美容、疫苗接种、训练寄养等一站式服务。我们精选国际宠物赛级洗护用品，确保每一次护理都是对宠物的极致宠爱，让宠物享受超凡体验。</p>
+        <p class="pp4">社交互动，乐在其中：在Wagoo 的移动洗护车上，宠物不仅能享受专业护理，还能结识新朋友。我们定期举办宠物聚会与主题活动，为宠物与宠物主人搭建一个交流分享的欢乐平台。在这里，宠物在护理中感受乐趣与陪伴，宠物主人也能结识志同道合的朋友，共同分享养宠的点滴快乐与宝贵经验。</p>
+        <p class="pp4">零售服务，一应俱全：为了更全面地满足宠物主人的需求，Wagoo 移动洗护车还提供宠物零售服务。我们精心挑选各类宠物食品、玩具、用品等商品，让宠物主人在享受护理服务的同时，也能一站式解决宠物的所有日常需求。这种全方位、一站式的服务模式，不仅提升了用户的便捷性，更彰显了Wagoo 品牌的综合竞争力与独特魅力。</p>
+
+       </div>
+      
+  </div>
+</template>
+<script setup name="ContactUs">
+import WOW from 'wow.js'
+import { onMounted } from 'vue'
+  import { reactive, ref } from 'vue';
+     const itemValu = ref('前端开发')
+
+// 百度地图BMap构造函数
+let BMap = null
+const navList = [
+        {
+            name: '前端开发',
+        },
+        {
+            name: '后端开发',
+        },
+        {
+            name: '测试工程',
+        },
+        {
+            name: 'ul设计',
+        },
+        {
+            name: '产品经理',
+        },
+        {
+            name: '项目经理',
+        }
+    ];
+onMounted(() => {
+  // BMap = window.BMap
+  // var map = new BMap.Map('map') // 创建地图实例
+  // var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
+  // map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
+  // map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
+  // var marker = new BMap.Marker(point) // 创建标注
+  // map.addOverlay(marker) // 将标注添加到地图中
+  // var opts = {
+  //   width: 50, // 信息窗口宽度
+  //   height: 10, // 信息窗口高度
+  //   title: '武汉XXX公司' // 信息窗口标题
+  // }
+  // var infoWindow = new BMap.InfoWindow(
+  //   `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
+  //    <br>
+  //    <span>联系方式：423</span>`,
+  //   opts
+  // ) // 创建信息窗口对象
+  // map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
+  // var wow = new WOW()
+  // wow.init()
+})
+function submitForm() {
+  window.open(
+    'https://neveryu.github.io/web-bookmarks/interview/',
+    'web-bookmarks'
+  )
+}
+ function  titlecli(item){
+   itemValu.value = item.name
+}
+</script>
+
+<style scoped>
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.brand{
+    width: 60%;
+    margin: 0 auto;
+}
+.pp1{
+    font-family: PingFangSC;
+font-size: 16px;color:
+ #333333;
+ margin-top: 20px;
+}
+.pp2{
+    font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.pp3{
+    font-family: PingFangSC;
+font-size: 16px;
+color: #333333;
+margin-top: 20px;
+}
+.pp4{
+    font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.m1{
+    margin-top: 30px;
+    width: 100%;
+    height: 675px;
+}
+.title{
+  margin-top: 30px;
+}
+.responsibility{
+  width: 70%;
+  margin: 30px auto;
+}
+.p{
+font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width: 37%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #666666;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 18px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+}
+.h{
+ width: 110%;
+height: 2px;
+background: #FF19A0;
+margin-top: 20px;
+}
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url('../assets/img/banner_1.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.ContactUs-container {
+  padding: 80px 0;
+  transition: all ease 0.5s;
+  box-sizing: border-box;
+}
+#map {
+  width: 100%;
+  height: 365px;
+}
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 768px){
+  .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj9.png');
+  }
+  .m1{
+     width: 100%;
+     height: 162px;
+     content: url('@/assets/img/w-cat.png');
+  }
+  .brand[data-v-03a99893] {
+    width: 90%;
+    margin: 0 auto;
+}
+  .p{
+font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+     
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width:62px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.responsibility[data-v-f270821d] {
+    width: 90%;
+    margin: 30px auto;
+}
+}
+@media screen and (max-width: 997px) {
+  .ContactUs-container {
+    padding: 20px 0;
+  }
+}
+</style>
+
diff --git a/src/view/customer.vue b/src/view/customer.vue
new file mode 100644
index 0000000..655adb5
--- /dev/null
+++ b/src/view/customer.vue
@@ -0,0 +1,372 @@
+<template>
+  <div id="ContactUs">
+  <img class="bank1" src="@/assets/img/bd8.png" alt="" />
+  <div class="pet">
+    <p class="p1">养宠达人合作关系</p>
+    <p class="p2">与⼩红书、微博、抖⾳ 、 B站、微信等社交媒体平台近 500名有养宠的宠物、运动和健康⽣活⽅式类等博主保持合作关系，粉丝量级从1万-500万+不等</p>
+  </div>
+
+  <div class="pet2">
+     <p class="p3">宠物类</p>
+     <div class="head">
+  <img class="expert1" src="@/assets/img/expert1.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert2.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert3.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert4.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert5.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert6.png" alt="" />
+     </div>
+  </div>
+    <div class="pet2">
+     <p class="p3">运动类</p>
+     <div class="head">
+  <img class="expert1" src="@/assets/img/expert7.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert8.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert9.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert10.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert11.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert12.png" alt="" />
+     </div>
+  </div>
+    <div class="pet2">
+     <p class="p3">生活方式类</p>
+     <div class="head">
+  <img class="expert1" src="@/assets/img/expert13.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert14.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert15.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert16.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert17.png" alt="" />
+  <img class="expert1" src="@/assets/img/expert18.png" alt="" />
+     </div>
+  </div>
+
+    <div class="whyChooseUs">
+      <div class="container4" >
+         <div class="top1">
+        <span class="c1">合作伙伴</span>
+        <span class="c2" style="margin-bottom:8px;">Partner</span>
+      </div>
+      <div class="project3">
+         <img class="zr1" src="@/assets/img/hz1.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz2.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz3.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz4.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz5.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz6.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz7.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz8.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz9.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz10.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz11.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz12.png" alt="" />
+           <img class="zr1" src="@/assets/img/hz13.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz14.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz15.png" alt="" />
+          <img class="zr1" src="@/assets/img/hz16.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz17.png" alt="" />
+         <img class="zr1" src="@/assets/img/hz18.png" alt="" />
+      </div>
+   
+      </div>
+    </div>
+
+  </div>
+</template>
+<script setup name="ContactUs">
+import WOW from 'wow.js'
+import { onMounted } from 'vue'
+  import { reactive, ref } from 'vue';
+     const itemValu = ref('前端开发')
+
+// 百度地图BMap构造函数
+let BMap = null
+onMounted(() => {
+})
+function submitForm() {
+  window.open(
+    'https://neveryu.github.io/web-bookmarks/interview/',
+    'web-bookmarks'
+  )
+}
+ function  titlecli(item){
+   itemValu.value = item.name
+}
+</script>
+
+<style scoped>
+.whyChooseUs{
+  padding:10px 20px 20px 20px;
+  background: #F9F9F9;
+}
+.top1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+.zr1{
+  width: 180px;
+height: 180px;
+margin-top: 20px;
+}
+.project3{
+  display: flex;
+  margin:0 auto;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.whyChooseUs2{
+  padding:20px 20px 20px 20px;
+}
+.container4{
+  width:81%;
+  margin: 0 auto;
+}
+.container{
+  width: 68%;
+}
+.c1 {
+  color: #333333;
+  font-family: PingFangSC;
+  font-size: 32px;
+  font-weight: 500;
+}
+.c2 {
+  font-family: PingFangSC;
+  font-size: 20px;
+  font-weight: normal;
+  color: #999999;
+}
+
+.item {
+  text-align: center;
+  flex: 1 1 20%; /* 或者其他百分比，确保在大屏时每个项占用25%的宽度 */
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.title{
+  margin-top: 30px;
+}
+.pet{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-top: 40px;
+}
+.pet2{
+     display: flex;
+    flex-direction: column;
+    width: 63%;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 10px;
+}
+.p1{
+      font-family: PingFangSC;
+      font-size: 30px;
+      font-weight: 500;
+      color: #333333;
+}
+.head{
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+.expert1{
+    width: 180px;
+height: 180px;
+}
+.p2{ 
+      font-family: PingFangSC;
+      font-size: 14px;
+      font-weight: normal;
+      color: #333333;
+}
+.p3{
+    font-family: PingFangSC;
+    font-size: 16px;
+    font-weight: normal;
+    color: #333333;
+}
+.responsibility{
+  width: 70%;
+  margin: 30px auto;
+}
+.p{
+font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width: 37%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #666666;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 18px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+}
+.h{
+ width: 110%;
+height: 2px;
+background: #FF19A0;
+margin-top: 20px;
+}
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url('../assets/img/banner_1.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.ContactUs-container {
+  padding: 80px 0;
+  transition: all ease 0.5s;
+  box-sizing: border-box;
+}
+#map {
+  width: 100%;
+  height: 365px;
+}
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 768px){
+  .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj8.png');
+  }
+  .p{
+font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+.expert1{
+    width:39%;
+    height: 136px;
+}
+.head{
+    display: flex;
+    margin: 0 auto;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+.zr1{
+  width: 60px;
+height: 60px;
+margin-top: 0px;
+}
+.p1{
+    font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #333333;
+}
+.p2{
+    font-family: PingFangSC;
+    width: 85%;
+    margin: 0 auto;
+font-size: 11px;
+font-weight: normal;
+color: #666666
+}
+.p3{
+    font-family: PingFangSC;
+font-size: 12px;
+font-weight: normal;
+color: #333333;
+}
+.container4 {
+    width: 100%;
+    margin: 0 auto;
+}
+.pet2{
+     display: flex;
+    flex-direction: column;
+    width: 90%;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 10px;
+}
+     
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width:62px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.responsibility[data-v-f270821d] {
+    width: 90%;
+    margin: 30px auto;
+}
+}
+@media screen and (max-width: 997px) {
+  .ContactUs-container {
+    padding: 20px 0;
+  }
+}
+</style>
+
diff --git a/src/view/franchise.vue b/src/view/franchise.vue
new file mode 100644
index 0000000..a4699db
--- /dev/null
+++ b/src/view/franchise.vue
@@ -0,0 +1,820 @@
+<template>
+  <div id="ContactUs">
+       <img class="bank1" src="@/assets/img/bd6.png" alt="" />
+       <div class="franchise">
+        <p class="selek">请选择加盟的地区,并填写下列的表单</p>
+       <el-form :model="form" label-width="auto" >
+
+   <div class="selekt"> 
+       <!-- <div class="se1">  -->
+         <el-form-item label="请选择省市区">
+    <el-cascader  
+    class="Please-s"
+    placeholder="请选择"
+    v-model="selectedOptions"  
+    :options="options"  
+    @change="handleChange2"  
+    clearable  
+    collapse-tags  
+  ></el-cascader>  
+    </el-form-item>
+       <!-- </div>  -->
+    </div>
+   
+
+   <p class="selek">个人资料（申请者经营者本人，且需全职在店经营）</p>
+   <div class="selekt">
+    <div class="se1">
+       <el-form-item  label="姓名">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </div>
+    <div class="se2">
+       <el-form-item label="性别">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">男性</el-radio>
+        <el-radio value="Venue">女性</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    </div>
+   </div>
+   
+
+    <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+      <el-form-item label="出生日期">
+      <el-select v-model="form.region" placeholder="请选择出生日期">
+        <el-option label="Zone one" value="shanghai" />
+        <el-option label="Zone two" value="beijing" />
+      </el-select>
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="籍贯">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+
+
+   <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="联络电话">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="手机">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+
+  
+  <div class="selekt">
+    <div class="se1">
+       <el-form-item label="婚姻状况">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">已婚</el-radio>
+        <el-radio value="Venue">未婚</el-radio>
+        <el-radio value="Venue2">离婚</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    </div>
+    <div class="se2">
+       <el-form-item label="子女人数">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+
+    </div>
+
+  </div>
+  
+
+   <!-- <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="配偶姓名">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="配偶职业">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row> -->
+
+   <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="现居地址">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="户籍地址">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+
+
+   <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="邮箱">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="区域人口数">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+
+  <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="主要竞争品牌">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="竞争品牌店数">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+
+
+ <div>
+   <span class="selek">上传三个月内大头照</span><span>（不超过1M）</span>
+    <el-upload
+    ref="uploadRef"
+    class="avatar-uploader"
+    :auto-upload="false"
+    :show-file-list="false"
+    :on-change="handleChange"
+  >
+    <img v-if="previewUrl" :src="previewUrl" class="avatar" />
+    <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
+  </el-upload>
+ </div>
+
+ <div>
+   <span class="selek">教育程度</span>
+   <el-row>
+    <el-col :span="11" style="margin-right:50px;">
+       <el-form-item label="最高教育程度（需已毕业）">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="校名/科系">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+ </div>
+
+
+ <div class="selekt">
+  <div class="se1">
+     <el-form-item label="创业自营经验">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">无</el-radio>
+        <el-radio value="Venue">有</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </div>
+  <div class="se2">
+      <el-form-item label="店名">
+      <el-input class="Shop" v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+  </div>
+ </div>
+
+
+ <div class="selekt">
+  <div class="se1">
+     <el-form-item label="职称">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+  </div>
+  <div class="se2">
+      <div class="staTime">
+          <p class="pp">开始至结束日期</p>
+     <el-date-picker
+                v-model="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                @change="dateChange"
+                :disabledDate="disabledDateFun"
+                 :default-time="defaultTime"
+                @calendar-change="calendarChange"
+              ></el-date-picker>
+      </div>
+  </div>
+
+
+
+ </div>
+  <div>
+   <span class="selek">工作经历1</span>
+   <el-row>
+    <el-col :span="11" style="margin:15px 50px 0 0 ;">
+       <el-form-item label="公司名称">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+     <el-col :span="11">
+     <el-form-item label="职称">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+    </el-col>
+  </el-row>
+ </div>
+
+<div class="selekt">
+  <div class="se1">
+       <el-form-item label="月收入">
+      <el-input v-model="form.name" placeholder="请填写" />
+    </el-form-item>
+  </div>
+  <div class="se2">
+    <div class="staTime">
+          <p class="pp">开始至结束日期</p>
+     <el-date-picker
+                v-model="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                @change="dateChange"
+                :disabledDate="disabledDateFun"
+                 :default-time="defaultTime"
+                @calendar-change="calendarChange"
+              ></el-date-picker>
+      </div>
+  </div>
+</div>
+ 
+
+    <div class="selekt">
+      <div class="se1">
+          <p class="inquire">（1）请问您选择加盟创业的原因为何？</p>
+    <el-form-item label="">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">完善的开店知识</el-radio>
+        <el-radio value="Venue">加盟店整体形象</el-radio>
+        <el-radio value="Venue">完整的教育训练</el-radio>
+        <el-radio value="Venue">方便迅速</el-radio>
+        <el-radio value="Venue">其他</el-radio>
+      </el-radio-group>
+    </el-form-item>
+     <el-input   placeholder="请输入" v-model="form.desc" type="textarea" />
+
+      </div>
+      <div class="se2">
+         <p class="inquire">（2）请问您预计何时加盟创业？</p>
+     <el-form-item label="">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">立即</el-radio>
+        <el-radio value="Venue">3个月内</el-radio>
+        <el-radio value="Venue">3-6个月内</el-radio>
+        <el-radio value="Venue">一年内</el-radio>
+        <el-radio value="Venue">一年后</el-radio>
+        <el-radio value="Venue">其他</el-radio>
+      </el-radio-group>
+    </el-form-item>
+     <el-input v-model="form.desc" placeholder="请输入" type="textarea" />
+      </div>
+    </div>
+  
+
+    <div class="selekt">
+      <div class="se1">
+         <p style="margin-top:20px;">（3）请问您预计投入总资金为</p>
+     <el-input style="margin-top:7px;"  placeholder="请输入" v-model="form.desc" type="textarea" />
+      <p style="margin:10px 0 0 20px;">万元(包含加盟金、装修、租金、人员、食材、执照等)</p>
+
+      </div>
+      <div class="se3">
+         <p>（4）请问您预计何时加盟创业？</p>
+    <el-form-item label="">
+     <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">立即</el-radio>
+        <el-radio value="Venue">3个月内</el-radio>
+        <el-radio value="Venue">3-6个月内</el-radio>
+        <el-radio value="Venue">一年内</el-radio>
+        <el-radio value="Venue">一年后</el-radio>
+        <el-radio value="Venue">其他</el-radio>
+      </el-radio-group>
+     </el-form-item>
+     <el-input style="margin-top:0;"  placeholder="请输入" v-model="form.desc" type="textarea" />
+      </div>
+    </div>
+  
+    <!-- <el-row>
+     <el-col style="display: flex;flex-direction: column;" :span="24" >
+     
+    </el-col>
+  </el-row>
+
+     <el-row>
+     <el-col style="display: flex;flex-direction: column;" :span="24" >
+     
+    </el-col>
+  </el-row> -->
+
+  <div  class="selekt">
+    <div class="se1">
+ <p style="margin-top:10px;">（5）为何想加入？</p>
+     <el-input style="margin-top:0;"  placeholder="请输入" v-model="form.desc" type="textarea" />
+    </div>
+
+  </div>
+
+   <!-- <el-row>
+     <el-col style="display: flex;flex-direction: column;" :span="24" >
+      <p style="margin-top:10px;">（5）为何想加入？</p>
+     <el-input style="margin-top:0;"  placeholder="请输入" v-model="form.desc" type="textarea" />
+    </el-col>
+  </el-row> -->
+
+  <div class="attention">
+    <h5>注意事项</h5>
+    <p class="windo">(1)此窗体仅限申请加盟意愿用，谢谢您的配合。</p>
+    <p class="windo">(2)第一阶段书面审核将于5个工作天内回复，请留意邮箱及垃圾信件。</p>
+    <p class="windo">(3)所有审核结果皆由Hr@bcdj.cn加盟咨询系统邮箱回复，请勿轻信wechat、 面访…等其他通知邀约。</p>
+    <p class="windo">(4) 为保护个资，未通过之书面审核数据将定期销毁。</p>
+  </div>
+
+
+  <div class="confirm">
+      <el-button color="#FF19A0" @click="onSubmit">清除</el-button>
+      <el-button color="#FF19A0">送出</el-button>
+  </div>
+    <!-- <el-form-item label="开关">
+      <el-switch v-model="form.delivery" />
+    </el-form-item>
+    <el-form-item label="多选">
+      <el-checkbox-group v-model="form.type">
+        <el-checkbox value="Online activities" name="type">
+          青菜
+        </el-checkbox>
+        <el-checkbox value="Promotion activities" name="type">
+          萝卜
+        </el-checkbox>
+        <el-checkbox value="Offline activities" name="type">
+          白菜
+        </el-checkbox>
+        <el-checkbox value="Simple brand exposure" name="type">
+          番茄
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="单选">
+      <el-radio-group v-model="form.resource">
+        <el-radio value="Sponsor">Sponsor</el-radio>
+        <el-radio value="Venue">Venue</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="活动详情">
+      <el-input v-model="form.desc" type="textarea" />
+    </el-form-item> -->
+  </el-form>
+       
+     
+  </div>
+    </div>
+</template>
+<script setup lang="ts" name="ContactUs">
+import WOW from 'wow.js'
+import { onMounted } from 'vue'
+  import { reactive, ref } from 'vue';
+  import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import type { ElUpload, UploadProps } from 'element-plus'
+import axios from 'axios'
+const previewUrl = ref('') // 图片预览地址
+const selectedFile = ref<File | null>(null) // 选中的文件对象
+const date = ref('')
+const defaultTime = ref<[Date, Date]>([
+  new Date(2000, 1, 1, 0, 0, 0),
+  new Date(2000, 2, 1, 23, 59, 59),
+])
+const uploadRef = ref<InstanceType<typeof ElUpload> | null>(null) // 引用上传组件实例
+ const selectedOptions = ref([]); // 用于存储选中的选项  
+    
+
+/**
+ * 处理文件上传变更的函数
+ *
+ * @param uploadFile 当前上传的文件对象
+ * @param uploadFiles 所有已上传的文件对象数组
+ */
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  selectedFile.value = uploadFile.raw as File;
+  previewUrl.value = URL.createObjectURL(selectedFile.value)
+}
+
+const instance = axios.create({
+  baseURL: 'http://localhost:3000',
+  timeout:4000
+})
+
+// 上传图片的方法,这里将这个方法暴露给父组件使用，方便调用
+const triggerUpload =async ()=>{
+  if(!selectedFile.value) return;
+
+  // 创建FormData对象，用于存放要上传的文件数据
+  const formData = new FormData();
+  // 将文件添加到FormData对象中，这里的'avatar'是后端接收文件的字段名
+  formData.append('avatar', selectedFile.value)
+ try{
+  // 实际使用应该将这个方法进行封装，这里为了演示直接写在组件内部了。
+  const {data} =  await instance({
+    url:'/postFile',
+    method:'post',
+    data:formData,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  })
+  console.log(data)
+   ElMessage({
+    message: '头像上传成功!',
+    type: 'success',
+  })
+ }catch(err){
+  console.log(err)
+ }
+}
+defineExpose({
+  triggerUpload
+})
+  const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+     const itemValu = ref('前端开发')
+const options = [  
+  {  
+    value: 'zhejiang',  
+    label: '浙江',  
+    children: [  
+      {  
+        value: 'hangzhou',  
+        label: '杭州',  
+        children: [  
+          {  
+            value: 'xihu',  
+            label: '西湖区',  
+            // 可以继续添加更细分的区域  
+          },  
+          // ...其他区  
+        ],  
+      },  
+      // ...其他市  
+    ],  
+  },  
+  // ...其他省  
+];
+// 百度地图BMap构造函数
+let BMap = null
+const navList = [
+        {
+            name: '前端开发',
+        },
+        {
+            name: '后端开发',
+        },
+        {
+            name: '测试工程',
+        },
+        {
+            name: 'ul设计',
+        },
+        {
+            name: '产品经理',
+        },
+        {
+            name: '项目经理',
+        }
+    ];
+onMounted(() => {
+})
+const onSubmit = () => {
+  console.log('submit!')
+}
+ function handleChange2(value, selectedData) {  
+      console.log(value, selectedData);  
+    }  
+
+function submitForm() {
+  window.open(
+    'https://neveryu.github.io/web-bookmarks/interview/',
+    'web-bookmarks'
+  )
+}
+ function  titlecli(item){
+   itemValu.value = item.name
+}
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+  margin-right: 20px;
+}
+
+::v-deep .el-form-item {
+    display: flex;
+    width: 520px;
+    --font-size: 14px;
+    margin-bottom: 18px;
+}
+::v-deep .el-textarea__inner{
+  width: 520px;
+}
+
+::v-deep .el-tooltip__trigger{
+  width: 340px;
+}
+/* .Shop{
+  width: 430px;
+} */
+
+.staTime{
+  width: 520px;
+  display: flex;
+  align-items: center;
+}
+.selekt{
+  display: flex;
+}
+.se1{
+  width: 55%;
+
+}
+.se2{
+    width: 55%;
+}
+.se3{
+    width: 55%;
+    margin-top: 20px;
+}
+.Please-s{
+  width: 330px !important;
+}
+
+.confirm{
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.pp{
+  margin: 2px 10px 0 0 ;
+
+}
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.franchise{
+    width: 60%;
+    margin: 40px auto;
+}
+.selek{
+  margin:0 0 10px 99px;
+  font-family: PingFangSC;
+font-size: 16px;
+color: #333333;
+}
+
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url('../assets/img/banner_1.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.ContactUs-container {
+  padding: 80px 0;
+  transition: all ease 0.5s;
+  box-sizing: border-box;
+}
+#map {
+  width: 100%;
+  height: 365px;
+}
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 768px){
+  .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj6.png');
+  }
+  .attention{
+    margin: 0 20px;
+  }
+  .selekt {
+    display: flex;
+      flex-direction: column;
+      overflow: hidden;
+}
+.staTime{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* margin-left: 20px; */
+}
+.pp {
+    margin: 2px 10px 0 20px;
+}
+::v-deep .el-tooltip__trigger{
+  width: 350px;
+}
+.confirm{
+  /* width: 100px; */
+  /* display: flex;
+  justify-content: center; */
+  margin: 40px 0 0 0;
+  overflow: hidden;
+}
+.windo{
+  font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+  .se1{
+    display: flex;
+    flex-direction: column;
+  width: 90%;
+}
+.se2{
+   display: flex;
+    flex-direction: column;
+    width: 90%;
+}
+.franchise[data-v-4fdcdf04] {
+    width: 100%;
+    margin: 40px auto;
+}
+.selek {
+    margin: 0 0 10px 20px;
+    font-family: PingFangSC;
+    font-size: 13px;
+    color: #333333;
+}
+.inquire{
+  margin-top: 20px;
+}
+ ::v-deep .el-form-item__label-wrap{
+  margin-left: 21px !important;
+}
+ ::v-deep .el-select__wrapper{
+  margin-left: 20px;
+  width: 330px;
+}
+::v-deep .el-input__wrapper{
+  margin-left: 20px;
+  width: 333px;
+}
+::v-deep .el-form-item__content{
+  width: 300px;
+}
+ 
+ ::v-deep .el-textarea__inner{
+  margin-left: 20px;
+  width: 333px;
+
+ }
+::v-deep .el-form-item__content{
+width: 350px;
+}
+::v-deep .el-radio-group{
+  margin-left: 20px;
+}
+  
+
+
+ ::v-deep .el-form-item{
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+ ::v-deep .avatar-uploader .el-upload{
+    margin: 20px 0 20px 20px;
+}
+  .p{
+font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+     
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width:62px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.responsibility[data-v-f270821d] {
+    width: 90%;
+    margin: 30px auto;
+}
+}
+@media screen and (max-width: 997px) {
+  .ContactUs-container {
+    padding: 20px 0;
+  }
+}
+</style>
+
+<style >
+.avatar-uploader .el-upload {
+  margin: 20px 0 20px 99px;
+  /* border: 1px dashed var(--el-border-color); */
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+ width: 100px;
+  height: 100px;
+  text-align: center;
+}
+</style>
+
diff --git a/src/view/problem.vue b/src/view/problem.vue
new file mode 100644
index 0000000..446012c
--- /dev/null
+++ b/src/view/problem.vue
@@ -0,0 +1,333 @@
+<template>
+  <div id="ContactUs">
+       <img class="bank1" src="@/assets/img/bd7.png" alt="" />
+       <div class="box">
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">你的宠物美容师有证书吗？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">我们的美容师都是经验丰富的专业人士，但认证要求可能有所不同。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">我可以直接和我的美容师沟通吗？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">是的，通过我们的小程序与您的美容帅沟通现在是可以的。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">如果我想取消怎么办？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">查看我们的小程序的取消政策以了解详细信息。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">你们的洗护服务中,会为猫咪提供药浴吗?</span>
+        </div>
+        <div class="beauty">
+       <p class="me">药浴暂不提供。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">我可以在哪里找到预约费用的明细？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">您可以在提交订单之前查看您的预约费用明细，并在洗护完成后收到订单确认。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">如果我的宠物只需要修剪指甲，我可以单独预定吗？？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">不，我们是一站式服务。如果剪造型，剪指甲等单项服务内容，都暂未上线。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">我在订单信息中没有看到修毛，你们提供这种服务吗？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">修毛和其它基础单项服务内容是包含在洗护流程里的;在预定时建议核查。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">为什么预订时要预先收费？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">为了确保您的预订，我们会在您要求时收取费用。预约可在约定时问前退款，但相对应会在一定时间段扣除手续费。现场单是不存在退款的。</p>
+        </div>
+       </div>
+        <div class="problem">
+        <div class="pet">
+           <img class="q" src="@/assets/img/q.png" alt="" />
+           <span class="m">我应该采取什么步骤来预定宠物美容服务？</span>
+        </div>
+        <div class="beauty">
+       <p class="me">在我们的Wagoo小程序上创建一个账户，添加您的宠物的个人资料和服务地址，然后点击“预定”。</p>
+        </div>
+       </div>
+       </div>
+  </div>
+</template>
+<script setup name="ContactUs">
+import WOW from 'wow.js'
+import { onMounted } from 'vue'
+  import { reactive, ref } from 'vue';
+     const itemValu = ref('前端开发')
+
+// 百度地图BMap构造函数
+let BMap = null
+const navList = [
+        {
+            name: '前端开发',
+        },
+        {
+            name: '后端开发',
+        },
+        {
+            name: '测试工程',
+        },
+        {
+            name: 'ul设计',
+        },
+        {
+            name: '产品经理',
+        },
+        {
+            name: '项目经理',
+        }
+    ];
+onMounted(() => {
+  // BMap = window.BMap
+  // var map = new BMap.Map('map') // 创建地图实例
+  // var point = new BMap.Point(114.54591657517, 30.496032878104) // 创建点坐标
+  // map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
+  // map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
+  // var marker = new BMap.Marker(point) // 创建标注
+  // map.addOverlay(marker) // 将标注添加到地图中
+  // var opts = {
+  //   width: 50, // 信息窗口宽度
+  //   height: 10, // 信息窗口高度
+  //   title: '武汉XXX公司' // 信息窗口标题
+  // }
+  // var infoWindow = new BMap.InfoWindow(
+  //   `<span>地址：武汉市东湖高新技术开发区，马蹄莲<span>
+  //    <br>
+  //    <span>联系方式：423</span>`,
+  //   opts
+  // ) // 创建信息窗口对象
+  // map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口
+  // var wow = new WOW()
+  // wow.init()
+})
+function submitForm() {
+  window.open(
+    'https://neveryu.github.io/web-bookmarks/interview/',
+    'web-bookmarks'
+  )
+}
+ function  titlecli(item){
+   itemValu.value = item.name
+}
+</script>
+
+<style scoped>
+.bank1{
+  width: 100%;
+  height: 360px;
+  margin-top: 40px;
+}
+.box{
+  width: 80%;
+  margin: 0 auto;
+}
+.pet{
+  display: flex;
+  align-items: center;
+  margin-top: 30px;
+}
+.beauty{
+  width: 100%;
+  height: 61px;
+  background: #FFF9FC;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+.me{
+  font-family: PingFangSC;
+font-size: 14px;
+font-weight: normal;
+color: #666666;
+margin-left: 20px;
+}
+.m{
+  font-family: PingFangSC;
+font-size: 16px;
+color: #333333;
+margin-left: 10px;
+}
+.q{
+  width: 14px;
+height: 18px;
+margin-left: 20px;
+}
+.title{
+  margin-top: 30px;
+}
+.responsibility{
+  width: 70%;
+  margin: 30px auto;
+}
+.beauty{
+  width: 100%;
+  height: 61px;
+  background: #FFF9FC;
+  display: flex;
+  align-items: center;
+}
+.p{
+font-family: PingFangSC;
+font-size: 14px;
+color: #666666;
+}
+.title2{
+   display: flex;
+   justify-content: space-around;
+    width: 37%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+.j{
+  font-family: PingFangSC;
+font-size: 18px;
+color: #666666;
+ cursor: pointer;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 18px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+}
+.h{
+ width: 110%;
+height: 2px;
+background: #FF19A0;
+margin-top: 20px;
+}
+.banner {
+  color: #fff;
+  font-size: 30px;
+  height: 150px;
+  line-height: 150px;
+  background-image: url('../assets/img/banner_1.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+}
+.ContactUs-container {
+  padding: 80px 0;
+  transition: all ease 0.5s;
+  box-sizing: border-box;
+}
+#map {
+  width: 100%;
+  height: 365px;
+}
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+@media screen and (max-width: 768px){
+  .bank1{
+     width: 100%;
+     height: 500px;
+     content: url('@/assets/img/sj7.png');
+  }
+  .box{
+  width: 88%;
+  margin: 0 auto;
+}
+  .p{
+font-family: PingFangSC;
+font-size: 11px;
+color: #666666;
+}
+     
+  .j{
+  font-family: PingFangSC;
+font-size: 12px;
+color: #666666;
+ cursor: pointer;
+ margin-left:5px;
+}
+.jp1{
+  width: 320px;
+}
+.j1{
+  font-family: PingFangSC;
+font-size: 12px;
+font-weight: 500;
+color: #FF19A0;
+ cursor: pointer;
+ margin-left:5px;
+
+}
+.h{
+    width: 100%;
+    height: 2px;
+    background: #FF19A0;
+    margin-top: 10px;
+ margin-left:5px;
+
+}
+.title{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  overflow: auto;
+  margin: 0 auto;
+  /* margin-top: 30px; */
+}
+.title2{
+   display: flex;
+   width:800px;
+}
+.title-item{
+  width:62px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+.responsibility[data-v-f270821d] {
+    width: 90%;
+    margin: 30px auto;
+}
+}
+@media screen and (max-width: 997px) {
+  .ContactUs-container {
+    padding: 20px 0;
+  }
+}
+</style>
+