first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,342 @@
body {
background: #f2f2f2;
}
.header {
padding-left: 0.3rem;
height: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
background-color:#ffffff;
font-weight: 900;
box-sizing: border-box;
z-index: 999;
}
.header img {
width: 0.2rem;
height: 0.33rem;
}
.header span {
font-size: 0.34rem;
color: #333333;
}
.content {
margin-top: .9rem;
margin-bottom: 1rem;
width: 100%;
box-sizing: border-box;
}
.content .address {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background: #ffffff;
}
.content .address .address_t {
padding-left: 0.3rem;
padding-top: 0.21rem;
display: flex;
align-items: center;
width: 100%;
}
.content .address .address_t .address_t_l {
width: 100%;
}
.content .address .address_t .address_t_l .top {
font-size: 0.3rem;
color: #333333;
}
.content .address .address_t .address_t_l .top span {
}
.content .address .address_t .address_t_l .top .name {
margin-right: 0.52rem;
font-weight: 600;
}
.content .address .address_t .address_t_l .down {
font-size: 0.24rem;
color: #333333;
margin-top: 0.17rem;
margin-bottom: 0.2rem;
}
.content .address .address_t img {
width: 0.14rem;
height: 0.26rem;
margin-right: 0.3rem;
}
.content .address img {
height: 0.06rem;
margin-bottom: 0;
width: 100%;
}
.content .select {
width: 100%;
background: #ffffff;
font-size: 0.28rem;
color: #333333;
display: flex;
justify-content: space-between;
margin-top: 0.19rem;
padding-top: 0.31rem;
padding-bottom: 0.26rem;
}
.content .select .select_l {
margin-left: 0.26rem;
}
.content .select .select_r {
margin-right: 0.44rem;
}
.content .select .select_r span {}
.content .select .select_r img {
width: 0.31rem;
height: 0.06rem;
}
.content .list {
width: 100%;
margin-top: 0.16rem;
background: #ffffff;
}
.content .list .list_t {
display: flex;
align-items: center;
justify-items: flex-start;
padding-top: 0.2rem;
padding-bottom: 0.17rem;
}
.content .list .list_t .room {
width: 0.24rem;
height: 0.22rem;
margin-left: 0.24rem;
margin-right: 0.06rem;
}
.content .list .list_t span {
font-size: 0.26rem;
color: #333333;
margin-right: 0.16rem;
}
.content .list .list_t .more {
width: 0.1rem;
height: 0.19rem;
}
.content .list ul {
padding-top: 0.29rem;
padding-bottom: 0.28rem;
border-bottom: solid 0.01rem #f2f2f2;
border-top: solid 0.01rem #f2f2f2;
}
.content .list ul li {
display: flex;
justify-content: center;
}
.content .list ul li img {
padding-left: 0.24rem;
width: 2rem;
height: 1.65rem;
margin-right: 0.36rem;
}
.content .list ul li .li_r {
width: 100%;
}
.content .list ul li .li_r .titel {
font-size: 0.28rem;
color: #333333;
width: 3.18rem;
margin-bottom: 0.14rem;
}
.content .list ul li .li_r .color {
display: flex;
justify-content: flex-start;
margin-bottom: 0.18rem;
}
.content .list ul li .li_r .color span {
font-size: 0.2rem;
color: #999999;
margin-right: 0.36rem;
}
.content .list ul li .li_r .Price {
display: flex;
justify-content: space-between;
align-items: center;
}
.content .list ul li .li_r .Price .Price_p {
font-size: 0.34rem;
color: #ea4e3d;
}
.content .list ul li .li_r .Price .Price_n {
font-size: 0.2rem;
color: #999999;
margin-right: 0.76rem;
}
.content .list .list_b {
width: 100%;
box-sizing: border-box;
}
.content .list .list_b .order {
font-size: 0.3rem;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-left: 0.3rem;
box-sizing: border-box;
}
.content .list .list_b .order span {
padding-top: 0.3rem;
padding-bottom: 0.28rem;
margin-right: 0.31rem;
width: 1.6rem;
}
.content .list .list_b .order input {
width: 100%;
}
.content .list .list_b .discount {
font-size: 0.24rem;
color: #333333;
border-bottom: solid 0.01rem #f2f2f2;
border-top: solid 0.01rem #f2f2f2;
padding-left: 0.3rem;
}
.content .list .list_b .discount .discount_t {
display: flex;
justify-content: space-between;
padding-top: 0.22rem;
margin-right: 0.26rem;
}
.content .list .list_b .discount .discount_t .jiage{
color: #f09c48;
}
.content .list .list_b .discount .discount_t span {
}
.content .list .list_b .discount .discount_b {
display: flex;
justify-content: space-between;
margin-bottom: 0.16rem;
margin-top: 0.24rem;
}
.content .list .list_b .discount .discount_b span {
margin-right: 0.23rem;
}
.content .list .list_b .gender {
font-size: 0.3rem;
color: #333333;
display: flex;
justify-content: space-between;
margin-right: 0.26rem;
padding-top: 0.3rem;
padding-bottom: 0.25rem;
padding-left: 0.3rem;
}
.content .list .list_b .gender .zongjia {
font-size: 0.34rem;
color: #ea4e3d;
}
.footer {
width: 100%;
height: 1rem;
position: fixed;
left: 0;
bottom: 0;
background-color:#ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 0.22rem;
box-sizing: border-box;
z-index: 999;
}
.footer .footer_sum {
font-size: 0.26rem;
color: #c6c6c6;
}
.footer .heji {
font-size: 0.26rem;
color: #999999;
margin-left: 0.14rem;
margin-right: 0.27rem;
}
.footer .footer_m {
font-size: 0.24rem;
color: #000000;
font-weight: 600;
}
.footer .monery {
font-size: 0.3rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.007rem;
color: #000000;
margin-left: 0.06rem;
margin-right: 0.42rem;
font-weight: 600;
}
.footer .sum {
font-size: 0.28rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.24rem;
}

