仓储物流 - 仓储服务模块开发

sub-government-affairs-service/src/styles/custom.scss

@@ -326,13 +326,20 @@
   justify-content: flex-start;
   align-items: flex-start;
 }
-// 弹性布局-左对齐-上对齐（通用）
+// 弹性布局-左对齐-上下居中（通用）
 .flex-left-center {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
 }
+// 弹性布局-左右居中-上下居中（通用）
+.flex-center-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 
 // 溢出隐藏（通用）
 .text-ellipsis {

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

@@ -2,90 +2,75 @@
   <section>
     <common>
       <template #main>
-        <el-card shadow="none" style="border-radius: 14px">
+        <div class="warehouse-detail">
           <div class="title">
             <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" 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" />
+          <div class="detail-content-box">
+            <div class="detail-content-box-left">
+              <img :src="state.data.imageUrl" fit="cover" />
+            </div>
+            <div class="detail-content-box-center">
+              <p class="center-title">
+                <span class="highlight">【{{ state.data.typeName }}】</span>{{ state.data.title }}
+              </p>
+              <div class="center-text">
+                <div class="center-text-lable" style="line-height: 32px">参考价格：</div>
+                <div class="flex-1">
+                  <p class="top-text" style="line-height: 32px">{{ state.data.price }}</p>
+                </div>
               </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 class="center-text">
+                <div class="center-text-lable">仓库面积：</div>
+                <div class="flex-1">{{ state.data.storageArea }}</div>
               </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 ? 'm³' : state.data.priceSpec === 2 ? '间' : state.data.priceSpec === 3 ? '㎡' : ''
-                    }}/{{ state.data.timeSpec === 1 ? '天' : state.data.timeSpec === 2 ? '月' : state.data.timeSpec === 3 ? '年' : '' }}
-                  </span>
-                </div>
-                <div>
-                  <el-button size="large" type="primary" @click="goDei">
-                    <el-icon class="el-icon--right"><ChatLineRound /></el-icon>
-                    留下信息
-                  </el-button>
-                </div>
+              <div class="center-text">
+                <div class="center-text-lable">仓库区域：</div>
+                <div class="flex-1">{{ state.data.location }}</div>
+              </div>
+              <div class="center-text">
+                <div class="center-text-lable">启动年月：</div>
+                <div class="flex-1">2025年6月</div>
+              </div>
+              <div class="center-text">
+                <div class="center-text-lable">计价单位：</div>
+                <div class="flex-1">{{ state.data.pricingUnit }}</div>
+              </div>
+              <div style="margin-top: 20px">
+                <el-button size="large" type="primary" @click="dialogVisible = true">立即预约</el-button>
+                <el-button size="large" plain style="width: 96px">收藏</el-button>
+                <el-button size="large" plain style="width: 96px">分享</el-button>
               </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>
+
+          <div class="warehouse-detail-title">
+            <img :src="getAssetsFile('images/warehouseLogistics/product.png')" alt="" style="width: 30px" />
+            <div class="center-title" style="margin: 0 0 4px 10px">仓储信息</div>
+          </div>
+          <div class="warehouse-content-align">
+            <div class="center-text">
+              <div class="center-text-lable">预计租期：</div>
+              <div class="flex-1">{{ state.storageInfor.leaseTerm }}</div>
+              <div class="center-text-lable">货品类型：</div>
+              <div class="flex-1">{{ state.storageInfor.productType }}</div>
+            </div>
+            <div class="center-text">
+              <div class="center-text-lable">仓库面积：</div>
+              <div class="flex-1">{{ state.data.storageArea }}</div>
+              <div class="center-text-lable">可用面积：</div>
+              <div class="flex-1">{{ state.data.usableArea }}</div>
+            </div>
+          </div>
+        </div>
       </template>
     </common>
-    <el-dialog v-model="dialogVisible" title="立即预约" width="1000" :before-close="handleClose" center>
+    <el-dialog v-model="dialogVisible" title="立即预约" width="1000" center>
       <!-- <h3>立即预约</h3> -->
-      <img src="@/assets/images/warehouseLogistics/img28.png" fit="cover" class="storage-image" @click="toLink" />
+      <img src="@/assets/images/warehouseLogistics/img28.png" fit="cover" class="storage-image" />
 
       <template #footer>
         <div class="dialog-footer">
