gfast-ui\src\views\login\index.vue

登录页面的 Vue 组件，包含两种登录方式：账户登录和手机登录，以及一个扫码登录的选项。

1. HTML 结构：

主要结构：

登录容器 (login-container)：整个登录页面的容器。
- 登录内容外部容器 (login-content-out)：包裹登录内容的外部容器。
  - 登录内容 (login-content)：真正的登录内容。
    - 图标组 (login-icon-group)：显示页面上部的图标。
    - 登录选项卡：包含两种登录方式（账户登录和手机登录）。
    - 扫码登录 (Scan)：一个可选的登录方式。
    - 扫码切换按钮 (login-content-main-scan)：允许用户在常规登录和扫码登录之间切换。
- 页脚 (login-footer)：页面底部的版权信息。

细节：

使用 Element UI 的 <el-tabs> 和 <el-tab-pane> 组件来创建登录选项卡。
使用 v-if 和 v-show 指令根据组件的状态来显示或隐藏某些部分。
使用 :src 和 :class 绑定来动态设置属性。

2. Vue 脚本：

数据和状态：

tabsActiveName：当前活动的选项卡名称，初始值为 ‘account’，代表账户登录。
isScan：是否显示扫码登录，初始值为 false。

生命周期钩子：

onMounted：当组件挂载完成后，调用 NextLoading.done() 方法。

计算属性：

getThemeConfig：获取主题配置信息。

返回值：

返回了一些属性和状态，供模板部分使用。

3. 样式：

主要使用 SCSS 为登录页面定义了样式，其中有一些关键点：

使用了 Vue 的 scoped 属性，这意味着这些样式只会应用到当前组件。
使用了 CSS 变量，例如 var(--el-color-primary)，这些可能是从 Element UI 继承的。
使用了一些动画和过渡效果，例如 transition。

总结：

这个组件为用户提供了一个登录界面，其中包含两种常规的登录方式和一个扫码登录的选项。它使用 Element UI 来实现选项卡的切换，并使用 Vue 的反应性系统来根据用户的选择显示或隐藏某些部分。这个组件的样式是通过 SCSS 定义的，并且只适用于该组件。

登录选项卡

在 <template> 部分，有以下的代码段与登录选项卡相关：

1<el-tabs v-model="tabsActiveName">
2    <el-tab-pane :label="$t('message.label.one1')" name="account">
3        <Account />
4    </el-tab-pane>
5    <el-tab-pane :label="$t('message.label.two2')" name="mobile">
6        <Mobile />
7    </el-tab-pane>
8</el-tabs>

代码描述：

<el-tabs v-model="tabsActiveName">: 这是 Element UI 的 Tabs 组件，它允许你创建选项卡。v-model="tabsActiveName" 表示当前激活的选项卡名与 tabsActiveName 变量绑定。
<el-tab-pane :label="$t('message.label.one1')" name="account">: 这是 Tabs 组件中的单个选项卡。label 属性用于设置选项卡的标题，这里使用的是 $t('message.label.one1')，表示它使用了国际化功能，根据当前的语言设置显示对应的文本。name="account" 设置了这个选项卡的名称，它是唯一的。
<Account />: 这是一个 Vue 组件，当用户点击 “account” 选项卡时，这个组件的内容将会显示。
<el-tab-pane :label="$t('message.label.two2')" name="mobile">: 这是另一个选项卡，与上面的 account 选项卡类似，但其名称为 mobile。
<Mobile />: 当用户点击 “mobile” 选项卡时，这个 Vue 组件的内容将会显示。

总结：

这段代码为用户提供了两个登录方式的选项：通过账号（Account 组件）和通过手机（Mobile 组件）。用户可以点击选项卡来在这两种登录方式之间切换。这种选项卡式的登录方式为用户提供了更多的选择，提高了用户体验。

布局及样式分析

