Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 d5042df8 编写于 作者: T Tintin
浏览文件
操作

* optimization template.

上级 6f78eae8
隐藏空白更改
内联 并排
Showing with 150 addition and 68 deletion
template/package.json
浏览文件 @ d5042df8
......@@ -7,7 +7,7 @@
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"watch": "webpack --watch",
"build": "webpack --env production --config webpack.config.js",
"build": "webpack --config webpack.config.js",
"server": "node server.js"
},
"keywords": [],
......
template/src/index/index.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......@@ -13,21 +13,29 @@
<header id="header">
<div class="brand-container">
<a class="navbar-brand" href="index.html">
<i class="icon icon-yinyang"></i>
<strong class="title">Z-Master</strong>
</a>
</div>
<div class="navbar-container">
<div href="#mainMenu" id="mainMenuToggle" class="has-avatar">
<div href="#mainMenu" id="mainMenuToggle" class="has-avatar menu-open">
<i class="icon icon-bars"></i>
<i class="icon icon-times"></i>
</div>
<ul class="nav navbar-nav navbar-right" role="navigation">
<li class="has-avatar"><a href="#">
<div class="avatar"><i class="icon icon-search"></i></div>
</a></li>
<li>
<div id="search">
<input type="text" class="form-control input" id="searchInput" placeholder="搜索">
<div class="icon-search-container">
<i class="icon icon-search"></i>
</div>
</div>
</li>
<li class="has-avatar has-badge">
<a href="#">
<div class="avatar"><i class="icon icon-bell-alt"></i></div>
<div class="avatar">
<i class="icon icon-bell-alt"></i>
<span class="label label-danger label-dot notice"></span>
</div>
</a>
</li>
<li class="has-avatar dropdown">
......@@ -45,8 +53,8 @@
</div>
</header>
<aside id="side">
<nav class="menu" data-ride="menu">
<ul id="treeMenu" class="tree tree-menu" data-ride="tree">
<nav class="menu menu-main affix" data-ride="menu">
<ul id="treeMenu" class="tree tree-menu tree-menu-block" data-ride="tree">
<li class="active" data-id="home">
<a href="#"><i class="icon icon-th"></i>首页</a>
</li>
......
template/src/index/js/activenav.js
浏览文件 @ d5042df8
......@@ -69,6 +69,7 @@ $('#tabs-container').on('onClose', function () {
$('#mainMenuToggle').on('click', function () {
$('body').toggleClass('hide-menu');
$(this).toggleClass('menu-open');
});
// navigation bar auto collapse
......
template/src/index/less/core.less
浏览文件 @ d5042df8
......@@ -13,20 +13,6 @@ body {
sans-serif;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
-o-transform: rotate(359deg);
transform: rotate(359deg);
}
}
/* header start */
#header {
position: fixed;
......@@ -46,7 +32,6 @@ body {
white-space: nowrap;
word-break: break-all;
background-color: @brand-bgcolor;
border-bottom: 1px solid @brand-border-color;
.navbar-brand {
overflow: hidden;
......@@ -60,18 +45,6 @@ body {
word-break: break-all;
font-size: @font-size-large;
}
.icon-yinyang {
vertical-align: middle;
font-size: 21px;
}
&:hover {
.icon-yinyang {
display: inline-block;
animation: spin 2s infinite linear;
}
}
}
}
......@@ -82,7 +55,6 @@ body {
justify-content: space-between;
padding-right: 50px;
border-left: 1px solid @brand-border-color;
border-bottom: 1px solid @brand-border-color;
background-color: @color-back;
box-shadow: 0 1px 4px @box-shadow-color;
......@@ -99,14 +71,61 @@ body {
font-size: 21px;
}
&:hover {
background-color: @link-hover-bgcolor;
.icon-bars {
display: none;
}
.icon-times {
display: inline-block;
}
&:hover {
background-color: @link-hover-bgcolor;
}
}
.navbar-nav {
display: flex;
align-items: center;
#search {
max-width: 800px;
margin: 0 auto;
position: relative;
margin-right: 10px;
.icon-search-container {
position: absolute;
background-color: @color-secondary;
left: 0;
top: 0;
width: 38px;
height: 32px;
color: #fff;
border-radius: 20px 0 0 20px;
display: flex;
justify-content: center;
align-items: center;
}
}
#searchInput {
padding-left: 40px;
color: #666;
border: 1px solid @color-secondary;
border-radius: 20px;
width: 200px;
transition: width 0.5s ease-in-out;
}
#searchInput::placeholder {
color: #8d8d8d;
}
#searchInput:focus {
width: 280px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(51, 51, 51, .275);
}
.has-avatar {
float: left;
......@@ -118,6 +137,12 @@ body {
background-color: @link-hover-bgcolor;
}
}
.notice {
position: absolute;
margin-top: -4px;
margin-left: -4px;
}
}
.icon {
......@@ -140,7 +165,7 @@ body {
width: 230px;
transition: width .5s ease-in-out;
>.menu {
>.menu-main {
position: absolute;
left: 0;
overflow-x: hidden;
......@@ -155,23 +180,23 @@ body {
>.tree-menu {
width: 230px;
border: none;
border-bottom: 1px solid @nav-item-border-color;
border-radius: 0;
li.active {
>a {
background-color: @color-primary;
background-color: #2b373d;
color: @nav-item-native-color;
}
}
li {
a {
border: none;
color: @nav-item-color;
border-left: none;
border-top: none;
border-right: none;
border-color: @nav-item-border-color;
&:hover {
background-color: #2b373d;
}
}
}
}
......@@ -187,7 +212,7 @@ body {
right: 0;
bottom: 0;
left: 230px;
padding: 0 10px 10px 10px;
padding: 0 10px;
transition: left .5s ease-in-out;
background-color: @main-bgcolor;
}
......@@ -195,4 +220,5 @@ body {
#tabs-container {
min-height: 100%;
}
/* main end */
/* main end */
\ No newline at end of file
template/src/index/less/hidemenu.less
浏览文件 @ d5042df8
......@@ -3,6 +3,14 @@ body.hide-menu {
.brand-container {
width: 0px;
}
.icon-bars {
display: inline-block!important;
}
.icon-times {
display: none!important;
}
}
#side {
......
template/src/page/article/article.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......
template/src/page/bar/bar.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......
template/src/page/dashboard/dashboard.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......
template/src/page/datatable/datatable.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......
template/src/page/datatable/index.js
浏览文件 @ d5042df8
import './less/index.less';
$('table.datatable').datatable({checkable: true, sortable: true});
template/src/page/datatable/less/index.less 0 → 100644
浏览文件 @ d5042df8
.table {
td {
a {
text-decoration: none;
}
a:first-child {
margin-right: 12px;
}
}
}
\ No newline at end of file
template/src/page/home/home.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......@@ -41,7 +41,7 @@
</div>
</div>
<div class="col-lg-12 col-md-12 no-padding">
<div class="panel" style="padding-left: 10px; padding-right: 10px;">
<div class="panel" style="padding: 10px;">
<h4>销量</h4>
<canvas id="bar-chart"></canvas>
</div>
......@@ -101,7 +101,7 @@
</div>
<div class="col-lg-9 col-md-9">
<div class="panel">
<div class="list">
<div class="list" style="padding-bottom: 13px;">
<header>
<h3><i class="icon-list-ul"></i> 最新动态 <small>更新 4 条</small></h3>
</header>
......
template/src/page/home/index.js
浏览文件 @ d5042df8
......@@ -3,7 +3,7 @@ import $ from 'jquery';
$('#myBoards').boards({
drop: function (e) {
$.zui.messager.show(e.element.text() + ' 拖放到 ' + e.target.closest('.board').find('.panel-heading').text());
$.zui.messager.show(e.element.text() + ' 拖放到 ' + e.target.closest('.panel').find('.panel-heading').text());
}
});
......
template/src/page/home/less/index.less
浏览文件 @ d5042df8
......@@ -46,6 +46,18 @@ body {
}
}
.table {
td {
a {
text-decoration: none;
}
a:first-child {
margin-right: 12px;
}
}
}
#bar-chart {
width: 100%;
height: 400px;
......
template/src/page/line/line.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......
template/src/page/table/table.html
浏览文件 @ d5042df8
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
......
template/src/public/less/variables.dark.less
浏览文件 @ d5042df8
// Colorset
@color-primary: #3280fc;
@color-secondary: desaturate(darken(@color-primary, 10%), 10%);
@color-secondary: #b5bbc1;
@color-fore: #d9d9d9;
@color-back: #141414;
......@@ -24,7 +24,6 @@
@nav-item-color: rgba(255, 255, 255, 0.65);;
@nav-item-native-color: #fff;
@nav-item-border-color: #0e0c0c;
@sidebar-bgcolor:@color-back;
......
template/src/public/less/variables.less
浏览文件 @ d5042df8
......@@ -18,14 +18,13 @@
@box-shadow-color: rgba(0, 0, 0, .08);
@brand-color: @color-back;
@brand-bgcolor: @color-primary;
@brand-border-color: #ddd;
@brand-bgcolor: @color-secondary;
@brand-border-color: #fff;
@nav-item-color: #353535;
@nav-item-border-color: #ddd;
@nav-item-color: #8a979e;
@nav-item-native-color: @color-back;
@sidebar-bgcolor: @color-back;
@sidebar-bgcolor: #263238;
@main-bgcolor: #ddd;
......
template/webpack.config.js
浏览文件 @ d5042df8
......@@ -16,7 +16,15 @@ function getEntry() {
new HtmlWebpackPlugin({
filename: `./${name}/${name}.html`,
template: `./src/page/${name}/${name}.html`,
chunks: [name]
chunks: [name],
minify: {
collapseWhitespace: false,
removeComments: false,
removeRedundantAttributes: false,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
useShortDoctype: false
}
})
);
});
......@@ -39,7 +47,15 @@ module.exports = {
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index/index.html',
chunks: ['index']
chunks: ['index'],
minify: {
collapseWhitespace: false,
removeComments: false,
removeRedundantAttributes: false,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
useShortDoctype: false
}
}),
...htmlWebpackPlugins,
new MiniCssExtractPlugin({
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或