push all files
This commit is contained in:
75
css/base.css
Normal file
75
css/base.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* 基本样式 */
|
||||
|
||||
/* 把我们所有标签的内外边距清零 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* css3盒子模型 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* em 和 i 斜体的文字不倾斜 */
|
||||
em,
|
||||
i {
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
/* 去掉li 的小圆点 */
|
||||
li {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
img {
|
||||
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
|
||||
border: 0;
|
||||
/* 取消图片底侧有空白缝隙的问题 */
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
button {
|
||||
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
/* 默认有灰色边框我们需要手动去掉 */
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
color: #666
|
||||
}
|
||||
|
||||
.hide,
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 清除浮动 */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* .clearfix {
|
||||
*zoom: 1;
|
||||
} */
|
||||
340
css/common.css
Normal file
340
css/common.css
Normal file
@@ -0,0 +1,340 @@
|
||||
/* 注意路径 */
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('../fonts/iconfont.ttf?t=1665284552908') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
/* 版心 */
|
||||
.w {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
background-color: #e3e4e5;
|
||||
}
|
||||
|
||||
.style_red {
|
||||
color: #c81623 !important;
|
||||
}
|
||||
|
||||
.style_blac {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.shortcut ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.shortcut .fr ul li:nth-child(even) {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background-color: #666;
|
||||
margin: 9px 16px 0;
|
||||
}
|
||||
|
||||
/* <!-- 头部制作 start --> */
|
||||
.header {
|
||||
position: relative;
|
||||
height: 106px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 171px;
|
||||
height: 61px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.logo a {
|
||||
font-size: 0;
|
||||
display: block;
|
||||
width: 171px;
|
||||
height: 61px;
|
||||
background: url(../images/logo2.png) no-repeat;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 348px;
|
||||
width: 538px;
|
||||
height: 36px;
|
||||
border: 2px solid #ff7000;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
.search input {
|
||||
width: 454px;
|
||||
height: 32px;
|
||||
padding: 10px 0 10px 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.search button {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
color: #ff9000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border-left: 2px solid #ff7000;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.search button:hover {
|
||||
color: #ff2a00;
|
||||
}
|
||||
|
||||
|
||||
.hotwords {
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
left: 348px;
|
||||
}
|
||||
|
||||
.hotwords a {
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.shopcar {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 64px;
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
padding: 0 14px 0 18px;
|
||||
text-align: center;
|
||||
border: 1px solid #dfdfdf;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.shopcar i {
|
||||
float: left;
|
||||
line-height: 35px;
|
||||
font-size: 25px;
|
||||
color: #ff7000;
|
||||
}
|
||||
|
||||
.shopcar em {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.shopcar_icon {
|
||||
position: absolute;
|
||||
padding: 0 3px;
|
||||
left: 100px;
|
||||
top: -10px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
background-color: #ff7000;
|
||||
border-radius: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
.shopcar_icon a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.shopcar_icon a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* nav start */
|
||||
.nav {
|
||||
position: relative;
|
||||
height: 46px;
|
||||
border-bottom: 2px solid #b1191a;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dropdown .dt {
|
||||
|
||||
width: 208px;
|
||||
height: 46px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
border-radius: 23px 23px 0 0;
|
||||
background-color: #ff7000;
|
||||
}
|
||||
|
||||
.dropdown .dd ul li a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
height: 31px;
|
||||
line-height: 30px;
|
||||
padding-left: 10px;
|
||||
background-color: #ff9000;
|
||||
}
|
||||
|
||||
/* .dropdown .dd {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
/* 测试, 以后放到其他页面样式里 */
|
||||
|
||||
.dropdown .dd ul li a em {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dropdown .dd ul li a:hover {
|
||||
color: #c81623;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dropdown .dd ul li .last {
|
||||
line-height: 34px;
|
||||
border-radius: 0 0 23px 23px;
|
||||
}
|
||||
|
||||
.navitems {
|
||||
float: left;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
|
||||
.navitems ul li {
|
||||
float: left;
|
||||
margin-left: 52px;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 415px;
|
||||
padding-top: 30px;
|
||||
background-color: #e3e4e5;
|
||||
}
|
||||
|
||||
.mod_service {
|
||||
height: 80px;
|
||||
border-bottom: 2px solid #ededed;
|
||||
}
|
||||
|
||||
.mod_service ul li {
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 50px;
|
||||
padding-left: 35px;
|
||||
|
||||
}
|
||||
|
||||
.mod_service ul li h5 {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: #ff7000;
|
||||
border-radius: 25px;
|
||||
/* background: url(../images/zheng.png) no-repeat; */
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.mod_service ul li div {
|
||||
float: left;
|
||||
padding: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.mod_service ul li h2 {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.mod_service ul li h2:hover {
|
||||
color: #c81623;
|
||||
}
|
||||
|
||||
.mod_service ul li p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.mod_help {
|
||||
height: 188px;
|
||||
border-bottom: 2px solid #ededed;
|
||||
}
|
||||
|
||||
.mod_help dl {
|
||||
float: left;
|
||||
width: 200px;
|
||||
padding: 20px 0 0 52px;
|
||||
}
|
||||
|
||||
.mod_help dl dt {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mod_help dl dd {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mod_help dl:last-child {
|
||||
padding-left: 5px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mod_help .erweima {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.footer_bottom {
|
||||
text-align: center;
|
||||
padding: 20px 100px 0;
|
||||
}
|
||||
|
||||
.footer_bottom p a {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer_bottom p a:hover {
|
||||
color: #b1191a;
|
||||
}
|
||||
|
||||
.footer_bottom p:nth-child(2) {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
442
css/index.css
Normal file
442
css/index.css
Normal file
@@ -0,0 +1,442 @@
|
||||
.toolkit {
|
||||
position: fixed;
|
||||
color: #fff;
|
||||
/* left: 50%;
|
||||
margin-left: 610px; */
|
||||
right: 0;
|
||||
top: 35%;
|
||||
background-color: rgba(255, 123, 0, .8);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.toolkit li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
height: 30px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.toolkit .returntop {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
.toolkit li:hover {
|
||||
background-color: rgba(255, 123, 0, 1);
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 990px;
|
||||
height: 480px;
|
||||
/* background-color: skyblue; */
|
||||
margin-left: 220px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.main .focus {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 721px;
|
||||
height: 455px;
|
||||
overflow: hidden;
|
||||
/* background-color: purple; */
|
||||
/* background: url(../images/banner.jpg); */
|
||||
}
|
||||
|
||||
.main .focus .arrow {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
top: 220px;
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.main .focus .arrow:hover {
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.main .focus .arrow img {
|
||||
margin-top: 5px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.main .focus .arrow_left {
|
||||
display: none;
|
||||
left: 0;
|
||||
border-radius: 0 15px 15px 0;
|
||||
}
|
||||
|
||||
.main .focus .arrow_right {
|
||||
display: none;
|
||||
right: 0;
|
||||
border-radius: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.main .focus .arrow_right img {
|
||||
float: right;
|
||||
/*保持左右对齐*/
|
||||
}
|
||||
|
||||
.main .focus .spot {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
/*右移整个盒子的50%*/
|
||||
transform: translateX(-50%);
|
||||
/*再左移整个盒子的50%的距离，让该盒子的中心，正好位于父盒子的中心*/
|
||||
z-index: 999;
|
||||
padding: 6px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.main .focus .spot li {
|
||||
float: left;
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
margin-left: 6px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border: 1px solid orangered;
|
||||
}
|
||||
|
||||
.main .focus .spot li:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main .focus .spot .current {
|
||||
background-color: orangered;
|
||||
}
|
||||
|
||||
|
||||
.main .focus ul {
|
||||
position: absolute;
|
||||
width: 900%;
|
||||
/*子盒子可以比父盒子宽，500% 为 父盒子的5倍*/
|
||||
}
|
||||
|
||||
.main .focus ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.main .focus img {
|
||||
float: left;
|
||||
width: 721px;
|
||||
height: 455px;
|
||||
}
|
||||
|
||||
.main .newsflash {
|
||||
float: right;
|
||||
width: 250px;
|
||||
height: 455px;
|
||||
/* background-color: aqua; */
|
||||
}
|
||||
|
||||
.news {
|
||||
height: 165px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.news_hd {
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
padding: 0 15px;
|
||||
border-bottom: 1px dotted #e4e4e4;
|
||||
}
|
||||
|
||||
.news_hd h5 {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news_hd a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
.lifeservice {
|
||||
height: 210px;
|
||||
/* background-color: purple; */
|
||||
}
|
||||
|
||||
.bargin {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.news li {
|
||||
padding: 6px 10px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.news_bd a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news_bd a:hover {
|
||||
color: #b1191a;
|
||||
}
|
||||
|
||||
.lifeservice {
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lifeservice ul li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 62px;
|
||||
height: 70px;
|
||||
padding-top: 6px;
|
||||
border-right: 1px solid #e4e4e4;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
|
||||
}
|
||||
|
||||
.lifeservice i {
|
||||
color: blueviolet;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.lifeservice ul li a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lifeservice ul li p {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.lifeservice ul li:nth-child(even) i {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
|
||||
.lifeservice ul li a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.recommend {
|
||||
height: 163px;
|
||||
/* background-color: skyblue; */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.recom_hd {
|
||||
float: left;
|
||||
width: 205px;
|
||||
height: 163px;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
background-color: #5c5251;
|
||||
}
|
||||
|
||||
|
||||
.recom_bd ul li {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.recom_bd ul li img {
|
||||
width: 248px;
|
||||
height: 163px;
|
||||
}
|
||||
|
||||
.recom_bd ul li:nth-child(-n+3):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 2px;
|
||||
height: 145px;
|
||||
background-color: #ddd;
|
||||
|
||||
}
|
||||
|
||||
.box_hd {
|
||||
height: 30px;
|
||||
/* margin-top: 30px; */
|
||||
line-height: 30px;
|
||||
border-bottom: 3px solid #c81623;
|
||||
}
|
||||
|
||||
.box_hd h3 {
|
||||
float: left;
|
||||
color: #c81623;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.box_hd .tab_list {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.box_hd .tab_list ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.box_hd .tab_list ul li a {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.box_bd {
|
||||
height: 358px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.box_bd .bd_1 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 210px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.box_bd .bd_2 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 329px;
|
||||
/* background-color: yellow; */
|
||||
}
|
||||
|
||||
.box_bd .bd_3 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 220px;
|
||||
/* background-color: green; */
|
||||
}
|
||||
|
||||
.box_bd .bd_3 .bd_3_top {
|
||||
border-bottom: 2px solid #ededed;
|
||||
}
|
||||
|
||||
.box_bd .bd_3 .bd_3_top img {
|
||||
width: 220px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.box_bd .bd_3 .bd_3_bottom img {
|
||||
width: 220px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* 额，还是尽量给所有img定义统一宽高，如果切图不那么准的话 -- 2022-10-16 --wxy */
|
||||
|
||||
.box_bd .bd_4 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 220px;
|
||||
/* background-color: blue; */
|
||||
}
|
||||
|
||||
.box_bd .bd_5 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 220px;
|
||||
/* background-color: red; */
|
||||
}
|
||||
|
||||
.bd1_hd ul li a {
|
||||
float: left;
|
||||
margin-left: 12px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.ad {
|
||||
margin: 15px 0 20px;
|
||||
}
|
||||
|
||||
.guesslike .box_hd {
|
||||
/* height: 30px;
|
||||
line-height: 30px; */
|
||||
border: none;
|
||||
margin-bottom: 5px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.guesslike .box_bd {
|
||||
height: 231px;
|
||||
/* background-color: purple; */
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.guesslike .box_bd ul li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 16.6%;
|
||||
}
|
||||
|
||||
/* .guesslike .box_bd ul li:hover {
|
||||
background-color: rgb(213, 243, 249);
|
||||
} */
|
||||
|
||||
.guesslike .box_bd .bd_bottom {
|
||||
height: 62px;
|
||||
border-left: 2px solid #ededed;
|
||||
|
||||
}
|
||||
|
||||
.guesslike .box_bd .bd_bottom i {
|
||||
font-size: 18px;
|
||||
color: #df3033;
|
||||
}
|
||||
|
||||
|
||||
.guesslike .box_bd .bd_top {
|
||||
height: 161px;
|
||||
border-top: 2px solid rgb(228, 227, 227);
|
||||
}
|
||||
|
||||
.guesslike .box_bd .bd_top img {
|
||||
width: 201px;
|
||||
height: 161px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chuanzhi .box_hd {
|
||||
/* height: 30px;
|
||||
line-height: 30px; */
|
||||
border: none;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.chuanzhi .box_bd {
|
||||
height: 406px;
|
||||
/* background-color: skyblue; */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.chuanzhi .box_bd ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fengqiang .box_hd {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fengqiang .box_bd {
|
||||
height: 282px;
|
||||
/* background-color: skyblue; */
|
||||
margin-bottom: 37px;
|
||||
border: 2px solid #ededed;
|
||||
}
|
||||
112
css/list.css
Normal file
112
css/list.css
Normal file
@@ -0,0 +1,112 @@
|
||||
.sc {
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 190px;
|
||||
top: 30px;
|
||||
width: 84px;
|
||||
height: 33px;
|
||||
border-left: 1px solid #b1191a;
|
||||
/* background-color: skyblue; */
|
||||
padding: 3px 14px;
|
||||
}
|
||||
|
||||
.sk_list {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sk_list ul li {
|
||||
float: left;
|
||||
margin: 0 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.sk_list ul li a {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.sk_con {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sk_con ul li {
|
||||
float: left;
|
||||
line-height: 46px;
|
||||
margin-left: 44px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sk_con ul li a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rush_buy {
|
||||
height: 120px;
|
||||
/* background-color: skyblue; */
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.sell {
|
||||
height: 1500px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.goods {
|
||||
/* padding: 2px; */
|
||||
float: left;
|
||||
margin: 10px;
|
||||
height: 350px;
|
||||
width: 220px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.goods:hover {
|
||||
border: 2px solid rgb(155, 213, 236);
|
||||
box-shadow: 2px 2px 10px rgb(173, 212, 226);
|
||||
}
|
||||
|
||||
.goods img {
|
||||
width: 215px;
|
||||
height: 215px;
|
||||
}
|
||||
|
||||
|
||||
.goods .prize {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
color: #e4393c;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.goods .recom {
|
||||
padding: 0 5px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.purchase {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purchase:hover {
|
||||
background-color: rgb(182, 223, 240);
|
||||
}
|
||||
|
||||
.goods .purchase a {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #e4393c;
|
||||
}
|
||||
|
||||
.goods .purchase i {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
163
css/login.css
Normal file
163
css/login.css
Normal file
@@ -0,0 +1,163 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('../fonts/iconfont.ttf?t=1665284552908') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
.w {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 82px;
|
||||
/* background-color: skyblue; */
|
||||
/* border-bottom: 2px solid #ddd4d4;
|
||||
box-shadow: 0 3px 6px rgb(203, 199, 199); */
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
|
||||
.header h1 .logo_title {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 225px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
.header_right {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 85px;
|
||||
}
|
||||
|
||||
.header_right a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header_right i {
|
||||
font-size: 30px;
|
||||
color: skyblue;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
/* margin-top: 15px; */
|
||||
background: url(../images/loginbac2.jpg) no-repeat;
|
||||
}
|
||||
|
||||
.login_box {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
width: 350px;
|
||||
top: 120px;
|
||||
left: -384px;
|
||||
padding: 25px 25px 23px;
|
||||
color: #6c6c6c;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
background-color: hsla(0, 0%, 100%, .9);
|
||||
|
||||
}
|
||||
|
||||
.login_box .hd {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.login_box .hd h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login_box .bd ul li {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
margin: 25px 0;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.login_box .bd ul li label {
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
line-height: 43px;
|
||||
background-color: #ccc;
|
||||
|
||||
}
|
||||
|
||||
.login_box .bd span {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.login_box .bd .ways a {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.login_box .bd .wx {
|
||||
display: block;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
color: rgb(44, 173, 44);
|
||||
}
|
||||
|
||||
.login_box .bd .zfb {
|
||||
display: block;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
font-size: 15px;
|
||||
|
||||
color: rgb(75, 75, 204);
|
||||
}
|
||||
|
||||
.login_box .bd .wb {
|
||||
display: block;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
font-size: 15px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.login_box .bd .txt {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.login_box .bd ul li input {
|
||||
height: 42px;
|
||||
width: 258px;
|
||||
padding-left: 12px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.login_box .bd ul li button {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
background-color: #f40;
|
||||
}
|
||||
|
||||
.login_box .bd .other {
|
||||
float: right;
|
||||
}
|
||||
124
css/login1.css
Normal file
124
css/login1.css
Normal file
@@ -0,0 +1,124 @@
|
||||
/* body {} */
|
||||
|
||||
/* background-color: rgba(0, 0, 0, 0.5); */
|
||||
/* 由css来控制 */
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
line-height: 50px;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 440px;
|
||||
height: 480px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/* margin: 100px auto; */
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 10px 1px #fff;
|
||||
}
|
||||
|
||||
.w {
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
cursor: move;
|
||||
/* background-color: orange; */
|
||||
}
|
||||
|
||||
.close span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lg-top {
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.lg-main li {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: rgb(220, 231, 250);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.lg-main li:nth-child(3) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.lg-main li:nth-child(3) .left {
|
||||
color: rgb(105, 101, 101);
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.lg-main li:nth-child(3) a {
|
||||
display: block;
|
||||
width: 50%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
color: rgb(105, 101, 101);
|
||||
}
|
||||
|
||||
.lg-main li:nth-child(4) {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.lg-main li:nth-child(4) .sub {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background-color: rgb(34, 168, 136);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.acc-left {
|
||||
float: left;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.acc-right input {
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
float: right;
|
||||
width: 320px;
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-left: none;
|
||||
outline: none;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
213
css/register.css
Normal file
213
css/register.css
Normal file
@@ -0,0 +1,213 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('../fonts/iconfont.ttf?t=1665284552908') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.w {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 直接从common样式里复制 */
|
||||
|
||||
.footer_bottom {
|
||||
text-align: center;
|
||||
padding: 20px 100px 0;
|
||||
}
|
||||
|
||||
.footer_bottom p a {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer_bottom p a:hover {
|
||||
color: #b1191a;
|
||||
}
|
||||
|
||||
.footer_bottom p:nth-child(2) {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
height: 82px;
|
||||
/* background-color: skyblue; */
|
||||
border-bottom: 2px solid #ddd4d4;
|
||||
box-shadow: 0 3px 6px rgb(203, 199, 199);
|
||||
}
|
||||
|
||||
header .logo a {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
|
||||
header .logo_title {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
line-height: 82px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.register_area {
|
||||
height: 522px;
|
||||
margin: 25px 0;
|
||||
/* background-color: skyblue; */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.reg_hd {
|
||||
position: relative;
|
||||
height: 43px;
|
||||
padding-left: 20px;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.reg_hd h3 {
|
||||
float: left;
|
||||
line-height: 43px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reg_hd .sb {
|
||||
font-size: 14px;
|
||||
line-height: 43px;
|
||||
right: 25px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.reg_hd .sb a {
|
||||
color: rgb(223, 10, 10);
|
||||
}
|
||||
|
||||
.reg_hd .sb a:hover {
|
||||
color: #a6111b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.reg_form {
|
||||
width: 600px;
|
||||
margin: 50px auto 0;
|
||||
padding-left: 50px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.reg_form ul li {
|
||||
position: relative;
|
||||
line-height: 37px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.reg_form ul li label {
|
||||
padding-right: 10px;
|
||||
display: inline-block;
|
||||
width: 88px;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.reg_form ul li:nth-child(-n+5) input {
|
||||
padding-left: 10px;
|
||||
width: 242px;
|
||||
height: 37px;
|
||||
border: 1px solid #666;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.reg_form ul li span {
|
||||
height: 37px;
|
||||
font-size: 14px;
|
||||
padding-left: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reg_form ul li button {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 37px;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
right: 150px;
|
||||
top: 2px;
|
||||
border: 1px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.reg_form ul li span i {
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.reg_form ul .safe {
|
||||
padding-left: 115px;
|
||||
}
|
||||
|
||||
.safe em {
|
||||
color: #fff;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.safe em:nth-child(1) {
|
||||
background-color: #de1111;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.safe em:nth-child(2) {
|
||||
background-color: #40b83f;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.safe em:nth-child(3) {
|
||||
background-color: #f0ac4d;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.safe em:nth-child(4) {
|
||||
background-color: #ff9600;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ifagree {
|
||||
padding-left: 127px;
|
||||
}
|
||||
|
||||
.ifagree input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ifagree a {
|
||||
color: #1ba1e6;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-left: 110px;
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
background-color: #c81623;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
221
css/shopcar.css
Normal file
221
css/shopcar.css
Normal file
@@ -0,0 +1,221 @@
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.car_search {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 0;
|
||||
width: 538px;
|
||||
height: 36px;
|
||||
border: 2px solid #b1191a;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.car_search input {
|
||||
width: 454px;
|
||||
height: 32px;
|
||||
padding: 10px 0 10px 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.car_search button {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
color: rgb(0, 183, 255);
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border-left: 2px solid #b1191a;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.car_search button:hover {
|
||||
color: rgb(0, 0, 190);
|
||||
}
|
||||
|
||||
.car_nav {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.car_nav h1 {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
color: #c81623;
|
||||
}
|
||||
|
||||
.delivery_area {
|
||||
float: right;
|
||||
line-height: 32px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.shop_car_hd {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin-top: 2px;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.all_select {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 225px;
|
||||
padding-left: 10px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
|
||||
.all_select input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.all_select span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.goods {
|
||||
float: left;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
/* background-color: purple; */
|
||||
}
|
||||
|
||||
.prize {
|
||||
float: left;
|
||||
width: 168px;
|
||||
height: 100%;
|
||||
/* background-color: orange; */
|
||||
}
|
||||
|
||||
.unmber {
|
||||
float: left;
|
||||
width: 140px;
|
||||
height: 100%;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.subtotal {
|
||||
float: left;
|
||||
width: 170px;
|
||||
height: 100%;
|
||||
/* background-color: green; */
|
||||
}
|
||||
|
||||
.opearte {
|
||||
float: left;
|
||||
width: 137px;
|
||||
height: 100%;
|
||||
/* background-color: blue; */
|
||||
}
|
||||
|
||||
.shop_car_bd {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: 2px solid #dddddd;
|
||||
padding-left: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.shop_car_bd input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.shop_car_bd span {
|
||||
color: #fff;
|
||||
padding: 2px;
|
||||
background-color: #c81623;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.my_goods ul li {
|
||||
position: relative;
|
||||
height: 106px;
|
||||
margin: 20px 0;
|
||||
/* background-color: skyblue; */
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.my_goods ul li:nth-child(3) {
|
||||
background-color: #feedef;
|
||||
}
|
||||
|
||||
.my_goods ul li input {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.my_goods ul li img {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.my_goods ul li .recommond {
|
||||
position: absolute;
|
||||
left: 142px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.my_goods ul li .uit_price {
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.my_goods ul li .num {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 378px;
|
||||
width: 98px;
|
||||
height: 60px;
|
||||
|
||||
|
||||
/* background-color: pink; */
|
||||
}
|
||||
|
||||
.my_goods ul li .num .hd {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my_goods ul li .num button {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
}
|
||||
|
||||
.my_goods ul li .num .n {
|
||||
float: left;
|
||||
width: 38px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.my_goods ul li .num .you {
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my_goods ul li .sub {
|
||||
position: absolute;
|
||||
right: 270px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.my_goods ul li .operater {
|
||||
position: absolute;
|
||||
right: 62px;
|
||||
top: 20px;
|
||||
}
|
||||
BIN
favicon/bitbug_favicon.ico
Normal file
BIN
favicon/bitbug_favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
favicon/bitbug_favicon2.ico
Normal file
BIN
favicon/bitbug_favicon2.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
favicon/favicon.ico
Normal file
BIN
favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
539
fonts/demo.css
Normal file
539
fonts/demo.css
Normal file
@@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
851
fonts/demo_index.html
Normal file
851
fonts/demo_index.html
Normal file
@@ -0,0 +1,851 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>iconfont Demo</title>
|
||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
<style>
|
||||
.main .logo {
|
||||
margin-top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main .logo .sub-title {
|
||||
margin-left: 0.5em;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||
|
||||
</a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰅕</span>
|
||||
<div class="name">错误</div>
|
||||
<div class="code-name">&#xf0155;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰅹</span>
|
||||
<div class="name">购物车空</div>
|
||||
<div class="code-name">&#xf0179;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰆯</span>
|
||||
<div class="name">新浪微博</div>
|
||||
<div class="code-name">&#xf01af;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰉾</span>
|
||||
<div class="name">电影票</div>
|
||||
<div class="code-name">&#xf027e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰁱</span>
|
||||
<div class="name">天猫提示-正确</div>
|
||||
<div class="code-name">&#xf0071;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">󰄆</span>
|
||||
<div class="name">微信</div>
|
||||
<div class="code-name">&#xf0106;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">密码</div>
|
||||
<div class="code-name">&#xe620;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">游戏</div>
|
||||
<div class="code-name">&#xe643;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">下箭头</div>
|
||||
<div class="code-name">&#xe6cc;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">查话费</div>
|
||||
<div class="code-name">&#xe6d6;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">理财</div>
|
||||
<div class="code-name">&#xe623;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">&#xe693;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">购物车</div>
|
||||
<div class="code-name">&#xe61b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">我要众筹</div>
|
||||
<div class="code-name">&#xe810;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">账户</div>
|
||||
<div class="code-name">&#xe649;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">支付宝支付</div>
|
||||
<div class="code-name">&#xe65e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">箭头 右</div>
|
||||
<div class="code-name">&#xe62d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">箭头 下</div>
|
||||
<div class="code-name">&#xe62e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">酒店</div>
|
||||
<div class="code-name">&#xe64a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">问卷</div>
|
||||
<div class="code-name">&#xe60c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">白条</div>
|
||||
<div class="code-name">&#xe61a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">机票</div>
|
||||
<div class="code-name">&#xe73e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">&#xe60a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">换一批</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">彩票</div>
|
||||
<div class="code-name">&#xe614;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">出售礼品卡</div>
|
||||
<div class="code-name">&#xef51;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">卖家购物车</div>
|
||||
<div class="code-name">&#xe992;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">加油卡</div>
|
||||
<div class="code-name">&#xe690;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont">者</span>
|
||||
<div class="name">火车票</div>
|
||||
<div class="code-name">&#xfab2;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.ttf?t=1666153552900') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-cuowu"></span>
|
||||
<div class="name">
|
||||
错误
|
||||
</div>
|
||||
<div class="code-name">.icon-cuowu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-gouwuchekong"></span>
|
||||
<div class="name">
|
||||
购物车空
|
||||
</div>
|
||||
<div class="code-name">.icon-gouwuchekong
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xinlangweibo"></span>
|
||||
<div class="name">
|
||||
新浪微博
|
||||
</div>
|
||||
<div class="code-name">.icon-xinlangweibo
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-dianyingpiao"></span>
|
||||
<div class="name">
|
||||
电影票
|
||||
</div>
|
||||
<div class="code-name">.icon-dianyingpiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhengque"></span>
|
||||
<div class="name">
|
||||
天猫提示-正确
|
||||
</div>
|
||||
<div class="code-name">.icon-zhengque
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-weixin"></span>
|
||||
<div class="name">
|
||||
微信
|
||||
</div>
|
||||
<div class="code-name">.icon-weixin
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-mima"></span>
|
||||
<div class="name">
|
||||
密码
|
||||
</div>
|
||||
<div class="code-name">.icon-mima
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-youxi"></span>
|
||||
<div class="name">
|
||||
游戏
|
||||
</div>
|
||||
<div class="code-name">.icon-youxi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xiajiantou"></span>
|
||||
<div class="name">
|
||||
下箭头
|
||||
</div>
|
||||
<div class="code-name">.icon-xiajiantou
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chahuafei"></span>
|
||||
<div class="name">
|
||||
查话费
|
||||
</div>
|
||||
<div class="code-name">.icon-chahuafei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-38"></span>
|
||||
<div class="name">
|
||||
理财
|
||||
</div>
|
||||
<div class="code-name">.icon-38
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-sousuo"></span>
|
||||
<div class="name">
|
||||
搜索
|
||||
</div>
|
||||
<div class="code-name">.icon-sousuo
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shouye"></span>
|
||||
<div class="name">
|
||||
购物车
|
||||
</div>
|
||||
<div class="code-name">.icon-shouye
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-woyaozhongchou"></span>
|
||||
<div class="name">
|
||||
我要众筹
|
||||
</div>
|
||||
<div class="code-name">.icon-woyaozhongchou
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhanghu"></span>
|
||||
<div class="name">
|
||||
账户
|
||||
</div>
|
||||
<div class="code-name">.icon-zhanghu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhifubaozhifu"></span>
|
||||
<div class="name">
|
||||
支付宝支付
|
||||
</div>
|
||||
<div class="code-name">.icon-zhifubaozhifu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiantouyou"></span>
|
||||
<div class="name">
|
||||
箭头 右
|
||||
</div>
|
||||
<div class="code-name">.icon-jiantouyou
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiantouxia"></span>
|
||||
<div class="name">
|
||||
箭头 下
|
||||
</div>
|
||||
<div class="code-name">.icon-jiantouxia
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiudian"></span>
|
||||
<div class="name">
|
||||
酒店
|
||||
</div>
|
||||
<div class="code-name">.icon-jiudian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-wenjuan"></span>
|
||||
<div class="name">
|
||||
问卷
|
||||
</div>
|
||||
<div class="code-name">.icon-wenjuan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-baitiao"></span>
|
||||
<div class="name">
|
||||
白条
|
||||
</div>
|
||||
<div class="code-name">.icon-baitiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jipiao"></span>
|
||||
<div class="name">
|
||||
机票
|
||||
</div>
|
||||
<div class="code-name">.icon-jipiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-sousuo1"></span>
|
||||
<div class="name">
|
||||
搜索
|
||||
</div>
|
||||
<div class="code-name">.icon-sousuo1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-ziyuan"></span>
|
||||
<div class="name">
|
||||
换一批
|
||||
</div>
|
||||
<div class="code-name">.icon-ziyuan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-lottery"></span>
|
||||
<div class="name">
|
||||
彩票
|
||||
</div>
|
||||
<div class="code-name">.icon-lottery
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chushoulipinka"></span>
|
||||
<div class="name">
|
||||
出售礼品卡
|
||||
</div>
|
||||
<div class="code-name">.icon-chushoulipinka
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-maijiagouwuche"></span>
|
||||
<div class="name">
|
||||
卖家购物车
|
||||
</div>
|
||||
<div class="code-name">.icon-maijiagouwuche
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiayouka"></span>
|
||||
<div class="name">
|
||||
加油卡
|
||||
</div>
|
||||
<div class="code-name">.icon-jiayouka
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-huochepiao"></span>
|
||||
<div class="name">
|
||||
火车票
|
||||
</div>
|
||||
<div class="code-name">.icon-huochepiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-cuowu"></use>
|
||||
</svg>
|
||||
<div class="name">错误</div>
|
||||
<div class="code-name">#icon-cuowu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-gouwuchekong"></use>
|
||||
</svg>
|
||||
<div class="name">购物车空</div>
|
||||
<div class="code-name">#icon-gouwuchekong</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xinlangweibo"></use>
|
||||
</svg>
|
||||
<div class="name">新浪微博</div>
|
||||
<div class="code-name">#icon-xinlangweibo</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-dianyingpiao"></use>
|
||||
</svg>
|
||||
<div class="name">电影票</div>
|
||||
<div class="code-name">#icon-dianyingpiao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhengque"></use>
|
||||
</svg>
|
||||
<div class="name">天猫提示-正确</div>
|
||||
<div class="code-name">#icon-zhengque</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-weixin"></use>
|
||||
</svg>
|
||||
<div class="name">微信</div>
|
||||
<div class="code-name">#icon-weixin</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-mima"></use>
|
||||
</svg>
|
||||
<div class="name">密码</div>
|
||||
<div class="code-name">#icon-mima</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-youxi"></use>
|
||||
</svg>
|
||||
<div class="name">游戏</div>
|
||||
<div class="code-name">#icon-youxi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xiajiantou"></use>
|
||||
</svg>
|
||||
<div class="name">下箭头</div>
|
||||
<div class="code-name">#icon-xiajiantou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chahuafei"></use>
|
||||
</svg>
|
||||
<div class="name">查话费</div>
|
||||
<div class="code-name">#icon-chahuafei</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-38"></use>
|
||||
</svg>
|
||||
<div class="name">理财</div>
|
||||
<div class="code-name">#icon-38</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-sousuo"></use>
|
||||
</svg>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">#icon-sousuo</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shouye"></use>
|
||||
</svg>
|
||||
<div class="name">购物车</div>
|
||||
<div class="code-name">#icon-shouye</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-woyaozhongchou"></use>
|
||||
</svg>
|
||||
<div class="name">我要众筹</div>
|
||||
<div class="code-name">#icon-woyaozhongchou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhanghu"></use>
|
||||
</svg>
|
||||
<div class="name">账户</div>
|
||||
<div class="code-name">#icon-zhanghu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhifubaozhifu"></use>
|
||||
</svg>
|
||||
<div class="name">支付宝支付</div>
|
||||
<div class="code-name">#icon-zhifubaozhifu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiantouyou"></use>
|
||||
</svg>
|
||||
<div class="name">箭头 右</div>
|
||||
<div class="code-name">#icon-jiantouyou</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiantouxia"></use>
|
||||
</svg>
|
||||
<div class="name">箭头 下</div>
|
||||
<div class="code-name">#icon-jiantouxia</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiudian"></use>
|
||||
</svg>
|
||||
<div class="name">酒店</div>
|
||||
<div class="code-name">#icon-jiudian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-wenjuan"></use>
|
||||
</svg>
|
||||
<div class="name">问卷</div>
|
||||
<div class="code-name">#icon-wenjuan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-baitiao"></use>
|
||||
</svg>
|
||||
<div class="name">白条</div>
|
||||
<div class="code-name">#icon-baitiao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jipiao"></use>
|
||||
</svg>
|
||||
<div class="name">机票</div>
|
||||
<div class="code-name">#icon-jipiao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-sousuo1"></use>
|
||||
</svg>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">#icon-sousuo1</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-ziyuan"></use>
|
||||
</svg>
|
||||
<div class="name">换一批</div>
|
||||
<div class="code-name">#icon-ziyuan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-lottery"></use>
|
||||
</svg>
|
||||
<div class="name">彩票</div>
|
||||
<div class="code-name">#icon-lottery</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chushoulipinka"></use>
|
||||
</svg>
|
||||
<div class="name">出售礼品卡</div>
|
||||
<div class="code-name">#icon-chushoulipinka</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-maijiagouwuche"></use>
|
||||
</svg>
|
||||
<div class="name">卖家购物车</div>
|
||||
<div class="code-name">#icon-maijiagouwuche</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiayouka"></use>
|
||||
</svg>
|
||||
<div class="name">加油卡</div>
|
||||
<div class="code-name">#icon-jiayouka</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-huochepiao"></use>
|
||||
</svg>
|
||||
<div class="name">火车票</div>
|
||||
<div class="code-name">#icon-huochepiao</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
129
fonts/iconfont.css
Normal file
129
fonts/iconfont.css
Normal file
@@ -0,0 +1,129 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1666153552900') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-cuowu:before {
|
||||
content: "\f0155";
|
||||
}
|
||||
|
||||
.icon-gouwuchekong:before {
|
||||
content: "\f0179";
|
||||
}
|
||||
|
||||
.icon-xinlangweibo:before {
|
||||
content: "\f01af";
|
||||
}
|
||||
|
||||
.icon-dianyingpiao:before {
|
||||
content: "\f027e";
|
||||
}
|
||||
|
||||
.icon-zhengque:before {
|
||||
content: "\f0071";
|
||||
}
|
||||
|
||||
.icon-weixin:before {
|
||||
content: "\f0106";
|
||||
}
|
||||
|
||||
.icon-mima:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.icon-youxi:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.icon-xiajiantou:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.icon-chahuafei:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.icon-38:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.icon-shouye:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.icon-woyaozhongchou:before {
|
||||
content: "\e810";
|
||||
}
|
||||
|
||||
.icon-zhanghu:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-zhifubaozhifu:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.icon-jiantouyou:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-jiantouxia:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-jiudian:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.icon-wenjuan:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-baitiao:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-jipiao:before {
|
||||
content: "\e73e";
|
||||
}
|
||||
|
||||
.icon-sousuo1:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.icon-ziyuan:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-lottery:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-chushoulipinka:before {
|
||||
content: "\ef51";
|
||||
}
|
||||
|
||||
.icon-maijiagouwuche:before {
|
||||
content: "\e992";
|
||||
}
|
||||
|
||||
.icon-jiayouka:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.icon-huochepiao:before {
|
||||
content: "\fab2";
|
||||
}
|
||||
|
||||
1
fonts/iconfont.js
Normal file
1
fonts/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
212
fonts/iconfont.json
Normal file
212
fonts/iconfont.json
Normal file
@@ -0,0 +1,212 @@
|
||||
{
|
||||
"id": "",
|
||||
"name": "",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "1270",
|
||||
"name": "错误",
|
||||
"font_class": "cuowu",
|
||||
"unicode": "f0155",
|
||||
"unicode_decimal": 983381
|
||||
},
|
||||
{
|
||||
"icon_id": "1306",
|
||||
"name": "购物车空",
|
||||
"font_class": "gouwuchekong",
|
||||
"unicode": "f0179",
|
||||
"unicode_decimal": 983417
|
||||
},
|
||||
{
|
||||
"icon_id": "1360",
|
||||
"name": "新浪微博",
|
||||
"font_class": "xinlangweibo",
|
||||
"unicode": "f01af",
|
||||
"unicode_decimal": 983471
|
||||
},
|
||||
{
|
||||
"icon_id": "2868",
|
||||
"name": "电影票",
|
||||
"font_class": "dianyingpiao",
|
||||
"unicode": "f027e",
|
||||
"unicode_decimal": 983678
|
||||
},
|
||||
{
|
||||
"icon_id": "37283",
|
||||
"name": "天猫提示-正确",
|
||||
"font_class": "zhengque",
|
||||
"unicode": "f0071",
|
||||
"unicode_decimal": 983153
|
||||
},
|
||||
{
|
||||
"icon_id": "77156",
|
||||
"name": "微信",
|
||||
"font_class": "weixin",
|
||||
"unicode": "f0106",
|
||||
"unicode_decimal": 983302
|
||||
},
|
||||
{
|
||||
"icon_id": "144706",
|
||||
"name": "密码",
|
||||
"font_class": "mima",
|
||||
"unicode": "e620",
|
||||
"unicode_decimal": 58912
|
||||
},
|
||||
{
|
||||
"icon_id": "145459",
|
||||
"name": "游戏",
|
||||
"font_class": "youxi",
|
||||
"unicode": "e643",
|
||||
"unicode_decimal": 58947
|
||||
},
|
||||
{
|
||||
"icon_id": "278744",
|
||||
"name": "下箭头",
|
||||
"font_class": "xiajiantou",
|
||||
"unicode": "e6cc",
|
||||
"unicode_decimal": 59084
|
||||
},
|
||||
{
|
||||
"icon_id": "297680",
|
||||
"name": "查话费",
|
||||
"font_class": "chahuafei",
|
||||
"unicode": "e6d6",
|
||||
"unicode_decimal": 59094
|
||||
},
|
||||
{
|
||||
"icon_id": "643834",
|
||||
"name": "理财",
|
||||
"font_class": "38",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "666889",
|
||||
"name": "搜索",
|
||||
"font_class": "sousuo",
|
||||
"unicode": "e693",
|
||||
"unicode_decimal": 59027
|
||||
},
|
||||
{
|
||||
"icon_id": "765354",
|
||||
"name": "购物车",
|
||||
"font_class": "shouye",
|
||||
"unicode": "e61b",
|
||||
"unicode_decimal": 58907
|
||||
},
|
||||
{
|
||||
"icon_id": "1014028",
|
||||
"name": "我要众筹",
|
||||
"font_class": "woyaozhongchou",
|
||||
"unicode": "e810",
|
||||
"unicode_decimal": 59408
|
||||
},
|
||||
{
|
||||
"icon_id": "1115092",
|
||||
"name": "账户",
|
||||
"font_class": "zhanghu",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "1242176",
|
||||
"name": "支付宝支付",
|
||||
"font_class": "zhifubaozhifu",
|
||||
"unicode": "e65e",
|
||||
"unicode_decimal": 58974
|
||||
},
|
||||
{
|
||||
"icon_id": "2674928",
|
||||
"name": "箭头 右",
|
||||
"font_class": "jiantouyou",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
},
|
||||
{
|
||||
"icon_id": "2674929",
|
||||
"name": "箭头 下",
|
||||
"font_class": "jiantouxia",
|
||||
"unicode": "e62e",
|
||||
"unicode_decimal": 58926
|
||||
},
|
||||
{
|
||||
"icon_id": "3858286",
|
||||
"name": "酒店",
|
||||
"font_class": "jiudian",
|
||||
"unicode": "e64a",
|
||||
"unicode_decimal": 58954
|
||||
},
|
||||
{
|
||||
"icon_id": "6127286",
|
||||
"name": "问卷",
|
||||
"font_class": "wenjuan",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "6460215",
|
||||
"name": "白条",
|
||||
"font_class": "baitiao",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "7478255",
|
||||
"name": "机票",
|
||||
"font_class": "jipiao",
|
||||
"unicode": "e73e",
|
||||
"unicode_decimal": 59198
|
||||
},
|
||||
{
|
||||
"icon_id": "7515826",
|
||||
"name": "搜索",
|
||||
"font_class": "sousuo1",
|
||||
"unicode": "e60a",
|
||||
"unicode_decimal": 58890
|
||||
},
|
||||
{
|
||||
"icon_id": "11177508",
|
||||
"name": "换一批",
|
||||
"font_class": "ziyuan",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "12739230",
|
||||
"name": "彩票",
|
||||
"font_class": "lottery",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "15343537",
|
||||
"name": "出售礼品卡",
|
||||
"font_class": "chushoulipinka",
|
||||
"unicode": "ef51",
|
||||
"unicode_decimal": 61265
|
||||
},
|
||||
{
|
||||
"icon_id": "18267933",
|
||||
"name": "卖家购物车",
|
||||
"font_class": "maijiagouwuche",
|
||||
"unicode": "e992",
|
||||
"unicode_decimal": 59794
|
||||
},
|
||||
{
|
||||
"icon_id": "21786557",
|
||||
"name": "加油卡",
|
||||
"font_class": "jiayouka",
|
||||
"unicode": "e690",
|
||||
"unicode_decimal": 59024
|
||||
},
|
||||
{
|
||||
"icon_id": "24111529",
|
||||
"name": "火车票",
|
||||
"font_class": "huochepiao",
|
||||
"unicode": "fab2",
|
||||
"unicode_decimal": 64178
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
fonts/iconfont.ttf
Normal file
BIN
fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
images/arrow_left.png
Normal file
BIN
images/arrow_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
images/arrow_right .png
Normal file
BIN
images/arrow_right .png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
images/ban.jpg
Normal file
BIN
images/ban.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
images/banner.jpg
Normal file
BIN
images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
images/banner.png
Normal file
BIN
images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
BIN
images/banner2.jpg
Normal file
BIN
images/banner2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
images/banner2.png
Normal file
BIN
images/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
BIN
images/banner3.jpg
Normal file
BIN
images/banner3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
images/banner4.jpg
Normal file
BIN
images/banner4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
images/banner5.jpg
Normal file
BIN
images/banner5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
images/banner6.jpg
Normal file
BIN
images/banner6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
images/banner7.png
Normal file
BIN
images/banner7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
BIN
images/bargain2.jpg
Normal file
BIN
images/bargain2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
images/bargin.png
Normal file
BIN
images/bargin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
images/bargin3.png
Normal file
BIN
images/bargin3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
images/erweima.png
Normal file
BIN
images/erweima.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
images/erweima2.png
Normal file
BIN
images/erweima2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
images/jisu.png
Normal file
BIN
images/jisu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 B |
BIN
images/loginbac.jpg
Normal file
BIN
images/loginbac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
images/loginbac2.jpg
Normal file
BIN
images/loginbac2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
images/logo2.png
Normal file
BIN
images/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
images/logo3-1.png
Normal file
BIN
images/logo3-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
images/recom.png
Normal file
BIN
images/recom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
images/rush_buy.png
Normal file
BIN
images/rush_buy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
images/sc.png
Normal file
BIN
images/sc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
844
index.html
Normal file
844
index.html
Normal file
@@ -0,0 +1,844 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="吴兴有">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="js/index.js">
|
||||
<link rel="stylesheet" href="list.html">
|
||||
<title>有品优购(YPY.COM) - 正品低价、品质保障、配送及时、轻松购物！</title>
|
||||
<meta name="description" content="品优-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数
|
||||
十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
|
||||
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
|
||||
<script src="js/ainmate.js"></script>
|
||||
<!-- 函数必须先引入 -->
|
||||
<script src="js/index.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="toolkit">
|
||||
<ul>
|
||||
<li><a href="#guesslike">猜你喜欢</a></li>
|
||||
<li><a href="#youqu">有趣区</a></li>
|
||||
<li><a href="#jiadian">家用电器</a></li>
|
||||
<li><a href="#shouji">手机通讯</a></li>
|
||||
<li><a href="#pcwork">电脑办公</a></li>
|
||||
<li><a href="#fengqiang">热门疯抢</a></li>
|
||||
<div class="returntop">返回顶部</div>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 快捷导航模块 start -->
|
||||
<section class="shortcut">
|
||||
<div class="w">
|
||||
<div class="fl">
|
||||
<ul>
|
||||
<li>有品优购欢迎你！ </li>
|
||||
<li><a href="login.html">请登录</a> <a href="login1.html">请登录(版本2)</a> <a
|
||||
href="register.html" class="style_red">免费注册</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<ul>
|
||||
<li><a href="#">我的订单</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">我的品优购 </a></li>
|
||||
<li></li>
|
||||
<li><a href="#">品优购会员</a></li>
|
||||
<li></li>
|
||||
<li><a href="#">企业采购</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">关注品优购 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">客户服务 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">网站导航 </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 快捷导航模块 end -->
|
||||
|
||||
<!-- 头部制作 start -->
|
||||
<div class="header w">
|
||||
<div class="logo">
|
||||
<h1><a href="index.html" title="吴兴有的品优购商城">品友购商城</a></h1>
|
||||
</div>
|
||||
|
||||
<div class="search">
|
||||
<input type="search" name="" id="" placeholder="宝，你来啦！">
|
||||
<a href="list.html" target="_blank">
|
||||
<button class="iconfont"></button>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hotwords">
|
||||
<a href="">iphone14</a>
|
||||
<a href="">亿元优惠</a>
|
||||
<a href="">9.9元团购</a>
|
||||
<a href="">rog枪神6</a>
|
||||
<a href="">办公用品</a>
|
||||
<a href="">电脑</a>
|
||||
<a href="">通信</a>
|
||||
</div>
|
||||
<div class="shopcar iconfont">
|
||||
<a href="shopcar.html" target="_blank"><i></i> <em>我的购物车</em> </a>
|
||||
<div class="shopcar_icon"><a href="shopcar.html">qq3050128610</a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 头部制作 end -->
|
||||
|
||||
<!-- nav栏制作 start -->
|
||||
<div class="nav">
|
||||
<div class="w ">
|
||||
<div class="dropdown">
|
||||
<div class="dt">全部商品分类</div>
|
||||
<div class="dd iconfont">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="list.html" target="_blank"> 家用电器 <em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank"> 手机、数码、通信
|
||||
<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank"> 电脑、办公<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
家居、家具、家装、厨具<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
男装、女装、童装、内衣<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
个性化转、清洁用品、宠物<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
鞋靴、箱包、珠宝、奢侈品<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
户外运动、钟表<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
汽车、汽车用品<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
母婴、玩具乐器<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
食品、酒类、生鲜、特产<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank"> 医药保健<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
图书、音像、电子书<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank">
|
||||
彩票、旅行、充值、票务<em></em></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="list.html" target="_blank" class="last">
|
||||
理财、众筹、白条、保险<em></em></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navitems">
|
||||
<ul>
|
||||
<li><a href="#">服装城</a></li>
|
||||
<li><a href="#">美妆馆</a></li>
|
||||
<li><a href="#">传智超市</a></li>
|
||||
<li><a href="#">全球购</a></li>
|
||||
<li><a href="#">闪购</a></li>
|
||||
<li><a href="#">团购</a></li>
|
||||
<li><a href="#">拍卖</a></li>
|
||||
<li><a href="#">有趣</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- nav栏制作 end -->
|
||||
|
||||
|
||||
<!-- 首页专有模块开始 -->
|
||||
<div class="w">
|
||||
<div class="main">
|
||||
<div class="focus">
|
||||
<div class="arrow arrow_left">
|
||||
<img src="images/arrow_left.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="arrow arrow_right">
|
||||
<img src="images/arrow_right .png" alt="">
|
||||
|
||||
</div>
|
||||
<ol class="spot"> <!-- 自动生成轮播图的计数圈点 -->
|
||||
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner7.png" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner6.jpg" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner4.jpg" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner5.jpg" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner3.jpg" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner2.jpg" alt=""></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><img src="images/banner.jpg" alt=""></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="newsflash">
|
||||
<div class="news">
|
||||
<div class="news_hd">
|
||||
<h5>品优购快报</h5>
|
||||
<a href="#" class="iconfont">更多  </a>
|
||||
</div>
|
||||
<div class="news_bd">
|
||||
<ul>
|
||||
<li><a href="#"><strong>[特惠] </strong>寒假好好学习，天天向上...</a></li>
|
||||
<li><a href="#"><strong>[公告] </strong>寒假好好学习，天天向上...</a></li>
|
||||
<li><a href="#"><strong>[特惠] </strong>寒假好好学习，天天向上...</a></li>
|
||||
<li><a href="#"><strong>[公告] </strong>寒假好好学习，天天向上...</a></li>
|
||||
<li><a href="#"><strong>[特惠] </strong>寒假好好学习，天天向上...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lifeservice">
|
||||
<ul>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.189.cn/fj_qz/" target="_blank">
|
||||
<i></i>
|
||||
<p>话费</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://flights.ctrip.com/online/channel/domestic" target="_blank">
|
||||
<i></i>
|
||||
<p>机票</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://movie.jd.com/#/" target="_blank">
|
||||
<i>󰉾</i>
|
||||
<p>电影票</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.4399.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>游戏</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.zhcw.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>彩票</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.sinopecsales.com/default.html" target="_blank">
|
||||
<i></i>
|
||||
<p>加油卡</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://ctrip.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>酒店</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.12306.cn/index/" target="_blank">
|
||||
<i>者</i><br>
|
||||
<p>火车票</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.taobao.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>众筹</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.alipay.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>理财</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.limaimai.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>礼品卡</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="iconfont">
|
||||
<a href="https://www.jd.com/" target="_blank">
|
||||
<i></i>
|
||||
<p>白条</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bargin">
|
||||
<img src="images/bargin3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 首页专有模块结束 -->
|
||||
|
||||
<!-- 推荐模块 开始 -->
|
||||
<div class="w recommend">
|
||||
<div class="recom_hd">
|
||||
<img src="images/recom.png" alt="">
|
||||
</div>
|
||||
<div class="recom_bd">
|
||||
<ul>
|
||||
<!-- <li><img src="upload/recom_1.png" alt=""></li> -->
|
||||
<li><a href="#"><img src="upload/recom_1.png" alt=""></a></li>
|
||||
<li><a href="#"><img src="upload/recom_2.png" alt=""></a></li>
|
||||
<li><a href="#"><img src="upload/recom_3.png" alt=""></a></li>
|
||||
<li><a href="#"><img src="upload/recom_04.jpg" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 推荐模块结束 -->
|
||||
|
||||
<!-- 猜你喜欢 开始 -->
|
||||
|
||||
<div class="guesslike w" id="guesslike">
|
||||
<div class="box_hd">
|
||||
<h3 class="style_blac">猜你喜欢</h3>
|
||||
<div class="tab_list">
|
||||
<a href="#" class="iconfont">换一批 </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/bao.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
阳光美包新款单肩包女<br>
|
||||
包时尚子母包四件套女
|
||||
</p>
|
||||
<i>$116.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/guo.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
爱仕达 30cm炒锅不粘<br>
|
||||
锅NWG8330E电磁炉炒
|
||||
</p>
|
||||
<i>$99.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/jiebolang.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
捷波朗<br>
|
||||
(jabra) BOOSI 劲步
|
||||
</p>
|
||||
<i>$245.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/oupu.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
欧普<br>
|
||||
JYLZ08面板灯平板灯铝
|
||||
</p>
|
||||
<i>$266.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/guesslike1.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
Apple iphone14<br>
|
||||
支持移动联通5G
|
||||
</p>
|
||||
<i>$649.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div class="bd_top">
|
||||
<img src="upload/hanguo.png" alt="">
|
||||
</div>
|
||||
<div class="bd_bottom">
|
||||
<p>
|
||||
韩国所望<br>
|
||||
紧致湿润精华露400ml
|
||||
</p>
|
||||
<i>$626.00</i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 猜你喜欢 结束 -->
|
||||
|
||||
|
||||
<!-- 传智播客 有趣区 开始 -->
|
||||
<div class="chuanzhi w" id="youqu">
|
||||
<div class="box_hd">
|
||||
<h3 class="style_blac">传智播客 有趣区</h3>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="upload/chuanzhi_1.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="upload/chuanzhi_2.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="upload/chuanzhi_3.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="upload/chuanzhi_4.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 传智播客 有趣区 结束 -->
|
||||
|
||||
|
||||
<!-- 楼层区域制作 开始 -->
|
||||
<div class="floor w">
|
||||
<div class="jiadian " id="jiadian">
|
||||
<div class="box_hd">
|
||||
<h3>家用电器</h3>
|
||||
<div class="tab_list">
|
||||
<ul>
|
||||
<li><a href="#" class="style_red">热门</a>|</li>
|
||||
<li><a href="#">大家电</a>|</li>
|
||||
<li><a href="#">生活电器</a>|</li>
|
||||
<li><a href="#">厨房电器</a>|</li>
|
||||
<li><a href="#">个人健康</a>|</li>
|
||||
<li><a href="#">应季家电</a>|</li>
|
||||
<li><a href="#">空气/净水</a>|</li>
|
||||
<li><a href="#">新奇特</a>|</li>
|
||||
<li><a href="#">高端电器</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<div class="bd_1">
|
||||
<div class="bd1_hd">
|
||||
<ul>
|
||||
<li><a href="#">节能补贴</a></li>
|
||||
<li><a href="#">4k电视</a></li>
|
||||
<li><a href="#">空气净化器</a></li>
|
||||
<li><a href="#">IH电饭煲</a></li>
|
||||
<li><a href="#">滚筒洗衣机</a></li>
|
||||
<li><a href="#">电热水器</a></li>
|
||||
</ul>
|
||||
<a href="#">
|
||||
<img src="upload/bd_1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd1_bd"></div>
|
||||
</div>
|
||||
<div class="bd_2">
|
||||
<a href="#">
|
||||
<img src="upload/bd_2.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_3">
|
||||
<a href="#">
|
||||
<div class="bd_3_top">
|
||||
<img src="upload/bd_3_top.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="bd_3_bottom">
|
||||
<img src="upload/bd_3_bottom.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_4">
|
||||
<a href="#"><img src="upload/bd_4.png" alt=""></a>
|
||||
</div>
|
||||
<div class="bd_5">
|
||||
<a href="#"><img src="upload/bd_5.png" alt=""></a>
|
||||
</div>
|
||||
<!-- 有点累，偷个懒，这里不分上下了 ---2022-10-16--wxy -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ad">
|
||||
<a href="#"><img src="upload/advertise_1.png" alt=""></a>
|
||||
</div>
|
||||
|
||||
<div class="shouji " id="shouji">
|
||||
<div class="box_hd">
|
||||
<h3>手机通讯</h3>
|
||||
<div class="tab_list">
|
||||
<ul>
|
||||
<li><a href="#" class="style_red">热门</a>|</li>
|
||||
<li><a href="#">品质优选</a>|</li>
|
||||
<li><a href="#">新机尝鲜</a>|</li>
|
||||
<li><a href="#">高性价比</a>|</li>
|
||||
<li><a href="#">口碑推荐</a>|</li>
|
||||
<li><a href="#">合约机</a>|</li>
|
||||
<li><a href="#">店铺精选</a>|</li>
|
||||
<li><a href="#">新奇特</a>|</li>
|
||||
<li><a href="#">手机配件</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<div class="bd_1">
|
||||
<div class="bd1_hd">
|
||||
<ul>
|
||||
<li><a href="#">手机通讯</a></li>
|
||||
<li><a href="#">以旧换新</a></li>
|
||||
<li><a href="#">双卡双持</a></li>
|
||||
<li><a href="#">自营配件</a></li>
|
||||
<li><a href="#">金属机身</a></li>
|
||||
<li><a href="#">高清屏</a></li>
|
||||
</ul>
|
||||
<a href="#">
|
||||
<img src="upload/bd2_1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd1_bd"></div>
|
||||
</div>
|
||||
<div class="bd_2">
|
||||
<a href="#">
|
||||
<img src="upload/bd2_2.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_3">
|
||||
<a href="#">
|
||||
<div class="bd_3_top">
|
||||
<img src="upload/bd2_3_top.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="bd_3_bottom">
|
||||
<img src="upload/bd2_3_bottom.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_4">
|
||||
<a href="#"><img src="upload/bd2_4.png" alt=""></a>
|
||||
</div>
|
||||
<div class="bd_5">
|
||||
<a href="#"><img src="upload/bd2_5.png" alt=""></a>
|
||||
</div>
|
||||
<!-- 有点累，偷个懒，这里不分上下了 ---2022-10-16--wxy -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ad">
|
||||
<a href="#"> <img src="upload/advertise_2.png" alt=""></a>
|
||||
</div>
|
||||
|
||||
<div class="diannao " id="pcwork">
|
||||
<div class="box_hd">
|
||||
<h3>电脑办公</h3>
|
||||
<div class="tab_list">
|
||||
<ul>
|
||||
<li><a href="#" class="style_red">热门</a>|</li>
|
||||
<li><a href="#">电脑/平板</a>|</li>
|
||||
<li><a href="#">潮流影音</a>|</li>
|
||||
<li><a href="#">智能/外设</a>|</li>
|
||||
<li><a href="#">DIY硬件</a>|</li>
|
||||
<li><a href="#">电竞游戏</a>|</li>
|
||||
<li><a href="#">办公/网络</a>|</li>
|
||||
<li><a href="#">文具电教</a>|</li>
|
||||
<li><a href="#">精选配件</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<div class="bd_1">
|
||||
<div class="bd1_hd">
|
||||
<ul>
|
||||
<li><a href="#">SSD硬盘</a></li>
|
||||
<li><a href="#">显示器</a></li>
|
||||
<li><a href="#">机械硬盘</a></li>
|
||||
<li><a href="#">台式机</a></li>
|
||||
<li><a href="#">组装机</a></li>
|
||||
<li><a href="#">配件专区</a></li>
|
||||
</ul>
|
||||
<a href="#">
|
||||
<img src="upload/bd3_1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd1_bd"></div>
|
||||
</div>
|
||||
<div class="bd_2">
|
||||
<a href="#">
|
||||
<img src="upload/bd3_2.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_3">
|
||||
<a href="#">
|
||||
<div class="bd_3_top">
|
||||
<img src="upload/bd3-3_top.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="bd_3_bottom">
|
||||
<img src="upload/bd3_3_bottom.png" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd_4">
|
||||
<a href="#"><img src="upload/bd3_4.png" alt=""></a>
|
||||
</div>
|
||||
<div class="bd_5">
|
||||
<a href="#"><img src="upload/bd3_5.png" alt=""></a>
|
||||
</div>
|
||||
<!-- 有点累，偷个懒，这里不分上下了 ---2022-10-16--wxy -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ad">
|
||||
<a href="#"><img src="upload/advertise_3.png" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 楼层区域制作 结束 -->
|
||||
|
||||
<!-- 热门疯抢 开始 -->
|
||||
|
||||
<div class="fengqiang w" id="fengqiang">
|
||||
<div class="box_hd">
|
||||
<h3 class="style_blac">热门疯抢</h3>
|
||||
</div>
|
||||
<div class="box_bd">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="upload/toulan.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<!-- 偷点懒，问题不大 2022-10-17 ---wxy -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门疯抢 结束 -->
|
||||
|
||||
|
||||
<!-- 底部模块制作 start -->
|
||||
<footer class="footer">
|
||||
<div class="w">
|
||||
<div class="mod_service">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>正</h5>
|
||||
<div>
|
||||
<h2>正品保障</h2>
|
||||
<p>正品保障，提供发票</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>速</h5>
|
||||
<div>
|
||||
<h2>极速物流</h2>
|
||||
<p>极速物流，急速送达</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>保</h5>
|
||||
<div>
|
||||
<h2>无忧售后</h2>
|
||||
<p>7天无理由退货</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>特</h5>
|
||||
<div>
|
||||
<h2>特色服务</h2>
|
||||
<p>私人定制家电套餐</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>帮</h5>
|
||||
<div>
|
||||
<h2>帮助中心</h2>
|
||||
<p>您的购物指南</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mod_help">
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd><a href="#">上门自提</a></dd>
|
||||
<dd><a href="#">211限时达</a></dd>
|
||||
<dd><a href="#">配送服务查询</a></dd>
|
||||
<dd><a href="#">配送费收取标准</a></dd>
|
||||
<dd><a href="#">海外配送</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>支付方式</dt>
|
||||
<dd><a href="#">货到付款</a></dd>
|
||||
<dd><a href="#">在线支付</a></dd>
|
||||
<dd><a href="#">分期付款</a></dd>
|
||||
<dd><a href="#">邮局汇款</a></dd>
|
||||
<dd><a href="#">公司转账</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>售后服务</dt>
|
||||
<dd><a href="#">售后政策</a></dd>
|
||||
<dd><a href="#">价格保护</a></dd>
|
||||
<dd><a href="#">退款说明</a></dd>
|
||||
<dd><a href="#">返修/退换货</a></dd>
|
||||
<dd><a href="#">取消订单</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>特色服务</dt>
|
||||
<dd><a href="#">夺宝岛</a></dd>
|
||||
<dd><a href="#">DIY装机</a></dd>
|
||||
<dd><a href="#">延保服务</a></dd>
|
||||
<dd><a href="#">品优购E卡</a></dd>
|
||||
<dd><a href="#">品优购通信</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>帮助中心</dt>
|
||||
<dd class="erweima"><img src="images/erweima.png" alt=""></dd>
|
||||
<dd><a href="https://wx.qq.com/" target="_blank">扫码加我微信 ！</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="footer_bottom">
|
||||
<p>
|
||||
<a href="#">关于我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系客服</a>
|
||||
<span>|</span>
|
||||
<a href="#">商家入驻</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">手机品优购</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">销售联盟</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购社区</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购公益</a>
|
||||
<span>|</span>
|
||||
<a href="#">English Site</a>
|
||||
<span>|</span>
|
||||
<a href="#">Contact U </a>
|
||||
<span></span>
|
||||
</p>
|
||||
<p> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
|
||||
传真：010-82935100 邮箱:
|
||||
zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- 底部模块制作 end -->
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
32
js/ainmate.js
Normal file
32
js/ainmate.js
Normal file
@@ -0,0 +1,32 @@
|
||||
function animate(obj, target, callback) { // 盒子移动函数
|
||||
clearInterval(obj.timer);
|
||||
obj.timer = setInterval(move, 20);
|
||||
function move() {
|
||||
var step = (target - obj.offsetLeft) / 10;
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
||||
obj.style.left = obj.offsetLeft + step + 'px';
|
||||
// obj.style.left = target + 'px'; // 闪变
|
||||
if (obj.offsetLeft == target) {
|
||||
clearInterval(obj.timer);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animateY(obj, target, callback) { // 盒子移动函数
|
||||
clearInterval(obj.timer);
|
||||
obj.timer = setInterval(move, 10);
|
||||
function move() {
|
||||
var step = (target - window.pageYOffset) / 10;
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
||||
// obj.style.left = target + 'px'; // 闪变
|
||||
if (window.pageYOffset == target) {
|
||||
clearInterval(obj.timer);
|
||||
callback && callback();
|
||||
}
|
||||
// window.pageYOffset = window.pageYOffset + step + 'px';
|
||||
window.scroll(0, window.pageYOffset + step) // 不加单位
|
||||
}
|
||||
}
|
||||
135
js/index.js
Normal file
135
js/index.js
Normal file
@@ -0,0 +1,135 @@
|
||||
window.addEventListener('load', function () {
|
||||
var arrow_l = this.document.querySelector('.arrow_left');
|
||||
var arrow_r = this.document.querySelector('.arrow_right');
|
||||
var focus = this.document.querySelector('.focus');
|
||||
focus.addEventListener('mouseenter', function () {
|
||||
arrow_l.style.display = 'block';
|
||||
arrow_r.style.display = 'block';
|
||||
clearInterval(timer)
|
||||
timer = null; // 清楚定时器变量
|
||||
})
|
||||
focus.addEventListener('mouseleave', function () {
|
||||
arrow_l.style.display = 'none';
|
||||
arrow_r.style.display = 'none';
|
||||
timer = setInterval(function () {
|
||||
// 手动调用事件
|
||||
arrow_r.click();
|
||||
}, 5000)
|
||||
})
|
||||
var ul = focus.querySelector('ul');
|
||||
var ol = focus.querySelector('.spot'); // 获取 focus 中的 ol
|
||||
// console.log(ul.children.length);
|
||||
|
||||
var num = 0; // 通过箭头控制播放图片的变量
|
||||
var circle = 0; //通过小圆圈的播放图片的变量
|
||||
|
||||
var focusWidth = focus.offsetWidth;
|
||||
for (var i = 0; i < ul.children.length; i++) {
|
||||
// 创建 li
|
||||
var li = this.document.createElement('li');
|
||||
|
||||
li.setAttribute('index', i) // 记录当前 小圆圈的索引号
|
||||
|
||||
// 插入 ul
|
||||
ol.appendChild(li);
|
||||
|
||||
// 创建 li 的同时给 该li 绑定事件，点到此li，此li变色，其他所有li褪色(排他思想)
|
||||
li.addEventListener('click', function () {
|
||||
for (var i = 0; i < ol.children.length; i++) {
|
||||
ol.children[i].className = '';
|
||||
}
|
||||
this.className = 'current'
|
||||
// 点击 小圆圈，移动图片
|
||||
// ul 移动的距离就是小圆圈的索引号 乘以图片的宽度，注意是 负值，往左走
|
||||
var index = this.getAttribute('index') // 获取当前小 li 的索引号
|
||||
|
||||
// 同步思想
|
||||
circle = num = index; // 当点击了某个li，就把小li的索引号给num和circle，这样可以解决不管是通过箭头还是小圆圈播放图片，都不会错序
|
||||
|
||||
animate(ul, -index * focusWidth);
|
||||
|
||||
})
|
||||
}
|
||||
// ol 第一个 li 类名设置为 current
|
||||
ol.children[0].className = 'current';
|
||||
|
||||
// 克隆第一张图片，放在ul的最后面
|
||||
var first = ul.children[0].cloneNode(true) // 深拷贝
|
||||
ul.appendChild(first);
|
||||
|
||||
// 左右侧点击事件
|
||||
var flag = true; // 节流阀
|
||||
arrow_r.addEventListener('click', function () {
|
||||
if (flag) {
|
||||
// flag = false; //停用节流阀功能
|
||||
if (num == ul.children.length - 1) {
|
||||
ul.style.left = 0;
|
||||
num = 0;
|
||||
}
|
||||
num++;
|
||||
animate(ul, -focusWidth * num, function () {
|
||||
flag = true; // 此次移动结束后放开节流阀
|
||||
});
|
||||
|
||||
circle++;
|
||||
// 如果走到最后克隆的图片，则重置 circle的值即可
|
||||
if (circle == ol.children.length) {
|
||||
circle = 0;
|
||||
}
|
||||
circleChange();
|
||||
}
|
||||
})
|
||||
|
||||
arrow_l.addEventListener('click', function () {
|
||||
if (num == 0) {
|
||||
num = ul.children.length - 1;
|
||||
ul.style.left = -num * focusWidth + 'px';
|
||||
}
|
||||
num--;
|
||||
animate(ul, -focusWidth * num);
|
||||
|
||||
circle--;
|
||||
// 当 circle小于0时，讲circle值设置为最后一个
|
||||
if (circle < 0) {
|
||||
circle = ol.children.length - 1;
|
||||
}
|
||||
circleChange();
|
||||
})
|
||||
function circleChange() {
|
||||
// 排他思想,清除所有的ol 下 li的current
|
||||
for (var i = 0; i < ol.children.length; i++) {
|
||||
ol.children[i].className = '';
|
||||
}
|
||||
ol.children[circle].className = 'current'; // 只保留当前的小 li 为current状态
|
||||
}
|
||||
|
||||
var timer = setInterval(function () {
|
||||
// 手动调用事件
|
||||
arrow_r.click();
|
||||
}, 5000)
|
||||
|
||||
|
||||
var rettop = this.document.querySelector('.returntop'); // 侧边栏返回顶部模块
|
||||
var recomment = this.document.querySelector('.recommend') // 推荐模块
|
||||
//页面滚动事件
|
||||
this.document.addEventListener('scroll', function () {
|
||||
// console.log(window.pageYOffset); // 页面被卷曲的头部
|
||||
// console.log(recomment.offsetTop);
|
||||
if (window.pageYOffset >= recomment.offsetTop) {
|
||||
rettop.style.display = 'block';
|
||||
} else {
|
||||
rettop.style.display = 'none';
|
||||
}
|
||||
})
|
||||
|
||||
// 返回顶部事件
|
||||
rettop.addEventListener('click', function () {
|
||||
// window.scroll(0, 0); // 瞬间返回
|
||||
animateY(window, 0)
|
||||
})
|
||||
|
||||
|
||||
// 楼梯跳转
|
||||
var guesslike = this.document.querySelector('.guesslike');
|
||||
console.log(guesslike.offsetTop);
|
||||
})
|
||||
74
js/login1.js
Normal file
74
js/login1.js
Normal file
@@ -0,0 +1,74 @@
|
||||
window.addEventListener("load", function () {
|
||||
// alert('登陆页面可以关闭哦！')
|
||||
var body = document.querySelector("body");
|
||||
var box = document.querySelector(".box");
|
||||
var close = document.querySelector(".close");
|
||||
var closer = document.querySelector(".close").firstElementChild; // close 范围太广，只取其第一个子元素(即装 X 文本的 span元素)
|
||||
var header = document.querySelector(".header");
|
||||
var not = document.querySelector(".not"); // 提示文字最好不要改大盒子里直接修改，而是安排一个小盒子
|
||||
var sub = document.querySelector(".sub");
|
||||
|
||||
var time = 5;
|
||||
|
||||
header.addEventListener("click", function () {
|
||||
body.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
||||
box.style.display = "block";
|
||||
|
||||
not.innerHTML = "(拖动顶部可以移动窗口哦 " + time + "! )";
|
||||
time--;
|
||||
|
||||
var time2 = setInterval(notice, 1000);
|
||||
function notice() {
|
||||
not.innerHTML = "(拖动顶部可以移动窗口哦 " + time + "! )";
|
||||
time--;
|
||||
}
|
||||
setTimeout(function () {
|
||||
clearInterval(time2);
|
||||
not.innerHTML = "";
|
||||
time = 5; // 重新赋值，下次再打开时还是从 5 开始计时
|
||||
}, 6000);
|
||||
});
|
||||
|
||||
closer.onclick = function () {
|
||||
box.style.display = "none";
|
||||
body.style.backgroundColor = "#fff";
|
||||
};
|
||||
|
||||
document.addEventListener("selectstart", function (e) {
|
||||
e.preventDefault(); //方法后的两个括号不可以省略
|
||||
// 禁止选中文字，避免给拖动操作带来不好的效果
|
||||
});
|
||||
|
||||
// 开始拖拽
|
||||
// (1) 鼠标按下， 就获取鼠标在盒子内的坐标
|
||||
close.addEventListener("mousedown", function (e) {
|
||||
var x = e.pageX - box.offsetLeft;
|
||||
var y = e.pageY - box.offsetTop; // 记录鼠标在 移动窗口(盒子)内的坐标 x y
|
||||
// console.log(x, y);
|
||||
|
||||
// (2) 当鼠标移动时，设置窗口的 left 和 top 值 ，让其等于鼠标在document的坐标减去在窗口(盒子)内的坐标
|
||||
document.addEventListener("mousemove", move);
|
||||
function move(e) {
|
||||
box.style.left = e.pageX - x + "px";
|
||||
box.style.top = e.pageY - y + "px";
|
||||
}
|
||||
// 鼠标弹起， 就让鼠标移动事件移除
|
||||
document.addEventListener("mouseup", function () {
|
||||
document.removeEventListener("mousemove", move);
|
||||
});
|
||||
});
|
||||
var time3 = 5;
|
||||
sub.addEventListener("click", function () {
|
||||
// alert('haha')
|
||||
sub.value = "您将会在" + time3 + "秒种之后跳转到首页";
|
||||
time3--;
|
||||
setInterval(function () {
|
||||
if (time3 == 0) {
|
||||
alert("登陆成功，点击确定即可进入页面");
|
||||
window.location.href = "https://www.youdu.love/";
|
||||
}
|
||||
sub.value = "您将会在" + time3 + "秒种之后跳转到首页";
|
||||
time3--;
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
84
js/register.js
Normal file
84
js/register.js
Normal file
@@ -0,0 +1,84 @@
|
||||
window.addEventListener('load', function () {
|
||||
var inpPhonNum = document.querySelector('#phonenum'); // 手机号输入框
|
||||
var phoneTips = document.querySelector('.phonetips'); // 手机号输入提示
|
||||
var flag = false; // 验证手机号是否已经正确输入
|
||||
inpPhonNum.addEventListener('focus', function () {
|
||||
if (!flag) {
|
||||
phoneTips.style.color = 'blue';
|
||||
phoneTips.innerHTML = "请输入11位数的手机号"; // 密码输入，获取焦点时提醒
|
||||
}
|
||||
})
|
||||
inpPhonNum.addEventListener('blur', function () {
|
||||
phoneTips.style.color = 'red';
|
||||
if (this.value == '') {
|
||||
phoneTips.innerHTML = '手机号码不能为空';
|
||||
} else if (this.value.length != 11) {
|
||||
phoneTips.innerHTML = '手机号码格式不正确';
|
||||
}
|
||||
else {
|
||||
phoneTips.style.color = 'green';
|
||||
phoneTips.innerHTML = "正确";
|
||||
flag = true
|
||||
btn.disabled = false; // 手机号码正确才给验证码获取按钮激活
|
||||
}
|
||||
})
|
||||
|
||||
var yzm = this.document.querySelector('#yanzhengma');
|
||||
var btn = this.document.querySelector('.btn');
|
||||
btn.disabled = true; // 按钮默认失活
|
||||
var time = 5
|
||||
btn.addEventListener('click', function () {
|
||||
// btn.disabled = true // 这里的 btn 可以用 windows 代替
|
||||
this.disabled = true
|
||||
var timer = setInterval(function () { // 定时器里的 this 指向的是 Windows
|
||||
console.log(this); // 故 事件间隔函数不能随便使用 this
|
||||
if (time < 0) {
|
||||
clearInterval(timer) // 清楚间隔定时器
|
||||
btn.disabled = false
|
||||
time = 5 // 重新开始
|
||||
btn.innerHTML = '发送'
|
||||
} else {
|
||||
btn.innerHTML = time + '秒'
|
||||
time--
|
||||
}
|
||||
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
var pw1 = this.document.querySelector('#pw1');
|
||||
var pw2 = this.document.querySelector('#pw2');
|
||||
var passtips = this.document.querySelector('.passtips');
|
||||
var confirmpasstips = this.document.querySelector('.confirmpasstips');
|
||||
|
||||
pw1.addEventListener('focus', function () {
|
||||
if (this.value == '') {
|
||||
passtips.style.color = 'blue';
|
||||
passtips.innerHTML = '密码长度需要去大于六位'
|
||||
}
|
||||
})
|
||||
pw1.addEventListener('blur', function () {
|
||||
passtips.style.color = 'red';
|
||||
if (flag && yzm.value != '') {
|
||||
if (this.value == '') {
|
||||
passtips.innerHTML = '密码不能为空';
|
||||
} else if (this.value.length < 6) {
|
||||
passtips.innerHTML = '密码未满六位';
|
||||
} else {
|
||||
passtips.style.color = 'green';
|
||||
passtips.innerHTML = '正确';
|
||||
}
|
||||
} else {
|
||||
passtips.innerHTML = '手机号或验证码错误';
|
||||
}
|
||||
})
|
||||
pw2.addEventListener('keyup', function () {
|
||||
if (pw1.value === pw2.value && pw1.value != '') {
|
||||
confirmpasstips.style.color = 'green'
|
||||
confirmpasstips.innerHTML = '正确'
|
||||
} else {
|
||||
confirmpasstips.style.color = 'red'
|
||||
confirmpasstips.innerHTML = '密码上下不一致';
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
589
list.html
Normal file
589
list.html
Normal file
@@ -0,0 +1,589 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>列表页(PY.COM) - 正品低价、品质保障、配送及时、轻松购物！</title>
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/list.css">
|
||||
<meta name="author" content="吴兴有">
|
||||
|
||||
<meta name="description" content="品优-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数
|
||||
十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
|
||||
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 快捷导航模块 start -->
|
||||
<section class="shortcut">
|
||||
<div class="w">
|
||||
<div class="fl">
|
||||
<ul>
|
||||
<li>品优购欢迎您！ </li>
|
||||
<li><a href="login.html">请登录</a> <a href="login.html" class="style_red">免费注册</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<ul>
|
||||
<li><a href="#">我的订单</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">我的品优购 </a></li>
|
||||
<li></li>
|
||||
<li><a href="#">品优购会员</a></li>
|
||||
<li></li>
|
||||
<li><a href="#">企业采购</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">关注品优购 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">客户服务 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">网站导航 </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 快捷导航模块 end -->
|
||||
|
||||
<!-- 头部制作 start -->
|
||||
<div class="header w">
|
||||
<div class="logo">
|
||||
<h1><a href="index.html" title="吴兴有的品优购商城">品友购商城</a></h1>
|
||||
</div>
|
||||
<div class="sc">
|
||||
<a href="#">
|
||||
<img src="images/sc.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="search">
|
||||
<input type="search" name="" id="" placeholder="宝，你来啦 !">
|
||||
<a href="https://www.taobao.com/" target="_blank"><button class="iconfont"></button></a>
|
||||
</div>
|
||||
<div class="hotwords">
|
||||
<a href="">优惠购首发</a>
|
||||
<a href="">亿元优惠</a>
|
||||
<a href="">9.9元团购</a>
|
||||
<a href="">美满99减30</a>
|
||||
<a href="">办公用品</a>
|
||||
<a href="">电脑</a>
|
||||
<a href="">通信</a>
|
||||
</div>
|
||||
<div class="shopcar iconfont">
|
||||
<a href="shopcar.html"><i></i> <em>我的购物车</em> </a>
|
||||
<div class="shopcar_icon"><a href="shopcar.html">qq3050128610</a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 头部制作 end -->
|
||||
|
||||
<!-- nav栏制作 start -->
|
||||
<div class="nav">
|
||||
<div class="w ">
|
||||
<div class="sk_list">
|
||||
<ul>
|
||||
<li><a href="#">品优秒杀</a></li>
|
||||
<li> <a href="#">即将售空</a></li>
|
||||
<li><a href="#">超值低价</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sk_con">
|
||||
<ul>
|
||||
<li><a href="#">女装</a></li>
|
||||
<li><a href="#">女鞋</a></li>
|
||||
<li><a href="#">男装</a></li>
|
||||
<li><a href="#">男鞋</a></li>
|
||||
<li><a href="#">母婴童装</a></li>
|
||||
<li><a href="#">食品</a></li>
|
||||
<li><a href="#">智能数码</a></li>
|
||||
<li><a href="#">运动户外</a></li>
|
||||
<li><a href="#" class="iconfont">更多分类 </a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- nav栏制作 end -->
|
||||
|
||||
<div class="rush_buy w">
|
||||
<a href="#">
|
||||
<img src="images/rush_buy.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 仿京东商品栏 开始 -->
|
||||
<div class="sell w">
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/iphone14_1.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog1.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
ROG魔霸6 Plus 17.3英寸 2.5K 240Hz P3广色域游戏本笔记本电脑
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/iphone14_2.png" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/iphone14_3.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog2.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog3.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/iphone14_2.png" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog2.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog_4.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog3.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog_5.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/tx3_1.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/tx3_2.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/tx3_3.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog1.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/mac2.png" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/rog2.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/mac1.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/y9.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods">
|
||||
<div class="img">
|
||||
<img src="upload/wxr.jpg" alt="">
|
||||
</div>
|
||||
<div class="prize">
|
||||
<p>$998</p>
|
||||
</div>
|
||||
<div class="recom">
|
||||
<a href="#">
|
||||
Apple iPhone 14 支持移动联通电信5G 双卡双待手机 蓝色 128G官方标配
|
||||
</a>
|
||||
</div>
|
||||
<div class="purchase">
|
||||
<a href="shopcar.html " class="iconfont" target="_blank"> 加入购物车 <i> </i> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 仿京东商品栏 结束 -->
|
||||
|
||||
|
||||
|
||||
<!-- 底部模块制作 start -->
|
||||
<footer class="footer">
|
||||
<div class="w">
|
||||
<div class="mod_service">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>正</h5>
|
||||
<div>
|
||||
<h2>正品保障</h2>
|
||||
<p>正品保障，提供发票</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>速</h5>
|
||||
<div>
|
||||
<h2>极速物流</h2>
|
||||
<p>极速物流，急速送达</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>保</h5>
|
||||
<div>
|
||||
<h2>无忧售后</h2>
|
||||
<p>7天无理由退货</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>特</h5>
|
||||
<div>
|
||||
<h2>特色服务</h2>
|
||||
<p>私人定制家电套餐</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>帮</h5>
|
||||
<div>
|
||||
<h2>帮助中心</h2>
|
||||
<p>您的购物指南</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mod_help">
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd><a href="#">上门自提</a></dd>
|
||||
<dd><a href="#">211限时达</a></dd>
|
||||
<dd><a href="#">配送服务查询</a></dd>
|
||||
<dd><a href="#">配送费收取标准</a></dd>
|
||||
<dd><a href="#">海外配送</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>支付方式</dt>
|
||||
<dd><a href="#">货到付款</a></dd>
|
||||
<dd><a href="#">在线支付</a></dd>
|
||||
<dd><a href="#">分期付款</a></dd>
|
||||
<dd><a href="#">邮局汇款</a></dd>
|
||||
<dd><a href="#">公司转账</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>售后服务</dt>
|
||||
<dd><a href="#">售后政策</a></dd>
|
||||
<dd><a href="#">价格保护</a></dd>
|
||||
<dd><a href="#">退款说明</a></dd>
|
||||
<dd><a href="#">返修/退换货</a></dd>
|
||||
<dd><a href="#">取消订单</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>特色服务</dt>
|
||||
<dd><a href="#">夺宝岛</a></dd>
|
||||
<dd><a href="#">DIY装机</a></dd>
|
||||
<dd><a href="#">延保服务</a></dd>
|
||||
<dd><a href="#">品优购E卡</a></dd>
|
||||
<dd><a href="#">品优购通信</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>帮助中心</dt>
|
||||
<dd class="erweima"><img src="images/erweima.png" alt=""></dd>
|
||||
<dd> <a href="https://wx.qq.com/" target="_blank">扫码加我微信 ！</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="footer_bottom">
|
||||
<p>
|
||||
<a href="#">关于我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系客服</a>
|
||||
<span>|</span>
|
||||
<a href="#">商家入驻</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">手机品优购</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">销售联盟</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购社区</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购公益</a>
|
||||
<span>|</span>
|
||||
<a href="#">English Site</a>
|
||||
<span>|</span>
|
||||
<a href="#">Contact U </a>
|
||||
<span></span>
|
||||
</p>
|
||||
<p> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
|
||||
传真：010-82935100 邮箱:
|
||||
zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- 底部模块制作 end -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
207
login.html
Normal file
207
login.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="吴兴有">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/login.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<title>请登录</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header w">
|
||||
<h1>
|
||||
<a href="index.html" title="吴兴有的品优购商城"><img src="images/logo2.png" alt=""></a>
|
||||
<div class="logo_title">
|
||||
欢迎登录
|
||||
</div>
|
||||
</h1>
|
||||
<div class="header_right">
|
||||
<a href="#" class="iconfont"> <i> </i>"登录界面" 改进建议</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="login_box">
|
||||
<div class="hd">
|
||||
<h1><a href="#">密码登录</a> | <a href="#">短信登录</a></h1>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="" class="iconfont"> </label><input type="text" name="" id="act"
|
||||
placeholder="账户名/邮箱/手机号">
|
||||
</li>
|
||||
<li>
|
||||
<label for="" class="iconfont"> </label><input type="password" name="" id="pass"
|
||||
placeholder="请输入登陆密码">
|
||||
</li>
|
||||
<li>
|
||||
<button>登录</button>
|
||||
</li>
|
||||
<span class="ways">
|
||||
<a href="#" class="iconfont"><span class="wb">󰆯</span> <span
|
||||
class="txt">微博登录</span></a>
|
||||
<a href="#" class="iconfont"><span class="wx">󰄆</span> <span
|
||||
class="txt">微信登录</span></a>
|
||||
<a href="#" class="iconfont "><span class="zfb"></span> <span
|
||||
class="txt">支付宝登录</span></a>
|
||||
</span><br><br>
|
||||
<span class="other">
|
||||
<a href="#">忘记密码</a>
|
||||
<a href="#">忘记账户名</a>
|
||||
<a href="register.html" class="style_red">免费注册</a>
|
||||
</span>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="w">
|
||||
<div class="mod_service">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>正</h5>
|
||||
<div>
|
||||
<h2>正品保障</h2>
|
||||
<p>正品保障，提供发票</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>速</h5>
|
||||
<div>
|
||||
<h2>极速物流</h2>
|
||||
<p>极速物流，急速送达</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>保</h5>
|
||||
<div>
|
||||
<h2>无忧售后</h2>
|
||||
<p>7天无理由退货</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>特</h5>
|
||||
<div>
|
||||
<h2>特色服务</h2>
|
||||
<p>私人定制家电套餐</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>帮</h5>
|
||||
<div>
|
||||
<h2>帮助中心</h2>
|
||||
<p>您的购物指南</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mod_help">
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd><a href="#">上门自提</a></dd>
|
||||
<dd><a href="#">211限时达</a></dd>
|
||||
<dd><a href="#">配送服务查询</a></dd>
|
||||
<dd><a href="#">配送费收取标准</a></dd>
|
||||
<dd><a href="#">海外配送</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>支付方式</dt>
|
||||
<dd><a href="#">货到付款</a></dd>
|
||||
<dd><a href="#">在线支付</a></dd>
|
||||
<dd><a href="#">分期付款</a></dd>
|
||||
<dd><a href="#">邮局汇款</a></dd>
|
||||
<dd><a href="#">公司转账</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>售后服务</dt>
|
||||
<dd><a href="#">售后政策</a></dd>
|
||||
<dd><a href="#">价格保护</a></dd>
|
||||
<dd><a href="#">退款说明</a></dd>
|
||||
<dd><a href="#">返修/退换货</a></dd>
|
||||
<dd><a href="#">取消订单</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>特色服务</dt>
|
||||
<dd><a href="#">夺宝岛</a></dd>
|
||||
<dd><a href="#">DIY装机</a></dd>
|
||||
<dd><a href="#">延保服务</a></dd>
|
||||
<dd><a href="#">品优购E卡</a></dd>
|
||||
<dd><a href="#">品优购通信</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>帮助中心</dt>
|
||||
<dd class="erweima"><img src="images/erweima.png" alt=""></dd>
|
||||
<dd> <a href="https://wx.qq.com/" target="_blank">扫码加我微信 ！</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="footer_bottom">
|
||||
<p>
|
||||
<a href="#">关于我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系客服</a>
|
||||
<span>|</span>
|
||||
<a href="#">商家入驻</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">手机品优购</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">销售联盟</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购社区</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购公益</a>
|
||||
<span>|</span>
|
||||
<a href="#">English Site</a>
|
||||
<span>|</span>
|
||||
<a href="#">Contact U </a>
|
||||
<span></span>
|
||||
</p>
|
||||
<p> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
|
||||
传真：010-82935100 邮箱:
|
||||
zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- 底部模块制作 end -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
50
login1.html
Normal file
50
login1.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="./css/login1.css">
|
||||
<script src="./js/login1.js"></script>
|
||||
<title>品优购登录页面2</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">点这儿登陆</div>
|
||||
<div class="box">
|
||||
<div class="w">
|
||||
<div class="close"><span>X</span><i class="not">拖动顶部可以移动窗口哦</i></div>
|
||||
<div class="lg-top">网络课堂登录</div>
|
||||
<div class="lg-main">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="acc-left">账户</div>
|
||||
<div class="acc-right">
|
||||
<input type="text" name="" id="" placeholder="账户名/邮箱/手机号">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="acc-left">密码</div>
|
||||
<div class="acc-right">
|
||||
<input type="password" name="" id="" placeholder="请输入登录密码">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="left">
|
||||
<input type="checkbox" name="" id=""> 记住账号
|
||||
</div>
|
||||
<a href="#" class="right">忘记密码?</a>
|
||||
</li>
|
||||
<li>
|
||||
<input type="submit" value="登录" class="sub">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
99
register.html
Normal file
99
register.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="吴兴有">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/register.css">
|
||||
<title>个人注册</title>
|
||||
<script src="js/register.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="w">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="index.html" title="吴兴有的品优购商城"><img src="images/logo2.png" alt=""></a>
|
||||
<div class="logo_title">
|
||||
欢迎注册
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="register_area w">
|
||||
<div class="reg_hd">
|
||||
<h3>注册新用户</h3>
|
||||
<div class="sb">
|
||||
我有账号，去<a href="login.html">登录</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reg_bd">
|
||||
<div class="reg_form">
|
||||
<ul>
|
||||
<li><label for="">手机号 : </label><input type="text" name="" id="phonenum"><span
|
||||
class="phonetips"></span>
|
||||
</li>
|
||||
<li><label for="">短信验证码 : </label><input type="text" name="" id="yanzhengma"><button
|
||||
class="btn">发送</button>
|
||||
</li>
|
||||
<li><label for="">登陆密码 : </label><input type="password" name="pw1" id="pw1"><span
|
||||
class="passtips"></span>
|
||||
</li>
|
||||
<li class="safe">安全程度：<em>弱</em><em>中</em><em>强</em><em>极强</em></li>
|
||||
<li><label for="">确认密码 : </label><input type="password" name="pw2" id="pw2"><span
|
||||
class="confirmpasstips"></span>
|
||||
</li>
|
||||
<li class="ifagree">
|
||||
<input type="checkbox"> 同意协议<a href="#">《品优用户协议》</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="submit" name="sub" id="" value="提交注册" class="sub">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer_bottom">
|
||||
<p>
|
||||
<a href="#">关于我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系客服</a>
|
||||
<span>|</span>
|
||||
<a href="#">商家入驻</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">手机品优购</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">销售联盟</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购社区</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购公益</a>
|
||||
<span>|</span>
|
||||
<a href="#">English Site</a>
|
||||
<span>|</span>
|
||||
<a href="#">Contact U </a>
|
||||
<span></span>
|
||||
</p>
|
||||
<p> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
|
||||
传真：010-82935100 邮箱:
|
||||
zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
478
shopcar.html
Normal file
478
shopcar.html
Normal file
@@ -0,0 +1,478 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico" />
|
||||
<link rel="stylesheet" href="css/shopcar.css">
|
||||
<title>购物车</title>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<!-- 快捷导航模块 start -->
|
||||
<section class="shortcut">
|
||||
<div class="w">
|
||||
<div class="fl">
|
||||
<ul>
|
||||
<li>品优购欢迎您！ </li>
|
||||
<li><a href="login.html">请登录</a> <a href="login.html" class="style_red">免费注册</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<ul>
|
||||
<li><a href="#">我的订单</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">我的品优购 </a></li>
|
||||
<li></li>
|
||||
<li><a href="#">品优购会员</a></li>
|
||||
<li></li>
|
||||
<li><a href="#">企业采购</a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">关注品优购 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">客户服务 </a></li>
|
||||
<li></li>
|
||||
<li class="iconfont"><a href="#">网站导航 </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 快捷导航模块 end -->
|
||||
|
||||
<!-- 购物车内容 开始 -->
|
||||
<div class="w">
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<h1><a href="index.html" title="吴兴有的品优购商城">品友购商城</a></h1>
|
||||
</div>
|
||||
|
||||
<div class="car_search">
|
||||
<input type="search" name="" id="" placeholder="宝，你来啦 ！">
|
||||
<a href="list.html" target="_blank"><button class="iconfont"></button></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car_nav ">
|
||||
<h1> 全部商品</h1>
|
||||
<div class="delivery_area">
|
||||
<span>配送至：</span>
|
||||
<select name="area" id="">
|
||||
<option value="">请选择配送区域</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
<option value="destination">江西省九江市</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop_car_hd ">
|
||||
<div class="all_select">
|
||||
<input type="checkbox" name="" id=""> <span>全选</span>
|
||||
</div>
|
||||
<div class="goods">商品</div>
|
||||
<div class="prize">单价（元）</div>
|
||||
<div class="unmber">数量</div>
|
||||
<div class="subtotal">小计（元）</div>
|
||||
<div class="opearte">操作</div>
|
||||
</div>
|
||||
<div class="shop_car_bd">
|
||||
<input type="checkbox" name="" id=""> <span>品优自营</span>
|
||||
</div>
|
||||
|
||||
<div class="my_goods">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" name="" id="">
|
||||
<img src="upload/mygoods1.png" alt="">
|
||||
<div class="recommond">
|
||||
<p>
|
||||
苹果（Apple）MD463FE/A MAC 尺码：Thunderbolt至千兆... <br>
|
||||
Thunderbolt雷电接口 至千兆以太网转<br>
|
||||
<a href="#" class="style_red">购买礼品包装</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="uit_price">
|
||||
248
|
||||
</div>
|
||||
|
||||
<div class="num">
|
||||
<div class="hd">
|
||||
<button class="left" name="">-</button>
|
||||
<div class="n">1</div>
|
||||
<button class="right" name="">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="you">有货</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub">
|
||||
248
|
||||
</div>
|
||||
<div class="operater">
|
||||
<span><a href="#">删除</a></span><br>
|
||||
<span><a href="#">移到我的关注</a></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 购物车内容 结束 -->
|
||||
|
||||
|
||||
<!-- 底部模块制作 start -->
|
||||
<footer class="footer">
|
||||
<div class="w">
|
||||
<div class="mod_service">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>正</h5>
|
||||
<div>
|
||||
<h2>正品保障</h2>
|
||||
<p>正品保障，提供发票</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>速</h5>
|
||||
<div>
|
||||
<h2>极速物流</h2>
|
||||
<p>极速物流，急速送达</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>保</h5>
|
||||
<div>
|
||||
<h2>无忧售后</h2>
|
||||
<p>7天无理由退货</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>特</h5>
|
||||
<div>
|
||||
<h2>特色服务</h2>
|
||||
<p>私人定制家电套餐</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<h5>帮</h5>
|
||||
<div>
|
||||
<h2>帮助中心</h2>
|
||||
<p>您的购物指南</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mod_help">
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd><a href="#">上门自提</a></dd>
|
||||
<dd><a href="#">211限时达</a></dd>
|
||||
<dd><a href="#">配送服务查询</a></dd>
|
||||
<dd><a href="#">配送费收取标准</a></dd>
|
||||
<dd><a href="#">海外配送</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>支付方式</dt>
|
||||
<dd><a href="#">货到付款</a></dd>
|
||||
<dd><a href="#">在线支付</a></dd>
|
||||
<dd><a href="#">分期付款</a></dd>
|
||||
<dd><a href="#">邮局汇款</a></dd>
|
||||
<dd><a href="#">公司转账</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>售后服务</dt>
|
||||
<dd><a href="#">售后政策</a></dd>
|
||||
<dd><a href="#">价格保护</a></dd>
|
||||
<dd><a href="#">退款说明</a></dd>
|
||||
<dd><a href="#">返修/退换货</a></dd>
|
||||
<dd><a href="#">取消订单</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>特色服务</dt>
|
||||
<dd><a href="#">夺宝岛</a></dd>
|
||||
<dd><a href="#">DIY装机</a></dd>
|
||||
<dd><a href="#">延保服务</a></dd>
|
||||
<dd><a href="#">品优购E卡</a></dd>
|
||||
<dd><a href="#">品优购通信</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>帮助中心</dt>
|
||||
<dd class="erweima"><img src="images/erweima.png" alt=""></dd>
|
||||
<dd> <a href="https://wx.qq.com/" target="_blank">扫码加我微信 ！</a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="footer_bottom">
|
||||
<p>
|
||||
<a href="#">关于我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系我们</a>
|
||||
<span>|</span>
|
||||
<a href="#">联系客服</a>
|
||||
<span>|</span>
|
||||
<a href="#">商家入驻</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">手机品优购</a>
|
||||
<span>|</span>
|
||||
<a href="#">友情链接</a>
|
||||
<span>|</span>
|
||||
<a href="#">销售联盟</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购社区</a>
|
||||
<span>|</span>
|
||||
<a href="#">品优购公益</a>
|
||||
<span>|</span>
|
||||
<a href="#">English Site</a>
|
||||
<span>|</span>
|
||||
<a href="#">Contact U </a>
|
||||
<span></span>
|
||||
</p>
|
||||
<p> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
|
||||
传真：010-82935100 邮箱:
|
||||
zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- 底部模块制作 end -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
upload/advertise_1.png
Normal file
BIN
upload/advertise_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
upload/advertise_2.png
Normal file
BIN
upload/advertise_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
upload/advertise_3.png
Normal file
BIN
upload/advertise_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
upload/bao.png
Normal file
BIN
upload/bao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
upload/bd2_1.png
Normal file
BIN
upload/bd2_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
upload/bd2_2.png
Normal file
BIN
upload/bd2_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
upload/bd2_3_bottom.png
Normal file
BIN
upload/bd2_3_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
upload/bd2_3_top.png
Normal file
BIN
upload/bd2_3_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
upload/bd2_4.png
Normal file
BIN
upload/bd2_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
upload/bd2_5.png
Normal file
BIN
upload/bd2_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
upload/bd3-3_top.png
Normal file
BIN
upload/bd3-3_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
upload/bd3_1.png
Normal file
BIN
upload/bd3_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
upload/bd3_2.png
Normal file
BIN
upload/bd3_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
upload/bd3_3_bottom.png
Normal file
BIN
upload/bd3_3_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
upload/bd3_4.png
Normal file
BIN
upload/bd3_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
upload/bd3_5.png
Normal file
BIN
upload/bd3_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
upload/bd_1.png
Normal file
BIN
upload/bd_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
upload/bd_2.png
Normal file
BIN
upload/bd_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
upload/bd_3_bottom.png
Normal file
BIN
upload/bd_3_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
upload/bd_3_top.png
Normal file
BIN
upload/bd_3_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
upload/bd_4.png
Normal file
BIN
upload/bd_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
upload/bd_5.png
Normal file
BIN
upload/bd_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
upload/chuanzhi_1.png
Normal file
BIN
upload/chuanzhi_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
upload/chuanzhi_2.png
Normal file
BIN
upload/chuanzhi_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
upload/chuanzhi_3.png
Normal file
BIN
upload/chuanzhi_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
upload/chuanzhi_4.png
Normal file
BIN
upload/chuanzhi_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
upload/guesslike1.png
Normal file
BIN
upload/guesslike1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
upload/guo.png
Normal file
BIN
upload/guo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
upload/hanguo.png
Normal file
BIN
upload/hanguo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
upload/iphone14_1.jpg
Normal file
BIN
upload/iphone14_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
upload/iphone14_2.png
Normal file
BIN
upload/iphone14_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
upload/iphone14_3.jpg
Normal file
BIN
upload/iphone14_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
upload/jiebolang.png
Normal file
BIN
upload/jiebolang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
upload/mac1.jpg
Normal file
BIN
upload/mac1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
upload/mac2.png
Normal file
BIN
upload/mac2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
upload/mygoods1.png
Normal file
BIN
upload/mygoods1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
upload/oupu.png
Normal file
BIN
upload/oupu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
upload/recom_04.jpg
Normal file
BIN
upload/recom_04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
upload/recom_1.png
Normal file
BIN
upload/recom_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
upload/recom_2.png
Normal file
BIN
upload/recom_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
upload/recom_3.png
Normal file
BIN
upload/recom_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
upload/recom_4.png
Normal file
BIN
upload/recom_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
upload/rog1.jpg
Normal file
BIN
upload/rog1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
upload/rog2.jpg
Normal file
BIN
upload/rog2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
upload/rog3.jpg
Normal file
BIN
upload/rog3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
upload/rog_4.jpg
Normal file
BIN
upload/rog_4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
upload/rog_5.jpg
Normal file
BIN
upload/rog_5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user