首页 > 其他分享 >前端实现响应式以及类似响应式的效果

前端实现响应式以及类似响应式的效果

时间:2024-03-23 11:58:44浏览次数:25  
标签:flex feedback 效果 前端 institution 响应 activity 20px id

背景:

我需要说明一下,我说的响应式类似于小米官方的卡片效果,电脑端是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;
}
  1. .activity-list:这个类用于包裹所有活动卡片的容器。设置了 display: flex; 使其成为一个 Flex 布局容器,flex-wrap: wrap; 则表示子元素超出容器宽度时会自动换行,gap: 20px; 定义了子元素之间的间距为 20px。

  2. .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); 添加了一个轻微的阴影效果。

  3. .activity-info:这个类定义了活动信息部分的样式,即学号、机构 ID、校园活动 ID、学生记录等。padding: 20px; 设置了内边距为 20px,增加了内容与边框之间的间距。

  4. .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

相关文章

  • 鸿蒙开发,使用http返回的响应数据无法正常获取 ,利用hilog打印日志一直结果是object或者
    项目场景:这里简述项目相关背景:前后端分离项目,使用鸿蒙做前端,后端SpringBoot写好接口(通过商品分类id查询商品列表),鸿蒙前端页面使用Tabs组件导航,展示商品分类,点击分类标签,查询后端接口,返回对应分类商品列表数据项目场景:鸿蒙开发,使用http返回的响应数据无法正常获取,利用hilo......
  • 手机直播源码,前端图片压缩上传需顾及清晰度问题
    手机直播源码,前端图片压缩上传需顾及清晰度问题这里我采用element的文件上传控件来上传图片:<el-uploadclass="avatar-uploader":action="GLOBAL.serverFileUrl"name="file"drag:show-file-list="false":on-change="beforeAvatarUpload"......
  • B端系统优化:用好卡片式设计,效果立竿见影翻倍。
    B端系统中,卡片式设计是一种常见的界面设计风格,它将信息和功能组织成一系列独立的卡片,每个卡片通常包含一个特定的信息块或功能模块。一、卡片式设计的特点包括:模块化和可重用性:卡片可以被独立设计和开发,然后在界面中进行组合和重复使用。这种模块化的设计可以提高开发效率,......
  • 应急响应靶机训练-Linux2
    靶机来源:知攻善防实验室公众号https://mp.weixin.qq.com/s/xf2FgkrjZg-yWlB9-pRXvw我是在另一台主机上通过ssh连接到靶机进行解题的,我的ip为192.168.1.103,以下为个人解题记录,写的比较粗糙,有不对的地方希望各位大佬指正。背景前景需要:看监控的时候发现webshell告警,领导让你上......
  • 微前端架构
    介绍微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应......
  • 前端实现用户名密码国家注册(Eclipse Jee软件)
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><title>注册页面</title></head><body> <lab......
  • SEM效果优化解决方案 CloudNEO为您提供过国内外SEM服务
    SEM效果优化解决方案在数字营销领域,搜索引擎营销(SEM)是一种有效的推广方式,能够帮助企业提升品牌知名度、吸引潜在客户并增加网站流量。然而,要获得良好的SEM效果,需要综合考虑多个因素,并采取有效的优化策略。以下是SEM效果优化的解决方案:1.关键词优化:选择适合的关键词是SEM效......
  • 前端使用StreamSaver.js流式下载大文件
    最近有个需求,要求批量下载腾讯云cos文件,并打包压缩。1.方案一起初用的方案,文件数据一直是以blob方式传递的,小文件可以成功下载,但是遇到大文件(比如几个G)一直等待且不加遮罩层loading的情况下体验效果很差。import{saveAs}from'file-saver';importJSZipfrom'jszip';......
  • 阿里巴巴中国站按图搜索1688商品(拍立淘) API接口item_search_img响应示例说明
    阿里巴巴中国站的按图搜索1688商品(拍立淘)API接口item_search_img允许用户通过上传图片来搜索与图片相似的商品。以下是关于该接口响应示例的说明:响应示例概述当调用item_search_img接口并成功上传图片后,接口会返回一个响应,该响应通常包含与上传图片相似的商品信息列表。这些......
  • 【前端面试题-07】typescript 内置类型有哪些,分别简单介绍下用法
    TypeScript提供了一系列内置类型,这些类型有助于编写类型安全的代码。以下是TypeScript中一些重要的内置类型及其用途的简介:基本类型:boolean:表示布尔值,只有两种可能的值true或false。number:表示任何数值,包括整数和浮点数。string:表示文本字符串。bigint(ES2020):表示......