View File

@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="./22.css">
<script src="../js/rem.js"></script>
</head>
<body>
<div class="header line">
<img src="./img/fanhui.png" alt="">
<span>填写订单</span>
<div></div>
</div>
<div class="content">
<div class="address">
<div class="address_t">
<div class="address_t_l">
<div class="top">
<span class="name">张晓明</span>
<span>186****0019</span>
</div>
<div class="down">
上海市黄浦区中山南路128号千古美城1楼1210室
</div>
</div>
<img src="./img/more.png" alt="">
</div>
<img src="./img/bule.png" alt="">
</div>
<div class="select">
<div class="select_l">选择支付方式</div>
<div class="select_r">
<span>在线支付</span>
<img src="./img/dian.png" alt="">
</div>
</div>
<div class="list">
<div class="list_t">
<img class="room" src="./img/room.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/more.png" alt="">
</div>
<ul>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
</ul>
<div class="list_b">
<div class="order">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount">
<div class="discount_t">
<span>优惠抵用</span>
<span class="jiage">¥5</span>
</div>
<div class="discount_b">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="gender">
<span>商品金额</span>
<span class="zongjia">¥155.00</span>
</div>
</div>
</div>
<div class="list">
<div class="list_t">
<img class="room" src="./img/room.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="more" src="./img/more.png" alt="">
</div>
<ul>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
<li>
<img src="./img/chanping.png" alt="">
<div class="li_r">
<div class="titel">真丝连衣裙2019春夏新款
杭州大牌气质修……</div>
<div class="color">
<span>颜色:黑白</span>
<span>尺码:L</span>
</div>
<div class="Price">
<span class="Price_p">¥160.00</span>
<span class="Price_n">X1</span>
</div>
</div>
</li>
</ul>
<div class="list_b">
<div class="order">
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount">
<div class="discount_t">
<span>优惠抵用</span>
<span class="jiage">¥5</span>
</div>
<div class="discount_b">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="gender">
<span>商品金额</span>
<span class="zongjia">¥315.00</span>
</div>
</div>
</div>
</div>
<div class="footer">
<span class="footer_sum">共3件,</span>
<span class="heji">合计:</span>
<span class="footer_m">¥</span>
<span class="monery">5999.00</span>
<div class="sum">结算(2)</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,313 @@
body {
/* width: 100%;
background: url(./img/backgruod.png);
background-size: 100%; */
}
.header {
height: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
padding: 0 0.37rem;
box-sizing: border-box;
}
.header .header_l {
width: 0.42rem;
height: 0.42rem;
}
.header .header_c {
display: flex;
justify-content: flex-start;
}
.header .header_c li {
font-size: 0.3rem;
color: #fefefe;
text-shadow: 0.01rem 0.01rem white;
letter-spacing: 0.04rem;
}
.header_c .active{
position: relative;
}
.header_c .active::after{
content: "";
position: absolute;
height: 0.03rem;
width: 0.4rem;
background: white;
bottom: -0.12rem;
left: 50%;
transform: translateX(-50%);
}
.header .header_r {
width: 0.43rem;
height: 0.43rem;
}
.content {
position: relative;
height: calc(100vh - 1rem);
}
.content_img {
width: 100%;
height: calc(100vh - 1rem);
object-fit: cover;
}
.content .content_l {
position: absolute;
bottom: 0;
left: 0.3rem;
}
.content .content_l .address {
display: flex;
align-items: center;
}
.content .content_l .address img {
width: 0.28rem;
height: 0.26rem;
/* margin-left: 0.37rem; */
margin-right: 0.1rem;
}
.content .content_l .address .didian {
font-size: 0.26rem;
color: #ffc600;
}
.content .content_l .shopping {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
width: 5.85rem;
height: 1.68rem;
/* margin-left: 0.3rem; */
margin-top: 0.22rem;
}
.content .content_l .shopping img {
width: 1.48rem;
height: 1.48rem;
margin-left: 0.09rem;
}
.content .content_l .shopping .shopping_l {
margin-left: 0.15rem;
position: relative;
flex: 1;
}
.content .content_l .shopping .shopping_l .title{
font-size: 0.28rem;
color: #333333;
margin-top: 0.28rem;
}
.content .content_l .shopping .shopping_l .jiage{
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 0.18rem;
margin-bottom: 0.23rem;
}
.content .content_l .shopping .shopping_l .jiage span{
font-size: 0.28rem;
color: #333333;
}
.content .content_l .shopping .shopping_l .jiage .jingxuan{
font-size: 0.2rem;
color: #fffefe;
width: 0.6rem;
height: 0.24rem;
background-color: #ea4e3d;
border-radius: 0.12rem;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.03rem;
}
.content .content_l .shopping .shopping_l .sell {
font-size: 0.2rem;
color: #626262;
margin-bottom: 0.17rem;
}
.content .content_l .shopping .shopping_l .tubiao {
width: 0.46rem;
height: 0.46rem;
background-color: #333333;
border-radius: 100%;
position: absolute;
bottom: 0.17rem;
right: 0.34rem;
display: flex;
align-items: center;
}
.content .content_l .shopping .shopping_l .tubiao img {
width: 0.27rem;
height: 0.27rem;
}
.content .content_l .music {
display: flex;
align-items: center;
margin-top: 0.27rem;
}
.content .content_l .music img {
width: 0.27rem;
height: 0.28rem;
/* margin-left: 0.3rem; */
margin-right: 0.13rem;
}
.content .content_l .music .music_name{
font-size: 0.24rem;
color: #ffffff;
}
.content .content_r {
position: absolute;
z-index: 1;
bottom: 0.14rem;
right: 0.19rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0;
}
.content .content_r li {
font-size: 0.2rem;
color: #ffffff;
}
.content .content_r .touxiang {
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.content .content_r .touxiang .tou {
width: 0.96rem;
height: 0.97rem;
border: 0.03rem solid #ffffff;
border-radius: 50%;
}
.content .content_r .touxiang .add {
width: 0.34rem;
height: 0.33rem;
border-radius: 50%;
background-color: #ea4e3d;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0.3rem;
bottom: -7px;
}
.content .content_r .touxiang .add img{
width: 0.23rem;
height: 0.23rem;
}
.content .content_r .dianzan {
text-align: center;
}
.content .content_r .dianzan img {
width: 0.68rem;
height: 0.63rem;
margin-top: 0.35rem;
}
.content .content_r .dianzan p {}
.content .content_r .share {
text-align: center;
}
.content .content_r .share img {
width: 0.67rem;
height: 0.8rem;
margin-bottom: 0.08rem;
margin-top: 0.2rem;
}
.content .content_r .share p {}
.content .content_r .pinglun {
text-align: center;
}
.content .content_r .pinglun img {
width: 0.7rem;
height: 0.7rem;
margin-top: 0.2rem;
}
.content .content_r .pinglun p {
margin-top: 0.13rem;
}
.content .content_r .shopping {
text-align: center;
}
.content .content_r .shopping img {
width: 0.61rem;
height: 0.61rem;
margin-top: 0.28rem;
}
.content .content_r .shopping p {
margin-top: 0.08rem;
}
.footer{
height: 1rem;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: #141414;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.39rem;
padding-right: 0.54rem;
box-sizing: border-box;
z-index: 999;
}
.footer li {
font-size: 0.24rem;
color: #ffffff;
}
.footer .active{
font-size: 0.3rem;
color: #ffffff;
position: relative;
}
.footer .active::after{
content: "";
position: absolute;
height: 0.03rem;
width: 0.4rem;
background: white;
bottom: -0.12rem;
left: 50%;
transform: translateX(-50%);
}

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>39</title>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./39.css">
<script src="./js/rem.js"></script>
</head>
<body>
<div class="header">
<img class="header_l" src="./img/sao.png" alt="">
<ul class="header_c">
<li class="active" >推荐</li>
<li>关注</li>
<li>直播</li>
</ul>
<img class="header_r" src="./img/search.png" alt="">
</div>
<div class="content">
<img class="content_img" src="./img/backgruod.png" alt="">
<div class="content_l">
<div class="address">
<img src="./img/shop.png" alt="">
<div class="didian"> 美林美妆合肥店 >7KM</div>
</div>
<div class="shopping">
<img src="./img/shangping.png" alt="">
<div class="shopping_l">
<div class="title">夏季网纱半身裙中长款纱……</div>
<div class="jiage">
<span>¥68.00</span>
<div class="jingxuan">精选</div>
</div>
<div class="sell">
已卖1020
</div>
<div class="tubiao">
<img src="./img/car.png" alt="">
</div>
</div>
</div>
<div class="music">
<img src="./img/music.png" alt="">
<div class="music_name">你像花儿一样美(DJ)版</div>
</div>
</div>
<ul class="content_r">
<li class="touxiang">
<img class="tou" src="./img/tou.png" alt="">
<div class="add">
<img src="./img/jia.png" alt="">
</div>
</li>>
<li class="dianzan">
<img src="./img/heart.png" alt="">
<p>71.1W</p>
</li>
<li class="share">
<img src="./img/share.png" alt="">
<p>分享</p>
</li>
<li class="pinglun">
<img src="./img/comment.png" alt="">
<p>评论</p>
</li>
<li class="shopping">
<img src="./img/shopping.png" alt="">
<p>购物袋</p>
</li>
</ul>
</div>
<ul class="footer">
<li class="active">
首页
</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,24 @@
/* 清除浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
html {
font-size: 0;
}
li {
list-style: none;
}
input {
border: none;
outline: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -0,0 +1,12 @@
; (function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

View File

@@ -0,0 +1,27 @@
/* 公共使用率高的css代码 */
.themeColor {
color: #969696;
}
.line::after {
content: " ";
position: absolute;
width: 100%;
bottom: 0;
height: 1px;
left: 0;
background: #cfcfcf;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.line::after {
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.line::after {
transform: scaleY(0.33);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB