panqihua
/
pocketcommunityweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:ui

Browse Source
master
ZHD 5 years ago
parent 3c5ab5f178
commit 0537456223
6 changed files with 89 additions and 54 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      src/app/account/login/login.component.html
  2. 3
      src/app/account/login/login.component.scss
  3. 2
      src/app/app.component.html
  4. 98
      src/app/forum/forum/forum.component.html
  5. 3
      src/app/forum/forum/forum.component.scss
  6. 19
      src/styles.scss

18
src/app/account/login/login.component.html
Unescape View File

@ -40,12 +40,18 @@
</div> </div>
<div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3"> <div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3">
<!-- 登陆按钮--> <div class="row flex-nowrap">
<button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;float: left;margin-left: 20px;opacity: 1;" type="button" (click)="login()" class="btn btn-info btn-lg" <div class="col-6">
[disabled]="form().invalid">{{ 'button.login' | translate }}</button> <!-- 登陆按钮-->
<!-- 注册按钮 --> <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;float: left;margin-left: 20px;opacity: 1; word-wrap: none;" type="button" (click)="login()" class="btn btn-info btn-lg"
<button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px;" type="button" class="btn btn-info btn-lg ml-3" [disabled]="form().invalid">{{ 'button.login' | translate }}</button>
[routerLink]="['/register']">{{ 'button.register' | translate }}</button> </div>
<div class="col-6">
<!-- 注册按钮 -->
<button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px; word-wrap: none;" type="button" class="btn btn-info btn-lg ml-3"
[routerLink]="['/register']">{{ 'button.register' | translate }}</button>
</div>
</div>
</div> </div>
<app-message></app-message> <app-message></app-message>

3
src/app/account/login/login.component.scss
Unescape View File

