1

resources/views/app/appxq.blade.php

@@ -52,77 +52,146 @@
         border:none;
     }
     .role input[type='file']{opacity:0;}
-    .role{border:1px solid #c9cccf;text-align:center;width:200px;height:200px;line-height:200px;font-size:18px;margin-top:15px;float:left;margin-left:5px;}
 
+    .role{
+        width: 100px;
+        height: 100px; 
+        border: 1px solid #99D3F5;
+        position: relative;
+        margin-right: 10px;
+    }
 
-    .role img{width: 198px;height: 198px;display: none;}
+    .role img{
+        max-width: 100%;
+        max-height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%); 
+    }
 
     input[type="checkbox"]{
         display:none;
     }
     input + label{
         box-shadow:rgb(16, 75, 243) 0px 0px 0px 1px;
-        width:60px;
-        height:20px;
+        width:100px;
+        height:27px;
         display:inline-block;
-        border-radius:20px;
+        border-radius:27px;
         position:relative;
         overflow:hidden;
+        cursor: pointer;
     }
     input + label:before{
         content:'';
         position:absolute;
         left:0px;
-        width:20px;
-        height:20px;
+        width:27px;
+        height:27px;
         display:inline-block;
-        border-radius:20px;
+        border-radius:27px;
         background-color:#4cd964;
         z-index:20;
         transition:all 0.5s;
+        cursor: pointer;
     }
     input + label:after{
         content:'';
         position:absolute;
-        border-radius:20px;
-        left:-40px;
-        width:60px;
-        height:20px;
+        border-radius:27px;
+        left:-73px;
+        width:100px;
+        height:27px;
         display:inline-block;
         background-color:#4898ff;
         transition:all 0.5s;
+        cursor: pointer;
     }
     input:checked + label:before{
-        left:40px;
+        left:73px;
     }
     input:checked + label:after{
         left:0px;
+    }
 
+    hr {
+        height: 1px;
+        border: 0;
+        background-color: #e2e2e2;
+        clear: both;
+    }
+    /* 选择文件按钮 */
+    .btn_file {  
+        position: relative;  
+        display: inline-block;  
+        background: #D0EEFF;  
+        border: 1px solid #99D3F5;  
+        border-radius: 4px;  
+        padding: 4px 12px;  
+        overflow: hidden;  
+        color: #1E88C7;  
+        text-decoration: none;  
+        text-indent: 0;  
+        line-height: 15px;  
+    }  
+    .btn_file input {  
+        position: absolute;  
+        font-size: 100px;  
+        right: 0;  
+        top: 0;  
+        opacity: 0;  
+    }  
+    .btn_file:hover {  
+        background: #AADFFD;  
+        border-color: #78C3F3;  
+        color: #004974;  
+        text-decoration: none;  
+    } 
+    .flex_row{
+        display: flex;
+        flex-direction: row;
+    }
+    .flex_center {
+        justify-content: center;
+        align-items: center;
+    }
+    .item-center {
+        align-items: center;
+    }
+    /* 左右对齐，项目之间的间隔都相等 */
+    .allAlignment {
+        justify-content: space-between;
+    }
+    /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
+    .average {
+        justify-content: space-around;
     }
 </style>
 <div class="wrap-container welcome-container">
-    <div class="row">
+    <div >
         <div class="welcome-left-container col-lg-9">
 
             <!--基本信息-->
             <div class="server-panel panel panel-default">
                 <div class="panel-header">基础信息</div>
                 <hr>
-                <div class="panel-body clearfix" style="border: 1px solid #000000;">
-                    <div class="col-md-3">
+                <div class=" clearfix" style="border: 1px solid #000000">
+                    <div class="col-md-3" style="padding-left: 1px; padding-right: 1px;">
                         <p class="title">图标</p>
-                        <div style="width: 235px;margin-left:13px;margin-top:5px;height: 30px;">
-                            <img src="{{$data['icon']}}" style="width: 30px;height:30px;">
-                            <form action="/apps/icon/{{$data['id']}}" method="post" enctype="multipart/form-data" style="width: 185px;margin-top: -32px;margin-left: 40px;">
+                        <div class="flex_row item-center average" style="width: 260px;height: 40px;">
+                            <img src="{{$data['icon']}}" style="width: 30px;height:30px; ">
+                            <form class="flex_row item-center average" action="/apps/icon/{{$data['id']}}" method="post" enctype="multipart/form-data" style="width: 180px;">
                                 <input type="hidden" name="_token" value="{{ csrf_token() }}" style="display: none;">
