调整友链页面样式

src/app/view/link/link.component.html

@@ -3,24 +3,54 @@
         <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友情链接</span>
     </div>
     <ul class="partner-sites">
-        <li *ngFor="let link of linkList">
-            <i nz-icon nzType="link" nzTheme="outline"></i>
-            <a [href]="link.url" target="_blank" [title]="link.name">{{link.name}}</a>
+        <li *ngFor="let link of linkList;let i = index" [style.background]="colors[i].bgColor"
+            [style.color]="colors[i].fontColor">
+            <a [href]="link.url" target="_blank" [title]="link.desc||link.name" [style.color]="colors[i].fontColor">
+                <div class="link-name">
+                    <i nz-icon nzType="link" nzTheme="outline"></i>
+                    {{link.name}}
+                </div>
+                <div class="link-info" [style.color]="colors[i].fontColor">
+                    <div class="link-icon">
+                        <img *ngIf="link.iconPath" [src]="link.iconPath" [alt]="link.iconPath">
+                        <i *ngIf="!link.iconPath" nz-icon nzType="link" nzTheme="outline"></i>
+                    </div>
+                    <p>
+                        {{link.desc || '该站长暂时未留下网站简介'}}
+                    </p>
+                </div>
+            </a>
         </li>
         <li class="applylink" (click)="showModal=!showModal">申请友链</li>
     </ul>
-
-
 </div>
+
 <div class="placard am-animation-slide-bottom">
     <div class="title">
         <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友链公告</span>
     </div>
+    <br>
+    <p style="padding-left: 30px;">
+        <i class="fa fa-check" style="color: green"></i>原创优先&nbsp;
+        <i class="fa fa-check" style="color: green"></i>技术优先&nbsp;
+        <i class="fa fa-close" style="color: red"></i>经常宕机&nbsp;
+        <i class="fa fa-close" style="color: red"></i>不合法规&nbsp;
+        <i class="fa fa-close" style="color: red"></i>插边球站&nbsp;
+        <i class="fa fa-close" style="color: red"></i>红标报毒&nbsp;
+    </p>
     <ul class="placard-content">
         <li>请确认贵站可正常访问</li>
         <li>原创博客、技术博客、游记博客优先</li>
-        <li>博客内容时常更新</li>
-        <li><strong>提交申请时若为https链接请带上https否则将视为http</strong></li>
+        <li>交换友链请先在您的网站添加本站链接</li>
+        <p style="margin: 20px;">
+            本站信息 <br>
+            名称：小海博客<br>
+            网址：https://www.celess.cn/<br>
+            图标：https://www.celess.cn/logo.ico<br>
+            描述：小海博客，记录学习成长历程,主要关注与java后端的技术学习
+        </p>
+        <li>本站的友链申请会自动进行抓取，并在12h内进行审核</li>
+
     </ul>
 </div>
 

src/app/view/link/link.component.less

@@ -16,15 +16,100 @@ i {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  padding: 20px 10px;
+  justify-content: space-between;
+  align-items: flex-start;
+
 
   li {
-    width: 25%;
-    margin: 10px 0;
-    height: 30px;
-    line-height: 30px;
-    text-align: center
+    flex: 1;
+    width: 20%;
+    min-width: 20%; // 加入这两个后每个item的宽度就生效了
+    max-width: 20%; // 加入这两个后每个item的宽度就生效了
+    height: 80px;
+    text-align: center;
+    overflow: hidden;
+    margin: 10px;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, .1);
+
+    .link-icon {
+      display: none;
+      transition: 0.3s;
+    }
+
+    .link-name, .link-info {
+      height: 80px;
+      width: 100%;
+      margin: 0;
+      transition: 0.3s;
+      padding: 0;
+    }
+
+    .link-name {
+      // background: #eed1b3;
+      line-height: 80px;
+      cursor: pointer;
+
+      i {
+        display: inline;
+      }
+
+    }
+
+    .link-info {
+      //  background: #00d95a;
+    }
   }
+
+  li:hover {
+    transition: 0.3s;
+
+
+    .link-icon {
+      //width: 80px;
+      height: 56px;
+      line-height: 56px;
+      // background: #00aaaa;
+      transition: 0.3s;
+      display: inline-block;
+      width: 56px;
+      float: left;
+
+      img {
+        height: 80%;
+        width: 80%;
+        border-radius: 50%;
+        line-height: 56px;
+        //padding: 3px;
+      }
+    }
+
+
+    .link-name {
+      height: 24px;
+      line-height: 24px;
+
+      i {
+        display: none;
+        transition: 0.3s;
+      }
+    }
+
+    .link-info {
+      border-top: 1px solid rgba(150, 150, 150, .1);
+      height: 56px;
+      line-height: 56px;
+      padding-bottom: 2px;
+
+      p {
+        width: 100%;
+        height: 100%;
+        text-align: left;
+        font-size: xx-small;
+      }
+    }
+  }
+
 }
 
 .placard {
@@ -32,14 +117,20 @@ i {
   margin: 0 auto;
 }
 
+.site-middle, .placard {
+  background: #fff;
+  padding: 20px;
+}
+
 .placard-content {
   margin-top: 30px;
   margin-left: 30px;
-  border-left: 5px solid #aaa4a4;
+  border-left: 3px solid #6bc30d;
+  padding: 0;
   list-style: none;
 
   li {
-    padding-left: 15px;
+    padding-left: 20px;
     font-size: 1.2em;
     margin: 5px 0;
   }
@@ -48,9 +139,12 @@ i {
 .applylink {
   float: right;
   border: none;
-  background: white;
+  background: #f6f1f1;
   border-radius: 5px;
   width: 150px;
+  height: 80px;
+  line-height: 80px;
+  font-size: x-large;
 }
 
 .applylink:hover {
@@ -71,6 +165,15 @@ i {
   border-radius: 4px;
 }
 
+@keyframes hiddenAnimation {
+  form {
+    height: 100%;
+  }
+  to {
+    height: 0%;
+  }
+}
+
 @media only screen and ( max-width: 768px ) {
   .site-middle, .placard {
     margin-left: 2px;

src/app/view/link/link.component.ts

@@ -4,6 +4,7 @@ import {Title} from '@angular/platform-browser';
 import {ApiService} from '../../api/api.service';
 import {ApplyLinkReq, Link} from '../../class/Link';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Color, RandomColor} from '../../utils/color';
 
 @Component({
     selector: 'view-link',
@@ -28,13 +29,16 @@ export class LinkComponent implements OnInit {
     linkList: Link[];
     loading: boolean = false;
     applyFormGroup: FormGroup;
+    colors: Color[];
+
 
     ngOnInit() {
         window.scrollTo(0, 0);
         this.link = new Link();
         this.apiService.links().subscribe({
             next: data => this.linkList = data.result,
-            error: err => this.message.error(err.msg)
+            error: err => this.message.error(err.msg),
+            complete: () => this.colors = RandomColor(this.linkList.length)
         });
         this.applyFormGroup = this.fb.group({
             urlLinkProtocol: ['http://'],