Compare commits

...

6 Commits

  1. 29
      README.md
  2. 54
      src/app/account/login/login.component.html
  3. 16
      src/app/account/login/login.component.scss
  4. 51
      src/app/account/register/register.component.html
  5. 9
      src/app/account/register/register.component.scss
  6. 44
      src/app/account/resetpwd/resetpwd.component.html
  7. 9
      src/app/account/resetpwd/resetpwd.component.scss
  8. 4
      src/app/app.component.html
  9. 44
      src/app/app.component.scss
  10. 97
      src/app/forum/forum/forum.component.html
  11. 3
      src/app/forum/forum/forum.component.scss
  12. 2
      src/app/forum/notice/notice.component.html
  13. BIN
      src/assets/image/bg.png
  14. BIN
      src/assets/image/head.png
  15. BIN
      src/assets/image/user.png
  16. BIN
      src/assets/image/回复.png
  17. BIN
      src/assets/image/回复的帖子.png
  18. BIN
      src/assets/image/奖牌排名.png
  19. 24
      src/styles.scss

@ -1,27 +1,2 @@
# PocketCommunityWeb # 口袋社区web后台
## Angular
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

@ -1,13 +1,18 @@
<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中--> <!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center"> <div [style]="height" id="login" class="d-flex align-items-center justify-content-center">
<form [formGroup]="loginForm" class="col-6"> <div class="text-primary">
<div style="font-size: 40px;font-weight: 700;">Pocket community</div>
<div style="font-size: 30px;font-weight: 400;">Redefining your community life</div>
</div>
<form [formGroup]="loginForm" class="col-4" style="padding: 70px 40px;background: #fff;margin-left: 20px;margin-top: 280px;border-radius: 5px;">
<!-- 管理员名--> <!-- 管理员名-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.manager_name' | translate }}</span> <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
</div> </div> -->
<input autocomplete="managerName" type="text" class="rect-radius form-control text-center" <span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="managerName" type="text" class="form-control text-center"
[class.is-invalid]="getValue('managerName').invalid" [class.is-invalid]="getValue('managerName').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
formControlName="managerName"> formControlName="managerName">
@ -18,32 +23,35 @@
</div> </div>
<!-- 管理员密码--> <!-- 管理员密码-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.password' | translate }}</span> <span class="input-group-text">{{ 'login.password' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="new-password" type="password" class="form-control text-center" <input autocomplete="new-password" type="password" class="form-control text-center"
[class.is-invalid]="getValue('password').invalid" [class.is-invalid]="getValue('password').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" formControlName="password"> [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" formControlName="password">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
[routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</button>
</div>
<div class="invalid-feedback font-weight-bold text-center"> <div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value: 'login.password'|translate} }} {{'tip.notnull' | translate:{value: 'login.password'|translate} }}
</div> </div>
</div>
<div style="text-align: right;">
<a style="color: black;font-size: 12px;" type="button" [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</a>
</div> </div>
<div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3">
<div class="col-5 mx-auto text-center mb-3"> <div class="row flex-nowrap">
<!-- 登陆按钮--> <div class="col-6">
<button type="button" (click)="login()" class="btn btn-primary btn-lg" <!-- 登陆按钮-->
[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"
<!-- 注册按钮 --> [disabled]="form().invalid">{{ 'button.login' | translate }}</button>
<button type="button" class="btn btn-info btn-lg ml-3" </div>
[routerLink]="['/register']">{{ 'button.register' | translate }}</button> <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>

@ -1,3 +1,19 @@
#login{
// color: rgb(80, 138, 202);
.mx-auto{
margin: 10px 0;
}
.form-control{
// color: #fff;
background: rgb(242, 242, 242);
border-radius: 19px!important;
border: none;
outline: none;
}
}
//圆角边框 //圆角边框
.rect-radius { .rect-radius {
border: 1px solid; border: 1px solid;

@ -1,12 +1,15 @@
<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中--> <!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center"> <div id="register" [style]="height" class="align-items-center justify-content-center">
<form [formGroup]="registerForm" class="col-6"> <div style="color: #fff;" class="col-12">
<div style="font-size: 40px;font-weight: 700;text-align: center;margin: 10px 0 30px;">Pocket community</div>
</div>
<form [formGroup]="registerForm" class="col-5" style="margin: 0 auto;padding: 50px 40px;background: #fff;border-radius: 5px;">
<!-- 管理员名--> <!-- 管理员名-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.manager_name' | translate }}</span> <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="text" class="form-control text-center" [class.is-invalid]="getValue('managerName').invalid" <input type="text" class="form-control text-center" [class.is-invalid]="getValue('managerName').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
formControlName="managerName"/> formControlName="managerName"/>
@ -16,10 +19,11 @@
</div> </div>
<!-- 管理员密码--> <!-- 管理员密码-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.password' | translate }}</span> <span class="input-group-text">{{ 'login.password' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="password" type="password" class="form-control text-center" <input autocomplete="password" type="password" class="form-control text-center"
[class.is-invalid]="getValue('password').invalid" [class.is-invalid]="getValue('password').invalid"
[placeholder]="'tip.input' | translate:{value:'login.password'|translate}" formControlName="password"/> [placeholder]="'tip.input' | translate:{value:'login.password'|translate}" formControlName="password"/>
@ -31,10 +35,11 @@
<!-- 管理员确认密码--> <!-- 管理员确认密码-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'register.confirm_pwd' | translate }}</span> <span class="input-group-text">{{ 'register.confirm_pwd' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="confirmPassword" type="password" class="form-control text-center" <input autocomplete="confirmPassword" type="password" class="form-control text-center"
[class.is-invalid]="getValue('confirmPassword').invalid" [class.is-invalid]="getValue('confirmPassword').invalid"
[placeholder]="'tip.input' | translate:{value:'register.confirm_pwd'|translate}" [placeholder]="'tip.input' | translate:{value:'register.confirm_pwd'|translate}"
@ -51,10 +56,11 @@
</div> </div>
<!-- 手机号--> <!-- 手机号-->
<div class="input-group mb-3 mx-auto col-7"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'register.mobile' | translate }}</span> <span class="input-group-text">{{ 'register.mobile' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="number" class="form-control text-center" [class.is-invalid]="getValue('mobile').invalid" <input type="number" class="form-control text-center" [class.is-invalid]="getValue('mobile').invalid"
[placeholder]="'tip.input' | translate:{value:'register.mobile'|translate}" formControlName="mobile"/> [placeholder]="'tip.input' | translate:{value:'register.mobile'|translate}" formControlName="mobile"/>
@ -69,14 +75,15 @@
</div> </div>
<!-- 邮箱--> <!-- 邮箱-->
<div class="input-group mb-3 mx-auto col-8"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'register.email' | translate }}</span> <span class="input-group-text">{{ 'register.email' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="text" class="form-control text-center" <input type="text" class="form-control text-center"
[placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email" [placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email"
[class.is-invalid]="getValue('email').invalid"/> [class.is-invalid]="getValue('email').invalid"/>
<select class="custom-select" formControlName="emailType"> <select class="custom-select form-control" style="margin-left: 10px;" formControlName="emailType">
<option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option> <option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option>
<option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option> <option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option>
@ -87,12 +94,12 @@
</div> </div>
</div> </div>
<div class="col-7 mx-auto text-center mb-3"> <div class="col-12 mx-auto text-right mb-3" style="margin: 10px 0!important;">
<!-- 注册按钮--> <!-- 注册按钮-->
<button type="button" (click)="register()" [disabled]="form().invalid" <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)="register()" [disabled]="form().invalid"
class="btn btn-primary btn-lg">{{ 'button.register' | translate }}</button> class="btn btn-primary btn-lg">{{ 'button.register' | translate }}</button>
<!-- 返回登陆按钮--> <!-- 返回登陆按钮-->
<button type="button" [routerLink]="['/login']" <button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px;" type="button" [routerLink]="['/login']"
class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button> class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
</div> </div>

@ -0,0 +1,9 @@
#register{
.form-control{
// color: #fff;
background: rgb(242, 242, 242);
border-radius: 19px!important;
border: none;
outline: none;
}
}

@ -1,11 +1,15 @@
<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中--> <!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center"> <div id="resetpwd" [style]="height" class="align-items-center justify-content-center">
<form [formGroup]="resetForm" class="col-6"> <div style="color: #fff;" class="col-12">
<div style="font-size: 40px;font-weight: 700;text-align: center;margin: 10px 0 30px;">Pocket community</div>
</div>
<form [formGroup]="resetForm" class="col-5" style="margin: 0 auto;padding: 50px 40px;background: #fff;border-radius: 5px;">
<!-- 管理员名--> <!-- 管理员名-->
<div class="input-group mb-3 mx-auto col-7" [class.d-none]="step===3"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" [class.d-none]="step===3">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.manager_name' | translate }}</span> <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="text" class="form-control text-center disabled" [class.is-invalid]="getValue('managerName').invalid" <input type="text" class="form-control text-center disabled" [class.is-invalid]="getValue('managerName').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" [placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
formControlName="managerName"/> formControlName="managerName"/>
@ -15,14 +19,15 @@
</div> </div>
<!-- 邮箱 --> <!-- 邮箱 -->
<div class="input-group mb-3 mx-auto col-8" [class.col-8]="step===1" [class.col-9]="step===2" *ngIf="step!==3"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" [class.col-8]="step===1" [class.col-9]="step===2" *ngIf="step!==3">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'register.email' | translate }}</span> <span class="input-group-text">{{ 'register.email' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="text" class="form-control text-center" <input type="text" class="form-control text-center"
[placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email" [placeholder]="'tip.input' | translate:{value:'register.email'|translate}" formControlName="email"
[class.is-invalid]="getValue('email').invalid"/> [class.is-invalid]="getValue('email').invalid"/>
<select class="custom-select" formControlName="emailType"> <select style="margin-left: 10px;" class="custom-select form-control" formControlName="emailType">
<option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option> <option value="">{{'tip.select'|translate:{value: 'register.email_type'|translate} }}</option>
<option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option> <option *ngFor="let item of (emailType$|async)?.emailTypeList" [value]="item.suffix">{{item.name}}</option>
@ -41,10 +46,11 @@
</div> </div>
<!-- 新密码--> <!-- 新密码-->
<div class="input-group mb-3 mx-auto col-7" *ngIf="step===3"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===3">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'reset_pwd.new_pwd' | translate }}</span> <span class="input-group-text">{{ 'reset_pwd.new_pwd' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="password" class="form-control text-center disabled" [class.is-invalid]="getValue('password').invalid" <input type="password" class="form-control text-center disabled" [class.is-invalid]="getValue('password').invalid"
[placeholder]="'tip.input' | translate:{value:'reset_pwd.new_pwd'|translate}" [placeholder]="'tip.input' | translate:{value:'reset_pwd.new_pwd'|translate}"
formControlName="password"/> formControlName="password"/>
@ -54,10 +60,11 @@
</div> </div>
<!-- 确认新密码--> <!-- 确认新密码-->
<div class="input-group mb-3 mx-auto col-7" *ngIf="step===3"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===3">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'reset_pwd.confirm_pwd' | translate }}</span> <span class="input-group-text">{{ 'reset_pwd.confirm_pwd' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="password" class="form-control text-center disabled" <input type="password" class="form-control text-center disabled"
[class.is-invalid]="getValue('confirmPassword').invalid" [class.is-invalid]="getValue('confirmPassword').invalid"
[placeholder]="'tip.input' | translate:{value:'reset_pwd.confirm_pwd'|translate}" [placeholder]="'tip.input' | translate:{value:'reset_pwd.confirm_pwd'|translate}"
@ -74,10 +81,11 @@
</div> </div>
<!-- 验证码--> <!-- 验证码-->
<div class="input-group mb-3 mx-auto col-7" *ngIf="step===2"> <div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12" *ngIf="step===2">
<div class="input-group-prepend"> <!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'reset_pwd.code' | translate }}</span> <span class="input-group-text">{{ 'reset_pwd.code' | translate }}</span>
</div> </div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input type="text" class="form-control text-center" <input type="text" class="form-control text-center"
[placeholder]="'tip.input' | translate:{value:'reset_pwd.code'|translate}" [placeholder]="'tip.input' | translate:{value:'reset_pwd.code'|translate}"
[class.is-invalid]="getValue('verificationCode').invalid" [class.is-invalid]="getValue('verificationCode').invalid"

@ -0,0 +1,9 @@
#resetpwd{
.form-control{
// color: #fff;
background: rgb(242, 242, 242);
border-radius: 19px!important;
border: none;
outline: none;
}
}

