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

@@ -3,78 +3,47 @@
     <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>
-        <h1 style="margin-bottom: 20px">填写需求表</h1>
+        <img src="@/assets/images/warehouseLogistics/img25.png" fit="cover" class="storage-image" @click="toLink" />
-        <el-form :model="form" label-width="auto" :rules="rules">
+        <!-- <div class="flex items-center mb-4">
-          <el-form-item label="您的称呼" prop="name">
+          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
-            <el-input v-model="form.name" style="width: 400px" />
+        </div>
-          </el-form-item>
+        <div class="flex items-center mb-8">
-          <el-form-item label="您的电话" prop="phone">
+          <div class="flex items-center mr-4">
-            <el-input v-model="form.phone" style="width: 400px" />
+            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
-          </el-form-item>
+          </div>
-          <!-- <el-form-item label="详细地址" prop="address1">
+          <div class="flex-1">
-            <el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
-              <el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <p class="text-gray-600 mb-2">{{ route.description }}</p>
-            </el-select>
+            <div class="flex items-center space-x-2 text-green-500 text-sm">
-            <span style="width: 2%"></span>
+              <div class="bac">{{ route.data[0] }}</div>
-            <el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
+              <div class="bac">{{ route.data[1] }}</div>
-              <el-input v-model="form.address2" />
+              <div class="bac">{{ route.data[2] }}</div>
-            </el-form-item>
-          </el-form-item> -->
-          <el-form-item label="详细地址" required>
-            <div style="display: flex; gap: 16px">
-              <el-form-item prop="selectedAddress">
-                <el-cascader
-                  v-model="form.selectedAddress"
-                  :options="addressOptions"
-                  :props="cascaderProps"
-                  placeholder="请选择地址"
-                  :style="{ width: unifiedWidth }"
-                />
-              </el-form-item>
-              <el-form-item prop="detailAddress">
-                <el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
-              </el-form-item>
             </div>
-          </el-form-item>
+            <p class="mt-2 text-gray-700">联系人：李涛</p>
-          <!-- 分拣物品 -->
+            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
-          <el-form-item label="分拣物品" prop="goods">
+            <p class="mt-2 text-gray-700">
-            <!-- <el-input v-model="form.goods" style="width: 44%" /> -->
+              <el-icon><Location /></el-icon> {{ route.location }}
-            <el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
+            </p>
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </div>
-            </el-select>
+          <div class="text-gray-500 text-sm flex items-center">
-          </el-form-item>
+            <div>
-          <!-- 分拣数量 -->
+              <span style="color: #999999">报价：</span>
-          <el-form-item label="分拣数量" prop="num">
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
-            <!-- <el-input v-model="form.num" style="width: 44%" /> -->
+            </div>
-            <el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
+            <div>
-              <template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
+              <el-button size="large" type="primary" @click="goDei"
-              ><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
-            </el-select>
+                留下信息
-          </el-form-item>
+              </el-button>
-          <!-- 分拣类型 -->
+            </div>
-          <el-form-item label="分拣类型" prop="type">
+          </div>
-            <!-- <el-input v-model="form.type" style="width: 44%" /> -->
-            <el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
-              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <!-- 截至日期 -->
-          <el-form-item label="截至日期" prop="date">
-            <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 400px" />
-          </el-form-item>
-          <el-form-item label="分拣要求" prop="desc">
-            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
-          </el-form-item>
-        </el-form>
-        <div style="text-align: left; font-size: 22px; margin-bottom: 10px">
-          <span>合计：</span>
-          <span style="color: rgb(37, 191, 130)">...</span>
-          <span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
-        </div>
-        <div>
-          <el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
-          <el-button style="width: 150px">取消</el-button>
         </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>
@@ -83,122 +52,41 @@
 <script setup>
 import Common from './components/common.vue';
 import { getAssetsFile } from '@/utils';
-import { ref, reactive, watch, onMounted } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { getRegion } from '@/apis/common';
 const route = useRoute();
 const router = useRouter();
 const dialogVisible = ref(false);
 const formRef = ref(null);
 
-const unifiedWidth = '400px';
-const formSize = 'large';
 const form = reactive({
-  name: '',
+  quantity: '',
+  title: '',
   phone: '',
-  address1: '',
+  name: '',
-  address2: '',
-  selectedAddress: [], //选中的区域编码数组
-  areaAddress: '', //区域地址
-  detailAddress: '', //详细地址
-  goods: '',
-  num: '',
-  type: '',
-  date: '',
-  desc: '',
 });