.login-container:
- width: 100%; height: 100%;: 容器充满其父元素的整个空间。
- position: relative;: 为内部的绝对定位元素提供定位上下文。
- background-image: url("/@/assets/bg.jpg");: 使用背景图片。
- background-size: cover;: 使背景图片覆盖整个元素。
.login-content-out:
- width: 100%; height: 100%;: 充满其父容器 .login-container 的空间。
- display: flex; flex-direction: column;: 使用 Flexbox 布局以垂直方向排列子元素。
- justify-content: center; align-items: center;: 使其子元素在垂直和水平方向上居中。
.login-content:
- width: 500px;: 有一个固定宽度。
- padding: 20px;: 在内容周围添加了一些填充。
- background-color: var(--el-color-white);: 白色背景。
- border: 5px solid var(--el-color-primary-light-8);: 具有主题颜色的边框。
- border-radius: 5px;: 圆角边框。
- position: relative;: 为内部的绝对定位元素提供定位上下文。
子元素:

a. .login-content-main:
- margin: 0 auto;: 使内容水平居中。
- width: 80%;: 限制宽度为父元素 .login-content 的 80%。
b. .login-icon-group:
- width: 100%; height: 100%;: 充满其父元素 .login-content-main 的空间。
- position: relative;: 为其内部的绝对定位元素提供定位上下文。
i. .login-icon-group-title:
```
  - `display: flex;`: 使用 Flexbox 布局，使其子元素（例如图像和文本）在一行内排列。
  - `align-items: center;`: 确保子元素在垂直方向上居中对齐。

  子元素:

  - **img**: 有一个固定的尺寸 `width: 80px; height: 70px;`，用于显示登录图标。
  - **.login-icon-group-title-text**:
    - `padding-left: 5px;`: 在图标和文本之间添加了一点空间。
    - `color: var(--el-color-primary);`: 使用了主题的主要颜色为文本上色。
```
.login-footer:
- position: absolute;: 绝对定位。
- bottom: 5px;: 距离容器底部5px。
- width: 100%;: 宽度为父元素 .login-container 的100%。

这些元素和样式共同为用户提供了一个视觉上吸引人的登录界面。图标和标题提供了一种视觉上的提示，告诉用户他们正在登录的应用程序或平台的名称。

需要注意的是，如果一个元素设置了 width: 100%; height: 100%;，那么它会充满其父容器的空间。但这里的关键是这些属性是如何与其他内容和样式共同作用的。

当我们设置元素的 width 和 height 为 100%，这意味着该元素希望占据其父容器的所有可用空间。但是，如果父容器本身没有明确的高度值（例如，它的高度由其内容决定），那么子元素的 height: 100%; 可能不会产生预期的效果。此外，当有多个块级子元素时，这些元素会垂直堆叠，所以即使 .login-icon-group 元素有 height: 100%; 的设置，它并不会挤压或覆盖其他兄弟元素，如 <el-tabs>。

另外，CSS 的盒模型、box-sizing 属性、内边距、外边距、边框等都会影响到元素的实际大小和位置。这意味着即使一个元素的宽度和高度都设置为 100%，它也不一定会完全填充其父容器。

在给定的 .login-content-main 样式中，没有明确设置高度。因此，其高度是由其内部的子元素（如 .login-icon-group 和 <el-tabs>）共同决定的。这意味着 .login-icon-group 和 <el-tabs> 将共享 .login-content-main 的垂直空间，但不会相互覆盖。

总之，尽管 .login-icon-group 的样式设置了 width: 100%; height: 100%;，但由于其父元素 .login-content-main 的高度是由内容决定的，<el-tabs> 仍然有其自己的空间。

扫码切换功能

接下来我们看一下登录框右上角的扫码切换功能是如何实现的

好的，让我们分析一下 .login-content-main-sacn 这个样式类及其相关的样式效果。

 1.login-content-main-sacn {
 2  position: absolute;           // 1
 3  top: 0;                       // 2
 4  right: 0;                     // 3
 5  width: 50px;                  // 4
 6  height: 50px;                 // 5
 7  overflow: hidden;             // 6
 8  cursor: pointer;              // 7
 9  transition: all ease 0.3s;    // 8
10  color: var(--el-text-color-primary); // 9
11  &-delta {                     // 10
12    position: absolute;
13    width: 35px;
14    height: 70px;
15    z-index: 2;
16    top: 2px;
17    right: 21px;
18    background: var(--el-color-white);
19    transform: rotate(-45deg);
20  }
21  &:hover {                     // 11
22    opacity: 1;
23    transition: all ease 0.3s;
24    color: var(--el-color-primary) !important;
25  }
26  i {                           // 12
27    width: 47px;
28    height: 50px;
29    display: inline-block;
30    font-size: 48px;
31    position: absolute;
32    right: 2px;
33    top: -1px;
34  }
35}

position: absolute;: 元素的定位方式为绝对定位。这意味着该元素会脱离文档流，并相对于最近的父元素进行定位，如果找不到这样的父元素，则相对于初始包含块定位。
top: 0;: 元素的顶部边缘与其包含块的顶部边缘对齐。
right: 0;: 元素的右侧边缘与其包含块的右侧边缘对齐。这两条规则确保了元素定位在其父元素的右上角。
width: 50px;: 元素的宽度为50像素。
height: 50px;: 元素的高度为50像素。
overflow: hidden;: 如果元素的内容超出其盒子，那么这些内容会被裁剪掉。
cursor: pointer;: 当鼠标悬停在元素上时，光标会变为一个手指形状，通常表示该元素是可点击的。
transition: all ease 0.3s;: 为所有属性设置一个0.3秒的过渡效果，使用“ease”作为过渡函数，提供一个平滑的动画效果。
color: var(--el-text-color-primary);: 设置文本颜色。这里使用了CSS变量。
&-delta: 是SCSS的嵌套规则，这将生成一个新的选择器 .login-content-main-sacn-delta。这部分定义了一个绝对定位的子元素，有自己的大小、颜色和旋转属性。
&:hover: 为元素设置了一个悬停效果，当鼠标悬停在元素上时，元素的透明度和颜色会有所变化。
i: 为 i 标签设置了样式。此标签可能用于显示一个图标。

综上所述，.login-content-main-sacn 样式为一个绝对定位在其父元素右上角的小方块，它有一个悬停效果，并包含一个可能显示图标的 i 标签。

登录方式切换的实现，即在常规的账号/手机登录和扫码登录之间切换。当点击右上角的切换按钮时，isScan 这个变量的值会发生变化。这个值的变化会影响页面上的渲染内容。具体来说：

初始状态: 当 isScan 为 false 时，以下内容会被渲染：

 1<div v-if="!isScan">
 2  <el-tabs v-model="tabsActiveName">
 3    <el-tab-pane :label="$t('message.label.one1')" name="account">
 4      <Account />
 5    </el-tab-pane>
 6    <el-tab-pane :label="$t('message.label.two2')" name="mobile">
 7      <Mobile />
 8    </el-tab-pane>
 9  </el-tabs>
10</div>

这部分是 Element UI 的标签页组件，提供了两个选项卡：一个是账号登录 (Account 组件)，另一个是手机登录 (Mobile 组件)。

点击后的状态: 当用户点击右上角的图标后，由于绑定的点击事件 @click="isScan = !isScan"，isScan 的值会变为 true。

此时，由于 v-if="!isScan" 的条件不再满足，上面的登录选项卡部分将不再渲染。

而与此同时，在登录页面的其他部分（你之前没有完整给出，但我假设它可能存在），可能有类似以下的内容：

1<Scan v-if="isScan" />

这个 Scan 组件是用于扫码登录的。当 isScan 为 true 时，这个组件会被渲染，而上面的选项卡部分则会消失。

通过这种方式，点击右上角的切换图标会在常规登录和扫码登录之间进行切换。

TimeTrain