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,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,112 @@
.header{
background-color: #fff;
display: flex;
justify-content:flex-start;
padding-left: 0.21rem;
padding-top: 0.3rem;
font-size: 0;
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
}
.header img{
width: 0.2rem;
height: 0.35rem;
}
.content{
padding:0 0.6rem;
font-size: 0;
margin-top: 0.65rem;
}
.content h2{
font-size: 0.54rem;
color: #000000;
margin-top: 2.16rem;
margin-bottom: 1.25rem;
}
.xj{
}
.xj li{/*问题1 li的宽高问题*/
display: flex;
width: 100%;
align-items:center;
position: relative;
margin-bottom: 0.73rem;
padding-left: 0.05rem;
}
.xj li::after{
content: "";
width: 100%;
height: 0.01rem;
background-color: #d9e2e9;
position: absolute;
right: 0;
bottom: -0.24rem;
}
.xj li img {
width: 0.3rem;
height: 0.42rem;
padding-right: 0.35rem;
}
.xj li input{
font-size: 0.28rem;
color: #b6c2ce;
width: 100%;
}
.yanz{
display: flex;
align-items: center;
box-sizing: border-box;
justify-content:space-between;
height: 0.42rem;
}
.ccc{
display: flex;
align-items: center;
}
.yanz span{
width: 1.38rem;
height: 0.52rem;
background-color: #f2f6f9;
border-radius: 0.26rem;
font-size: 0.24rem;
color: #555555;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content:center;
}
.xj li:last-child{
margin-bottom: 0.38rem;
}
.xuanzhong{
padding-left: 0.05rem;
margin-bottom: 0.53rem;
}
.xuanzhong img{
width: 0.18rem;
height: 0.18rem;
}
.zi_1{font-size: 0.2rem;
color: #333333;
padding-left: 0.12rem;
}
.zi_2{
font-size: 0.2rem;
color: #79c9ff;
}
.anniu{
background-color: #5697f4;
border-radius: 0.49rem;
padding: 0.33rem 2.48rem;
font-size: 0.3rem;
color: #ffffff;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,53 @@
<!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="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/left.png" alt="">
</div>
<div class="content">
<h2>注册</h2>
<ul class="xj">
<li>
<img src="./img/sj.png" alt="">
<input type="text" placeholder="填写手机号">
</li>
<li class="yanz">
<div class="ccc">
<img src="./img/sj.png" alt="">
<input type="text" placeholder="填写手机号">
</div>
<span>验证码</span>
</li>
<li>
<img src="./img/sj.png" alt="">
<input type="text" placeholder="填写手机号">
</li>
<li>
<img src="./img/sj.png" alt="">
<input type="text" placeholder="填写手机号">
</li>
</ul>
<div class="xuanzhong">
<img src="./img/right.png" alt="">
<span class="zi_1">我已阅读并同意</span>
<span class="zi_2">《用户协议和隐私协议》</span>
</div>
<div class="anniu">
立即注册
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,21 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}
body{
background: #f3f2f7;
}

View File