-const rules = reactive({
-  name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
-  address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
-  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
-  goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
-  num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
-  type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
-  date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
-  desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
-});
-const options = [
-  {
-    value: '1',
-    label: '西红柿',
-  },
-  {
-    value: '2',
-    label: '茄子',
-  },
-  {
-    value: '3',
-    label: '辣椒',
-  },
-];
-const options1 = [
-  {
-    value: '1',
-    label: '100',
-  },
-  {
-    value: '2',
-    label: '200',
-  },
-  {
-    value: '3',
-    label: '300',
-  },
-  {
-    value: '3',
-    label: '400',
-  },
-  {
-    value: '3',
-    label: '500',
-  },
-];
-const options2 = [
-  {
-    value: '1',
-    label: '人工分拣',
-  },
-  {
-    value: '2',
-    label: '自动化分拣',
-  },
-];
-
-// const addressOptions = [
-//   // 下拉框的选项数据
-//   { value: 'beijing', label: '北京市' },
-//   { value: 'shanghai', label: '上海市' },
-//   { value: 'guangzhou', label: '广州市' },
-//   // 可以继续添加更多选项
-// ];
-
-// 级联选择器配置
-const cascaderProps = ref({
-  label: 'areaName', // 选项标签字段名
-  value: 'areaCode', // 选项值字段名
-  children: 'areaChildVOS', // 子选项字段名
-  emitPath: true,
-  expandTrigger: 'hover',
-});
-// 省市区数据（示例）
-const addressOptions = ref([]);
-const getArea = async () => {
-  const res = await getRegion();
-  if (res.code === 200) {
-    addressOptions.value = res.data;
-  } else {
-    ElMessage.error(res.message);
-  }
-};
 
 const toBack = (level) => {
   router.go(level);
 };