@ -1,4 +1,4 @@
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light-self">
<span class="navbar-text nav-text-lg"> <span class="navbar-text nav-text-lg">
{{ 'APP_TITLE' | translate }} {{ 'APP_TITLE' | translate }}
</span> </span>
@ -19,7 +19,7 @@
</span> </span>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light 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,3 +1,47 @@
.manager { .manager {
color: red; color: red;
} }
.navbar{
padding: 0;
}
.switch{
position: absolute;
right: 20px;
top: 20px;
padding: 0px 20px;
background-color: #ffffff;
border-radius: 5px;
.btn-secondary{
background: none;
border: none;
color: rgb(80, 138, 202);
}
.btn-secondary:focus, .btn-secondary.focus{
box-shadow: none;
}
.dropdown-toggle::after{
border: none;
margin: 0;
content: none;
}
.dropdown-menu{
padding: 10px 40px;
right: 0;
left: -50px!important;
a{
line-height: 30px;
cursor: pointer;
&:hover{
background: none;
}
}
}
}
.navbar-light span {
color: #ffffff!important;
font-size: 22px!important;
font-family: 'Times new roman'!important;
}
.navbar-light a{
cursor: pointer;
}

@ -3,7 +3,7 @@
<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">
@ -15,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"
> >
@ -66,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>
@ -75,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>
@ -116,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>
@ -248,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>

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

@ -1,6 +1,6 @@
<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中--> <!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" class="d-flex align-items-center justify-content-center"> <div [style]="height" class="d-flex align-items-center justify-content-center">
<form [formGroup]="noticeForm" class="col-6"> <form [formGroup]="noticeForm" class="col-10">
<!-- 公告标题--> <!-- 公告标题-->
<div class="input-group mb-3 mx-auto col-7"> <div class="input-group mb-3 mx-auto col-7">
<div class="input-group-prepend"> <div class="input-group-prepend">

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

@ -1,11 +1,18 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import '../node_modules/bootstrap/scss/bootstrap'; @import '../node_modules/bootstrap/scss/bootstrap';
body{
background: #eee;
}
// 自定义 navBar 背景色 // 自定义 navBar 背景色
.bg-light { .bg-light-self {
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;
@ -15,3 +22,18 @@
.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