当前位置: 首页 > news >正文

`待办事项css样式

```vue

<template>

    <div class="box">

        <div class="head">

              <h2>待办事项</h2>

              <input type="text" placeholder="请输入您的待办事项,按回车添加">

        </div>

        <div class="main">

          <ul>

            <li>

              <div class="text">

                <input type="checkbox">

                <span>学习Vue.js前端框架</span>

              </div>

              <div class="删除"><input type="button" value="删除"></div>

            </li>

          </ul>

        </div>

        <div class="foot">

              <div class="left">

                <input type="button" value="总计:">

              </div>

              <div class="right">

                  <input type="button" value="全部">

                  <input type="button" value="未完成">

                  <input type="button" value="已完成">

              </div>

        </div>

    </div>

</template>

<script setup>

</script>

<style>

*{

  margin: 0px;

  padding: 0px;

}

#app{

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box{

  width: 500px;

  height: 500px;

  border: 1px solid black;

  background-color: #ddd;

  display: flex;

  flex-direction: column;

}

.box > div{

  border: 1px solid black;

}

.head{

  height: 80px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.head > input[type=text]{

  width: 97%;

  padding-left: 5px;

  border: transparent;

  margin-top: 5px;

  font-size: 12px;

  height: 30px;

  border-radius: 7px;

}

.main{

  flex:1;

}

.foot{

  height: 50px;

  width: 100%;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

li{

  list-style: none;

  width: 97%;

  border-radius: 7px;

  display: flex;

  flex-direction: row;

  /* 分开左右两边 */

  justify-content: space-between;

  height: 35px;

  background-color: white;

  margin: 8px;

  line-height: 50px;

}

li > div{

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 5px;

}

span{

  display: inline-flexbox;

  padding-left: 5px;

}

input[type=button]{

  border: transparent;

  margin: 10px;

  font-size: 15px;

}

</style>

```


 

### 跑项目

1. **克隆/下载项目**

    - 确保已安装Git。

    - 打开终端:Win+R打开运行窗口,输入`cmd`回车。

    - 执行克隆命令:

      ```bash

      git clone https://gitee.com/myhfw003/grade23-fullstack-class2-todos-demo.git

      ```

2. **进入项目目录,安装依赖,运行项目**

    ```bash

    cd todos // 进入项目目录

    yarn // 安装依赖

    yarn format // 格式化组件代码

    yarn dev // 在开发环境中运行项目

    ```

3. **打包项目**

    ```bash

    yarn build // 打包项目,打包好的文件在dist目录

    yarn review // 预览打包后的项目

    ```


 

相关文章:

`待办事项css样式

vue <template> <div class"box"> <div class"head"> <h2>待办事项</h2> <input type"text" placeholder"请输入您的待办事项&#xff0c;按回车添加"> </div> <div class"main&q…...

spring ai alibaba 使用 SystemPromptTemplate 很方便的集成 系统提示词

系统提示词可以是.st 文件了&#xff0c;便于修改和维护 1提示词内容&#xff1a; 你是一个有用的AI助手。 你是一个帮助人们查找信息的人工智能助手。 您的名字是{name} 你应该用你的名字和{voice}的风格回复用户的请求。 每一次回答的时候都要增加一个65字以内的标题形如:【…...

Vue3 官方宣布淘汰 Axios,拥抱Alova.js

过去十年,Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持,成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级,Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场。 一、Axios的痛点 1,冗余的适配逻辑,比如Axios的通用配置(但实际…...

2025年数维杯C题数据收集方式分享

2025年数维杯C题”清明时节雨纷纷&#xff0c;何处踏青不误春&#xff1f;“需要我们根据题目的要求自行数据&#xff0c;下图为目前已经收集到的问题一二数据集&#xff0c;本文将为大家详细的介绍具体收集数据方式以及处理方式。 通过网盘分享的文件&#xff1a;分享数据集 …...

手写 vue 源码 === ref 实现

目录 响应式的基本实现 Proxy 与属性访问器 Proxy 的工作原理 属性访问器&#xff08;Getter/Setter&#xff09; 为什么解构会丢失响应性 ref 和 toRefs 的解决方案 proxyRefs&#xff1a;自动解包 ref 总结 Vue3 的响应式系统是其核心特性之一&#xff0c;它通过 Pro…...

Python爬虫抓取Bilibili弹幕并生成词云

1. 引言 Bilibili&#xff08;B站&#xff09;是国内知名的视频分享平台&#xff0c;拥有海量的弹幕数据。弹幕是B站的核心特色之一&#xff0c;用户通过弹幕进行实时互动&#xff0c;这些数据对于分析视频热度、用户情感倾向等具有重要价值。 本文将介绍如何利用Python爬虫技…...

【Python 字典(Dictionary)】

Python 中的字典&#xff08;Dictionary&#xff09;是最强大的键值对&#xff08;key-value&#xff09;数据结构&#xff0c;用于高效存储和访问数据。以下是字典的核心知识点&#xff1a; 一、基础特性 键值对存储&#xff1a;通过唯一键&#xff08;Key&#xff09;快速访…...

k8s之探针

探针介绍&#xff1a; 编排工具运行时&#xff0c;虽说pod挂掉会在控制器的调度下会重启&#xff0c;出现pod重启的时候&#xff0c;但是pod状态是running,无法真实的反应当时pod健康状态&#xff0c;我们可以通过Kubernetes的探针监控到pod的实时状态。 Kubernetes三种探针类…...

upload-labs靶场通关详解:第三关

一、分析源代码 代码注释如下&#xff1a; <?php // 初始化上传状态和消息变量 $is_upload false; $msg null;// 检查是否通过POST方式提交了表单 if (isset($_POST[submit])) {// 检查上传目录是否存在if (file_exists(UPLOAD_PATH)) {// 定义禁止上传的文件扩展名列表…...

LeetCode:101、对称二叉树

递归法&#xff1a; /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {…...

zst-2001 历年真题 UML

UML - 第1题 ad UML - 第2题 依赖是暂时使用对象&#xff0c;关联是长期连接 依赖&#xff1a;依夜情 关联&#xff1a;天长地久 组合&#xff1a;组一辈子乐队 聚合&#xff1a;好聚好散 bd UML - 第3题 adc UML - 第4题 bad UML - 第5题 d UML - 第6题 …...

对称加密以及非对称加密

对称加密和非对称加密是两种不同的加密方式&#xff0c;它们在加密原理、密钥管理、安全性和性能等方面存在区别&#xff0c;以下是具体分析&#xff1a; 加密原理 对称加密&#xff1a;通信双方使用同一把密钥进行加密和解密。就像两个人共用一把钥匙&#xff0c;用这把钥匙锁…...

Java反射 八股版

目录 一、核心概念阐释 1. Class类 2. Constructor类 3. Method类 4. Field类 二、典型应用场景 1. 框架开发 2. 单元测试 3. JSON序列化/反序列化 三、性能考量 四、安全与访问控制 1. 安全管理器限制 2. 打破封装性 3. 安全风险 五、版本兼容性问题 六、最佳…...

C++跨平台开发实践:深入解析与常见问题处理指南

一、跨平台开发基础架构设计 1.1 跨平台架构的核心原则 分层设计模式&#xff1a; 平台抽象层(PAL)&#xff1a;将平台相关代码集中管理 核心逻辑层&#xff1a;完全平台无关的业务代码 平台实现层&#xff1a;针对不同平台的特定实现 代码组织最佳实践&#xff1a; pro…...

【“星睿O6”AI PC开发套件评测】+ MTCNN 开源模型部署和测试对比

经过了前几篇文章的铺垫&#xff0c;从搭建 tensorflow 开发环境&#xff0c;到测试官方 onnx 模型部署到 NPU&#xff0c;接着部署自己的 mnist tensorflow 模型到 NPU。这是一个从易到难的过程&#xff0c;本篇文章介绍开源复杂的人脸识别模型 mtcnn 到 “星睿O6” NPU 的部署…...

JAVA实战开源项目:装饰工程管理系统 (Vue+SpringBoot) 附源码x

本文项目编号 T 179 &#xff0c;文末自助获取源码 \color{red}{T179&#xff0c;文末自助获取源码} T179&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

centos 7 安装 java 运行环境

centos 7 安装 java 运行环境 java -version java version "1.8.0_131" Java(TM) SE Runtime Environment (build 1.8.0_131-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)java -version java version "1.8.0_144" Java(TM) …...

力扣题解:21.合并两个有序链表(C语言)

将两个升序链表合并为一个新的升序链表是一个经典的链表操作问题。可以通过递归或迭代的方法来解决。以下是解释和代码实现&#xff1a; 递归&#xff1a; 每次比较两个链表的头节点&#xff0c;将较小的节点添加到新链表中&#xff0c;并递归处理剩余部分。 截至条件&#xf…...

iOS App 安全性探索:源码保护、混淆方案与逆向防护日常

iOS App 安全性探索&#xff1a;源码保护、混淆方案与逆向防护日常 在 iOS 开发者的日常工作中&#xff0c;我们总是关注功能的完整性、性能的优化和UI的细节&#xff0c;但常常忽视了另一个越来越重要的问题&#xff1a;发布后的应用安全。 尤其是对于中小团队或独立开发者&…...

SpringBoot默认并发处理(Tomcat)、项目限流详解

SpringBoot默认并发处理 在 Spring Boot 项目中&#xff0c;默认情况下&#xff0c;同一时间能处理的请求数由​​内嵌的 Tomcat 服务器​​的线程池配置决定。 默认并发处理能力​ 请求处理流程​ 请求到达​​&#xff1a;新请求首先进入 TCP 连接队列&#xff08;最大 ma…...

Xterminal(或 X Terminal)通常指一类现代化的终端工具 工具介绍

Xterminal&#xff08;或 X Terminal&#xff09;通常指一类现代化的终端工具&#xff0c;旨在为开发者、运维人员提供更高效、更智能的命令行操作体验。 &#x1f4e2;提示&#xff1a;文章排版原因&#xff0c;资源链接地址放在文章结尾&#x1f447;&#x1f447;&#xff…...

如何把win10 wsl的安装目录从c盘迁移到d盘

标题&#xff1a;如何把win10 wsl的安装目录从c盘迁移到d盘 通过microsoft store安装的 wsl 目录默认在 C:\Users[用户名]\AppData\Local\wsl 下 wsl的docker镜像以及dify的编译环境会占用大量硬盘空间&#xff0c;0.15.3 、1.1.3、1.3.1 三个版本的环境占用空间超过40GB [图…...

2025医疗信息化趋势:健康管理系统如何重构智慧医院生态

当北京协和医院的门诊大厅启用智能分诊机器人时&#xff0c;距离其3000公里外的三甲医院正通过健康管理系统将慢性病复诊率降低42%。这场静默发生的医疗革命&#xff0c;正在重新定义2025年智慧医院的建设标准。 一、穿透数据孤岛的三大核心引擎 最新版《智慧医院评价指标体系…...

java volatile关键字

volatile 是 Java 中用于保证多线程环境下变量可见性和禁止指令重排序的关键字。 普通变量不加volatile修饰有可见性问题&#xff0c;即有线程修改该变量值&#xff0c;其他线程无法立即感知该变量值修改了。代码&#xff1a; private static int intVal 0; // 普通变量未加 …...

中阳策略模型:结构节奏中的方向感知逻辑

中阳策略模型&#xff1a;结构节奏中的方向感知逻辑 在交易世界中&#xff0c;“节奏”与“结构”的互动远比大多数人想象得复杂。中阳研究团队在大量实战数据分析中提出一个核心观点&#xff1a;方向感的建立&#xff0c;必须以结构驱动为前提&#xff0c;以节奏确认为依据。 …...

死锁的形成

死锁的形成 背景学习资源死锁的本质 背景 面试可能会被问到. 学习资源 一个案例: https://www.bilibili.com/video/BV1pz421Y7kM 死锁的本质 互相持有对方的资源. 存在资源竞争都没有释放. 可能出现死锁. insert into demo_user (no, name) values (6, ‘test1’) on dupl…...

每天五分钟深度学习框架pytorch:视觉工具包torchvison

本文重点 在pytorch深度学习框架中,torchvision是一个非常优秀的视觉工具包,我们可以使用它加载一些著名的数据集,然后我们可以使用它来加载网络模型,比如vgg,resnet等等,还可以使用它来预处理一些图片数据,本节课程我们将学习一下它的使用方式。 torchvision的四部分…...

C++之运算符重载实例(日期类实现)

日期类实现 C 日期类的实现与深度解析一、代码结构概览1.1 头文件 Date.h1.2 源文件 Date.cpp 二、关键函数实现解析2.1 获取某月天数函数 GetMonthDay2.2 构造函数 Date2.3 日期加减法运算2.4 前置与后置自增/自减操作2.5 日期比较与差值计算 三、代码优化与注意事项3.1 代码优…...

数据分析怎么做?高效的数据分析方法有哪些?

目录 一、数据分析的对象和目的 &#xff08;一&#xff09;数据分析的常见对象 &#xff08;二&#xff09;数据分析的目的 二、数据分析怎么做&#xff1f; &#xff08;一&#xff09;明确问题 &#xff08;二&#xff09;收集数据 &#xff08;三&#xff09;清洗和…...

数组和切片的区别

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

【Linux】自定义shell的编写

&#x1f4dd;前言&#xff1a; 这篇文章我们来讲讲【Linux】简单自定义shell的编写&#xff0c;通过这个简单的模拟实现&#xff0c;进一步感受shell的工作原理。 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&#xff1a;Linux &#x1f380;CSDN主页…...

【C/C++】为什么要noexcept

为什么要noexcept 在C中&#xff0c;noexcept修饰符用于指示函数不会抛出异常 1. 性能优化 减少异常处理开销&#xff1a;编译器在生成代码时&#xff0c;若函数标记为noexcept&#xff0c;可以省略异常处理的相关机制&#xff08;如栈展开代码&#xff09;&#xff0c;从而减…...

运用fmpeg写一个背英文单词的demo带翻译

-男生会因为不配而离开那个深爱的她吗&#xff1f;&#xff1f; 一&#xff0c; fmpeg-7.0.1 是做什么用的&#xff1f;&#xff1f; FFmpeg 7.0.1 是 FFmpeg 的一个版本&#xff0c;FFmpeg 是一个开源的多媒体框架&#xff0c;用于处理音视频数据。FFmpeg 提供了强大的工具和…...

Android 项目中配置了多个 maven 仓库,但依赖还是下载失败,除了使用代理,还有其他方法吗?

文章目录 前言解决方案gradlemaven 仓库 前言 我们在Android 开发的过程中&#xff0c;经常会遇到三方依赖下载不下来的问题。一般情况下我们会在项目的build.gradle文件中配置多个 maven 仓库来解决。 // Top-level build file where you can add configuration options com…...

vue3: pdf.js5.2.133 using typescript

npm install pdfjs-dist5.2.133 项目结构&#xff1a; <!--* creater: geovindu* since: 2025-05-09 21:56:20* LastAuthor: geovindu* lastTime: 2025-05-09 22:12:17* 文件相对于项目的路径: \jsstudy\vuepdfpreview\comonents\pdfjs.vue* message: geovindu* IDE: vscod…...

doxygen 生成 html 网页的一个简单步骤

假设项目源码目录是 src 那么在 src 上一级运行&#xff1a; doxygen -g生成 Doxyfile 随后配置 Doxyfile # 项目相关配置 PROJECT_NAME "你的项目名称" PROJECT_NUMBER "1.0" PROJECT_BRIEF "项目简短描述" …...

云原生环境下服务治理体系的构建与落地实践

📝个人主页🌹:慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言:服务治理正在从“框架能力”向“平台能力”演进 随着微服务架构逐步成熟,越来越多的企业开始向云原生迁移,Kubernetes、Service Mesh、Serverless 等新兴技术不断推动系统的基础设施演进。 与…...

vue 监听元素大小变化 element-resize-detector

1&#xff0c;安装 npm install element-resize-detector --save2、设置成全局插件 element-resize-detector.js&#xff1a; import ElementResizeDetectorMaker from element-resize-detectorexport default {install: function(Vue, name $erd) {Vue.prototype[name] …...

智芯Z20K144x MCU开发之时钟架构

这里写目录标题 一、zhixin时钟架构1.时钟源2.系统时钟控制器&#xff08;SCC&#xff09;3.外设时钟控制器&#xff08;PARCC&#xff09; 二、软件应用三、总结 一、zhixin时钟架构 可以将时钟架构分解为三个部分来理解&#xff1a; 时钟源&#xff08;OSC、FIRC、LPO&#…...

levelDB的数据查看(非常详细)

起因:.net大作业天气预报程序(WPF)答辩时&#xff0c;老师问怎么维持数据持久性的&#xff0c;启动时加载的数据存在哪里&#xff0c;我明白老师想考的应该是json文件的解析&#xff08;正反&#xff09;&#xff0c;半天没答上来存那个文件了&#xff08;老师默认这个文件是自…...

OpenHarmony平台驱动开发(十),MMC

OpenHarmony平台驱动开发&#xff08;十&#xff09; MMC 概述 功能简介 MMC&#xff08;MultiMedia Card&#xff09;即多媒体卡&#xff0c;是一种用于固态非易失性存储的小体积大容量的快闪存储卡。 MMC后续泛指一个接口协定&#xff08;一种卡式&#xff09;&#xff0…...

【Go底层】http标准库服务端实现原理

目录 1、背景2、核心数据结构【1】Server对象【2】Handler对象【3】ServeMux对象 3、服务端代码示例4、路由注册5、路由匹配 1、背景 http协议的交互框架是C-S架构&#xff0c;C对应客户端模块&#xff0c;S对应服务端模块&#xff0c;接下来我们就基于Go1.23源码来熟悉http标…...

现代健康养生新主张

在充满挑战与压力的现代生活中&#xff0c;健康养生已成为提升生活品质的关键。无需复杂的理论与传统养生模式&#xff0c;通过践行以下科学方法&#xff0c;便能轻松拥抱健康生活。​ 压力管理是现代养生的核心。长期高压力状态会引发激素失衡、免疫力下降等问题。尝试每天进…...

Spring 必会之微服务篇(1)

目录 引入 单体架构 集群和分布式架构 微服务架构 挑战 Spring Cloud 介绍 实现方案 Spring Cloud Alibaba 引入 单体架构 当我们刚开始学开发的时候&#xff0c;基本都是单体架构&#xff0c;就是把一个项目的所有业务的实现功能都打包在一个 war 包或者 Jar 包中。…...

创始人 IP 的破局之道:从技术突围到生态重构的时代启示|创客匠人评述

在 2025 年的商业版图上&#xff0c;创始人 IP 正以前所未有的深度介入产业变革。当奥雅股份联合创始人李方悦在 “中国上市公司品牌价值榜” 发布会上&#xff0c;将 IP 赋能与城市更新大模型结合时&#xff0c;当马斯克在特斯拉财报电话会议上宣称 “未来属于自动驾驶和人形机…...

C++ stl中的stack和queue的相关函数用法

文章目录 stackstack的定义stack的使用 queuequeue的定义queue的使用 stack的使用 包含头文件< stack > #include <stack>queue的使用 包含头文件< queue > #include <queue>stack stack是一种容器适配器&#xff0c;用于具有后进先出操作的场景中&…...

Navicat BI 数据分析功能上线 | 数据洞察新方法

Navicat 17.2 版本一经发布&#xff0c;便以 AI 助手赋能智能交互、Snowflake 支持拓展数据连接版图、拓展对关系型、维度以及数据仓库 2.0 建模方法的支持等新特性与功能抓住了用户的目光&#xff0c;但其中一项低调且实用的更新 - 在 BI 数据预览中深度集成数据分析工具&…...

【网络编程】四、守护进程实现 前后台作业 会话与进程组

文章目录 Ⅰ. 守护进程的概念Ⅱ. 理解会话和作业&#x1f38f; 会话和进程组的特性小总结Ⅳ. 作业的前后台转换1、fg 指令2、bg 指令 Ⅴ. 守护进程实现1、常见接口① 创建守护进程 -- daemon② 自成会话函数 -- setsid③ 获取会话ID函数 -- getsid 2、自主实现守护进程函数 Ⅰ.…...

【深度学习新浪潮】智能追焦技术全解析:从算法到设备应用

一、智能追焦技术概述 智能追焦是基于人工智能和自动化技术的对焦功能,通过深度学习算法识别并持续跟踪移动物体(如人、动物、运动器械等),实时调整焦距以保持主体清晰,显著提升动态场景拍摄成功率。其核心优势包括: 精准性:AI 算法优化复杂运动轨迹追踪(如不规则移动…...

【PostgreSQL数据分析实战:从数据清洗到可视化全流程】电商数据分析案例-9.3 商品销售预测模型

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 9.3 商品销售预测模型9.3.1 数据清洗与特征工程9.3.1.1 数据清洗流程1. 缺失值处理2. 异常值检测3. 数据一致性校验 9.3.1.2 特征工程实现1. 时间特征提取2. 用户行为特征3.…...