新的卡片样式

README.md

@@ -65,14 +65,15 @@ php think reset_password
 
 #### 功能
 
-- 服务器信息(0.2h,已完成)
+- 服务器信息
-- 系统配置(0.5h,已完成)
+- 系统配置
-- 管理员管理(0.5h已完成)
+- 管理员管理
-- 账户管理(0.5h,已完成)
+- 账户管理
-- 用户管理(0.5h已完成)
+- 用户管理
-- 权限管理(1h已完成)
+- 权限管理
-- 文件管理(2h已完成)
+- 文件管理
-- 后台日志(1h已完成)
+- 后台日志
+- 适配手机端,实现table转卡片样式
 
 
 ### 完整安装

public/static/css/common.css

@@ -37,3 +37,46 @@
     font-size: 35px;
     padding: 3px 5px;
 }
+
+
+.main-container {
+    margin-top: 10px;
+}
+
+.layui-table img {
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.table-card-box{
+    margin-top: 15px;
+    background-color: #eee;
+    padding: 15px 5px;
+}
+
+.table-card-item{
+    
+    margin-top: 5px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.table-card-item img{
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.table-card-item .item-title{
+    padding: 5px;
+    font-size: 16px;
+    width: 20%;
+}
+.table-card-item .item-value{
+    padding: 5px;
+    margin: 5px;
+    background-color: #fff;
+    min-width: 80%;
+    white-space: normal;
+    word-break: break-all;
+}

view/admin/common/_require.html

@@ -8,43 +8,6 @@
 <script src="/static/lib/layui/layui.js"></script>
 <script src="/static/js/common.js"></script>
 
-<style>
-    .main-container {
-        margin-top: 10px;
-    }
-
-    .layui-table img {
-        max-width: 60px;
-        max-height: 60px;
-    }
-
-    .table-card-box{
-        margin-top: 15px;
-        background-color: #eee;
-        padding: 15px 5px;
-    }
-
-    .table-card-item{
-        
-        margin-top: 5px;
-    }
-
-    .table-card-item img{
-        max-width: 60px;
-        max-height: 60px;
-    }
-
-    .table-card-item .item-title{
-        padding: 5px;
-        font-size: 16px;
-    }
-    .table-card-item .item-value{
-        padding: 5px;
-        margin: 5px;
-        background-color: #fff;
-    }
-</style>
-
 <script>
 
     //JavaScript代码区域