-                                <input type="file" name="file" style=" width:70px;display:inline-block;line-height:25px;margin-top:5px;border-radius:4px;height:25px; text-align:center; color: #4395FF;margin-left: 30px;border:1px solid #F2F2F2;">
-                                 <input type="submit" value="提交" style=" width:70px;display:inline-block;line-height:25px;border-radius:4px;height:25px; text-align:center;letter-spacing: 3px;border:none;border:1px dashed #8f94a1;cursor:pointer; color: #ffffff;background-color:  #4395FF;">
-
-
+                                <a href="javascript:;" class="btn_file">
+                                    选择文件
+                                    <input type="file" name="file" >
+                                </a>
+                                <input type="submit" value="提交" style=" width:70px;display:inline-block;line-height:25px;border-radius:4px;height:25px; text-align:center;letter-spacing: 3px;border:none;border:1px dashed #8f94a1;cursor:pointer; color: #ffffff;background-color:  #4395FF;">
                             </form>
                         </div>
                     </div>
-                    <div class="col-md-3" onclick="apptitle({{$data['id']}})">
+                    <div class="col-md-3 " style="padding-left: 1px; padding-right: 1px;" onclick="apptitle({{$data['id']}})">
                         <p class="title">应用名称</p>
                         {{--<span class="info">{{$data['app_title']}}</span>--}}
                         <span id="bbb12{{$data['id']}} "class="info" >{{$data['app_title']}}</span>
@@ -154,24 +223,24 @@
                         </script>
                     </div>
 
-                    <div class="col-md-2">
+                    <div class="col-md-2" style="padding-left: 1px; padding-right: 1px;">
                         <p class="title"> 应用ID</p>
                         <span class="info">{{$data['app_id']}}</span>
                     </div>
-                    <div class="col-md-1">
+                    <div class="col-md-1" style="padding-left: 1px; padding-right: 1px;">
                         <p class="title">版本</p>
                         <span class="info">{{$data['edition']}}</span>
                     </div>
-                    <div class="col-md-1">
+                    <div class="col-md-1" style="padding-left: 1px; padding-right: 1px;">
                         <p class="title"> Build版本</p>
                         <span class="info">{{$data['build_edition']}}</span>
                     </div>
 
-                    <div class="col-md-1">
+                    <div class="col-md-1" style="padding-left: 1px; padding-right: 1px;">
                         <p class="title">系统版本</p>
                         <span class="info">{{$data['sys_edition']}}</span>
                     </div>
-                    <div class="col-md-1">
+                    <div class="col-md-1"style="padding-left: 1px; padding-right: 1px;" >
                         <p class="title">文件大小</p>
                         <span class="info">{{$data['filesize']}} MB</span>
                     </div>
@@ -182,7 +251,7 @@
             <div class="server-panel panel panel-default">
                 <div class="panel-header">附加信息</div>
                 <hr>
-                <div class="panel-body clearfix" style="border: 1px solid #000000;">
+                <div class=" clearfix" style="border: 1px solid #000000">
                     <div class="wrapper">
                         <div class="letter" style="padding: 8px;">
                             副标题
