src/app/home/home.component.ts
| selector | app-home |
| styleUrls | ./home.component.scss |
| templateUrl | ./home.component.html |
Methods |
constructor()
|
|
Defined in src/app/home/home.component.ts:8
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/home/home.component.ts:13
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
<div fxLayout="column" class="section-container">
<div class="shape shape-style-1 shape-primary">
<span class="circle-150"></span>
<span class="circle-50"></span>
<span class="circle-50"></span>
<span class="circle-75"></span>
<span class="circle-100"></span>
<span class="circle-75"></span>
<span class="circle-50"></span>
<span class="circle-100"></span>
<span class="circle-50"></span>
<span class="circle-100"></span>
</div>
<div class="fix-width">
<div fxLayout="row">
<div class="home-logo"><a [routerLink]="['/']">Stbui</a></div>
<span fxFlex></span>
<ul class="nav">
<li><a href="/home">首页</a></li>
<li><a href="/home">产品</a></li>
<li><a href="https://translator-rhinoceros-87537.netlify.com/">文档</a></li>
<li><a href="/home">博客</a></li>
<li><a href="/home">关于</a></li>
<li><a href="/sigin">登录</a></li>
<li><a href="/sigup">注册</a></li>
</ul>
</div>
<div fxLayout="column" fxLayoutAlign="center center" class="content">
<h2 class="text-white">中后台前端应用框架</h2>
<h3 class="text-center">基于最新Angular 6框架与Material 2技术的企业级中后台前端应用框架，涵盖了大量的常用组件和基础功能，您可以快速开发各种MIS系统，如CMS、OA、CRM、ERP、POS等，最大程度上帮助企业节省时间成本和费用开支。</h3>
<h4>
<a mat-raised-button color="primary" class="stbui-button-lg" href="https://github.com/stbui/angular-material-app/archive/master.zip">
<mat-icon>file_download</mat-icon>
立即下载
</a>
</h4>
<h5>当前版本：0.8.0 免费版</h5>
</div>
</div>
</div>
<div class="m-30">
<div class="fix-width">
<h2 class="text-center">功能 & 特点</h2>
<div fxLayout="row wrap" class="m-t-40">
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>color_lens</mat-icon>
<h4 class="font-500">多种颜色</h4>
<p>提供多种配色供你选择使用，任意选择适合自己网站主题的配色进行搭配使用</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>view_array</mat-icon>
<h4 class="font-500">Dark & Light 侧边栏</h4>
<p>包括 Dark 和 Light 侧边栏</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>view_quilt</mat-icon>
<h4 class="font-500">2000+ 页面模板</h4>
<p>演示中进有100多个页面</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>settings_input_component</mat-icon>
<h4 class="font-500">1000+ UI 组件</h4>
<p>提供了1000都个UI组件</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>settings</mat-icon>
<h4 class="font-500">部件</h4>
<p>各种各样的小部件</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>dashboard</mat-icon>
<h4 class="font-500">3000+ 字体图标</h4>
<p>图标字体都包含在这里</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>screen_lock_landscape</mat-icon>
<h4 class="font-500">响应式</h4>
<p>所以布局全都是响应式设计</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center m-b-20">
<mat-icon>code</mat-icon>
<h4 class="font-500">Sass CSS</h4>
<p>使用Sass编写CSS，很容易改变</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center">
<mat-icon>view_module</mat-icon>
<h4 class="font-500">容易定制</h4>
<p>少量调整定制属于自己的项目</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center">
<mat-icon>pie_chart</mat-icon>
<h4 class="font-500">大量的图表</h4>
<p>提供的丰富的图表类型</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center">
<mat-icon>verified_user</mat-icon>
<h4 class="font-500">支持</h4>
<p>我们提供技术支持</p>
</div>
<div fxFlex.gt-sm="25" class="advantage-card text-center">
<mat-icon>cached</mat-icon>
<h4 class="font-500">定期更新</h4>
<p>我们不断更新我们的新功能</p>
</div>
</div>
<div class="text-center m-t-40">
<a href="https://github.com/stbui/angular-material-app" class="mat-button stbui-button stbui-button-lg stbui-button-outline">立即购买</a>
</div>
</div>
</div>
<div class="product-container">
<div class="fix-width">
<div class="product-card">
<h2 class="text-center">旗下产品</h2>
<div class="product-subtitle">为互联网时代的用户和企业量身打造各种高端网站，为企业提供极致服务体验。</div>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center">
<div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
<mat-card>
<img mat-card-image src="assets/images-demo/assets/1.png">
<mat-card-header>
<mat-card-title>Stbui</mat-card-title>
<mat-card-subtitle>中后台前端应用框架</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
查看
</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
<mat-card>
<img mat-card-image src="assets/images-demo/assets/2.png">
<mat-card-header>
<mat-card-title>Apm</mat-card-title>
<mat-card-subtitle>前端数据监控系统</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
查看
</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
<mat-card>
<img mat-card-image src="assets/images-demo/assets/3.png">
<mat-card-header>
<mat-card-title>Cms</mat-card-title>
<mat-card-subtitle>内容管理系统</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
查看
</button>
</mat-card-actions>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="33.33" fxFlex="100">
<mat-card>
<img mat-card-image src="assets/images-demo/assets/4.png">
<mat-card-header>
<mat-card-title>Crm</mat-card-title>
<mat-card-subtitle>客户关系系统</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button type="button" mat-button color="primary" class="stbui-button-outline stbui-button-block" >
查看
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="fix-width">
<div fxLayout="row" class="footer-copyright">
<span>Copyright 2017. All Rights Reserved by stbui Pro</span>
<span fxFlex></span>
<span>Design & Developed by <a href="https://github.com/stbui" target="blank">stbui</a></span>
</div>
</div>
</footer>
./home.component.scss
$primary-color: #6a82fb;
.section-container {
background: #fc5c7d;
background: -webkit-linear-gradient(to right, #6a82fb, #fc5c7d);
background: linear-gradient(to right, #6a82fb, #fc5c7d);
height: 500px;
color: #fff;
padding: 0 20px;
.content {
margin-top: 20px;
}
}
.home-logo {
a {
font-size: 28px;
color: #fff;
text-decoration: none;
}
margin: 20px 0 0 40px;
}
.nav {
display: flex;
li {
display: flex;
padding: 10px 20px;
a {
text-decoration: none;
text-align: center;
color: #fff;
}
}
}
.product-container {
background-color: #f6f6f6;
color: #fff;
padding: 20px;
.product-card {
margin-bottom: 40px;
}
.product-title,
.product-subtitle {
text-align: center;
color: #333;
font-size: 14px;
margin-bottom: 10px;
}
.product-title {
font-size: 26px;
}
mat-card {
margin: 0 10px;
}
.list-avatar-icon {
font-size: 40px;
}
}
.dual-bg {
background: #474d5d;
background: -moz-linear-gradient(
left,
#474d5d 0%,
#383c49 50%,
#474d5d 50%,
#383c49 100%
);
background: -webkit-linear-gradient(
left,
#474d5d 0%,
#383c49 50%,
#474d5d 50%,
#383c49 100%
);
background: linear-gradient(
to right,
#474d5d 0%,
#383c49 50%,
#474d5d 50%,
#383c49 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#474d5d', endColorstr='#383c49', GradientType=1);
}
.advantage-card {
padding-right: 15px;
padding-left: 15px;
img {
height: 44px;
}
mat-icon {
font-size: 44px;
height: 44px;
width: 44px;
color: $primary-color;
}
}
.footer {
padding: 30px 0 30px;
background: #263238;
color: #80cbc4;
a {
color: #80cbc4;
cursor: pointer;
}
}
h2,
h4 {
color: #313743;
margin: 10px 0;
}
h4 {
line-height: 22px;
font-size: 18px;
margin-top: 30px;
}
p {
color: #838ea5;
margin-top: 0;
margin-bottom: 1rem;
line-height: 1.6;
}
.fix-width {
width: 100%;
max-width: 1270px;
margin: 0 auto;
}
.text-white {
color: #fff;
}
//button
.stbui-button {
&-lg {
padding: 6px 90px;
font-size: 20px;
}
}
.stbui-button-outline {
border: 1px solid #3f51b5;
color: #3f51b5;
&:hover {
background-color: #3f51b5;
color: #fff;
}
}
.stbui-button-block {
width: 100%;
}
.shape-style-1.shape-primary {
background: linear-gradient(150deg, #281483 15%, #8f6ed5 70%, #d782d9 94%);
}
.shape span {
position: absolute;
}
.shape-style-1 span {
width: 120px;
height: 120px;
border-radius: 100px 130px 100px 315px;
}
.shape-style-1 :nth-child(1) {
bottom: auto;
left: -3%;
top: -20px;
background: rgba(255, 255, 255, 0.1);
}
.shape-style-1 .circle-50 {
width: 50px;
height: 50px;
}
.shape-style-1 :nth-child(2) {
top: 15%;
right: 10%;
background: rgba(255, 255, 255, 0.1);
}
.shape-style-1 :nth-child(3) {
top: 280px;
right: 5.66666%;
background: rgba(255, 255, 255, 0.3);
}
.shape-style-1 .circle-75 {
width: 75px;
height: 75px;
}
.shape-style-1 :nth-child(4) {
top: 320px;
right: 7%;
background: rgba(255, 255, 255, 0.15);
}
.shape-style-1 .circle-100 {
width: 100px;
height: 100px;
}
.shape-style-1 :nth-child(5) {
top: 38%;
right: auto;
left: 1%;
background: rgba(255, 255, 255, 0.05);
}
.shape-style-1 :nth-child(6) {
top: 65%;
right: auto;
left: 35%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.15);
}
.shape-style-1 :nth-child(7) {
right: 40%;
bottom: 45%;
background: rgba(255, 255, 255, 0.04);
}
.shape-style-1 :nth-child(8) {
right: 6%;
bottom: 100px;
background: rgba(255, 255, 255, 0.2);
}
.shape-style-1 :nth-child(9) {
right: 5%;
bottom: 12%;
background: rgba(255, 255, 255, 0.1);
}
.shape-style-1 :nth-child(10) {
right: auto;
bottom: 11%;
left: 15%;
background: rgba(255, 255, 255, 0.05);
}