-onMounted(() => {
+
-  getArea();
+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>
@@ -209,6 +97,136 @@ $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;
@@ -229,4 +247,83 @@ $border-color: #dcdfe6; // 边框颜色
 .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

@@ -3,37 +3,32 @@
     <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/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
+        <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>
         <div class="flex items-center mb-8">
           <div class="flex items-center mr-4">
-            <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+            <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">{{ data.title }}</h3>
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
-            <!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
+            <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="flex items-center space-x-2 text-green-500 text-sm">
-              <div class="bac">{{ data.data[0] }}</div>
+              <div class="bac">{{ route.data[0] }}</div>
-              <div class="bac">{{ data.data[1] }}</div>
+              <div class="bac">{{ route.data[1] }}</div>
-              <div class="bac">{{ data.data[2] }}</div>
+              <div class="bac">{{ route.data[2] }}</div>
-            </div> -->
-            <p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
-            <p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
-            <p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
-            <p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
-            <p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
-            <div>
-              <el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
-              <el-button style="width: 100px" size="large"> 收藏 </el-button>
-              <el-button style="width: 100px" size="large"> 分享 </el-button>
             </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 class="text-gray-500 text-sm flex items-center">
             <div>
               <span style="color: #999999">报价：</span>
-              <span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
             </div>
             <div>
               <el-button size="large" type="primary" @click="goDei"
@@ -41,30 +36,14 @@
                 留下信息
               </el-button>
             </div>
-          </div> -->
-        </div>
-        <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
-            基本信息
-          </h3>
-          <div class="bg-white p-4 rounded-lg shadow-sm">
-            <p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
           </div>
         </div>
         <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
+          <div class="bg-white p-4 rounded-lg shadow-sm">
-            地理位置
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
-          </h3>
+          </div>
-          <img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
+        </div> -->
-        </div>
-        <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
-          </h3>
-          <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
-        </div>
       </div>
     </template>
   </Common>
@@ -87,9 +66,6 @@ const form = reactive({
   name: '',
 });
 
-console.log(route);
-let data = route.query;
-
 const toBack = (level) => {
   router.go(level);
 };
@@ -225,10 +201,6 @@ $border-color: #dcdfe6; // 边框颜色
   width: 300px;
   height: 300px;
 }
-.breadth {
-  width: 100%;
-  height: 100%;
-}
 
 .text-gray-500 {
   height: 300px;
@@ -282,7 +254,6 @@ $border-color: #dcdfe6; // 边框颜色
 
 .items-center {
   align-items: center;
-  margin-top: 10px;
 }
 
 .mb-4 {
@@ -292,9 +263,6 @@ $border-color: #dcdfe6; // 边框颜色
 .mr-4 {
   margin-right: 1rem;
 }
-.mt-6 {
-  text-align: left;
-}
 
 .text-green-500 {
   color: #25bf82;
@@ -303,8 +271,6 @@ $border-color: #dcdfe6; // 边框颜色
 .text-lg {
   font-size: 1.125rem;
   text-align: left;
-  display: flex;
-  align-items: center;
 }
 
 .font-bold {
@@ -332,7 +298,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .text-gray-700 {
   color: #000000;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .text-sm {

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

@@ -3,37 +3,32 @@
     <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/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
+        <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>
         <div class="flex items-center mb-8">
           <div class="flex items-center mr-4">
-            <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+            <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">{{ data.title }}</h3>
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
-            <!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
+            <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="flex items-center space-x-2 text-green-500 text-sm">
-              <div class="bac">{{ data.data[0] }}</div>
+              <div class="bac">{{ route.data[0] }}</div>
-              <div class="bac">{{ data.data[1] }}</div>
+              <div class="bac">{{ route.data[1] }}</div>
-              <div class="bac">{{ data.data[2] }}</div>
+              <div class="bac">{{ route.data[2] }}</div>
-            </div> -->
-            <p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
-            <p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
-            <p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
-            <p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
-            <p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
-            <div>
-              <el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
-              <el-button style="width: 100px" size="large"> 收藏 </el-button>
-              <el-button style="width: 100px" size="large"> 分享 </el-button>
             </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 class="text-gray-500 text-sm flex items-center">
             <div>
               <span style="color: #999999">报价：</span>
-              <span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
             </div>
             <div>
               <el-button size="large" type="primary" @click="goDei"
@@ -41,30 +36,14 @@
                 留下信息
               </el-button>
             </div>
-          </div> -->
-        </div>
-        <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
-            基本信息
-          </h3>
-          <div class="bg-white p-4 rounded-lg shadow-sm">
-            <p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
           </div>
         </div>
         <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
+          <div class="bg-white p-4 rounded-lg shadow-sm">
-            地理位置
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
-          </h3>
+          </div>
-          <img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
+        </div> -->
-        </div>
-        <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
-          </h3>
-          <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
-        </div>
       </div>
     </template>
   </Common>
@@ -87,9 +66,6 @@ const form = reactive({
   name: '',
 });
 
-console.log(route);
-let data = route.query;
-
 const toBack = (level) => {
   router.go(level);
 };
@@ -225,10 +201,6 @@ $border-color: #dcdfe6; // 边框颜色
   width: 300px;
   height: 300px;
 }
-.breadth {
-  width: 100%;
-  height: 100%;
-}
 
 .text-gray-500 {
   height: 300px;
@@ -282,7 +254,6 @@ $border-color: #dcdfe6; // 边框颜色
 
 .items-center {
   align-items: center;
-  margin-top: 10px;
 }
 
 .mb-4 {
@@ -292,9 +263,6 @@ $border-color: #dcdfe6; // 边框颜色
 .mr-4 {
   margin-right: 1rem;
 }
-.mt-6 {
-  text-align: left;
-}
 
 .text-green-500 {
   color: #25bf82;
@@ -303,8 +271,6 @@ $border-color: #dcdfe6; // 边框颜色
 .text-lg {
   font-size: 1.125rem;
   text-align: left;
-  display: flex;
-  align-items: center;
 }
 
 .font-bold {
@@ -332,7 +298,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .text-gray-700 {
   color: #000000;
-  font-size: 16px;
+  font-size: 18px;
 }
 
 .text-sm {

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

@@ -3,82 +3,47 @@
     <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>
-        <h1 style="margin-bottom: 20px">填写需求表</h1>
+        <img src="@/assets/images/warehouseLogistics/img27.png" fit="cover" class="storage-image" @click="toLink" />
-        <el-form :model="form" label-width="auto" :rules="rules">
+        <!-- <div class="flex items-center mb-4">
-          <el-form-item label="您的称呼" prop="name">
+          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
-            <el-input v-model="form.name" style="width: 400px" />
+        </div>
-          </el-form-item>
+        <div class="flex items-center mb-8">
-          <el-form-item label="您的电话" prop="phone">
+          <div class="flex items-center mr-4">
-            <el-input v-model="form.phone" style="width: 400px" />
+            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
-          </el-form-item>
+          </div>
-          <!-- <el-form-item label="详细地址" prop="address1">
+          <div class="flex-1">
-            <el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
+            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
-              <el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <p class="text-gray-600 mb-2">{{ route.description }}</p>
-            </el-select>
+            <div class="flex items-center space-x-2 text-green-500 text-sm">
-            <span style="width: 2%"></span>
+              <div class="bac">{{ route.data[0] }}</div>
-            <el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
+              <div class="bac">{{ route.data[1] }}</div>
-              <el-input v-model="form.address2" />
+              <div class="bac">{{ route.data[2] }}</div>
-            </el-form-item>
-          </el-form-item> -->
-          <el-form-item label="详细地址" required>
-            <div style="display: flex; gap: 16px">
-              <el-form-item prop="selectedAddress">
-                <el-cascader
-                  v-model="form.selectedAddress"
-                  :options="addressOptions"
-                  :props="cascaderProps"
-                  placeholder="请选择地址"
-                  :style="{ width: unifiedWidth }"
-                />
-              </el-form-item>
-              <el-form-item prop="detailAddress">
-                <el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
-              </el-form-item>
             </div>
-          </el-form-item>
+            <p class="mt-2 text-gray-700">联系人：李涛</p>
-          <!-- 分拣物品 -->
+            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
-          <el-form-item label="包装物品" prop="goods">
+            <p class="mt-2 text-gray-700">
-            <!-- <el-input v-model="form.goods" style="width: 44%" /> -->
+              <el-icon><Location /></el-icon> {{ route.location }}
-            <el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
+            </p>
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </div>
-            </el-select>
+          <div class="text-gray-500 text-sm flex items-center">
-          </el-form-item>
+            <div>
-          <!-- 分拣数量 -->
+              <span style="color: #999999">报价：</span>
-          <el-form-item label="包装数量" prop="num">
+              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
-            <!-- <el-input v-model="form.num" style="width: 44%" /> -->
+            </div>
-            <el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
+            <div>
-              <template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
+              <el-button size="large" type="primary" @click="goDei"
-              ><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
-            </el-select>
+                留下信息
-          </el-form-item>
+              </el-button>
-          <!-- 分拣类型 -->
+            </div>
-          <el-form-item label="容器类型" prop="type">
+          </div>
-            <!-- <el-input v-model="form.type" style="width: 44%" /> -->
-            <el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
-              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <!-- 开始日期 -->
-          <el-form-item label="开始日期" prop="date">
-            <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 400px" />
-          </el-form-item>
-          <!-- 截至日期 -->
-          <el-form-item label="截至日期" prop="date">
-            <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" style="width: 400px" />
-          </el-form-item>
-          <el-form-item label="包装要求" prop="desc">
-            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
-          </el-form-item>
-        </el-form>
-        <div style="text-align: left; font-size: 22px; margin-bottom: 10px">
-          <span>合计：</span>
-          <span style="color: rgb(37, 191, 130)">...</span>
-          <span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
-        </div>
-        <div>
-          <el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
-          <el-button style="width: 150px">取消</el-button>
         </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>
@@ -87,123 +52,41 @@
 <script setup>
 import Common from './components/common.vue';
 import { getAssetsFile } from '@/utils';
-import { ref, reactive, watch, onMounted } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { getRegion } from '@/apis/common';
 const route = useRoute();
 const router = useRouter();
 const dialogVisible = ref(false);
 const formRef = ref(null);
 
-const unifiedWidth = '400px';
-const formSize = 'large';
 const form = reactive({
-  name: '',
+  quantity: '',
+  title: '',
   phone: '',
-  address1: '',
+  name: '',
-  address2: '',
-  selectedAddress: [], //选中的区域编码数组
-  areaAddress: '', //区域地址
-  detailAddress: '', //详细地址
-  goods: '',
-  num: '',
-  type: '',
-  startDate: '',
-  endDate: '',
-  desc: '',
 });
-const rules = reactive({
-  name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
-  address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
-  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
-  goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
-  num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
-  type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
-  date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
-  desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
-});
-const options = [
-  {
-    value: '1',
-    label: '西红柿',
-  },
-  {
-    value: '2',
-    label: '茄子',
-  },
-  {
-    value: '3',
-    label: '辣椒',
-  },
-];
-const options1 = [
-  {
-    value: '1',
-    label: '100',
-  },
-  {
-    value: '2',
-    label: '200',
-  },
-  {
-    value: '3',
-    label: '300',
-  },
-  {
-    value: '3',
-    label: '400',
-  },
-  {
-    value: '3',
-    label: '500',
-  },
-];
-const options2 = [
-  {
-    value: '1',
-    label: '人工分拣',
-  },
-  {
-    value: '2',
-    label: '自动化分拣',
-  },
-];
-
-// const addressOptions = [
-//   // 下拉框的选项数据
-//   { value: 'beijing', label: '北京市' },
-//   { value: 'shanghai', label: '上海市' },
-//   { value: 'guangzhou', label: '广州市' },
-//   // 可以继续添加更多选项
-// ];
-
-// 级联选择器配置
-const cascaderProps = ref({
-  label: 'areaName', // 选项标签字段名
-  value: 'areaCode', // 选项值字段名
-  children: 'areaChildVOS', // 子选项字段名
-  emitPath: true,
-  expandTrigger: 'hover',
-});
-// 省市区数据（示例）
-const addressOptions = ref([]);
-const getArea = async () => {
-  const res = await getRegion();
-  if (res.code === 200) {
-    addressOptions.value = res.data;
-  } else {
-    ElMessage.error(res.message);
-  }
-};
 
 const toBack = (level) => {
   router.go(level);
 };
-onMounted(() => {
+
-  getArea();
+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>
@@ -214,6 +97,136 @@ $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;
@@ -234,4 +247,83 @@ $border-color: #dcdfe6; // 边框颜色
 .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

@@ -46,7 +46,7 @@
     <section>
       <common>
         <template #main>
-          <el-card shadow="none" style="border-radius: 14px; position: relative">
+          <el-card shadow="none" style="border-radius: 14px">
             <div class="tabs tabs0">
               <div class="tab cursor">
                 <div
@@ -91,12 +91,18 @@
                 </div>
               </div>
             </div>
-            <div style="position: absolute; right: 3%; top: 27%">
-              <el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
-            </div>
           </el-card>
-          <el-row :gutter="20" style="margin-top: 10px">
+          <el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
-            <el-col v-for="(item, index) in state.data" :key="index" :span="24">
+            <el-col :span="24">
+              <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" @click="toLink" />
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+            <!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
               <el-card class="storage-card" shadow="hover">
                 <div class="storage-content">
                   <div class="storage-content-top" @click="toLink(item)">
@@ -104,20 +110,59 @@
                     <div class="storage-info">
                       <h3 class="storage-title">{{ item.title }}</h3>
                       <div class="storage-desc">
-                        <span>{{ item.type }} | </span><span>{{ item.description }}</span>
+                        <span>{{ item.description }}</span>
+                        <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
+                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                      </div>
+                      <div class="storage-tags">
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
+                      </div>
+                      <div class="storage-location">
+                        <el-icon><Location /></el-icon>
+                        {{ item.location }}
                       </div>
-                      <p class="storage-location storage-location1">{{ item.introduce }}</p>
                     </div>
                   </div>
+                  <div class="storage-price">
+                    <div class="storage-price-left">
+                      <span class="price-label">报价</span>
+                      <span class="price-amount">¥{{ item.price }}/kg</span>
+                    </div>
+                    <el-button type="success" class="contact-btn" @click="goDei(item)">
+                      <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
+                      <span>联系卖家</span>
+                    </el-button>
+                  </div>
                   <div v-if="item.rank" class="rank-badge">
-                    <p style="text-align: right; font-size: 22px; color: #25bf82">￥{{ item.price }}/个</p>
+                    <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
-                    <el-button style="padding: 5px 50px; margin-top: 50px" type="primary" @click="handleClick">购买</el-button>
+                  </div>
+                </div>
+              </el-card>
+            </el-col> -->
+          </el-row>
+          <el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
+            <el-col :span="24">
+              <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/img5.png" fit="cover" class="storage-image storage-image1" />
+                  </div>
+                </div>
+              </el-card>
+              <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/img6.png" fit="cover" class="storage-image storage-image1" />
                   </div>
                 </div>
               </el-card>
             </el-col>
           </el-row>
-
+          <div style="position: fixed; left: 50%; bottom: 7%">
+            <el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
+          </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
@@ -146,76 +191,44 @@ const state = reactive({
   },
   data: [
     {
-      title: '5L堆码桶',
+      title: '蔬菜分拣服务',
-      description: '5L 7元/个',
+      description: '绿鲜甄选蔬菜分拣中心 ',
-      introduce:
+      location: '临沧市-耿马县',
-        '5L堆码桶是一种专为液体包装设计的塑料容器，容量为5升，具备堆码功能，可节省存储和运输空间。其材质通常采用高密度聚乙烯（HDPE），具有耐酸碱、抗腐蚀、耐冲击、耐高低温等特性，符合食品级和化工级标准，广泛应用于化工、涂料、润滑油、食品、医药等行业。',
+      price: '150',
-      price: '7.00',
-      //地址
-      address: '临沧市耿马县孟定镇100号',
-      locationUrl: 'images/dz.png',
-      //联系人
-      contact: '刘冬冬',
-      type: '塑料容器',
-      //电话
-      phone: '15678459087',
-
       rank: '1',
-      imageUrl: 'images/11.jpg',
+      imageUrl: 'images/vegetable.png',
     },
     {
-      title: '二手吨桶,八九成新两百升蓝桶',
+      title: '水果分拣服务',
-      description: '100 380元/个',
+      description: '果韵鲜享分拣站',
-      introduce:
+      location: '临沧市-耿马县',
-        '材质与结构内容器：采用进口高密度聚乙烯（HDPE）或线性低密度聚乙烯（LLDPE），耐酸碱、抗腐蚀，符合食品级标准。外框架：镀锌钢管焊接网格，底盘为四向进叉型全钢托盘，结构稳固，可用铲车直接装卸。工艺：旋转滚塑一次成型，无缝焊接，壁厚≥5mm，强度高，使用寿命长。性能参数容量：标称1000L（实际灌装密度1.5时容积约1060L）。尺寸：外型尺寸约1200×1000×1160mm，净重60±1KG。压力测试：液压试验压力120kPa，渗漏试验压力22kPa，跌落试验高度2m。堆码能力：灌装密度≤1.5时可堆码2层，密度＞1.5时堆码1层，满载静态堆码高度可达4层。',
+      price: '150',
-      price: '380.00',
+      rank: '2',
-      //地址
+      imageUrl: 'images/fruit.png',
-      address: '临沧市耿马县孟定镇100号',
-      locationUrl: 'images/dz.png',
-      //联系人
-      contact: '李伟',
-      type: '塑料容器',
-      //电话
-      phone: '15678459087',
-
-      rank: '1',
-      imageUrl: 'images/22.jpg',
     },
     {
-      title: '快递水果纸箱,苹果橙子纸箱定做印刷纸箱',
+      title: '水果分拣服务',
-      description: '4号箱 1.4元/件',
+      description: '好果分拣站 ',
-      introduce:
+      location: '临沧市-耿马县',
-        '基础材质瓦楞纸板：主流采用三层或五层结构，由面纸、瓦楞芯纸和里纸复合而成。五层纸板（如“B楞+C楞”组合）抗压强度提升40%，适合长途运输或堆码存储。环保材料：部分厂家使用再生纸浆或FSC认证纸板，符合欧盟环保标准，可降解率达90%以上。结构优化加强设计：针对苹果、橙子等重果，箱体四角增加L型护角或内置十字隔板，抗压强度从500kg提升至800kg。防潮处理：外层涂布防水膜或使用PE淋膜纸板，防潮性能提升3倍，适应冷链运输环境。',
+      price: '150',
-      price: '1.40',
+      rank: '3',
-      //地址
+      imageUrl: 'images/fruit.png',
-      address: '临沧市耿马县孟定镇100号',
-      locationUrl: 'images/dz.png',
-      //联系人
-      contact: '张可然',
-      type: '纸箱',
-      //电话
-      phone: '15678459087',
-
-      rank: '1',
-      imageUrl: 'images/33.jpg',
     },
     {
-      title: '纸箱包装盒,物流箱包装箱',
+      title: '水果分拣服务',
-      description: '通货 0.5元/个',
+      description: '果美分拣站 ',
-      introduce:
+      location: '临沧市-耿马县',
-        '材质与结构基础材料：以瓦楞纸板为主，分为三层（单瓦楞）、五层（双瓦楞）和七层结构。三层瓦楞：面纸+瓦楞芯纸+里纸，成本低，适用于轻量商品（如日用品、电子产品配件）。五层瓦楞：增加一层芯纸和面纸，抗压强度提升50%-80%，常用于家电、家具等重物包装。七层瓦楞：超强承重设计，适用于工业设备、大型机械等极端承重需求。环保升级：部分采用再生纸浆或FSC认证材料，可降解率达90%以上，符合欧盟ROHS标准。',
+      price: '150',
-      price: '0.50',
+      rank: '',
-      //地址
+      imageUrl: 'images/fruit.png',
-      address: '临沧市耿马县孟定镇100号',
+    },
-      locationUrl: 'images/dz.png',
+    {
-      //联系人
+      title: '水果分拣服务',
-      contact: '张可然',
+      description: '好果存分拣站 ',
-      type: '纸箱',
+      location: '临沧市-耿马县',
-      //电话
+      price: '150',
-      phone: '15678459087',
+      rank: '',
-
+      imageUrl: 'images/fruit.png',
-      rank: '1',
-      imageUrl: 'images/44.jpg',
     },
   ],
 });
@@ -260,7 +273,7 @@ const toLink = (row) => {
   row.data = ['高品质', '杀菌灭毒', '绿色'];
   router.push({
     path: '/sub-operation-service/packaging/details1',
-    query: row,
+    // query: row,
   });
 };
 const applicationPackaging = () => {
@@ -461,8 +474,9 @@ $border-color: #dcdfe6; // 边框颜色
 .storage-desc,
 .storage-tags,
 .storage-location {
+  overflow: hidden;
   margin: 10px 0;
-  width: 70%;
+  width: 100%;
   text-align: left;
 }
 .storage-title {
@@ -473,7 +487,7 @@ $border-color: #dcdfe6; // 边框颜色
 }
 .storage-desc {
   font-size: 16px;
-  color: #000000;
+  color: #999999;
   @include ellipsis;
   i {
     display: inline-block;
@@ -493,15 +507,6 @@ $border-color: #dcdfe6; // 边框颜色
   font-weight: 400;
   color: #000000;
 }
-.storage-location1 {
-  color: #adadad;
-  //超出两行省略
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 .storage-price {
   display: flex;
   justify-content: space-between;
@@ -532,9 +537,9 @@ $border-color: #dcdfe6; // 边框颜色
 }
 .rank-badge {
   position: absolute;
-  top: 30px;
+  top: 0;
   right: 20px;
-  // width: 80px;
+  width: 80px;
-  // height: 80px;
+  height: 80px;
 }
 </style>

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

@@ -46,7 +46,7 @@
     <section>
       <common>
         <template #main>
-          <el-card shadow="none" style="border-radius: 14px; position: relative">
+          <el-card shadow="none" style="border-radius: 14px">
             <div class="tabs tabs0">
               <div class="tab cursor">
                 <div
@@ -72,7 +72,7 @@
                   :key="index"
                   class="tab_list_li"
                   :class="{ active: currentTab1 === index }"
-                  @click.stop="switchTab(item, index)"
+                  @click.stop="currentTab1 = index"
                 >
                   {{ item }}
                 </div>
@@ -91,30 +91,42 @@
                 </div>
               </div>
             </div>
-            <div style="position: absolute; right: 3%; top: 27%">
-              <el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
-            </div>
           </el-card>
           <el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
-            <el-col v-for="(item, index) in state.data0" :key="index" :span="12">
+            <el-col :span="12">
+              <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" @click="toLink" />
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <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" @click="toLink" />
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+            <!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
               <el-card class="storage-card" shadow="hover">
                 <div class="storage-content">
                   <div class="storage-content-top" @click="toLink(item)">
                     <img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
                     <div class="storage-info">
-                      <h2 class="storage-title">
+                      <h3 class="storage-title">{{ item.title }}</h3>
-                        <span class="span">{{ item.title }}</span>
-                        <span><img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" /></span>
-                      </h2>
                       <div class="storage-desc">
                         <span>{{ item.description }}</span>
-                        <!-- <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
+                        <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
-                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" /> -->
+                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
                       </div>
                       <div class="storage-tags">
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.type }}</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.monitor }}</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
-                        <!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag> -->
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
                       </div>
                       <div class="storage-location">
                         <el-icon><Location /></el-icon>
@@ -124,20 +136,20 @@
                   </div>
                   <div class="storage-price">
                     <div class="storage-price-left">
-                      <!-- <span class="price-label">报价</span> -->
+                      <span class="price-label">报价</span>
                       <span class="price-amount">¥{{ item.price }}/kg</span>
                     </div>
                     <el-button type="success" class="contact-btn" @click="goDei(item)">
-                      <!-- <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" /> -->
+                      <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
-                      <span>预约</span>
+                      <span>联系卖家</span>
                     </el-button>
                   </div>
-                  <!-- <div v-if="item.rank" class="rank-badge">
+                  <div v-if="item.rank" class="rank-badge">
                     <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
-                  </div> -->
+                  </div>
                 </div>
               </el-card>
-            </el-col>
+            </el-col> -->
           </el-row>
           <el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
             <el-col :span="24">
@@ -150,7 +162,9 @@
               </el-card>
             </el-col>
           </el-row>
-
+          <div style="position: fixed; left: 50%; bottom: 7%">
+            <el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
+          </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
@@ -158,7 +172,7 @@
   </div>
 </template>
 <script setup name="page-menu">
-import { onMounted, ref, reactive, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
@@ -177,81 +191,46 @@ const state = reactive({
   query: {
     current: 1,
   },
-  data0: [],
   data: [
     {
-      title: '云南绿源生态农业有限公司',
+      title: '蔬菜分拣服务',
-      description: '根茎类 ',
+      description: '绿鲜甄选蔬菜分拣中心 ',
-      location: '临沧市·耿马县',
+      location: '临沧市-耿马县',
-      locationUrl: 'images/dz.png',
+      price: '150',
-      //分拣
-      type: '自动化分拣',
-      //监控方式
-      monitor: '全程实时监控',
-      price: '3.00~5.00',
       rank: '1',
-      imageUrl: 'images/5.png',
+      imageUrl: 'images/vegetable.png',
-      //联系人
-      contact: '李志强',
-      phone: '13988324687',
-      //介绍
-      introduce:
-        '云南绿源生态农业有限公司专注耿马高原根茎类作物，拥有5000㎡无尘车间，自动滚轴分选线可精准区分大小、糖度；全程冷链+云端监控，客户手机即可查看货位温湿度；3-5元/kg为当季地头价，量大可议价，支持京东冷链直发、边贸自提。',
     },
     {
-      title: '云南丰瑞农业发展有限公司',
+      title: '水果分拣服务',
-      description: '豆类 ',
+      description: '果韵鲜享分拣站',
-      location: '临沧市·耿马县',
+      location: '临沧市-耿马县',
-      locationUrl: 'images/dz.png',
+      price: '150',
-      //分拣
+      rank: '2',
-      type: '人工分拣',
+      imageUrl: 'images/fruit.png',
-      //监控方式
-      monitor: '全程实时监控',
-      price: '2.50~4.00',
-      rank: '1',
-      imageUrl: 'images/6.png',
-      //联系人
-      contact: '张 莉',
-      phone: '13888013256',
-      //介绍
-      introduce:
-        '云南丰瑞农业发展主打滇西蚕豆、芸豆，人工手选保证完整无破损，200㎡恒温库+24h摄像监控，价格2.5-4元/kg含简易真空小袋；可提供出口级质检报告，孟定口岸当天装车，适合电商小包及边贸批量。',
     },
     {
-      title: '云南田园牧歌农业科技有限公司',
+      title: '水果分拣服务',
-      description: '菌菇类 ',
+      description: '好果分拣站 ',
-      location: '临沧市·耿马县',
+      location: '临沧市-耿马县',
-      locationUrl: 'images/dz.png',
+      price: '150',
-      //分拣
+      rank: '3',
-      type: '自动化分拣',
+      imageUrl: 'images/fruit.png',
-      //监控方式
-      monitor: '全程实时监控',
-      price: '4.00~6.00',
-      rank: '1',
-      imageUrl: 'images/7.png',
-      contact: '王 磊',
-      phone: '15987925518',
-      //介绍
-      introduce:
-        '云南田园牧歌农业科技依托耿马原始松林，年产野生菌鲜货800吨；自动光学分拣机剔除虫蛀、畸形，4-6元/kg为产地批发价，全程-2℃冷藏车直达昆明机场；支持顺丰冷运、泡沫箱+冰袋包装，24小时温湿度云端可查。',
     },
     {
-      title: '云南金土地农业有限公司',
+      title: '水果分拣服务',
-      description: '坚果类 ',
+      description: '果美分拣站 ',
-      location: '临沧市·耿马县',
+      location: '临沧市-耿马县',
-      locationUrl: 'images/dz.png',
+      price: '150',
-      //分拣
+      rank: '',
-      type: '人工分拣',
+      imageUrl: 'images/fruit.png',
-      //监控方式
+    },
-      monitor: '全程实时监控',
+    {
-      price: '5.00~7.00',
+      title: '水果分拣服务',
-      rank: '1',
+      description: '好果存分拣站 ',
-      imageUrl: 'images/4.png',
+      location: '临沧市-耿马县',
-      contact: '陈 刚',
+      price: '150',
-      phone: '13759347102',
+      rank: '',
-      //介绍
+      imageUrl: 'images/fruit.png',
-      introduce:
-        '云南金土地农业专注澳洲坚果、薄壳核桃，人工色选+比重筛选，碎仁率＜2%；500㎡充氮保鲜库全程可视监控，5-7元/kg含麻袋或礼盒包装；提供有机认证，可代发全国，边贸客户可孟定口岸自提，散称或整柜均可。',
     },
   ],
 });
@@ -273,24 +252,10 @@ const form = reactive({
 const diotext = ref('');
 const diodescription = ref('');
 
-//切换
-const switchTab = (item, index) => {
-  console.log(item);
-  if (item === '全部') {
-    state.data0 = state.data;
-  } else if (item === '人工分拣') {
-    state.data0 = state.data.filter((item) => item.type === '人工分拣');
-  } else {
-    state.data0 = state.data.filter((item) => item.type === '自动化分拣');
-  }
-
-  currentTab1.value = index;
-};
-
 const goDei = (data) => {
-  // diodescription.value = data.description;
+  diodescription.value = data.description;
-  // diotext.value = data.title;
+  diotext.value = data.title;
-  // dialogVisible.value = true;
+  dialogVisible.value = true;
 };
 
 const handleSubmit = () => {
@@ -318,10 +283,6 @@ const handleApply = () => {
     path: '/sub-operation-service/packaging/apply',
   });
 };
-onMounted(() => {
-  console.log('state.data', state.data);
-  state.data0 = state.data;
-});
 </script>
 <style lang="scss" scoped>
 // 基础颜色配置
@@ -482,7 +443,7 @@ $border-color: #dcdfe6; // 边框颜色
   border-radius: 16px;
 }
 .storage-content {
-  // @include flex-column;
+  @include flex-column;
 
   gap: 16px;
   &-top {
@@ -507,7 +468,7 @@ $border-color: #dcdfe6; // 边框颜色
   cursor: pointer;
 }
 .storage-info {
-  // padding-right: 50px;
+  padding-right: 50px;
   flex: 1;
   cursor: pointer;
 }
@@ -519,21 +480,12 @@ $border-color: #dcdfe6; // 边框颜色
   margin: 10px 0;
   width: 100%;
   text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
 }
 .storage-title {
-  margin-top: 0 !important;
+  font-size: 20px;
   font-weight: 700;
   color: #000000;
   @include ellipsis;
-  .span {
-    width: 250px;
-    //超出宽度显示省略号
-    @include ellipsis;
-    margin-right: 10px;
-  }
 }
 .storage-desc {
   font-size: 16px;