• 好看的货架效果（含3D效果）

    搭配thymeleaf + layui合成 

    货架一

     1. css
    1. #gudinghuojia2F .layui-row {  display: flex; justify-content: space-between; height: 100%;}
    2. #gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}
    3. #gudinghuojia2F .layui-col-xs10:last-child {margin-right: 0;}
    4. .inner-title{font-size: 26px;height: 28px;background-color: #b7b7b7; color: #fff;}
    5. .inner-div {background: #82dcb3;}
    6. .inner-div:not(:first-child) {border: 5px solid #494949;height: calc(80% / 4);}
    7.
    2.html片段 
    1. <div style="height: 100%;">
    2. 	<div class="layui-row" >
    3. 		<div class="layui-col-xs10" th:each="i : ${#numbers.sequence(10, 1, -1)}" >
    4. 			
      "inner-title" th:text="${‘2F’ + '-' + i}" style="text-align: center;">
    5. 				
      "inner-div" th:each="ii : ${#numbers.sequence(4, 1, -1)}" th:id="${‘2F’ + '-' + i + '-1-'+ ii}">
    6.
    • 3.效果（效果只是图中的货架，上面部分只是截图效果贴上来的，代码并没有包含）：

    货架二 

    1. css
    1.     .layout_4F{height: 100%;width: 70%;display: block; position: relative;}
    2. 	  .tongdao {position: absolute;color: #ccd9d9c7;text-align: center; letter-spacing: 10vh; font-size: x-large;} /* 设置字之间的间隔为10vh，设置所有通道的背景为白色 */
    3. 	  .ltongdao{position: absolute;left: calc(6% + 10px);top: 14%;writing-mode: vertical-rl;letter-spacing: 12vh;font-size: xxx-large;color: #ccd9d9c7;}
    4. 	  .rtongdao{position: absolute;right: 17%;height: 60%;width: 5%;top: 15%;line-height: 300%;font-size: xxx-large;color: #ccd9d9c7;}
    5. 	  .container {position: relative;width: 100%; height: 100vh; background-color: #fff;}
    6. 	  .chu{position: absolute;height: 4%;line-height: 100%;background-color: #e7dfdf;letter-spacing: 10vh; font-size: 3vh;color: #75b9b9c7;}
    7. 	  .chu1{top: calc(12% + 6px);l}
    8.  
    9.     .btongdao{position: absolute;right: 40%;bottom: 20%;height: 8%;font-size: xx-large;letter-spacing: 10vh;color: #ccd9d9c7;}
    10.     .wai{height: 6%;width: 100%;top: calc(6% + 10px);}
    11.  
    12.     .zhong{position: absolute; text-align: center; left: calc(12% + 6px); right: 27%;}
    13.     .quyu2{top: calc(28% + 6px);height: 20%;border: 10px solid #ccc;border-bottom: 5px #000 dashed;}
    14.     .quyu3{left: 29%;top:51%;height: calc(20%);border: 10px solid #ccc;border-bottom: 5px #000 dashed;}
    15.  
    16. 	.top {position: absolute;width: 80%; height:5%;border: 10px solid #ccc;border-bottom: 5px #000 dashed; }
    17. 	.right {position: absolute;right: 0;height: 60%; top: 12%;width:15%;}
    18. 	.bottom {position: absolute;bottom: 0;width: 70%;left: calc(12% + 6px);height:20%;border: 10px solid #ccc;border-bottom: 5px #000 dashed;}
    19. 	.left {position: absolute;height: 80%;top: calc(12% + 10px);bottom: 0; width: 6%;border: 10px solid #ccc;border-right: 5px #000 dashed;}
    20. 	.da{height: 100%;width: 100%;}
    21.  
    22. 	/*.content-div {   *//* 中间区域 *//*
    23. 	  position: absolute;
    24. 	  top: 16%; *//* 调整以适应悬浮div的高度 *//*
    25. 	  right: 27%; *//* 调整以适应悬浮div的宽度 *//*
    26. 	  bottom: 27%; *//* 调整以适应悬浮div的高度 *//*
    27. 	  left: 15%; *//* 调整以适应悬浮div的宽度 *//*
    28. 	}*/
    29.  
    30. 	.parent {display: flex;   /*Flexbox布局的简写属性，必须设置这个，否则就需要设置浮动，但设置浮动很麻烦*/ }
    31.  
    32. 	.b_child {height: calc(100% / 5); }
    33. 	.b_child_child{width: calc(100% / 12);   /* 占据列高度宽度的各1/10 ，但每个div都有边框3px，因此需要减去6px,否则内容会超出父div之外*/}
    34.  
    35. 	.l_child {height: calc(100% / 3 - 3px);}
    36. 	.t_child {width: calc(100% / 3 - 3px); }
    37.  
    38. 	.r_child {width: calc(100% / 5);  /* 占据整个div的高度的1/5 */}
    39. 	.r_child_child{height: calc(100% / 10 - 2px);}
    40.  
    41. 	.c2_child_child{height: calc(100% / 5);} /*本来是5部分的，第一部分为一面墙，固定给10%的宽度，剩下的90，4个平分*/
    42. 	.c3_child_child{height: calc(100% / 5);}  /*本来是5部分的，第一部分为一面墙，固定给10%的宽度，剩下的90，3个平分*/
    43.  
    44. 	.c2_child_child_lie{width: calc(100% / 11 );} /*2区域内每个小单元格*/
    45. 	.c3_child_child_lie{width: calc(100% / 8);} /*3区域内每个小单元格*/
    46. 	.ts{position: absolute;color: #eb8383;font-size: 3vh;right: 0;}
    47.     .ge{border: 1px solid #ccc;background-color: #f5f5f5;}
    48.  
    49. 	.inner-div:hover, .da:hover, .b_child_child:hover, .l_child:hover, .t_child:hover, .r_child_child:hover, .c2_child_child_lie:hover, .c3_child_child_lie:hover
    50. 	{box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.8); background-color: #bebeeb; cursor: pointer;  position: relative; z-index: 999;}
    51.  
    52. 	/*transform: scale(1.1); 放大效果 z-index: 999;/*放大的话就需要设置在最上层，否则会被遮挡，设置z-index就必须设置position ，
    53. 	不要设置放大，最下面的这个大区域，如果放大就会超过屏幕大小了，导致滚动条蹦出来*/
    54. 	/*  transition: all 0.2s ease-out; 添加过渡效果 */
    2. html (参数中的lay是货架参数，内包含da大区域，zhong中区域，ceng层，lie 列，的数量)，只看效果把id全干掉就好了，不影响生成效果，我的id只是为了渲染实时在库数进行颜色变更
    1. html>
    2. <html xmlns:th="http://www.w3.org/1999/xhtml">
    3. <HEAD>
    4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. HEAD>
    6. <body>
    7.   <div id ="daJian" class="container" th:fragment="LayoutByDaJian">
    8. 	  <div class="right parent" style="border: 10px solid #ccc;border-left: 5px #000 dashed;">
    9. 		 <div class="r_child"><div class="da ge" th:id="${lay.da + '-1-1-1-0' }">div>div>  
    10. 		 <div class="r_child" th:each="i : ${#numbers.sequence(2, 5)}" th:id="${lay.da + '-1-' + i}">
    11. 			 <div class="r_child_child ge" th:each="ii : ${#numbers.sequence(1, 10)}" th:id="${lay.da + '-1-' + i + '-' + ii + '-0'}">div>
    12. 		 div>
    13. 	  div>
    14. 	  <div class="zhong quyu2" >
    15. 		  <div class="c2_child_child parent" th:each="i : ${#numbers.sequence(5, 2, -1)}" th:id="${lay.da + '-2-' + i}"> 
    16. 			  <div class="c2_child_child_lie ge" th:each="ii : ${#numbers.sequence(1, 11)}" th:id="${lay.da +'-2-'+ i + '-' + ii + '-0'}">div>
    17. 		  div>
    18. 		  <div class="c2_child_child parent"><div class="da ge" th:id="${lay.da + '-2-1-1-0' }">div>div>
    19. 	  div>
    20. 	  <div class="zhong quyu3" >
    21. 		  <div class="c3_child_child parent" th:each="i : ${#numbers.sequence(5, 2, -1)}" th:id="${lay.da + '-3-' + i}">
    22. 			  <div class="c3_child_child_lie ge" th:each="ii : ${#numbers.sequence(1,8)}" th:id="${lay.da +'-3-'+ i + '-' + ii + '-0'}">div>
    23. 		  div>
    24. 		  <div class="c3_child_child parent"><div class="da ge" th:id="${lay.da + '-3-1-1-0' }">div>  div>
    25. 	  div>
    26. 	  <div class="bottom">
    27. 		  <div class="b_child parent" th:each="i : ${#numbers.sequence(5, 2, -1)}" th:id="${lay.da + '-4-' + i}">
    28. 			  <div class="b_child_child ge" th:each="ii : ${#numbers.sequence(1, 12)}" th:id="${lay.da +'-4-'+ i + '-' + ii + '-0'}">div>
    29. 		  div>
    30. 		  <div class="b_child "> <div class="da ge" th:id="${lay.da + '-4-1-1-0' }">div>div>
    31. 	  div>
    32. 	  <div class="left">
    33. 		  <div class="l_child ge" th:each="i : ${#numbers.sequence(3, 1, -1)}" th:id="${lay.da +'-5-1-'+ i + '-0'}">div>
    34. 	  div>
    35. 	  <div class="top parent">
    36. 		  <div class="t_child ge" th:each="i : ${#numbers.sequence(1, 3)}" th:id="${lay.da +'-6-1-'+ i + '-0'}">div>
    37. 	  div>
    38. 	  <span class="ts">*虚线为货架底部span>
    39. 	  <div class="ltongdao"> 内通道div>
    40. 	  <div class="wai tongdao"> 外通道div>
    41. 	  <div class="rtongdao"> 内通道div>
    42. 	  
    43. 	  <div class="zhong chu chu1"> 废物回收处div>
    44. 	  <div class="zhong tongdao" style="height: 4%;top:calc(16% + 6px);"> 内通道div>
    45. 	  <div class="zhong chu" style="top:calc(20% + 6px)"> 空箱放置处div>
    46. 	  <div class="zhong tongdao" style="height: 4%;top:calc(24% + 6px);"> 内通道div>
    47. 	  
    48. 	  <div class="btongdao"> 内通道div>
    49. div>
    50. body>  
    51. html>
    3. 效果

  • 相关阅读:
    性能测试指标之业务指标和技术指标如何进行区别
    自动镜像打包&&互联网企业规范化上线流程 —— k8s从入门到高并发系列教程 （六）
    记录部署Datax、Datax-web 过程碰到的问题
    作家天地杂志作家天地杂志社作家天地编辑部2022年第23期目录
    【正点原子STM32连载】 第二十五章 TFTLCD（MCU屏）实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
    ubuntu网络配置
    求中位数，方差（小E的动态序列）
    分库分表之sharding-proxy
    py并发编程实践-demo
    2022年了，软件测试已经饱和了？
  • 原文地址：https://blog.csdn.net/qq3892997/article/details/133354762