xiabin
This commit is contained in:
		
							parent
							
								
									6a12b35bdb
								
							
						
					
					
						commit
						81f831ae13
					
				| @ -43,6 +43,11 @@ | ||||
| import { ref, reactive, onMounted, watch } from 'vue'; | ||||
| import { isEmpty, getAssetsFile } from '@/utils'; | ||||
| import { useRoute, useRouter } from 'vue-router'; | ||||
| import { useGetCommonData } from '../../store/modules/common'; | ||||
| import { productFactory } from './modul'; | ||||
| 
 | ||||
| const store = useGetCommonData(); | ||||
| 
 | ||||
| const route = useRoute(); | ||||
| const router = useRouter(); | ||||
| 
 | ||||
| @ -68,8 +73,8 @@ let currentIndex = ref(0); | ||||
| let currentCIndex = ref(''); | ||||
| 
 | ||||
| const toLink = (index) => { | ||||
|   productFactory(props.menus[index].title); | ||||
|   currentIndex.value = index; | ||||
|   console.log(leftMenu); | ||||
|   if (leftMenu.value[index].children.length > 0) { | ||||
|     window.sessionStorage.setItem('currentOpen', index); | ||||
|   } | ||||
|  | ||||
							
								
								
									
										27
									
								
								sub-operation-service/src/components/common/modul.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										27
									
								
								sub-operation-service/src/components/common/modul.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,27 @@ | ||||
| import { useGetCommonData } from '../../store/modules/common'; | ||||
| const store = useGetCommonData(); | ||||
| 
 | ||||
| // 仓储
 | ||||
| function createProductA() { | ||||
|   store.getData({ title: '仓储' }); | ||||
| } | ||||
| 
 | ||||
| // 物流
 | ||||
| function createProductB() { | ||||
|   store.getData1({ title: '物流' }); | ||||
| } | ||||
| 
 | ||||
| // 工厂函数
 | ||||
| export function productFactory(title) { | ||||
|   switch (title) { | ||||
|     case '仓储': | ||||
|       return createProductA(); | ||||
|     case '物流': | ||||
|       return createProductB(); | ||||
|     default: | ||||
|       throw new Error('未知产品类型'); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| // 可选:直接导出具体产品构造函数
 | ||||
| export { createProductA, createProductB }; | ||||
							
								
								
									
										22
									
								
								sub-operation-service/src/store/modules/common.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										22
									
								
								sub-operation-service/src/store/modules/common.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,22 @@ | ||||
| import { defineStore } from 'pinia'; | ||||
| import { constantRoutes, notFoundRouter } from '@/router'; | ||||
| import { createAsyncRoutes, filterAsyncRoutes, filterKeepAlive } from '@/utils/router'; | ||||
| import { useUserStore } from '@/store/modules/user'; | ||||
| import { getTree } from '@/utils'; | ||||
| 
 | ||||
| export const useGetCommonData = defineStore('commonData', { | ||||
|   state: () => ({ | ||||
|     data: {}, | ||||
|   }), | ||||
|   actions: { | ||||
|     //仓储调用方法
 | ||||
|     getData(res) { | ||||
|       useGetCommonData().$state.data = res; | ||||
|     }, | ||||
|     //物流调用方法
 | ||||
|     getData1(res) { | ||||
|       useGetCommonData().$state.data = res; | ||||
|     }, | ||||
|   }, | ||||
|   getters: {}, | ||||
| }); | ||||
							
								
								
									
										122
									
								
								sub-operation-service/src/views/packaging/components/common.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										122
									
								
								sub-operation-service/src/views/packaging/components/common.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,122 @@ | ||||
| <template> | ||||
|   <div class="smartFarm-common-warp"> | ||||
|     <div class="smartFarm-common-content"> | ||||
|       <div class="left-menu"> | ||||
|         <slot v-if="$slots.left" name="left"></slot> | ||||
|         <template v-else> | ||||
|           <left-menu :menus="menus"></left-menu> | ||||
|         </template> | ||||
|       </div> | ||||
|       <div class="common-content"> | ||||
|         <slot v-if="$slots.main" name="main"></slot> | ||||
|         <template v-else></template> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| <script setup> | ||||
| import { ref, reactive, onMounted, watch } from 'vue'; | ||||
| import leftMenu from './leftMenu.vue'; | ||||
| 
 | ||||
| const props = defineProps({ | ||||
|   currentName: { type: String, default: 'agricultural' }, | ||||
| }); | ||||
| 
 | ||||
| const menus = reactive([ | ||||
|   { | ||||
|     name: 'supplier', | ||||
|     title: '农业环境监测', | ||||
|     icon: 'menu1.png', | ||||
|     path: '/sub-operation-service/smartFarm/main', | ||||
|     isOpen: true, | ||||
|     children: [ | ||||
|       { | ||||
|         name: 'supplier', | ||||
|         title: '田间监测', | ||||
|         path: '/sub-operation-service/smartFarm/inspection', | ||||
|       }, | ||||
|       { | ||||
|         name: 'supplier', | ||||
|         title: '水质监测', | ||||
|         path: '/sub-operation-service/ecommerce-supplier', | ||||
|       }, | ||||
|       { | ||||
|         name: 'supplier', | ||||
|         title: '病虫害监测', | ||||
|         path: '/sub-operation-service/ecommerce-supplier', | ||||
|       }, | ||||
|     ], | ||||
|   }, | ||||
|   { | ||||
|     name: 'control', | ||||
|     title: '生产管理控制', | ||||
|     icon: 'menu3.png', | ||||
|     path: '', | ||||
|     isOpen: false, | ||||
|     children: [ | ||||
|       { | ||||
|         name: 'control', | ||||
|         title: '一体育苗', | ||||
|         icon: 'menu3.png', | ||||
|         path: '/sub-operation-service/smartFarm/manageControl/growSeedlings', | ||||
|       }, | ||||
|       { | ||||
|         name: 'control', | ||||
|         title: '病虫害预防', | ||||
|         icon: 'menu3.png', | ||||
|         path: '/sub-operation-service/smartFarm/manageControl/pestPrevention', | ||||
|       }, | ||||
|       { | ||||
|         name: 'control', | ||||
|         title: '喷灌滴灌', | ||||
|         icon: 'menu3.png', | ||||
|         path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem', | ||||
|       }, | ||||
|       { | ||||
|         name: 'control', | ||||
|         title: '排集水控制', | ||||
|         icon: 'menu3.png', | ||||
|         path: '/sub-operation-service/smartFarm/manageControl/drainageControl', | ||||
|       }, | ||||
|       { | ||||
|         name: 'control', | ||||
|         title: '开窗卷帘', | ||||
|         icon: 'menu3.png', | ||||
|         path: '/sub-operation-service/smartFarm/manageControl/openCurtain', | ||||
|       }, | ||||
|     ], | ||||
|   }, | ||||
| ]); | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .smartFarm-common-warp { | ||||
|   width: 100%; | ||||
|   height: calc(100vh - 230px); | ||||
|   text-align: center; | ||||
|   .smartFarm-common-content { | ||||
|     width: $width-main; | ||||
|     margin: auto; | ||||
|     height: 100%; | ||||
|     display: inline-flex; | ||||
|     justify-content: space-between; | ||||
|     margin: auto; | ||||
|     width: $width-main; | ||||
|     height: 100%; | ||||
|     .left-menu, | ||||
|     .common-content { | ||||
|       overflow-y: auto; | ||||
|       padding: 8px; | ||||
|       height: calc(100% - 16px); | ||||
|       border-radius: 8px; | ||||
|     } | ||||
|     .left-menu { | ||||
|       width: 240px; | ||||
|       background: $color-fff; | ||||
|     } | ||||
|     .common-content { | ||||
|       margin-left: 16px; | ||||
|       width: calc(100% - 240px); | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @ -0,0 +1,192 @@ | ||||
| <template> | ||||
|   <div class="smartFarm-left-menu-warp"> | ||||
|     <div class="left-menu"> | ||||
|       <div | ||||
|         v-for="(n, index) in leftMenu" | ||||
|         :key="index" | ||||
|         class="left-menu-item" | ||||
|         style="position: relative" | ||||
|         @click.stop=" | ||||
|           toLink(index); | ||||
|           openList(index); | ||||
|         " | ||||
|       > | ||||
|         <div style="display: flex; justify-content: flex-start; align-items: center"> | ||||
|           <div class="item-img"> | ||||
|             <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" /> | ||||
|           </div> | ||||
|           <span :class="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span> | ||||
|           <img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" /> | ||||
|           <img | ||||
|             v-if="n.children.length > 0 && !n.isOpen" | ||||
|             alt="" | ||||
|             :src="getAssetsFile('images/smartFarm/down_1@2x.png')" | ||||
|             class="isOpen fz" | ||||
|             @click.stop="openList(index)" | ||||
|           /> | ||||
|         </div> | ||||
|         <div v-if="n.children.length > 0 && n.isOpen" class="item-children"> | ||||
|           <div v-for="(item, indexC) in n.children" :key="indexC"> | ||||
|             <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important"> | ||||
|               <li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)"> | ||||
|                 <div class="dot"></div> | ||||
|                 {{ item.title }} | ||||
|               </li> | ||||
|             </ul> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| <script setup> | ||||
| import { ref, reactive, onMounted, watch } from 'vue'; | ||||
| import { isEmpty, getAssetsFile } from '@/utils'; | ||||
| import { useRoute, useRouter } from 'vue-router'; | ||||
| const route = useRoute(); | ||||
| const router = useRouter(); | ||||
| 
 | ||||
| const leftMenu = reactive([ | ||||
|   { | ||||
|     name: 'inspection', | ||||
|     title: '分拣', | ||||
|     icon: 'menu1.png', | ||||
|     path: '/sub-operation-service/packaging/sorting', | ||||
|     isOpen: false, | ||||
|     children: [ | ||||
|       // { | ||||
|       //   name: 'fieldInspection', | ||||
|       //   title: '田间监测', | ||||
|       //   icon: 'menu1.png', | ||||
|       //   path: '/sub-operation-service/smartFarm/fieldInspection', | ||||
|       // }, | ||||
|     ], | ||||
|   }, | ||||
|   { | ||||
|     name: 'control', | ||||
|     title: '包装', | ||||
|     icon: 'menu3.png', | ||||
|     path: '/sub-operation-service/packaging/sorting', | ||||
|     isOpen: false, | ||||
|     children: [], | ||||
|   }, | ||||
| ]); | ||||
| 
 | ||||
| let currentIndex = ref(0); | ||||
| let currentCIndex = ref(''); | ||||
| 
 | ||||
| const toLink = (index) => { | ||||
|   currentIndex.value = index; | ||||
|   if (leftMenu[index].children.length > 0) { | ||||
|     window.sessionStorage.setItem('currentOpen', index); | ||||
|   } | ||||
|   if (index === 0) { | ||||
|     window.sessionStorage.setItem('currentChild', 'main'); | ||||
|   } | ||||
|   currentCIndex.value = ''; | ||||
|   let path = index !== undefined ? leftMenu[index].path : null; | ||||
|   if (path) { | ||||
|     router.push(path); | ||||
|     window.sessionStorage.setItem('currentParent', index); | ||||
|   } | ||||
| }; | ||||
| const toLinkSub = (index, name) => { | ||||
|   console.info('index', index); | ||||
|   console.info('currentChild', name); | ||||
|   currentCIndex.value = name; | ||||
|   window.sessionStorage.setItem('currentChild', name); | ||||
|   let path; | ||||
|   for (let i in leftMenu[index].children) { | ||||
|     if (leftMenu[index].children[i].name === name) { | ||||
|       path = leftMenu[index].children[i].path; | ||||
|     } | ||||
|   } | ||||
|   if (path) { | ||||
|     console.info('path', path); | ||||
|     router.push(path); | ||||
|   } | ||||
| }; | ||||
| const openList = (index) => { | ||||
|   currentIndex.value = index; | ||||
|   leftMenu[index].isOpen = !leftMenu[index].isOpen; | ||||
| }; | ||||
| 
 | ||||
| onMounted(() => { | ||||
|   currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0; | ||||
|   const currentMenu = window.sessionStorage.getItem('currentOpen'); | ||||
|   if (currentMenu) { | ||||
|     for (let i in leftMenu) { | ||||
|       leftMenu[i].isOpen = i === currentMenu; | ||||
|     } | ||||
|   } | ||||
|   const currentChild = window.sessionStorage.getItem('currentChild'); | ||||
|   if (currentChild && currentChild === 'main') { | ||||
|     currentCIndex.value = ''; | ||||
|   } else if (currentChild) { | ||||
|     currentCIndex.value = currentChild; | ||||
|   } | ||||
| }); | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .fz { | ||||
|   transform: rotate(180deg); | ||||
| } | ||||
| .isOpen { | ||||
|   position: absolute; | ||||
|   right: -24px; | ||||
|   width: 20px; | ||||
|   height: 20px; | ||||
| } | ||||
| .active { | ||||
|   color: $color-main; | ||||
| } | ||||
| .smartFarm-left-menu-warp { | ||||
|   padding: 0 30px 0 10px; | ||||
|   width: 100%; | ||||
|   height: 100%; | ||||
|   .left-menu { | ||||
|     .left-menu-item { | ||||
|       padding: 16px 0; | ||||
|       width: 100%; | ||||
|       cursor: pointer; | ||||
|       &.active { | ||||
|         color: $color-main; | ||||
|       } | ||||
|       .item-img, | ||||
|       .item-title { | ||||
|         vertical-align: middle; | ||||
|       } | ||||
|       .item-img { | ||||
|         display: inline-block; | ||||
|         width: 32px; | ||||
|         height: 32px; | ||||
|       } | ||||
|       .item-title { | ||||
|         padding-left: 8px; | ||||
|         font-size: 18px; | ||||
|         font-weight: 400; | ||||
|       } | ||||
|       .item-children { | ||||
|         margin-top: 8px; | ||||
|         font-size: 16px; | ||||
|         text-align: center; | ||||
|         transition: transform 0.3s ease; | ||||
|         .dot { | ||||
|           display: inline-block; | ||||
|           margin-right: 15px; | ||||
|           width: 4px; | ||||
|           height: 4px; | ||||
|           border-radius: 90px; | ||||
|           background-color: black; | ||||
|           vertical-align: middle; | ||||
|         } | ||||
|         li { | ||||
|           margin: 5px auto; | ||||
|           height: 35px; | ||||
|           line-height: 35px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @ -1,19 +1,256 @@ | ||||
| <template> | ||||
|   <div>131</div> | ||||
|   <!--  <page-layout :menus="state.menus"> </page-layout>--> | ||||
|   <section> | ||||
|     <common> | ||||
|       <template #main> | ||||
|         <el-card shadow="none" style="border-radius: 14px"> | ||||
|           <div class="tabs"> | ||||
|             <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div> | ||||
|             <div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</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">冷库</div> | ||||
|             <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div> | ||||
|             <div class="tab"> </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-card class="storage-card" shadow="hover"> | ||||
|               <div class="storage-content"> | ||||
|                 <div class="storage-content-top" @click="toLink(item)"> | ||||
|                   <el-image :src="item.imageUrl" fit="cover" class="storage-image" /> | ||||
|                   <div class="storage-info"> | ||||
|                     <h3 class="storage-title">{{ item.title }}</h3> | ||||
|                     <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" /> | ||||
|                     </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> | ||||
|                     </div> | ||||
|                     <div class="storage-location"> | ||||
|                       <el-icon><Location /></el-icon> | ||||
|                       {{ item.location }} | ||||
|                     </div> | ||||
|                   </div> | ||||
|                 </div> | ||||
|                 <div class="storage-price"> | ||||
|                   <div class="storage-price-left"> | ||||
|                     <span class="price-label">报价</span> | ||||
|                     <span class="price-amount">¥{{ item.price }}/间/月</span> | ||||
|                   </div> | ||||
|                   <el-button type="success" class="contact-btn"> | ||||
|                     <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"> | ||||
|                   <!--              {{ item.rank }}--> | ||||
|                   <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" /> | ||||
|                 </div> | ||||
|               </div> | ||||
|             </el-card> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <page-pagination :total="20" @current-change="currentChange" /> | ||||
|       </template> | ||||
|     </common> | ||||
|   </section> | ||||
| </template> | ||||
| <script setup name="page-menu"> | ||||
| import { ref, reactive, watch } from 'vue'; | ||||
| import { getAssetsFile } from '@/utils'; | ||||
| import { useRoute, useRouter } from 'vue-router'; | ||||
| import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics'; | ||||
| import Common from './components/common.vue'; | ||||
| 
 | ||||
| <script setup> | ||||
| import { ref } from 'vue'; | ||||
| const route = useRoute(); | ||||
| const router = useRouter(); | ||||
| 
 | ||||
| /* --------------- data --------------- */ | ||||
| // #region | ||||
| const state = reactive({ | ||||
|   menus: warehouseLogisticsRoutes[0].children, | ||||
|   query: { | ||||
|     current: 1, | ||||
|   }, | ||||
|   data: [ | ||||
|     { | ||||
|       imageUrl: '/storage1.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心 ', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '1', | ||||
|     }, | ||||
|     { | ||||
|       imageUrl: '/storage2.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '2', | ||||
|     }, | ||||
|     { | ||||
|       imageUrl: '/storage3.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心 ', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '3', | ||||
|     }, | ||||
|     { | ||||
|       imageUrl: '/storage3.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心 ', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '', | ||||
|     }, | ||||
|     { | ||||
|       imageUrl: '/storage3.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心 ', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '', | ||||
|     }, | ||||
|     { | ||||
|       imageUrl: '/storage3.jpg', | ||||
|       title: '果蔬保鲜仓储', | ||||
|       description: '绿鲜蔬选果蔬仓储中心 ', | ||||
|       location: '临沧市-耿马县', | ||||
|       price: '600.0', | ||||
|       rank: '', | ||||
|     }, | ||||
|   ], | ||||
| }); | ||||
| 
 | ||||
| // #endregion | ||||
| const currentTab = ref(0); | ||||
| 
 | ||||
| /* --------------- methods --------------- */ | ||||
| // #region | ||||
| const currentChange = (current) => { | ||||
|   state.query.current = current; | ||||
| }; | ||||
| 
 | ||||
| // #endregion | ||||
| const toLink = (row) => { | ||||
|   router.push({ | ||||
|     path: '/sub-operation-service/warehouse-detail', | ||||
|     query: { id: row?.id ?? '100' }, | ||||
|   }); | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .tabs { | ||||
|   height: 50px; | ||||
|   line-height: 50px; | ||||
|   display: flex; | ||||
|   font-size: 18px; | ||||
|   justify-content: space-between; | ||||
|   padding: 0 20px; | ||||
| } | ||||
| .cursor { | ||||
|   cursor: pointer; | ||||
| } | ||||
| .active { | ||||
|   color: rgba(37, 191, 130, 1); | ||||
| } | ||||
| .storage-card { | ||||
|   position: relative; | ||||
|   overflow: hidden; | ||||
|   margin-bottom: 20px; | ||||
|   border: 0; | ||||
|   border-radius: 24px; | ||||
| } | ||||
| .storage-content { | ||||
|   @include flex-column; | ||||
| 
 | ||||
| <style lang="scss" scoped></style> | ||||
|   gap: 16px; | ||||
|   &-top { | ||||
|     @include flex-row; | ||||
| 
 | ||||
|     align-items: center; | ||||
|   } | ||||
| } | ||||
| .storage-image { | ||||
|   margin-right: 16px; | ||||
|   width: 120px; | ||||
|   height: 120px; | ||||
|   border-radius: 8px; | ||||
|   object-fit: cover; | ||||
| } | ||||
| .storage-info { | ||||
|   padding-right: 50px; | ||||
|   flex: 1; | ||||
|   cursor: pointer; | ||||
| } | ||||
| .storage-title, | ||||
| .storage-desc, | ||||
| .storage-tags, | ||||
| .storage-location { | ||||
|   overflow: hidden; | ||||
|   margin: 10px 0; | ||||
|   width: 100%; | ||||
| } | ||||
| .storage-title { | ||||
|   font-size: 20px; | ||||
|   font-weight: 700; | ||||
|   color: #000000; | ||||
|   @include ellipsis; | ||||
| } | ||||
| .storage-desc { | ||||
|   font-size: 16px; | ||||
|   color: #999999; | ||||
|   @include ellipsis; | ||||
|   i { | ||||
|     display: inline-block; | ||||
|     width: 20px; | ||||
|     height: 20px; | ||||
|   } | ||||
| } | ||||
| .storage-tags { | ||||
|   span { | ||||
|     margin-right: 10px; | ||||
|   } | ||||
| } | ||||
| .storage-location { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   font-size: 16px; | ||||
|   font-weight: 400; | ||||
|   color: #000000; | ||||
| } | ||||
| .storage-price { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   &-left { | ||||
|     flex: 1; | ||||
|   } | ||||
| } | ||||
| .price-label { | ||||
|   margin-right: 10px; | ||||
|   font-size: 16px; | ||||
|   color: #999999; | ||||
| } | ||||
| .price-amount { | ||||
|   font-size: 20px; | ||||
|   font-weight: 700; | ||||
|   color: $color-primary; | ||||
| } | ||||
| .contact-btn { | ||||
|   width: 152px; | ||||
|   height: 48px; | ||||
|   font-size: 20px; | ||||
|   border-radius: 8px; | ||||
|   background: #25bf82 !important; | ||||
|   :deep(.el-icon) { | ||||
|     margin-right: 10px; | ||||
|   } | ||||
| } | ||||
| .rank-badge { | ||||
|   position: absolute; | ||||
|   top: 0; | ||||
|   right: 20px; | ||||
|   width: 80px; | ||||
|   height: 80px; | ||||
| } | ||||
| </style> | ||||
|  | ||||
| @ -5,7 +5,7 @@ | ||||
|       <template #main> | ||||
|         <el-card shadow="none" style="border-radius: 14px"> | ||||
|           <div class="tabs"> | ||||
|             <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div> | ||||
|             <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类({{ data.title }})</div> | ||||
|             <div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</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">冷库</div> | ||||
| @ -65,6 +65,10 @@ import { getAssetsFile } from '@/utils'; | ||||
| import { useRoute, useRouter } from 'vue-router'; | ||||
| import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics'; | ||||
| import Common from '../components/common.vue'; | ||||
| import { useGetCommonData } from '../../../store/modules/common'; | ||||
| import { storeToRefs } from 'pinia'; | ||||
| const store = useGetCommonData(); | ||||
| const { data } = storeToRefs(store); | ||||
| 
 | ||||
| const route = useRoute(); | ||||
| const router = useRouter(); | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user