diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 9df5d89..f2ae5b2 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -1,87 +1,89 @@
 <template>
   <view class="create-service-order">
-    <view class="create-service-wrapper">
-      <view class="order-header">
-        <text>创建服务工单</text>
+    <view
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
+    >
+      <view
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
+      >
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
       </view>
-      <view class="order-content">
-        <view class="order-item">
-          <image src="./images/icon_service.png" class="order-icon"></image>
-          <uni-data-select
-            v-if="!isCallSuccess && workOrderTypeList.length > 0"
-            class="order-select"
-            placeholder="请选择服务工单"
-            v-model="workOrderTypeName"
-            :localdata="workOrderTypeListSelectData"
-            @change="changeWorkOrderType"
-          ></uni-data-select>
-          <text v-else class="order-description">{{ workOrderTypeName }}</text>
-        </view>
-        <view class="order-line"></view>
-        <view class="order-details">
-          <view class="detail-item">
-            <text class="detail-label">房间号：</text>
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写房间号"
-              v-model="roomId"
-            />
-            <text v-else class="detail-value">{{ roomId }}</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">服务时间：</text>
-            <text class="detail-value">2025-08-11 14:00</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">联系房客：</text>
-            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写联系人"
-              v-model="contactName"
-            />
-            <text v-else class="detail-value">{{ contactName }}</text>
-          </view>
-          <view class="detail-item">
-            <text class="detail-label">联系电话：</text>
-            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写联系电话"
-              v-model="contactPhone"
-            />
-            <text v-else class="detail-value">{{ contactPhone }}</text>
-          </view>
+
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
+        <view
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <text class="font-500 line-height-22 mr-20">房间号</text>
+          <input placeholder="请填写房间号" v-model="roomId" />
         </view>
 
-        <!-- 呼叫前显示立即呼叫按钮 -->
-        <button v-if="!isCallSuccess" class="order-button" @click="handleCall">
-          立即呼叫
-        </button>
+        <view
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
+        >
+          <text class="font-500 line-height-22 mr-20">联系电话</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
+        </view>
 
-        <!-- 呼叫成功后显示两个按钮 -->
-        <view v-else class="order-buttons">
-          <button class="order-button-secondary" @click="viewWorkOrder">
-            查看工单
-          </button>
-          <button
-            v-if="!isMarkCompleted"
-            class="order-button-primary"
-            @click="markCompleted"
+        <view
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <view class="font-500 line-height-22 mb-12">需求信息描述</view>
+          <textarea
+            class="h-80"
+            placeholder="请输入需求信息描述"
+            placeholder-class="font-size-14 font-400"
+            maxlength="100"
+            v-model="contactText"
+          />
+        </view>
+
+        <view
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
+        >
+          <view class="font-500 line-height-22 mb-12">照片上传</view>
+          <view
+            class="bg-white p-24 rounded-5 inline-block"
+            @click="handleChooseImage"
           >
-            已完成
-          </button>
+            <uni-icons fontFamily="znicons" size="24" color="#6A717F">
+              {{ zniconsMap["zn-camera"] }}
+            </uni-icons>
+          </view>
         </view>
       </view>
-    </view>
 