@ -1,5 +1,6 @@
#login{ #login{
// color: rgb(80, 138, 202);
.mx-auto{ .mx-auto{
margin: 10px 0; margin: 10px 0;
} }
@ -10,7 +11,9 @@
border: none; border: none;
outline: none; outline: none;
} }
} }
//圆角边框 //圆角边框
.rect-radius { .rect-radius {
border: 1px solid; border: 1px solid;

2
src/app/app.component.html
Unescape View File

@ -19,7 +19,7 @@
</span> </span>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light-self justify-content-center pb-0"> <nav class="navbar navbar-expand-lg bg-white justify-content-center pb-0">
<ng-container *ngIf="isLogin"> <ng-container *ngIf="isLogin">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item mr-2" routerLinkActive="active"> <li class="nav-item mr-2" routerLinkActive="active">

98
src/app/forum/forum/forum.component.html
Unescape View File

@ -1,10 +1,9 @@
<!--公告轮播--> <!--公告轮播-->
<ng-container *ngIf="notices;else load_notice_err"> <ng-container *ngIf="notices;else load_notice_err">
111
<h1 *ngIf="notices.length==0;else notice_temp" <h1 *ngIf="notices.length==0;else notice_temp"
class="text-center col-12 m-3">{{prefix('notice.zero')|translate}}</h1> class="text-center col-12 m-3">{{prefix('notice.zero')|translate}}</h1>
<ng-template #notice_temp> <ng-template #notice_temp>
<div id="carouselExampleControls" class="carousel slide bg-info m-3" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide bg-info m-3 bg-white" data-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
<ng-container *ngFor="let notice of notices;first as isFirst"> <ng-container *ngFor="let notice of notices;first as isFirst">
<div class="carousel-item" [class.active]="isFirst"> <div class="carousel-item" [class.active]="isFirst">
@ -16,7 +15,7 @@
<button [title]="this.prefix('delete')|translate" (click)="deleteNotice(notice.id)" <button [title]="this.prefix('delete')|translate" (click)="deleteNotice(notice.id)"
class="position-absolute delete_notice btn btn-outline-danger"> class="position-absolute delete_notice btn btn-outline-danger">
<svg class="icon" viewBox="0 0 1024 1024" <svg class="icon" viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg" width="50" height="50"> xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path <path
d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z" d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z"
> >
@ -67,7 +66,7 @@
<!--审核贴--> <!--审核贴-->
<div class="row border-warning check m-3"> <div class="row border-warning check m-3 border-circle bg-white">
<!-- 审核帖标识--> <!-- 审核帖标识-->
<h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1> <h1 class="text-info col-12 text-center">{{ 'forum.check' | translate }}</h1>
@ -76,17 +75,17 @@
class="text-center col-12 m-3">{{prefix('posts.zero')|translate}}</h1> class="text-center col-12 m-3">{{prefix('posts.zero')|translate}}</h1>
<ng-template #post_temp> <ng-template #post_temp>
<div class="col-3"> <div class="col-3 d-flex flex-column justify-content-between align-content-center">
<!--帖子列表--> <!--帖子列表-->
<ul class="list-group"> <ul class="list-group flex-grow-1" style="background: #eee;">
<!-- 帖子列表--> <!-- 帖子列表-->
<li class="list-group-item" (click)="currentIndex=i" [class.active]="currentIndex===i" <li class="list-group-item mb-2" (click)="currentIndex=i" [class.active]="currentIndex===i"
*ngFor="let post of posts.forumList.list;index as i">{{post.title}}</li> *ngFor="let post of posts.forumList.list;index as i">{{post.title}}</li>
</ul> </ul>
<!-- 分页按钮--> <!-- 分页按钮-->
<ul class="pagination ml-5 mt-3"> <ul class="pagination m-auto pb-4">
<li class="page-item" [class.disabled]="posts.forumList.currentPage-1===0"><a class="page-link btn" <li class="page-item" [class.disabled]="posts.forumList.currentPage-1===0"><a class="page-link btn"
(click)="getAllPosts(posts.forumList.currentPage-1)">{{'button.prev_page'|translate}}</a> (click)="getAllPosts(posts.forumList.currentPage-1)">{{'button.prev_page'|translate}}</a>
</li> </li>
@ -117,38 +116,43 @@
<!-- 活动贴--> <!-- 活动贴-->
<ng-container *ngSwitchCase="activeType"> <ng-container *ngSwitchCase="activeType">
<!-- 发件人信息--> <div class="row">
<div class="position-absolute sender"> <!-- 标题-->
<!-- 发帖人头像--> <h1 class="text-info col-12 text-center forum-title">{{getForum().title}}</h1>
<img [src]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg mb-3"/>
<!-- 发帖人-->
<div class="forum-label border-info mb-3 text-center">
{{getForum().username}}
</div>
<!--信用分-->
<div class="forum-label border-info mb-3 text-center">
{{getForum().info.creditScore}}
</div>
</div> </div>
<div class="row justify-content-around flex-nowrap mb-3">
<!-- 帖子框架--> <div class="col-3">
<div> <!-- 发件人信息-->
<!-- 标题--> <div class="card">
<h1 class="text-info col-12 text-center mb-3 forum-title">{{getForum().title}}</h1> <!-- 发帖人头像-->
<!-- 帖子正文--> <img [src]="getHeadImg(getForum().info.headImg)" class="img-responsive card-img-top" alt="headimg">
<div class="forum-content border-info overflow-auto col-9 offset-2 mb-3"> <ul class="list-group list-group-flush">
{{getContent().content}} <!-- 发帖人-->
<li class="list-group-item">昵称：{{getForum().username}}</li>
<!--信用分-->
<li class="list-group-item">信用分：{{getForum().info.creditScore}}</li>
</ul>
</div>
</div> </div>
<!-- 帖子底部--> <!-- 帖子框架-->
<div class="forum-footer border-info p-3 mb-3"> <div class="col-9 flex-column justify-content-between">
<h3
class="text-center">{{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</h3> <!-- 帖子正文-->
<h3 class="text-center">{{ 'forum.active_date' | translate:{ <div class="forum-content border-info overflow-auto d-flxe flex-column justify-content-between">
startDate: getActive().activeStartTime|date:dateFormat, <div class="flex-grow-1">
endDate: getActive().activeEndTime|date:dateFormat {{getContent().content}}
} }}</h3> </div>
<h3 <!-- 帖子底部-->
class="text-center">{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</h3> <div class="forum-footer border-info text-right p-3 mb-3">
<div>
{{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</div>
<div>{{ 'forum.active_date' | translate:{
startDate: getActive().activeStartTime|date:dateFormat,
endDate: getActive().activeEndTime|date:dateFormat
} }}</div>
<div>{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</div>
</div>
</div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
@ -249,21 +253,23 @@
<div class="forum-content border-info overflow-auto col-9 offset-2 mb-3"> <div class="forum-content border-info overflow-auto col-9 offset-2 mb-3">
{{getContent().content}} {{getContent().content}}
</div> </div>
<!-- 帖子底部-->
<div class="forum-footer border-info p-3 mb-3">
<h3
class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
</div>
</div> </div>
<!-- 帖子底部-->
<div class="forum-footer border-info p-3 mb-3">
<h3
class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
</div>
</ng-container> </ng-container>
</ng-container> </ng-container>
<!--帖子审核按钮--> <!--帖子审核按钮-->
<div class="col-12 text-center"> <div class="row">
<button class="btn btn-info col-2 mr-3" (click)="checkPost(okType)">{{ 'forum.approve' | translate }}</button> <div class="col-12 text-center">
<button class="btn btn-danger col-2" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button> <button class="btn btn-info col-2 mr-3 btn-border" (click)="checkPost(okType)">{{ 'forum.approve' | translate }}</button>
<button class="btn btn-danger col-2 btn-border" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button>
</div>
</div> </div>
</div> </div>

3
src/app/forum/forum/forum.component.scss
Unescape View File

@ -42,7 +42,8 @@
//帖子内容 //帖子内容
.forum-content { .forum-content {
border-style: solid; display: flex;
border-style: none;
border-width: 3px; border-width: 3px;
height: 300px; height: 300px;
max-height: 300px; max-height: 300px;

19
src/styles.scss
Unescape View File

@ -9,6 +9,10 @@ body{
background-color: rgb(141, 198, 248) !important; background-color: rgb(141, 198, 248) !important;
} }
.bg-white {
background-color: #fff!important;
}
// navBar 第一栏字体放大 // navBar 第一栏字体放大
.nav-text-lg { .nav-text-lg {
font-size: 1.5rem; font-size: 1.5rem;
@ -18,3 +22,18 @@ body{
.btn-border { .btn-border {
border-radius: 1rem; border-radius: 1rem;
} }
.border-circle,
.border-circle * {
border-radius: 0.5rem;
}
.border-circle {
// background-color: #eee;
}
.border-circle * {
border-radius: 0.5rem;
// border-style:none !important;
// background-color: #fff;
}
Write Preview
Loading…
Cancel
Save