Skip to content

A
appPasture
Commit 079a760a authored by van.chen's avatar van.chen
Browse files
Options

所有样式画完

parent 5a06163d
Show whitespace changes
Inline Side-by-side
Showing with 486 additions and 46 deletions
package.json
View file @ 079a760a
...@@ -39,6 +39,8 @@ ...@@ -39,6 +39,8 @@
"cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3", "cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"echarts": "^4.2.1",
"ngx-echarts": "^4.1.0",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"web-animations-js": "^2.3.1", "web-animations-js": "^2.3.1",
"zone.js": "~0.8.29" "zone.js": "~0.8.29"
......
src/app/app.module.ts
View file @ 079a760a
...@@ -18,11 +18,19 @@ import { AuthService } from './service/auth.service'; ...@@ -18,11 +18,19 @@ import { AuthService } from './service/auth.service';
import { HttpService } from './service/http.service'; import { HttpService } from './service/http.service';
import { TransferService } from './service/transfer.service'; import { TransferService } from './service/transfer.service';
import { AuthInterceptor } from './service/token.service'; import { AuthInterceptor } from './service/token.service';
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent],
entryComponents: [], entryComponents: [],
imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], imports: [
BrowserModule,
BrowserAnimationsModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
NgxEchartsModule
],
providers: [ providers: [
StatusBar, StatusBar,
SplashScreen, SplashScreen,
......
src/app/home/home.module.ts
View file @ 079a760a
...@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common'; ...@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular'; import {IonicModule} from '@ionic/angular';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {NgxEchartsModule} from 'ngx-echarts';
import {HomePage} from './home.page'; import {HomePage} from './home.page';
import {PageOneComponent} from '../main/page-one/page-one.component'; import {PageOneComponent} from '../main/page-one/page-one.component';
import {PageTwoComponent} from '../main/page-two/page-two.component'; import {PageTwoComponent} from '../main/page-two/page-two.component';
...@@ -18,6 +19,7 @@ import {AlarmListComponent} from '../main/alarm-list/alarm-list.component'; ...@@ -18,6 +19,7 @@ import {AlarmListComponent} from '../main/alarm-list/alarm-list.component';
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
NgxEchartsModule,
RouterModule.forChild([ RouterModule.forChild([
{ {
path: '', path: '',
......
src/app/main/page-detail/page-detail.component.html
View file @ 079a760a
...@@ -7,17 +7,45 @@ ...@@ -7,17 +7,45 @@
</ion-title> </ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content style="font-size: 14px"> <ion-content style="font-size: 14px">
<div class="header">
<div class="card"> <div class="card">
<div class="middle">
<i class="icofo ioxihuan icon"></i>
<div class="left"> <div class="left">
<img src="../../../assets/icon/favicon.png"> <img src="../../../assets/icon/favicon.png">
</div> </div>
<div class="right"> <div class="right">
<div class="item">
设备名称: {{item.x}}
</div>
<div class="item">
设备编号: {{item.y}}
</div>
<div class="item">
报警次数: {{item.z}}
</div>
</div>
<div class="rightBtn">
<div [class]="item.online === 1 ? 'tag online' : 'tag offline'"> <div [class]="item.online === 1 ? 'tag online' : 'tag offline'">
{{item.online === 1 ? '在线' : '离线'}} {{item.online === 1 ? '在线' : '离线'}}
</div> </div>
<div class="tag error" *ngIf="item.error === 1"> <div class="tag error" *ngIf="item.error === 1" style="margin-top: 5px">
故障 故障
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="divideDiv"></div>
<div class="pieCharts">
<div echarts [options]="pie1" class="pieChart"></div>
<div echarts [options]="pie2" class="pieChart"></div>
<div echarts [options]="pie3" class="pieChart"></div>
</div>
<div class="divideDiv"></div>
<div class="lineCharts">
<div echarts [options]="line1" class="lineChart"></div>
<div echarts [options]="line2" class="lineChart"></div>
<div echarts [options]="line3" class="lineChart"></div>
</div>
</ion-content> </ion-content>
src/app/main/page-detail/page-detail.component.scss
View file @ 079a760a
.header {
width: 100%;
overflow-y: auto;
padding: 5px 10px;
.card {
.top {
line-height: 25px;
position: relative;
border-bottom: 1px solid #ccc;
.right {
position: absolute;
right: 10px;
top: 0;
}
}
.middle {
padding: 5px 0;
min-height: 90px;
position: relative;
.icon {
position: absolute;
top: 5px;
right: 9px;
font-size: 22px;
color: #f5222d;
}
.left {
width: 90px;
height: 100%;
display: inline-block;
vertical-align: top;
img {
height: 100%;
width: 80px;
}
}
.right {
display: inline-block;
width: calc(100% - 90px);
line-height: 26px;
padding-left: 20px;
}
.rightBtn {
width: 50px;
position: absolute;
right: 0;
bottom: 12px;
}
}
}
}
.pieCharts {
width: 100%;
.pieChart {
height: 125px;
width: 33.33%;
display: inline-block;
}
}
.lineCharts {
text-align: center;
.lineChart {
height: 200px;
width: 100%;
margin-bottom: 3px;
}
}
src/app/main/page-detail/page-detail.component.ts
View file @ 079a760a
import {Component, OnInit} from '@angular/core'; import {Component, ViewChild, OnInit, ElementRef, AfterViewInit} from '@angular/core';
import {fadeIn} from '../../animations/fade-in'; import {fadeIn} from '../../animations/fade-in';
import {TransferService} from '../../service/transfer.service'; import {TransferService} from '../../service/transfer.service';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
@Component({ @Component({
selector: 'app-page-detail', selector: 'app-page-detail',
templateUrl: './page-detail.component.html', templateUrl: './page-detail.component.html',
...@@ -10,11 +11,156 @@ import {ActivatedRoute} from '@angular/router'; ...@@ -10,11 +11,156 @@ import {ActivatedRoute} from '@angular/router';
animations: [fadeIn] animations: [fadeIn]
}) })
export class PageDetailComponent implements OnInit { export class PageDetailComponent implements OnInit {
pie1 = {};
pie2 = {};
pie3 = {};
line1 = {};
line2 = {};
line3 = {};
constructor(private tf: TransferService, private ar: ActivatedRoute) { constructor(private tf: TransferService, private ar: ActivatedRoute) {
} }
item; item = {};
pieOption = {
title: {
text: '温度',
x: 'center',
y: 'center',
textStyle: {
color: '#555555',
fontSize: 16,
fontWeight: 'normal'
},
},
series: [{
type: 'pie',
radius: ['65%', '85%'],
avoidLabelOverlap: false,
startAngle: 270,
color: ['#9f8fc1'],
hoverAnimation: false,
legendHoverLink: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 20,
itemStyle: {
normal: {
color: '#1890ff'
}
}
}, {
value: 20,
itemStyle: {
normal: {
color: '#cccccc'
}
}
}]
}]
};
lineOption = {
backgroundColor: '#293042',
grid: {
left: 10,
top: '10%',
bottom: 20,
right: 40,
containLabel: true
},
title: {
text: '温度',
x: 'center',
top: '0',
textStyle: {
color: '#cccccc'
}
},
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
boundaryGap: false,
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#cccccc'
}
},
axisTick: {
show: false
}
},
yAxis: {
ayisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#cccccc'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#cccccc'
}
},
axisLine: {
lineStyle: {
color: '#cccccc'
}
}
},
series: [{
type: 'line',
smooth: true,
symbolSize: 10,
animation: false,
lineWidth: 1.2,
hoverAnimation: false,
data: [22.20, 16.82, 27.91, 30.00, 40.90, 32.30, 29.10],
symbol: 'circle',
itemStyle: {
normal: {
color: '#f17a52',
shadowBlur: 40,
label: {
show: true,
position: 'top',
textStyle: {
color: '#f17a52',
}
}
}
},
areaStyle: {
normal: {
color: '#f17a52',
opacity: 0.08
}
}
}
]
};
ngOnInit() { ngOnInit() {
this.ar.queryParams.subscribe((params) => { this.ar.queryParams.subscribe((params) => {
...@@ -22,10 +168,42 @@ export class PageDetailComponent implements OnInit { ...@@ -22,10 +168,42 @@ export class PageDetailComponent implements OnInit {
this.item = { this.item = {
name: params.name, name: params.name,
online: 1, online: 1,
error: 1 error: 1,
time: 111,
x: 1,
y: 2,
z: 3
}; };
} }
}); });
this.initPieCharts();
this.initLineCharts();
}
initPieCharts() {
const option = JSON.parse(JSON.stringify(this.pieOption));
option.title.text = '温度';
option.series[0].data[0].value = 75;
option.series[0].data[1].value = 25;
this.pie1 = JSON.parse(JSON.stringify(option));
option.title.text = '湿度';
option.series[0].data[0].value = 50;
option.series[0].data[1].value = 50;
this.pie2 = JSON.parse(JSON.stringify(option));
option.title.text = '压力';
option.series[0].data[0].value = 25;
option.series[0].data[1].value = 75;
this.pie3 = JSON.parse(JSON.stringify(option));
}
initLineCharts() {
const option = JSON.parse(JSON.stringify(this.lineOption));
option.title.text = '温度';
this.line1 = JSON.parse(JSON.stringify(option));
option.title.text = '湿度';
this.line2 = JSON.parse(JSON.stringify(option));
option.title.text = '压力';
this.line3 = JSON.parse(JSON.stringify(option));
} }
toList() { toList() {
......
src/app/main/page-four/page-four.component.html
View file @ 079a760a
...@@ -5,23 +5,23 @@ ...@@ -5,23 +5,23 @@
<img style="height: 100%" src="../../../assets/icon/favicon.png"> <img style="height: 100%" src="../../../assets/icon/favicon.png">
</div> </div>
<div class="topRight"> <div class="topRight">
<div class="rightTop">陈大爷</div> <div class="rightTop">{{user.userName}}</div>
<div class="rightBottom">上海辉度</div> <div class="rightBottom">{{user.factoryName}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="middleCon"> <div class="middleCon">
<div class="line"> <div class="line">
<div class="label">昵称</div> <div class="label">昵称</div>
<div class="text">李银同学</div> <div class="text">{{user.nickName}}</div>
</div> </div>
<div class="line"> <div class="line">
<div class="label">昵称</div> <div class="label">邮箱</div>
<div class="text">李银同学</div> <div class="text">{{user.email}}</div>
</div> </div>
<div class="line"> <div class="line">
<div class="label">手机号</div> <div class="label">手机号</div>
<div class="text">13455872687</div> <div class="text">{{user.phone}}</div>
</div> </div>
</div> </div>
<div class="bottomBtn"> <div class="bottomBtn">
......
src/app/main/page-four/page-four.component.ts
View file @ 079a760a
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../service/api.service'; import { ApiService } from '../../service/api.service';
import { TransferService } from '../../service/transfer.service';
@Component({ @Component({
selector: 'app-page-four', selector: 'app-page-four',
...@@ -8,9 +9,8 @@ import { ApiService } from '../../service/api.service'; ...@@ -8,9 +9,8 @@ import { ApiService } from '../../service/api.service';
}) })
export class PageFourComponent implements OnInit { export class PageFourComponent implements OnInit {
user; user: any = {};
resp; constructor(private api: ApiService, private tf: TransferService) { }
constructor(private api: ApiService) { }
ngOnInit() { ngOnInit() {
this.getSelfInfo(); this.getSelfInfo();
...@@ -19,13 +19,27 @@ export class PageFourComponent implements OnInit { ...@@ -19,13 +19,27 @@ export class PageFourComponent implements OnInit {
getSelfInfo() { getSelfInfo() {
this.api.user.getSelfInfo(['', (data) => { this.api.user.getSelfInfo(['', (data) => {
if (data) { if (data) {
console.log(data); this.user = data;
this.user = JSON.stringify(data);
} else { } else {
this.api.presentMsgToast(data && data.message ? data.message : '登录失败'); this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
} }
}]); }]);
} }
loginOut() {} loginOut() {
this.api.login.logout(['', (data) => {
if (data) {
window.localStorage.removeItem('token');
this.tf.transfer({
to: 'app-extra',
from: 'app-home',
url: '/extra',
hash: '',
query: ''
});
} else {
this.api.presentMsgToast(data && data.message ? data.message : '登录失败');
}
}]);
}
} }
src/app/main/page-three/page-three.component.html
View file @ 079a760a
<div class="mainContent" style="text-align: left"> <div class="mainContent" style="text-align: left">
<ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText" <div class="searchBar">
(click)="showHistory = true;" showCancelButton cancelButtonText="取消" <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
(ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar> <i class="icofo iosearch searchBarSearchIco"></i>
<input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
[(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
</div>
<div class="buttonPart" *ngIf="showSearchBtn">
<span class="cancel" (click)="cancel()">取消</span>
<span class="search" style="color: #1890ff" (click)="search()">搜索</span>
</div>
</div>
<app-alarm-list *ngIf="!showHistory"></app-alarm-list> <app-alarm-list *ngIf="!showHistory"></app-alarm-list>
<app-search-history *ngIf="showHistory" [history]="history"></app-search-history> <app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
</div> </div>
src/app/main/page-three/page-three.component.ts
View file @ 079a760a
...@@ -9,6 +9,7 @@ export class PageThreeComponent implements OnInit { ...@@ -9,6 +9,7 @@ export class PageThreeComponent implements OnInit {
searchText = ''; searchText = '';
showHistory = false; showHistory = false;
showSearchBtn = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || []; history: Array<String> = JSON.parse(window.localStorage.getItem('history.three')) || [];
constructor() { constructor() {
} }
...@@ -16,11 +17,14 @@ export class PageThreeComponent implements OnInit { ...@@ -16,11 +17,14 @@ export class PageThreeComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
// 查询框
cancel() { cancel() {
this.searchText = ''; this.searchText = '';
this.showHistory = false;
this.showSearchBtn = false;
} }
blur() { search() {
if (this.searchText) { if (this.searchText) {
if (this.history.length >= 10) { if (this.history.length >= 10) {
this.history.pop(); this.history.pop();
...@@ -30,9 +34,18 @@ export class PageThreeComponent implements OnInit { ...@@ -30,9 +34,18 @@ export class PageThreeComponent implements OnInit {
window.localStorage.setItem('history.three', JSON.stringify(this.history)); window.localStorage.setItem('history.three', JSON.stringify(this.history));
} }
console.log('此处进行查询操作'); console.log('此处进行查询操作');
} else {
console.log('取消查询');
}
this.showHistory = false; this.showHistory = false;
this.showSearchBtn = false;
}
}
historyClick(e) {
this.searchText = e;
}
keyup(e) {
if (e.which === 13) {
this.search();
}
} }
} }
src/app/main/page-two/page-two.component.html
View file @ 079a760a
<div class="mainContent" style="text-align: left"> <div id="pageTwo" class="mainContent" style="text-align: left">
<ion-searchbar placeholder="请输入设备名称" mode="ios" clearIcon="close-circle" [(ngModel)]="searchText" <div class="searchBar">
(click)="showHistory = true;" showCancelButton cancelButtonText="取消" <div class="inputPart" [ngClass]="{'showBtn': showSearchBtn}">
(ionCancel)="cancel()" (ionBlur)="blur()"></ion-searchbar> <i class="icofo iosearch searchBarSearchIco"></i>
<input type="text" class="searchBarText" (click)="showHistory = true;showSearchBtn = true;"
[(ngModel)]="searchText" placeholder="请输入设备名称" (keyup)="keyup($event)">
</div>
<div class="buttonPart" *ngIf="showSearchBtn">
<span class="cancel" (click)="cancel()">取消</span>
<span class="search" style="color: #1890ff" (click)="search()">搜索</span>
</div>
</div>
<app-search-list *ngIf="!showHistory"></app-search-list> <app-search-list *ngIf="!showHistory"></app-search-list>
<app-search-history *ngIf="showHistory" [history]="history"></app-search-history> <app-search-history *ngIf="showHistory" [history]="history" (oneClick)="historyClick($event)"></app-search-history>
</div> </div>
src/app/main/page-two/page-two.component.ts
View file @ 079a760a
...@@ -9,6 +9,7 @@ export class PageTwoComponent implements OnInit { ...@@ -9,6 +9,7 @@ export class PageTwoComponent implements OnInit {
searchText = ''; searchText = '';
showHistory = false; showHistory = false;
showSearchBtn = false;
history: Array<String> = JSON.parse(window.localStorage.getItem('history.two')) || []; history: Array<String> = JSON.parse(window.localStorage.getItem('history.two')) || [];
constructor() { constructor() {
} }
...@@ -16,11 +17,14 @@ export class PageTwoComponent implements OnInit { ...@@ -16,11 +17,14 @@ export class PageTwoComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
// 下面为查询框对应的方法
cancel() { cancel() {
this.searchText = ''; this.searchText = '';
this.showHistory = false;
this.showSearchBtn = false;
} }
blur() { search() {
if (this.searchText) { if (this.searchText) {
if (this.history.length >= 10) { if (this.history.length >= 10) {
this.history.pop(); this.history.pop();
...@@ -30,9 +34,18 @@ export class PageTwoComponent implements OnInit { ...@@ -30,9 +34,18 @@ export class PageTwoComponent implements OnInit {
window.localStorage.setItem('history.two', JSON.stringify(this.history)); window.localStorage.setItem('history.two', JSON.stringify(this.history));
} }
console.log('此处进行查询操作'); console.log('此处进行查询操作');
} else {
console.log('取消查询');
}
this.showHistory = false; this.showHistory = false;
this.showSearchBtn = false;
}
}
historyClick(e) {
this.searchText = e;
}
keyup(e) {
if (e.which === 13) {
this.search();
}
} }
} }
src/app/main/search-history/search-history.component.html
View file @ 079a760a
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
<div class="title"> <div class="title">
历史搜索记录 历史搜索记录
</div> </div>
<div class="one" *ngFor="let one of history">{{one}}</div> <div class="one" *ngFor="let one of history" (click)="click(one)">{{one}}</div>
</div> </div>
src/app/main/search-history/search-history.component.ts
View file @ 079a760a
import {Component, Input, OnInit} from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({ @Component({
selector: 'app-search-history', selector: 'app-search-history',
...@@ -8,8 +8,13 @@ import {Component, Input, OnInit} from '@angular/core'; ...@@ -8,8 +8,13 @@ import {Component, Input, OnInit} from '@angular/core';
export class SearchHistoryComponent implements OnInit { export class SearchHistoryComponent implements OnInit {
@Input() history = []; @Input() history = [];
@Output() oneClick = new EventEmitter<String>();
constructor() { } constructor() { }
ngOnInit() {} ngOnInit() {}
click(one) {
this.oneClick.emit(one);
}
} }
src/app/main/search-list/search-list.component.html
View file @ 079a760a
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
<i class="icofo ioxihuan icon"></i>
<div class="left"> <div class="left">
<img src="../../../assets/icon/favicon.png"> <img src="../../../assets/icon/favicon.png">
</div> </div>
...@@ -48,6 +49,14 @@ ...@@ -48,6 +49,14 @@
压力: {{one.press}} 压力: {{one.press}}
</div> </div>
</div> </div>
<div class="rightBtn">
<div [class]="one.online === 1 ? 'tag online' : 'tag offline'">
{{one.online === 1 ? '在线' : '离线'}}
</div>
<div class="tag error" *ngIf="one.error === 1" style="margin-top: 5px">
故障
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
src/app/main/search-list/search-list.component.scss
View file @ 079a760a
...@@ -68,6 +68,14 @@ ...@@ -68,6 +68,14 @@
.middle { .middle {
padding: 5px 0; padding: 5px 0;
min-height: 90px; min-height: 90px;
position: relative;
.icon {
position: absolute;
top: 5px;
right: 9px;
font-size: 22px;
color: #f5222d;
}
.left { .left {
width: 90px; width: 90px;
height: 100%; height: 100%;
...@@ -84,6 +92,12 @@ ...@@ -84,6 +92,12 @@
line-height: 26px; line-height: 26px;
padding-left: 20px; padding-left: 20px;
} }
.rightBtn {
width: 50px;
position: absolute;
right: 0;
bottom: 12px;
}
} }
} }
} }
......
src/global.scss
View file @ 079a760a
...@@ -64,29 +64,41 @@ html, body { ...@@ -64,29 +64,41 @@ html, body {
font-size: 14px; font-size: 14px;
color: #555555; color: #555555;
} }
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
*:focus {
outline: none;
}
img {
transform: translate3d(0px, 0px, 0px) scale(1) !important;
}
$themeColor: #1890ff; $themeColor: #1890ff;
.msgToast, .btnToast { .msgToast, .btnToast {
--background: rgba(0, 0, 0, 0.7); --background: rgba(0, 0, 0, 0.7);
--color: #ffffff; --color: #ffffff;
text-align: center; text-align: center;
} }
.partCard { .partCard {
padding: 5px 10px 0 10px; padding: 5px 10px 0 10px;
.partTitle { .partTitle {
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
padding: 5px; padding: 5px;
border-bottom: 2px solid $themeColor; border-bottom: 2px solid $themeColor;
color: $themeColor; color: $themeColor;
label { label {
padding-left: 8px; padding-left: 8px;
} }
} }
.partCon { .partCon {
padding: 5px 0 0 0; padding: 5px 0 0 0;
} }
...@@ -101,6 +113,7 @@ $themeColor: #1890ff; ...@@ -101,6 +113,7 @@ $themeColor: #1890ff;
.inBox { .inBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
img { img {
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
...@@ -148,3 +161,49 @@ $themeColor: #1890ff; ...@@ -148,3 +161,49 @@ $themeColor: #1890ff;
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
} }
.searchBar {
height: 60px;
padding: 12px;
line-height: 36px;
width: 100%;
position: relative;
.inputPart {
position: relative;
width: 100%;
display: inline-block;
.searchBarSearchIco {
position: absolute;
top: 0;
left: 10px;
}
.searchBarText {
width: 100%;
border: none;
background-color: #ededed;
padding-left: 35px;
border-radius: 10px;
}
}
.inputPart.showBtn {
width: calc(100% - 81px);
}
.buttonPart {
display: inline-block;
.cancel, .search {
display: inline-block;
width: 40px;
text-align: center;
}
}
}
.divideDiv {
background-color: #f4f4f4;
height: 20px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment