012 登录页面-Panel中间tabs切换的搭建

1、设置登入页面

 

这是 CSS 代码，用于设置元素尺寸：

• width: 100%;：width是宽度属性，100%表示该元素的宽度会相对于其直接父元素的宽度进行计算，会占满父元素的横向空间。
• height: 100%;：height是高度属性，100%意味着元素高度会相对于父元素的高度，占满父元素的纵向空间。

　　与使用vw和vh不同，百分比值依赖于父元素的尺寸，而不是视口尺寸 。

 

• display: flex;：将元素的显示模式设置为 Flexbox 弹性盒模型，使该元素成为一个弹性容器，其直接子元素会成为弹性项目，可以更方便地控制子元素的排列方式。
• align-items: center;：在弹性容器的交叉轴（默认垂直方向）上，将弹性项目垂直居中对齐。比如当容器高度大于子元素高度总和时，子元素会在容器中垂直居中显示。
• justify-content: center;：在弹性容器的主轴（默认水平方向）上，将弹性项目水平居中对齐。即当容器宽度大于子元素宽度总和时，子元素会在容器中水平居中显示 。

　　这些属性组合使用，常用来让容器内的子元素在水平和垂直方向上都居中。

　　background: url();用于设置元素的背景图像。具体解释如下：

• background是一个复合属性，可以用来同时设置背景相关的多个属性，如背景颜色、背景图像、图像重复方式等。
• url()是background属性中用来指定背景图像路径的函数 。括号内应该填入具体的图像文件路径，可以是相对路径（如./images/bg.jpg），也可以是绝对路径（如https://example.com/images/bg.jpg ）。当前括号内为空，说明没有指定具体的图像文件，不会显示背景图像。

 

2、新建文件夹c-cpns（children-components），用来放当前这个登入页面的子组件。（一些公共组件还是放到component里面）

  3、新建文件login-panel.vue（登入面板）

 里面这样写

 4、导入这个页面，使用这个页面，这样写

• import是  引入的模块导入关键字。
• LoginPanel是一个自定义的变量名，用于接收从指定模块中导出的内容。
• './c-pns/login-panel.vue'是模块路径，./表示当前目录，该路径指向一个名为login-panel.vue的 Vue 单文件组件，文件位于当前目录下的c-pns文件夹中 。

　　整体作用是将login-panel.vue这个 页面银入到当前文件中，以便后续可以使用LoginPanel来注册、渲染该组件。

• 模板部分：<template>标签内定义了组件的 HTML 结构。<div class="login">是一个包裹元素，添加了login类名。<login-panel />是一个自定义的单标签组件，它会在页面渲染时被替换为login-panel.vue组件的实际内容，也就是引入的登录面板组件将在此处显示。
• 脚本部分：<script setup lang="ts">表示使用了组合式 API 语法糖，并且使用 TypeScript 编写。import LoginPanel from './c-cpns/login-panel.vue'语句将login-panel.vue文件中的LoginPanel组件导入到当前组件中，这样在模板部分就可以使用<login-panel />来渲染该子组件。

　　　整体来看，这个login.vue组件是用于实现登录功能页面，它引入并使用了login-panel.vue子组件来构建具体的登录界面。

5、写这个页面

• <div> ：是一个常用的块级元素，用于对网页内容进行分组和布局，就像一个容器，可以把相关的内容放在一起 ，class是它的一个属性，用于为该元素指定一个或多个类名，方便通过 CSS 样式表或 JavaScript 对其进行样式设置或功能操作。div：是块级元素，可当作容器将相关内容组合在一起，常用于网页布局，比如划分不同的区域，像网页头部、主体、底部等。
• <h1> ：属于标题元素，h1 到 h6 表示不同级别的标题，h1 是最高级别的标题，通常用于表示网页中最重要的标题内容。同样，class属性用于指定样式相关的类名 。
• <span> ：是行内元素，主要用于对文本中的部分内容进行分组或标记，以便应用特定的样式或通过脚本进行操作。span：是行内元素，用于在一行文本内选取部分内容进行样式设置或脚本操作，本身不会对文本布局产生换行等结构性影响，例如突出显示文本中的某个词语。

 看看效果

 

 

接着写

     <el-checkbox v-model="checked1" label="记住密码" size="large" />

　　　　这是一段基于 Element UI 框架的 Vue.js 代码，含义如下：

• <el-checkbox> ：是 Element UI 库提供的复选框组件，用于在页面中生成可勾选或取消勾选的选项框。
• v-model="checked1" ：这是 Vue.js 的指令，实现数据双向绑定。意味着checked1是在 Vue 实例数据中定义的一个变量，复选框的勾选状态（选中或未选中）会与checked1的值保持同步。checked1为true时，复选框处于选中状态；为false时，处于未选中状态。
• label="记住密码" ：表示复选框旁边显示的文本内容，即页面上会显示 “记住密码” 这几个字。
• size="large" ：设置复选框的尺寸为 “大”，让其在页面上呈现出较大的外观。

　　

　　　　这是一段基于 Vue 3 的 TypeScript 代码，具体解释如下：

　　导入部分

　　import { ref } from 'vue'：从 Vue 核心库中导入ref函数。在 Vue 3 中，ref用于创建响应式的引用，它可以让普通的 JavaScript 变量变成响应式，以便在组件的模板或其他地方使用时，当变量值发生变化，相关的 DOM 或计算逻辑能够自动更新。

　　变量声明部分

　　const isRemPwd = ref(false)：使用ref函数创建一个名为isRemPwd的响应式引用，初始值设置为false 。isRemPwd通常可用于存储某个状态，比如对应上一张图中<el-checkbox>组件的勾选状态，用来表示是否 “记住密码”，false表示未勾选状态。 后续在组件的模板或其他方法中可以通过操作isRemPwd来改变其值，同时视图也会相应更新。

 

看看效果

 

调整一下格式

　　 CSS（层叠样式表）代码，margin-bottom: 150px; 的意思是设置元素的底部外边距为 150 像素。

　　“外边距（margin）” 是指元素边框以外到相邻元素之间的空白区域。这条样式规则会让应用该样式的元素与其下方元素之间产生 150 像素的间隔距离，可用于调整网页布局中元素的垂直间距 。

　　

　　CSS 样式代码，含义分别如下：

• margin-top: 12px;：设置元素的顶部外边距为 12 像素，即该元素与其上方相邻元素之间会留出 12 像素的空白间隔，用于调整垂直方向的位置和间距。
• display: flex;：将元素的显示类型设置为弹性盒模型（Flexbox）。开启该属性后，元素内部的子元素能更方便地进行布局，可灵活控制子元素的排列方向、对齐方式等。
• justify-content: space-between;：在元素使用了display: flex的前提下，该属性定义了弹性容器内子元素在主轴（默认是水平方向）上的对齐方式，使子元素两端对齐，之间的空白空间平均分布。

 看看效果

 

6、写立即登入按钮

　　这是一段基于 Element UI 框架的 Vue.js 代码，它的具体含义如下：

1. <el-button>：这是 Element UI 框架中用于创建按钮的组件标签。Element UI 是一套为 Vue.js 应用程序提供的用户界面组件库，<el-button>组件可以快速创建出各种样式和功能的按钮。
2. class="login-btn"：class是 HTML 和 Vue 中用于定义元素类名的属性。这里给按钮添加了一个名为login-btn的类名，通过这个类名可以在 CSS 样式表中为该按钮设置特定的样式，比如改变按钮的颜色、大小、边框等外观属性。
3. type="primary"：type是<el-button>组件的一个属性，type="primary"表示将按钮的样式设置为 Element UI 预定义的 “主要” 样式，通常这种样式的按钮颜色比较醒目，用于突出显示重要的操作按钮。
4. 立即登录：这是包含在<el-button>标签对之间的文本内容，即按钮上显示的文字，用户点击该按钮时会触发相应的功能（通常需要通过绑定事件来实现，比如跳转到登录页面的验证逻辑等）。

　　整体来说，这段代码创建了一个具有特定样式（“主要” 样式）和类名（login-btn），显示 “立即登录” 文本的按钮组件。

写按钮格式

• margin - top: 10px;：表示设置元素的顶部外边距为 10 像素。这会在该元素与它上方的元素之间创建 10 像素的空白间隔，用于调整元素在垂直方向上的位置，使元素与上方内容保持一定距离。
• width: 100%;：表示将元素的宽度设置为占其父元素宽度的 100%。也就是说，该元素会在水平方向上填满其父元素的可用空间，无论父元素的宽度如何变化，子元素都会自适应并始终占据父元素的全部宽度。

可以看到默认的属性高度有点小

 可以根据属性调整

 调整之后

 可以看到效果

 这是一个自定义变量，如果还是觉得小可以自己修改

 

　　这段 CSS 代码，更准确地说是针对 Element UI 组件库中按钮（el-button）的自定义样式设置，具体含义如下：

1. --el-button-size：这是一个 CSS 自定义属性（也称为 CSS 变量）。在 Element UI 中，使用自定义属性来定义一些组件的样式相关值，--el-button-size 这个变量很可能是用于控制按钮的大小相关的尺寸值（比如按钮的高度等）。
2. : 50px：表示将 --el-button-size 这个自定义属性的值设置为 50px，即指定了一个具体的尺寸数值。
3. !important：这是 CSS 中的一个重要声明规则。当使用 !important 时，会强制该样式声明优先于其他普通样式声明应用到元素上。也就是说，无论其他地方如何设置与 --el-button-size 相关的样式，只要有这个 !important 声明，就会以这里设置的 50px 为准来确定按钮的相应尺寸相关样式。

　　　总体来说，这段代码的作用是强制将 Element UI 按钮组件的某个与尺寸相关的样式（由 --el-button-size 变量控制）设置为 50px 。

因为前面已经有一个类了

 再加上这个类

 

本身权重就挺高的，所以不写!important也行

 可以看看效果