chen
/
huaxia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

个人中心，购物车响应式

master
chen 2021-09-29 15:58:45 +08:00
parent 04ad826666
commit d88e2da05c
11 changed files with 173 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/foot.min.css vendored
View File

@ -39,7 +39,7 @@ body{padding: 0;margin: 0;}
.fixed_foot>a{padding: 15px 0 10px 0;border-left: 1px solid rgba(255,255,255,.2);text-decoration: none;}
.fixed_foot>a:nth-child(1){border-left: 1px solid rgba(255,255,255,0);}
@media (max-width:766px){
.foot-end-box{margin-bottom: 70px;}
/* .foot-end-box{margin-bottom: 70px;} */
.foot-nav-box{padding: 10px 15px;}
.foot-end-right .linh30{line-height: 25px;}
.foot-end-box>div:first-child{padding: 20px 20px 0 15px;}

1
css/huaxia.css
View File

@ -6016,3 +6016,4 @@ ul {
.jies-box>div:first-child span{margin-left: 20px;cursor: pointer;color: #222222;font-size: 14px;}
.jies-box>div:last-child span span{font-size: 20px;font-weight: bold;color: #CB1919;}
.jies-box .settlement{height: 50px;background: #CB1919;color: #FFFFFF;display: inline-block;width: 130px;text-align: center;font-size: 18px;margin-left: 10px;cursor: pointer;}

79
css/huaxiaMedia.css
View File

@ -613,6 +613,9 @@ align-items: center;
.cart-content{margin-top: 20px;}
.cart-content>div:nth-child(6){width: 8%;padding-top: 10px;}
.num-box{width: 12%;padding-top: 10px;}
/* 结算页面 */
section .whole .whole-1 .Buyers #container #wrap .address .name {width: 120px;padding: 10px 0;text-align: center;}
}
@media screen and (min-width:1621px) and (max-width:1820px) {
@ -624,6 +627,8 @@ align-items: center;
#ys-cate li{padding: 10px 0 8px 0;font-size: 14px;flex-shrink: 0;}
.zx-nav li, .szx-nav li, .px-nav li{flex-shrink: 0;margin-right: 20px;}
.jg-xian{display: none;}
/* 结算页面 */
section .whole .whole-1 .Buyers #container #wrap .address .name {width: 120px;padding: 10px 0;text-align: center;}
}
@media (max-width:766px){
#zx-list img {width: 120px;max-height: 74px;}
@ -894,6 +899,55 @@ align-items: center;
section .whoil .whoil-1 .swiper-container .swiper-text {padding: 20px 0px 10px 0;margin-bottom: 20px;font-size: 16px;}
section .whoil .whoil-1 .swiper-container img {height: 190px;object-fit: cover;}
section .whoil .whoil-1 .swiper-container { padding-bottom: 30px;}
/* 订单结算 */
section .whole{padding: 0 20px;}
section .whole .whole-1 .all h2{font-size: 18px;}
section .whole .whole-1 .Buyers #container span:nth-child(2) a{font-size: 14px;}
section .whole .whole-1 .Buyers #container #wrap .address .name {padding: 8px 0;width: 100px;text-align: center;}
section .whole .whole-1 .Buyers #container #wrap .address{flex-wrap: wrap;}
section .whole .whole-1 .Buyers #container #wrap .address p{margin: 10px 0;width: 100%;}
section .whole .whole-1 .Buyers{padding: 20px 0;}
section .whole .whole-1 .coupon{display: flex;flex-wrap: wrap;justify-content: space-between;}
section .whole .whole-1 .Buyers #container #read-more{margin-top: 0px;}
section .whole .whole-1 .coupon{padding-left: 0px;padding-bottom: 20px;}
section .whole .whole-1 .coupon .yh{width: 48%;margin-right: 0px;margin-top: 20px;height: 100px;}
.msg-bei {margin-top: 20px;}
.setall > div:first-child { padding: 10px 20px;}
.price-box {line-height: 25px;font-size: 14px;}
.setall > div:nth-child(2) {padding: 10px 20px;}
.sumbtn-box { padding: 10px 20px 10px 0;}
.sumbtn-box div {font-size: 14px;width: 100px;height: 30px;line-height: 30px;}
.commodity .jies-head {display: none;}
.jies-list{display: flex;justify-content: space-between;position: relative;}
.jies-list>div:first-child{width: 100%;text-align: left;display: flex;}
.jies-list>div:first-child div div{font-size: 14px;line-height: 24px;color: #000000;margin-left: 10px;width: 100%;height: auto;}
.jies-list>div:nth-child(2)::before{content: '单价：';font-size: 14px;}
.jies-list>div:nth-child(2){position: absolute;bottom: 32px;right: 0;width: auto;}
.jies-list div:nth-child(3){position: absolute;bottom: 32px;width: auto;left: 95px;}
.jies-list div:nth-child(4)::before{content: '合计：';font-size: 14px;}
.jies-list div:nth-child(4){position: absolute;bottom: 10px;right: 0;width: auto;}
section .whole .whole-1 .Buyers #container #wrap .address .na-2{margin-top: 0px;}
.yhmoney > div:first-child {font-size: 30px;}
.yhyuan {font-size: 12px;}
.yhman {font-size: 12px;}
.yhdate {margin-top: 22px;font-size: 12px;}
.yhguoqi {margin-top: 22px;font-size: 12px;}
section .whole .whole-1 .Wxcollec {line-height: 0px;padding-top: 40px;}
section .whole .whole-1 .Wxcollec .wxprice span {font-size: 20px;}
section .whole .whole-1 .Wxcollec .wxprice {padding-bottom: 40px;}
section .whole .whole-1 .Wxcollec .wxzf {padding-bottom: 30px;}
section .whole .whole-1 .payment {line-height: 40px;padding-top: 50px; padding-bottom: 50px;}
section .whole .whole-1 .payment img {width: 50px;}
section .whole .whole-1 .payment h2{font-size: 16px;}
section .whole .whole-1 .payment .order{display: flex;flex-direction: column;}
section .whole .whole-1 .payment .order .odernum{padding-right: 0px;}
section .whole .whole-1 .payment .order .oderhome{padding-left: 0px;}
header .bac{height: auto;padding-bottom: 20px;}
.pubpopu{border-radius: 0px;}
.tankt {font-size: 14px;}
}
@media (min-width:767px) and (max-width:991px){
#zx-list img {width: 250px;max-height: 155px;}
@ -967,6 +1021,18 @@ align-items: center;
.cart-content>div:nth-child(5){width: 11%;padding-top: 10px;font-size: 14px;}
.cart-content>div:nth-child(6){width: 8%;padding-top: 10px;}
.num-box{width: 12%;padding-top: 10px;}
/* 订单结算 */
section .whole .whole-1 .Buyers #container #wrap .address .name {padding: 8px 0;width: 100px;text-align: center;}
section .whole .whole-1 .Buyers{padding: 20px 0;}
section .whole{padding: 0 20px;}
section .whole .whole-1 .coupon{display: flex;flex-wrap: wrap;}
section .whole .whole-1 .coupon .yh{width: 30.5%;margin-right: 20px;}
section .whole .whole-1 .Buyers #container #read-more{margin-top: 0px;}
section .whole .whole-1 .Buyers #container #wrap .address{margin-bottom: 10px;}
section .whole .whole-1 .Buyers #container #wrap .address .na-2{margin-top: 0px;}
header .bac{padding-bottom: 20px;}
}
@media (min-width:992px) and (max-width:1199px){
#zx-list img {width: 250px;max-height: 155px;}
@ -1019,6 +1085,13 @@ align-items: center;
.cart-content>div:nth-child(5){width: 11%;padding-top: 10px;font-size: 14px;}
.cart-content>div:nth-child(6){width: 8%;padding-top: 10px;}
.num-box{width: 12%;padding-top: 10px;}
/* 订单结算 */
section .whole .whole-1 .Buyers #container #wrap .address .name {width: 120px;padding: 10px 0;text-align: center;}
section .whole{padding: 0 120px;}
section .whole .whole-1 .coupon{display: flex;flex-wrap: wrap;}
section .whole .whole-1 .coupon .yh{width: 30.5%;margin-right: 20px;}
section .whole .whole-1 .Buyers #container #read-more{margin-top: 0px;}
}
@media (min-width:1200px) and (max-width:1440px){
#ys-cate{overflow-x: scroll;overflow-y: hidden;}
@ -1047,4 +1120,10 @@ align-items: center;
.cart-content>div:nth-child(5){width: 11%;padding-top: 10px;font-size: 14px;}
.cart-content>div:nth-child(6){width: 11%;padding-top: 10px;}
.num-box{width: 12%;padding-top: 10px;}
/* 订单结算 */
section .whole .whole-1 .Buyers #container #wrap .address .name {width: 160px;padding: 10px 0;text-align: center;}
section .whole{padding: 0 120px;}
section .whole .whole-1 .coupon{display: flex;flex-wrap: wrap;}
section .whole .whole-1 .coupon .yh{width: 30.5%;}
}

32
css/logshoppingcar/tobepaid.css
View File

@ -81,10 +81,9 @@ section .whole .whole-1 .Buyers #container #wrap .address {
display: flex;
align-items: center;
}
section .whole .whole-1 .Buyers #container #wrap .address .name {
display: inline-block;
padding: 10px 50px;
width: 160px;padding: 10px 0;text-align: center;
position: relative;
}
section .whole .whole-1 .Buyers #container #wrap .address .name img {
@ -140,14 +139,17 @@ section .whole .whole-1 .coupon .yh {
/* 优惠卷的背景 */
section .whole .whole-1 .coupon .coupon-1 {
background: url("../../img/images/coupon-1.png");
background-size: 100% 100%;
}
section .whole .whole-1 .coupon .coupon-2 {
background: url("../../img/images/coupon-2.png");
background-size: 100% 100%;
}
section .whole .whole-1 .coupon .coupon-3 {
background: url("../../img/images/coupon-3.png");
background-size: 100% 100%;
}
/* 提交订单 */
section .whole .setall {
@ -167,17 +169,6 @@ section .whole .setall {
top: -50px;
}
.zhanw{height: 30px;width: 100%;background: #f5f5f5;}
.table-box{text-align: center;width: 100%;}
.table-box tr:first-child{background-color: #f3f3f3;}
.table-box tr:first-child>th:first-child{text-align: left;padding: 22px 0 16px 20px;width: 480px;}
.table-box tr:first-child>th:nth-child(2){width: 150px;}
.table-box tr:first-child>th:nth-child(3){width: 80px;}
.table-box tr:first-child>th:nth-child(4){width: 180px;}
.table-box .item-box td:nth-child(1){width: 480px;text-align: left;padding: 20px;border-bottom: 1px solid #f2f2f2;}
.table-box .item-box td:nth-child(1) div{width: 480px;display: flex;}
.table-box .item-box td:nth-child(1) div div{font-size: 14px;line-height: 24px;color: #525252;margin-left: 10px;}
.table-box .item-box td:nth-child(2),.table-box .item-box td:nth-child(3),.table-box .item-box td:nth-child(4){padding: 20px;font-weight: bold;border-bottom: 1px solid #f2f2f2;}
.table-box .item-box td:nth-child(4){color: #CB1919;}
.yhquan{font-size: 15px;color: #333333;font-weight: bold;}
.yhmoney{display: flex;align-items: center;margin-top: 20px;}
@ -196,4 +187,17 @@ section .whole .setall {
.allPrice{color: #CB1919;font-weight: bold;font-size: 24px;}
.cartAddress{font-size: 14px;color: #333333;opacity: .5;}
.sumbtn-box{display: flex;justify-content: flex-end;padding: 30px 20px 30px 0;}
.sumbtn-box div{font-size: 18px;color: #FFFFFF;width: 142px;height: 45px;line-height: 45px;text-align: center;background: #CB1919;}
.sumbtn-box div{font-size: 18px;color: #FFFFFF;width: 142px;height: 45px;line-height: 45px;text-align: center;background: #CB1919;}
.commodity .jies-head{display: flex;text-align: center;padding: 22px 0 16px 20px;background-color: #f3f3f3;font-size: 16px;font-weight: bold;}
.jies-head div:nth-child(1){width: 69%;text-align: left;}
.jies-head div:nth-child(2){width: 10%;}
.jies-head div:nth-child(3){width: 8%;}
.jies-head div:nth-child(4){width: 13%;}
.commodity .jies-list{margin-top: 20px;display: flex;text-align: center;border-bottom: 1px solid #F2F2F2;padding-bottom: 20px;}
.jies-list>div:first-child{width: 69%;text-align: left;display: flex;}
.jies-list>div:first-child div div{font-size: 14px;line-height: 24px;color: #525252;margin-left: 10px;width: 72%;height: auto;}
.jies-list>div:nth-child(2){width: 10%;font-weight: bold;}
.jies-list div:nth-child(3){width: 8%;font-weight: bold;}
.jies-list div:nth-child(4){width: 13%;color: #CB1919;font-weight: bold;}

1
htmls/artistCenter/artistCenter.html
View File

@ -112,6 +112,7 @@
<img class="left-imgtwo" src="../../img/public/yscenter10.png" title="征稿作品管理+" alt="图片已缺失">
<span class="col19">艺术访谈</span>
</li>
</a>
<a href="javascript:;"><li class="ty_leftcon ty_litittwo">
<img class="left-imgone" src="../../img/public/yscenter11_1.png" title="征稿作品管理+" alt="图片已缺失">
<img class="left-imgtwo" src="../../img/public/yscenter11.png" title="征稿作品管理+" alt="图片已缺失">

8
htmls/logshoppingcar/login.html
View File

@ -8,17 +8,13 @@
<title>登录</title>
<link rel="stylesheet" href="../../css/layui.css">
<link rel="stylesheet" type="text/css" href="../../css/logshoppingcar/login_cart.css"/>
<link rel="stylesheet" type="text/css" href="../../css/huaxiaMedia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/login_cart/login_cart.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/gVerify.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.foot-iframe {
margin-top: -30px;
color: rgb(255, 255, 255);
}
#gotoTop {
float: right;
position: relative;
@ -328,7 +324,7 @@
</div>
</div>
<!-- 底部导航 -->
<div class="foot-nav-box">
<div class="foot-nav-box" style="margin-top: -30px;">
<!-- 导航文字 -->
<div class="foot-box-nav">
<div><a href="../../index.html" target="_parent">首页</a></div>

10
htmls/logshoppingcar/qrcode.html
View File

@ -8,15 +8,11 @@
<link rel="stylesheet" href="../../css/layui.css">
<link rel="stylesheet" type="text/css" href="../../css/huaxia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/logshoppingcar/login_cart.css"/>
<link rel="stylesheet" type="text/css" href="../../css/huaxiaMedia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.foot-iframe {
margin-top: -30px;
color: rgb(255, 255, 255);
}
#gotoTop {
float: right;
position: relative;
@ -24,7 +20,6 @@
top: -50px;
}
</style>
<body>
<header class="tyhder_herader">
<img src="../../img/grzx/topimg.jpg" title="图1" alt="图片已缺失">
@ -55,8 +50,7 @@
<div class="Wxcollec">
<div class="wxprice">应付金额：<span class="">2234.50</span>元</div>
<!-- 微信二维码 -->
<div class="qrcode"><img class="" alt="图片丢失" title="微信收款二维码" src="../../img/images/wxqrcode.png">
</div>
<div class="qrcode"><img class="" alt="图片丢失" title="微信收款二维码" src="../../img/images/wxqrcode.png"></div>
<!-- 微信支付 -->
<div class="wxzf"><img class="" alt="图片丢失" title="微信支付" src="../../img/images/wxzf.png"></div>
</div>

128
htmls/logshoppingcar/tobepaid.html
View File

@ -3,10 +3,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="../../css/huaxia.css"/>
<link rel="stylesheet" href="../../css/logshoppingcar/tobepaid.css">
<link rel="stylesheet" type="text/css" href="../../css/huaxiaMedia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/login_cart/login_cart.js" type="text/javascript" charset="utf-8"></script>
@ -50,19 +51,19 @@
<span><a class="addbuy" href="../grzx/personalData.html?id=9">新增收货地址</a></span>
<div id="wrap">
<div class="address address-1" onclick="Subtitle();">
<div class="name na-1">程鹏龙<img src="../../img/public/chooseAddress.png" ></div>
<div class="name na-1 fs"><div class="clips1">程鹏龙</div><img src="../../img/public/chooseAddress.png" ></div>
<p>程鹏龙 四川 成都市 武侯区 城区 人民南路四段成科西路3号 138****1234</p>
<a class="" href=""><img src="../../img/images/Defadd.png" alt=""></a>
</div>
<div class="address address-2" onclick="Subtitle();">
<div class="name na-2">程鹏龙2</div>
<div class="name na-2 fs"><div class="clips1">程鹏龙2</div></div>
<p>程鹏龙 四川 成都市 武侯区 城区 人民南路四段成科西路3号 138****1234</p>
<a class="" href="">设置为默认地址</a>
<div class="fs"><a class="" href="">设置为默认地址</a></div>
</div>
<div class="address address-2" onclick="Subtitle();">
<div class="name na-2">程鹏龙2</div>
<div class="name na-2 fs"><div class="clips1">程鹏龙2</div></div>
<p>程鹏龙 四川 成都市 武侯区 城区 人民南路四段成科西路3号 138****1234</p>
<a class="" href="">设置为默认地址</a>
<div class="fs"><a class="" href="">设置为默认地址</a></div>
</div>
<div id="gradient"></div>
</div>
@ -73,36 +74,36 @@
<div class="opt">
<span class="Subtitle">送货清单</span>
<div class="commodity">
<table class="table-box" cellspacing="0" cellpadding="20">
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr class="item-box" valign="top">
<td>
<div>
<img src="../../img/images/1-1.png" alt="图片丢失" title="商品1" >
<div>创意牛气冲天牛摆件现代简约家居装饰品牛摆设电视柜玄关办公室博古架抽象艺术工艺品 牛气冲天+运势如虹</div>
</div>
</td>
<td>￥188</td>
<td>x3</td>
<td id="price0">￥564.6</td>
</tr>
<tr class="item-box" valign="top">
<td>
<div>
<img src="../../img/images/1-1.png" alt="图片丢失" title="商品1" >
<div>创意牛气冲天牛摆件现代简约家居装饰品牛摆设电视柜玄关办公室博古架抽象艺术工艺品 牛气冲天+运势如虹</div>
</div>
</td>
<td>￥188</td>
<td>x3</td>
<td id="price0">￥564.6</td>
</tr>
</table>
<!-- 标题 -->
<div class="jies-head">
<div>商品</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
</div>
<!-- 数据列表 -->
<div class="jies-list">
<div>
<img src="../../img/images/1-1.png" alt="图片丢失" title="商品1" >
<div>
<div class="clips2">创意牛气冲天牛摆件现代简约家居装饰品牛摆设电视柜玄关办公室博古架抽象艺术工艺品 牛气冲天+运势如虹</div>
</div>
</div>
<div>￥188</div>
<div>x3</div>
<div>￥564.6</div>
</div>
<div class="jies-list">
<div>
<img src="../../img/images/1-1.png" alt="图片丢失" title="商品1" >
<div>
<div class="clips2">创意牛气冲天牛摆件现代简约家居装饰品牛摆设电视柜玄关办公室博古架抽象艺术工艺品 牛气冲天+运势如虹</div>
</div>
</div>
<div>￥188</div>
<div>x3</div>
<div>￥564.6</div>
</div>
</div>
</div>
@ -255,32 +256,35 @@
</body>
<script src="../../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
// 折叠地址
$(function () {
var slideHeight = 50; // px
var defHeight = $('#wrap').height();
if (defHeight >= slideHeight) {
$('#wrap').css('height', slideHeight + 'px');
$('#read-more').append('<span style="cursor: pointer;" href="#">展开地址︾</span>');
$('#read-more span').click(function () {
var curHeight = $('#wrap').height();
if (curHeight == slideHeight) {
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more span').html('收起地址 ︽');
$('#gradient').fadeOut();
} else {
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more span').html('展开地址 ︾');
$('#gradient').fadeIn();
}
return false;
});
}
});
$(window).resize(function() { //监听窗口大小的改变
let windowWidth = $(window).width()
if(windowWidth<=766){
slideHeight = 130
}
})
var slideHeight = 50; // px
var defHeight = $('#wrap').height();
if (defHeight >= slideHeight) {
$('#wrap').css('height', slideHeight + 'px');
$('#read-more').append('<span style="cursor: pointer;" href="#">展开地址︾</span>');
$('#read-more span').click(function () {
var curHeight = $('#wrap').height();
if (curHeight == slideHeight) {
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more span').html('收起地址 ︽');
$('#gradient').fadeOut();
} else {
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more span').html('展开地址 ︾');
$('#gradient').fadeIn();
}
return false;
});
}
</script>
</html>

24
htmls/logshoppingcar/tuxingCode.html
View File

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
<script></script>
</head>
<body>
<div id="v_container" style="width: 200px;height: 50px;"></div>
<input type="text" id="code_input" value="" placeholder="请输入验证码"><button id="my_button">验证</button>
<script src="../../js/gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function() {
var res = verifyCode.validate(document.getElementById("code_input").value);
if (res) {
alert("验证正确");
} else {
alert("验证码错误");
}
}
</script>
</body>
</html>

5
htmls/logshoppingcar/zf.html
View File

@ -3,13 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>支付成功</title>
<link rel="stylesheet" href="../../css/layui.css">
<link rel="stylesheet" type="text/css" href="../../css/huaxia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/logshoppingcar/login_cart.css"/>
<link rel="stylesheet" type="text/css" href="../../css/huaxiaMedia.css"/>
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/centerHead.css" />
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/huaxia.js" type="text/javascript" charset="utf-8"></script>
</head>

2
index.html
View File

@ -607,7 +607,7 @@
</div>
</div>
<!-- 底部导航 -->
<div class="foot-nav-box">
<div class="foot-nav-box" style="padding-bottom: 70px;">
<!-- 导航文字 -->
<div class="foot-box-nav">
<div><a href="index.html" target="_parent">首页</a></div>