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

8
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/clear.css Normal file
View File

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

192
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/five.css Normal file
View File

@@ -0,0 +1,192 @@
body{
background: #f1f1f1;
}
header{
width: 100%;
height: 0.96rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.4rem;
box-sizing: border-box;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
header i{
color: #333333;
}
header .header_bon{
display: flex;
height: 0.64rem;
background-color: #ffffff;
border-radius: 0.32rem;
border: solid 0.02rem #eceef4;
align-items: center;
overflow: hidden;
}
.bon_active{
background-color: #eceef4;
}
header .header_bon li{
padding: 0.19rem 0.18rem;
font-size: 0.28rem;
color: #333333;
}
.line{
border: 0.02rem solid #eceef4;
border-top: none !important;
border-bottom: none !important;
}
header p{
font-size: 0.28rem;
color: #404040;
}
input::-webkit-input-placeholder{
text-align: center;
}
.search{
position: relative;
padding:0.2rem 0.24rem;
font-size: 0;
}
.search i{
position: absolute;
top: 0.42rem;
left: 3.18rem;
font-size: 0.28rem;
color: rgb(117, 117, 117);
}
input{
outline: none;
border: none;
width: 100%;
height: 0.68rem;
background-color: #ffffff;
border-radius: 0.05rem;
border: solid 0.02rem #cdcdcd;
}
.content{
margin-bottom: 0.8rem;
}
.shop{
}
.shop_top{
display: flex;
align-items: center;
height: 0.9rem;
margin-bottom: 0.02rem;
background: #fff;
}
.shop_top li{
justify-content: center;
width: 50%;
display: flex;
position: relative;
}
.st_line::before{
content: "";
width: 0.01rem;
height: 0.53rem;
background-color: #bababa;
position: absolute ;
top: 0;
right: 0;
}
.shop_top li p{
font-size: 0.28rem;
color: #404040;
margin-right: 0.54rem;
}
.shop_top li i{
color: #dadada;
}
.shop_bot{}
.shop_bot li{
position: relative;
padding-left: 0.66rem;
box-sizing: border-box;
height: 2.25rem;
display: flex;
align-items: center;
background: #fff;
margin-bottom: 0.1rem;
}
.shop_bot li img:first-child{
width: 0.36rem;
height: 0.36rem;
position: absolute;
top: 0.96rem;
left: 0.26rem;
}
.shop_bot li img:nth-child(2){
width: 1.83rem;
height: 1.83rem;
margin-right: 0.23rem;
}
.shop_bot_text p:first-child{
font-size: 0.28rem;
color: #343434;
margin-bottom: 0.6rem;
}
.shop_bot_text p:nth-child(2){
font-size: 0.28rem;
color: #343434;
margin-bottom: 0.25rem;
}
.shop_bot_text p:last-child{
font-size: 0.24rem;
color: #898989;
}
.shop_bot_text p:last-child span{}
.shop_bot_text p:last-child i{
color: #898989;
font-size: 0.08rem;
display: inline-block;
transform: scale(0.7);
}
.count{
width: 7.5rem;
height: 0.92rem;
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.25rem;
box-sizing: border-box;
}
.count_bon{
font-size: 0.28rem;
letter-spacing: 0.006rem;
color: #333333;
display: flex;
}
.count_bon span{
width: 0.36rem;
height: 0.36rem;
border: solid 0.02rem #9da2b7;
border-radius: 100%;
display: inline-block;
margin-right: 0.11rem;
}
.count p{
font-size: 0.28rem;
letter-spacing: 0.006rem;
color: #ffffff;
width: 1.92rem;
height: 0.66rem;
text-align: center;
line-height: 0.66rem;
background-color: #3d98fb;
border-radius: 0.33rem;
}

215
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/four.css Normal file
View File

@@ -0,0 +1,215 @@
.header{
height: 1.32rem;
display: flex;
font-size: 0;
justify-content: space-between;
align-items: center;
padding: 0 0.24rem;
box-sizing: border-box;
}
.header li{
display: flex;
align-items: center;
position: relative;
}
.header li:first-child img{
width: 0.48rem;
height: 0.48rem;
border-radius: 0.1rem;
margin-left: 0.2rem;
}
.header li:nth-child(2){
font-size: 0.28rem;
color: #000000;
}
.header li:nth-child(2) span{
font-size: 0.2rem;
line-height: 0.32rem;
color: #ffffff;
text-align: center;
width: 0.78rem;
height: 0.32rem;
background-color: #3b75e2;
border-radius: 0.05rem;
margin-left: 0.12rem;
}
.header li:last-child p{
width: 0.25rem;
height: 0.25rem;
background-color: #ea4e3d;
border-radius: 100%;
text-align: center;
line-height: 0.25rem;
font-size: 0.2rem;
color: #ffffff;
position: absolute;
top: -0.1rem;
left: 0.24rem;
}
.icon-toright{
font-size: 0.44rem;
color: #565656;
}
.icon-xinxi,.icon-shezhi{
font-size: 0.36rem;
color: #565656;
}
.icon-xinxi{
margin-right: 0.2rem;
}
.content{
padding: 0 0.24rem;
font-size: 0;
box-sizing: border-box;
margin-bottom: 0.5rem;
}
.fans{
height: 1.8rem;
background: url('../img/图层1.png');
background-size: cover;
border-radius: 0.2rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.fans li{
text-align: center;
}
.fans li p:first-child{
font-size: 0.34rem;
color: #ffffff;
margin-bottom: 0.2rem;
}
.fans li p:last-child{
font-size: 0.24rem;
color: #ffffff;
}
.live{
height: 0.78rem;
background: #fff;
margin-top: 0.24rem;
border-radius: 0.2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.live .live_left{
display: flex;
}
.live .live_left p{
font-size: 0.32rem;
color: #1a1a1a;
}
.live .live_left i{
color: #0080f1;
font-size: 0.38rem;
margin-left: 0.19rem;
margin-right: 0.09rem;
}
.live .live_right{
display: flex;
}
.live .live_right p{
font-size: 0.28rem;
color: #0079f1;
}
.live .live_right i{
color: #0080f1;
margin-right: 0.17rem;
margin-left: 0.09rem;
}
.auth{
height: 2.75rem;
background-color: #ffffff;
border-radius: 0.2rem;
margin-top: 0.24rem;
padding-top: 0.34rem;
box-sizing: border-box;
}
.title{
font-size: 0.3rem;
letter-spacing: 0.015rem;
color: #010101;
margin-left: 0.34rem;
font-weight: 700;
}
.auth_bot{
display: flex;
align-items: center;
justify-content: space-around;
}
.auth_bot li{
text-align: center;
margin-top: 0.37rem;
}
.auth_bot li i{
color: #448eee;
font-size: 0.56rem;
}
.auth_bot li p{
font-size: 0.3rem;
letter-spacing: 0.015rem;
color: #010101;
}
.auth_bot li span{
font-size: 0.22rem;
color: #e93323;
}
.auth_active{
color: #abb1bc !important;
}
.manage{
height: 4.02rem;
margin-top: 0.24rem;
background-color: #ffffff;
border-radius: 0.2rem;
padding-top: 0.36rem;
box-sizing: border-box;
}
.manage ul{
display: flex;
flex-wrap: wrap;
}
.manage ul li{
width: 20%;
text-align: center;
margin-top: 0.4rem;
}
.manage ul li i{
color: #f5c044;
font-size: 0.6rem;
}
.manage ul li p{
font-size: 0.24rem;
color: #333333;
}
.mark{
height: 2.51rem;
background-color: #ffffff;
border-radius: 0.2rem;
padding-top: 0.34rem;
box-sizing: border-box;
margin-top: 0.24rem;
}
.mark .mark_bot{
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 0.5rem;
}
.mark .mark_bot li{
text-align: center;
}
.mark .mark_bot li i{
color: #e93323;
font-size: 0.6rem;
margin-bottom: 0.3rem;
}
.mark .mark_bot li p{
font-size: 0.24rem;
color: #333333;
margin-top: 0.2rem;
}

237
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/one.css Normal file
View File

@@ -0,0 +1,237 @@
body{
background: #f0f0f0;
}
.header{
width: 100%;
height: 0.98rem;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 0.3rem;
box-sizing: border-box;
}
.header i{
font-size: 0.34rem;
color: #000000;
}
.header p{
margin-left: 2.78rem;
font-size: 0.34rem;
color: #333333;
}
.logi{
height: 2.32rem;
width: 100%;
background: url('../img/-e-图层2.png');
background-size: cover;
padding-top: 0.67rem;
box-sizing: border-box;
margin-bottom: 0.24rem;
text-align: center;
}
.logi p{
font-size: 0.42rem;
color: #ffffff;
}
.lw_adr{
font-size: 0;
background: #fff;
padding-right: 0.8rem;
box-sizing: border-box
}
.lw_adr li:first-child{
height: 2.09rem;
display: flex;
}
.lw_l{
color: #8d959e;
font-size: 0.36rem;
padding: 0 0.27rem;
display: flex;
align-items: center;
}
.lw_r{
display: flex;
flex-direction: column;
border-bottom: 0.02rem solid #cecece;
flex: 1;
font-size: 0.28rem;
color: #393939;
justify-content: center;
}
.lw_r p:nth-child(2){
margin: 0.2rem 0;
}
.lw_adr li:last-child{
height: 1.45rem;
display: flex;
}
.lw_r span{
padding-right:0.1rem;
}
.adr_l{
color: #8d959e;
font-size: 0.36rem;
padding: 0 0.22rem;
display: flex;
align-items: center;
}
.adr_l i{
font-size: 0.4rem;
}
.adr_r{
box-sizing: border-box;
padding-top: 0.41rem;
font-size: 0.24rem;
color: #393939;
}
.adr_r h4{
margin-bottom: 0.15rem;
}
.shop{
margin-top: 0.19rem;
background: #fff;
}
.shop_top{
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.28rem;
}
.s_t_l {
font-size: 0.34rem;
color: #080808;
display: flex;
align-items: center;
}
.s_t_l img{
width: 0.58rem;
height: 0.58rem;
margin: 0.19rem;
margin-left: 0 !important;
}
.s_t_r{
display: flex;
font-size: 0.24rem;
color: #0084f1;
align-items: center;
}
.s_t_r li{
width: 1.2rem;
height: 0.48rem;
border-radius: 0.24rem;
border: solid 0.02rem #0084f1;
text-align: center;
line-height: 0.48rem;
margin-right: 0.3rem;
}
.shop_bot{
display: flex;
margin-top: 0.25rem;
padding-right: 0.25rem;
/* box-sizing: border-box; */
padding-bottom: 0.2rem;
padding-left: 0.28rem;
border-bottom: 0.01rem solid #eaeaea;
}
.shop_bot img{
width: 1.52rem;
height: 1.52rem;
border-radius: 0.1rem;
}
.s_b_r{
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 0.28rem;
}
.s_b_r .s_b_r_t{
display: flex;
justify-content: space-between;
}
.s_b_r .s_b_r_b{
display: flex;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.s_b_r_t p{
font-size: 0.24rem;
color: #333333;
}
.s_b_r_t span{
font-size: 0.28rem;
color: #333333;
margin-left: 0.5rem;
}
.s_b_r_b p span, .s_b_r_b p {
font-size: 0.24rem;
color: #979797;
}
.s_b_r_b span{
font-size: 0.28rem;
color: #333333;
}
.count{
font-size: 0.24rem;
color: #333333;
text-align: end;
padding: 0.22rem 0.35rem 0.36rem 0;
}
.count span{
font-size: 0.24rem;
color: #ff0b00;
}
.xx{
margin-top: 0.2rem;
background-color: #fff;
padding: 0.45rem 0.25rem;
}
.xx li{
font-size: 0.3rem;
color: #666666;
margin-bottom: 0.3rem;
}
.xx li p span{
font-size: 0.3rem !important;
color: #333333 !important;
border: none !important;
}
.ddh{
display: flex;
justify-content: space-between;
}
.xx .ddh span:last-child{
display: inline-block;
font-size: 0.24rem;
color: #333333;
width: 1.04rem;
height: 0.43rem;
border-radius: 0.02rem;
border: solid 0.01rem #d5d5d5;
text-align: center;
line-height: 0.43rem;
}
.bz{
display: flex;
justify-content: space-between;
}
.xx .bz span:last-child i{
font-size: 0.34rem;
color: #979797;
}
.botton{
}
.botton p{
font-size: 0.34rem;
color: #ffffff;
width: 6.5rem;
height: 0.8rem;
background-color: #5697f4;
border-radius: 0.4rem;
margin: 0.41rem auto;
text-align: center;
line-height: 0.8rem;
}

3
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/public.css Normal file
View File

@@ -0,0 +1,3 @@
body{
background: #f2f2f6;
}

224
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/seven.css Normal file
View File

@@ -0,0 +1,224 @@
.header{
width: 100%;
padding-left: 0.42rem;
padding-right: 0.36rem;
box-sizing: border-box;
background: #fff;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.header i{}
.icon-fangdajing-copy{
position: absolute;
top: 0.3rem;
/* transform: translatex(-50%); */
left: 1.26rem;
font-size: 0.28rem;
}
.header input{
margin-top: 0.14rem;
margin-bottom: 0.14rem;
width: 5.66rem;
height: 0.6rem;
background-color: #f2f2f2;
border-radius: 0.3rem;
outline: none;
border: none;
padding-left: 0.15rem;
box-sizing: border-box;
}
input::-webkit-input-placeholder{
font-size: 0.28rem !important;
padding-left: 0.6rem;
}
.content{
font-size: 0;
padding-top: 0.86rem;
margin-bottom: 6.64rem;
}
.content .big_img{
height: 7.5rem;
}
.content .price_name{
height: 1.58rem;
background-color: #ffffff;
margin-bottom: 0.08rem;
padding-top:0.33rem ;
padding-left: 0.3rem;
box-sizing: border-box;
}
.price{
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #ea4e3d;
margin-bottom: 0.15rem;
}
.price span{
font-size: 0.34rem;
letter-spacing: 0.007rem;
}
.price del{
color: #737373;
}
.content .price_name .name{
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
}
.config{
padding-left: 0.37rem;
padding-right: 0.4rem;
box-sizing: border-box;
background-color: #ffffff;
}
.config li{
border-bottom: 0.01rem solid #ebeaea;
/* opacity: 0.5; */
height: 0.7rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.config li p{
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #000000;
}
.config li p span{
font-size: 0.2rem;
letter-spacing: 0.004rem;
}
.config li i{}
.config .quan{}
.config .quan p{
font-size: 0.24rem;
letter-spacing: 0.005rem;
color: #737373;
}
.config .quan p span{
height: 0.28rem;
text-align: center;
line-height: 0.28rem;
/* opacity: 0.05; */
font-size: 0.2rem;
color: #ff7f00;
background: #ff850b42;
display: inline-block;
margin-left: 0.23rem;
}
.config .quan p span:first-child{
margin-left: 0.19rem !important;
}
.masking{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000;
opacity: 0.4;
}
.popup{
width: 100%;
height: 6.72rem;
background-color: #ffffff;
border-radius: 0.2rem 0.2rem 0rem 0rem;
position: fixed;
bottom: 0;
left: 0;
}
.popup_top{
display: flex;
padding-top: 0.46rem;
padding-left: 0.65rem;
}
.popup_top img{
width: 1.5rem;
height: 1.5rem;
margin-right: 0.17rem;
}
.top_r p{
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #aaaaaa;}
.popup_top .price{}
.popup_bot{}
.popup_bot li{
height: 0.78rem;
padding-left: 0.65rem;
margin-top: 0.38rem;
}
.popup_bot li p{
font-size: 0.3rem;
letter-spacing: 0.005rem;
color: #1b1b1b;
margin-bottom: 0.15rem;
}
.popup_bot li span{
height: 0.35rem;
background-color: #f5f5f5;
border-radius: 0.175rem;
font-size: 0.2rem;
text-align: center;
line-height: 0.35rem;
letter-spacing: 0.004rem;
color: #1b1b1b;
display: inline-block;
padding: 0 0.2rem;
margin-right: 0.15rem;
}
.popup_active{
color: #5697f4 !important;
}
.popup_bot li:last-child{
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 1rem;
box-sizing: border-box;
}
.popup_bot li .num{}
.popup_bot li .num span{
width: 0.36rem;
height: 0.34rem;
text-align: center;
line-height: 0.34rem;
border: 0.01rem solid #aaaaaa;
color: #aaaaaa;
opacity: 0.9;
display: inline-block;
border-radius: 0;
padding: 0 !important;
margin-right: 0 !important;
}
.num .shuzi{
font-size: 0.2rem;
letter-spacing: 0.004rem;
color: #1b1b1b !important;
border-left: none !important;
border-right: none !important;
}
.top_r{
padding-top: 0.2rem;
box-sizing: border-box;
}
.qd{
font-size: 0.28rem;
letter-spacing: 0.006rem;
color: #ffffff;
width: 6.9rem;
height: 0.82rem;
text-align: center;
line-height: 0.82rem;
background-color: #5697f4;
border-radius: 0.41rem;
margin: 0 .3rem;
margin-top: 0.24rem;
}

157
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/six.css Normal file
View File

@@ -0,0 +1,157 @@
.header_bg{
font-size: 0;
height: 2.96rem;
background: url(../img/header_bg.png);
background-size: cover;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
.padding_24{
padding-left:0.24rem ;
padding-right: 0.24rem;
}
.header{
height: 1.17rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.header span{
color: #fff;
font-size: 0.28rem;
}
.header i{
color: #fff;
}
.content{
margin-top: 5.38rem;
}
.content .nav{
display: flex;
height: 0.92rem;
width: 7.02rem;
align-items: center;
justify-content: space-between;
padding: 0 0.38rem;
box-sizing: border-box;
margin-bottom: 0.32rem;
position: fixed;
top: 1.16rem;
left: 50%;
/* background: red; */
transform: translate(-50%);
z-index: 2;
}
.content .nav li{
font-size: 0.34rem;
letter-spacing: 0.01rem;
color: #ffffff;
position: relative;
height: 100%;
line-height: 0.92rem;
}
.nav_active::before{
content: "";
width: 0.34rem;
height: 0.04rem;
background-color: #ffffff;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.wait{
height: 2.7rem;
width: 7.02rem;
background-color: #ffffff;
border-radius: 0.15rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 2.4rem;
left: 50%;
transform: translate(-50%);
z-index: 3;
}
.wait p:first-child{
font-size: 0.58rem;
color: #383838;
margin-bottom: 0.1rem;
}
.wait p:last-child{
font-size: 0.28rem;
color: #939393;
}
.list{
font-size: 0;
}
.list_border{
border-bottom: 0.01rem solid #f4f4f7;
}
.list .item{
background-color: #ffffff;
border-radius: 0.15rem;
padding: 0 0.04rem;
box-sizing: border-box;
margin-bottom: 0.21rem;
}
.list .item li{
padding-left:0.33rem ;
padding-right: 0.26rem;
box-sizing: border-box;
}
.item .count{
height: 1.03rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.item .count p:first-child{
font-size: 0.26rem;
letter-spacing: 0.008rem;
color: #989898;
}
.item .count p:last-child{
font-size: 0.26rem;
letter-spacing: 0.008rem;
color: #989898;
}
.item .details{
height: 1.4rem;
}
.item .details p{
display: flex;
align-items: center;
justify-content: space-between;
}
.item .details p:first-child{
margin-top: 0.33rem;
margin-bottom: 0.26rem;
}
.item .details p:first-child span{
font-size: 0.3rem;
letter-spacing: 0.009rem;
color: #333333;
}
.item .details .price{
font-size: 0.38rem !important;
letter-spacing: 0.011rem !important;
}
.item .details p:last-child span{
font-size: 0.24rem;
letter-spacing: 0.007rem;
color: #989898;
}
.item .details .state{
color: #4e8fec !important;
margin-right: 0.17rem;
}

192
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/three.css Normal file
View File

@@ -0,0 +1,192 @@
body{
background: #fff !important;
}
header{
width: 100%;
height: 0.84rem;
font-size: 0;
/* margin-bottom: 0.02rem; */
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0.3rem;
padding-right: 0.3rem;
box-sizing: border-box;
border-bottom: 0.02rem solid #e3e3e3;
}
header i{
color: #000000;
}
header p:nth-child(2){
font-size: 0.34rem;
color: #333333;
}
header p:last-child{
font-size: 0.28rem;
color: #347ef4;
}
.content{
width: 100%;
font-size: 0;
background: #fff;
display: flex;
margin-bottom: 1rem;
}
.content .content_left{
position: relative;
height: 100%;
}
.content .content_left img{
width: 0.8rem;
height: 0.8rem;
margin: 0.24rem;
margin-bottom: 0 !important;
}
.content .content_left p{
font-size: 0.2rem;
color: #fd4a75;
width: 0.68rem;
height: 0.24rem;
background-color: #ffe0e8;
border-radius: 0.03rem;
border: solid 0.01rem #fd4a75;
text-align: center;
line-height: 0.24rem;
position: absolute;
top: 0.9rem;
left: 50%;
transform: translate(-50%);
}
.content_right{
flex: 1;
}
.right_top{
width: 100%;
padding-top: 0.24rem;
box-sizing: border-box;
position: relative;
}
.right_top h3{
font-size: 0.28rem;
color: #333333;
}
.right_top p:nth-child(2){
font-size: 0.24rem;
color: #979da7;
margin-top: 0.2rem;
}
.right_top p:nth-child(3){
font-size: 0.28rem;
letter-spacing: 0.008rem;
color: #292929;
margin-top: 0.18rem;
}
.right_top .pp{
width: 4.5rem;
height: 4.5rem;;
}
.icon-bofang{
font-size: 0.24rem;
color: #fff;
position: absolute;
top: 3.56rem;
left: 1.88rem;
/* transform: translate(-50%); */
width: 0.6rem;
height: 0.6rem;
text-align: center;
line-height: 0.6rem;
border-radius: 100%;
background: #45444485;
border: 0.02rem solid;
}
.price_img{
font-size: 0.24rem;
color: #ffffff;
position: absolute;
top: 5.74rem;
right: 1.92rem;
font-weight: 500;
}
.addrtime_love{
display: flex;
justify-content: space-between;
align-items: center;
}
.addrtime{
margin-top: 0.19rem;
}
.addrtime p:first-child{
font-size: 0.24rem;
letter-spacing: 0.007rem;
color: #5a6f92;
}
.addrtime p:last-child{
font-size: 0.24rem;
color: #797979;
margin-top: 0.09rem;
}
.love{
display: flex;
align-items: center;
margin-right: 0.42rem;
}
.icon-xinaixin, .icon-liaotian{
color: #5c6572;
}
.icon-xinaixin{
font-size: 0.34rem;
margin-right: 0.36rem;
}
.icon-liaotian{
font-size: 0.52rem;
}
.right_bot{
background: #f7f7ff;
margin-right: 0.24rem;
}
.comment_top{
height: 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0.01rem solid #dedede;
border-radius: 0.1rem;
}
.comment_top p:first-child{
font-size: 0.28rem;
color: #5a6f92;
}
.comment_top p:last-child{
font-size: 0.24rem;
color: #5a6f92;
margin-right: 0.17rem;
}
.comment_bot{
display: flex;
}
.comment_bot ul li{
display: flex;
margin-top: 0.1rem;
margin-bottom: 0.28rem;
}
.comment_bot ul li img{
width: 0.7rem;
height: 0.7rem;
margin-right: 0.24rem;
}
.comment_bot ul li .comment_cont h6{
font-size: 0.24rem;
color: #666666;
}
.comment_bot ul li .comment_cont p{
font-size: 0.3rem;
color: #0e0e0e;
}
.comment_cont{
padding-right: 0.71rem;
box-sizing: border-box;
}

143
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/two.css Normal file
View File

@@ -0,0 +1,143 @@
.header{
background: #fff;
height: 0.94rem;
display: flex;
align-items: center;
position: relative;
}
.icon-toright{
font-size: 0.36rem;
font-weight: 500;
color: #000000;
margin-left: 0.21rem;
margin-right: 0.25rem;
}
.header input{
width: 6.31rem;
height: 0.6rem;
border-radius: 0.3rem;
border: none !important;
outline: none;
background-color: #f2f2f2;
padding-left: 0.2rem;
box-sizing: border-box;
}
input::-webkit-input-placeholder{
padding-left: 0.35rem !important;
font-size: 0.28rem;line-height: 0.6rem;
}
.icon-fangdajing-copy{
position: absolute;
left: 1.04rem;
font-size: 0.28rem;
top: 0.3rem;
}
.nav{
width: 100%;
height: 0.94rem;
display: flex;
justify-content: space-between;
overflow: scroll;
white-space: nowrap;
background-color: #ffffff;
border-radius: 0rem 0rem 0.1rem 0.1rem;
padding-left: 0.36rem;
box-sizing: border-box;
margin-bottom: 0.12rem;
}
.nav li{
position: relative;
font-size: 0.3rem;
color: #434343;
flex-shrink: 1;
margin-right: 0.24rem;
height: 100%;
line-height: 0.94rem;
}
.nav li:hover{
color: #5697f4 !important;
}
.nav li:hover::before{
content: "";
width: 0.31rem;
height: 0.04rem;
background-color: #5697f4;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.content{
background: #fff;
}
.cont_top{
height: 0.73rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.35rem;
}
.shop{
font-size: 0.26rem;
letter-spacing: 0.006rem;
color: #333333;
display: flex;
}
.icon-shangjia{
font-size: 0.32rem;
color: #84888f;
margin-right: 0.14rem;
}
.icon-youhuaxiangyougengduo{
font-size: 0.32rem;
color: #84888f;
}
.wait{
font-size: 0.26rem;
color: #5697f4;
}
.cont_mian{
background: #fff;
padding: 0 0.35rem;
font-size: 0;
}
.cont_mian li{
display: flex;
justify-content: space-between;
padding-bottom: 0.2rem;
}
.cont_mian li img{
width: 1.36rem;
height: 1.37rem;
margin-right: 0.24rem;
}
.goods{}
.goods p{
width: 3.86rem;
font-size: 0.3rem;
line-height: 0.44rem;
color: #444444;
margin-bottom: 0.15rem;
}
.goods span{
font-size: 0.24rem;
color: #aaaaaa;
}
.price{
text-align: end;
}
.price p{
font-size: 0.3rem;
color: #000000;
margin-bottom: 0.1rem;
}
.price span{
font-size: 0.24rem;
color: #aaaaaa;
}
.cont_bot{
}

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/-e-买家头像.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/-e-产品图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/-e-图层2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/big_img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/header_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/yhq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/产品图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/产品图2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/图层1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/img/对勾.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

11
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/js/index.js Normal file
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";
}

131
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/five.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_er038ehg964.css">
<link rel="stylesheet" href="../css/five.css">
<script src="../js/index.js"></script>
<title>Document</title>
</head>
<body>
<header>
<i class="iconfont icon-toright"></i>
<ul class="header_bon">
<li class="bon_active">出售中</li>
<li class="line">已下架</li>
<li>仓库</li>
</ul>
<p>完成</p>
</header>
<div class="content">
<div class="search">
<input type="text" placeholder="搜索">
<i class="iconfont icon-fangdajing-copy"></i>
</div>
<div class="shop">
<ul class="shop_top">
<li class="st_line">
<p>浏览量排序</p>
<i class="iconfont icon-xiangxia"></i>
</li>
<li>
<p>筛选条件</p>
<i class="iconfont icon-xiangxia"></i>
</li>
</ul>
<ul class="shop_bot">
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
<li>
<img src="../img/对勾.png" alt="">
<img src="../img/产品图2.png" alt="">
<div class="shop_bot_text">
<p>ym9023-1韩国单鞋超美现欧洲站…</p>
<p>¥ 150.00~250.00</p>
<p>
<span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
</p>
</div>
</li>
</ul>
</div>
<div class="count">
<div class="count_bon">
<span></span>
全选
</div>
<p>
批量操作
</p>
</div>
</div>
</body>
</html>

151
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/four.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_4sdbjdkvdmu.css">
<link rel="stylesheet" href="../css/four.css">
<script src="../js/index.js"></script>
<title>four</title>
</head>
<body>
<ul class="header">
<li>
<i class="iconfont icon-toright"></i>
<img src="../img/-e-买家头像.png" alt="">
</li>
<li>
新手体验店<span>营业中</span>
</li>
<li>
<i class="iconfont icon-xinxi"></i>
<i class="iconfont icon-shezhi"></i>
<p>1</p>
</li>
</ul>
<div class="content">
<ul class="fans">
<li>
<p>1</p>
<p>关注人数</p>
</li>
<li>
<p>1</p>
<p>商品数</p>
</li>
<li>
<p>0</p>
<p>粉丝数</p>
</li>
<li>
<p>0</p>
<p>浏览量</p>
</li>
</ul>
<div class="live">
<div class="live_left">
<i class="iconfont icon-zhibo"></i>
<p>我要直播</p>
</div>
<div class="live_right">
<p>去开启直播</p>
<i class="iconfont icon-youhuaxiangyougengduo"></i>
</div>
</div>
<div class="auth">
<p class="title">店铺资质认证</p>
<ul class="auth_bot">
<li>
<i class="iconfont icon-yingyezhizhao"></i>
<p>营业执照</p>
<span class="auth_active">已认证</span>
</li>
<li>
<i class="iconfont icon-yingyezhizhao"></i>
<p>营业执照</p>
<span>已认证</span>
</li>
<li>
<i class="iconfont icon-yingyezhizhao"></i>
<p>营业执照</p>
<span>已认证</span>
</li>
</ul>
</div>
<div class="manage">
<p class="title">店铺管理</p>
<ul>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
<li>
<i class="iconfont icon-gouwudaidaizishangcheng"></i>
<p>商品管理</p>
</li>
</ul>
</div>
<div class="mark">
<p class="title">店铺营销</p>
<ul class="mark_bot">
<li>
<i class="iconfont icon-youhuiquan"></i>
<p>优惠券</p>
</li>
<li>
<i class="iconfont icon-youhuiquan"></i>
<p>优惠券</p>
</li>
<li>
<i class="iconfont icon-youhuiquan"></i>
<p>优惠券</p>
</li>
<li>
<i class="iconfont icon-youhuiquan"></i>
<p>优惠券</p>
</li>
</ul>
</div>
</div>
</body>
</html>

140
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/one.html Normal file
View File

@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_ypuanp755ff.css">
<link rel="stylesheet" href="../css/one.css">
<script src="../js/index.js"></script>
<title>one</title>
</head>
<body>
<div class="header">
<i class="iconfont icon-toright"></i>
<p>详情</p>
</div>
<div class="content">
<div class="logi">
<p>已发货</p>
</div>
<ul class="lw_adr">
<li>
<div class="lw_l">
<i class="iconfont icon-Frame1"></i>
</div>
<div class="lw_r">
<h4>测试</h4>
<p>110120119</p>
<p>
<span>安徽省</span><span>合肥市</span><span>蜀山区</span>
</p>
</div>
</li>
<li>
<div class="adr_l">
<i class="iconfont icon-liaotian"></i>
</div>
<div class="adr_r">
<h4>买家留言</h4>
<p>测试测试</p>
</div>
</li>
</ul>
<div class="shop">
<div class="shop_top">
<div class="s_t_l">
<img src="../img/-e-买家头像.png" alt="">
<p>test110</p>
</div>
<ul class="s_t_r">
<li>打电话</li>
<li>发信息</li>
</ul>
</div>
<div class="shop_bot">
<img src="../img/-e-产品图.png" alt="">
<div class="s_b_r">
<div class="s_b_r_t">
<p>本人做淘宝店铺一件代发本人做淘宝店铺一件代发</p>
<span>￥999</span>
</div>
<div class="s_b_r_b">
<p>
颜色：<span>如图</span>尺码：<span>均码</span>
</p>
<span>X1</span>
</div>
</div>
</div>
<div class="count">
共计3件，实收款：<span>￥999</span>（含运费：￥0.00）
</div>
</div>
<ul class="xx">
<li class="ddh">
<p>
订单号：<span>100000000</span>
</p>
<span>
复制
</span>
</li>
<li>
<p>
下单时间：<span>18-12-12 10：00：00</span>
</p>
</li>
<li>
<p>
支付时间：<span>18-12-12 10：00：00</span>
</p>
</li>
<li>
<p>
支付方式：<span>18-12-12 10：00：00</span>
</p>
</li>
<li>
<p>
发货时间：<span>18-12-12 10：00：00</span>
</p>
</li>
<li>
<p>
完成时间：<span>18-12-12 10：00：00</span>
</p>
</li>
<li class="bz">
<p>
备注信息：<span>test1</span>
</p>
<span>
<i class="iconfont icon-youhuaxiangyougengduo"></i>
</span>
</li>
</ul>
<div class="botton">
<p>确认收货</p>
</div>
</div>
</body>
</html>

77
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/seven.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_c650ik2dcsi.css">
<link rel="stylesheet" href="../css/seven.css">
<script src="../js/index.js"></script>
<title>seven</title>
</head>
<body>
<div class="header">
<i class="iconfont icon-toright"></i>
<i class="iconfont icon-fangdajing-copy"></i>
<input type="text" placeholder="女鞋">
<i class="iconfont icon-fenxiang"></i>
</div>
<div class="content">
<img src="../img/big_img.png" alt="" class="big_img">
<div class="price_name">
<div class="price">
￥ <span> 159.00</span> <del>￥ 199.00</del>
</div>
<p class="name">
【大牌驾到】NBA新款秋季女鞋NBA新款秋季女鞋
</p>
</div>
<ul class="config">
<li class="quan">
<p>
领券<span>满100减8</span><span>满200减30</span>
</p>
<i class="iconfont icon-youhuaxiangyougengduo"></i>
</li>
<li>
<p>已选：<span>*1</span></p>
<i class="iconfont icon-youhuaxiangyougengduo"></i>
</li>
</ul>
<div class="masking"></div>
<div class="popup">
<div class="popup_top">
<img src="../img/big_img.png" alt="">
<div class="top_r">
<div class="price">
￥ <span> 159.00</span> <del>￥ 199.00</del>
</div>
<p>请选择规格</p>
</div>
</div>
<ul class="popup_bot">
<li>
<p>颜色</p>
<span class="popup_active">黑色</span><span>白色</span>
</li>
<li>
<p>尺码</p>
<span>36</span><span class="popup_active">37</span>
</li>
<li>
<p>数量</p>
<div class="num">
<span>-</span><span class="shuzi">1</span><span>+</span>
</div>
</li>
</ul>
<p class="qd">确定</p>
</div>
</div>
</body>
</html>

133
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/six.html Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_4sdbjdkvdmu.css">
<link rel="stylesheet" href="../css/six.css">
<script src="../js/index.js"></script>
<title>six</title>
</head>
<body>
<div class="header_bg">
<div class="header padding_24">
<i class="iconfont icon-toright"></i>
<span>等待结算</span>
<span></span>
</div>
</div>
<div class="content padding_24">
<ul class="nav">
<li >全部</li>
<li class="nav_active">交易中</li>
<li>退款退货</li>
</ul>
<div class="wait">
<p>¥31.63</p>
<p>交易中待结算</p>
</div>
<div class="list">
<ul class="item">
<li class="count list_border">
<p>2018-11</p>
<p>待结算：￥798.00</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
</ul>
<ul class="item">
<li class="count list_border">
<p>2018-11</p>
<p>待结算：￥798.00</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
</ul>
<ul class="item">
<li class="count list_border">
<p>2018-11</p>
<p>待结算：￥798.00</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
</ul>
<ul class="item">
<li class="count list_border">
<p>2018-11</p>
<p>待结算：￥798.00</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
<li class="details list_border">
<p>
<span>订单：123456</span><span class="price">+399.00</span>
</p>
<p>
<span>2018-11-25</span><span class="state">系统结算中</span>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>

72
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/three.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_12pytt3qzjhi.css">
<link rel="stylesheet" href="../css/three.css">
<script src="../js/index.js"></script>
<title>three</title>
</head>
<body>
<header>
<i class="iconfont icon-toright"></i>
<p>详情</p>
<p>删除</p>
</header>
<div class="content">
<div class="content_left">
<img src="../img/-e-买家头像.png" alt="">
<p>6年店</p>
</div>
<div class="content_right">
<div class="right_top">
<h3>新手体验店</h3>
<p>来自：今日新款</p>
<p>本月上新31款</p>
<img src="../img/-e-产品图.png" alt="" class="pp">
<i class="iconfont icon-bofang"></i>
<p class="price_img">￥32.00</p>
<div class="addrtime_love">
<div class="addrtime">
<p>东莞.厂家直供一层30号</p>
<p>19/04/24 11：21</p>
</div>
<div class="love">
<i class="iconfont icon-xinaixin"></i>
<i class="iconfont icon-liaotian"></i>
</div>
</div>
</div>
<div class="right_bot">
<div class="comment_top">
<p>评论</p>
<p>批量删除评论</p>
</div>
<div class="comment_bot">
<i class="iconfont icon-liaotian"></i>
<ul>
<li>
<img src="../img/-e-买家头像.png" alt="">
<div class="comment_cont">
<h6>新手体验店</h6>
<p>好看好看好看好看好看好看好看好看</p>
</div>
</li>
<li>
<img src="../img/-e-买家头像.png" alt="">
<div class="comment_cont">
<h6>新手体验店</h6>
<p>好看好看好看好看好看好看好看好看</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

85
历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/two.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_gk7tpbs3bu.css">
<link rel="stylesheet" href="../css/two.css">
<script src="../js/index.js"></script>
<title>two</title>
</head>
<body>
<div class="header">
<i class="iconfont icon-toright"></i>
<i class="iconfont icon-fangdajing-copy"></i>
<input type="text" name="" id="" placeholder="搜索我的订单">
</div>
<!-- :hover 无效需要点击产生效果 -->
<!-- input 中的placeholder 文字有问题 -->
<ul class="nav">
<li>全部</li>
<li>待付款</li>
<li>待发货</li>
<li>待收货</li>
<li>待评价</li>
<li>已完成</li>
<li>售后</li>
<li>待收货</li>
<li>待评价</li>
<li>已完成</li>
<li>售后</li>
</ul>
<div class="content">
<div class="cont_top">
<div class="shop">
<i class="iconfont icon-shangjia"></i>
面包自营
<i class="iconfont icon-youhuaxiangyougengduo"></i>
</div>
<div class="wait">
待收货
</div>
</div>
<ul class="cont_mian">
<li>
<img src="../img/-e-产品图.png" alt="">
<div class="goods">
<p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
<span>独立包装+原味</span>
</div>
<div class="price">
<p>￥45.7</p>
<span>x1</span>
</div>
</li>
<li>
<img src="../img/-e-产品图.png" alt="">
<div class="goods">
<p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
<span>独立包装+原味</span>
</div>
<div class="price">
<p>￥45.7</p>
<span>x1</span>
</div>
</li>
<li>
<img src="../img/-e-产品图.png" alt="">
<div class="goods">
<p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
<span>独立包装+原味</span>
</div>
<div class="price">
<p>￥45.7</p>
<span>x1</span>
</div>
</li>
</ul>
<div class="cont_bot">
</div>
</div>
</body>
</html>