-    <view class="footer-help">
-      <image src="./images/icon_volume.png" class="help-icon"></image>
-      <text class="help-text">没解决问题？给我打电话吧！</text>
-      <text class="help-phone" @click="makePhoneCall">15185111210</text>
+      <view v-else class="border-box card-content flex flex-items-center p-12">
+        <view class="border-box left flex-full pr-20">
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >房间号：{{ roomId }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >联系方式: {{ contactPhone }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+            >需求描述: {{ contactText }}</view
+          >
+        </view>
+
+        <image
+          class="right rounded-6"
+          src="https://picsum.photos/300/300"
+          mode="aspectFill"
+        />
+      </view>
+
+      <view
+        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+        @click="handleCall"
+      >
+        {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
+      </view>
     </view>
   </view>
 </template>
@@ -89,49 +91,51 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
 import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { createWorkOrder } from "@/request/api/OrderApi";
+import { updateImageFile } from "@/request/api/UpdateFile";
+import { zniconsMap } from "@/static/fonts/znicons.js";
 
-import {
-  createWorkOrder,
-  workOrderTypeListForBiz,
-} from "@/request/api/OrderApi";
 const workOrderTypeId = ref("");
-const workOrderTypeName = ref("");
 const roomId = ref("");
-const contactName = ref("");
 const contactPhone = ref("");
+const contactText = ref("");
+const contentImgUrl = ref("");
 const isCallSuccess = ref(false); // 呼叫成功状态
 const workOrderId = ref(0); // 工单ID
-const workOrderTypeList = ref([]);
-const workOrderTypeListSelectData = ref([]);
-const isMarkCompleted = ref(false);
 
-const changeWorkOrderType = (index) => {
-  if (index < 0 || index >= workOrderTypeListSelectData.value.length) {
+// 处理图片上传
+const handleChooseImage = () => {
+  console.log("选择图片");
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      const file = res.tempFilePaths[0];
+      updateImagehandle(file);
+    },
+    fail: (err) => {
+      console.error("选择图片失败:", err);
+      uni.showToast({
+        title: "选择图片失败",
+        icon: "none",
+        duration: 2000,
+      });
+    },
+  });
+};
+
+const updateImagehandle = (file) => {
+  if (!file) {
     return;
   }
-  const item = workOrderTypeList.value[index];
-  console.log("item:", item);
-  workOrderTypeId.value = item.id;
-  workOrderTypeName.value = item.workOrderTypeName;
+  updateImageFile(file).then((res) => {
+    contentImgUrl.value = res.data?.url || "";
+  });
 };
 
 const handleCall = async () => {
-  // 验证输入
-  if (!roomId.value.trim()) {
-    uni.showToast({
-      title: "请填写房间号",
-      icon: "none",
-      duration: 2000,
-    });
-    return;
-  }
-
-  if (!contactName.value.trim()) {
-    uni.showToast({
-      title: "请填写联系人",
-      icon: "none",
-      duration: 2000,
-    });
+  if (isCallSuccess.value) {
+    // 查看工单
+    viewWorkOrder();
     return;
   }
 
@@ -144,6 +148,15 @@ const handleCall = async () => {
     return;
   }
 
+  if (!contactText.value.trim()) {
+    uni.showToast({
+      title: "请填写需求信息描述内容",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
   sendCreateWorkOrder();
 };
 
@@ -151,33 +164,34 @@ const handleCall = async () => {
 const sendCreateWorkOrder = async () => {
   try {
     const res = await createWorkOrder({
-      contactName: contactName.value,
-      contactPhone: contactPhone.value,
       workOrderTypeId: workOrderTypeId.value,
       roomId: roomId.value,
+      contactPhone: contactPhone.value,
+      content: contactText.value,
+      contentImgUrl: contentImgUrl.value,
     });
 
     if (res.code === 0) {
       // 保存工单ID
       workOrderId.value = res.data?.id || "";
 
-      // 设置呼叫成功状态
+      // 设置成功状态
       isCallSuccess.value = true;
 
       uni.showToast({
-        title: "工单创建成功",
+        title: "呼叫成功",
         icon: "success",
         duration: 2000,
       });
     } else {
       uni.showToast({
-        title: res.message || "创建工单失败",
+        title: res.message || "呼叫失败",
         icon: "none",
         duration: 2000,
       });
     }
   } catch (error) {
-    console.error("创建工单失败:", error);
+    console.error("呼叫失败:", error);
     uni.showToast({
       title: "网络错误，请重试",
       icon: "none",
@@ -186,25 +200,6 @@ const sendCreateWorkOrder = async () => {
   }
 };
 
-/// 获取工单类型
-const getWorkOrderType = async () => {
-  const res = await workOrderTypeListForBiz();
-  if (res.code === 0) {
-    workOrderTypeList.value = res.data;
-    workOrderTypeList.value.forEach((item, index) => {
-      workOrderTypeListSelectData.value.push({
-        value: index,
-        text: item.workOrderTypeName,
-      });
-    });
-
-    if (workOrderTypeList.value.length > 0) {
-      workOrderTypeId.value = workOrderTypeList.value[0].id;
-      workOrderTypeName.value = workOrderTypeList.value[0].workOrderTypeName;
-    }
-  }
-};
-
 // 查看工单
 const viewWorkOrder = () => {
   console.log("查看工单:", workOrderId.value);
@@ -214,35 +209,7 @@ const viewWorkOrder = () => {
   });
 };
 
-// 标记已完成
-const markCompleted = () => {
-  console.log("标记工单已完成:", workOrderId.value);
-  uni.showModal({
-    title: "确认完成",
-    content: "确认标记此工单为已完成吗？",
-    success: (res) => {
-      if (res.confirm) {
-        isMarkCompleted.value = true;
-        // 这里可以调用API标记工单完成
-        uni.showToast({
-          title: "工单已完成",
-          icon: "success",
-          duration: 2000,
-        });
-      }
-    },
-  });
-};
-
-const makePhoneCall = () => {
-  // 使用 uniapp 的 API 拨打电话
-  uni.makePhoneCall({
-    phoneNumber: "15185111210",
-  });
-};
-
 onMounted(() => {
-  getWorkOrderType();
   nextTick(() => {
     setTimeout(() => {
       uni.$emit(SCROLL_TO_BOTTOM, true);
diff --git a/src/components/CreateServiceOrder/styles/index.scss b/src/components/CreateServiceOrder/styles/index.scss
index 7251bf8..a6c319b 100644
--- a/src/components/CreateServiceOrder/styles/index.scss
+++ b/src/components/CreateServiceOrder/styles/index.scss
@@ -1,179 +1,25 @@
-.create-service-wrapper {
-  padding: 12px 0;
-}
-
 .order-header {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: $uni-text-color;
+  height: 48px;
 }
 
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
 .order-content {
-  width: 100%;
-  box-sizing: border-box;
-  background-color: #fff;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.order-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.order-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  border-radius: $uni-border-radius-circle;
-  background-color: #ffa500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.order-description {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  color: $uni-text-color;
-}
-
-.order-line {
-  position: relative;
-  border: 1px dashed #eeeeee;
-  margin-left: -12px;
-  margin-right: -12px;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: -8px;
-    width: 16px;
-    height: 16px;
-    border-radius: $uni-border-radius-50px;
-    background-color: #eff6fa;
-  }
-
-  &::before {
-    left: -8px;
-  }
-
-  &::after {
-    right: -8px;
-  }
-}
-
-.order-details {
-  margin-top: 12px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.detail-label {
-  width: 70px;
-  margin-right: 10px;
-}
-
-.detail-value {
-  color: $uni-text-color;
-}
-
-.detail-input {
-  border: none;
-  outline: none;
-  width: calc(100% - 80px);
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  border-bottom: 1px solid #ddd;
-}
-
-.order-select {
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.order-button {
-  width: 300px;
-  height: 42px;
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border-radius: 20px;
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 呼叫成功后的按钮容器
-.order-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-  gap: 12px;
-}
-
-// 查看工单按钮（次要按钮）
-.order-button-secondary {
-  flex: 1;
-  height: 42px;
-  background: linear-gradient(90deg, #0256ff, #00a6ff);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border: none;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// 已完成按钮（主要按钮）
-.order-button-primary {
-  flex: 1;
-  height: 42px;
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  font-weight: 600;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.footer-help {
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  font-size: $uni-font-size-base;
-  color: #ed6a0c;
+  width: 335px;
 }
 
 .help-icon {
   width: 16px;
-  height: 14px;
-  margin-right: 5px;
+  height: 16px;
 }
 
-.help-text {
-  margin-right: 5px;
+.btn {
+  height: 44px;
 }
 
-.help-phone {
-  cursor: pointer;
+.right {
+  height: 88px;
+  width: 88px;
 }
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index ece6d51..90d22bb 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -3,38 +3,39 @@
     <view
       class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
     >
-      <image
-        class="order-header w-full"
-        src="https://oss.nianxx.cn/mp/static/version_101/home/feedback_1.png"
-        mode="aspectFill"
-      />
-      <view class="order-content border-box p-12">
+      <view
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
+      >
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
+      </view>
+
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
         <view
           class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
         >
           <text class="font-500 line-height-22 mr-20">联系电话</text>
-          <input
-            v-if="!isCallSuccess"
-            placeholder="请填写联系电话"
-            v-model="contactPhone"
-          />
-          <text v-else class="detail-value">{{ contactPhone }}</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
         </view>
         <view
           class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
         >
           <view class="font-500 line-height-22 mb-12">意见内容</view>
           <textarea
-            v-if="!isCallSuccess"
+            class="h-80"
             placeholder="请输入反馈意见"
+            placeholder-class="font-size-14 font-400"
             maxlength="100"
             v-model="contactText"
           />
-          <text v-else class="detail-value">{{ contactText }}</text>
         </view>
 
         <view
-          v-if="!isCallSuccess"
           class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
           @click="handleCall"
         >
@@ -42,9 +43,16 @@
         </view>
       </view>
 
-      <view
-        class="footer-help flex flex-items-center flex-justify-center mb-12"
-      >
+      <view v-else class="border-box left flex-full p-12">
+        <view class="font-size-12 color-525866 line-height-20 mb-4"
+          >联系方式: {{ contactPhone }}</view
+        >
+        <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+          >意见内容: {{ contactText }}</view
+        >
+      </view>
+
+      <view class="footer-help flex flex-items-center pl-12 mb-12">
         <image class="help-icon mr-4" src="./images/icon_volume.png" />
         <text class="font-size-12 font-500 color-FA7319">
           {{ appName }}收到您的意见将第一时间为您处理!
diff --git a/src/components/Feedback/styles/index.scss b/src/components/Feedback/styles/index.scss
index 56d093f..312a8c4 100644
--- a/src/components/Feedback/styles/index.scss
+++ b/src/components/Feedback/styles/index.scss
@@ -2,6 +2,11 @@
   height: 48px;
 }
 
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
+
 .order-content {
   width: 335px;
 }
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index aa54ebf..f752996 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -1,18 +1,17 @@
 <template>
-  <view>
-    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
+  <view class="mt-16">
+    <view v-if="goodsData.commodityPurchaseInstruction">
       <ModuleTitle
         v-if="showTitle"
         :title="goodsData.commodityPurchaseInstruction.templateTitle"
       />
       <view
-        class="use-notice-content"
         v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
           .commodityPurchaseInstructionModuleEntityList"
         :key="index"
       >
         <view
-          class="module-item"
+          class="flex flex-items-start flex-col pt-12 pb-12"
           :class="{
             'border-bottom':
               index <
@@ -21,13 +20,18 @@
                 1,
           }"
         >
-          <view class="module-icon">
+          <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
             <uni-icons fontFamily="znicons" size="20" color="#333">{{
               zniconsMap[moduleItem.moduleIcon]
             }}</uni-icons>
-            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+            <text class="font-size-14 color-171717 line-height-20">{{
+              moduleItem.moduleTitle
+            }}</text>
           </view>
-          <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+          <text
+            class="flex-full font-size-12 color-525866 line-height-20 mt-4"
+            >{{ moduleItem.moduleContent }}</text
+          >
         </view>
       </view>
     </view>
@@ -58,5 +62,8 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@import "./styles/index.scss";
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
 </style>
diff --git a/src/components/GoodDetail/styles/index.scss b/src/components/GoodDetail/styles/index.scss
deleted file mode 100644
index 7ea1b28..0000000
--- a/src/components/GoodDetail/styles/index.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-// 使用须知样式
-.use-notice {
-  margin: 16px 0;
-}
-
-.use-notice-content {
-  .module-item {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 12px 0;
-
-    .module-icon {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 8px;
-      flex-shrink: 0;
-
-      .module-title {
-        font-size: $uni-font-size-base;
-        color: $uni-text-color;
-        text-align: center;
-        word-wrap: break-word;
-        margin-left: 4px;
-      }
-    }
-
-    .module-desc {
-      flex: 1;
-      font-size: $uni-font-size-sm;
-      color: #666;
-      line-height: 1.5;
-      margin-top: 4px;
-    }
-  }
-  .border-bottom {
-    border-bottom: 1px solid #f0f0f0;
-  }
-}
diff --git a/src/components/ImageSwiper/index.vue b/src/components/ImageSwiper/index.vue
index f6154c7..872bf4a 100644
--- a/src/components/ImageSwiper/index.vue
+++ b/src/components/ImageSwiper/index.vue
@@ -22,10 +22,6 @@
       </swiper-item>
     </swiper>
 
-    <view class="custom-indicator">
-      图片{{ active + 1 }}/{{ thumbnails.length }}
-    </view>
-
     <!-- 缩略图部分 -->
     <view
       v-if="showThumbnails"
@@ -52,16 +48,26 @@
               :src="thumb.photoUrl"
               mode="aspectFill"
             ></image>
-            <text>{{ thumb.photoName }}</text>
           </view>
         </view>
       </scroll-view>
+
+      <view class="custom-indicator">
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-camera"]
+        }}</uni-icons>
+        <text class="custom-indicator-text">{{ thumbnails.length }}</text>
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-nav-arrow-right"]
+        }}</uni-icons>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
 import { ref, computed, nextTick } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";
 
 // Props定义
 const props = defineProps({
diff --git a/src/components/ImageSwiper/styles/index.scss b/src/components/ImageSwiper/styles/index.scss
index e4c7f42..66e0eb9 100644
--- a/src/components/ImageSwiper/styles/index.scss
+++ b/src/components/ImageSwiper/styles/index.scss
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
 .image-swiper {
   position: relative;
   width: 100%;
@@ -13,27 +18,32 @@
   height: 100%;
 }
 
-.custom-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: $uni-border-radius-50px;
-  padding: 3px 8px;
-  font-size: 8px;
-  color: #fff;
-}
-
 .thumbnail-box {
   position: absolute;
   left: 12px;
   right: 12px;
-  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+}
+
+.custom-indicator {
+  margin-left: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: $uni-border-radius-50px;
+  padding: 0 6px 4px 8px;
+}
+
+.custom-indicator-text {
+  margin: 0 4px;
+  font-size: 10px;
+  text-align: center;
+  align-items: center;
+  color: #fff;
 }
 
 .thumbnail-scroll {
-  width: 100%;
+  flex: 1;
   height: 100%;
   white-space: nowrap;
 }
@@ -42,7 +52,6 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 5px;
 }
 
 .thumbnail-item {
@@ -52,29 +61,17 @@
 
   &.active {
     .thumbnail-image {
-      border: 1px solid #fff;
+      border: 2px solid #fff;
     }
   }
 }
 
 .thumbnail-item .thumbnail-image {
-  width: 48px;
-  height: 38px;
-  border-radius: 4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   transition: all 0.3s ease;
   display: block;
 }
-
-.thumbnail-item text {
-  color: #fff;
-  font-size: 8px;
-  display: block;
-  margin-top: 4px;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 48px;
-}
diff --git a/src/components/ModuleTitle/styles/index.scss b/src/components/ModuleTitle/styles/index.scss
index c809e87..304970e 100644
--- a/src/components/ModuleTitle/styles/index.scss
+++ b/src/components/ModuleTitle/styles/index.scss
@@ -6,7 +6,7 @@
 
 .module-title {
   font-size: 18px;
-  color: #000;
+  color: #171717;
   position: relative;
   z-index: 1;
 }
diff --git a/src/model/ChatModel.js b/src/model/ChatModel.js
index 53993bd..902aede 100644
--- a/src/model/ChatModel.js
+++ b/src/model/ChatModel.js
@@ -19,7 +19,7 @@ export const CompName = {
   // 快速预定卡片
   quickBookingCard: "quickBookingCard",
   // 服务工单卡片
-  createWorkOrderCard: "createWorkOrderCard",
+  callServiceCard: "callServiceCard",
   // 意见反馈卡片
   feedbackCard: "feedbackCard",
   // 探索发现卡片
@@ -37,7 +37,7 @@ export const Command = {
   // 探索发现
   discovery: "Command.discovery",
   // 呼叫服务
-  createWorkOrderCard: "Command.createWorkOrderCard",
+  callServiceCard: "Command.callServiceCard",
   // 更多
   more: "Command.more",
   // 我的订单
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
new file mode 100644
index 0000000..47bd671
--- /dev/null
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="mt-16">
+    <view
+      v-for="(moduleItem, index) in goodsData.commodityEquipment"
+      :key="index"
+    >
+      <view
+        class="flex flex-items-start flex-col pt-12 pb-12"
+        :class="{
+          'border-bottom': index < goodsData.commodityEquipment.length - 1,
+        }"
+      >
+        <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
+          <uni-icons fontFamily="znicons" size="20" color="#171717">{{
+            zniconsMap[moduleItem.icon]
+          }}</uni-icons>
+          <text class="font-size-12 color-171717 line-height-20">{{
+            moduleItem.title
+          }}</text>
+        </view>
+        <text class="flex-full font-size-12 color-525866 line-height-20 mt-4">{{
+          moduleItem.desc
+        }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+</style>
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index ec7bf79..546416b 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,14 +1,19 @@
 <template>
-  <view class="goods-container">
-    <TopNavBar title="商品详情" />
+  <view class="goods-container bg-gray">
+    <TopNavBar
+      title="商品详情"
+      :backgroundColor="`rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+    />
 
     <!-- 滚动区域 -->
-    <scroll-view class="content-wrapper" scroll-y>
+    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
       <ImageSwiper
         :border-radius="0"
         :height="300"
         :images="goodsData.commodityPhotoList"
-        thumbnailBottom="36px"
+        thumbnailBottom="42px"
       />
 
       <view class="goods-content">
@@ -29,6 +34,9 @@
           :nights="selectedDate.totalDays"
         />
 
+        <!-- 商品设施组件 -->
+        <GoodFacility :goodsData="goodsData" />
+
         <!-- 商品详情组件 -->
         <GoodDetail :goodsData="goodsData" />
       </view>
@@ -73,17 +81,30 @@ import {
 import { ThrottleUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
+
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
 import GoodInfo from "./components/GoodInfo/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
 import LocationCard from "@/components/LocationCard/index.vue";
 import DateSelector from "./components/DateSelector/index.vue";
 import GoodDetail from "@/components/GoodDetail/index.vue";
+import GoodFacility from "./components/GoodFacility/index.vue";
 
 const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
 
+// 处理滚动事件
+const handleScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  // 设置一个阈值，当滚动超过200px时，导航栏完全不透明
+  const threshold = 200;
+  // 计算透明度，范围从0到1
+  navOpacity.value = Math.min(scrollTop / threshold, 1);
+};
+
 // 格式化日期为 yyyy-mm-dd 格式
 const formatDate = (date) => {
   const year = date.getFullYear();
diff --git a/src/pages/goods/styles/index.scss b/src/pages/goods/styles/index.scss
index a724944..b49bc90 100644
--- a/src/pages/goods/styles/index.scss
+++ b/src/pages/goods/styles/index.scss
@@ -8,10 +8,13 @@ $button-color: #00a6ff;
 
   // 顶部导航栏固定样式
   :deep(.top-nav-bar) {
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 100;
     flex-shrink: 0;
+    transition: background-color 0.3s ease;
   }
 
   // 使用须知样式
@@ -63,7 +66,7 @@ $button-color: #00a6ff;
   }
 
   .goods-content {
-    border-radius: 12px 12px 0 0;
+    border-radius: 28px 28px 0 0;
     background-color: #fff;
     padding: 12px;
     position: relative;
diff --git a/src/pages/index/components/chat/ChatMainList/index.vue b/src/pages/index/components/chat/ChatMainList/index.vue
index 36c079c..c2ccef4 100644
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -41,7 +41,7 @@
               />
               <CreateServiceOrder
                 v-else-if="
-                  item.toolCall.componentName === CompName.createWorkOrderCard
+                  item.toolCall.componentName === CompName.callServiceCard
                 "
               />
               <Feedback
diff --git a/src/pages/index/components/chat/ChatMoreTips/index.vue b/src/pages/index/components/chat/ChatMoreTips/index.vue
index 98c506b..6a26536 100644
--- a/src/pages/index/components/chat/ChatMoreTips/index.vue
+++ b/src/pages/index/components/chat/ChatMoreTips/index.vue
@@ -18,27 +18,18 @@
 </template>
 
 <script setup>
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
 import { defineProps } from "vue";
 
-const emits = defineEmits(["replySent"]);
-
 defineProps({
   guideWords: {
     type: Array,
-    default: [
-      "定温泉票",
-      "定酒店",
-      "优惠套餐",
-      "亲子玩法",
-      "了解交通",
-      "看看酒店",
-      "看看美食",
-    ],
+    default: [],
   },
 });
 
-const sendReply = (text) => {
-  emits("replySent", text);
+const sendReply = (item) => {
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 </script>
 
diff --git a/src/pages/index/components/chat/ChatQuickAccess/index.vue b/src/pages/index/components/chat/ChatQuickAccess/index.vue
index a45f79f..98bc89e 100644
--- a/src/pages/index/components/chat/ChatQuickAccess/index.vue
+++ b/src/pages/index/components/chat/ChatQuickAccess/index.vue
@@ -37,7 +37,7 @@ const itemList = ref([
   {
     icon: "",
     title: "呼叫服务",
-    type: Command.createWorkOrderCard,
+    type: Command.callServiceCard,
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
diff --git a/src/pages/index/components/chat/ChatTopWelcome/index.vue b/src/pages/index/components/chat/ChatTopWelcome/index.vue
index db4653d..6c76b51 100644
--- a/src/pages/index/components/chat/ChatTopWelcome/index.vue
+++ b/src/pages/index/components/chat/ChatTopWelcome/index.vue
@@ -6,7 +6,7 @@
       >
         <image
           class="ip relative"
-          :src="initPageImages.logoImageUrl"
+          :src="initPageImages?.logoImageUrl"
           mode="aspectFit"
         />
         <view
@@ -16,7 +16,7 @@
         </view>
       </view>
 
-      <ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
+      <ChatMoreTips :guideWords="guideWords" />
     </view>
   </view>
 </template>
diff --git a/src/pages/index/components/module/MoreService/index.vue b/src/pages/index/components/module/MoreService/index.vue
index 4e3a772..5d4c6b6 100644
--- a/src/pages/index/components/module/MoreService/index.vue
+++ b/src/pages/index/components/module/MoreService/index.vue
@@ -2,7 +2,8 @@
   <uni-popup ref="popup" type="bottom" :safe-area="false">
     <view class="popup-content border-box pt-12 pl-12 pr-12">
       <view class="header flex flex-items-center pb-12">
-        <view class="title flex-full font-size-17 color-000 font-500"
+        <view
+          class="title flex-full text-center font-size-17 color-000 font-500 ml-24"
           >更多服务</view
         >
         <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
@@ -13,7 +14,6 @@
           class="item border-box border-bottom pt-20 pb-20"
           v-for="(item, index) in list"
           :key="index"
-          @click="handleClick(item)"
         >
           <view class="flex flex-items-center flex-justify-center">
             <image v-if="item.icon" class="left" :src="item.icon" />
diff --git a/src/request/api/UpdateFile.js b/src/request/api/UpdateFile.js
new file mode 100644
index 0000000..c8fa4d5
--- /dev/null
+++ b/src/request/api/UpdateFile.js
@@ -0,0 +1,32 @@
+import { BASE_URL } from "@/request/base/baseUrl";
+import { getCurrentConfig } from "@/constant/base";
+
+export const updateImageFile = (file) => {
+  const url = BASE_URL + "/common/upload";
+  const token = uni.getStorageSync("token");
+  const clientId = getCurrentConfig().clientId;
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url,
+      filePath: file,
+      name: "file",
+      header: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+        clientId: clientId,
+      },
+      formData: {
+        file: "file",
+      },
+      success: (uploadFileRes) => {
+        console.log(uploadFileRes.data);
+        resolve(uploadFileRes.data);
+      },
+      fail: (err) => {
+        console.error("上传图片失败:", err);
+        reject(err);
+      },
+    });
+  });
+};
diff --git a/src/static/fonts/znicons.ttf b/src/static/fonts/znicons.ttf
index dd09de6..4d8fabd 100644
Binary files a/src/static/fonts/znicons.ttf and b/src/static/fonts/znicons.ttf differ
diff --git a/src/static/scss/background.scss b/src/static/scss/background.scss
index 6c46fe4..aae9d34 100644
--- a/src/static/scss/background.scss
+++ b/src/static/scss/background.scss
@@ -19,6 +19,10 @@
   background-color: #f5f7fa;
 }
 
+.bg-EEF8FF {
+  background-color: #eef8ff;
+}
+
 .bg-liner {
   background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
     linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
diff --git a/src/static/scss/height.scss b/src/static/scss/height.scss
index 40ebcb7..da01276 100644
--- a/src/static/scss/height.scss
+++ b/src/static/scss/height.scss
@@ -1,3 +1,7 @@
 .h-screen {
   height: 100vh;
 }
+
+.h-80 {
+  height: 80px;
+}
diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss
index a2e5203..70fa6b8 100644
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -7,10 +7,18 @@
   margin: 4px;
 }
 
+.ml-4 {
+  margin-left: 4px;
+}
+
 .mr-4 {
   margin-right: 4px;
 }
 
+.mt-4 {
+  margin-top: 4px;
+}
+
 .mb-4 {
   margin-bottom: 4px;
 }
@@ -55,6 +63,10 @@
   margin: 12px;
 }
 
+.mt-12 {
+  margin-top: 12px;
+}
+
 .mb-12 {
   margin-bottom: 12px;
 }
@@ -63,10 +75,26 @@
   margin-left: 12px;
 }
 
+.mr-12 {
+  margin-right: 12px;
+}
+
+.mt-16 {
+  margin-top: 16px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
 .ml-16 {
   margin-left: 16px;
 }
 
+.mr-16 {
+  margin-right: 16px;
+}
+
 .ml-20 {
   margin-left: 20px;
 }
@@ -74,3 +102,7 @@
 .mr-20 {
   margin-right: 20px;
 }
+
+.ml-24 {
+  margin-left: 24px;
+}
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index be158fc..45fef9c 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -99,6 +99,10 @@
   padding-bottom: 20px;
 }
 
+.p-24 {
+  padding: 24px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }
diff --git a/src/static/scss/rounded.scss b/src/static/scss/rounded.scss
index 39d5e45..aed980d 100644
--- a/src/static/scss/rounded.scss
+++ b/src/static/scss/rounded.scss
@@ -3,6 +3,10 @@
   border-radius: 4px;
 }
 
+.rounded-5 {
+  border-radius: 5px;
+}
+
 .rounded-6 {
   border-radius: 6px;
 }
diff --git a/src/static/scss/width.scss b/src/static/scss/width.scss
index 5d91e65..3fb544a 100644
--- a/src/static/scss/width.scss
+++ b/src/static/scss/width.scss
@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+.w-vw {
+  width: 100vw;
+}
+
 .w-50 {
   width: 50%;
 }