@@ -0,0 +1,243 @@
.header{/*在父元素上加margin左右超过父容器*/
font-size: 0;
width: 100%;
display: flex;
align-items:center;
justify-content:space-between;
padding-top: 0.42rem;
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
background: #f3f2f7;
padding-bottom: 5px;
}
.left{
display: flex;
align-items:center;
padding-left: 0.24rem;
}
.left .left_1{
width: 0.2rem;
height: 0.38rem;
padding-right: 0.3rem;
}
.left .left_2{
width: 0.48rem;
height: 0.48rem;
}
.middle{
display: flex;
align-items:center;
}
.middle span{
font-size: 0.28rem;
color: #000000;
padding-right: 0.12rem;
}
.middle img{
width: 0.78rem;
height: 0.32rem;
}
.right{
display: flex;
align-items:center;
}
.right .right_1{
width: 0.42rem;
height: 0.35rem;
padding-right: 0.38rem;
}
.right_wz{
position: relative;
}
.right_wz span{
font-size: 0.2rem;
color: #ffffff;
width: 0.25rem;
height: 0.25rem;
background-color: #ea4e3d;
border-radius: 100%;
position: absolute;
text-align: center;
line-height: 0.25rem;
top: -0.14rem;
right: 0.24rem;
}
.right .right_2{
width: 0.37rem;
height: 0.36rem;
padding-right: 0.25rem;
}
/*中间*/
.content{
background: #f3f2f7;/*背景色*/
margin-top: 0.9rem;
font-size: 0;
margin-left: 0.24rem;
margin-right: 0.24rem;
}
/*顶部文字布局*/
.content_top{
margin-top: 1.1rem;/*数值过大*/
background: url(../img/bj.png);
width: 7.02rem;
height: 1.8rem;
}
.content_wz{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content:space-between;
}
.content_wz li{
text-align: center;
padding-left: 0.37rem;
padding-right: 0.37rem;
}
.content_wz_1{
font-size: 0.34rem;
color: #ffffff;
}
.content_wz_2{
font-size: 0.24rem;
color: #ffffff;
}
/*直播*/
.live{
width: 7.02rem;
height: 0.78rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin-top: 0.24rem;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.19rem;
padding-right: 0.17rem;
box-sizing: border-box;
}
.live_left{
display: flex;
align-items: center;
}
.live_left img{
width: 0.41rem;
height: 0.39rem;
padding-right: 0.09rem;
}
.live_left span{
font-size: 0.32rem;
color: #1a1a1a;
}
.live_right{
display: flex;
align-items: center;
}
.live_right img{
width: 0.12rem;
height: 0.21rem;
}
.live_right span{
font-size: 0.28rem;
color: #0079f1;
padding-right: 0.11rem;
}
/*店铺部分*/
.shop{/*我h2没有话div,没有设置居中挤下去的*/
width: 7.02rem;
height: 2.75rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin-top: 0.24rem;
}
.shop h2{
font-size: 0.3rem;
color: #010101;
padding-top: 0.34rem;
padding-left: 0.34rem;
}
.shop_1{
display: flex;
align-items: center;
padding-top: 0.37rem;
justify-content: space-between;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.shop_1 li{
text-align: center;
}
.shop_1 li img{/*图片尺寸问题*/
width: 0.57rem;
height: 0.43rem;
margin-bottom: 0.3rem;
}
.shop_1 .yyzh{
width: 0.58rem;
height: 0.56rem;
margin-bottom: 0.15rem;
}
.shop_1 .mz{
font-size: 0.24rem;
color: #333333;
}
.shop_1 .yzz{
font-size: 0.22rem;
color: #abb1bc;
}
.shop_1 .wzz{
color: #e93323;
font-size: 0.22rem;
}
/*管理部分*/
.manage{
width: 7.02rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin-top: 0.23rem;
}
.manage h2{
font-size: 0.3rem;
color: #010101;
padding-top: 0.36rem;
padding-left: 0.34rem;
}
.layout{
display: flex;
margin-top: 0.54rem;
flex-wrap:wrap
}
.layout li{
text-align: center;
padding-left: 0.34rem;
padding-bottom: 0.31rem;
width: 0.96rem;/*设置宽度不知道对不对*/
}
.layout li p{
font-size: 0.24rem;
color: #333333;
margin-top: 0.36rem;
}
/*店铺营销*/
.market{
width: 7.02rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin-top: 0.24rem;
}
.market h2{
padding-left: 0.34rem;
padding-top: 0.34rem;
font-size: 0.3rem;
color: #010101;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1022 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,168 @@
<!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="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="left">
<!--左-->
<img class="left_1" src="./img/left.png" alt="">
<img class="left_2" src="./img/urzr.png" alt="">
</div>
<div class="middle">
<!--中-->
<span>新手体验店</span>
<img src="./img/ing.png" alt="">
</div>
<div class="right">
<!--右-->
<div class="right_wz">
<!--文子-->
<img class="right_1" src="./img/xinxi.png" alt="">
<span>1</span>
</div>
<img class="right_2" src="./img/sz.png" alt="">
</div>
</div>
<div class="content">
<div class="content_top"><!--上半部分-->
<ul class="content_wz">
<li>
<p class="content_wz_1">0</p>
<p class="content_wz_2">关注人数</p>
</li>
<li>
<p class="content_wz_1">1</p>
<p class="content_wz_2">商品数</p>
</li>
<li>
<p class="content_wz_1">0</p>
<p class="content_wz_2">粉丝数</p>
</li>
<li>
<p class="content_wz_1">0</p>
<p class="content_wz_2">浏览量</p>
</li>
</ul>
</div>
<div class="live"><!--直播部分-->
<div class="live_left">
<img src="./img/live.png" alt="">
<span>我要直播</span>
</div>
<div class="live_right">
<span>去开启直播</span>
<img src="./img/right.png" alt="">
</div>
</div>
<div class="shop"><!--店铺部分-->
<h2>店铺资质认证</h2>
<ul class="shop_1">
<li>
<img class="yyzh" src="./img/yyzh.png" alt="">
<p class="mz">营业执照</p>
<p class="yzz">已认证</p>
</li>
<li>
<img src="./img/sfz.png" alt="">
<p class="mz">身份证</p>
<p class="wzz">未认证</p>
</li>
<li>
<img src="./img/yhk.png" alt="">
<p class="mz">银行卡</p>
<p class="wzz">未认证</p>
</li>
</ul>
</div>
<div class="manage"><!--管理部分-->
<h2>店铺管理</h2>
<ul class="layout">
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>商品管理</p>
</li>
</ul>
</div>
<div class="market"><!--店铺营销-->
<h2>店铺营销</h2>
<ul class="layout">
<li>
<img src="./img/shop_1.png" alt="">
<p>优惠券</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>优惠券</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>优惠券</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>优惠券</p>
</li>
<li>
<img src="./img/shop_1.png" alt="">
<p>优惠券</p>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,265 @@
/*顶部*/
/*顶部菜单*/
.header{
height: 4.91rem;
background-color: #909090;
font-size: 0;
}
.header_top{
display: flex;
align-items: center;
justify-content:space-between;
padding:0.38rem 0.3rem;
box-sizing: border-box;
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
width: 100%;
background-color: #909090;
}
.header_top img{
width: 0.19rem;
height: 0.34rem;
}
.header_top span{
font-size: 0.34rem;
color: #ffffff;
}
.header_top .kong{
width: 0.19rem;
height: 0.34rem;
}
/*头像*/
.user{
width: 5.99rem;
text-align: center;
padding-left: 0.74rem;
padding-right: 0.77rem;
padding-top: 1.27rem;
}
.user_p{
width: 100%;
position: relative;
}
.user_p img{
width: 1.09rem;
height: 1.09rem;
border-radius: 100%;
}
.user_p span{
font-size: 0.2rem;
color: #fd4a75;
background-color: #ffe0e8;
border-radius: 0.03rem;
border: solid 0.01rem #fd4a75;
position: absolute;
left: 50%;
bottom: -0.16rem;
transform: translateX(-50%);
}
.user p{
padding-top: 0.24rem;
font-size: 0.24rem;
color: #ffffff;
padding-bottom: 0.38rem;
}
.user .xian{
width: 5.99rem;
height: 0.03rem;
background-color: #7e7e7e;
}
.xiaoshou{
display: flex;
justify-content: space-evenly;
margin-top: 0.43rem;
}
.xiaoshou li{
text-align: center;
}
.xiaoshou li p{
font-size: 0.34rem;
color: #ffffff;
}
.xiaoshou li span{
font-size: 0.24rem;
color: #ffffff;
}
/*底部*/
.footer{
width: 7.5rem;
height: 0.96rem;
background-color: #4799ee;
font-size: 0;
display: flex;
align-items:center;
justify-content:center;
position: fixed;
bottom: 0;
z-index: 999;
}
.footer span{
font-size: 0.34rem;
color: #ffffff;
}
/*中间*/
.content{
font-size: 0;
margin-bottom: 0.96rem;
}
/*中间_顶部*/
.content_top{
display: flex;
justify-content:space-between;
margin-top: 0.38rem;
margin-left: 0.5rem;
margin-right: 0.23rem;
margin-bottom: 0.58rem;
}
.content_top span{
font-size: 0.28rem;
color: #333333;
}
.content_top_right{
display: flex;
align-items: center;
}
.content_top_right span{
font-size: 0.24rem;
color: #5b6e95;
margin-right: 0.25rem;
}
.content_top_right img{
width: 0.15rem;
height: 0.27rem;
}
/*图片*/
.photo{}
.pgoto_1{
display: flex;
overflow-x: overlay;
}
.pgoto_1 li{
position: relative;
flex-shrink: 0;
margin-right: 0.21rem;
}
.pgoto_1 li:first-child{
margin-left: 0.24rem;
}
.pgoto_1 img{
width: 2rem;
height: 2rem;
}
.shadow{
background: url(../img/yy.png);/*阴影*/
width: 2rem;
height: 0.61rem;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.shadow span{
font-size: 0.24rem;
color: #ffffff;
}
/*横条*/
.horizontal_1{
width: 7.5rem;
height: 1.02rem;
background-color: #efeff4;
box-shadow: 0rem 0.05rem 0.095rem 0.005rem
rgba(141, 141, 141, 0.25);
opacity: 0.5;
margin-top: 0.33rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.horizontal_1 li{
text-align: center;
position: relative;
}
.horizontal_1 li::after{
content: "";
width: 0.01rem;
height: 0.46rem;
background-color: #dbdbdb;
position: absolute;
right: -0.72rem;
top: 0.18rem;
}
.horizontal_1 li:last-child::after{
content: none;
}
.horizontal_1 .top_1{
font-size: 0.34rem;
color: #000;
font-weight: 600;
}
.horizontal_1 .top_2{
font-size: 0.28rem;
color: #7e7e7e;
}
/*图片部分*/
.shop{
display: flex;
flex-wrap:wrap;
}
.shop li{
margin-left: 0.24rem;
padding-top: 0.32rem;
}
.tupian{
position: relative;
}
.tupian img{
width: 3.39rem;
height: 4.68rem;
}
.yinying{
background: url(../img/yy2.png);
width: 3.39rem;
height: 0.61rem;
opacity: 0.8;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items:flex-end;
padding-left: 0.1rem;
box-sizing: border-box;
}
.yinying span {/*在span里面加阴影*/
font-size: 0.24rem;
color: #ffffff;
}
.shop_1{
font-size: 0.28rem;
color: #2b2b2b;
margin-top: 0.2rem;
}
.shop_2{
font-size: 0.24rem;
color: #7d7d7d;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -0,0 +1,172 @@
<!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="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_top"><!--顶部菜单-->
<img src="./img/jiantou.png" alt="">
<span>新手体验店</span>
<span class="kong"></span>
</div>
<div class="user"><!--头像-->
<div class="user_p"><!--图片-->
<img src="./img/user.png" alt="">
<span>6年店</span>
</div>
<p>东莞:厂家直供一层30号</p>
<div class="xian"></div>
</div>
<ul class="xiaoshou">
<li>
<p>49.12元</p>
<span>均价</span>
</li>
<li>
<p>5757</p>
<span>出货量</span>
</li>
<li>
<p>2.09万家</p>
<span>供货店主</span>
</li>
<li>
<p>1191</p>
<span>客流量</span>
</li>
</ul>
</div>
<div class="content">
<div class="content_top"><!--上半部分-->
<span>Ta的生意圈</span>
<div class="content_top_right">
<span>200动态</span>
<img src="./img/right.png" alt="">
</div>
</div>
<div class="photo"><!--图片部分-->
<ul class="pgoto_1">
<li>
<img src="./img/tp.png" alt="">
<div class="shadow"><!--阴影-->
<span>1</span>
</div>
</li>
<li>
<img src="./img/tp.png" alt="">
<div class="shadow"><!--阴影-->
<span>1</span>
</div>
</li>
<li>
<img src="./img/tp.png" alt="">
<div class="shadow"><!--阴影-->
<span>1</span>
</div>
</li>
<li>
<img src="./img/tp.png" alt="">
<div class="shadow"><!--阴影-->
<span>1</span>
</div>
</li>
<li>
<img src="./img/tp.png" alt="">
<div class="shadow"><!--阴影-->
<span>1</span>
</div>
</li>
</ul>
</div>
<div class="horizontal"><!--横条-->
<ul class="horizontal_1">
<li>
<p class="top_1">全部</p>
<p class="top_2">32</p>
</li>
<li>
<p class="top_1">新品</p>
<p class="top_2">32</p>
</li>
<li>
<p class="top_1">爆款</p>
<p class="top_2">0</p>
</li>
</ul>
</div>
<ul class="shop">
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
<li>
<div class="tupian"><!--图片部分-->
<img class="" src="./img/shop.png" alt="">
<div class="yinying">
<span>春季女装雪纺春季女装雪纺…</span>
</div>
</div>
<p class="shop_1">¥36.00-45.00</p>
<p class="shop_2">20/03/14</p>
</li>
</ul>
</div>
<div class="footer">
<span>推广店铺二维码</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,311 @@
.header {/*头部*/
height: 0.88rem;
width: 100%;
background-color: #ffffff;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
position: fixed;
z-index: 999;
top: 0;
}
.header img{
width: 0.2rem;
height: 0.33rem;
padding-left: 0.3rem;
}
.header span{
padding-right: 0.3rem; /*问题1*/
font-size: 0.34rem;
color: #333333;
}
.footer{/*尾部*/
width: 100%;
height: 0.92rem;
background-color: #ffffff;
font-size: 0;
box-sizing: border-box;
display:flex;
align-items:center;
justify-content:flex-end;
position: fixed;
z-index: 999;
bottom: 0;
}
.footer .quantity{
font-size: 0.26rem;
color: #c6c6c6;
padding-right: 0.1rem;
}
.footer span{
font-size: 0.3rem ;
color: #000000;
padding-left: 0.06rem;
}
.footer .jiesuan{
padding: 0.2rem 0.5rem;
background-color: #5697f4;
border-radius: 0.33rem;
color: #ffffff;
font-size: 0.28rem;
margin-right: 0.24rem;
margin-left: 0.42rem;
}
/*中间*/
.content{
background-color: #f2f2f2;
margin-top: 0.88rem;
margin-bottom: 0.92rem;
}
/*收获地址*/
.address{
width: 7.5rem;
height: 1.26rem;
background-color: #ffffff;
display:flex;
align-items:center;
justify-content:space-between;
font-size: 0;
}
.address .dizi{
align-content:center
}
.address .dizi span{
font-size: 0.3rem;
color: #333333;
}
.address .dizi span:first-child{
font-weight:600;
padding-right: 0.52rem;
padding-left: 0.3rem;
}
.address .dizi p{
font-size: 0.24rem;
color: #333333;
padding-top: 0.17rem;
padding-left: 0.3rem;
}
.address img{
width: 0.14rem;
height: 0.26rem;
padding-right: 0.3rem;
}
/*支付方式*/
.payment{
width: 7.49rem;
height: 0.84rem;
background-color: #ffffff;
border-radius: 0.1rem;
margin-top: 0.19rem;
display:flex;
align-items:center;
justify-content:space-between;
font-size: 0;
}
.payment_you{
display:flex;
align-items:center;
padding-right: 0.43rem;
}
.payment p{
font-size: 0.28rem;
color: #333333;
padding-left: 0.26rem;
}
.payment_you span{
font-size: 0.28rem;
color: #333333;
}
.payment_you img{
width: 0.31rem;
height: 0.06rem;
padding-left: 0.07rem;
}
/*列表部分*/
.purchase{
font-size: 0;
}
/*店铺部分*/
.purchase_top{
width: 7.5rem;
height: 0.62rem;
background-color: #ffffff;
margin-top: 0.16rem;
display:flex;
align-items:center;
justify-content:flex-start;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
}
.purchase_top .p_zuo{
width: 0.24rem;
height: 0.22rem;
margin-left: 0.24rem;
}
.purchase_top .p_you{
width: 0.1rem;
height: 0.19rem;
}
.purchase_top span{
font-size: 0.26rem;
color: #333333;
margin-left: 0.06rem;
margin-right: 0.16rem;
}
/*窗口*/
.list{
}
.list li{
width: 7.5rem;
height: 2.22rem;
background-color: #ffffff;
display:flex;
align-items:center;
position: relative;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
}
.list li img{
padding: 0.29rem 0.36rem 0.29rem 0.24rem;
width: 2rem;
height: 1.65rem;
}
.shop_words .name{
font-size: 0.28rem;
color: #333333;
width: 80%;
}
.shop_words span{
font-size: 0.2rem;
color: #999999;
}
.price{
}
.shuliang{
position: absolute;
right: 0.76rem;
bottom: 0.47rem;
font-size: 0.2rem;
color: #999999;
}
.price .price_1{
font-size: 0.2rem;
color: #ea4e3d;
}
.price .price_2{
font-size: 0.34rem;
color: #ea4e3d;
}
.price .price_3{
font-size: 0.24rem;
color: #ea4e3d;
}
.remarks{
width: 7.5rem;
height: 0.88rem;
background-color: #ffffff;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
display:flex;
align-items:center;
}
.remarks span{
font-size: 0.3rem;
color: #333333;
margin-left: 0.3rem;
margin-right: 0.31rem;
}
.remarks input{
width: 4.15rem;
height: 0.25rem;
font-size: 0.26rem;
color: #aaaaaa;
}
.discount{
width: 7.49rem;
height: 1.08rem;
background-color: #ffffff;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
}
.discount .paper{
height: 50%;
display:flex;
align-items:center;
justify-content:space-between;
margin: 0 0.3rem;
}
.discount .paper span{
font-size: 0.24rem;
color: #333333;
}
.discount .paper .paper_1{
font-size: 0.24rem;
color: #f09c48;
}
.discount .freight{
height: 50%;
display:flex;
align-items:center;
justify-content:space-between;
}
.discount .freight span{
font-size: 0.24rem;
color: #333333;
margin: 0 0.3rem;
}
.money{
width: 7.5rem;
height: 0.84rem;
background-color: #ffffff;
border-radius: 0rem 0rem 0.1rem 0.1rem;
display:flex;
align-items:center;
justify-content:space-between;
}
.money .money_1{
font-size: 0.3rem;
margin-left: 0.3rem;
color: #333333;
}
.money .money_2{
font-size: 0.34rem;
margin-right: 0.3rem;
color: #ea4e3d;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1018 B

View File

@@ -0,0 +1,145 @@
<!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>PSD(22)</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<img src="./img/fh.png" alt="">
<span>填写订单</span>
<span></span>
</div>
<div class="content">
<div class="address">
<div class="dizi">
<span>张晓明</span>
<span>186****0019</span>
<p>上海市黄浦区中山南路128号千古美城1楼1210室</p>
</div>
<img src="./img/fhyou.png" alt="">
</div>
<div class="payment">
<p>选择支付方式</p>
<div class="payment_you">
<span>在线支付</span>
<img src="./img/dian.png" alt="">
</div>
</div>
<div class="purchase">
<div class="purchase_top"><!--店铺部分-->
<img class="p_zuo" src="./img/purchase_1.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="p_you" src="./img/purchase_2.png" alt="">
</div>
<ul class="list"><!--窗口-->
<li>
<img src="./img/product.png" alt=""><!--图片-->
<div class="shop_words">
<p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
<span>颜色:黑白</span><!--物品-->
<span>尺码:L</span><!--尺码-->
<div class="price">
<span class="price_1">¥</span>
<span class="price_2">160</span>
<span class="price_3">.00</span>
</div>
<span class="shuliang">x1</span>
</div><!--文字-->
</li>
</ul>
<div class="remarks"><!--订单备注-->
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount"><!--优惠-->
<div class="paper">
<span>优惠抵用</span>
<span class="paper_1">-¥5</span>
</div>
<div class="freight">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="money"><!--金额-->
<span class="money_1">商品金额</span>
<span class="money_2">¥155.00</span>
</div>
</div>
<div class="purchase">
<div class="purchase_top"><!--店铺部分-->
<img class="p_zuo" src="./img/purchase_1.png" alt="">
<span>路易斯女装旗舰店</span>
<img class="p_you" src="./img/purchase_2.png" alt="">
</div>
<ul class="list"><!--窗口-->
<li>
<img src="./img/product.png" alt=""><!--图片-->
<div class="shop_words">
<p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
<span>颜色:黑白</span><!--物品-->
<span>尺码:L</span><!--尺码-->
<div class="price">
<span class="price_1">¥</span>
<span class="price_2">160</span>
<span class="price_3">.00</span>
</div>
<span class="shuliang">x1</span>
</div><!--文字-->
</li>
<li>
<img src="./img/product.png" alt=""><!--图片-->
<div class="shop_words">
<p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
<span>颜色:黑白</span><!--物品-->
<span>尺码:L</span><!--尺码-->
<div class="price">
<span class="price_1">¥</span>
<span class="price_2">160</span>
<span class="price_3">.00</span>
</div>
<span class="shuliang">x1</span>
</div><!--文字-->
</li>
</ul>
<div class="remarks"><!--订单备注-->
<span>订单备注</span>
<input type="text" placeholder="有什么想对商家留言的可以在这里说">
</div>
<div class="discount"><!--优惠-->
<div class="paper">
<span>优惠抵用</span>
<span class="paper_1">-¥5</span>
</div>
<div class="freight">
<span>快递费用</span>
<span>免费包邮</span>
</div>
</div>
<div class="money"><!--金额-->
<span class="money_1">商品金额</span>
<span class="money_2">¥155.00</span>
</div>
</div>
</div>
<div class="footer">
<span class="quantity">共3件,</span>
<span class="quantity">合计:</span>
<span>¥</span>
<span>5999.00</span>
<span class="jiesuan">结算(2)</span>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

View File

@@ -0,0 +1,18 @@
body,ul,li,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input {
outline: none;
border: none;
padding: 0;
}

View File

@@ -0,0 +1,248 @@
.footer{/*尾部*/
width: 100%;
height: 1rem;
background-color: #000000;
position: fixed;
bottom: 0;
z-index: 999;
}
/*上下遮挡
父容器高度*/
.footer ul{
width: 100%;
height: 100%;
display:flex;
align-items:center;
justify-content: space-between;
}
.footer ul li{
font-size: 0.24rem;
color: #ffffff;
}
.footer ul li:first-child{
margin-left: 0.39rem;
}
.footer ul li:last-child{
margin-right: 0.39rem;
}
.footer ul li+.choice{
font-size: 0.3rem;
color: #ffffff;
position: relative;
}
.footer ul li+.choice::after{
content: "";
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
position: absolute;
bottom: -0.24rem;
right: 50%;
transform: translateX(50%);
margin-top: 0.36rem;
}
/*头部*/
.header{
width:100%;
height: 5.5rem;
background: url(../img/back.png);
background-size: cover;
}
.header_top{
/* width: 100%;
height: 0.36rem; */
display: flex;
align-items:center;
justify-content:flex-end;
padding-top: 0.7rem;
}
.header_top span{
font-size: 0.36rem;
color: #ffffff;
margin-left: 0.35rem;
}
.header_top img{
margin-right: 0.43rem;
margin-left: 1.91rem;
}
.header_top .choice{
position: relative;
}
.header_top .choice::after{
content: "";
width: 0.4rem;
height: 0.04rem;
background-color: #ffffff;
border-radius: 0.02rem;
position: absolute;
bottom: -0.1rem;
right: 50%;
transform: translateX(50%);
}
/*中部*/
.content{
background: #ffffff;
margin-bottom: 60px;
}
.content_1{
display: flex;
font-size: 0;
margin-top: 0.42rem;
margin-left: 0.24rem;
}
/*图片*/
.photo{
position: relative;
width: 1.1rem;
height: 0.88rem;
}
.photo .user{
width: 0.86rem;
height: 0.86rem;
border-radius: 100%;
}
.photo .shop{
width: 0.3rem;
height: 0.3rem;
position: absolute;
bottom: -0.02rem;
left: 0.67rem;}
/*布局*/
.layout{
width: 5.9rem;
font-size: 0px;
}
/*顶部*/
.layout_top{
width: 5.7rem;
display: flex;
justify-content:space-between
}
.layout_top .top_1{
font-size: 0.3rem;
color: #5a6f92;
}
.layout_top .top_2{
font-size: 0.24rem;
color: #999999;
}
.layout_worder{
margin-top: 0.1rem;
font-size: 0.24rem;
line-height: 0.36rem;
color: #686868;
}
/*图片*/
.tupian{
display:flex;
}
.tupian li{
position: relative;
margin-right: 0.11rem;
}
.tupian li:last-child{
margin-right:0;
}
.tupian li .kh{
width: 1.85rem;
height: 1.85rem;
}
.tupian li .bj{
background: url(../img/yinying.png);
width: 1.85rem;
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content:flex-end;
}
.tupian li .bj span{
font-size: 0.24rem;
color: #ffffff;
}
/*图片底部*/
.dibu_1{
display: flex;
justify-content:space-between;
margin-top: 0.28rem;
margin-right: 0.3rem;
}
.dibu_1 img{
width: 0.39rem;
height: 0.27rem;
}
.dibu_1 .wenzi .dibu_2{
font-size: 0.24rem;
color: #989898;
}
.dibu_1 .wenzi .dibu_3{
font-size: 0.2rem;
color: #989898;
}
/*点赞评论*/
/*点赞*/
.love_pl{
width: 5.7rem;
background-color: #f7f7f7;
border-radius: 0.1rem;
margin-top: 0.16rem;
}
.love_pl .love {
height: 0.77rem;
width: 100%;
display: flex;
align-items:center;
justify-content: flex-start;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
}
.love_pl .love img{
margin-left: 0.28rem;
width: 0.29rem;
height: 0.26rem;
margin-right: 0.1rem;
}
.love_pl .love span {
font-size: 0.3rem;
color: #5a6f92;
font-weight: 550;
}
.love_pl .love p{
font-size: 0.3rem;
margin-left: 0.15rem;
color: #3c3c3c;
}
/*评论*/
.discuss{
margin-top: 0.2rem;
margin-left: 0.29rem;
}
.discuss li{
padding-bottom: 0.15rem;
}
.discuss .discuss_1{
font-size: 0.3rem;
color: #5a6f92;
}
.discuss .discuss_2{
font-size: 0.3rem;
color: #0e0e0e;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,176 @@
<!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>psd(46)</title>
<script src="./js/rem.js"></script>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<div class="header_top">
<span class="choice">圈子</span>
<span>附近</span>
<img src="./img/camera.png" alt="">
</div>
</div>
<div class="content">
<div class="content_1">
<!--当作ul-->
<div class="photo">
<img class="user" src="./img/user.png" alt="">
<img class="shop" src="./img/shop.png" alt="">
</div>
<div class="layout">
<div class="layout_top"><!--顶部-->
<h3 class="top_1">护肤品专卖店</h3>
<span class="top_2">>200km</span>
</div>
<div class="layout_worder"><!--文字部分-->
我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲好用我亲测我亲测我亲测我亲测
</div>
<ul class="tupian"><!--图片部分-->
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
</ul>
<div class="dibu_1"><!--ul底部-->
<div class="wenzi">
<span class="dibu_2">3</span>
<span class="dibu_3">分钟前</span>
</div>
<img src="./img/san.png" alt="">
</div>
<div class="love_pl">
<div class="love"><!--点赞-->
<img src="./img/xin.png" alt="">
<span>张三</span>
<p>、</p>
<span>李</span>
</div>
<ul class="discuss">
<li>
<span class="discuss_1">小可</span>
<span class="discuss_2">:精彩</span>
</li>
<li>
<span class="discuss_1">小可</span>
<span class="discuss_2">:精彩</span>
</li>
</ul>
</div>
</div>
</div>
<div class="content_1">
<!--当作ul-->
<div class="photo">
<img class="user" src="./img/user.png" alt="">
<img class="shop" src="./img/shop.png" alt="">
</div>
<div class="layout">
<div class="layout_top"><!--顶部-->
<h3 class="top_1">护肤品专卖店</h3>
<span class="top_2">>200km</span>
</div>
<div class="layout_worder"><!--文字部分-->
我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲好用我亲测我亲测我亲测我亲测
</div>
<ul class="tupian"><!--图片部分-->
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
<li>
<img class="kh" src="./img/kh.png" alt="">
<div class="bj">
<span>¥</span>
<span>289</span>
<span>.00</span>
</div>
</li>
</ul>
<div class="dibu_1"><!--ul底部-->
<div class="wenzi">
<span class="dibu_2">3</span>
<span class="dibu_3">分钟前</span>
</div>
<img src="./img/san.png" alt="">
</div>
<div class="love_pl">
<div class="love"><!--点赞-->
<img src="./img/xin.png" alt="">
<span>张三</span>
<p>、</p>
<span>李</span>
</div>
<ul class="discuss">
<li>
<span class="discuss_1">小可</span>
<span class="discuss_2">:精彩</span>
</li>
<li>
<span class="discuss_1">小可</span>
<span class="discuss_2">:精彩</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>首页</li>
<li>好友</li>
<li class="choice">圈子</li>
<li>购物车</li>
<li>我的</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}