@@ -106,10 +91,97 @@ import { warehouseDetail } from '@/apis/warehouseLogistics.js';
 const route = useRoute();
 const router = useRouter();
 
+import img1 from './../images/普通仓储/1.jpg';
+import img2 from './../images/普通仓储/2.jpg';
+import img3 from './../images/恒温仓储/1.jpg';
+import img4 from './../images/冷库/4.jpg';
+import img5 from './../images/气调仓储/1.jpg';
 const state = reactive({
   query: {},
-  data: {},
+  data: {
+    imageUrl: img1,
+    typeId: 1,
+    typeName: '普通仓储',
+    title: '孟定边贸仓储中心',
+    operationUnit: '耿马宏泰物流有限公司 ',
+    pricingUnit: '元/㎡·月',
+    storageArea: '8,600㎡',
+    usableArea: '2,300㎡',
+    location: '孟定镇中缅大道8号',
+    price: '￥12元/㎡/月',
+  },
+  storageInfor: {
+    leaseTerm: '1-3年(可分段报价)', //预计租期
+    productType: '水果(需控温0-5℃，湿度85%-90%)', //货品类型
+  },
 });
+const allData = ref([
+  {
+    imageUrl: img1,
+    typeId: 1,
+    typeName: '普通仓储',
+    title: '孟定边贸仓储中心',
+    operationUnit: '耿马宏泰物流有限公司 ',
+    pricingUnit: '元/㎡·月',
+    storageArea: '8,600㎡',
+    usableArea: '2,300㎡',
+    location: '孟定镇中缅大道8号',
+    price: '￥12元/㎡/月',
+    rank: '1',
+  },
+  {
+    imageUrl: img2,
+    typeId: 2,
+    typeName: '普通仓储',
+    title: '绿色食品园区集散仓',
+    operationUnit: '耿马县供销集团',
+    pricingUnit: '元/吨·天',
+    storageArea: '12,000㎡',
+    usableArea: '4,500㎡',
+    location: '绿色食品园区二期',
+    price: '￥1.5元/吨/月',
+    rank: '2',
+  },
+  {
+    imageUrl: img3,
+    typeId: 3,
+    typeName: '恒温仓储',
+    title: '蔗糖储备恒温库',
+    operationUnit: '耿马糖业有限公司',
+    pricingUnit: '元/托·月',
+    storageArea: '3,200㎡',
+    usableArea: '800㎡',
+    location: '耿马糖厂东侧',
+    price: '￥28元/托/月',
+    rank: '3',
+  },
+  {
+    imageUrl: img4,
+    typeId: 4,
+    typeName: '冷库',
+    title: '孟定果蔬冷链中心',
+    operationUnit: '临沧边境合作区管委会 ',
+    pricingUnit: '元/板·天',
+    storageArea: '5,000㎡',
+    usableArea: '1,200㎡',
+    location: '孟定海关监管区旁',
+    price: '￥2.8元/板/月',
+    rank: '4',
+  },
+  {
+    imageUrl: img5,
+    typeId: 5,
+    typeName: '气调仓储',
+    title: '高原蔬菜气调保鲜库',
+    operationUnit: '耿马高原农业合作社 ',
+    pricingUnit: '元/吨·月',
+    storageArea: '1,800㎡',
+    usableArea: '300㎡',
+    location: '勐撒镇蔬菜基地',
+    price: '￥45元/吨/月',
+    rank: '5',
+  },
+]);
 const dialogVisible = ref(false);
 
 const toBack = (level) => {
@@ -129,10 +201,20 @@ const queryDetail = () => {
 
 onMounted(() => {
   state.query.id = route.query.id;
-  queryDetail();
+  // queryDetail();
+
+  if (route.query.typeId) {
+    state.data = allData.value.find((item) => item.typeId === route.query.typeId);
+    console.log(state.data);
+  }
 });
 </script>
 <style lang="scss" scoped>
+.warehouse-detail {
+  border-radius: 14px;
+  background-color: #fff;
+  padding: 16px;
+}
 .title {
   text-align: left;
   font-size: 18px;
@@ -172,24 +254,6 @@ $border-color: #dcdfe6; // 边框颜色
   }
 }
 
-.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 {
@@ -239,137 +303,72 @@ $border-color: #dcdfe6; // 边框颜色
     }
   }
 }
