Anchor-x/AngularDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

卡片展示响应式

Browse Source
This commit is contained in:
myh 2024-01-04 01:18:55 +08:00
parent 312e815d64
commit 4a0ffce087
3 changed files with 105 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src/app/body/body.component.html
View File

@ -1,115 +1,92 @@
<div class="w-full flex">
<div class="flex w-3/5 flex-wrap">
<div class="m-4 shadow-lg w-full h-auto rounded-lg border-2">
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
学院新闻
<span class="float-right text-lg text-gray-400 hover:text-red-400">
更多>>
</span>
</h1>
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
<li class="hover:text-blue-400">很久以前，那还是我用win98的时候有次我系统崩溃了</li>
<li class="hover:text-blue-400">因为我是电脑白痴</li>
<li class="hover:text-blue-400">我朋友给我介绍了一个高手来帮我修电脑</li>
<li class="hover:text-blue-400">他看了一下电脑，问我有没有98的盘</li>
<li class="hover:text-blue-400">我说没有</li>
<li class="hover:text-blue-400">他想了一下，叫我把固定电话拿给他</li>
<li class="hover:text-blue-400">我想修电脑要电话干什么</li>
<li class="hover:text-blue-400">但人家是高手，我也不好说什么</li>
<li class="hover:text-blue-400">就把电话拔下来给他了</li>
</ul>
</div>
<div class="container responsive-grid">
<mat-card>
<mat-card-header>学院新闻</mat-card-header>
<mat-nav-list>
<a mat-list-item href="#" target="_blank">很久以前，那还是我用win98的时候有次我系统崩溃了</a>
<a mat-list-item href="#" target="_blank">因为我是电脑白痴</a>
<a mat-list-item href="#" target="_blank">我朋友给我介绍了一个高手来帮我修电脑</a>
<a mat-list-item href="#" target="_blank">他看了一下电脑，问我有没有98的盘</a>
<a mat-list-item href="#" target="_blank">我说没有</a>
<a mat-list-item href="#" target="_blank">他想了一下，叫我把固定电话拿给他</a>
<a mat-list-item href="#" target="_blank">我想修电脑要电话干什么</a>
</mat-nav-list>
</mat-card>
<div class="flex flex-nowrap">
<div class="ml-4 mr-1 shadow-lg w-1/2 h-auto rounded-lg border-2">
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold">
学术动态
<span class="float-right text-lg text-gray-400 hover:text-red-400">
更多>>
</span>
</h1>
<ul class="mx-3 pl-4 pr-0 pb-2 pt-2 text-sm leading-8 list-disc">
<li class="hover:text-blue-400">他把电话线空着的一头接在电脑的一个插孔内</li>
<li class="hover:text-blue-400">然后进入了dos</li>
<li class="hover:text-blue-400">然后就开始在电话上不停的按着键</li>
<li class="hover:text-blue-400">他按键的速度非常快，但是只按0，1两个键</li>
</ul>
</div>
<mat-card>
<mat-card-header>学术动态</mat-card-header>
<mat-nav-list>
<a mat-list-item href="#" target="_blank">但人家是高手，我也不好说什么</a>
<a mat-list-item href="#" target="_blank">就把电话拔下来给他了</a>
<a mat-list-item href="#" target="_blank">他把电话线空着的一头接在电脑的一个插孔内</a>
<a mat-list-item href="#" target="_blank">然后进入了dos</a>
<a mat-list-item href="#" target="_blank">然后就开始在电话上不停的按着键</a>
<a mat-list-item href="#" target="_blank">他按键的速度非常快，但是只按0，1两个键</a>
</mat-nav-list>
</mat-card>
<div class="mr-4 shadow-lg w-1/2 h-auto rounded-lg border-2">
<div class="h-auto">
<h1 class="px-3 pt-2 pb-0 text-2xl text-orange-600 font-bold flex-nowrap">
历史学习
<span class="float-right text-lg text-gray-400 hover:text-red-400">
更多>>
</span>
</h1>
</div>
<mat-card>
<mat-card-header>历史学习</mat-card-header>
<!-- <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
<!-- <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
<!-- 我渐渐的有些困，我问他这东西要搞多久-->
<!-- </div>-->
<!-- <div class="w-1/3 border-2">-->
<!-- <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
<!-- </div>-->
<!-- </div>-->
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
我渐渐的有些困，我问他这东西要搞多久
</div>
<div class="w-1/3 border-2">
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
</div>
</div>
<!-- <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
<!-- <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
<!-- 他说要几个小时-->
<!-- </div>-->
<!-- <div class="w-1/3 border-2">-->
<!-- <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
<!-- </div>-->
<!-- </div>-->
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
他说要几个小时
</div>
<div class="w-1/3 border-2">
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
</div>
</div>
<!-- <div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">-->
<!-- <div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">-->
<!-- 我给他倒了杯茶，就一个人去隔壁睡觉了-->
<!-- </div>-->
<!-- <div class="w-1/3 border-2">-->
<!-- <img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>-->
<!-- </div>-->
<!-- </div>-->
<mat-nav-list>
<a mat-list-item href="#" target="_blank">我渐渐的有些困，我问他这东西要搞多久</a>
<a mat-list-item href="#" target="_blank">他说要几个小时</a>
<a mat-list-item href="#" target="_blank">我给他倒了杯茶，就一个人去隔壁睡觉了</a>
</mat-nav-list>
</mat-card>
<div class="flex border-2 rounded-lg m-2 p-0 h-auto justify-between flex-nowrap hover:text-blue-500 hover:shadow-lg">
<div class="h-16 w-1/2 leading-16 pl-3 overflow-hidden">
我给他倒了杯茶，就一个人去隔壁睡觉了
</div>
<div class="w-1/3 border-2">
<img class="h-16 w-32" ngSrc="/assets/img/picture.png" alt="" height="601" width="900"/>
</div>
</div>
</div>
</div>
</div>
<div class="w-2/5 flex-grow mb-4">
<div class="h-full my-4 mr-4 shadow-lg rounded-lg border-2">
<h1 class="px-6 pt-4 pb-0 text-2xl text-orange-600 font-bold">
信息公告
<span class="float-right text-lg text-gray-400 hover:text-red-400">
更多>>
</span>
</h1>
<ul class="mx-4 px-6 pb-2 pt-2 text-sm leading-8 list-disc">
<li class="hover:text-blue-400">醒来的时候，一看已经过了4个多小时</li>
<li class="hover:text-blue-400">我起身到隔壁，看见他正在98里面调试</li>
<li class="hover:text-blue-400">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</li>
<li class="hover:text-blue-400">我当时也不懂电脑</li>
<li class="hover:text-blue-400">谢过人家就走了</li>
<li class="hover:text-blue-400">后来我慢慢对电脑有了了解</li>
<li class="hover:text-blue-400">终于了解</li>
<li class="hover:text-blue-400">原来当时那位高手是用机器语言编了一个98系统</li>
<li class="hover:text-blue-400">我后来问我朋友那位高手的下落</li>
<li class="hover:text-blue-400">朋友说前几年去了美国之后</li>
<li class="hover:text-blue-400">杳无音讯……</li>
</ul>
</div>
</div>
<mat-card>
<mat-card-header>信息公告</mat-card-header>
<mat-nav-list>
<a mat-list-item href="#" target="_blank">醒来的时候，一看已经过了4个多小时</a>
<a mat-list-item href="#" target="_blank">我起身到隔壁，看见他正在98里面调试</a>
<a mat-list-item href="#" target="_blank">过了一会儿，他说，你试试，我坐上椅子用了一下，真的好了</a>
<a mat-list-item href="#" target="_blank">我当时也不懂电脑</a>
<a mat-list-item href="#" target="_blank">谢过人家就走了</a>
<a mat-list-item href="#" target="_blank">后来我慢慢对电脑有了了解</a>
<a mat-list-item href="#" target="_blank">终于了解</a>
<a mat-list-item href="#" target="_blank">原来当时那位高手是用机器语言编了一个98系统</a>
<a mat-list-item href="#" target="_blank">我后来问我朋友那位高手的下落</a>
<a mat-list-item href="#" target="_blank">朋友说前几年去了美国之后</a>
<a mat-list-item href="#" target="_blank">杳无音讯……</a>
</mat-nav-list>
</mat-card>
</div>
<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
<ul class="li-img clearfix">
<li><img ngSrc="/assets/img/anyuse2.png" alt="" height="720" width="1280"/></li>
<li><img ngSrc="/assets/img/anyuse3.png" alt="" height="800" width="1280"/></li>
<li><img ngSrc="/assets/img/anyuse4.png" alt="" height="678" width="1280"/></li>
<li><img ngSrc="/assets/img/anyuse5.png" alt="" height="960" width="1280"/></li>
<li><img ngSrc="/assets/img/anyuse6.png" alt="" height="1080" width="1920"/></li>
<li><img ngSrc="/assets/img/anyuse7.png" alt="" height="1080" width="1920"/></li>
<li><img ngSrc="/assets/img/anyuse8.png" alt="" height="1080" width="1920"/></li>
<li><img ngSrc="/assets/img/anyuse9.png" alt="" height="1080" width="1920"/></li>
</ul>
</div>
<mat-divider></mat-divider>
<mat-grid-list cols="4" rowHeight="2:1">
<mat-grid-tile><img ngSrc="/assets/img/anyuse2.png" alt="" height="720" width="1280"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse3.png" alt="" height="800" width="1280"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse4.png" alt="" height="678" width="1280"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse5.png" alt="" height="960" width="1280"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse6.png" alt="" height="1080" width="1920"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse7.png" alt="" height="1080" width="1920"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse8.png" alt="" height="1080" width="1920"/></mat-grid-tile>
<mat-grid-tile><img ngSrc="/assets/img/anyuse9.png" alt="" height="1080" width="1920"/></mat-grid-tile>
</mat-grid-list>

10
src/app/body/body.component.scss
View File

@ -28,3 +28,13 @@
visibility: hidden;
clear: both;
}
.container {
padding: 24px;
}
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(50vw, 550px), 1fr));
gap: 24px;
}

14
src/app/body/body.component.ts
View File

@ -1,5 +1,8 @@
import {Component} from "@angular/core";
import {NgOptimizedImage} from "@angular/common";
import { Component } from "@angular/core";
import { NgForOf, NgOptimizedImage } from "@angular/common";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatCardModule } from "@angular/material/card";
import { MatListModule } from "@angular/material/list";
@Component({
standalone: true,
@ -7,10 +10,13 @@ import {NgOptimizedImage} from "@angular/common";
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss'],
imports: [
NgOptimizedImage
NgOptimizedImage,
MatGridListModule,
MatCardModule,
NgForOf,
MatListModule
]
})
export class BodyComponent {
}