parent
18c03dec4a
commit
6352647b47
@ -0,0 +1,53 @@
|
||||
html{
|
||||
perspective: 3000px;
|
||||
/*perspective-origin: 50% 50%;*/
|
||||
}
|
||||
.cube{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/*background-color: #bbffaa;*/
|
||||
margin: 80px 65px;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg) rotateZ(45deg);
|
||||
animation: rotate 10s infinite linear;
|
||||
/*float: left;*/
|
||||
/*position: absolute;*/
|
||||
/*left: 500px;*/
|
||||
|
||||
|
||||
}
|
||||
.cube>div{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
}
|
||||
img{
|
||||
vertical-align: top;
|
||||
}
|
||||
.box1{
|
||||
transform: rotateY(90deg) translateZ(50px);
|
||||
}
|
||||
.box2{
|
||||
transform: rotateY(-90deg) translateZ(50px);
|
||||
}
|
||||
.box3{
|
||||
transform: rotateX(90deg) translateZ(50px);
|
||||
}
|
||||
.box4{
|
||||
transform: rotateX(-90deg) translateZ(50px);
|
||||
}
|
||||
.box5{
|
||||
transform: rotateY(180deg) translateZ(50px);
|
||||
}
|
||||
.box6{
|
||||
transform: rotateY(0deg) translateZ(50px);
|
||||
}
|
||||
@keyframes rotate {
|
||||
from{
|
||||
transform: rotateX(0) rotateZ(0);
|
||||
}
|
||||
to{
|
||||
transform: rotateX(1turn) rotateZ(1turn);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
body{
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.tableMyOrder{
|
||||
width:60%;
|
||||
border: 1px solid #F88020;
|
||||
border-radius: 18px;
|
||||
margin-left: 300px;
|
||||
|
||||
|
||||
}
|
||||
.tableMyOrder .good{
|
||||
background-color: #F88020;
|
||||
height:55px;
|
||||
font-size: 22px;
|
||||
color:white;
|
||||
line-height: 55px;
|
||||
font-weight: 200;
|
||||
border-radius: 18px 18px 0 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
.tableMyOrder .good table{
|
||||
width:100%;
|
||||
}
|
||||
.tableMyOrder .goods{
|
||||
height:45px;
|
||||
line-height: 45px;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.tableMyOrder .goods table{
|
||||
width:100%;
|
||||
}
|
||||
.tableMyOrder .goods table .btn1{
|
||||
width: 70px;
|
||||
height:28px;
|
||||
border: 2px solid #46B3E6;
|
||||
background-color: white;
|
||||
color: #46B3E6;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tableMyOrder .goods table button:hover{
|
||||
background-color: #46B3E6;
|
||||
color: white;
|
||||
}
|
||||
.tableMyOrder .goods1{
|
||||
margin-top: 10px;
|
||||
|
||||
background-color: grey;
|
||||
height:50px;
|
||||
font-size: 19px;
|
||||
color:white;
|
||||
line-height: 50px;
|
||||
font-weight: 200;
|
||||
border-radius:0 0 10px 10px ;
|
||||
}
|
||||
.tableMyOrder .goods2{
|
||||
border-top: 1px solid #F88020;
|
||||
margin-top: 10px;
|
||||
height:50px;
|
||||
font-size: 19px;
|
||||
line-height: 50px;
|
||||
font-weight: 200;
|
||||
border-radius:0 0 10px 10px ;
|
||||
}
|
||||
.tableMyOrder .goods1 table{
|
||||
|
||||
width:100%;
|
||||
}
|
||||
.tableMyOrder .goods1 .btn2{
|
||||
width: 70px;
|
||||
height:28px;
|
||||
border: 2px solid #21BF73;
|
||||
background-color: white;
|
||||
color: #21BF73;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tableMyOrder .goods1 .btn2:hover{
|
||||
color:white;
|
||||
background-color: #21BF73;
|
||||
}
|
||||
.tableMyOrder .goods1 .btn3{
|
||||
width: 80px;
|
||||
height:30px;
|
||||
border: 2px solid #FF0000;
|
||||
background-color: white;
|
||||
color: #FF0000;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tableMyOrder .goods1 .btn3:hover{
|
||||
color:white;
|
||||
background-color:#FF0000 ;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/*清除浮动*/
|
||||
.clearfloat{
|
||||
zoom:1
|
||||
}
|
||||
|
||||
.clearfloat:after{
|
||||
display:block;
|
||||
clear:both;
|
||||
content:"";
|
||||
visibility:hidden;
|
||||
height:0
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*中间居中盒子*/
|
||||
.center{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1621920685505') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-ShoppingCart:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
.icon-gouwu:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-fengshan:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-iconfont-zan:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-goumaihongbao:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-fujinshangjia:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-shouyefenxiang:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-tuichudenglu:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-xihuan:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-wodeshoucang:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-xiaoxi:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.icon-shouyewode:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-yaoqingzhucexiaoshenhou:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.icon-guozhi:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-beizidangao:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-buding:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.icon-cha:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-dangao:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-kafei:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-lanmei:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.icon-ningmeng:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.icon-qiyiguo:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.icon-sanmingzhi:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.icon-shengnvguo:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.icon-tusi:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-yingtao:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
@ -0,0 +1,276 @@
|
||||
/*reset*/
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
a:hover,a:visited,a:link,a:active,a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html,body,div,img,p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border-style:none;
|
||||
border-bottom: 2px solid white;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
ul li{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
img{
|
||||
|
||||
}
|
||||
/*关于头顶导航的设置*/
|
||||
header{
|
||||
background-color: #1d1811;
|
||||
color: #ffffff;
|
||||
height: 80px;
|
||||
}
|
||||
.header_mask{
|
||||
position: absolute;
|
||||
/*height: 100%;*/
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.header_container{
|
||||
width: 1200px;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
.navbar_brand{
|
||||
float: left;
|
||||
height: 80px;
|
||||
padding: 31px 0 0;
|
||||
font-size: 48px;
|
||||
line-height: 20px;
|
||||
color: #fff !important;
|
||||
font-family: 'Alex Brush', cursive;
|
||||
}
|
||||
.navbar_right ul{
|
||||
float: left;
|
||||
margin-left: 60px;
|
||||
|
||||
}
|
||||
.navbar_right ul li{
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
font-family: 'Cabin', sans-serif;
|
||||
font-size: 20px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.navbar_icon ul li{
|
||||
display: inline-block;
|
||||
}
|
||||
.navbar_icon ul{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
a:hover{
|
||||
color: #f89406;
|
||||
}
|
||||
a.active{
|
||||
color: #f89406;
|
||||
}
|
||||
/*第二部分以下*/
|
||||
.part2{
|
||||
margin-top: 29px;
|
||||
height: 448px;
|
||||
background-color: #eae7e8;
|
||||
}
|
||||
|
||||
.part2_content{
|
||||
padding-top: 39px;
|
||||
padding-left: 46px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.part2_content img{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.part2_content_right{
|
||||
/*float: left;*/
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
padding: 75px 58px 88px 82px;
|
||||
box-shadow:0px 9px 20px #333333;
|
||||
}
|
||||
|
||||
.part2_content_right_title{
|
||||
font-size: 55px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 62px;
|
||||
}
|
||||
|
||||
.part2_content_right_content{
|
||||
width: 588px;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.part2_content_video{
|
||||
position: absolute;
|
||||
width: 372px;
|
||||
height: 240px;
|
||||
top:386px;
|
||||
left: 166px;
|
||||
}
|
||||
|
||||
.part3{
|
||||
text-align: center;
|
||||
padding-top: 265px;
|
||||
}
|
||||
|
||||
.part3_title{
|
||||
font-size: 45px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 118px;
|
||||
}
|
||||
|
||||
.part3 li{
|
||||
display: inline-block;
|
||||
color: #000000;
|
||||
width: 377px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.part3_content_title{
|
||||
font-size: 25px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.part3_content{
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.part3 ul li+li{
|
||||
margin-left: 34px;
|
||||
}
|
||||
|
||||
.part3 ul{
|
||||
margin-bottom: 85px;
|
||||
}
|
||||
|
||||
.part3_bottom{
|
||||
width: 246px;
|
||||
margin:0 auto;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
background-color: #2b2b2b;
|
||||
color: #fbfbfb;
|
||||
font-size: 25px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.part3_bottom_icon{
|
||||
float: right;
|
||||
margin-right: 14px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.part4{
|
||||
background-color: #dad8d9;
|
||||
}
|
||||
|
||||
.part4_icon{
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
bottom: 170px;
|
||||
width: 90px;
|
||||
height: 36px;
|
||||
background-color: #e8024d;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #dad2d5;
|
||||
}
|
||||
|
||||
.part5{
|
||||
background-color: #6f6d6d;
|
||||
}
|
||||
|
||||
.footer{
|
||||
position: relative;
|
||||
background-image: url('../img/footer_banner.png');
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.footer_content{
|
||||
width: 586px;
|
||||
margin: 0 auto;
|
||||
padding-top: 227px;
|
||||
}
|
||||
|
||||
.footer_left{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.footer_center{
|
||||
display: inline-block;
|
||||
font-size: 113px;
|
||||
color: #b9b8b8;
|
||||
margin: 0 60px;
|
||||
}
|
||||
|
||||
.footer_right{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
font-size: 19px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.bottom_small {
|
||||
text-align: center;
|
||||
background-color: #535353;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
color: #b9b8b8;
|
||||
font-size: 15px;
|
||||
}
|
||||
.part3_content_drink{
|
||||
height: 600px;
|
||||
display: inline-block;
|
||||
margin-right: 60px;
|
||||
}
|
||||
.part3_content_drink img{
|
||||
width: 280px;
|
||||
height: 400px;
|
||||
}
|
||||
.cartButton input{
|
||||
width: 86px;
|
||||
height: 26px;
|
||||
border: 1px solid #707070;
|
||||
opacity: 1;
|
||||
border-radius: 60px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
/*reset*/
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
a:hover,a:visited,a:link,a:active,a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html,body,div,img,p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border-style:none;
|
||||
border-bottom: 2px solid white;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
ul li{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*关于头顶导航的设置*/
|
||||
header{
|
||||
background-color: #1d1811;
|
||||
color: #ffffff;
|
||||
height: 80px;
|
||||
}
|
||||
.header_mask{
|
||||
position: absolute;
|
||||
/*height: 100%;*/
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.header_container{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
.navbar_brand{
|
||||
float: left;
|
||||
height: 80px;
|
||||
padding: 31px 0 0;
|
||||
font-size: 48px;
|
||||
line-height: 20px;
|
||||
color: #fff !important;
|
||||
font-family: 'Alex Brush', cursive;
|
||||
}
|
||||
.navbar_right ul{
|
||||
float: left;
|
||||
margin-left: 60px;
|
||||
|
||||
}
|
||||
.navbar_right ul li{
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
font-family: 'Cabin', sans-serif;
|
||||
font-size: 20px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.navbar_icon ul li{
|
||||
display: inline-block;
|
||||
}
|
||||
.navbar_icon ul{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
a:hover{
|
||||
color: #f89406;
|
||||
}
|
||||
a.active{
|
||||
color: #f89406;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main{
|
||||
background: url(../img/banner.jpg) 0px 0px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.edit{
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.edit .title img{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.edit-board {
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
.edit input[type="text"], .edit textarea{
|
||||
width: 480px;
|
||||
margin: 10px 0;
|
||||
background: none;
|
||||
border: 1px solid #D9D9D9;
|
||||
color: #A3A3A3;
|
||||
padding: 13px 10px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.edit textarea{
|
||||
min-height: 200px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.edit input[type="submit"],.edit input[type="reset"] {
|
||||
width: 247.5px;
|
||||
margin: 10px 0;
|
||||
padding: 13px 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #AC915A;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
.edit input[type="submit"]:hover , .edit input[type="reset"]:hover{
|
||||
background: #F8782D;
|
||||
}
|
||||
|
||||
.show {
|
||||
margin: 50px 10%;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 10px 0;
|
||||
padding: 10px 20px;
|
||||
border: black solid 0.5px;
|
||||
border-radius: 20px;
|
||||
background: gainsboro;
|
||||
opacity: .8;
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
.message:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message h4 {
|
||||
color: darkgray;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
|
||||
.order_ul,.orderContentUl{
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
|
||||
}
|
||||
.order_ul li,.orderContentUl li{
|
||||
float:left;
|
||||
padding: 50px;
|
||||
font:25px verdana, arial, sans-serif;
|
||||
padding-left: 15px;
|
||||
}
|
||||
p{
|
||||
font:50px verdana, arial, sans-serif;
|
||||
padding-left: 80px;
|
||||
}
|
||||
li a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*li a:hover{*/
|
||||
/* background-color: #bbffaa;*/
|
||||
/*}*/
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
input{
|
||||
position: absolute;
|
||||
left:1000px;
|
||||
top:245px;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
.imgSearch{
|
||||
position:relative;
|
||||
left:-30px;
|
||||
top:123px;
|
||||
}
|
||||
hr{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.myOrder{
|
||||
position: relative;
|
||||
top: 250px;
|
||||
left: -600px;
|
||||
}
|
||||
.list-group-title{
|
||||
position: relative;
|
||||
right: 1100px;
|
||||
top: 250px;
|
||||
}
|
||||
.Table{
|
||||
width: 1100px;
|
||||
}
|
||||
.list-group-goods1{
|
||||
position: relative;
|
||||
left:-2230px;
|
||||
top: 400px;
|
||||
}
|
||||
.list-group-goods2{
|
||||
position: relative;
|
||||
left:-3330px;
|
||||
top: 800px;
|
||||
}
|
||||
.list-group-goods3{
|
||||
position: relative;
|
||||
left:-4430px;
|
||||
top: 1200px;
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
*{
|
||||
padding:0;
|
||||
margin:0;
|
||||
|
||||
}
|
||||
|
||||
.total{
|
||||
width:1200px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
height:1800px;
|
||||
|
||||
}
|
||||
|
||||
.p1{
|
||||
width:150px;
|
||||
height:50px;
|
||||
margin-left:100px;
|
||||
color:black;
|
||||
font-size:30px;
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
.search_form{
|
||||
|
||||
margin-top:50px;
|
||||
width:1200px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.input_text{
|
||||
|
||||
margin-top:10px;
|
||||
width:300px;
|
||||
height:32px;
|
||||
border:1px solid black;
|
||||
text-indent:10px;
|
||||
outline: none;
|
||||
float:right;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.input_sub{
|
||||
margin-top:10px;
|
||||
margin-right:200px;
|
||||
width:100px;
|
||||
height:34px;
|
||||
background: black;
|
||||
border:0px;
|
||||
color:#FFF;
|
||||
float:right;
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
|
||||
.text{
|
||||
width:auto;
|
||||
margin-top:30px;
|
||||
margin-left:100px;
|
||||
font-size:18px;
|
||||
|
||||
}
|
||||
|
||||
.text1{
|
||||
border:1px solid black;
|
||||
width:auto;
|
||||
margin-left:100px;
|
||||
margin-right:100px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.pay_box{
|
||||
font-size:30px;
|
||||
border:1px solid black;
|
||||
width:auto;
|
||||
margin-left:100px;
|
||||
margin-right:100px;
|
||||
margin-top:20px;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.table_sub{
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #4cae4c!important;
|
||||
border-radius: 4px;
|
||||
padding: 3px 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
function HideOrShowFont(obj) {
|
||||
if (obj == "a1") {
|
||||
document.getElementById("a1").style.color = "#bbffaa";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
|
||||
else if (obj == 'a2') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#bbffaa";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a3') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#bbffaa";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a4') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#bbffaa";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a5') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#bbffaa";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a6') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#bbffaa";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,181 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1622101868205') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-dingdan:before {
|
||||
content: "\f01be";
|
||||
}
|
||||
|
||||
.icon-dingdan1:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.icon-dingdan2:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.icon-zhuanjifenxinzhuce:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.icon-weibo-copy:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-qq-copy-copy:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.icon-weixindenglufanbai:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-denglu:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.icon-tuanduicankaoxian-:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-zhuce:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.icon-zhuce1:before {
|
||||
content: "\e71c";
|
||||
}
|
||||
|
||||
.icon-weixin:before {
|
||||
content: "\e77e";
|
||||
}
|
||||
|
||||
.icon-qq:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.icon-dingdan3:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-ShoppingCart:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
.icon-icon_xinyong_xianxing_jijin-183:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-tuichudenglu:before {
|
||||
content: "\efa6";
|
||||
}
|
||||
|
||||
.icon-gouwu:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-fengshan:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-iconfont-zan:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-goumaihongbao:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.icon-fujinshangjia:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-shouyefenxiang:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-tuichudenglu1:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-xihuan:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.icon-wodeshoucang:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.icon-xiaoxi:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.icon-shouyewode:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.icon-yaoqingzhucexiaoshenhou:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-guozhi:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-beizidangao:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.icon-buding:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-cha:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-dangao:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-kafei:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.icon-lanmei:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.icon-ningmeng:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.icon-qiyiguo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.icon-sanmingzhi:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.icon-shengnvguo:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-tusi:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.icon-yingtao:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,303 @@
|
||||
{
|
||||
"id": "",
|
||||
"name": "",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "1375",
|
||||
"name": "订单",
|
||||
"font_class": "dingdan",
|
||||
"unicode": "f01be",
|
||||
"unicode_decimal": 983486
|
||||
},
|
||||
{
|
||||
"icon_id": "765110",
|
||||
"name": "订单",
|
||||
"font_class": "dingdan1",
|
||||
"unicode": "e667",
|
||||
"unicode_decimal": 58983
|
||||
},
|
||||
{
|
||||
"icon_id": "947048",
|
||||
"name": "订单",
|
||||
"font_class": "dingdan2",
|
||||
"unicode": "e652",
|
||||
"unicode_decimal": 58962
|
||||
},
|
||||
{
|
||||
"icon_id": "966301",
|
||||
"name": "积分商城-新注册",
|
||||
"font_class": "zhuanjifenxinzhuce",
|
||||
"unicode": "e690",
|
||||
"unicode_decimal": 59024
|
||||
},
|
||||
{
|
||||
"icon_id": "986225",
|
||||
"name": "微博",
|
||||
"font_class": "weibo-copy",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "986277",
|
||||
"name": "qq",
|
||||
"font_class": "qq-copy-copy",
|
||||
"unicode": "e65c",
|
||||
"unicode_decimal": 58972
|
||||
},
|
||||
{
|
||||
"icon_id": "1168075",
|
||||
"name": "微信登录反白",
|
||||
"font_class": "weixindenglufanbai",
|
||||
"unicode": "e607",
|
||||
"unicode_decimal": 58887
|
||||
},
|
||||
{
|
||||
"icon_id": "2569869",
|
||||
"name": "登录",
|
||||
"font_class": "denglu",
|
||||
"unicode": "e67c",
|
||||
"unicode_decimal": 59004
|
||||
},
|
||||
{
|
||||
"icon_id": "5343677",
|
||||
"name": "订单",
|
||||
"font_class": "tuanduicankaoxian-",
|
||||
"unicode": "e63f",
|
||||
"unicode_decimal": 58943
|
||||
},
|
||||
{
|
||||
"icon_id": "6851465",
|
||||
"name": "注册",
|
||||
"font_class": "zhuce",
|
||||
"unicode": "e6d6",
|
||||
"unicode_decimal": 59094
|
||||
},
|
||||
{
|
||||
"icon_id": "7090090",
|
||||
"name": "注册",
|
||||
"font_class": "zhuce1",
|
||||
"unicode": "e71c",
|
||||
"unicode_decimal": 59164
|
||||
},
|
||||
{
|
||||
"icon_id": "11758475",
|
||||
"name": "微信",
|
||||
"font_class": "weixin",
|
||||
"unicode": "e77e",
|
||||
"unicode_decimal": 59262
|
||||
},
|
||||
{
|
||||
"icon_id": "15765375",
|
||||
"name": "qq",
|
||||
"font_class": "qq",
|
||||
"unicode": "e69b",
|
||||
"unicode_decimal": 59035
|
||||
},
|
||||
{
|
||||
"icon_id": "15992235",
|
||||
"name": "订单",
|
||||
"font_class": "dingdan3",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "17273256",
|
||||
"name": "购物车",
|
||||
"font_class": "ShoppingCart",
|
||||
"unicode": "e6e3",
|
||||
"unicode_decimal": 59107
|
||||
},
|
||||
{
|
||||
"icon_id": "18299650",
|
||||
"name": "退出登录",
|
||||
"font_class": "icon_xinyong_xianxing_jijin-183",
|
||||
"unicode": "e653",
|
||||
"unicode_decimal": 58963
|
||||
},
|
||||
{
|
||||
"icon_id": "18538433",
|
||||
"name": "退出登录",
|
||||
"font_class": "tuichudenglu",
|
||||
"unicode": "efa6",
|
||||
"unicode_decimal": 61350
|
||||
},
|
||||
{
|
||||
"icon_id": "21398237",
|
||||
"name": "购物",
|
||||
"font_class": "gouwu",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "21593285",
|
||||
"name": "风扇",
|
||||
"font_class": "fengshan",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
},
|
||||
{
|
||||
"icon_id": "21598345",
|
||||
"name": "iconfont-zan",
|
||||
"font_class": "iconfont-zan",
|
||||
"unicode": "e63c",
|
||||
"unicode_decimal": 58940
|
||||
},
|
||||
{
|
||||
"icon_id": "21598347",
|
||||
"name": "购买红包",
|
||||
"font_class": "goumaihongbao",
|
||||
"unicode": "e63d",
|
||||
"unicode_decimal": 58941
|
||||
},
|
||||
{
|
||||
"icon_id": "21598349",
|
||||
"name": "附近商家",
|
||||
"font_class": "fujinshangjia",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "21598355",
|
||||
"name": "首页分享",
|
||||
"font_class": "shouyefenxiang",
|
||||
"unicode": "e640",
|
||||
"unicode_decimal": 58944
|
||||
},
|
||||
{
|
||||
"icon_id": "21598357",
|
||||
"name": "退出登录",
|
||||
"font_class": "tuichudenglu1",
|
||||
"unicode": "e641",
|
||||
"unicode_decimal": 58945
|
||||
},
|
||||
{
|
||||
"icon_id": "21598358",
|
||||
"name": "喜欢",
|
||||
"font_class": "xihuan",
|
||||
"unicode": "e642",
|
||||
"unicode_decimal": 58946
|
||||
},
|
||||
{
|
||||
"icon_id": "21598362",
|
||||
"name": "我的收藏",
|
||||
"font_class": "wodeshoucang",
|
||||
"unicode": "e643",
|
||||
"unicode_decimal": 58947
|
||||
},
|
||||
{
|
||||
"icon_id": "21598363",
|
||||
"name": "消息",
|
||||
"font_class": "xiaoxi",
|
||||
"unicode": "e644",
|
||||
"unicode_decimal": 58948
|
||||
},
|
||||
{
|
||||
"icon_id": "21598364",
|
||||
"name": "首页我的",
|
||||
"font_class": "shouyewode",
|
||||
"unicode": "e645",
|
||||
"unicode_decimal": 58949
|
||||
},
|
||||
{
|
||||
"icon_id": "21598365",
|
||||
"name": "邀请注册小神猴",
|
||||
"font_class": "yaoqingzhucexiaoshenhou",
|
||||
"unicode": "e646",
|
||||
"unicode_decimal": 58950
|
||||
},
|
||||
{
|
||||
"icon_id": "21643423",
|
||||
"name": "果汁",
|
||||
"font_class": "guozhi",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "21643424",
|
||||
"name": "杯子蛋糕",
|
||||
"font_class": "beizidangao",
|
||||
"unicode": "e648",
|
||||
"unicode_decimal": 58952
|
||||
},
|
||||
{
|
||||
"icon_id": "21643426",
|
||||
"name": "布丁",
|
||||
"font_class": "buding",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "21643427",
|
||||
"name": "茶",
|
||||
"font_class": "cha",
|
||||
"unicode": "e64a",
|
||||
"unicode_decimal": 58954
|
||||
},
|
||||
{
|
||||
"icon_id": "21643430",
|
||||
"name": "蛋糕 ",
|
||||
"font_class": "dangao",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "21643432",
|
||||
"name": "咖啡",
|
||||
"font_class": "kafei",
|
||||
"unicode": "e64c",
|
||||
"unicode_decimal": 58956
|
||||
},
|
||||
{
|
||||
"icon_id": "21643433",
|
||||
"name": "蓝莓",
|
||||
"font_class": "lanmei",
|
||||
"unicode": "e64d",
|
||||
"unicode_decimal": 58957
|
||||
},
|
||||
{
|
||||
"icon_id": "21643434",
|
||||
"name": "柠檬",
|
||||
"font_class": "ningmeng",
|
||||
"unicode": "e64e",
|
||||
"unicode_decimal": 58958
|
||||
},
|
||||
{
|
||||
"icon_id": "21643439",
|
||||
"name": "奇异果",
|
||||
"font_class": "qiyiguo",
|
||||
"unicode": "e64f",
|
||||
"unicode_decimal": 58959
|
||||
},
|
||||
{
|
||||
"icon_id": "21643440",
|
||||
"name": "三明治",
|
||||
"font_class": "sanmingzhi",
|
||||
"unicode": "e650",
|
||||
"unicode_decimal": 58960
|
||||
},
|
||||
{
|
||||
"icon_id": "21643441",
|
||||
"name": "圣女果",
|
||||
"font_class": "shengnvguo",
|
||||
"unicode": "e651",
|
||||
"unicode_decimal": 58961
|
||||
},
|
||||
{
|
||||
"icon_id": "21643442",
|
||||
"name": "吐司",
|
||||
"font_class": "tusi",
|
||||
"unicode": "e654",
|
||||
"unicode_decimal": 58964
|
||||
},
|
||||
{
|
||||
"icon_id": "21643446",
|
||||
"name": "樱桃",
|
||||
"font_class": "yingtao",
|
||||
"unicode": "e655",
|
||||
"unicode_decimal": 58965
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>订单详情</title>
|
||||
<link rel="stylesheet" href="./3D旋转图.css">
|
||||
<link rel="stylesheet" href="./订单文字设置.css">
|
||||
<link rel="stylesheet" href="./超链接字体改变.js">
|
||||
<!-- <link href="car.css" rel="stylesheet" type="text/css">-->
|
||||
<style>
|
||||
.demo1{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #bbffaa;
|
||||
display: flex;
|
||||
}
|
||||
.demo2{
|
||||
width: 100%;
|
||||
height: 2048px;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
/*flex-direction: column;*/
|
||||
}
|
||||
.demo1{
|
||||
height: 100%;
|
||||
width: 1200px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
}
|
||||
.tableMyOrder{
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 500px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="Demo" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||||
|
||||
<img class="demo1" src="order.jpg"></img>
|
||||
<div class="demo2" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||||
<div class="cube">
|
||||
<div class="box1">
|
||||
<img src="./1.png" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box2" >
|
||||
<img src="2.png" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box3">
|
||||
<img src="3.png" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box4">
|
||||
<img src="4.png" style="height: 100px;width: 100px" >
|
||||
</div>
|
||||
<div class="box5">
|
||||
<img src="5.png" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box6">
|
||||
<img src="6.png" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p name="MyOrder">我的订单</p>
|
||||
<hr style="width : 900px">
|
||||
<ul class="orderContentUl">
|
||||
<li><a href="javascript:HideOrShowFont('a1')" id="a1" >全部订单</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a2')" id="a2" >待支付</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a3')" id="a3" >待收货</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a4')" id="a4" >已完成</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a5')" id="a5" >待评价</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a6')" id="a6" >已取消</a></li>
|
||||
</ul>
|
||||
<script src="超链接字体改变.js"></script>
|
||||
</div>
|
||||
<div>
|
||||
<form action="post">
|
||||
<input type="text" value="请输入订单号">
|
||||
<a href="javascript:SearchOrder()" ><img src="搜索图标.png" alt="搜索图标" class="imgSearch" style="width: 45px;height: 45px"></a>
|
||||
<script>
|
||||
function SearchOrder() {
|
||||
alert("请输入正确订单号！");
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-group-title">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center">商品</th>
|
||||
<th>单价/元</th>
|
||||
<th>数量</th>
|
||||
<th>状态</th>
|
||||
<th>实付款/元</th>
|
||||
<th>订单状态及操作</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods1">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="饮品1.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods2">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="饮品3.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods3">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="饮品2.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 37 KiB |
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>饮品首页</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header style="height: 690px">
|
||||
<div class="header_mask" style="height: 100%">
|
||||
<div class="header_container">
|
||||
<div class="navbar_left">
|
||||
<a class="navbar_brand">SummerTime</a>
|
||||
<div style="clear: both;display: inline-block"></div>
|
||||
</div>
|
||||
<div class="navbar_right">
|
||||
<ul>
|
||||
<li><a href="./index.html"> Index</a></li>
|
||||
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||||
<li><a href="">Services</a></li>
|
||||
<li><a href="./message.html">MessageBoard</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar_icon">
|
||||
<ul >
|
||||
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||||
</ul>
|
||||
<span style="clear: both"></span>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<img src="img/banner.jpg" alt="" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
<!-- 第二部分 -->
|
||||
<div class="part2">
|
||||
<div class="center part2_content" >
|
||||
<img src="img/part2.jpg" alt="" class="clearfloat" style="width: 410px;height: 485px">
|
||||
<div class="part2_content_right">
|
||||
<p class="part2_content_right_title">Welcome to Summertime</p>
|
||||
<p class="part2_content_right_content">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
||||
<p class="part2_content_right_content" style="margin-top: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
|
||||
</div>
|
||||
<!-- <video class="part2_content_video" src="" controls="controls"></video> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="part3">
|
||||
<div class="center part3_content">
|
||||
<div class="part3_content_drink">
|
||||
<img src="img/drink1.jpg" alt="">
|
||||
<p>夏日樱桃冰冰</p>
|
||||
<div class="cartButton">
|
||||
<input type="submit" value="立即购买">
|
||||
<input type="submit" value="加入购物车">
|
||||
</div>
|
||||
</div>
|
||||
<div class="part3_content_drink">
|
||||
<img src="img/drink2.jpg" alt="">
|
||||
<p>柠檬雪碧</p>
|
||||
<div class="cartButton">
|
||||
<input type="submit" value="立即购买">
|
||||
<input type="submit" value="加入购物车">
|
||||
</div>
|
||||
</div>
|
||||
<div class="part3_content_drink">
|
||||
<img src="img/drink3.jpg" alt="">
|
||||
<p>浓浓奶茶</p>
|
||||
<div class="cartButton">
|
||||
<input type="submit" value="立即购买">
|
||||
<input type="submit" value="加入购物车">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部小字 -->
|
||||
<div class="bottom_small">© rj1907 版权所有 不得转载</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
function HideOrShowFont(obj) {
|
||||
if (obj == "a1") {
|
||||
document.getElementById("a1").style.color = "#bbffaa";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
|
||||
else if (obj == 'a2') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#bbffaa";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a3') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#bbffaa";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a4') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#bbffaa";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a5') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#bbffaa";
|
||||
document.getElementById("a6").style.color = "#333";
|
||||
}
|
||||
else if (obj == 'a6') {
|
||||
document.getElementById("a1").style.color = "#333";
|
||||
document.getElementById("a2").style.color = "#333";
|
||||
document.getElementById("a3").style.color = "#333";
|
||||
document.getElementById("a4").style.color = "#333";
|
||||
document.getElementById("a5").style.color = "#333";
|
||||
document.getElementById("a6").style.color = "#bbffaa";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE >
|
||||
<html>
|
||||
<html lang="ch">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style type="text/css">
|
||||
|
||||
.content{
|
||||
width: 40%;
|
||||
height:45%;
|
||||
margin: 80px auto;
|
||||
|
||||
background-color: #CCC;
|
||||
text-align-last: center;
|
||||
/*这里做一个半透明效果*/
|
||||
filter:alpha(Opacity=60);
|
||||
-moz-opacity:0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#userid{
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border-radius: 25px;/*边框圆角*/
|
||||
}
|
||||
#password{
|
||||
color: #333;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
#denglu{
|
||||
background-color: #FFF;
|
||||
border-radius:10px;
|
||||
border:0;/*边框宽度0*/
|
||||
height:50px;
|
||||
width:90px;
|
||||
padding:5px 10px;/*上下填充10 左右5*/
|
||||
font-size: 20px;
|
||||
}
|
||||
#zhuce{
|
||||
background-color: #FFF;
|
||||
border-radius:10px;
|
||||
border:0;/*边框宽度0*/
|
||||
height:50px;
|
||||
width:90px;
|
||||
padding:5px 10px;/*上下填充10 左右5*/
|
||||
font-size: 20px;
|
||||
}
|
||||
#content h1{
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
}
|
||||
.loginWrap{
|
||||
margin: 32px auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
background-image: url(img/lo.jpg);
|
||||
background-attachment: fixed;
|
||||
background-repeat:no-repeat;
|
||||
background-size:100% 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
h1{
|
||||
margin-top: 70px;
|
||||
margin-bottom: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
form{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="fun()">
|
||||
<header>
|
||||
<div class="header_mask">
|
||||
<div class="header_container">
|
||||
<div class="navbar_left">
|
||||
<a class="navbar_brand">SummerTime</a>
|
||||
<div style="clear: both;display: inline-block"></div>
|
||||
</div>
|
||||
<div class="navbar_right">
|
||||
<ul>
|
||||
<li><a href="./index.html"> Index</a></li>
|
||||
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||||
<li><a href="">Services</a></li>
|
||||
<li><a href="">MessageBoard</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar_icon">
|
||||
<ul >
|
||||
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="loginWrap">
|
||||
<div class="content">
|
||||
<h1 >Welcome</h1><br />
|
||||
<form action="#"method="post" >
|
||||
<input type="text" name="userid" id="userid" placeholder="请输入账号（手机号码）" /><br /><br />
|
||||
<input type="password" name="password" id="password" placeholder="请输入密码" /><br /><br />
|
||||
</form>
|
||||
<input type="submit" name="denglu" id="denglu" value="登录" />
|
||||
<a href="./register.html" target="_blank"><input type="button" name="zhuce"id="zhuce"value="注册"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MessageBoard</title>
|
||||
<link rel="stylesheet" href="js/超链接字体改变.js">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/message.css">
|
||||
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header_mask">
|
||||
<div class="header_container">
|
||||
<div class="navbar_left">
|
||||
<a class="navbar_brand">SummerTime</a>
|
||||
<div style="clear: both;display: inline-block"></div>
|
||||
</div>
|
||||
<div class="navbar_right">
|
||||
<ul>
|
||||
<li><a href="./index.html"> Index</a></li>
|
||||
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||||
<li><a href="">Services</a></li>
|
||||
<li><a href="">MessageBoard</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar_icon">
|
||||
<ul >
|
||||
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main">
|
||||
<div class="edit">
|
||||
<div class="title">
|
||||
<img src="img/mb1.png">
|
||||
</div>
|
||||
<div class="edit-board">
|
||||
<form action="">
|
||||
<input type="text" value="Name">
|
||||
<textarea>Thanks for your Message</textarea>
|
||||
<input type="submit" value="Submit">
|
||||
<input type="reset" value="Clear">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show">
|
||||
<div class="message">
|
||||
<h3 name>小李</h3>
|
||||
<div class="text">很好</div>
|
||||
<h4 class="time">2021-5-30</h4>
|
||||
</div>
|
||||
<div class="message">
|
||||
<h3 name>小涛</h3>
|
||||
<div class="text">下次再来</div>
|
||||
<h4 class="time">2021-5-29</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>订单详情</title>
|
||||
<link rel="stylesheet" href="css/3D旋转图.css">
|
||||
<link rel="stylesheet" href="css/订单文字设置.css">
|
||||
<link rel="stylesheet" href="js/超链接字体改变.js">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||||
<!-- <link href="car.css" rel="stylesheet" type="text/css">-->
|
||||
<style>
|
||||
.demo1{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #bbffaa;
|
||||
display: flex;
|
||||
}
|
||||
.demo2{
|
||||
width: 100%;
|
||||
height: 2048px;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
/*flex-direction: column;*/
|
||||
}
|
||||
.demo1{
|
||||
height: 100%;
|
||||
width: 1200px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
}
|
||||
.tableMyOrder{
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 500px;
|
||||
right: 200px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header_mask">
|
||||
<div class="header_container">
|
||||
<div class="navbar_left">
|
||||
<a class="navbar_brand">SummerTime</a>
|
||||
<div style="clear: both;display: inline-block"></div>
|
||||
</div>
|
||||
<div class="navbar_right">
|
||||
<ul>
|
||||
<li><a href="./index.html"> Index</a></li>
|
||||
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||||
<li><a href="">Services</a></li>
|
||||
<li><a href="">MessageBoard</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar_icon">
|
||||
<ul >
|
||||
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="Demo" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||||
|
||||
<img class="demo1" src="img/order.jpg"></img>
|
||||
<div class="demo2" style="width: 1200px;margin-left: auto;margin-right: auto">
|
||||
<div class="cube">
|
||||
<div class="box1">
|
||||
<img src="img/1.jpg" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box2" >
|
||||
<img src="img/2.jpg" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box3">
|
||||
<img src="img/3.jpg" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box4">
|
||||
<img src="img/4.jpg" style="height: 100px;width: 100px" >
|
||||
</div>
|
||||
<div class="box5">
|
||||
<img src="img/5.jpg" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
<div class="box6">
|
||||
<img src="img/6.jpg" style="height: 100px;width: 100px">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p name="MyOrder">我的订单</p>
|
||||
<hr style="width : 900px">
|
||||
<ul class="orderContentUl">
|
||||
<li><a href="javascript:HideOrShowFont('a1')" id="a1" >全部订单</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a2')" id="a2" >待支付</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a3')" id="a3" >待收货</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a4')" id="a4" >已完成</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a5')" id="a5" >待评价</a></li>
|
||||
<li><a href="javascript:HideOrShowFont('a6')" id="a6" >已取消</a></li>
|
||||
</ul>
|
||||
<script src="js/超链接字体改变.js"></script>
|
||||
</div>
|
||||
<div>
|
||||
<form action="post">
|
||||
<input type="text" value="请输入订单号">
|
||||
<a href="javascript:SearchOrder()" ><img src="img/搜索图标.png" alt="搜索图标" class="imgSearch" style="width: 45px;height: 45px"></a>
|
||||
<script>
|
||||
function SearchOrder() {
|
||||
alert("请输入正确订单号！");
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-group-title">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center">商品</th>
|
||||
<th>单价/元</th>
|
||||
<th>数量</th>
|
||||
<th>状态</th>
|
||||
<th>实付款/元</th>
|
||||
<th>订单状态及操作</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods1">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="img/饮品1.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods2">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="img/饮品3.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
<div class="list-group-goods3">
|
||||
<table border="0" cellspacing="0" cellspacing="0" class="Table">
|
||||
<therd>
|
||||
<tr>
|
||||
<th width="500px" style="text-align: center"><img src="img/饮品2.jpg" width="180px"></th>
|
||||
<th>20/元</th>
|
||||
<th>1</th>
|
||||
<th>已支付</th>
|
||||
<th>20/元</th>
|
||||
<th>已完成</th>
|
||||
</tr>
|
||||
</therd>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,117 @@
|
||||
|
||||
<!DOCTYPE >
|
||||
<html>
|
||||
<html lang="ch">
|
||||
<head>
|
||||
<title>注册</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="iconfont/iconfont.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<script type="text/javascript">
|
||||
|
||||
function onclickfun(){
|
||||
var nameobj=document.getElementById("zcname");
|
||||
var nametext=nameobj.value;
|
||||
var namespanobj=document.getElementById("namespan");
|
||||
var natt=/^((\+?86)|(\+86\+86))?\d{3,4}-\d{7,8}(-\d{3,4})?$/
|
||||
;
|
||||
if(natt.test(nametext)!=true){
|
||||
namespanobj.innerHTML="用户名不合要求";
|
||||
}
|
||||
var passobj=document.getElementById("zcpass");
|
||||
var passtext=passobj.value;
|
||||
var passspanobj=document.getElementById("passspan");
|
||||
var patt=/^\w{6,12}$/;
|
||||
if(patt.test(passtext)!=true){
|
||||
passspanobj.innerHTML="密码不合要求";
|
||||
}
|
||||
var passrobj=document.getElementById("zcrpass");
|
||||
var passrtext=passrobj.value;
|
||||
var passrspanobj=document.getElementById("passrspan");
|
||||
if(passrtext!=passtext){
|
||||
passrspanobj.innerHTML="密码不正确";
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
#lunkuo{
|
||||
position: absolute;
|
||||
top: 50%;/*顶部到元素*/
|
||||
left:30%;
|
||||
width: 40%;
|
||||
height:420px;
|
||||
margin-top:-200px;/*边缘到底部*/
|
||||
background-color:#CCC;
|
||||
text-align-last: center;
|
||||
filter:alpha(Opacity=60);-
|
||||
moz-opacity:0.6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
#lunkuo input{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.registerWrap{
|
||||
margin: 32px auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
background-image: url(img/banner.jpg);
|
||||
background-attachment: fixed;
|
||||
background-repeat:no-repeat;
|
||||
background-size:100% 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
form{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="fun()">
|
||||
<header>
|
||||
<div class="header_mask">
|
||||
<div class="header_container">
|
||||
<div class="navbar_left">
|
||||
<a class="navbar_brand">SummerTime</a>
|
||||
<div style="clear: both;display: inline-block"></div>
|
||||
</div>
|
||||
<div class="navbar_right">
|
||||
<ul>
|
||||
<li><a href="./index.html"> Index</a></li>
|
||||
<li><a href=""><span class="iconfont icon-cha " style="font-size: 24px!important;"></span>Popular drinks</a></li>
|
||||
<li><a href="">Services</a></li>
|
||||
<li><a href="">MessageBoard</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar_icon">
|
||||
<ul >
|
||||
<li><a href="./order.html"><span class="iconfont icon-dingdan1 " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./cart.html"><span class="iconfont icon-goumaihongbao " style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./login.html"><span class="iconfont icon-shouyewode" style="font-size: 30px!important;"></span></a></li>
|
||||
<li><a href="./register.html"><span class="iconfont icon-zhuce " style="font-size: 30px!important;"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="registerWrap">
|
||||
<div id="lunkuo">
|
||||
<h1 style="color:#FFF;">注册</h1><br />
|
||||
<form action="#" method="post">
|
||||
|
||||
用户名:<input type="text" name="username" id="zcname" placeholder="手机号码"/><span id="namespan"style="color: red;"></span><br /><br />
|
||||
|
||||
密码：<input type="password" name="password1" id="zcpass" placeholder="密码:6-12位" /><span id="passspan"style="color: red;"></span><br /><br />
|
||||
住址：<input type="text" name="address" id="zcaddress" placeholder="家庭住址"/><span id="addrspan"style="color: red;"></span><br />
|
||||
|
||||
</form>
|
||||
<input type="reset" value="重置">
|
||||
<input type="submit" onClick="window.open('login.html')" value="提交">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in new issue