-.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;
+.warehouse-detail-title {
+  font-size: 22px;
+  font-weight: bold;
+  text-align: left;
+  margin: 16px 0;
   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 {
+  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.detail-content-box {
+  height: 276px;
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
 }
-
-.mr-4 {
-  margin-right: 1rem;
+.detail-content-box-left {
+  height: 100%;
+  width: 40%;
+  border-radius: 14px;
+  position: relative;
+  overflow: hidden;
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+  }
 }
-
-.text-green-500 {
-  color: #25bf82;
-}
-
-.text-lg {
-  font-size: 1.125rem;
+.detail-content-box-center {
+  flex: 1;
   text-align: left;
 }
-
-.font-bold {
-  font-weight: 700;
+.center-title {
+  font-size: 22px;
+  font-weight: bold;
+  text-align: left;
+  margin-bottom: 10px;
+  .highlight {
+    color: #25bf82;
+  }
 }
-
-.rounded-lg {
-  border-radius: 0.5rem;
-  background-color: #f5f5f5;
+.warehouse-content-align {
+  text-align: left;
 }
-
-.shadow {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+.center-text {
+  font-size: 16px;
+  display: flex;
+  margin-bottom: 10px;
+  .center-text-lable {
+    color: #666;
+    width: 86px;
+  }
+  .flex-1 {
+    flex: 1;
+    text-align: left;
+  }
 }
-
-.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;
+.top-text {
+  font-size: 22px;
+  color: #25bf82;
+  font-weight: bold;
 }
 </style>

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

@@ -3,7 +3,7 @@
   <section>
     <common>
       <template #main>
-        <el-card shadow="none" style="border-radius: 14px">
+        <el-card shadow="never" style="border-radius: 14px; position: relative">
           <div class="tabs tabs0">
             <div class="tab cursor">
               <div
@@ -12,11 +12,7 @@
                 class="tab_list_li"
                 style="margin-left: 20px; margin-bottom: 10px"
                 :class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
-                @click.stop="
-                  currentTab0 = index;
-                  currentTab1 = 0;
-                  currentTab2 = 0;
-                "
+                @click="handleClick(index)"
               >
                 {{ item }}
               </div>
@@ -29,59 +25,58 @@
                 :key="index"
                 class="tab_list_li"
                 :class="{ active: currentTab1 === index }"
-                @click.stop="currentTab1 = index"
+                @click="handleTab1Click(item, index)"
               >
                 {{ item }}
               </div>
             </div>
           </div>
-        </el-card>
-        <el-row :gutter="20" style="margin-top: 10px">
-          <el-col v-if="currentTab0 === 0" :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/img7.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
-                </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/img8.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col v-else :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/img9.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/img10.png" fit="cover" class="storage-image storage-image1" />
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <div style="position: fixed; left: 50%; bottom: 7%">
+          <div style="position: absolute; right: 30px; top: 30px">
             <el-button v-if="currentTab0 === 0" style="padding: 10px 50px" size="large" type="primary" @click="application">发布需求</el-button>
           </div>
-          <!-- <el-pagination
-            :size="'large'"
-            :page-size="paginations.size"
-            :current-page="paginations.page"
-            :total="paginations.total"
-            background
-            layout="prev, pager, next"
-            @current-change="currentChange"
-          /> -->
-        </el-row>
+        </el-card>
+        <div v-if="state.data == 0" class="warehouse-content-box no-data">暂无数据</div>
+        <div v-else style="padding-bottom: 20px">
+          <div v-for="(item, index) in state.data" :key="index" class="warehouse-content-box">
+            <div class="warehouse-content-box-left">
+              <img :src="item.imageUrl" fit="cover" />
+            </div>
+            <div class="warehouse-content-box-center">
+              <p class="center-title">
+                <span class="highlight">【{{ item.typeName }}】</span>{{ item.title }}
+              </p>
+              <div class="center-text">
+                <div class="center-text-lable">运营单位：</div>
+                <div class="flex-1">{{ item.operationUnit }}</div>
+                <div class="center-text-lable">计价单位：</div>
+                <div class="center-text-cont">{{ item.pricingUnit }}</div>
+              </div>
+              <div class="center-text">
+                <div class="center-text-lable">仓库面积：</div>
+                <div class="flex-1">{{ item.storageArea }}</div>
+                <div class="center-text-lable">可用面积：</div>
+                <div class="center-text-cont">{{ item.usableArea }}</div>
+              </div>
+              <p class="center-location">
+                <el-icon size="20px"><LocationFilled /></el-icon>{{ item.location }}
+              </p>
+            </div>
+            <div class="warehouse-content-box-right">
+              <p class="top-text">{{ item.price }}</p>
+              <el-button size="large" type="primary" class="right-button" @click="toLink(item)">预约</el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- <el-pagination
+          :size="'large'"
+          :page-size="paginations.size"
+          :current-page="paginations.page"
+          :total="paginations.total"
+          background
+          layout="prev, pager, next"
+          @current-change="currentChange"
+        /> -->
       </template>
     </common>
   </section>
@@ -107,9 +102,26 @@ const tab0 = reactive(['仓储服务']);
 const tab1 = reactive(['全部', '普通仓储', '恒温仓储', '冷库', '气调仓储']);
 const currentTab0 = ref(0);
 const currentTab1 = ref(0);
-const currentTab2 = ref(0);
-const currentTab3 = ref(0);
+const handleClick = (index) => {
+  currentTab0.value = index;
+  currentTab1.value = 0;
+  console.log(currentTab0.value);
+};
+const handleTab1Click = (item, index) => {
+  currentTab1.value = index;
+  console.log(currentTab1.value);
+  if (item === '全部') {
+    state.data = allData.value;
+  } else {
+    state.data = allData.value.filter((el) => el.typeName === item);
+  }
+};
 
+import img1 from './../images/普通仓储/1.jpg';
+import img2 from './../images/普通仓储/2.jpg';
+import img3 from './../images/恒温仓储/1.jpg';
+import img4 from './../images/冷库/4.jpg';
+import img5 from './../images/气调仓储/1.jpg';
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
   query: {
@@ -117,76 +129,96 @@ const state = reactive({
   },
   data: [
     {
-      imageUrl: '/storage1.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心 ',
-      location: '临沧市-耿马县',
-      price: '600.0',
+      imageUrl: img1,
+      typeId: 1,
+      typeName: '普通仓储',
+      title: '孟定边贸仓储中心',
+      operationUnit: '耿马宏泰物流有限公司 ',
+      pricingUnit: '元/㎡·月',
+      storageArea: '8,600㎡',
+      usableArea: '2,300㎡',
+      location: '孟定镇中缅大道8号',
+      price: '￥12元/㎡/月',
       rank: '1',
     },
     {
-      imageUrl: '/storage2.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心',
-      location: '临沧市-耿马县',
-      price: '600.0',
+      imageUrl: img2,
+      typeId: 2,
+      typeName: '普通仓储',
+      title: '绿色食品园区集散仓',
+      operationUnit: '耿马县供销集团',
+      pricingUnit: '元/吨·天',
+      storageArea: '12,000㎡',
+      usableArea: '4,500㎡',
+      location: '绿色食品园区二期',
+      price: '￥1.5元/吨/月',
       rank: '2',
     },
     {
-      imageUrl: '/storage3.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心 ',
-      location: '临沧市-耿马县',
-      price: '600.0',
+      imageUrl: img3,
+      typeId: 3,
+      typeName: '恒温仓储',
+      title: '蔗糖储备恒温库',
+      operationUnit: '耿马糖业有限公司',
+      pricingUnit: '元/托·月',
+      storageArea: '3,200㎡',
+      usableArea: '800㎡',
+      location: '耿马糖厂东侧',
+      price: '￥28元/托/月',
       rank: '3',
     },
     {
-      imageUrl: '/storage3.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心 ',
-      location: '临沧市-耿马县',
-      price: '600.0',
-      rank: '',
+      imageUrl: img4,
+      typeId: 4,
+      typeName: '冷库',
+      title: '孟定果蔬冷链中心',
+      operationUnit: '临沧边境合作区管委会 ',
+      pricingUnit: '元/板·天',
+      storageArea: '5,000㎡',
+      usableArea: '1,200㎡',
+      location: '孟定海关监管区旁',
+      price: '￥2.8元/板/月',
+      rank: '4',
     },
     {
-      imageUrl: '/storage3.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心 ',
-      location: '临沧市-耿马县',
-      price: '600.0',
-      rank: '',
-    },
-    {
-      imageUrl: '/storage3.jpg',
-      title: '果蔬保鲜仓储',
-      description: '绿鲜蔬选果蔬仓储中心 ',
-      location: '临沧市-耿马县',
-      price: '600.0',
-      rank: '',
+      imageUrl: img5,
+      typeId: 5,
+      typeName: '气调仓储',
+      title: '高原蔬菜气调保鲜库',
+      operationUnit: '耿马高原农业合作社 ',
+      pricingUnit: '元/吨·月',
+      storageArea: '1,800㎡',
+      usableArea: '300㎡',
+      location: '勐撒镇蔬菜基地',
+      price: '￥45元/吨/月',
+      rank: '5',
     },
   ],
 });
+const allData = ref([...state.data]);
+
 const formData = reactive({});
 const paginations = reactive({
   page: 1,
   size: 2,
   total: 0,
 });
+const currentChange = (current) => {
+  paginations.page = current;
+  getWarehouseList(currentTab.value + 1);
+};
 
 const dialogFormVisible = ref(false);
 const formLabelWidth = ref('120px');
 
 onMounted(() => {
-  getWarehouseList('1');
+  // getWarehouseList('1');
+
+  setMockData();
 });
 
 const currentTab = ref(0);
 
-const currentChange = (current) => {
-  paginations.page = current;
-  getWarehouseList(currentTab.value + 1);
-};
-
 const getWarehouseList = (type) => {
   warehouseList({ type: type, current: paginations.page, size: paginations.size }).then((res) => {
     state.data = [];
@@ -199,12 +231,20 @@ const getWarehouseList = (type) => {
     }
   });
 };
+const setMockData = () => {
+  let testData = state.data;
+  console.log(testData);
+  if (testData.length === 0) return;
+};
 
 // 跳转详情页
 const toLink = (row) => {
   router.push({
     name: 'warehouse-detail',
-    query: { id: row?.id ?? '100' },
+    query: {
+      id: row?.id ?? '100',
+      typeId: row?.typeId ?? '1',
+    },
   });
 };
 // 跳转申请仓储需求
@@ -294,6 +334,7 @@ const priceConfirm = () => {
     color: #000000;
     font-size: 20px;
     font-weight: 400;
+    transition: color 0.3s ease;
   }
   .tab_list_li:first-child {
     margin-left: 20px;
@@ -302,7 +343,19 @@ const priceConfirm = () => {
     color: rgba(37, 191, 130, 1);
   }
   .tab_list_li0 {
-    border-bottom: 2px solid rgba(37, 191, 130, 1);
+    position: relative;
+    transition: color 0.3s ease;
+  }
+  .tab_list_li0::after {
+    content: '';
+    position: absolute;
+    left: 25%;
+    bottom: 0;
+    width: 50%;
+    height: 4px;
+    background: rgba(37, 191, 130, 1);
+    border-radius: 4px;
+    transition: all 0.3s ease;
   }
 }
 .cursor {
@@ -421,4 +474,87 @@ const priceConfirm = () => {
   width: 80px;
   height: 80px;
 }
+
+.warehouse-content-box {
+  min-height: 150px;
+  margin-top: 20px;
+  padding: 20px;
+  border-radius: 14px;
+  background-color: #fff;
+  display: flex;
+  gap: 20px;
+}
+.no-data {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+.warehouse-content-box-left {
+  height: 120px;
+  width: 120px;
+  border-radius: 14px;
+  position: relative;
+  overflow: hidden;
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+  }
+}
+.warehouse-content-box-center {
+  flex: 1;
+  text-align: left;
+  .center-title {
+    font-size: 22px;
+    font-weight: bold;
+    text-align: left;
+    margin-bottom: 10px;
+    .highlight {
+      color: #25bf82;
+    }
+  }
+  .center-text {
+    font-size: 14px;
+    display: flex;
+    margin-bottom: 10px;
+    .center-text-lable {
+      color: #666;
+      width: 70px;
+    }
+    .flex-1 {
+      flex: 1;
+    }
+    .center-text-cont {
+      width: 120px;
+    }
+  }
+  .center-location {
+    font-size: 14px;
+    line-height: 20px;
+    .el-icon {
+      vertical-align: bottom;
+    }
+  }
+}
+.warehouse-content-box-right {
+  width: 160px;
+  font-size: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  .top-text {
+    font-size: 22px;
+    color: #25bf82;
+    font-weight: bold;
+  }
+  .right-button {
+    width: 100%;
+  }
+}
 </style>