kj
/
lms-app
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Partial commit --Attendance UI

master
kj1352 5 年前
父节点
9553fccd7a
当前提交
3a5d9742aa
共有 4 个文件被更改，包括 272 次插入 和 7 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +67
    -1
      src/app/tabs/more/attendance/attendance.component.html
  2. +136
    -0
      src/app/tabs/more/attendance/attendance.component.scss
  3. +13
    -6
      src/app/tabs/more/attendance/attendance.component.ts
  4. +56
    -0
      src/assets/custom-icons/attendance.svg

+ 67
- 1
src/app/tabs/more/attendance/attendance.component.html 查看文件

@@ -1 +1,67 @@
<p>attendance works!</p>
<div class="page">
<header class="nav-header">
<button class="close-button" (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
</button>
<h5>
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/attendance.svg"></svg-icon>
<span> Attendance </span>
</h5>
</header>

<section class="statistics-upfold">
<div class="stat">
<p> 2019-2020 </p>
<h4> 50% </h4>
</div>

<div class="stat">
<p> June 2020 </p>
<h4> 80% </h4>
</div>
</section>

<ul class="segment-list">
<li class="active">
<div class="container">
<h4> ALL </h4>
<p> 50% </p>
</div>
</li>

<li>
<div class="container">
<h4> KAN </h4>
<p> 50% </p>
</div>
</li>

<li>
<div class="container">
<h4> ENG </h4>
<p> 50% </p>
</div>
</li>

<li>
<div class="container">
<h4> MAT </h4>
<p> 50% </p>
</div>
</li>

<li>
<div class="container">
<h4> PHY </h4>
<p> 50% </p>
</div>
</li>

<li>
<div class="container">
<h4> CHE </h4>
<p> 50% </p>
</div>
</li>
</ul>
</div>

+ 136
- 0
src/app/tabs/more/attendance/attendance.component.scss 查看文件

@@ -0,0 +1,136 @@
.page {
background-color: var(--black);
height: 100vh;
overflow: auto;
padding-bottom: 60px;
}

.nav-header {
background-color: var(--ash-black);
display: flex;
align-items: center;
padding: 0 5%;
height: 60px;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1;

.close-button {
border: 0px;
background-color: transparent;
.icon {
width: 16px;
height: 16px;
fill: var(--light-grey);
}
}

h5 {
font-size: 16px;
color: white;
font-weight: 400;
margin-left: 20px;
letter-spacing: 1px;

.icon {
width: 15px;
height: 15px;
fill: white;
margin-right: 3px;
vertical-align: middle;
position: relative;
top: -1px;
}
}
}

.statistics-upfold {
display: flex;
align-items: center;
position: relative;
overflow: visible;
padding: 20px 10%;
background-color: var(--ash-black);

&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-color: var(--dark-grey);
height: 100%;
width: 100vw;
border-radius: 50%;
transform: scale(1.5)translateY(-5vw);
}

.stat {
position: relative;
width: 50%;
text-align: center;
padding: 15px 0;
border-right: 1px solid var(--light-grey);

&:last-child {
border-right: 0;
}

p {
font-size: 14px;
color: white;
}

h4 {
color: white;
font-size: 24px;
}
}
}

.segment-list {
list-style: none;
white-space: nowrap;
overflow: auto;
background-color: var(--ash-black);
padding: 20px 5%;

li {
display: inline-flex;
width: 80px;
height: 80px;
background-color: var(--dark-grey);
border-radius: 10px;
box-shadow: 0px 0px 5px var(--black);
margin-right: 15px;
align-items: center;
justify-content: center;

&.active {
background-color: var(--teal-green);

h4 {
color: white;
}

p {
color: white;
}
}
}

.container {
width: 70%;
}

h4 {
color: var(--teal-green);
font-weight: 500;
font-size: 20px;
}

p {
font-size: 17px;
color: white;
}
}

+ 13
- 6
src/app/tabs/more/attendance/attendance.component.ts 查看文件

@@ -1,15 +1,22 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';


@Component({ @Component({
selector: 'app-attendance',
templateUrl: './attendance.component.html',
styleUrls: ['./attendance.component.scss']
selector: 'app-attendance',
templateUrl: './attendance.component.html',
styleUrls: ['./attendance.component.scss']
}) })
export class AttendanceComponent implements OnInit { export class AttendanceComponent implements OnInit {


constructor() { }
constructor(
private location: Location
) { }


ngOnInit(): void {
}
ngOnInit(): void {
}

back() {
this.location.back();
}


} }

+ 56
- 0
src/assets/custom-icons/attendance.svg 查看文件

@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="912.1px" height="912.1px" viewBox="0 0 912.1 912.1" style="enable-background:new 0 0 912.1 912.1;" xml:space="preserve"
>
<g>
<g>
<path d="M504.607,574.9c102.8,0,186.4-83.601,186.4-186.4s-83.601-186.4-186.4-186.4c-102.799,0-186.4,83.6-186.4,186.4
S401.808,574.9,504.607,574.9z"/>
<g>
<path d="M346.108,611.9c-71.8,0-130,58.199-130,130V887.1c0,13.801,11.2,25,25,25h527c13.8,0,25-11.199,25-25V745.5
c2.2-3.8,4.2-7.9,5.8-12.2l102-270c3.4-9,5.2-18.6,5.2-28.3V132c0-44.2-35.8-80-80-80s-80,35.8-80,80v288.4l-72.3,191.5H346.108z
"/>
<path d="M30.808,178.1h59c12.4,0,22.9-9,24.7-21.2c3.4-22.2,10.3-38.6,20.5-48.5c9.5-9.2,22.6-13.7,40.2-13.7
c18.2,0,32.1,5,42.7,15.4c10.6,10.4,15.5,22.9,15.5,39.5c0,7.8-1.8,15-5.5,22c-1.9,3.5-9.3,14.3-37.5,38.2
c-26.2,22.2-43.9,43.1-54.2,63.8c-10.5,21.1-15.6,51.8-15.6,93.6l0,0c0,13.8,11.2,25,25,25h53.3c13.8,0,25-11.2,25-25l0,0
c0-32.3,3.9-45.5,6.2-50.5c1.8-4,9.3-15.8,39-40.4c27.6-22.9,46.2-43.8,56.8-63.8c10.9-20.5,16.4-43,16.4-66.8
c0-42.5-16.101-78-48-105.6c-30.8-26.6-71-40.1-119.5-40.1c-46.2,0-85.3,13.8-116,40.9c-31,27.4-48.7,64.5-52.7,110.2l0,0
C4.708,165.5,16.208,178.1,30.808,178.1z"/>
<path d="M198.708,533.6c13.8,0,25-11.199,25-25V455.4c0-13.801-11.2-25-25-25h-53.2c-13.8,0-25,11.199-25,25V508.6
c0,13.801,11.2,25,25,25H198.708z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>