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,243 @@
body {
background: #f2f2f2;
}
.header {
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
background: white;
height: 0.9rem;
}
.header .top {
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
}
.header .top img {
width: 0.3rem;
height: 0.45rem;
}
.header .top span {
font-size: 0.44rem;
}
.content .don {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 0.5px solid #0000001a;
background-image: url('../imgs/img图片/zzz.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 10px
}
.content .don .text {
padding-left: 0.3rem;
}
.content .don .text span {
font-size: 0.44rem;
}
.content .don .text p {
font-size: 0.28rem;
margin-top: 0.04rem;
}
.baiyou {
padding-right: 0.3rem;
}
.mode{
font-size: 0.28rem;
display: flex;
justify-content: space-between;
height: 0.84rem;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
background: white;
margin-top: 0.2rem;
}
.subject{}
.subject .name{
display: flex;
height: 0.62rem;
align-items: center;
justify-content: flex-start;
background: white;
padding-left: 0.3rem;
margin-top: 0.2rem;
}
.subject .name .fangzi{
width: 0.4rem;
height: 0.4rem;
}
.subject .name .wenzi{
padding-right: 0.1rem;
padding-left: 0.1rem;
color: #000000ba;
font-size: .28rem;
}
.subject .name .heiyou{
width: 0.18rem;
height: 0.28rem;
}
.zhuti{
font-size: 0.28rem;
display: flex;
height: 2.22rem;
background: white;
justify-content: flex-start;
align-items: center;
border-top: .01rem solid #0000001a;
}
p{
font-size: .28rem;
}
.zhuti img{
width: 2rem;
height: 1.64rem;
object-fit: cover;
padding-left: 0.3rem;
padding-right: 0.36rem;
}
.zhuti .zizizi{
}
p .one{
font-size: 0.28rem;
}
p .two{
font-size: 0.28rem;
}
.three{
font-size: 0.2rem !important;
color: #999999 !important;
}
.zhuti .zizizi .big{
display: flex;
justify-content: space-between;
width: 135%;
}
.zhuti .zizizi .big .bigg{
color: red;
font-size: 0.48rem;
}
.zhuti .zizizi .big .sme{
font-size: 0.2rem;
color: #999;
}
.subject .remarks{
height: 0.88rem;
background: white;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 0.34rem;
padding-left: 0.3rem;
border-top: 0.5px solid #0000001a;
}
.subject .remarks span{
font-size: 0.26rem;
color: #aaaaaa;
padding-left: 0.31rem;
}
.youhui{
border-top: 0.5px solid #0000001a;
height: 1.08rem;
background: white;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
.xxx{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.youhui_a{
display: flex;
justify-content: space-between;
}
.youhui_b{
display: flex;
justify-content: space-between;
}
.jiage{
font-size: 0.24rem;
color: #f09c48;
}
.money{
display: flex;
justify-content: space-between;
background-color: white;
border-top: 0.5px solid #0000001a;
height: 0.84rem;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
}
.money .six{
font-size: 0.3rem;
color: #333333;
}
.money .seven{
color: #ea4e3d;
font-size: 0.34rem;
}
.footer{
height: 1rem;
background: white;
display: flex;
justify-content: flex-end;
align-items: center;
border-top: 0.5px solid #0000001a;
box-sizing: border-box;
}
.footer .ttt{
display: flex;
justify-content: center;
padding-right: 0.42rem;
}
.footer .ttt .eight{
font-size: 0.26rem;
color: #999999;
}
.footer .ttt .nine{
font-size: 0.26rem;
color: #999999;
}
.footer .ttt .ten{
font-size: 0.3rem;
color: #000000;
font-weight: 600;
}
.footer .buttom{
font-size: 0.28rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
display: flex;
justify-content: center;
align-items: center;
}

View File

@@ -0,0 +1,165 @@
<!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>Document</title>
<script src="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./22.css">
</head>
<body>
<div class="header">
<div class="top">
<img src="../imgs/img图片/返回.png" alt="">
<span>填写订单</span>
<div></div>
</div>
</div>
<!-- 中间 -->
<div class="content">
<div class="don">
<div class="text">
<span>张晓明</span><span>186****0019</span>
<p>上海市黄浦区中山南路128号千古美城1楼1210室</p>
</div>
<img class="baiyou" src="../imgs/img图片/baiyou.png" alt="">
</div>
<div class="mode">
<div>选择支付方式</div>
<div>在线支付
<img src="../imgs/img图片/shenglve.png" alt="">
</div>
</div>
<!-- 等会复制 -->
<ul class="subject">
<!-- 店铺名字 -->
<div class="top">
<div class="name">
<img class="fangzi" src="../imgs/img图片/fangz.png" alt="">
<div class="wenzi">路易斯女装旗舰店</div>
<img class="heiyou" src="../imgs/img图片/heiyou.png" alt="">
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
</div>
<div class="donn">
<p class="remarks">
订单备注
<span>有什么想对商家留言的可以在这里说</span>
</p>
<div class="youhui">
<ul class="youhui_a">
<li class="xxx">
<p>优惠抵用</p>
<p class="jiage">-¥5</p>
</li>
</ul>
<ul class="youhui_b">
<li class="xxx">
<p>快递费用</p>
<p>免费包邮</p>
</li>
</ul>
</div>
<div class="money">
<p class="six">商品金额</p>
<p class="seven">¥155.00</p>
</div>
</div>
</ul>
<ul class="subject">
<!-- 店铺名字 -->
<div class="top">
<div class="name">
<img class="fangzi" src="../imgs/img图片/fangz.png" alt="">
<div class="wenzi">路易斯女装旗舰店</div>
<img class="heiyou" src="../imgs/img图片/heiyou.png" alt="">
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
<div class="zhuti">
<img src="../imgs/img图片/nvnv.png" alt="">
<div class="zizizi">
<p class="one">真丝连衣裙2019春夏新款</p>
<p class="two"> 杭州大牌气质修……</p>
<p class="three">颜色:黑白 尺码:L</p>
<div class="big">
<span class="bigg">¥160.00</span>
<span></span>
<span class="sme">X1</span>
</div>
</div>
</div>
</div>
<div class="donn">
<p class="remarks">
订单备注
<span>有什么想对商家留言的可以在这里说</span>
</p>
<div class="youhui">
<ul class="youhui_a">
<li class="xxx">
<p>优惠抵用</p>
<p class="jiage">-¥5</p>
</li>
</ul>
<ul class="youhui_b">
<li class="xxx">
<p>快递费用</p>
<p>免费包邮</p>
</li>
</ul>
</div>
<div class="money">
<p class="six">商品金额</p>
<p class="seven">¥155.00</p>
</div>
</div>
</ul>
</div>
<!-- 结尾 -->
<div class="footer">
<div class="ttt">
<p class="eight">共3件,</p>
<p class="nine">合计:</p>
<p class="ten">¥ 5999.00</p>
</div>
<div class="buttom">结算(2)</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,149 @@
body {
background-image: url("../imgs/img图片/beijing.png");
background-size: 8.06rem 14.1rem; */
}
.aaa {
width: 100vw;
height: 100vh;
background-color: #0e0e0e96;
position: fixed;
}
.head {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: 0.37rem;
padding-right: 0.37rem;
box-sizing: border-box;
z-index: 2;
margin-top: 0.64rem;
}
.bbb {
position: relative;
}
.bbb::after {
content: "";
width: 0.4rem;
height: 0.02rem;
background-color: red;
position: absolute;
left: calc((100% - 0.4rem)/2);
bottom: 0.4rem;
}
.head .sys {
width: 0.42rem;
height: 0.42rem;
}
.head ul {
display: flex;
}
.head ul li {
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.2rem;
}
.head .ss {
width: 0.43rem;
height: 0.43rem;
}
/* 中间 */
.content{
height: 10.34rem;
width: 100%;
background: #1a191e;
position: fixed;
bottom: 0;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.content .title{
display: flex;
justify-content: space-between;
position: relative;
padding-left: 0.3rem;
padding-right: 0.3rem;
margin-top: 0.37rem;
}
.content .title span{
font-size: 0.28rem;
color: #79828e;
}
.content .title img{
width: 0.34rem;
height: 0.34rem;
background: white;
}
.chongfu{
display: flex;
height: 1.16rem;
margin-top: 0.2rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
justify-content: space-between;
}
.chongfu img{
width: 0.7rem;
height: 0.7rem;
}
.chongfu .text{}
.chongfu .text p{
color: #79828e;
font-size: 0.28rem;
}
.chongfu .text span{
white-space: pre-line;
color: #ffffff;
font-size: 0.28rem;
}
.heart{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.heart img{
width: 0.37rem;
height: 0.34rem;
}
.heart span{
color: #79828e;
font-size: 0.26rem;
}
.down{
margin-top: 20px;
height: 0.46rem;
display: flex;
justify-content: space-between;
padding-left: 0.23rem;
padding-right: 0.2rem;
}
.down .ffff{
border-bottom: 1px solid white;
width: 90%;
}
.down .ffff img{
width: 0.25rem;
height: 0.31rem;
padding-right: 0.2rem;
}
.down .ffff span{
font-size: 0.26rem;
color: #79828e;
}
.down img{
width: 0.45rem;
height: 0.46rem;
}

View File

@@ -0,0 +1,118 @@
<!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>Document</title>
<script src="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./38.css">
</head>
<body>
<div class="aaa"></div>
<!-- 头部 -->
<div class="head">
<img class="sys" src="../imgs/img图片/扫一扫.png" alt="">
<ul>
<li class="bbb">
推荐
</li>
<li>
关注
</li>
<li>
直播
</li>
</ul>
<img class="ss" src="../imgs/img图片/搜索.png" alt="">
</div>
<!-- 中间黑色的 -->
<div class="content">
<div class="title">
<span>652条评论</span>
<img src="../imgs/img图片/xx.png" alt="">
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/redx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="chongfu">
<img src="../imgs/img图片/tx.png" alt="">
<div class="text">
<p>小千</p>
<span>这个是真的很不错的地方,下次旅游也
要过去玩一玩。</span>
</div>
<div class="heart">
<img src="../imgs/img图片/wx.png" alt="">
<span>652</span>
</div>
</div>
<div class="down">
<div class="ffff">
<img src="../imgs/img图片/pl.png" alt="">
<span>发表评论</span>
</div>
<img src="../imgs/img图片/xiaolian.png" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,245 @@
.head {
position: fixed;
width: 100%;
height: 0.9rem;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding-left: 0.37rem;
padding-right: 0.37rem;
box-sizing: border-box;
z-index: 2;
align-items: center;
}
.bbb {
position: relative;
}
.bbb::after {
content: "";
width: 0.4rem;
height: 0.02rem;
background-color: red;
position: absolute;
left: calc((100% - 0.4rem)/2);
top: 0.4rem;
}
.head .sys {
width: 0.42rem;
height: 0.42rem;
}
.head ul {
display: flex;
}
.head ul li {
font-size: 0.3rem;
color: #fefefe;
margin-right: 0.2rem;
}
.head .ss {
width: 0.43rem;
height: 0.43rem;
}
/* 中间 */
.content {
width: 100%;
height: calc(100vh - 1rem);
position: relative;
}
.aaa{
width:100%;
height: 100%;
}
.aaa img{
width: 100%;
height: 100%;
}
.bbbb{
background: #0e0e0e96;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.content .content-l {
position: absolute;
bottom: 0;
left: 0.3rem;
}
.content .content-l .text_top {
display: flex;
}
.content .content-l .text_top img {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.16rem;
}
.content .content-l .text_top span {
color: yellow;
font-size: 0.32rem;
}
.content .commodity {
width: 5.58rem;
height: 1.68rem;
background-color: white;
border: 1px solid black;
display: flex;
align-items: center;
padding-left: 0.06rem;
box-sizing: border-box;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.content .commodity img {
width: 1.48rem;
height: 1.48rem;
margin-right: 0.3rem;
}
.content .commodity .words {}
.content .commodity .words .one {
font-size: 0.28rem;
}
.content .commodity .words .two {
font-size: 0.28rem
}
.content .commodity .words .three {
font-size: 0.2rem
}
.content .commodity .words .three img {
width: 0.5rem;
height: 0.5rem;
background-color: black;
margin-left: 1.74rem;
}
.content .music {
}
.content .content-l .music img {
width: 0.27rem;
height: 0.28rem;
margin-right: 0.14rem;
}
.content .content-l .music span {
font-size: 0.32rem;
color: white;
margin-left: 0.2rem;
}
.content-r {
position: absolute;
right: 0;
margin-right: 0.4rem;
font-size: .3rem;
color: white;
bottom: 0;
}
.content-r p {
font-size: .32rem;
}
.six {
position: relative;
}
.six img {
width: 0.9rem;
height: 0.9rem;
object-fit: cover;
border-radius: 50%;
margin-bottom: 0.4rem;
}
.six .jiahao {
width: 0.36rem;
height: 0.36rem;
left: 0.28rem;
bottom: -0.12rem;
position: absolute;
background: red;
}
.seven,
.eight,
.nine,
.ten {
margin-bottom: 0.2rem;
}
.seven img {
width: 0.9rem;
height: 0.9rem;
}
.eight img {
width: 0.9rem;
height: 0.9rem;
}
.nine img {
width: 0.9rem;
height: 0.9rem;
}
.ten img {
width: 0.9rem;
height: 0.9rem;
}
/* 尾部 */
.footer {
width: 100vw;
height: 1rem;
position: fixed;
bottom: 0;
font-size: .28rem;
display: flex;
align-items: center;
justify-content: space-around;
color: white;
background-color: #0e0e0ede;
}
.footer li {
font-size: 0.35rem;
}
.footer li:first-child {
font-size: 0.35rem;
}
.ccc {
position: relative;
}
.ccc::after {
content: "";
width: 0.6rem;
height: 0.02rem;
background-color: white;
position: absolute;
left: calc((100% - 0.6rem)/2);
bottom: -0.1rem;
}

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>Document</title>
<script src="../rem.js"></script>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./39.css">
</head>
<body>
<div class="aaa"></div>
<!-- 头部 -->
<div class="head">
<img class="sys" src="../imgs/img图片/扫一扫.png" alt="">
<ul>
<li class="bbb">
推荐
</li>
<li>
关注
</li>
<li>
直播
</li>
</ul>
<img class="ss" src="../imgs/img图片/搜索.png" alt="">
</div>
<!-- 中间 -->
<div class="content">
<div class="aaa">
<img src="../imgs/img图片/beijing.png" alt="000">
</div>
<div class="bbbb"></div>
<div class="content-l">
<div class="text_top">
<img src="../imgs/img图片/huangfangzi.png">
<span>美林美妆合肥店 >7KM</span>
</div>
<div class="commodity">
<img src="../imgs/img图片/shangpin.png">
<div class="words">
<p class="one">夏季网纱半身裙中长款纱……</p>
<p class="two">¥68.00</p>
<div class="three">已卖1020
<img src="../imgs/img图片/car.png" alt="">
</div>
</div>
</div>
<div class="music">
<img src="../imgs/img图片/yinfu.png">
<span>你像花儿一样美 (DJ) 版</span>
</div>
</div>
<!-- 中右 -->
<div class="content-r">
<div class="six">
<img src="../imgs/img图片/touxiang.png" alt="">
<img class="jiahao" src="../imgs/img图片/jiahao.png" alt="">
</div>
<div class="seven">
<img src="../imgs/img图片/心.png" alt="">
<p>71.1W</p>
</div>
<div class="eight">
<img src="../imgs/img图片/分享.png" alt="">
<p>分享</p>
</div>
<div class="nine">
<img src="../imgs/img图片/评论.png" alt="">
<p>评论</p>
</div>
<div class="ten">
<img src="../imgs/img图片/5购物袋2.png" alt="">
<p>购物袋</p>
</div>
</div>
</div>
<!-- 尾部 -->
<ul class="footer">
<li class="ccc">首页</li>
<li>好友</li>
<li>圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,18 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
font-size: 0;
}
li {
list-style: none;
}