@@ -216,7 +285,7 @@
                                     data:{'id':id,'username':username},//传递参数
                                     url:"{{url('/apps/fage')}}",//地址
                                     success:function(e){//回调
-                                        console.log(e);
+                                        //console.log(e);
                                         if(e==1){
                                             document.getElementById('aaa1'+id).style.display = 'none';//如果修改成功,input隐藏
                                             document.getElementById('bbb1'+id).innerHTML = username;//修改成功,将表里修改后的数据赋值给span标签
@@ -439,36 +508,32 @@
             <div class="server-panel panel panel-default">
                 <div class="panel-header">预览图</div>
                 <hr>
-                <div class="panel-body clearfix" style="border: 1px solid #000000;background-color: #f2f2f2;">
+                <div class=" clearfix" style="border: 1px solid #000000;background-color: #f2f2f2;">
 
                     <div style="width: 100%;">
-                        <div  style="width: 260px;height: 120px;border-radius: 4px;margin-right: 10px; ">
-                            <form method="post" enctype="multipart/form-data" action="/apps/uploadsimgs/{{$data['id']}}">
+                        <div  style="width:100%; overflow-x:auto;height: 120px;border-radius: 4px; ">
+                            <form class="flex_row " style='margin-top: 10px;width:98%;'  method="post" enctype="multipart/form-data" action="/apps/uploadsimgs/{{$data['id']}}">
                                 <input type="hidden" name="_token" value="{{ csrf_token() }}" style="display: none;">
-                                <img src="{{$data['img']}}" alt=""  class="file" style="width: 100%;" >
-                                <div class="role" onclick="file(this)">
-                                    <img src="" alt="" id="goods_1" class="file" style="width: 100%;"  >
-                                    <span style="color: #ccc;">上传图像</span>
+                                <div class='role '>
+                                    <img src="{{$data['img']}}" alt=""  class="file" style="width: 100px;" >
+                                </div>
+                                <div  class="role " onclick="file(this)">
+                                    <img src="" alt="" id="goods_1" class="file" style="width: 100px;"  >
+                                    <span style="margin-top: 35px; color: #ccc;padding: 0px;line-height: 30px; text-align: center;">上传图像</span>
                                     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods1" onchange="le(this)">
                                 </div>
-                                <div class="role" style="display: none" onclick="file(this)">
-                                    <img src="" alt="" id="goods_2"  class="file" style="width: 100%;>
+                                <!-- <div class="role" style="display: none" onclick="file(this)">
+                                    <img src="" alt="" id="goods_2"  class="file" style="width: 100px;>
                                     <span style="color: #cccccc;">上传图像</span>
                                     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods2" onchange="le(this)">
-                                </div>
+                                </div> -->
 
                                 <div class="role" onclick="copy(this)">
-                                    <span style="color: #ccc;">+</span>
+                                    <span style="margin-top: 35px; color: #ccc;padding: 0px;line-height: 30px; text-align: center; ">+</span>
                                 </div>
-                                <button type="submit">提交</button>
+                                <button style='width: 60px; height: 30; margin-top: 71px;color: #ffffff;background-color: #4395FF;border-radius: 4px;' type="submit">提交</button>
                             </form>
-                            {{--<img src="{{$data['img']}}" style="width: 240px;height: 120px;">
-                            <img src="{{$data['img1']}}" style="width: 240px;height: 120px;margin-left: 255px;margin-top: -120px;">
-                            <form action="/apps/imgs/{{$data['id']}}" method="post" enctype="multipart/form-data" style="width: 185px;margin-top: -32px;margin-left: 40px;">
-                                <input type="hidden" name="_token" value="{{ csrf_token() }}" style="display: none;">
-                                <input type="file"  name="file"  style=" width:70px;display:inline-block;line-height:25px;margin-top:-50px;border-radius:4px;height:25px; text-align:center; color: #4395FF;margin-left: 470px;border:1px solid #F2F2F2;">
-                                <input type="submit"  value="提交" style=" width:70px;display:inline-block;line-height:25px;border-radius:4px;height:25px; text-align:center;letter-spacing: 3px;margin-left:470px;margin-top:-14px;nborder:none;border:1px dashed #8f94a1;cursor:pointer; color: #ffffff;background-color:  #4395FF;">
-                            </form>--}}
+    
                             <script>
                                 //点击圆框时上传图片
                                 function file(evn) {
@@ -519,7 +584,7 @@
             <div class="server-panel panel panel-default">
                 <div class="panel-header">安装信息</div>
                 <hr>
-                <div class="panel-body clearfix" style="border: 1px solid #000000;">
+                <div class=" clearfix" style="border: 1px solid #000000">
                     <div class="wrapper">
                         <div class="letter" style="padding: 8px;">
                             标题
@@ -704,7 +769,7 @@
             <div class="server-panel panel panel-default">
                 <div class="panel-header">软件信息</div>
                 <hr>
-                <div class="panel-body clearfix" style="border: 1px solid #000000;">
+                <div class=" clearfix" style="border: 1px solid #000000">
                     <div class="wrapper">
                         <div class="letter" style="padding: 8px;">
                             安装地址
@@ -719,11 +784,14 @@
                             二维码
                         </div>
                         <div class='letter'style="padding: 8px;">
-                            <div style="width: 235px;margin-left:13px;margin-top:5px;height: 30px;">
+                            <div class='flex_row' style="width: 235px;height: 30px;">
                                 <img src="{{$data['a_qr']}}" style="width: 30px;height:30px;">
-                                <form action="/apps/eq/{{$data['id']}}" method="post" enctype="multipart/form-data" style="width: 185px;margin-top: -32px;margin-left: 40px;">
+                                <form class="flex_row item-center average"  action="/apps/eq/{{$data['id']}}" method="post" enctype="multipart/form-data" style="width: 185px;">
                                     <input type="hidden" name="_token" value="{{ csrf_token() }}" style="display: none;">
-                                    <input type="file" name="file" style=" width:70px;display:inline-block;line-height:25px;margin-top:5px;border-radius:4px;height:25px; text-align:center; color: #4395FF;margin-left: 30px;border:1px solid #F2F2F2;">
+                                    <a href="javascript:;" class="btn_file">
+                                        选择文件
+                                        <input type="file" name="file" >
+                                    </a>
                                     <input type="submit" value="提交" style=" width:70px;display:inline-block;line-height:25px;border-radius:4px;height:25px; text-align:center;letter-spacing: 3px;border:none;border:1px dashed #8f94a1;cursor:pointer; color: #ffffff;background-color:  #4395FF;">
 
 
@@ -737,7 +805,7 @@
 
                         <div class="letter"style="padding: 8px;"  >
 
-                            <div class="letter layui-form-radio ">
+                            <div class="letter " tyle='margin:0;'>
                                 @if($data['a_c_ation']==1)
                                     <input type="checkbox" name="sex" id="male" />
                                     <label for="male"></label>
@@ -812,7 +880,7 @@
             <!--联系-->
             <div class="panel panel-default contact-panel">
                 <div class="panel-header">联系我</div>
-                <div class="panel-body">
+                <div class="">
                     <p>QQ：</p>
                     <p>E-mail:@qq.com</p>
                 </div>

resources/views/app/upload.blade.php

@@ -2,8 +2,54 @@
 
 @section('header')
 @endsection
-
-
+<style>
+    .flex_row{
+    display: flex;
+    flex-direction: row;
+    }
+    .flex_center {
+        justify-content: center;
+        align-items: center;
+    }
+    .item-center {
+        align-items: center;
+    }
+    /* 左右对齐，项目之间的间隔都相等 */
+    .allAlignment {
+        justify-content: space-between;
+    }
+    /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
+    .average {
+        justify-content: space-around;
+    }
+        /* 选择文件按钮 */
+    .btn_file {  
+        position: relative;  
+        display: inline-block;  
+        background: #D0EEFF;  
+        border: 1px solid #99D3F5;  
+        border-radius: 4px;  
+        padding: 4px 12px;  
+        overflow: hidden;  
+        color: #1E88C7;  
+        text-decoration: none;  
+        text-indent: 0;  
+        line-height: 15px;  
+    }  
+    .btn_file input {  
+        position: absolute;  
+        font-size: 100px;  
+        right: 0;  
+        top: 0;  
+        opacity: 0;  
+    }  
+    .btn_file:hover {  
+        background: #AADFFD;  
+        border-color: #78C3F3;  
+        color: #004974;  
+        text-decoration: none;  
+    } 
+</style>
 <div class="wrap-container welcome-container">
     <div class="row">
         <div class="welcome-left-container col-lg-9">
@@ -14,16 +60,20 @@
                 <hr>
                 <div class="panel-body clearfix">
 
-                        <div style="width: 100%;height: 100px; border:1px dashed  #C9C9C9;">
-                            <img src="/static/admin/images/upload.jpg" style="margin-left: 46%;margin-top:15px;width: 50px;height: 50px;">
+                        <!-- <div class='flex_row'  > -->
 
-                            <form method="post" action="/apps/file" enctype="multipart/form-data" >
-                                <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
-                                <input type="file" name="picture">
-                                <button type="submit"> 提交 </button>
+                            <form class='flex_row' method="post" action="/apps/file" enctype="multipart/form-data" >
+                                
+                                    <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
+                                    <a href="btn_file">
+                                        <img  src="/static/admin/images/upload.jpg" style="margin-left: 46%;margin-top:15px;width: 50px;height: 50px;">
+                                        <input type="file" name="picture">
+                                    </a>
+                                    <button type="submit"> 提交 </button>
+                              
                             </form>
                             
-                        </div>
+                        <!-- </div> -->
                     </form>
                 </div>
             </div>