diff --git a/src/pages/service/accompany.vue b/src/pages/service/accompany.vue
index c0892db..a062285 100644
--- a/src/pages/service/accompany.vue
+++ b/src/pages/service/accompany.vue
@@ -6,11 +6,307 @@
   },
 }
 </route>
-
 <template>
-  <view class=""></view>
+  <view class="hot">
+    <keep-alive>
+      <view class="container">
+        <view style="position: fixed; top: 0; z-index: 19">
+          <view style="position: relative">
+            <view
+              style="
+                background: #761ee9;
+                width: 100vw;
+                height: 230rpx;
+                border-radius: 0 0 28rpx 28rpx;
+                padding-top: 280px;
+              "
+            ></view>
+            <view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
+            <!-- 轮播图 -->
+            <view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
+              <view style="padding: 0 30rpx">
+                <swiper
+                  :autoplay="autoplay"
+                  :duration="duration"
+                  :indicator-dots="indicatorDots"
+                  :interval="interval"
+                  circular
+                  class="swiper"
+                  indicator-active-color="rgba(0, 0, 0, 0.3)"
+                  indicator-color="rgba(255, 255, 255, 0.5)"
+                  style="height: 300rpx"
+                >
+                  <!--                  @click="clickSwiper(item.redirectUrl)"-->
+                  <swiper-item v-for="(item, index) in swiperList" :key="index">
+                    <image
+                      :src="item.url"
+                      style="height: 100%; width: 100%; border-radius: 30rpx"
+                    ></image>
+                  </swiper-item>
+                </swiper>
+              </view>
+            </view>
+          </view>
+          <!-- 宠物托运下半内容 -->
+          <view class="accompany_button">
+            <view class="acc_navigation">
+              <div>
+                <img src="" alt="" />
+                <span>先行赔付</span>
+              </div>
+              <div>
+                <img src="" alt="" />
+                <span>喂水喂食</span>
+              </div>
+              <div>
+                <img src="" alt="" />
+                <span>全程监管</span>
+              </div>
+              <div>
+                <img src="" alt="" />
+                <span>安全保障</span>
+              </div>
+            </view>
+          </view>
+        </view>
+      </view>
+    </keep-alive>
+    <uni-popup ref="popupQr" type="dialog">
+      <uni-popup-dialog
+        :before-close="true"
+        :duration="2000"
+        content="是否拨打电话"
+        @close="close"
+        @confirm="confirm"
+      ></uni-popup-dialog>
+    </uni-popup>
+    <home-tabbar :propIndex="2"></home-tabbar>
+    <s-tabbar v-if="tabbar !== ''" :path="tabbar" />
+  </view>
 </template>
 
-<script lang="js" setup></script>
+<script lang="js" setup>
+import { imgUrl, toPath } from '@/utils/commUtils'
+// 轮播图
+const swiperList = [
+  {
+    url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
+  },
+  {
+    url: 'C:/Users/Administrator/Desktop/picture(2)/100-1.png',
+  },
+]
+const status = 'loadmore'
+const indicatorDots = true
+const autoplay = true
+const interval = 5000
+const duration = 500
+const screenInfoList = []
+const locationInfo = {
+  pageNum: 1,
+  pageSize: 10,
+  lat: 39.908868,
+  lon: 116.404424,
+  labelList: [1, 2, 3],
+}
+const total = 0
+const scrollTop = 0
 
