仓储物流，分拣包装

sub-operation-service/src/router/index.js

@@ -406,6 +406,24 @@ export const constantRoutes = [
         name: 'detailsMain',
         meta: { title: '详情页' },
       },
+      {
+        path: '/sub-operation-service/packaging/details1',
+        component: () => import('@/views/packaging/details1.vue'),
+        name: 'detailsMain1',
+        meta: { title: '详情页' },
+      },
+      {
+        path: '/sub-operation-service/packaging/details2',
+        component: () => import('@/views/packaging/details2.vue'),
+        name: 'detailsMain2',
+        meta: { title: '详情页' },
+      },
+      {
+        path: '/sub-operation-service/packaging/apply',
+        component: () => import('@/views/packaging/apply.vue'),
+        name: 'apply',
+        meta: { title: '申请分拣' },
+      },
     ],
   },
   {
@@ -463,6 +481,18 @@ export const constantRoutes = [
         name: 'logistics-detail',
         meta: { title: '物流详情' },
       },
+      {
+        path: '/sub-operation-service/logistics-shipping',
+        component: () => import('@/views/warehouseLogistics/logistics/shipping.vue'),
+        name: 'logistics-shipping',
+        meta: { title: '在线寄货' },
+      },
+      {
+        path: '/sub-operation-service/logistics-match',
+        component: () => import('@/views/warehouseLogistics/logistics/match.vue'),
+        name: 'logistics-match',
+        meta: { title: '匹配' },
+      },
     ],
   },
   {

sub-operation-service/src/views/farmingService/components/leftMenu.vue

@@ -49,14 +49,14 @@ const router = useRouter();
 const leftMenu = reactive([
   {
     name: 'inspection',
-    title: '农事咨询',
+    title: '农事资讯',
     icon: 'menu1.png',
     path: '',
     isOpen: false,
     children: [
       {
         name: 'farmPolicy',
-        title: '农业政策',
+        title: '农业政策资讯',
         icon: 'menu1.png',
         path: '/sub-operation-service/farmService/consult/policy',
       },

sub-operation-service/src/views/packaging/apply.vue

@@ -0,0 +1,329 @@
+<template>
+  <Common>
+    <template #main>
+      <div class="max-w-7xl mx-auto p-4">
+        <div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">申请分拣</span></div>
+        <img src="@/assets/images/warehouseLogistics/img25.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <div class="flex items-center mb-4">
+          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
+        </div>
+        <div class="flex items-center mb-8">
+          <div class="flex items-center mr-4">
+            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+          </div>
+          <div class="flex-1">
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
+            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            <div class="flex items-center space-x-2 text-green-500 text-sm">
+              <div class="bac">{{ route.data[0] }}</div>
+              <div class="bac">{{ route.data[1] }}</div>
+              <div class="bac">{{ route.data[2] }}</div>
+            </div>
+            <p class="mt-2 text-gray-700">联系人：李涛</p>
+            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
+            <p class="mt-2 text-gray-700">
+              <el-icon><Location /></el-icon> {{ route.location }}
+            </p>
+          </div>
+          <div class="text-gray-500 text-sm flex items-center">
+            <div>
+              <span style="color: #999999">报价：</span>
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
+            </div>
+            <div>
+              <el-button size="large" type="primary" @click="goDei"
+                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                留下信息
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
+          </div>
+        </div> -->
+      </div>
+    </template>
+  </Common>
+</template>
+
+<script setup>
+import Common from './components/common.vue';
+import { getAssetsFile } from '@/utils';
+import { ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+const dialogVisible = ref(false);
+const formRef = ref(null);
+
+const form = reactive({
+  quantity: '',
+  title: '',
+  phone: '',
+  name: '',
+});
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const diotext = ref('');
+const diodescription = ref('');
+
+const goDei = (data) => {
+  //   diodescription.value = data.description;
+  //   diotext.value = data.title;
+  dialogVisible.value = true;
+};
+
+const handleSubmit = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('提交数据:', form);
+      dialogVisible.value = false;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 47%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/packaging/details.vue

@@ -1,55 +1,14 @@
 <template>
-  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
-    <div class="info-section">
-      <div class="info-item">
-        <span class="label">首选商家：</span>
-        <span class="value">{{ route.description }}</span>
-      </div>
-      <div class="info-item">
-        <span class="label">选择服务：</span>
-        <span class="value">{{ route.title }}</span>
-      </div>
-    </div>
-
-    <el-form ref="formRef" :model="form" label-position="top">
-      <el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
-        <el-input v-model="form.quantity" placeholder="请输入重量（kg）">
-          <template #suffix>kg</template>
-        </el-input>
-      </el-form-item>
-
-      <el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
-        <el-input v-model="form.name" placeholder="请输入您的称呼" />
-      </el-form-item>
-
-      <el-form-item
-        label="您的电话："
-        prop="phone"
-        :rules="[
-          { required: true, message: '请输入电话' },
-          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
-        ]"
-      >
-        <el-input v-model="form.phone" placeholder="请输入电话号码" />
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
-        <el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
-      </div>
-    </template>
-  </el-dialog>
   <Common>
     <template #main>
       <div class="max-w-7xl mx-auto p-4">
-        <div class="flex items-center mb-4">
+        <div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
+        <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <div class="flex items-center mb-4">
           <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
         </div>
         <div class="flex items-center mb-8">
           <div class="flex items-center mr-4">
-            <!-- 占位符图片，实际使用时替换为真实图片 -->
             <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
           </div>
           <div class="flex-1">
@@ -84,7 +43,7 @@
           <div class="bg-white p-4 rounded-lg shadow-sm">
             <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
           </div>
-        </div>
+        </div> -->
       </div>
     </template>
   </Common>
@@ -94,8 +53,9 @@
 import Common from './components/common.vue';
 import { getAssetsFile } from '@/utils';
 import { ref, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
-const route = useRoute().query;
+const route = useRoute();
+const router = useRouter();
 const dialogVisible = ref(false);
 const formRef = ref(null);
 
@@ -106,6 +66,10 @@ const form = reactive({
   name: '',
 });
 
+const toBack = (level) => {
+  router.go(level);
+};
+
 const diotext = ref('');
 const diodescription = ref('');
 
@@ -268,6 +232,12 @@ $border-color: #dcdfe6; // 边框颜色
   background-color: #fff;
   border-radius: 10px;
 }
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
 
 .mx-auto {
   margin-left: auto;

sub-operation-service/src/views/packaging/details1.vue

@@ -0,0 +1,329 @@
+<template>
+  <Common>
+    <template #main>
+      <div class="max-w-7xl mx-auto p-4">
+        <div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
+        <img src="@/assets/images/warehouseLogistics/img26.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <div class="flex items-center mb-4">
+          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
+        </div>
+        <div class="flex items-center mb-8">
+          <div class="flex items-center mr-4">
+            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+          </div>
+          <div class="flex-1">
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
+            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            <div class="flex items-center space-x-2 text-green-500 text-sm">
+              <div class="bac">{{ route.data[0] }}</div>
+              <div class="bac">{{ route.data[1] }}</div>
+              <div class="bac">{{ route.data[2] }}</div>
+            </div>
+            <p class="mt-2 text-gray-700">联系人：李涛</p>
+            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
+            <p class="mt-2 text-gray-700">
+              <el-icon><Location /></el-icon> {{ route.location }}
+            </p>
+          </div>
+          <div class="text-gray-500 text-sm flex items-center">
+            <div>
+              <span style="color: #999999">报价：</span>
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
+            </div>
+            <div>
+              <el-button size="large" type="primary" @click="goDei"
+                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                留下信息
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
+          </div>
+        </div> -->
+      </div>
+    </template>
+  </Common>
+</template>
+
+<script setup>
+import Common from './components/common.vue';
+import { getAssetsFile } from '@/utils';
+import { ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+const dialogVisible = ref(false);
+const formRef = ref(null);
+
+const form = reactive({
+  quantity: '',
+  title: '',
+  phone: '',
+  name: '',
+});
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const diotext = ref('');
+const diodescription = ref('');
+
+const goDei = (data) => {
+  //   diodescription.value = data.description;
+  //   diotext.value = data.title;
+  dialogVisible.value = true;
+};
+
+const handleSubmit = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('提交数据:', form);
+      dialogVisible.value = false;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 47%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/packaging/details2.vue

@@ -0,0 +1,329 @@
+<template>
+  <Common>
+    <template #main>
+      <div class="max-w-7xl mx-auto p-4">
+        <div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">申请包装</span></div>
+        <img src="@/assets/images/warehouseLogistics/img27.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <div class="flex items-center mb-4">
+          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
+        </div>
+        <div class="flex items-center mb-8">
+          <div class="flex items-center mr-4">
+            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+          </div>
+          <div class="flex-1">
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
+            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            <div class="flex items-center space-x-2 text-green-500 text-sm">
+              <div class="bac">{{ route.data[0] }}</div>
+              <div class="bac">{{ route.data[1] }}</div>
+              <div class="bac">{{ route.data[2] }}</div>
+            </div>
+            <p class="mt-2 text-gray-700">联系人：李涛</p>
+            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
+            <p class="mt-2 text-gray-700">
+              <el-icon><Location /></el-icon> {{ route.location }}
+            </p>
+          </div>
+          <div class="text-gray-500 text-sm flex items-center">
+            <div>
+              <span style="color: #999999">报价：</span>
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
+            </div>
+            <div>
+              <el-button size="large" type="primary" @click="goDei"
+                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                留下信息
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
+          </div>
+        </div> -->
+      </div>
+    </template>
+  </Common>
+</template>
+
+<script setup>
+import Common from './components/common.vue';
+import { getAssetsFile } from '@/utils';
+import { ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+const dialogVisible = ref(false);
+const formRef = ref(null);
+
+const form = reactive({
+  quantity: '',
+  title: '',
+  phone: '',
+  name: '',
+});
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const diotext = ref('');
+const diodescription = ref('');
+
+const goDei = (data) => {
+  //   diodescription.value = data.description;
+  //   diotext.value = data.title;
+  dialogVisible.value = true;
+};
+
+const handleSubmit = () => {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      console.log('提交数据:', form);
+      dialogVisible.value = false;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 47%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+}
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/packaging/index.vue

@@ -97,7 +97,7 @@
               <el-card class="storage-card" shadow="hover" body-style="padding: 0">
                 <div class="storage-content">
                   <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" />
+                    <img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
                   </div>
                 </div>
               </el-card>
@@ -161,7 +161,7 @@
             </el-col>
           </el-row>
           <div style="position: fixed; left: 50%; bottom: 7%">
-            <el-button style="padding: 10px 100px" size="large" type="primary">发布包装{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
+            <el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
           </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
@@ -179,9 +179,10 @@ import Common from './components/common.vue';
 const route = useRoute();
 const router = useRouter();
 
-const tab0 = reactive(['包装服务', '包装需求']);
+// const tab0 = reactive(['包装服务', '包装需求']);
+const tab0 = reactive(['包装服务']);
 const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
-const tab2 = reactive(['全部', '塑料袋', '塑料瓶', '塑料桶', '塑料盒']);
+const tab2 = reactive(['全部', '塑料框', '纸箱', '泡沫箱', '冰瓶']);
 const tab3 = reactive(['水产', '其他类']);
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
@@ -271,8 +272,13 @@ const currentChange = (current) => {
 const toLink = (row) => {
   row.data = ['高品质', '杀菌灭毒', '绿色'];
   router.push({
-    path: '/sub-operation-service/packaging/details',
+    path: '/sub-operation-service/packaging/details1',
-    query: row,
+    // query: row,
+  });
+};
+const applicationPackaging = () => {
+  router.push({
+    path: '/sub-operation-service/packaging/details2',
   });
 };
 </script>
@@ -457,6 +463,7 @@ $border-color: #dcdfe6; // 边框颜色
   height: auto;
   border-radius: 0;
   object-fit: cover;
+  cursor: pointer;
 }
 .storage-info {
   padding-right: 50px;

sub-operation-service/src/views/packaging/sorting.vue

@@ -97,7 +97,7 @@
               <el-card class="storage-card" shadow="hover" body-style="padding: 0">
                 <div class="storage-content">
                   <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" />
+                    <img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
                   </div>
                 </div>
               </el-card>
@@ -106,7 +106,7 @@
               <el-card class="storage-card" shadow="hover" body-style="padding: 0">
                 <div class="storage-content">
                   <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" />
+                    <img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
                   </div>
                 </div>
               </el-card>
@@ -163,7 +163,7 @@
             </el-col>
           </el-row>
           <div style="position: fixed; left: 50%; bottom: 7%">
-            <el-button style="padding: 10px 100px" size="large" type="primary">发布分拣{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
+            <el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
           </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
@@ -181,7 +181,8 @@ import Common from './components/common.vue';
 const route = useRoute();
 const router = useRouter();
 
-const tab0 = reactive(['分拣服务', '分拣需求']);
+// const tab0 = reactive(['分拣服务', '分拣需求']);
+const tab0 = reactive(['分拣服务']);
 const tab1 = reactive(['全部', '人工分拣', '自动化分拣']);
 const tab2 = reactive(['全部', '已完成', '分拣中', '已接单', '待接单']);
 const tab3 = reactive(['水产', '其他类']);
@@ -277,6 +278,11 @@ const toLink = (row) => {
     query: row,
   });
 };
+const handleApply = () => {
+  router.push({
+    path: '/sub-operation-service/packaging/apply',
+  });
+};
 </script>
 <style lang="scss" scoped>
 // 基础颜色配置
@@ -459,6 +465,7 @@ $border-color: #dcdfe6; // 边框颜色
   height: auto;
   border-radius: 0;
   object-fit: cover;
+  cursor: pointer;
 }
 .storage-info {
   padding-right: 50px;

sub-operation-service/src/views/warehouseLogistics/logistics/index.vue

@@ -94,7 +94,7 @@
             </el-card>
           </el-col>
           <div style="position: fixed; left: 50%; bottom: 7%">
-            <el-button style="padding: 10px 50px" size="large" type="primary">在线寄货</el-button>
+            <el-button style="padding: 10px 50px" size="large" type="primary" @click="shippingGoods">在线寄货</el-button>
           </div>
           <!-- <el-pagination
             :size="'large'"
@@ -232,6 +232,12 @@ const toLink = (row) => {
   });
 };
 
+const shippingGoods = () => {
+  router.push({
+    name: 'logistics-shipping',
+  });
+};
+
 const contact = (id) => {
   for (let i in state.data) {
     if (state.data[i].id === id) {

sub-operation-service/src/views/warehouseLogistics/logistics/match.vue

@@ -0,0 +1,353 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <el-card shadow="none" style="border-radius: 14px">
+          <div class="title">
+            <span @click="toBack(-2)">物流</span>
+            <span class="mx-10"> > </span>
+            <span @click="toBack(-1)">在线寄货</span>
+            <span class="mx-10"> > </span>
+            <span style="color: rgba(37, 191, 130, 1)">平台匹配资源</span>
+          </div>
+          <div class="max-w-7xl mx-auto p-4">
+            <img src="@/assets/images/warehouseLogistics/img22.png" fit="cover" class="storage-image" @click="toLink" />
+            <!-- <div class="flex items-center mb-8">
+              <div class="flex items-center mr-4">
+                <img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
+                <div class="text-gray-600 mb-2">
+                  <span>{{ state.data.parentTitle }}</span>
+                  <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
+                  <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                </div>
+                <div class="storage-tags">
+                  <el-tag
+                    v-for="(tags, indexT) in state.data.tag"
+                    :key="indexT"
+                    effect="plain"
+                    round
+                    style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
+                  >
+                    {{ tags }}
+                  </el-tag>
+                </div>
+                <p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
+                <p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
+                <p class="mt-2 text-gray-700">
+                  <el-icon><Location /></el-icon> {{ state.data.address }}
+                </p>
+              </div>
+              <div class="text-gray-500 text-sm flex items-center" style="text-align: right">
+                <div>
+                  <span style="color: #999999">报价：</span>
+                  <span class="ml-2 text-green-500 font-bold">
+                    ¥{{ state.data.price }}/{{
+                      state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
+                    }}
+                  </span>
+                </div>
+                <div>
+                  <el-button size="large" type="primary" @click="goDei">
+                    <el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                    留下信息
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6">
+              <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+              <div class="bg-white p-4 rounded-lg shadow-sm">
+                <p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
+              </div>
+            </div> -->
+          </div>
+        </el-card>
+        <el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
+          <div class="max-w-7xl mx-auto p-4" style="padding: 0">
+            <img src="@/assets/images/warehouseLogistics/img23.png" fit="cover" class="storage-image" />
+          </div>
+        </el-card>
+      </template>
+    </common>
+  </section>
+</template>
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import Common from '../components/common.vue';
+import { logisticDetail } from '@/apis/warehouseLogistics.js';
+
+const route = useRoute();
+const router = useRouter();
+
+const state = reactive({
+  query: {},
+  data: {},
+});
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const queryDetail = () => {
+  logisticDetail(state.query.id).then((res) => {
+    if (res.code === 200) {
+      state.data = res.data;
+      for (let i in state.data) {
+        state.data[i].tag = state.data[i].tags.split(',');
+      }
+    }
+  });
+};
+
+onMounted(() => {
+  state.query.id = route.query.id;
+  // queryDetail();
+});
+</script>
+<style lang="scss" scoped>
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 40%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+  .storage-image {
+    width: 100%;
+  }
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+  padding-bottom: 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/warehouseLogistics/logistics/shipping.vue

@@ -0,0 +1,356 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <el-card shadow="none" style="border-radius: 14px">
+          <div class="title" @click="toBack(-1)">
+            <el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">在线寄货</span>
+          </div>
+          <!-- <div class="max-w-7xl mx-auto p-4">
+            <img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" @click="toLink" />
+            <div class="flex items-center mb-8">
+              <div class="flex items-center mr-4">
+                <img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
+                <div class="text-gray-600 mb-2">
+                  <span>{{ state.data.parentTitle }}</span>
+                  <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
+                  <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                </div>
+                <div class="storage-tags">
+                  <el-tag
+                    v-for="(tags, indexT) in state.data.tag"
+                    :key="indexT"
+                    effect="plain"
+                    round
+                    style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
+                  >
+                    {{ tags }}
+                  </el-tag>
+                </div>
+                <p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
+                <p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
+                <p class="mt-2 text-gray-700">
+                  <el-icon><Location /></el-icon> {{ state.data.address }}
+                </p>
+              </div>
+              <div class="text-gray-500 text-sm flex items-center" style="text-align: right">
+                <div>
+                  <span style="color: #999999">报价：</span>
+                  <span class="ml-2 text-green-500 font-bold">
+                    ¥{{ state.data.price }}/{{
+                      state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
+                    }}
+                  </span>
+                </div>
+                <div>
+                  <el-button size="large" type="primary" @click="goDei">
+                    <el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                    留下信息
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6">
+              <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+              <div class="bg-white p-4 rounded-lg shadow-sm">
+                <p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
+              </div>
+            </div>
+          </div> -->
+          <div class="max-w-7xl mx-auto p-4">
+            <img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" />
+            <div>
+              <el-button style="padding: 10px 40px" size="default" type="primary" @click="application">提交</el-button>
+              <el-button style="padding: 10px 40px" size="default" type="plain">取消</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </common>
+  </section>
+</template>
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import Common from '../components/common.vue';
+import { logisticDetail } from '@/apis/warehouseLogistics.js';
+
+const route = useRoute();
+const router = useRouter();
+
+const state = reactive({
+  query: {},
+  data: {},
+});
+
+const application = () => {
+  router.push({
+    name: 'logistics-match',
+  });
+};
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const queryDetail = () => {
+  logisticDetail(state.query.id).then((res) => {
+    if (res.code === 200) {
+      state.data = res.data;
+      for (let i in state.data) {
+        state.data[i].tag = state.data[i].tags.split(',');
+      }
+    }
+  });
+};
+
+onMounted(() => {
+  state.query.id = route.query.id;
+  // queryDetail();
+});
+</script>
+<style lang="scss" scoped>
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 40%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+  .storage-image {
+    width: 100%;
+  }
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/warehouseLogistics/warehouse/allocation.vue

@@ -66,7 +66,7 @@
           </div>
         </el-card>
         <el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
-          <div class="max-w-7xl mx-auto p-4">
+          <div class="max-w-7xl mx-auto p-4" style="padding: 0">
             <img src="@/assets/images/warehouseLogistics/img16.png" fit="cover" class="storage-image" />
           </div>
         </el-card>
@@ -269,6 +269,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .p-4 {
   padding: 1rem;
+  padding-bottom: 0;
 }
 
 .flex {

sub-operation-service/src/views/warehouseLogistics/warehouse/application.vue

@@ -65,7 +65,7 @@
           </div>
         </el-card>
         <el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
-          <div class="max-w-7xl mx-auto p-4">
+          <div class="max-w-7xl mx-auto p-4" style="padding-top: 0">
             <img src="@/assets/images/warehouseLogistics/img18.png" fit="cover" class="storage-image" />
             <div>
               <el-button style="padding: 10px 40px" size="default" type="primary" @click="application">提交</el-button>
@@ -278,6 +278,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .p-4 {
   padding: 1rem;
+  padding-bottom: 0;
 }
 
 .flex {

sub-operation-service/src/views/warehouseLogistics/warehouse/detail.vue

@@ -8,8 +8,26 @@
             <span class="mx-10"> > </span>
             <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
           </div>
-          <div class="max-w-7xl mx-auto p-4">
+          <div class="max-w-7xl mx-auto p-4" style="padding-bottom: 0">
+            <div style="width: 100%; position: relative">
               <img src="@/assets/images/warehouseLogistics/img14.png" fit="cover" class="storage-image" @click="toLink" />
+              <el-button
+                type="primary"
+                style="
+                  width: 250px;
+                  height: 80px;
+                  background-color: rgba(37, 191, 130, 0);
+                  border: none;
+                  position: absolute;
+                  top: 9%;
+                  left: 35%;
+                  z-index: 999;
+                "
+                @click="dialogVisible = true"
+              >
+              </el-button>
+            </div>
+
             <!-- <div class="flex items-center mb-8">
               <div class="flex items-center mr-4">
                 <img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
@@ -65,6 +83,17 @@
         </el-card>
       </template>
     </common>
+    <el-dialog v-model="dialogVisible" title="立即预约" width="1000" :before-close="handleClose" center>
+      <!-- <h3>立即预约</h3> -->
+      <img src="@/assets/images/warehouseLogistics/img28.png" fit="cover" class="storage-image" @click="toLink" />
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogVisible = false"> 提交 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </section>
 </template>
 <script setup>
@@ -81,6 +110,7 @@ const state = reactive({
   query: {},
   data: {},
 });
+const dialogVisible = ref(false);
 
 const toBack = (level) => {
   router.go(level);
@@ -188,7 +218,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 // 按钮组样式
 .dialog-footer {
-  text-align: right;
+  text-align: center;
   .el-button {
     padding: 10px 24px;
     border-radius: 4px;

sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue

@@ -70,7 +70,7 @@
             </el-card>
           </el-col>
           <div style="position: fixed; left: 50%; bottom: 7%">
-            <el-button v-if="currentTab0 === 0" style="padding: 10px 100px" size="large" type="primary" @click="application">申请仓储</el-button>
+            <el-button v-if="currentTab0 === 0" style="padding: 10px 50px" size="large" type="primary" @click="application">发布需求</el-button>
           </div>
           <!-- <el-pagination
             :size="'large'"