分拣包装，仓储物流

main/.env.development

@@ -13,9 +13,9 @@ VITE_APP_SUB_GSR = '//localhost:9530/new-digital-agriculture-screen/'
 VITE_APP_BASE_API = '/apis' 
 VITE_APP_UPLOAD_API = '/uploadApis'
 # 阿里云接口地址
-VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
+# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
-VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
+# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
 # 内网接口地址
-# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
+VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
-# VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
+VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
 # VITE_APP_VIST_URL = 'http://192.168.18.99'

sub-operation-service/components.d.ts

@@ -10,7 +10,6 @@ declare module 'vue' {
     BreadComp: typeof import('./src/components/breadComp.vue')['default']
     CenterMap: typeof import('./src/components/centerMap.vue')['default']
     CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
-    copy: typeof import('./src/components/custom-scroll-title copy/index.vue')['default']
     CostomImg: typeof import('./src/components/costomImg.vue')['default']
     CustomBack: typeof import('./src/components/customBack.vue')['default']
     CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']

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

@@ -376,30 +376,30 @@ export const constantRoutes = [
     redirect: '/sub-operation-service/packaging/sorting',
     meta: { title: '分拣包装' },
     children: [
-      {
-        path: '/sub-operation-service/packaging/sorting',
-        component: () => import('@/views/error/blank.vue'),
-        name: 'sortingMain',
-        meta: { title: '分拣首页' },
-      },
       // {
       //   path: '/sub-operation-service/packaging/sorting',
-      //   component: () => import('@/views/packaging/sorting.vue'),
+      //   component: () => import('@/views/error/blank.vue'),
       //   name: 'sortingMain',
       //   meta: { title: '分拣首页' },
       // },
       {
-        path: '/sub-operation-service/packaging/index',
+        path: '/sub-operation-service/packaging/sorting',
-        component: () => import('@/views/error/blank.vue'),
+        component: () => import('@/views/packaging/sorting.vue'),
-        name: 'packagingMain',
+        name: 'sortingMain',
-        meta: { title: '包装首页' },
+        meta: { title: '分拣首页' },
       },
       // {
       //   path: '/sub-operation-service/packaging/index',
-      //   component: () => import('@/views/packaging/index.vue'),
+      //   component: () => import('@/views/error/blank.vue'),
       //   name: 'packagingMain',
       //   meta: { title: '包装首页' },
       // },
+      {
+        path: '/sub-operation-service/packaging/index',
+        component: () => import('@/views/packaging/index.vue'),
+        name: 'packagingMain',
+        meta: { title: '包装首页' },
+      },
       {
         path: '/sub-operation-service/packaging/details',
         component: () => import('@/views/packaging/details.vue'),
@@ -415,36 +415,36 @@ export const constantRoutes = [
     redirect: '/sub-operation-service/warehouse',
     meta: { title: '仓储物流' },
     children: [
-      {
-        path: '/sub-operation-service/warehouse',
-        component: () => import('@/views/error/blank.vue'),
-        name: 'warehouseMain',
-        meta: { title: '仓储首页' },
-      },
       // {
       //   path: '/sub-operation-service/warehouse',
-      //   component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
+      //   component: () => import('@/views/error/blank.vue'),
       //   name: 'warehouseMain',
       //   meta: { title: '仓储首页' },
       // },
+      {
+        path: '/sub-operation-service/warehouse',
+        component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
+        name: 'warehouseMain',
+        meta: { title: '仓储首页' },
+      },
       {
         path: '/sub-operation-service/warehouse-detail',
         component: () => import('@/views/warehouseLogistics/warehouse/detail.vue'),
         name: 'warehouse-detail',
         meta: { title: '仓储详情' },
       },
-      {
-        path: '/sub-operation-service/logistics',
-        component: () => import('@/views/error/blank.vue'),
-        name: 'logistics-list',
-        meta: { title: '物流首页' },
-      },
       // {
       //   path: '/sub-operation-service/logistics',
-      //   component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
+      //   component: () => import('@/views/error/blank.vue'),
       //   name: 'logistics-list',
       //   meta: { title: '物流首页' },
       // },
+      {
+        path: '/sub-operation-service/logistics',
+        component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
+        name: 'logistics-list',
+        meta: { title: '物流首页' },
+      },
       {
         path: '/sub-operation-service/logistics-detail',
         component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),

sub-operation-service/src/views/packaging/components/common.vue

@@ -104,7 +104,7 @@ const menus = reactive([
     height: 100%;
     .left-menu,
     .common-content {
-      overflow-y: auto;
+      // overflow-y: auto;
       padding: 8px;
       height: calc(100% - 16px);
       border-radius: 8px;

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

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <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">
@@ -45,10 +46,27 @@
     <section>
       <common>
         <template #main>
-        <el-card shadow="none" style="border-radius: 14px; height: 200px">
+          <el-card shadow="none" style="border-radius: 14px">
+            <div class="tabs tabs0">
+              <div class="tab cursor">
+                <div
+                  v-for="(item, index) in tab0"
+                  :key="index"
+                  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;
+                  "
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
             <div class="tabs">
               <div class="tab cursor">
-              <div class="tab_list">塑料类包装</div>
                 <div
                   v-for="(item, index) in tab1"
                   :key="index"
@@ -59,8 +77,9 @@
                   {{ item }}
                 </div>
               </div>
+            </div>
+            <div class="tabs">
               <div class="tab cursor">
-              <div class="tab_list">纸类包装</div>
                 <div
                   v-for="(item, index) in tab2"
                   :key="index"
@@ -71,22 +90,19 @@
                   {{ item }}
                 </div>
               </div>
-            <div class="tab cursor">
-              <div class="tab_list">金属类包装</div>
-              <div
-                v-for="(item, index) in tab3"
-                :key="index"
-                class="tab_list_li"
-                :class="{ active: currentTab3 === index }"
-                @click.stop="currentTab3 = index"
-              >
-                {{ item }}
             </div>
+          </el-card>
+          <el-row v-if="currentTab0 === 0" :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/img4.png" fit="cover" class="storage-image storage-image1" />
                   </div>
                 </div>
               </el-card>
-        <el-row :gutter="20" style="margin-top: 10px">
+            </el-col>
-          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+            <!-- <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)">
@@ -100,8 +116,8 @@
                       </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>
-                      <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>
@@ -112,7 +128,7 @@
                   <div class="storage-price">
                     <div class="storage-price-left">
                       <span class="price-label">报价</span>
-                    <span class="price-amount">¥{{ item.price }}/m</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" />
@@ -120,17 +136,38 @@
                     </el-button>
                   </div>
                   <div v-if="item.rank" class="rank-badge">
-                  <!--              {{ item.rank }}-->
                     <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
                   </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>
-        <page-pagination :total="6" @current-change="currentChange" />
+          <div style="position: fixed; left: 50%; bottom: 7%">
+            <el-button style="padding: 10px 100px" size="large" type="primary">发布包装{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
+          </div>
+          <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
     </section>
+  </div>
 </template>
 <script setup name="page-menu">
 import { ref, reactive, watch } from 'vue';
@@ -142,9 +179,10 @@ import Common from './components/common.vue';
 const route = useRoute();
 const router = useRouter();
 
-const tab1 = reactive(['塑料类薄膜袋', '塑料瓶/壶', '塑料桶', '塑料盒', '塑料箱', '其他塑料包装制品']);
+const tab0 = reactive(['包装服务', '包装需求']);
-const tab2 = reactive(['纸盒', '纸箱', '纸袋', '其他纸类包装容器']);
+const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
-const tab3 = reactive(['金属罐', '金属桶', '金属盒', '其他金属类包装容器']);
+const tab2 = reactive(['全部', '塑料袋', '塑料瓶', '塑料桶', '塑料盒']);
+const tab3 = reactive(['水产', '其他类']);
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
   query: {
@@ -152,40 +190,49 @@ const state = reactive({
   },
   data: [
     {
-      imageUrl: 'images/film.png',
+      title: '蔬菜分拣服务',
-      title: '薄膜包装服务',
+      description: '绿鲜甄选蔬菜分拣中心 ',
-      description: '薄膜包装有限公司 ',
       location: '临沧市-耿马县',
-      price: '3',
+      price: '150',
       rank: '1',
+      imageUrl: 'images/vegetable.png',
     },
     {
-      imageUrl: 'images/plastics.png',
+      title: '水果分拣服务',
-      title: '塑料袋包装服务',
+      description: '果韵鲜享分拣站',
-      description: '塑料包装有限公司',
       location: '临沧市-耿马县',
       price: '150',
       rank: '2',
+      imageUrl: 'images/fruit.png',
     },
     {
-      imageUrl: 'images/carton.png',
+      title: '水果分拣服务',
-      title: '纸盒包装服务',
+      description: '好果分拣站 ',
-      description: '保和纸盒包装厂',
       location: '临沧市-耿马县',
-      price: '5',
+      price: '150',
       rank: '3',
+      imageUrl: 'images/fruit.png',
     },
     {
-      imageUrl: 'images/metal.png',
+      title: '水果分拣服务',
-      title: '金属罐包装服务',
+      description: '果美分拣站 ',
-      description: '金属罐头厂',
       location: '临沧市-耿马县',
-      price: '8',
+      price: '150',
       rank: '',
+      imageUrl: 'images/fruit.png',
+    },
+    {
+      title: '水果分拣服务',
+      description: '好果存分拣站 ',
+      location: '临沧市-耿马县',
+      price: '150',
+      rank: '',
+      imageUrl: 'images/fruit.png',
     },
   ],
 });
 
+const currentTab0 = ref(0);
 const currentTab1 = ref(0);
 const currentTab2 = ref(0);
 const currentTab3 = ref(0);
@@ -222,7 +269,7 @@ const currentChange = (current) => {
 };
 
 const toLink = (row) => {
-  row.data = ['高品质', '食品级', '塑料'];
+  row.data = ['高品质', '杀菌灭毒', '绿色'];
   router.push({
     path: '/sub-operation-service/packaging/details',
     query: row,
@@ -330,17 +377,20 @@ $border-color: #dcdfe6; // 边框颜色
   }
 }
 .tabs {
-  height: 160px;
+  //height: 160px;
   line-height: 50px;
   display: flex;
   flex-direction: column;
   font-size: 18px;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0 20px;
+  // padding: 0 20px;
+}
+.tabs0 {
+  padding: 0;
 }
 .tab {
-  height: 100px;
+  // height: 100px;
   width: 850px;
   display: flex;
   align-items: center;
@@ -361,9 +411,15 @@ $border-color: #dcdfe6; // 边框颜色
     font-size: 20px;
     font-weight: 400;
   }
+  .tab_list_li:first-child {
+    margin-left: 20px;
+  }
   .tab_list_li.active {
     color: rgba(37, 191, 130, 1);
   }
+  .tab_list_li0 {
+    border-bottom: 2px solid rgba(37, 191, 130, 1);
+  }
 }
 .cursor {
   cursor: pointer;
@@ -376,7 +432,7 @@ $border-color: #dcdfe6; // 边框颜色
   overflow: hidden;
   margin-bottom: 20px;
   border: 0;
-  border-radius: 24px;
+  border-radius: 16px;
 }
 .storage-content {
   @include flex-column;
@@ -395,6 +451,13 @@ $border-color: #dcdfe6; // 边框颜色
   border-radius: 8px;
   object-fit: cover;
 }
+.storage-image1 {
+  margin-right: 0;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+  object-fit: cover;
+}
 .storage-info {
   padding-right: 50px;
   flex: 1;

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

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <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">
@@ -45,10 +46,27 @@
     <section>
       <common>
         <template #main>
-        <el-card shadow="none" style="border-radius: 14px; height: 200px">
+          <el-card shadow="none" style="border-radius: 14px">
+            <div class="tabs tabs0">
+              <div class="tab cursor">
+                <div
+                  v-for="(item, index) in tab0"
+                  :key="index"
+                  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;
+                  "
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
             <div class="tabs">
               <div class="tab cursor">
-              <div class="tab_list">蔬菜分拣</div>
                 <div
                   v-for="(item, index) in tab1"
                   :key="index"
@@ -59,8 +77,9 @@
                   {{ item }}
                 </div>
               </div>
+            </div>
+            <div v-if="currentTab0 === 1" class="tabs">
               <div class="tab cursor">
-              <div class="tab_list">水果分拣</div>
                 <div
                   v-for="(item, index) in tab2"
                   :key="index"
@@ -71,22 +90,28 @@
                   {{ item }}
                 </div>
               </div>
-            <!-- <div class="tab cursor">
-              <div class="tab_list">水果分拣</div>
-              <div
-                v-for="(item, index) in tab3"
-                :key="index"
-                class="tab_list_li"
-                :class="{ active: currentTab3 === index }"
-                @click.stop="currentTab3 = index"
-              >
-                {{ item }}
-              </div>
-            </div> -->
             </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="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" />
+                  </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" />
+                  </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)">
@@ -120,17 +145,31 @@
                     </el-button>
                   </div>
                   <div v-if="item.rank" class="rank-badge">
-                  <!--              {{ item.rank }}-->
                     <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
                   </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/img3.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 100px" size="large" type="primary">发布分拣{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
+          </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
     </section>
+  </div>
 </template>
 <script setup name="page-menu">
 import { ref, reactive, watch } from 'vue';
@@ -142,8 +181,9 @@ import Common from './components/common.vue';
 const route = useRoute();
 const router = useRouter();
 
-const tab1 = reactive(['叶菜类', '豆菜类', '根茎类', '茄果菜类', '食用菌类', '其他类蔬菜']);
+const tab0 = reactive(['分拣服务', '分拣需求']);
-const tab2 = reactive(['甘蔗', '热带水果', '其他类水果']);
+const tab1 = reactive(['全部', '人工分拣', '自动化分拣']);
+const tab2 = reactive(['全部', '已完成', '分拣中', '已接单', '待接单']);
 const tab3 = reactive(['水产', '其他类']);
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
@@ -194,6 +234,7 @@ const state = reactive({
   ],
 });
 
+const currentTab0 = ref(0);
 const currentTab1 = ref(0);
 const currentTab2 = ref(0);
 const currentTab3 = ref(0);
@@ -338,17 +379,20 @@ $border-color: #dcdfe6; // 边框颜色
   }
 }
 .tabs {
-  height: 160px;
+  //height: 160px;
   line-height: 50px;
   display: flex;
   flex-direction: column;
   font-size: 18px;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0 20px;
+  // padding: 0 20px;
+}
+.tabs0 {
+  padding: 0;
 }
 .tab {
-  height: 100px;
+  // height: 100px;
   width: 850px;
   display: flex;
   align-items: center;
@@ -369,9 +413,15 @@ $border-color: #dcdfe6; // 边框颜色
     font-size: 20px;
     font-weight: 400;
   }
+  .tab_list_li:first-child {
+    margin-left: 20px;
+  }
   .tab_list_li.active {
     color: rgba(37, 191, 130, 1);
   }
+  .tab_list_li0 {
+    border-bottom: 2px solid rgba(37, 191, 130, 1);
+  }
 }
 .cursor {
   cursor: pointer;
@@ -384,7 +434,7 @@ $border-color: #dcdfe6; // 边框颜色
   overflow: hidden;
   margin-bottom: 20px;
   border: 0;
-  border-radius: 24px;
+  border-radius: 16px;
 }
 .storage-content {
   @include flex-column;
@@ -403,6 +453,13 @@ $border-color: #dcdfe6; // 边框颜色
   border-radius: 8px;
   object-fit: cover;
 }
+.storage-image1 {
+  margin-right: 0;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+  object-fit: cover;
+}
 .storage-info {
   padding-right: 50px;
   flex: 1;

sub-operation-service/src/views/smartFarm/components/stream.vue

@@ -2,7 +2,7 @@
 import { ref, watch, onMounted, onUnmounted, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import Hls from 'hls.js';
+// import Hls from 'hls.js';
 const route = useRoute();
 const router = useRouter();
 

sub-operation-service/src/views/warehouseLogistics/components/common.vue

@@ -57,7 +57,7 @@ const menus = reactive([
     height: 100%;
     .left-menu,
     .common-content {
-      overflow-y: auto;
+      // overflow-y: auto;
       padding: 8px;
       height: calc(100% - 16px);
       border-radius: 8px;

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

@@ -1,193 +1,106 @@
 <template>
+  <!--  <page-layout :menus="state.menus"> </page-layout>-->
   <section>
     <common>
       <template #main>
         <el-card shadow="none" style="border-radius: 14px">
-          <div class="tabs">
+          <div class="tabs tabs0">
-            <div style="display: flex">
+            <div class="tab cursor">
-              <div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">农产品类型</div>
               <div
-                class="tab cursor"
+                v-for="(item, index) in tab0"
-                :class="{ active: currentTab === 0 }"
+                :key="index"
-                @click.stop="
+                class="tab_list_li"
-                  currentTab = 0;
+                style="margin-left: 20px; margin-bottom: 10px"
-                  getLogisticList(currentTab, currentTab1);
+                :class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
-                "
-              >
-                粮食作物物流
-              </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab === 1 }"
-                @click.stop="
-                  currentTab = 1;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                经济作物物流
-              </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab === 2 }"
-                @click.stop="
-                  currentTab = 2;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                果蔬物流
-              </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab === 3 }"
-                @click.stop="
-                  currentTab = 3;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                畜牧产品物流
-              </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab === 4 }"
-                @click.stop="
-                  currentTab = 4;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                水产品物流
-              </div>
-            </div>
-            <div style="display: flex; margin-top: 10px">
-              <div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">运输方式</div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab1 === 0 }"
                 @click.stop="
+                  currentTab0 = index;
                   currentTab1 = 0;
-                  getLogisticList(currentTab, currentTab1);
+                  currentTab2 = 0;
                 "
               >
-                公路
+                {{ item }}
               </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab1 === 1 }"
-                @click.stop="
-                  currentTab1 = 1;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                铁路
             </div>
-              <div
-                class="tab cursor"
-                :class="{ active: currentTab1 === 2 }"
-                @click.stop="
-                  currentTab1 = 2;
-                  getLogisticList(currentTab, currentTab1);
-                "
-              >
-                水路
           </div>
+          <div v-if="currentTab0 === 0" class="tabs">
+            <div class="tab cursor">
               <div
-                class="tab cursor"
+                v-for="(item, index) in tab1"
-                :class="{ active: currentTab1 === 3 }"
+                :key="index"
-                @click.stop="
+                class="tab_list_li"
-                  currentTab1 = 3;
+                :class="{ active: currentTab1 === index }"
-                  getLogisticList(currentTab, currentTab1);
+                @click.stop="currentTab1 = index"
-                "
               >
-                航空
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div v-if="currentTab0 === 1" class="tabs">
+            <div class="tab cursor">
+              <div
+                v-for="(item, index) in tab2"
+                :key="index"
+                class="tab_list_li"
+                :class="{ active: currentTab2 === index }"
+                @click.stop="currentTab2 = index"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+          <div v-if="currentTab0 === 1" class="tabs">
+            <div class="tab cursor">
+              <div
+                v-for="(item, index) in tab3"
+                :key="index"
+                class="tab_list_li"
+                :class="{ active: currentTab1 === index }"
+                @click.stop="currentTab1 = index"
+              >
+                {{ item }}
               </div>
             </div>
           </div>
         </el-card>
         <el-row :gutter="20" style="margin-top: 10px">
-          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+          <el-col v-if="currentTab0 === 0" :span="24">
-            <el-card class="storage-card" shadow="hover">
+            <el-card class="storage-card" shadow="hover" body-style="padding: 0">
               <div class="storage-content">
-                <div class="storage-content-top" @click="toLink(item)">
+                <div class="storage-content-top">
-                  <img :src="item.imgPath" fit="cover" class="storage-image" />
+                  <img src="@/assets/images/warehouseLogistics/img11.png" fit="cover" class="storage-image storage-image1" />
-                  <div class="storage-info">
-                    <h3 class="storage-title">{{ item.name }}</h3>
-                    <div class="storage-desc">
-                      <span style="text-align: left">{{ item.parentTitle }}</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
-                        v-for="(tags, indexT) in item.tag"
-                        :key="indexT"
-                        effect="plain"
-                        round
-                        style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
-                      >
-                        {{ tags }}
-                      </el-tag>
-                    </div>
-                    <div class="storage-location">
-                      <el-icon><Location /></el-icon>
-                      {{ item.address }}
                 </div>
               </div>
-                </div>
+            </el-card>
-                <div class="storage-price">
+            <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                  <div class="storage-price-left">
+              <div class="storage-content">
-                    <span class="price-label">报价</span>
+                <div class="storage-content-top">
-                    <span class="price-amount"
+                  <img src="@/assets/images/warehouseLogistics/img12.png" fit="cover" class="storage-image storage-image1" />
-                      >¥{{ item.price }}/{{ item.priceSpec === 1 ? 'kg' : item.priceSpec === 2 ? '件' : item.priceSpec === 3 ? 'm³' : '' }}
-                    </span>
-                  </div>
-                  <el-button type="success" class="contact-btn" @click="goDetail(item.id)">
-                    <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
-                    <span>联系卖家</span>
-                  </el-button>
-                </div>
-                <div v-if="index >= 0 && index < 3" class="rank-badge">
-                  <img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
                 </div>
               </div>
             </el-card>
           </el-col>
-        </el-row>
+          <el-col v-else :span="24">
-        <el-pagination background layout="prev, pager, next" :total="1000" />
+            <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-        <!--        <page-pagination :total="6" @current-change="currentChange" />-->
+              <div class="storage-content">
-        <el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
+                <div class="storage-content-top">
-          <el-form :size="'large'" :model="state.query.current">
+                  <img src="@/assets/images/warehouseLogistics/img13.png" fit="cover" class="storage-image storage-image1" />
-            <el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
-              {{ state.query.current.parentTitle }}
-            </el-form-item>
-            <el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
-              {{ state.query.current.name }}
-            </el-form-item>
-            <el-form-item label="需求量：" :label-width="formLabelWidth">
-              <el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
-                <template #append>kg</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="您的称呼：" :label-width="formLabelWidth">
-              <el-input
-                v-model="formData.value.surname"
-                autocomplete="off"
-                placeholder="姓氏"
-                style="display: inline; width: 100px; font-size: 20px"
-              />
-              <el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
-                <el-radio value="1">先生</el-radio>
-                <el-radio value="2">女士</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="您的电话：" :label-width="formLabelWidth">
-              <el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
-            </el-form-item>
-          </el-form>
-          <template #footer>
-            <div class="dialog-footer" style="text-align: center">
-              <el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
                 </div>
-          </template>
+              </div>
-        </el-dialog>
+            </el-card>
+          </el-col>
+          <div style="position: fixed; left: 50%; bottom: 7%">
+            <el-button style="padding: 10px 100px" size="large" type="primary">发布物流{{ currentTab0 === 0 ? '服务' : '需求' }}</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>
       </template>
     </common>
   </section>
@@ -196,14 +109,27 @@
 import { ref, reactive, watch, onMounted } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import { getWarehouseInfo, warehouseList } from '@/apis/warehouseLogistics.js';
+import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
 import Common from '../components/common.vue';
-import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics.js';
+import { useGetCommonData } from '@/store/modules/common.js';
-import { getWarehouseInfo, logisticList } from '@/apis/warehouseLogistics.js';
+import { storeToRefs } from 'pinia';
 import { ElMessage } from 'element-plus';
+const store = useGetCommonData();
+const { data } = storeToRefs(store);
 
 const route = useRoute();
 const router = useRouter();
 
+const tab0 = reactive(['物流服务', '物流需求']);
+const tab1 = reactive(['全部', '物流公司', '个人']);
+const tab2 = reactive(['全部', '11米7', '13米', '13米7', '15米']);
+const tab3 = reactive(['全部', '厢式', '平板', '高栏', '飞翼', '开顶']);
+const currentTab0 = ref(0);
+const currentTab1 = ref(0);
+const currentTab2 = ref(0);
+const currentTab3 = ref(0);
+
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
   query: {
@@ -215,7 +141,7 @@ const state = reactive({
       title: '果蔬保鲜仓储',
       description: '绿鲜蔬选果蔬仓储中心 ',
       location: '临沧市-耿马县',
-      price: '3.0',
+      price: '600.0',
       rank: '1',
     },
     {
@@ -223,7 +149,7 @@ const state = reactive({
       title: '果蔬保鲜仓储',
       description: '绿鲜蔬选果蔬仓储中心',
       location: '临沧市-耿马县',
-      price: '3.0',
+      price: '600.0',
       rank: '2',
     },
     {
@@ -261,20 +187,30 @@ const state = reactive({
   ],
 });
 const formData = reactive({});
+const paginations = reactive({
+  page: 1,
+  size: 2,
+  total: 0,
+});
 
 const dialogFormVisible = ref(false);
-const currentTab = ref(0);
-const currentTab1 = ref(0);
 const formLabelWidth = ref('120px');
-const toLink = (row) => {
+
-  router.push({
+onMounted(() => {
-    name: 'logistics-detail',
+  getWarehouseList('1');
-    query: { id: row?.id ?? '100' },
+});
-  });
+
+const currentTab = ref(0);
+
+const currentChange = (current) => {
+  paginations.page = current;
+  getWarehouseList(currentTab.value + 1);
 };
 
-const getLogisticList = (cropsType, logisticsType) => {
+const getWarehouseList = (type) => {
-  logisticList({ cropsType: cropsType + 1, logisticsType: logisticsType + 1 }).then((res) => {
+  warehouseList({ type: type, current: paginations.page, size: paginations.size }).then((res) => {
+    state.data = [];
+    paginations.total = res.total;
     if (res.code === 200) {
       state.data = res.data.records;
       for (let i in state.data) {
@@ -284,7 +220,14 @@ const getLogisticList = (cropsType, logisticsType) => {
   });
 };
 
-const goDetail = (id) => {
+const toLink = (row) => {
+  router.push({
+    name: 'warehouse-detail',
+    query: { id: row?.id ?? '100' },
+  });
+};
+
+const contact = (id) => {
   for (let i in state.data) {
     if (state.data[i].id === id) {
       state.query.current = state.data[i];
@@ -293,7 +236,7 @@ const goDetail = (id) => {
   }
   formData.value = {
     warehouseId: state.query.current.id,
-    type: 2,
+    type: 1,
     demand: '',
     surname: '',
     sex: '',
@@ -301,6 +244,7 @@ const goDetail = (id) => {
   };
   dialogFormVisible.value = true;
 };
+
 const priceConfirm = () => {
   // 遍历 formData 的所有键
   for (const key of Object.keys(formData.value)) {
@@ -324,21 +268,54 @@ const priceConfirm = () => {
     }
   });
 };
-onMounted(() => {
-  getLogisticList(0, 0);
-});
 </script>
 <style lang="scss" scoped>
 .el-form-item--large {
   --font-size: 20px;
 }
 .tabs {
+  //height: 160px;
+  line-height: 50px;
   display: flex;
   flex-direction: column;
   font-size: 18px;
-  padding: 0 20px;
+  align-items: flex-start;
-  .tab {
+  justify-content: space-between;
-    margin: 0 20px;
+  // padding: 0 20px;
+}
+.tabs0 {
+  padding: 0;
+}
+.tab {
+  // height: 100px;
+  width: 850px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow-x: auto;
+  overflow: auto; /* 启用滚动 */
+  white-space: nowrap; /* 强制单行显示 */
+  -ms-overflow-style: none; /* IE/Edge 兼容 */
+  scrollbar-width: none; /* 隐藏滚动条 */
+  .tab_list {
+    color: #999999;
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .tab_list_li {
+    margin-left: 40px;
+    color: #000000;
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .tab_list_li:first-child {
+    margin-left: 20px;
+  }
+  .tab_list_li.active {
+    color: rgba(37, 191, 130, 1);
+  }
+  .tab_list_li0 {
+    border-bottom: 2px solid rgba(37, 191, 130, 1);
   }
 }
 .cursor {
@@ -364,6 +341,9 @@ onMounted(() => {
     align-items: center;
   }
 }
+.storage-price-left {
+  text-align: left;
+}
 .storage-image {
   margin-right: 16px;
   width: 120px;
@@ -371,22 +351,21 @@ onMounted(() => {
   border-radius: 8px;
   object-fit: cover;
 }
+.storage-image1 {
+  margin-right: 0;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+  object-fit: cover;
+}
 .storage-info {
   padding-right: 50px;
   flex: 1;
   cursor: pointer;
 }
-.storage-title {
+.storage-title,
-  text-align: left;
+.storage-desc,
-}
+.storage-tags,
-.storage-desc {
-  text-align: left;
-  margin-top: 5px;
-}
-.storage-tags {
-  text-align: left;
-  margin-top: 10px;
-}
 .storage-location {
   overflow: hidden;
   margin: 10px 0;
@@ -447,9 +426,6 @@ onMounted(() => {
     margin-right: 10px;
   }
 }
-.storage-price-left {
-  text-align: left;
-}
 .rank-badge {
   position: absolute;
   top: 0;

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

@@ -4,85 +4,75 @@
     <common>
       <template #main>
         <el-card shadow="none" style="border-radius: 14px">
+          <div class="tabs tabs0">
+            <div class="tab cursor">
+              <div
+                v-for="(item, index) in tab0"
+                :key="index"
+                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;
+                "
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
           <div class="tabs">
-            <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
+            <div class="tab cursor">
               <div
-              class="tab cursor"
+                v-for="(item, index) in tab1"
-              :class="{ active: currentTab === 0 }"
+                :key="index"
-              @click.stop="
+                class="tab_list_li"
-                currentTab = 0;
+                :class="{ active: currentTab1 === index }"
-                getWarehouseList('1');
+                @click.stop="currentTab1 = index"
-              "
               >
-              普通仓库
+                {{ item }}
               </div>
-            <!--            <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>-->
-            <div
-              class="tab cursor"
-              :class="{ active: currentTab === 2 }"
-              @click.stop="
-                currentTab = 2;
-                getWarehouseList('3');
-              "
-            >
-              冷库
             </div>
-            <!--            <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>-->
-            <div class="tab">&nbsp;</div>
           </div>
         </el-card>
         <el-row :gutter="20" style="margin-top: 10px">
-          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+          <el-col v-if="currentTab0 === 0" :span="24">
-            <el-card class="storage-card" shadow="hover">
+            <el-card class="storage-card" shadow="hover" body-style="padding: 0">
               <div class="storage-content">
-                <div class="storage-content-top" @click="toLink(item)">
+                <div class="storage-content-top">
-                  <el-image :src="item.imgPath" fit="cover" class="storage-image" />
+                  <img src="@/assets/images/warehouseLogistics/img7.png" fit="cover" class="storage-image storage-image1" />
-                  <div class="storage-info">
-                    <h3 class="storage-title">{{ item.name }}</h3>
-                    <div class="storage-desc">
-                      <span>{{ item.parentTitle }}</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
-                        v-for="(tags, indexT) in item.tag"
-                        :key="indexT"
-                        effect="plain"
-                        round
-                        style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
-                      >
-                        {{ tags }}
-                      </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.address }}
                 </div>
               </div>
-                </div>
+            </el-card>
-                <div class="storage-price">
+            <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                  <div class="storage-price-left">
+              <div class="storage-content">
-                    <span class="price-label">报价</span>
+                <div class="storage-content-top">
-                    <span class="price-amount"
+                  <img src="@/assets/images/warehouseLogistics/img8.png" fit="cover" class="storage-image storage-image1" />
-                      >¥{{ item.price }}/{{ item.priceSpec === 1 ? 'm³' : item.priceSpec === 2 ? '间' : item.priceSpec === 3 ? '㎡' : '' }}/{{
-                        item.timeSpec === 1 ? '天' : item.timeSpec === 2 ? '月' : item.timeSpec === 3 ? '年' : ''
-                      }}
-                    </span>
-                  </div>
-                  <el-button type="success" class="contact-btn" @click="contact(item.id)">
-                    <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
-                    <span>联系卖家</span>
-                  </el-button>
-                </div>
-                <div v-if="index >= 0 && index < 3" class="rank-badge">
-                  <img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
                 </div>
               </div>
             </el-card>
           </el-col>
-          <el-pagination
+          <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%">
+            <el-button style="padding: 10px 100px" size="large" type="primary">发布仓储{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
+          </div>
+          <!-- <el-pagination
             :size="'large'"
             :page-size="paginations.size"
             :current-page="paginations.page"
@@ -90,43 +80,8 @@
             background
             layout="prev, pager, next"
             @current-change="currentChange"
-          />
+          /> -->
         </el-row>
-        <el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
-          <el-form :size="'large'" :model="state.query.current">
-            <el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
-              {{ state.query.current.parentTitle }}
-            </el-form-item>
-            <el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
-              {{ state.query.current.name }}
-            </el-form-item>
-            <el-form-item label="需求量：" :label-width="formLabelWidth">
-              <el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
-                <template #append>kg</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="您的称呼：" :label-width="formLabelWidth">
-              <el-input
-                v-model="formData.value.surname"
-                autocomplete="off"
-                placeholder="姓氏"
-                style="display: inline; width: 100px; font-size: 20px"
-              />
-              <el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
-                <el-radio value="1">先生</el-radio>
-                <el-radio value="2">女士</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="您的电话：" :label-width="formLabelWidth">
-              <el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
-            </el-form-item>
-          </el-form>
-          <template #footer>
-            <div class="dialog-footer" style="text-align: center">
-              <el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
-            </div>
-          </template>
-        </el-dialog>
       </template>
     </common>
   </section>
@@ -147,6 +102,13 @@ const { data } = storeToRefs(store);
 const route = useRoute();
 const router = useRouter();
 
+const tab0 = reactive(['仓储服务', '仓储需求']);
+const tab1 = reactive(['全部', '普通仓储', '恒温仓储', '冷库', '气调仓储']);
+const currentTab0 = ref(0);
+const currentTab1 = ref(0);
+const currentTab2 = ref(0);
+const currentTab3 = ref(0);
+
 const state = reactive({
   menus: warehouseLogisticsRoutes[0].children,
   query: {
@@ -291,14 +253,48 @@ const priceConfirm = () => {
   --font-size: 20px;
 }
 .tabs {
-  height: 50px;
+  //height: 160px;
   line-height: 50px;
   display: flex;
+  flex-direction: column;
   font-size: 18px;
+  align-items: flex-start;
+  justify-content: space-between;
+  // padding: 0 20px;
+}
+.tabs0 {
+  padding: 0;
+}
+.tab {
+  // height: 100px;
+  width: 850px;
+  display: flex;
+  align-items: center;
   justify-content: flex-start;
-  padding: 0 20px;
+  overflow-x: auto;
-  .tab {
+  overflow: auto; /* 启用滚动 */
-    margin: 0 20px;
+  white-space: nowrap; /* 强制单行显示 */
+  -ms-overflow-style: none; /* IE/Edge 兼容 */
+  scrollbar-width: none; /* 隐藏滚动条 */
+  .tab_list {
+    color: #999999;
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .tab_list_li {
+    margin-left: 40px;
+    color: #000000;
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .tab_list_li:first-child {
+    margin-left: 20px;
+  }
+  .tab_list_li.active {
+    color: rgba(37, 191, 130, 1);
+  }
+  .tab_list_li0 {
+    border-bottom: 2px solid rgba(37, 191, 130, 1);
   }
 }
 .cursor {
@@ -334,6 +330,13 @@ const priceConfirm = () => {
   border-radius: 8px;
   object-fit: cover;
 }
+.storage-image1 {
+  margin-right: 0;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+  object-fit: cover;
+}
 .storage-info {
   padding-right: 50px;
   flex: 1;