背景:
我需要说明一下,我说的响应式类似于小米官方的卡片效果,电脑端是4个,随着宽度的减小卡片的个数而变少。
这里是宽度大的情况:
这里是宽度小的情况:
1、使用css原生的@media
这个不用多说,直接使用@media媒体响应就行了需要自己设计,主要是设计一个最小的高和宽,不然的话容易出现样式消失。
2、使用flex布局
直接给代码,主要是看css布局。
.activity-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.activity-card {
flex: 1 0 300px;
margin-bottom: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.activity-info {
padding: 20px;
}
.feedback-input {
padding: 0 20px 20px;
}
.activity-list
:这个类用于包裹所有活动卡片的容器。设置了display: flex;
使其成为一个 Flex 布局容器,flex-wrap: wrap;
则表示子元素超出容器宽度时会自动换行,gap: 20px;
定义了子元素之间的间距为 20px。
.activity-card
:这个类定义了每个活动卡片的样式。flex: 1 0 300px;
设置了弹性增长,占据剩余空间,并且最大宽度为 300px,这样可以使卡片在容器中自动调整宽度。margin-bottom: 20px;
添加了下外边距,使每个卡片之间有一定的间距。border-radius: 15px;
设置了圆角为 15px,box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
添加了一个轻微的阴影效果。
.activity-info
:这个类定义了活动信息部分的样式,即学号、机构 ID、校园活动 ID、学生记录等。padding: 20px;
设置了内边距为 20px,增加了内容与边框之间的间距。
.feedback-input
:这个类定义了反馈输入框部分的样式。padding: 0 20px 20px;
设置了上边距为 0,左右内边距为 20px,下内边距为 20px,使反馈输入框与周围内容之间有一定的间距。
这里是使用gpt说的,
这里面主要是flex属性,看官方文档 flex - CSS:层叠样式表 | MDN (mozilla.org)
flex
设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
然后通过父组件的显示,可以展示出类似响应式的效果。
这里
完整代码:
<template>
<div class="activity-list">
<el-card v-for="activity in activities" :key="activity.id" class="activity-card">
<div class="activity-info">
<p><strong>学号:</strong>{{ activity.username }}</p>
<p><strong>机构 ID:</strong>{{ activity.institution_id }}</p>
<p><strong>校园活动 ID:</strong>{{ activity.campus_id }}</p>
<p><strong>学生记录:</strong>{{ activity.content }}</p>
<p><strong>学生反馈:</strong>{{ activity.feedback_stu }}</p>
<p><strong>机构反馈:</strong>{{ activity.feedback_institution }}</p>
</div>
<div class="feedback-input">
<el-input v-model="activity.institutionFeedback" placeholder="请输入机构反馈" />
<el-button type="primary" @click="submitFeedback(activity)">提交反馈</el-button>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
interface Activity {
id: number;
username: string;
institution_id: string;
campus_id: string;
content: string;
feedback_stu: string;
feedback_institution: string;
institutionFeedback: string; // 新增字段:机构反馈
}
const activities = ref<Activity[]>([
{
id: 1,
username: 'user1',
institution_id: 'inst1',
campus_id: 'campus1',
content: 'Some activity content',
feedback_stu: 'Student feedback',
feedback_institution: 'Institution feedback',
institutionFeedback: '', // 新增字段:机构反馈
},
{
id: 2,
username: 'user2',
institution_id: 'inst2',
campus_id: 'campus2',
content: 'Another activity content',
feedback_stu: 'Another student feedback',
feedback_institution: 'Another institution feedback',
institutionFeedback: '', // 新增字段:机构反馈
},
]);
function submitFeedback(activity: Activity) {
console.log(`Submitting feedback for activity with id ${activity.id}`);
console.log(`Institution feedback: ${activity.institutionFeedback}`);
// 这里添加提交机构反馈的逻辑,比如发送请求到后端
}
</script>
<style scoped>
.activity-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.activity-card {
flex: 1 0 300px; /* 自适应宽度,最大宽度 300px */
margin-bottom: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.activity-info {
padding: 20px;
}
.feedback-input {
padding: 0 20px 20px;
}
</style>
标签:flex,feedback,效果,前端,institution,响应,activity,20px,id
From: https://blog.csdn.net/m0_73419038/article/details/136937281