前言
想要拥有一个专业、独特的电商博客?波猫商城专业版模板是你的绝佳选择!无论你是想要开设一个个人电商博客,还是打造一个在线商城,这个模板都能满足你的需求。
让我们来看看波猫商城专业版模板的特点:
- 强大的功能:这个模板集成了丰富的电商功能,包括商品展示、购物车、订单管理、支付接口等,让你的博客具备完整的电商功能。
- 精美的界面设计:波猫商城专业版模板采用现代化的设计风格,界面简洁美观,让你的博客与众不同。
- 自定义性强:你可以根据自己的需求自由定制博客的样式、布局、颜色等,打造属于自己的独特风格。
- 响应式设计:模板支持响应式设计,适应各种终端设备,无论是电脑、平板还是手机,都能够完美展示。
- SEO优化:模板内置了SEO优化功能,帮助你提升博客在搜索引擎中的排名,吸引更多的流量和用户。
- 多种支付接口:集成了多种支付接口,包括微信支付、支付宝支付等,方便用户完成购买并提升用户体验。
- 客户管理:模板提供了客户管理功能,方便你管理和跟踪客户信息,提供更好的售后服务。
- 丰富的插件和扩展:模板支持丰富的插件和扩展,可以根据需要添加更多的功能和特性。
无论你是想要开设一个个人电商博客,还是打造一个专业的在线商城,波猫商城专业版模板都能帮助你实现目标。赶快获取模板,展示你的产品,吸引更多的用户,实现商业成功!
内容
主页:
登录:
注册:
忘记密码:
订单查询:
功能
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>商店首页 - 网络乞丐</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Keywords" content="空谷传声">
<meta name="description" content="空谷传声">
<link href="static/picture/1fd70064325848d5af55bf229fe54909.png" rel="icon">
<link rel="stylesheet" href="static/css/layui.css">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/iconfont.css">
<link rel="stylesheet" href="static/css/footer.css">
<script src="static/js/iconfont.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.icon {
width: 1.5em;
height: 1.5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="static/css/index.css">
<link rel="stylesheet" href="static/css/swiper-bundle.min.css">
<style>
.no-content {
padding: 60px 0 55px;
text-align: center;
color: #999;
border-radius: 5px;
}
.no-content .no-content-img {
width: 150px;
margin: 0 auto 20px;
display: block;
}
.no-content .user-no-contents {
margin-bottom: 0;
padding-bottom: 15px;
text-align: center;
font-size: 18px;
color: #c8c8c8;
}
</style>
</head>
<body class="page-no-scroll">
<!-- header -->
<style>
.login-btn {
border-radius: 5px !important;
color: #fff !important;
height: initial !important;
line-height: 38px !important;
font-size: 14px !important;
padding: 0 18px !important;
-webkit-box-shadow: 0 5px 6px 0 rgb(73 105 230 / 22%) !important;
background: linear-gradient(0deg,#409EFF,#8987ff) !important;
}
</style>
<div class="ew-header">
<div class="layui-container">
<a class="layui-logo" href="" style="letter-spacing: 1.5px;position: relative;">
<img src="static/picture/logo.png" class="img-item" style="width: 32px;height: 32px;position: absolute;left: 0;">
<span>网络乞丐</span>
</a>
<div class="ew-nav-group-mobile">
<a id="btn-show">
<svg class="icon" style="width: 30px; height: 30px;" aria-hidden="true">
<use xlink:href="#icon-tixing1"></use>
</svg>
</a>
</div>
<div class="ew-nav-group">
<div class="nav-toggle"><i class="layui-icon layui-icon-shrink-right"></i></div>
<ul class="layui-nav">
<li class="layui-nav-item layui-this">
<a href="">商店首页</a>
</li>
<li class="layui-nav-item">
<a href="article.html">文章教程</a>
</li>
<li class="layui-nav-item">
<a href="search.html">
查询订单
</a>
</li>
<li class="layui-nav-item back-item" style="padding: 0 0 0 20px;">
<a href="login.html" class="layui-btn login-btn">登入/注册</a>
</li>
</ul>
</div>
</div>
</div>
<!-- goods-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
<div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="login.html" style="height: 100%; background-image: url(static/image/37f17253973c6e92beb2ee2edf57c71b.png);">
<div class="swiper-text">
<h2></h2>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="https://www.yuque.com/haoxiangshidacuigege/orqb6e/kopvfug8lovlkc5t" style="height: 100%; background-image: url(static/image/c222a5366551082cbd53b34529e575c6.png);">
<div class="swiper-text">
<h2></h2>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="login.html" style="height: 100%; background-image: url(static/image/e989203b4be87122fb0ba50e97cf7682.png);">
<div class="swiper-text">
<h2></h2>
</div>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md4 zlian-is-user-widget">
<div class="user-widget-content">
<div>
<div class="user-w-logon">
<div style="text-align: center; padding: 15px;">
<div style="background: rgb(223 223 223 / 30%); width: 51px; height: 51px; padding: 4px; border-radius: 50%; margin: 0 auto; cursor: pointer; position: relative;">
<img style="height: 51px; width: 51px; background-color: #f5f5f5; border-radius: 50%" src="static/picture/author.svg">
</div>
<h3 style="margin-top: 10px; font-size: 20px; font-weight: 500;">
未登录
</h3>
<h4 style="margin-top: 6px">
注册登录可享受会员专属福利
</h4>
</div>
<div class="bd" style="padding: 0;">
<dl style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
<dd style="padding: 0 5px 15px 15px">
<a class="layui-btn layui-btn-normal zlian-sidebar-login-btn" href="login.html">登录</a>
</dd>
</dl>
<span class="zlian-sidebar-span">?</span>
<dl style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
<dd style="padding: 0 15px 15px 5px">
<a class="layui-btn layui-btn-normal zlian-sidebar-reg-btn" href="register.html">注册</a>
</dd>
</dl>
</div>
</div>
</div>
<div class="widget-mission-footer">
<a href="search.html" style="padding: 11px 10px;">订单查询 <i class="layui-icon" style="transform: rotate(-0deg);"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- classify-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
<div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
<div class="layui-card-header">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gengduo1"></use>
</svg>
选择分类
<div class="pull-right" style="position: relative;">
<i class="layui-icon layui-icon-search layui-icon-screen-show"></i>
<input id="screen-product" placeholder="请输入商品名称" class="layui-input screen-input" lay-verify="required" required="">
</div>
</div>
<div class="layui-card-body" style="padding: 15px 15px;">
<div class="layui-row layui-col-space15 classify-type" id="classifyList">
</div>
</div>
</div>
<div class="layui-row layui-col-space15" id="goodsList">
</div>
</div>
<!-- footer -->
<div class="ew-footer" style="max-width: 100vw; overflow: hidden;" nav-id="footer" xmlns:th="http://www.w3.org/1999/xhtml">
<div class="layui-container">
<div class="link-box">
<div class="container grid other-link">
<div class="cop" style="line-height: 30px;">
<img src="static/picture/ads.jpg" style="width: 100%;">
</div>
</div>
<div class="container beian">
<span>Jinx</span>
</div>
</div>
</div>
<div class="to-top" id="back-top">
<div class="intercom-box" id="item-phone">
<div class="to-intercom">
<div>
<span class="iconfont icon-xiangshang" style="font-size: 65px; color: #3f9eff;"></span>
</div>
</div>
</div>
</div>
</div>
<div class="site-footer-nav">
<div class="wrapper">
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="beian">
<a rel="nofollow" target="__blank" href="#">网络乞丐</a>
</div>
<div class="copyright">网络乞丐</div>
</div>
</div>
</div>
</div>
<!-- footer-home -->
<div id="mobile-footer-menu" class="mobile-footer-menu mobile-show footer-fixed">
<div class="mobile-footer-left">
<a href="">
<div class="active" style="margin: 5px; padding: 5px;">
<span>
<svg t="1644845231601" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" fill="#c8c8c8" p-id="5834"></path></svg>
</span>
<b>全部商品</b>
</div>
</a>
<a href="article.html" class="zlian-heart-box">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1644846440213" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6761" width="200" height="200"><path d="M886.624 297.376l-191.968-191.968c-2.944-2.944-6.432-5.312-10.336-6.912C680.48 96.864 676.288 96 672 96L224 96C171.072 96 128 139.072 128 192l0 640c0 52.928 43.072 96 96 96l576 0c52.928 0 96-43.072 96-96L896 320C896 311.52 892.64 303.36 886.624 297.376zM704 205.248 818.752 320 704 320 704 205.248zM800 864 224 864c-17.632 0-32-14.336-32-32L192 192c0-17.632 14.368-32 32-32l416 0 0 192c0 17.664 14.304 32 32 32l160 0 0 448C832 849.664 817.664 864 800 864z" p-id="6762" fill="#c8c8c8"></path><path d="M288 352l192 0c17.664 0 32-14.336 32-32s-14.336-32-32-32L288 288c-17.664 0-32 14.336-32 32S270.336 352 288 352z" p-id="6763" fill="#c8c8c8"></path><path d="M608 480 288 480c-17.664 0-32 14.336-32 32s14.336 32 32 32l320 0c17.696 0 32-14.336 32-32S625.696 480 608 480z" p-id="6764" fill="#c8c8c8"></path><path d="M608 672 288 672c-17.664 0-32 14.304-32 32s14.336 32 32 32l320 0c17.696 0 32-14.304 32-32S625.696 672 608 672z" p-id="6765" fill="#c8c8c8"></path></svg>
</span>
<b>文章教程</b>
</div>
</a>
<a href="search.html" class="zlian-heart-box">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1645131599582" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M953.504 908.256l-152.608-163.296c61.856-74.496 95.872-167.36 95.872-265.12 0-229.344-186.624-415.968-416.032-415.968-229.344 0-415.968 186.592-415.968 415.968s186.624 415.968 416 415.968c60.096-0.032 118.048-12.576 172.224-37.248 16.096-7.328 23.2-26.304 15.872-42.368-7.328-16.128-26.4-23.264-42.368-15.872-45.856 20.864-94.88 31.456-145.76 31.488-194.08 0-351.968-157.888-351.968-351.968 0-194.048 157.888-351.968 351.968-351.968 194.112 0 352.032 157.888 352.032 351.968 0 91.36-34.848 177.92-98.08 243.744-12.256 12.736-11.84 32.992 0.864 45.248 0.96 0.928 2.208 1.28 3.296 2.08 0.864 1.28 1.312 2.752 2.4 3.904l165.504 177.088c6.272 6.752 14.816 10.144 23.36 10.144 7.84 0 15.68-2.848 21.856-8.64C964.864 941.408 965.568 921.152 953.504 908.256z" p-id="5834" fill="#c8c8c8"></path></svg>
</span>
<b>订单查询</b>
</div>
</a>
<a href="login.html" class="zlian-heart-box">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1644845421559" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="200" height="200"><path d="M800 384c0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6 28.8-150.4 160-259.2 313.6-262.4h6.4c156.8 0 284.8-128 284.8-288zM288 384c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224H505.6C384 604.8 288 505.6 288 384zM723.2 675.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z" fill="#c8c8c8" p-id="6242"></path></svg>
</span>
<b>个人中心</b>
</div>
</a>
</div>
</div>
<!-- 项目模板 -->
<script type="text/html" id="classifyItem">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
<div class="project-list-item {{# if(d.andIncrement === 0){ }}active{{# } }} " data-id="{{d.id}}"
lay-filter="classifySubmit" lay-submit>
<div class="project-list-item-body">
<div class="item-title"
style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 600; margin-bottom: 5px;">
{{d.name}}
</div>
<div class="project-list-item-text">
商品数量: {{d.productsMember}}
</div>
</div>
</div>
</div>
</script>
<!-- 项目模板 -->
<script type="text/html" id="productItem">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
<div class="item-in box b2-radius">
<div class="post-module-thumb" style="padding-top: 100%;">
<a href="/product/{{d.link}}" rel="nofollow" class="thumb-link">
<picture class="picture">
<img src="{{# if(d.imageLogo == null || d.imageLogo == ''){ }}../theme/dark/images/commodity.svg{{# } }} {{# if(d.imageLogo != null){ }} {{d.imageLogo}} {{# } }}" class="post-thumb lazy">
</picture>
</a>
</div>
<div class="post-info">
<h2>
<a href="/product/{{d.link}}">{{d.name}}</a>
</h2>
<div class="post-list-meta-box">
<div class="post-list-cat b2-radius">
<span style="color: #F56C6C; font-size: 15px">¥ {{d.price}}</span>
</div>
</div>
<div class="list-footer">
<a href="/product/{{d.link}}" class="post-list-meta-avatar">
<span>库存: {{d.cardMember}}</span>
</a>
<span>
{{# if(d.isCoupon >= 1){ }}<span style="color: #67C23A">券</span>{{# } }}
{{# if(d.restricts >= 1){ }}<span style="color: #F56C6C">限购</span>{{# } }}
{{# if(d.isWholesale === 1){ }}<span style="color: #E6A23C">折扣</span>{{# } }}
</span>
</div>
</div>
</div>
<div class="product-tag">
{{# if(d.shipType == 0){ }}<span class="el-tag el-tag--light">自动发货</span>{{# } }}
{{# if(d.shipType == 1){ }}<span class="el-tag el-tag--success el-tag--danger">手动发货</span>{{# } }}
</div>
{{# if(d.cardMember == 0){ }}
<div class="ribbon-two ribbon-two-danger"><span>售罄</span></div>
{{# } }}
</div>
</script>
<!-- js部分 -->
<!-- js部分 -->
<script type="text/javascript" src="static/js/layui.js"></script>
<script type="text/javascript" src="static/js/common.js"></script><script type="text/javascript" src="static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
<!-- Swiper JS -->
<script type="text/javascript" src="static/js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
autoplay:true
});
</script>
<script>
layui.use(['layer', 'form', 'notice', 'dataGrid'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var notice = layui.notice;
var dataGrid = layui.dataGrid;
var classifysListJson = JSON.parse('[{"andIncrement":0,"createdAt":1706978939000,"id":3,"imageLogo":"","name":"程序","productsMember":12,"sort":1,"status":1,"updatedAt":1706978939000},{"andIncrement":1,"createdAt":1706978946000,"id":4,"imageLogo":"","name":"国风系列壁纸","productsMember":10,"sort":2,"status":1,"updatedAt":1706978946000},{"andIncrement":2,"createdAt":1706980481000,"id":5,"imageLogo":"","name":"二次元系列壁纸","productsMember":12,"sort":3,"status":1,"updatedAt":1706980481000},{"andIncrement":3,"createdAt":1706980490000,"id":6,"imageLogo":"","name":"游戏系列壁纸","productsMember":23,"sort":4,"status":1,"updatedAt":1706980490000},{"andIncrement":4,"createdAt":1706980497000,"id":7,"imageLogo":"","name":"萌宠系列壁纸","productsMember":4,"sort":5,"status":1,"updatedAt":1706980497000},{"andIncrement":5,"createdAt":1706980510000,"id":8,"imageLogo":"","name":"星座机甲系列壁纸","productsMember":12,"sort":6,"status":1,"updatedAt":1706980510000},{"andIncrement":6,"createdAt":1706980519000,"id":9,"imageLogo":"","name":"节日系列壁纸","productsMember":2,"sort":7,"status":1,"updatedAt":1706980519000},{"andIncrement":7,"createdAt":1706980534000,"id":10,"imageLogo":"","name":"梵高风景系列壁纸","productsMember":8,"sort":8,"status":1,"updatedAt":1706980534000},{"andIncrement":8,"createdAt":1706980547000,"id":11,"imageLogo":"","name":"发财猫系列壁纸","productsMember":2,"sort":9,"status":1,"updatedAt":1706980547000},{"andIncrement":9,"createdAt":1706980564000,"id":12,"imageLogo":"","name":"情侣四季系列壁纸","productsMember":4,"sort":10,"status":1,"updatedAt":1706980564000}]');
var classifyId;
var shopSettingsJson = JSON.parse(JSON.stringify({"id":1,"isWindow":0,"windowText":"<p>1</p>"}));
if (shopSettingsJson.isWindow == 1) {
var isWindow = $.cookie('isWindow');
if ($.cookie("isWindow") != 'yes') {
//示范一个公告层
layer.open({
type: 1,
title: '站点公告',
closeBtn: false,
area: '300px;',
shade: 0.4,
id: 'LAY_layuipro',
btn: ['我知道啦'],
btnAlign: 'c',
moveType: 1,
content: '<div style="padding: 20px; font-size: 16px; font-family: Content-font, Roboto, sans-serif; font-weight: 400;">' + shopSettingsJson.windowText + '</div>',
success: function (layero) {
var btn = layero.find('.layui-layer-btn');
btn.click(function () {
/*var date = new Date();
date.setTime(date.getTime() + (5 * 1000));*/
$.cookie('isWindow', 'yes', {expires: 1});
})
}
});
}
}
// 分类点击事件
$('.pay-type-group>div').click(function () {
$('.pay-type-group>div').removeClass('active');
$(this).addClass('active');
});
var list = classifysListJson;
var classifyHtml = '';
if (list.length != 0) {
classifyId = list[0].id;
dataGrid.render({
elem: '#classifyList',
templet: '#classifyItem',
data: list
});
} else {
classifyHtml = '' +
'<div style="text-align: center; padding: 30px;">' +
' <div style="letter-spacing: 1.5px; position: relative; height: 40px; line-height: 50px; display: inline-block; font-size: 18px; color: #888; padding-left: 36px; background-size: 32px; background-position: 0 19px; background-repeat: no-repeat;">' +
' <img src="/theme/dark/images/no.svg" style="top: 11px; width: 50px; margin-right: 10px; left: 0;">' +
' <span>暂无分类</span>' +
' </div>' +
'</div>';
$("#classifyList").html(classifyHtml);
}
// 点击事件
$('.classify-type>div .project-list-item').click(function () {
$('.classify-type>div .project-list-item').removeClass('active');
$(this).addClass('active');
});
dataGrid.render({
elem: '#goodsList',
templet: '#productItem',
url: '/getProductList',
where: {classifyId: classifyId},
loadMore: {limit: 12, class: 'datagrid-page-goodsList'} // 开启加载更多
});
/* 表单提交 */
form.on('submit(classifySubmit)', function () {
classifyId = $('.classify-type>div .project-list-item.active').data('id');
dataGrid.render({
elem: '#goodsList',
templet: '#productItem',
url: '/getProductList',
where: {classifyId: classifyId},
loadMore: {limit: 12, class: 'datagrid-page-goodsList'} // 开启加载更多
});
});
$(document).ready(function (e) {
$("#screen-product").keyup(function (e) {
var content = $(this).val(); // 获取到搜索框输入的内容
console.log(content)
dataGrid.render({
elem: '#goodsList',
templet: '#productItem',
url: '/getProductList',
where: {classifyId: classifyId, name: content},
loadMore: {limit: 12, class: 'datagrid-page-goodsList'} // 开启加载更多
});
});
});
});
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html>
<head>
<title>用户登录 - 网络乞丐</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Keywords" content="空谷传声">
<meta name="description" content="空谷传声">
<link href="static/picture/1fd70064325848d5af55bf229fe54909.png" rel="icon">
<link rel="stylesheet" href="static/css/layui.css">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/iconfont.css">
<link rel="stylesheet" href="static/css/footer.css">
<script src="static/js/iconfont.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.icon {
width: 1.5em;
height: 1.5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="static/css/member-login.css">
</head>
<body>
<!-- header -->
<style>
.login-btn {
border-radius: 5px !important;
color: #fff !important;
height: initial !important;
line-height: 38px !important;
font-size: 14px !important;
padding: 0 18px !important;
-webkit-box-shadow: 0 5px 6px 0 rgb(73 105 230 / 22%) !important;
background: linear-gradient(0deg,#409EFF,#8987ff) !important;
}
</style>
<div class="ew-header">
<div class="layui-container">
<a class="layui-logo" href="index.html" style="letter-spacing: 1.5px;position: relative;">
<img src="static/picture/logo.png" class="img-item" style="width: 32px;height: 32px;position: absolute;left: 0;">
<span>网络乞丐</span>
</a>
<div class="ew-nav-group-mobile">
<a id="btn-show">
<svg class="icon" style="width: 30px; height: 30px;" aria-hidden="true">
<use xlink:href="#icon-tixing1"></use>
</svg>
</a>
</div>
<div class="ew-nav-group">
<div class="nav-toggle"><i class="layui-icon layui-icon-shrink-right"></i></div>
<ul class="layui-nav">
<li class="layui-nav-item layui-this">
<a href="index.html">商店首页</a>
</li>
<li class="layui-nav-item">
<a href="article.html">文章教程</a>
</li>
<li class="layui-nav-item">
<a href="search.html">
查询订单
</a>
</li>
<li class="layui-nav-item back-item" style="padding: 0 0 0 20px;">
<a href="" class="layui-btn login-btn">登入/注册</a>
</li>
</ul>
</div>
</div>
</div>
<!-- banner -->
<div class="ew-banner">
<div class="layui-container" style="text-align: center;padding-bottom: 80px; padding-top: 30px;">
<h2 style="font-size: 25px; color: #fff;margin-bottom: 10px;">用户登录</h2>
<h2 style="font-size: 20px; color: #fff;">专业运维24小时处理、您的帐户安全将得到充分的保障。</h2>
</div>
</div>
<div class="login-wrapper" style="padding-left: 15px; padding-right: 15px; margin-top: 15px">
<div class="ew-show" style="margin-top: -70px;">
<div class="layui-card-header">
<span class="zlian-card-title">登录到网络乞丐</span>
</div>
<form class="layui-form">
<div class="layui-form-item layui-input-icon-group">
<i class="layui-icon layui-icon-username"></i>
<input class="layui-input" name="username" placeholder="请输入登录账号" autocomplete="off" lay-vertype="tips" lay-verify="required" required="">
</div>
<div class="layui-form-item layui-input-icon-group">
<i class="layui-icon layui-icon-password"></i>
<input class="layui-input" name="password" placeholder="请输入登录密码" type="password" lay-vertype="tips" lay-verify="required" required="">
</div>
<div class="layui-form-item layui-input-icon-group login-captcha-group">
<i class="layui-icon layui-icon-auz"></i>
<input class="layui-input" name="code" placeholder="请输入验证码" autocomplete="off" lay-vertype="tips" lay-verify="required" required="">
<img class="login-captcha" src="static/picture/captcha.gif" alt="">
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" value="true" title="记住密码" lay-skin="primary">
<a href="forget.html" class="layui-link pull-right">忘记密码</a>
</div>
<div class="layui-form-item" style="margin-bottom: 15px;">
<button class="layui-btn layui-btn-fluid" style="font-size: 17px; background-image: linear-gradient(to right, #4282ff, #716ffe);" lay-filter="loginSubmit" lay-submit="">登录
</button>
</div>
<div class="layui-form-item" style="margin-bottom: 15px;">
<a style="margin-top:10px;" href="register.html" class="layui-link pull-right">立即注册</a>
</div>
</form>
</div>
</div>
<!-- footer -->
<div class="ew-footer" style="max-width: 100vw; overflow: hidden;" nav-id="footer" xmlns:th="http://www.w3.org/1999/xhtml">
<div class="layui-container">
<div class="link-box">
<div class="container grid other-link">
<div class="cop" style="line-height: 30px;">
<img src="static/picture/ads.jpg" style="width: 100%;">
</div>
</div>
<div class="container beian">
<span>Jinx</span>
</div>
</div>
</div>
<div class="to-top" id="back-top">
<div class="intercom-box" id="item-phone">
<div class="to-intercom">
<div>
<span class="iconfont icon-xiangshang" style="font-size: 65px; color: #3f9eff;"></span>
</div>
</div>
</div>
</div>
</div>
<div class="site-footer-nav">
<div class="wrapper">
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="beian">
<a rel="nofollow" target="__blank" href="#">网络乞丐</a>
</div>
<div class="copyright">网络乞丐</div>
</div>
</div>
</div>
</div>
<!-- footer-home -->
<div id="mobile-footer-menu" class="mobile-footer-menu mobile-show footer-fixed">
<div class="mobile-footer-left">
<a href="index.html">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1644845231601" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" fill="#c8c8c8" p-id="5834"></path></svg>
</span>
<b>全部商品</b>
</div>
</a>
<a href="article.html" class="zlian-heart-box">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1644846440213" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6761" width="200" height="200"><path d="M886.624 297.376l-191.968-191.968c-2.944-2.944-6.432-5.312-10.336-6.912C680.48 96.864 676.288 96 672 96L224 96C171.072 96 128 139.072 128 192l0 640c0 52.928 43.072 96 96 96l576 0c52.928 0 96-43.072 96-96L896 320C896 311.52 892.64 303.36 886.624 297.376zM704 205.248 818.752 320 704 320 704 205.248zM800 864 224 864c-17.632 0-32-14.336-32-32L192 192c0-17.632 14.368-32 32-32l416 0 0 192c0 17.664 14.304 32 32 32l160 0 0 448C832 849.664 817.664 864 800 864z" p-id="6762" fill="#c8c8c8"></path><path d="M288 352l192 0c17.664 0 32-14.336 32-32s-14.336-32-32-32L288 288c-17.664 0-32 14.336-32 32S270.336 352 288 352z" p-id="6763" fill="#c8c8c8"></path><path d="M608 480 288 480c-17.664 0-32 14.336-32 32s14.336 32 32 32l320 0c17.696 0 32-14.336 32-32S625.696 480 608 480z" p-id="6764" fill="#c8c8c8"></path><path d="M608 672 288 672c-17.664 0-32 14.304-32 32s14.336 32 32 32l320 0c17.696 0 32-14.304 32-32S625.696 672 608 672z" p-id="6765" fill="#c8c8c8"></path></svg>
</span>
<b>文章教程</b>
</div>
</a>
<a href="search.html" class="zlian-heart-box">
<div style="margin: 5px; padding: 5px;">
<span>
<svg t="1645131599582" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5833" width="200" height="200"><path d="M953.504 908.256l-152.608-163.296c61.856-74.496 95.872-167.36 95.872-265.12 0-229.344-186.624-415.968-416.032-415.968-229.344 0-415.968 186.592-415.968 415.968s186.624 415.968 416 415.968c60.096-0.032 118.048-12.576 172.224-37.248 16.096-7.328 23.2-26.304 15.872-42.368-7.328-16.128-26.4-23.264-42.368-15.872-45.856 20.864-94.88 31.456-145.76 31.488-194.08 0-351.968-157.888-351.968-351.968 0-194.048 157.888-351.968 351.968-351.968 194.112 0 352.032 157.888 352.032 351.968 0 91.36-34.848 177.92-98.08 243.744-12.256 12.736-11.84 32.992 0.864 45.248 0.96 0.928 2.208 1.28 3.296 2.08 0.864 1.28 1.312 2.752 2.4 3.904l165.504 177.088c6.272 6.752 14.816 10.144 23.36 10.144 7.84 0 15.68-2.848 21.856-8.64C964.864 941.408 965.568 921.152 953.504 908.256z" p-id="5834" fill="#c8c8c8"></path></svg>
</span>
<b>订单查询</b>
</div>
</a>
<a href="" class="zlian-heart-box">
<div class="active" style="margin: 5px; padding: 5px;">
<span>
<svg t="1644845421559" class="b2font b2-home-heart-line icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="200" height="200"><path d="M800 384c0-160-128-288-288-288s-288 128-288 288c0 108.8 57.6 201.6 147.2 249.6-121.6 48-214.4 153.6-240 288-3.2 16 6.4 35.2 25.6 38.4h6.4c16 0 28.8-9.6 32-25.6 28.8-150.4 160-259.2 313.6-262.4h6.4c156.8 0 284.8-128 284.8-288zM288 384c0-124.8 99.2-224 224-224s224 99.2 224 224c0 121.6-99.2 220.8-220.8 224H505.6C384 604.8 288 505.6 288 384zM723.2 675.2c-16-9.6-35.2-6.4-44.8 9.6-9.6 16-6.4 35.2 9.6 44.8 73.6 51.2 124.8 121.6 140.8 204.8 3.2 16 16 25.6 32 25.6h6.4c16-3.2 28.8-19.2 25.6-38.4-19.2-99.2-80-185.6-169.6-246.4z" fill="#c8c8c8" p-id="6242"></path></svg>
</span>
<b>个人中心</b>
</div>
</a>
</div>
</div><!-- js部分 -->
<script type="text/javascript" src="static/js/layui1.js"></script>
<script type="text/javascript" src="static/js/common1.js"></script>
<script>
layui.use(['index', 'layer', 'form'], function () {
var $ = layui.jquery;
var index = layui.index;
var layer = layui.layer;
var form = layui.form;
/* 表单提交 */
form.on('submit(loginSubmit)', function (data) {
var loadIndex = layer.msg('登录中...', {icon: 16, shade: 0.01, time: false});
$.post('/member/api/login', data.field, function (res) {
layer.close(loadIndex);
if (0 === res.code) {
layer.msg('登录成功', {icon: 1, time: 1000}, function () {
index.clearTabCache();
location.replace('/member/userinfo');
});
} else {
/* 刷新图形验证码 */
$('img.login-captcha').click(function () {
this.src = this.src + '?t=' + (new Date).getTime();
}).trigger('click');
layer.msg(res.msg || '登录失败', {icon: 2, anim: 6});
}
});
return false;
});
/* 图形验证码 */
$('img.login-captcha').click(function () {
this.src = this.src + '?t=' + (new Date).getTime();
}).trigger('click');
});
</script>
</body>
</html>
我是网络乞丐,一个不务正业的程序员,广交天下好友。
祝大家发财,需要源码到公众号领取。