购物车+css布局

其他 2018-07-28 04:33:41 阅读次数: 0

一，css

/*master引入后显示=====商品管理*/
.goods_manage{
background: #393F64;
/*===主要的内容====*/
}
/*清除浮动clearfix*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}

.clearfix::after {
clear: both;
}
.main_header{
float: left;
margin-top: 8px;
width:100%;
height: 100px;
line-height: 100px;

}
/*商品详情字的样式*/
.main_header_show{
float: left;
font-size: 18px;
color: white;
}
/*商品详情的编辑样式*/
.main_header_edit{
float: right;
width: 108px;
height: 100px;
line-height: 100px;
}
.add_box {
float: left;
width: 90px;
height: 40px;
margin-top: 32px;
background: #fff;
line-height: 40px;
cursor: pointer;
border-radius: 6px;
margin-left:17px;
}
.add_box:hover{
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.add_box img{
float:left;
margin-top:6px;
margin-left:6px;
width: 28px;
height: 28px;
line-height: 40px;
}
.add_box span{
float: left;
font-size:18px;
margin-left: 8px;
color: #24a7f6;
}
/*=====主要内容的上半部分=====*/

/*============商品详情的内容区域===========*/
.main_form{
float: left;
width: 100%;
height: 360px;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
/*商品编辑区*/
/*包裹RFID与表格的外面的盒子*/
.main_infolist{
margin-top:35px;

}
/*个人信息填充区*/
.main_editarea{
width: 95%;
margin: 0 auto;

}
.main_editarea img{
float: left;
width: 23%;
height: 214px;
}
.peson_infolist{
float: right;
width: 77%;
top: 0px;
height: 277px;


}
.peson_left{
margin-right:100px;
padding-left: 40px;
float: left;
width: 35%;
top: 0px;
}
.peson_left li{
margin: 0 auto;
font-size: 19px;
color: #272822;
margin-bottom:18px;
list-style: none;
display: block;
}
.penson_right{
float: right;
width: 42%;
top: 0px;
}
.peson_right li{
margin: 0 auto;
font-size: 19px;
color: #272822;
margin-bottom: 18px;
list-style: none;
display: block;
}
/*====主要部分的后半端内容====*/
/*RFID*/
.rfid_header{
margin-top:45px;
height: 40px;
line-height: 40px;
}
.rfid_list{
width: 95%;
margin:0 auto;
}
.rfid_list_style{
margin-top: 20px;
float: left;
}
.rfid_list_style span{
font-size: 24px;
color: #B5B5B5;
}
/*RFID导入*/
.rfidin_list{
float: right;
margin-top: 20px;
width: 220px;
text-align: right;
line-height:40px;

}
.rfidin_box{
float: left;
width: 90px;
height: 40px;
background: #fff;
margin-left: 20px;
line-height: 40px;
cursor: pointer;
border-radius: 6px;
border: 1px solid orange;

}
.rfidin_box:hover{
box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}
.rfidin_box img{
float:left;
margin-top:6px;
margin-left:6px;
width: 28px;
height: 28px;
line-height: 40px;
}
.rfidin_box span{
float: left;
font-size:18px;
margin-left: 6px;
color: #24a7f6;

}

/*======================表格================================*/
.main_formlist{
margin-top:5cpx;
float: left;
width: 100%;
height: 350px;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 12px rgba(0,0,0,0.2);

}
.form_list{
margin-top: 25px;
}
.main_table{
width: 95%;
margin: 0 auto;
border: 1px solid #B1B1B1;
}
.main_table tr{
height: 40px;
width: 100%;
}
.main_table tr th{
text-align: center;
line-height: 35px;
height: 35px;
font-size: 19px;
}
.main_table tr td{
text-align: center;
}
/*laravel自带的分页样式*/
.boot_fenye{
margin: 0 auto;
margin-top:2px;
width: 94%;
height: 55px;
}
.boot_page{
float: right;

}
.boot_page_di{
margin-left: 10px;
float: left;
text-align: right;
font-size: 14px;
height: 74px;
line-height: 74px;

}
.boot_page_di_span{
width: 34px;
height: 34px;
border: 1px solid #D6D6D1;
}
.boot_page_total{
margin-left: 10px;
float:left;
text-align: right;
font-size: 14px;
height: 74px;
line-height: 74px;


}
.boot_choose{
margin-left:20px;
float:right;
}
/*======bootstrap-js弹窗的css=======*/
.modal_info{
float: left;
width: 100%;
height: 355px;
margin: 0 auto;

}
.modal_info_left{
float: left;
width: 50%;
padding-left: 40px;


}
.modal_info_right{
float: right;
width: 50%;
padding-left: 10px;
}

.blinfo{
width: 233px;

}
.blinfo span{
/* padding-left: 163px;*/
font-size: 16px;
font-weight: 600;
}

.blinfo input{
margin-top: 7px;
width: 100%;
height: 34px;
}

/*导入的css*/
/* .upload{
padding: 7px 12px;
height:12px;
line-height: 12px;
position: relative;
font-size: 18px;
text-decoration: none;

}
.file_change{
position: absolute;
overflow: hidden;
width:83px;
height: 47px;
right: 0;
top: 0;
opacity: 0;
}*/
/*选择照片的样式*/
.a-upload {
padding: 4px 10px;
height: 34px;
width: 233px;
line-height: 34px;
text-align: center;
position: relative;
cursor: pointer;
color: #888;
background: white;
border: 1px solid #A9A9A9;
text-decoration:none;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}

.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
/*file样式的改变*/
.addfile{
cursor: pointer;
position: relative;
display: inline-block;
overflow: hidden;
text-decoration: none;
text-indent: 0;

}
.addfile input {
position: absolute;
font-size: 50px;
right: 0;
top: 0;
opacity: 0;
}

#################################################################

二，html     laravel  的 blade 模板

@extends('admin.layouts.master')
@section('css')
<link rel="stylesheet" href="{{asset('/css/admin/commodity_edit.css')}}">
@endsection
@section('content')
@include('admin.layouts.message')
{{--表头--}}
<div class="main_header clearfix">
<div class="main_header_show clearfix">
<span>商品详情</span>
</div>

<div class="main_header_edit clearfix">
<div class="add_box clearfix" data-toggle="modal" data-target="#myModal">
<img src="{{asset('images/update_icon.png')}}" alt="">
<span>编辑</span>
</div>
</div>
</div>
{{--主要的内容区上半部分--}}
<div class="main_form clearfix">
<!-- 编辑区 -->
<div class="main_infolist clearfix">
<div class="main_editarea clearfix">
<img src="{{asset($datas['img'])}}" alt="">
<div class="peson_infolist clearfix">
<div class="peson_left clearfix" style="overflow: hidden;">

<li>
<span>商品类型&nbsp;:</span>
<span>{{$datas['class_name']}}</span>
</li>
<li>
<span>商品名称&nbsp;:</span>
<span>{{$datas['name']}}</span>
</li>
<li>
<span>产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地&nbsp;:</span>
<span>{{$datas['area']}}</span>
</li>
<li>
<span>生产日期&nbsp;:</span>

<span>{{$datas['product_at']}}</span>
</li>
<li>
<span>保&nbsp;&nbsp;质&nbsp;&nbsp;期&nbsp;:</span>
<span>{{$datas['productdate']}}</span>
</li>
<li>
<span>添加日期&nbsp;:</span>

<span>{{$datas['created_at']}}</span>
</li>
</div>
<div class="peson_right" style="overflow: hidden;">
<li>
<span>加工企业&nbsp;:</span>

<span style="overflow: hidden;">{{$datas['work_company']}}</span>
</li>
<li>
<span>产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址&nbsp;:</span>

<span style="overflow: hidden;">{{ $datas['site']}}</span>
</li>
<li>
<span>数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量&nbsp;:</span>
<span>{{ $datas['nums']}}</span>
</li>
<li>
<span>商品单价&nbsp;:</span>
<span>{{ $datas['price']}}</span>
</li>
<li>
<span>商品编号&nbsp;:</span>

<span style="overflow: hidden;">{{$datas['product_code']}}</span>
</li>
<li>
<span>上架状态&nbsp;:</span>
<span>

@if($datas['status']==1)
<span style="color:red;">上架中</span>
@else
<span style="color: green;">已上架</span>
@endif
</span>
</li>
</div>
</div>
</div>
</div>
</div>
<!-- RFID列表 -->

<div class="rfid_header clearfix">
<div class="rfid_list_style">
<span>RFID列表</span>
</div>
{{--RFID导入--}}
<div class="rfidin_list clearfix">
<a href="javascript:void(0);" class="addfile">
<div class="rfidin_box clearfix">
<img src="{{asset('images/lodingin_icon.png')}}" alt="">
<span style=" color: orange">导入</span>
<form action="" method="post" enctype="multipart/form-data" id="formlist">
{{csrf_field()}}
<input type="file" data-id="{{$datas['id']}}" value="" name="excel" onchange="fileupload()" multiple="multiple">
</form>
</div>
</a>
<form action="" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<div class="rfidin_box rfidin_model clearfix" style=" border: 1px solid #24a7f6; margin-top: -40px;">
<span onclick="downloadExcel()">模板下载</span>
</div>
</form>
</div>
</div>


<!-- 订单详情表格 -->
<div class="main_formlist clearfix">
<div class="form_list clearfix">
<table class="table table-bordered main_table">
<tbody>
<tr>
<th>RFID码</th>
<th>出售状态</th>
<th>添加时间</th>
</tr>
@foreach($rfid_lists as $rfid_list)
<tr>
<td>{{$rfid_list->rfid}}</td>
<td>
@if($rfid_list->state==0)
<span style="color: red;">未购买</span>
@else
<span style="color: green;">已出售</span>
@endif
</td>
<td>{{$rfid_list->created_at}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>

<div class="boot_fenye">
<div class="boot_page">
<div class="boot_page_di">第<span class="">{{ $page = isset($_GET['page'])?$_GET['page']:1}}</span>页
</div>
<div class="boot_page_total">共<span>{{$total_page}}</span>页
</div>
<div class="boot_choose">
{{$rfid_lists->links()}}
</div>
</div>
</div>
</div>
@endsection
<!-- Modal -->
<div style="display: none;margin-top: 100px;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background: #3D446B;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;"><span aria-hidden="true"><img
src="{{asset('/images/cancel_icon.png')}}" alt=""></span></button>
<h4 class="modal-title" id="myModalLabel" style="color: white;text-align: center; font-size: 24px;">编辑</h4>
</div>
<form id="addForm" action="" enctype='multipart/form-data' method="post">
{{csrf_field()}}
<div class="modal-body">
<div class="modal_info clearfix">
<div class="modal_info_left">
<p class="blinfo"><span>商品类型</span><br>

{{--<input type="text" name="class_id" value="{{ $goods->class_id}}">--}}
<select name="class_id" class="form-control" style="margin-top: 7px; border-radius: 0px;">
<option value="0">顶级分类</option>
@include('admin.goods_class_option',['goodsClasses'=>$goodsClasses,'targetClassId'=>$targetClassId,'sign'=>'&nbsp;&nbsp;&nbsp;&nbsp;'])
</select>

</p>

<p class="blinfo"><span>商品名称</span><br>
<input type="text" name="name" value="{{$datas['name']}}"></p>
{{--@if(count($errors) > 0)--}}
{{--<div class="" style="color: red;width: 400px;">{{$errors->first('goods_name')}}</div>--}}
{{--@endif--}}

<p class="blinfo"><span>产地</span><br>
<input type="text" name="area" value="{{$datas['area']}}"></p>

<p class="blinfo"><span>生产日期</span><br>

<div class='input-group date' id='datetimepicker1' style="width: 233px;">
<input type='text' class="form-control" name="product_at" value="{{$datas['product_at']}}" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>

</div>
</p>
<p class="blinfo"><span>*保质期</span><br>
<input type="text" name="productdate" value="{{$datas['productdate']}}"></p>
{{--@if(count($errors) > 0)--}}
{{--<div class="" style="color: red;width: 400px;">{{$errors->first('productdate')}}</div>--}}
{{--@endif--}}
</div>
<div class="modal_info_right">
<p class="blinfo"><span>加工企业</span><br>
<input type="text" name="work_company" value="{{$datas['work_company']}}"></p>

<p class="blinfo"><span>产址</span><br>
<input type="text" name="site" value="{{$datas['site']}}"></p>

<p class="blinfo"><span>*商品单价</span><br>
<input type="text" name="price" value="{{$datas['price']}}"></p>
{{--@if(count($errors) > 0)--}}
{{--<div class="" style="color: red;width: 400px;">{{$errors->first('price')}}</div>--}}
{{--@endif--}}

<p class="blinfo"><span>*商品编号</span><br>
<input type="text" name="product_code" value="{{$datas['product_code']}}"></p>
{{--@if(count($errors) > 0)--}}
{{--<div class="" style="color: red;width: 400px;">{{$errors->first('product_code')}}</div>--}}
{{--@endif--}}
{{--<span style="color: red">{{session('codeFails')}}</span>--}}
<p class="blinfo"><span>*更换图片</span><br>

<a href="javascript:void(0);" class="a-upload" style="text-decoration:none;margin-top: 10px;padding-bottom: 10px;">
<input type="file" name="img" value="{{$datas['img']}}"><span>图片</span>
</a></p>
</div>
</div>
</div>
{{--样式的保持--}}
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
<div class="modal-footer" style="text-align: center;">
<button id="save" type="button" class="btn btn-primary" style="height:40px;border: 0px solid;width: 300px;background: #2BAAF7" >
修改</button>
</div>
</form>
</div>
</div>
</div>
@section('js')
{{--表单提交--}}
<script>
$("#save").on("click",function () {
$("#addForm").ajaxSubmit({
url:"{{url('/admin/commodity/update/'.$datas['id'])}}" ,
dataType: 'json',
data: $('#addForm').serialize(),
type: 'post',
success: function (res) {
if (res.status == 0) {
layer.msg(res.msg);
} else {
layer.msg(res.msg, {icon: 1}, function () {
location.href = "{{url('/admin/commodity/show/'.$datas['id'])}}";
});
}
}
})
})
</script>
<script>
//bootstrap-日历控件js
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd ',//显示格式
minView: "month",//设置只显示到月份
initialDate: new Date(),//初始化当前日期
autoclose: true,//选中自动关闭
todayBtn: true//显示今日按钮
});
$('#datetimepicker2').datetimepicker({
language: 'zh-CN',//显示中文
format: 'yyyy-mm-dd',//显示格式
minView: "month",//设置只显示到月份
initialDate: new Date(),//初始化当前日期
autoclose: true,//选中自动关闭
todayBtn: true//显示今日按钮
});
});
//rfid导入 提交表单
//rfid信息导入成功
function fileupload(){
$('#formlist').ajaxSubmit({
// ['goods_id'=>$good->id]
url: "{{url('admin/commodity/rfidimport')}}",
dataType:'json',
type:'post',
data:$('#formlist').fieldSerialize(),
// data:$('#formlist').serialize(),
success:function(res) {
if (res.status == 0) {
layer.msg(res.msg);
} else {
layer.msg(res.msg, {icon: 1}, function () {
location.reload();
{{--location.href = "{{url('/admin/commodity/show/'.$goods->id)}}";--}}
});
}

},
error:function(xhr, type){
layer.msg('请检查导入的excel表格式是否正确');
}
});
}
//模板下载
function downloadExcel(){
//获取服务器地址
var host = location.host;
//把excel发送出来
var url = "http://"+ host +"/admin/commodity/rfiddownload";
window.open(url);
}
</script>
@endsection

猜你喜欢

转载自www.cnblogs.com/gaokcl/p/9380409.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022