-<style lang="scss" scoped></style>
+const props = defineProps({
+  tabbar: {
+    type: [String, Boolean],
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.status_bar {
+  height: var(--status-bar-height);
+  width: 100%;
+}
+
+page {
+  height: 100%;
+  background: #f6f7f9;
+}
+
+.hot {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f7f7fa;
+
+  .backColor {
+    background: #761ee9;
+    height: 230rpx;
+  }
+
+  .container {
+    position: absolute;
+    top: 20rpx;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .swiperImg {
+    margin-bottom: 30rpx;
+  }
+
+  .hotScreen {
+    position: relative;
+    box-sizing: border-box;
+    margin: 0 0 30rpx 0;
+    height: 320rpx;
+    width: 100%;
+    flex: 1;
+    padding: 0 30rpx;
+    background: #f6f7f9;
+
+    .backImg {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      width: 100%;
+      height: 250rpx;
+      box-sizing: border-box;
+      padding: 0;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      border-radius: 20rpx 20rpx 0 0;
+    }
+
+    .bottomInfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20rpx;
+      background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+
+      .screenName {
+        color: #fff;
+        font-size: 28rpx;
+        font-weight: 700;
+      }
+
+      .rightInfo {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        font-size: 26rpx;
+
+        .area {
+          margin-right: 30rpx;
+        }
+
+        .location {
+          display: flex;
+          align-items: center;
+
+          image {
+            width: 40rpx;
+            height: 40rpx;
+          }
+        }
+      }
+    }
+
+    .screenBottomInfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 0 30rpx;
+      height: 80rpx;
+      background: #fff;
+      font-size: 22rpx;
+      border-radius: 0 0 20rpx 20rpx;
+
+      .leftHotInfo {
+        display: flex;
+        align-items: center;
+
+        text {
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        image {
+          margin-right: 10rpx;
+          width: 30rpx;
+          height: 35rpx;
+        }
+
+        .rank {
+          position: relative;
+          display: flex;
+          align-items: center;
+          font-size: 26rpx;
+          margin-left: 30rpx;
+
+          .round {
+            position: absolute;
+            left: 70rpx;
+            top: -15rpx;
+            width: 30rpx;
+            height: 30rpx;
+            line-height: 30rpx;
+            text-align: center;
+            border-radius: 18rpx;
+            font-size: 18rpx;
+            color: #fff;
+          }
+
+          .rankAll {
+            padding: 5rpx 8rpx;
+            width: 70rpx;
+            height: 30rpx;
+            line-height: 30rpx;
+            text-align: center;
+            color: #ff7300;
+            background: #feebdb;
+            border-radius: 10rpx;
+          }
+
+          .rankCity {
+            padding: 5rpx 8rpx;
+            width: 70rpx;
+            height: 30rpx;
+            line-height: 30rpx;
+            text-align: center;
+            color: #3917dd;
+            border-radius: 10rpx;
+            background: #ebe7fc;
+          }
+        }
+      }
+
+      .screenPrice {
+        text:nth-child(1) {
+          font-weight: 700;
+          color: #ff145b;
+          font-size: 34rpx;
+          margin-right: 6rpx;
+        }
+      }
+    }
+  }
+}
+
+.accompany_button {
+  padding: 0 10px;
+  padding-right: 100px;
+  margin-top: 120rpx;
+  border-radius: 70px; /* 圆角效果 */
+  background-color: #ffffff;
+}
+
+.acc_navigation {
+  height: 150rpx;
+  display: flex;
+  width: 80%;
+  align-items: center;
+  background-color: #ffefeb;
+}
+</style>
diff --git a/src/pages/service/knowledge.vue b/src/pages/service/knowledge.vue
index 30ea8e7..0a1f2b4 100644
--- a/src/pages/service/knowledge.vue
+++ b/src/pages/service/knowledge.vue
@@ -8,9 +8,197 @@
 </route>
 
 <template>
-  <view class=""></view>
+  <view>
+    <image :src="imgUrl('@/static/service/1726016191895.png')" class="logo" />
+  </view>
+  <div class="pet-questions" v-if="!isOpen">
+    <!--  标题  -->
+    <div class="question">宠物问问</div>
+    <!-- 提问框 -->
+    <div class="question-box">
+      <textarea v-model="question" class="question-input" placeholder="猫粮可以混着吃吗"></textarea>
+      <button class="submit-btn" @click="submitQuestion">提问</button>
+    </div>
+
+    <!-- 底部卡片 -->
+    <div @click="toggleContent">
+      <image :src="imgUrl('@/static/service/1726020804039.png')" class="cat-card_button" />
+    </div>
+  </div>
+  <div class="cards">
+    <div class="cards_internal">
+      <image
+        :src="imgUrl('@/static/service/1726038575406.png')"
+        style="height: 15px; width: 70px"
+      />
+      <div class="title">大家都在看</div>
+      <div class="card_internal">
+        <div class="card">
+          <div class="card-title">萌宠早报</div>
+          <p>猫不肯吃药怎么办？</p>
+        </div>
+        <div class="card">
+          <div class="card-title">狗狗喝了驱虫药</div>
+          <p>驱虫药吃嗜正常吗</p>
+        </div>
+      </div>
+    </div>
+    <!-- 宠物宝典的底部导航 -->
+    <div class="bottom-nav">
+      <div class="bottom_picture">
+        <image :src="imgUrl('@/static/service/1726016220244.png')" class="cat-card" />
+      </div>
+      <div class="bottom_picture">
+        <image :src="imgUrl('@/static/service/1726016243633.png')" class="cat-card" />
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="js" setup></script>
+<script lang="js" setup>
+import { ref, reactive } from 'vue'
 
-<style lang="scss" scoped></style>
+import { imgUrl, toPath } from '@/utils/commUtils'
+
+const question = ref('')
+const questions = ref([])
+const isOpen = false // 控制卡片的展开与收起
+
+function submitQuestion() {
+  if (question.value.trim()) {
+    questions.value.push(question.value)
+    question.value = ''
+  }
+}
+function toggleContent() {
+  this.isOpen = !isOpen
+}
+</script>
+
+<style lang="scss" scoped>
+.pet-questions {
+  background-color: #dfede4;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 10px 0 10px;
+}
+
+.question-box {
+  width: 90%;
+  background-color: white;
+  border-radius: 10px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.question-input {
+  width: 100%;
+  height: 110px;
+  border-radius: 50px;
+  padding: 10px;
+  font-size: 16px;
+}
+
+.submit-btn {
+  background-color: #34c759; /* 按钮的绿色背景 */
+  color: white; /* 按钮文字的白色 */
+  border: none; /* 去除边框 */
+  padding: 0 30px; /* 调整内边距 */
+  font-size: 16px; /* 调整字体大小 */
+  border-radius: 70px; /* 圆角效果 */
+  cursor: pointer; /* 鼠标悬停时显示为手型 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加按钮的阴影效果 */
+  outline: none; /* 去除点击后的轮廓 */
+  transition: background-color 0.3s ease; /* 添加渐变效果 */
+  height: 40px;
+  right: -110px;
+}
+
+.cards {
+  margin-top: 1px;
+  background-color: #f0f5f2;
+  justify-content: space-between;
+  border-radius: 20px; /* 圆角效果 */
+  height: 100%;
+}
+
+.card {
+  background-color: white;
+  border-radius: 10px;
+  height: 170px;
+  width: 100%;
+  padding: 15px;
+  margin-right: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  color: #56c98d;
+  font-weight: bold;
+  line-height: 50px;
+}
+
+.bottom-nav {
+  height: 80px;
+  width: 100%;
+  background-color: white;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  align-items: center;
+  bottom: 0;
+  left: 0;
+}
+
+.iconfont {
+  font-size: 24px;
+}
+
+.cat-card {
+  width: 44px;
+  height: 44px;
+}
+.cat-card_button {
+  height: 95px;
+  width: 100%;
+}
+.question {
+  font-size: 24px;
+  margin: 110px 0 20px 0;
+}
+.logo {
+  width: 34px;
+  height: 34px;
+  left: -170px;
+}
+.title {
+  color: #8d9f8b;
+  font-size: 16px;
+  margin: 20px 0;
+  left: 25px;
+  position: absolute;
+}
+.card_internal {
+  width: 95%;
+  padding-top: 50px;
+  display: flex;
+}
+.cards_internal {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+}
+.bottom_picture {
+  width: 45%;
+  padding-left: 70px;
+  align-items: center;
+}
+</style>