bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
历届学生/18课程/class18_2/项目/上课项目/橱窗/css/clear.css Normal file
View File

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

243
历届学生/18课程/class18_2/项目/上课项目/橱窗/css/index.css Normal file
View File

@@ -0,0 +1,243 @@
body {
background: #f2f2f2;
}
.header {
position: fixed;
width: 100%;
height: 0.88rem;
left: 0;
top: 0;
z-index: 999;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.3rem;
box-sizing: border-box;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
.header span {
font-size: 0.3rem;
color: #333333;
}
.content {
margin-top: 0.88rem;
font-size: 0;
margin-bottom: 1rem;
}
.user_address {
height: 1.26rem;
display: flex;
align-items: center;
justify-content: space-between;
background: url("../img/icon_1.png");
background-size: contain;
padding: 0 0.3rem;
margin-bottom: 0.19rem;
box-sizing: border-box;
}
.user_text .number{
margin-bottom: 0.05rem;
}
.user_text .number span{
font-size: 0.3rem;
color: #333333;
}
.user_text .number .name{
margin-right: 0.52rem;
}
.user_text .address{
font-size: 0.24rem;
color: #333333;
}
.user_address i{
color: #b3b3b3;
font-size: 14px;
}
.pay {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.26rem;
padding-right: 0.43rem;
box-sizing: border-box;
height: 0.84rem;
background: #fff;
border-radius: 0.1rem;
margin-bottom: 0.16rem;
}
.pay div{
font-size: 0.28rem;
color: #333333;
}
.padding_24 {
padding-left: 0.24rem;
padding-right: 0.24rem;
box-sizing: border-box;
}
.item {
background-color: #ffffff;
margin-bottom: 0.16rem;
}
.item_title {
height: 0.74rem;
border-radius: 0.1rem 0.1rem 0rem 0rem;
display: flex;
align-items: center;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
.item_title span {
font-size: 0.26rem;
color: #333333;
margin-left: 0.06rem;
margin-right: 0.16rem;
}
.item_title .icon-bangzhujinru {
font-size: 13px;
}
.item_info {
padding-top: 0.29rem;
padding-bottom: 0.28rem;
display: flex;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
.item_info img {
width: 2rem;
height: 1.65rem;
margin-right: 0.36rem;
}
.r_text {
width: 3.18rem;
font-size: 0.28rem;
color: #333333;
margin-bottom: 0.14rem;
}
.r_config {
margin-bottom: 0.18rem;
}
.r_config span:first-child{
margin-right: 0.36rem;
}
.r_config span{
font-size: 0.2rem;
color: #999999;
}
.r_price {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.price_text {
font-size: 0.34rem;
color: #ea4e3d;
}
.price_text span {
font-size: 0.24rem !important;
color: #ea4e3d;
}
.price_nums{
font-size: 0.2rem;
color: #999999;
}
.info_r {
flex: 1;
}
.item_beizhu {
height: 0.88rem;
display: flex;
align-items: center;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
.item_beizhu span:first-child{
font-size: 0.3rem;
color: #333333;
margin-right: 0.31rem;
}
.item_beizhu span:last-child{
font-size: 0.26rem;
color: #aaaaaa;
}
.item_yh {
height: 1.08rem;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
.yh_item:first-child {
margin-bottom: 0.1rem;
}
.yh_item {
display: flex;
justify-content: space-between;
}
.yh_item span:first-child {
font-size: 0.24rem;
color: #333333;
}
.yh_item span:last-child {
font-size: 0.24rem;
color: #f09c48;
}
.by {
font-size: 0.24rem;
color: #333333 !important;
}
.item_money {
height: 0.84rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.item_money span:first-child{
font-size: 0.3rem;
color: #333333;
}
.item_money span:last-child{
font-size: 0.34rem;
color: #ea4e3d;
}
.total {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0.92rem;
background-color: #ffffff;
z-index: 9;
padding-right: 0.24rem;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
align-items: center;
}
.total span:nth-child(1){
font-size: 0.26rem;
letter-spacing: 0.006rem;
color: #c6c6c6;
}
.total span:nth-child(2){
font-size: 0.26rem;
letter-spacing: 0.006rem;
color: #999999;
margin-right: 0.07rem;
}
.total span:nth-child(3){
font-size: 0.3rem;
letter-spacing: 0.007rem;
color: #000000;
}
.total .js {
width: 1.92rem;
height: 0.66rem;
background-color: #5697f4;
border-radius: 0.33rem;
font-size: 0.28rem;
line-height: 0.66rem;
letter-spacing: 0.006rem;
color: #ffffff;
text-align: center;
}

50
历届学生/18课程/class18_2/项目/上课项目/橱窗/demo.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="http://at.alicdn.com/t/font_2269051_qnai6klgxf.css">
<link rel="stylesheet" href="./css/index.css">
<style>
ul {
height: 0.94rem;
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30px;
overflow-x: scroll;
}
li {
font-size: 0.3rem;
color: #424242;
flex-shrink: 0;
padding-right: 0.24rem;
}
</style>
</head>
<body>
<ul>
<li>全部</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
<li>待付款</li>
</ul>
</body>
</html>

BIN
历届学生/18课程/class18_2/项目/上课项目/橱窗/img/-e-产品图拷贝.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
历届学生/18课程/class18_2/项目/上课项目/橱窗/img/food.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
历届学生/18课程/class18_2/项目/上课项目/橱窗/img/icon_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/18课程/class18_2/项目/上课项目/橱窗/img/icon_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

185
历届学生/18课程/class18_2/项目/上课项目/橱窗/index.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="http://at.alicdn.com/t/font_2269051_qnai6klgxf.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-back"></i>
<span>填写订单</span>
<span></span>
</div>
<div class="content">
<div class="user_address">
<div class="user_text">
<div class="number">
<span class="name">张晓明</span>
<span class="phone">186****0019</span>
</div>
<div class="address">上海市黄浦区中山南路128号千古美城1楼1210室</div>
</div>
<i class="iconfont icon-bangzhujinru"></i>
</div>
<div class="pay">
<div class="pay_tips">选择支付方式</div>
<div class="pay_text">在线支付</div>
</div>
<div class="list">
<div class="item">
<div class="item_title padding_24">
<i class="iconfont icon-shangjia"></i>
<span>路易斯女装旗舰店</span>
<i class="iconfont icon-bangzhujinru"></i>
</div>
<div class="item_info padding_24">
<img src="./img/icon_2.png" alt="">
<div class="info_r">
<div class="r_text">真丝连衣裙2019春夏新款杭州大牌气质修……</div>
<div class="r_config">
<span>颜色：黑白</span>
<span>尺码：L</span>
</div>
<div class="r_price">
<div class="price_text">
<span>￥</span>160<span>.00</span>
</div>
<div class="price_nums">
x1
</div>
</div>
</div>
</div>
<div class="item_beizhu padding_24">
<span>订单备注</span>
<span>有什么想对商家留言的可以在这里说</span>
</div>
<div class="item_yh padding_24">
<div class="yh_item">
<span>优惠抵用</span>
<span>-￥5</span>
</div>
<div class="yh_item">
<span>优惠抵用</span>
<span class="by">免费包邮</span>
</div>
</div>
<div class="item_money padding_24">
<span>商品金额</span>
<span>￥155.00</span>
</div>
</div>
<div class="item">
<div class="item_title padding_24">
<i class="iconfont icon-shangjia"></i>
<span>路易斯女装旗舰店</span>
<i class="iconfont icon-bangzhujinru"></i>
</div>
<div class="item_info padding_24">
<img src="./img/icon_2.png" alt="">
<div class="info_r">
<div class="r_text">真丝连衣裙2019春夏新款杭州大牌气质修……</div>
<div class="r_config">
<span>颜色：黑白</span>
<span>尺码：L</span>
</div>
<div class="r_price">
<div class="price_text">
<span>￥</span>160<span>.00</span>
</div>
<div class="price_nums">
x1
</div>
</div>
</div>
</div>
<div class="item_beizhu padding_24">
<span>订单备注</span>
<span>有什么想对商家留言的可以在这里说</span>
</div>
<div class="item_yh padding_24">
<div class="yh_item">
<span>优惠抵用</span>
<span>-￥5</span>
</div>
<div class="yh_item">
<span>优惠抵用</span>
<span class="by">免费包邮</span>
</div>
</div>
<div class="item_money padding_24">
<span>商品金额</span>
<span>￥155.00</span>
</div>
</div>
<div class="item">
<div class="item_title padding_24">
<i class="iconfont icon-shangjia"></i>
<span>路易斯女装旗舰店</span>
<i class="iconfont icon-bangzhujinru"></i>
</div>
<div class="item_info padding_24">
<img src="./img/icon_2.png" alt="">
<div class="info_r">
<div class="r_text">真丝连衣裙2019春夏新款杭州大牌气质修……</div>
<div class="r_config">
<span>颜色：黑白</span>
<span>尺码：L</span>
</div>
<div class="r_price">
<div class="price_text">
<span>￥</span>160<span>.00</span>
</div>
<div class="price_nums">
x1
</div>
</div>
</div>
</div>
<div class="item_beizhu padding_24">
<span>订单备注</span>
<span>有什么想对商家留言的可以在这里说</span>
</div>
<div class="item_yh padding_24">
<div class="yh_item">
<span>优惠抵用</span>
<span>-￥5</span>
</div>
<div class="yh_item">
<span>优惠抵用</span>
<span class="by">免费包邮</span>
</div>
</div>
<div class="item_money padding_24">
<span>商品金额</span>
<span>￥155.00</span>
</div>
</div>
</div>
<div class="total">
<span>共3件,</span>
<span>合计：</span>
<span>￥5999.00</span>
<div class="js">结算(2)</div>
</div>
</div>
</body>
</html>

13
历届学生/18课程/class18_2/项目/上课项目/橱窗/js/rem.js Normal file
View File

@@ -0,0 +1,13 @@
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";
}