组件 组件组件 封装 用的封装组件

weixin_46378616ZIPminLlately.zip  4.41KB

资源文件列表:

ZIP minLlately.zip 大约有6个文件
  1. index.vue 4.33KB
  2. slh.png 358B
  3. success.png 848B
  4. 下载.png 375B
  5. 复制.png 263B
  6. index.css 2.93KB

资源介绍:

组件 组件组件 封装 用的封装组件

<style>.boayall { width: 100%; height: 100%; position: absolute; background: #b9c3c6; padding: 100px; } .mini-content { width: 400px; min-height: 80px; border-radius: 8px; background: white; box-sizing: border-box; padding: 20px; cursor: pointer; } .mini-content .m1 { display: flex; justify-content: space-between; align-items: center; } .mini-content .m1 .m1-1 span:nth-of-type(1) { font-size: 20px; } .mini-content .m1 .m1-1 span:nth-of-type(2) { margin-left: 10px; font-size: 15px; } .mini-content .m1 .m1-2 { width: 30px; height: 30px; } .mini-content .m2 { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; } .mini-content .m2 span:nth-of-type(1) { color: #4d4d4f; } .mini-content .m2 span:nth-of-type(2) { color: black; } .mini-content .m3 { display: flex; justify-content: space-around; } .mini-content .m3 .m3itemhover { display: flex; align-content: flex-end; } .mini-content .m3 .m3itemhover .h1 { display: flex; justify-content: space-between; padding-left: 15px; padding-right: 15px; } .mini-content .m3 .m3itemhover .h1 img { width: 30px; height: 30px; } .mini-content .m3 .m3item { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 30%; border-radius: 8px; } .mini-content .m3 .m3item .m3itemhover { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: none; border-radius: 8px; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 100%); } .mini-content .m3 .m3item .m31 { width: 60px; height: 60px; } .mini-content .m3 .m3item .m32 { font-size: 15px; color: #222a39; margin-top: 3px; margin-bottom: 3px; } .mini-content .m3 .m3item .m33 { font-size: 13px; color: #222a39; } .mini-content .m3 .m3item:hover .m3itemhover { display: block !important; } .mini-content-item { width: 400px; border-radius: 8px; background: white; box-sizing: border-box; padding: 10px 20px 10px 20px; cursor: pointer; } .mini-content-item .m4 { display: flex; align-items: center; justify-content: space-between; } .mini-content-item .m4 img { width: 30px; height: 30px; } .mini-content-item .m4 .m41 { display: flex; align-items: center; } .mini-content-item .m4 .m31 { width: 60px; height: 60px; } .mini-content-item .m4 span:nth-of-type(1) { margin-left: 10px; font-size: 16px; } .mini-content-item .m4 span:nth-of-type(2) { margin-left: 10px; margin-right: 10px; } .mini-content-item .m4 span:nth-of-type(3) { color: #7e5d6d; font-size: 14px; } </style>
100+评论
captcha