master
ZHD 5 years ago
parent 3c5ab5f178
commit 0537456223
  1. 10
      src/app/account/login/login.component.html
  2. 3
      src/app/account/login/login.component.scss
  3. 2
      src/app/app.component.html
  4. 68
      src/app/forum/forum/forum.component.html
  5. 3
      src/app/forum/forum/forum.component.scss
  6. 19
      src/styles.scss

@ -40,13 +40,19 @@
</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">
<div class="col-6">
<!-- 登陆按钮--> <!-- 登陆按钮-->
<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" <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"
[disabled]="form().invalid">{{ 'button.login' | translate }}</button> [disabled]="form().invalid">{{ 'button.login' | 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;" type="button" class="btn btn-info btn-lg ml-3" <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> [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
</div> </div>
</div>
</div>
<app-message></app-message> <app-message></app-message>

@ -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;

@ -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">

@ -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">
<!-- 标题-->
<h1 class="text-info col-12 text-center forum-title">{{getForum().title}}</h1>
</div>
<div class="row justify-content-around flex-nowrap mb-3">
<div class="col-3">
<!-- 发件人信息--> <!-- 发件人信息-->
<div class="position-absolute sender"> <div class="card">
<!-- 发帖人头像--> <!-- 发帖人头像-->
<img [src]="getHeadImg(getForum().info.headImg)" alt="headimg" class="headimg mb-3"/> <img [src]="getHeadImg(getForum().info.headImg)" class="img-responsive card-img-top" alt="headimg">
<ul class="list-group list-group-flush">
<!-- 发帖人--> <!-- 发帖人-->
<div class="forum-label border-info mb-3 text-center"> <li class="list-group-item">昵称:{{getForum().username}}</li>
{{getForum().username}}
</div>
<!--信用分--> <!--信用分-->
<div class="forum-label border-info mb-3 text-center"> <li class="list-group-item">信用分:{{getForum().info.creditScore}}</li>
{{getForum().info.creditScore}} </ul>
</div> </div>
</div> </div>
<!-- 帖子框架--> <!-- 帖子框架-->
<div> <div class="col-9 flex-column justify-content-between">
<!-- 标题-->
<h1 class="text-info col-12 text-center mb-3 forum-title">{{getForum().title}}</h1>
<!-- 帖子正文--> <!-- 帖子正文-->
<div class="forum-content border-info overflow-auto col-9 offset-2 mb-3"> <div class="forum-content border-info overflow-auto d-flxe flex-column justify-content-between">
<div class="flex-grow-1">
{{getContent().content}} {{getContent().content}}
</div> </div>
<!-- 帖子底部--> <!-- 帖子底部-->
<div class="forum-footer border-info p-3 mb-3"> <div class="forum-footer border-info text-right p-3 mb-3">
<h3 <div>
class="text-center">{{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</h3> {{'forum.deadline'|translate:{endDate: (getActive().registrationDeadline|date:dateFormat)} }}</div>
<h3 class="text-center">{{ 'forum.active_date' | translate:{ <div>{{ 'forum.active_date' | translate:{
startDate: getActive().activeStartTime|date:dateFormat, startDate: getActive().activeStartTime|date:dateFormat,
endDate: getActive().activeEndTime|date:dateFormat endDate: getActive().activeEndTime|date:dateFormat
} }}</h3> } }}</div>
<h3 <div>{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</div>
class="text-center">{{ 'forum.active_score' | translate:{score: getActive().activeScore} }}</h3> </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>
<!-- 帖子底部--> <!-- 帖子底部-->
<div class="forum-footer border-info p-3 mb-3"> <div class="forum-footer border-info p-3 mb-3">
<h3 <h3
class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3> class="text-center">{{ 'forum.active_score' | translate:{score: getScore().activeScore} }}</h3>
</div> </div>
</div>
</ng-container> </ng-container>
</ng-container> </ng-container>
<!--帖子审核按钮--> <!--帖子审核按钮-->
<div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<button class="btn btn-info col-2 mr-3" (click)="checkPost(okType)">{{ 'forum.approve' | 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" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button> <button class="btn btn-danger col-2 btn-border" (click)="checkPost(failType)">{{ 'forum.reject' | translate }}</button>
</div>
</div> </div>
</div> </div>

@ -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;

@ -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;
}
Loading…
Cancel
Save