pswqm3ot6
/
spring-boot-online-exam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Default Changelist

Browse Source
feature/qzw
秦泽旺 8 months ago
parent 9fbe2efbb6
commit 52954f1563
7 changed files with 208 additions and 47 deletions
Show Stats Download Patch File Download Diff File

62
frontend/src/components/MultiTab/MultiTab.vue
Unescape View File

@ -24,43 +24,58 @@
</div> </div>
</template> </template>
--> -->
<script> <script>
export default { export default {
// 组件名称
name: 'MultiTab', name: 'MultiTab',
// 组件的初始数据
data () { data () {
return { return {
fullPathList: [], fullPathList: [], // 存储所有标签页的完整路径
pages: [], pages: [], // 存储所有Vue路由对象
activeKey: '', activeKey: '', // 当前激活的标签页的key
newTabIndex: 0 newTabIndex: 0 // 新标签页的索引（在这段代码中未使用）
} }
}, },
// 组件创建后执行的逻辑
created () { created () {
// 初始化时将当前路由添加到pages和fullPathList中
this.pages.push(this.$route) this.pages.push(this.$route)
this.fullPathList.push(this.$route.fullPath) this.fullPathList.push(this.$route.fullPath)
// 选择最后一个路径作为当前激活的路径
this.selectedLastPath() this.selectedLastPath()
}, },
methods: { methods: {
// 调用编辑方法，根据action参数执行添加或删除操作
onEdit (targetKey, action) { onEdit (targetKey, action) {
this[action](targetKey) this[action](targetKey)
}, },
// 从pages和fullPathList中移除指定的标签页
remove (targetKey) { remove (targetKey) {
// 过滤掉要移除的标签页
this.pages = this.pages.filter(page => page.fullPath !== targetKey) this.pages = this.pages.filter(page => page.fullPath !== targetKey)
this.fullPathList = this.fullPathList.filter(path => path !== targetKey) this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
// 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页 // 如果当前激活的标签页被关闭，则跳转到最后一个还存在的标签页
if (!this.fullPathList.includes(this.activeKey)) { if (!this.fullPathList.includes(this.activeKey)) {
this.selectedLastPath() this.selectedLastPath()
} }
}, },
// 选择最后一个标签页作为当前激活的标签页
selectedLastPath () { selectedLastPath () {
this.activeKey = this.fullPathList[this.fullPathList.length - 1] this.activeKey = this.fullPathList[this.fullPathList.length - 1]
}, },
// content menu // 右键菜单中的关闭当前标签功能
closeThat (e) { closeThat (e) {
this.remove(e) this.remove(e)
}, },
// 右键菜单中的关闭左侧所有标签功能
closeLeft (e) { closeLeft (e) {
const currentIndex = this.fullPathList.indexOf(e) const currentIndex = this.fullPathList.indexOf(e)
if (currentIndex > 0) { if (currentIndex > 0) {
@ -73,6 +88,8 @@ export default {
this.$message.info('左侧没有标签') this.$message.info('左侧没有标签')
} }
}, },
// 右键菜单中的关闭右侧所有标签功能
closeRight (e) { closeRight (e) {
const currentIndex = this.fullPathList.indexOf(e) const currentIndex = this.fullPathList.indexOf(e)
if (currentIndex < (this.fullPathList.length - 1)) { if (currentIndex < (this.fullPathList.length - 1)) {
@ -85,6 +102,8 @@ export default {
this.$message.info('右侧没有标签') this.$message.info('右侧没有标签')
} }
}, },
// 右键菜单中的关闭全部标签（除了当前标签）功能
closeAll (e) { closeAll (e) {
const currentIndex = this.fullPathList.indexOf(e) const currentIndex = this.fullPathList.indexOf(e)
this.fullPathList.forEach((item, index) => { this.fullPathList.forEach((item, index) => {
@ -93,6 +112,8 @@ export default {
} }
}) })
}, },
// 右键菜单点击事件处理函数
closeMenuClick ({ key, item, domEvent }) { closeMenuClick ({ key, item, domEvent }) {
const vkey = domEvent.target.getAttribute('data-vkey') const vkey = domEvent.target.getAttribute('data-vkey')
switch (key) { switch (key) {
@ -111,6 +132,8 @@ export default {
break break
} }
}, },
// 渲染右键菜单
renderTabPaneMenu (e) { renderTabPaneMenu (e) {
return ( return (
<a-menu {...{ on: { click: this.closeMenuClick } }}> <a-menu {...{ on: { click: this.closeMenuClick } }}>
@ -121,7 +144,8 @@ export default {
</a-menu> </a-menu>
) )
}, },
// render
// 渲染标签页及其右键菜单
renderTabPane (title, keyPath) { renderTabPane (title, keyPath) {
const menu = this.renderTabPaneMenu(keyPath) const menu = this.renderTabPaneMenu(keyPath)
@ -132,18 +156,26 @@ export default {
) )
} }
}, },
// 监听路由变化
watch: { watch: {
'$route': function (newVal) { '$route': function (newVal) {
// 更新当前激活的标签页
this.activeKey = newVal.fullPath this.activeKey = newVal.fullPath
// 如果新路由不在fullPathList中，则添加它及其对应的路由对象
if (this.fullPathList.indexOf(newVal.fullPath) < 0) { if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
this.fullPathList.push(newVal.fullPath) this.fullPathList.push(newVal.fullPath)
this.pages.push(newVal) this.pages.push(newVal)
} }
}, },
// 监听activeKey的变化，如果变化则导航到新的路径
activeKey: function (newPathKey) { activeKey: function (newPathKey) {
this.$router.push({ path: newPathKey }) this.$router.push({ path: newPathKey })
} }
}, },
// 渲染组件
render () { render () {
const { onEdit, $data: { pages } } = this const { onEdit, $data: { pages } } = this
const panes = pages.map(page => { const panes = pages.map(page => {
@ -160,16 +192,16 @@ export default {
<div class="ant-pro-multi-tab"> <div class="ant-pro-multi-tab">
<div class="ant-pro-multi-tab-wrapper"> <div class="ant-pro-multi-tab-wrapper">
<a-tabs <a-tabs
hideAdd hideAdd // 隐藏添加按钮
type={'editable-card'} type={'editable-card'} // 标签页的类型为可编辑卡片
v-model={this.activeKey} v-model={this.activeKey} // 绑定当前激活的标签页
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }} tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }} // 自定义标签栏的样式
{...{ on: { edit: onEdit } }}> {...{ on: { edit: onEdit } }}> // 监听编辑事件
{panes} {panes} // 渲染所有的标签页
</a-tabs> </a-tabs>
</div> </div>
</div> </div>
) )
} }
} }
</script> </script>

11
frontend/src/components/MultiTab/index.js
Unescape View File

@ -1,4 +1,9 @@
import MultiTab from './MultiTab' // 导入名为 MultiTab 的Vue组件，该组件定义在当前目录下的 MultiTab.vue 文件中
import './index.less' import MultiTab from './MultiTab';
export default MultiTab // 导入index.less样式表文件，用于为MultiTab组件提供样式定义
import './index.less';
// 将导入的 MultiTab 组件设置为默认导出
// 这样其他文件就可以通过 import MultiTab 来使用这个组件
export default MultiTab;

25
frontend/src/components/MultiTab/index.less
Unescape View File

@ -1,25 +1,34 @@
// 导入外部样式表，可能是包含通用样式或变量定义的文件
@import '../index'; @import '../index';
// 定义多标签组件的前缀类，用于构建CSS选择器
@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab"; @multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper"; @multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
/* /*
* 定义多标签组件在.topmenu类下的样式
* 设置最大宽度为1200px
* 设置左右边距，左边距为-23px，右边距为24px，自动居中
*/
.topmenu .@{multi-tab-prefix-cls} { .topmenu .@{multi-tab-prefix-cls} {
max-width: 1200px; max-width: 1200px;
margin: -23px auto 24px auto; margin: -23px auto 24px auto;
} }
*/
// 为多标签组件设置通用样式
.@{multi-tab-prefix-cls} { .@{multi-tab-prefix-cls} {
margin: -23px -24px 24px -24px; margin: -23px -24px 24px -24px; // 设置四个方向的边距
background: #fff; background: #fff; // 背景颜色为白色
} }
// 定义多标签组件在.topmenu类下的多标签包装器的样式
.topmenu .@{multi-tab-wrapper-prefix-cls} { .topmenu .@{multi-tab-wrapper-prefix-cls} {
max-width: 1200px; max-width: 1200px; // 最大宽度为1200px
margin: 0 auto; margin: 0 auto; // 水平居中对齐
} }
// 当内容宽度是流体布局时，设置多标签包装器的最大宽度为100%
.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} { .topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} {
max-width: 100%; max-width: 100%; // 最大宽度为100%
margin: 0 auto; margin: 0 auto; // 水平居中对齐
} }

56
frontend/src/components/NoticeIcon/NoticeIcon.vue
Unescape View File

@ -1,4 +1,5 @@
<template> <template>
<!-- 使用 a-popover 组件创建一个弹出框，以下是对其配置属性的设置 -->
<a-popover <a-popover
v-model="visible" v-model="visible"
trigger="click" trigger="click"
@ -8,13 +9,21 @@
:arrowPointAtCenter="true" :arrowPointAtCenter="true"
:overlayStyle="{ width: '300px', top: '50px' }" :overlayStyle="{ width: '300px', top: '50px' }"
> >
<!-- 定义弹出框内容的插槽 -->
<template slot="content"> <template slot="content">
<!-- 使用 a-spin 组件，根据 loadding 变量的值来显示加载状态 -->
<a-spin :spinning="loadding"> <a-spin :spinning="loadding">
<!-- 使用 a-tabs 组件创建选项卡 -->
<a-tabs> <a-tabs>
<!-- 第一个选项卡“通知”的配置 -->
<a-tab-pane tab="通知" key="1"> <a-tab-pane tab="通知" key="1">
<!-- 使用 a-list 组件创建列表 -->
<a-list> <a-list>
<!-- 列表中的一个列表项 -->
<a-list-item> <a-list-item>
<!-- a-list-item-meta 用于展示列表项中的元信息，如标题、描述等 -->
<a-list-item-meta title="你收到了 14 份新周报" description="一年前"> <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
<!-- 使用 a-avatar 组件展示头像，设置了背景色和头像图片来源 -->
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/> <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
@ -30,17 +39,22 @@
</a-list-item> </a-list-item>
</a-list> </a-list>
</a-tab-pane> </a-tab-pane>
<!-- 第二个选项卡“消息”的配置，内容暂时为简单文本“123” -->
<a-tab-pane tab="消息" key="2"> <a-tab-pane tab="消息" key="2">
123 123
</a-tab-pane> </a-tab-pane>
<!-- 第三个选项卡“待办”的配置，内容暂时为简单文本“123” -->
<a-tab-pane tab="待办" key="3"> <a-tab-pane tab="待办" key="3">
123 123
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-spin> </a-spin>
</template> </template>
<!-- 点击此元素会触发 fetchNotice 方法，同时添加了 header-notice 类名 -->
<span @click="fetchNotice" class="header-notice"> <span @click="fetchNotice" class="header-notice">
<!-- 使用 a-badge 组件展示一个带有数字的徽标，这里数字为 12 -->
<a-badge count="12"> <a-badge count="12">
<!-- 使用 a-icon 组件展示一个铃铛图标，设置了字体大小和内边距 -->
<a-icon style="font-size: 16px; padding: 4px" type="bell" /> <a-icon style="font-size: 16px; padding: 4px" type="bell" />
</a-badge> </a-badge>
</span> </span>
@ -52,38 +66,48 @@ export default {
name: 'HeaderNotice', name: 'HeaderNotice',
data () { data () {
return { return {
// loadding 变量用于控制加载状态，初始化为 false
loadding: false, loadding: false,
// visible 变量用于控制 a-popover 弹出框的显示与隐藏，初始化为 false
visible: false visible: false
} }
}, },
methods: { methods: {
fetchNotice () { fetchNotice() {
// 如果弹出框当前是隐藏状态
if (!this.visible) { if (!this.visible) {
this.loadding = true // 设置 loadding 为 true，表示开始加载
this.loadding = true;
// 两秒后将 loadding 设置为 false，模拟加载完成
setTimeout(() => { setTimeout(() => {
this.loadding = false this.loadding = false;
}, 2000) }, 2000);
} else { } else {
this.loadding = false // 如果弹出框当前是显示状态，直接将 loadding 设置为 false
this.loadding = false;
} }
this.visible = !this.visible // 切换弹出框的显示与隐藏状态
this.visible = !this.visible;
} }
} }
} }
</script> </script>
<style lang="css"> <style lang="css">
.header-notice-wrapper { /* 针对类名为 header-notice-wrapper 的元素设置样式，强制将 top 值设为 50px，覆盖可能存在的其他样式 */
top: 50px !important; .header-notice-wrapper {
} top: 50px !important;
}
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.header-notice{ /* 对类名为 header-notice 的元素设置样式，使其显示为内联块元素，并设置过渡效果 */
display: inline-block; .header-notice {
transition: all 0.3s; display: inline-block;
transition: all 0.3s;
span { span {
vertical-align: initial; // 设置 span 元素的垂直对齐方式为初始值
} vertical-align: initial;
} }
</style> }
</style>

10
frontend/src/components/NoticeIcon/index.js
Unescape View File

@ -1,2 +1,10 @@
// 从当前目录下的'./NoticeIcon'文件中导入名为NoticeIcon的模块或组件。
// './NoticeIcon'指的是与当前文件同一目录下的NoticeIcon文件（可能是一个React组件）。
// 这里的导入路径是相对于当前文件的相对路径。
import NoticeIcon from './NoticeIcon' import NoticeIcon from './NoticeIcon'
export default NoticeIcon
// 导出NoticeIcon模块或组件，使得其他文件可以通过import语句来引用它。
// 使用export default语法表示默认导出，这意味着在导入时不需要使用花括号{}。
// 这使得其他文件可以通过类似import SomeName from './path/to/this/file'的方式导入NoticeIcon，
// 其中SomeName可以是任意名称，但导入的内容将是这里导出的NoticeIcon。
export default NoticeIcon

84
frontend/src/components/PageHeader/PageHeader.vue
Unescape View File

@ -1,27 +1,41 @@
<template> <template>
<!-- 创建一个带有 page-header 类名的 div 容器，作为页面头部的外层包裹元素 -->
<div class="page-header"> <div class="page-header">
<!-- 创建一个带有 page-header-index-wide 类名的 div 容器，可能用于页面头部的特定布局或样式控制 -->
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<!-- 使用 s-breadcrumb 组件，可能用于展示面包屑导航（具体功能取决于该组件的实现） -->
<s-breadcrumb /> <s-breadcrumb />
<!-- 创建一个名为 detail 的 div 容器，用于放置页面头部更详细的内容 -->
<div class="detail"> <div class="detail">
<!-- 条件判断，如果路由元信息中的 hiddenHeaderContent 为 false，则展示以下内容 -->
<div class="main" v-if="!$route.meta.hiddenHeaderContent"> <div class="main" v-if="!$route.meta.hiddenHeaderContent">
<!-- 创建一个 row 类名的 div 容器，可能用于布局，类似行的概念 -->
<div class="row"> <div class="row">
<!-- 如果 logo 属性有值，则展示对应的图片，图片的源地址由 logo 属性绑定，并且添加 logo 类名用于样式控制 -->
<img v-if="logo" :src="logo" class="logo"/> <img v-if="logo" :src="logo" class="logo"/>
<!-- 如果 title 属性有值，则展示对应的标题内容，使用双大括号进行数据绑定，展示 title 属性的值，并添加 title 类名用于样式控制 -->
<h1 v-if="title" class="title">{{ title }}</h1> <h1 v-if="title" class="title">{{ title }}</h1>
<!-- 创建一个名为 action 的 div 容器，用于放置具名插槽内容，可能是一些操作按钮之类的元素 -->
<div class="action"> <div class="action">
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
</div> </div>
<!-- 再创建一个 row 类名的 div 容器，继续放置页面头部的其他元素 -->
<div class="row"> <div class="row">
<!-- 如果 avatar 属性有值，则展示对应的头像元素，使用 a-avatar 组件展示，图片源地址由 avatar 属性绑定 -->
<div v-if="avatar" class="avatar"> <div v-if="avatar" class="avatar">
<a-avatar :src="avatar" /> <a-avatar :src="avatar" />
</div> </div>
<!-- 如果有名为 content 的插槽内容，则展示对应的插槽内容，并添加 headerContent 类名用于样式控制 -->
<div v-if="this.$slots.content" class="headerContent"> <div v-if="this.$slots.content" class="headerContent">
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
<!-- 如果有名为 extra 的插槽内容，则展示对应的插槽内容，并添加 extra 类名用于样式控制 -->
<div v-if="this.$slots.extra" class="extra"> <div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot> <slot name="extra"></slot>
</div> </div>
</div> </div>
<!-- 放置一个用于名为 pageMenu 的插槽内容的容器，可能用于展示页面相关的菜单选项等 -->
<div> <div>
<slot name="pageMenu"></slot> <slot name="pageMenu"></slot>
</div> </div>
@ -32,24 +46,29 @@
</template> </template>
<script> <script>
// 从项目相对路径 '../../components/tools/Breadcrumb' 导入 Breadcrumb 组件（可能用于面包屑导航功能）
import Breadcrumb from '../../components/tools/Breadcrumb' import Breadcrumb from '../../components/tools/Breadcrumb'
export default { export default {
name: 'PageHeader', name: 'PageHeader',
components: { components: {
// 将导入的 Breadcrumb 组件注册为名为 s-breadcrumb 的组件，方便在模板中使用
's-breadcrumb': Breadcrumb 's-breadcrumb': Breadcrumb
}, },
props: { props: {
// 定义 title 属性，类型可以是字符串或者布尔值，默认值为 true，非必需属性
title: { title: {
type: [String, Boolean], type: [String, Boolean],
default: true, default: true,
required: false required: false
}, },
// 定义 logo 属性，类型为字符串，默认值为空字符串，非必需属性
logo: { logo: {
type: String, type: String,
default: '', default: '',
required: false required: false
}, },
// 定义 avatar 属性，类型为字符串，默认值为空字符串，非必需属性
avatar: { avatar: {
type: String, type: String,
default: '', default: '',
@ -63,89 +82,131 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// 对类名为 page-header 的元素设置样式
.page-header { .page-header {
// 设置背景颜色为白色
background: #fff; background: #fff;
// 设置内边距，上内边距 16px，左右内边距 32px，下内边距 0
padding: 16px 32px 0; padding: 16px 32px 0;
// 设置底部边框，宽度 1px，颜色为浅灰色（#e8e8e8）
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
.breadcrumb { .breadcrumb {
// 设置面包屑导航组件的底部外边距为 16px
margin-bottom: 16px; margin-bottom: 16px;
} }
.detail { .detail {
// 设置为弹性布局，方便内部元素进行灵活排列
display: flex; display: flex;
/*margin-bottom: 16px;*/ /*margin-bottom: 16px;*/
.avatar { .avatar {
// 设置弹性伸缩属性，不自动缩放，初始宽度为 72px
flex: 0 1 72px; flex: 0 1 72px;
// 设置外边距，右边距 24px，底部距 8px
margin: 0 24px 8px 0; margin: 0 24px 8px 0;
& > span { & > span {
// 设置边框圆角为 72px，使其呈现圆形（用于头像等元素）
border-radius: 72px; border-radius: 72px;
// 设置为块级元素
display: block; display: block;
// 设置宽度为 72px
width: 72px; width: 72px;
// 设置高度为 72px
height: 72px; height: 72px;
} }
} }
.main { .main {
// 宽度占满父元素
width: 100%; width: 100%;
// 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
flex: 0 1 auto; flex: 0 1 auto;
.row { .row {
// 设置为弹性布局，方便内部元素按行排列
display: flex; display: flex;
// 宽度占满父元素
width: 100%; width: 100%;
.avatar { .avatar {
// 设置头像元素底部外边距为 16px
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
.title { .title {
// 设置字体大小为 20px
font-size: 20px; font-size: 20px;
// 设置字体粗细为 500
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 500; font-weight: 500;
// 设置字体颜色，带有一定透明度的黑色（rgba 颜色模式）
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
// 设置底部外边距为 16px
margin-bottom: 16px; margin-bottom: 16px;
// 设置元素在弹性布局中自动填充剩余空间
flex: auto; flex: auto;
} }
.logo { .logo {
// 设置宽度为 28px
width: 28px; width: 28px;
// 设置高度为 28px
height: 28px; height: 28px;
// 设置边框圆角为 4px
border-radius: 4px; border-radius: 4px;
// 设置右边距为 16px
margin-right: 16px; margin-right: 16px;
} }
.content, .content,
.headerContent { .headerContent {
// 设置元素在弹性布局中自动填充剩余空间
flex: auto; flex: auto;
// 设置字体颜色，带有一定透明度的灰色（rgba 颜色模式）
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
// 设置行高为 22px
line-height: 22px; line-height: 22px;
.link { .link {
// 设置顶部外边距为 16px
margin-top: 16px; margin-top: 16px;
// 设置行高为 24px
line-height: 24px; line-height: 24px;
a { a {
// 设置字体大小为 14px
font-size: 14px; font-size: 14px;
// 设置右边距为 32px
margin-right: 32px; margin-right: 32px;
} }
} }
} }
.extra { .extra {
// 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
flex: 0 1 auto; flex: 0 1 auto;
// 设置左边距为 88px
margin-left: 88px; margin-left: 88px;
// 设置最小宽度为 242px
min-width: 242px; min-width: 242px;
// 设置文本对齐方式为右对齐
text-align: right; text-align: right;
} }
.action { .action {
// 设置左边距为 56px
margin-left: 56px; margin-left: 56px;
// 设置最小宽度为 266px
min-width: 266px; min-width: 266px;
// 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
flex: 0 1 auto; flex: 0 1 auto;
// 设置文本对齐方式为右对齐
text-align: right; text-align: right;
&:empty { &:empty {
// 如果该元素内部为空，则隐藏该元素
display: none; display: none;
} }
} }
@ -153,50 +214,69 @@ export default {
} }
} }
.mobile .page-header { // 针对类名为 mobile 的父元素下的 page-header 元素设置特定样式（可能用于移动端适配）
.mobile.page-header {
.main { .main {
.row { .row {
// 设置弹性布局换行，当空间不足时内部元素会自动换行
flex-wrap: wrap; flex-wrap: wrap;
.avatar { .avatar {
// 调整头像元素在移动端的弹性伸缩属性，初始宽度占比等
flex: 0 1 25%; flex: 0 1 25%;
// 设置外边距，右边距 2%，底部距 8px
margin: 0 2% 8px 0; margin: 0 2% 8px 0;
} }
.content, .content,
.headerContent { .headerContent {
// 调整内容区域在移动端的弹性伸缩属性，初始宽度占比等
flex: 0 1 70%; flex: 0 1 70%;
.link { .link {
// 设置顶部外边距为 16px
margin-top: 16px; margin-top: 16px;
// 设置行高为 24px
line-height: 24px; line-height: 24px;
a { a {
// 设置字体大小为 14px
font-size: 14px; font-size: 14px;
// 设置右边距为 10px
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.extra { .extra {
// 调整额外内容区域在移动端的弹性伸缩属性，使其更灵活自适应等
flex: 1 1 auto; flex: 1 1 auto;
// 清除左边距
margin-left: 0; margin-left: 0;
// 最小宽度设置为 0，更灵活适配移动端屏幕宽度
min-width: 0; min-width: 0;
// 设置文本对齐方式为右对齐
text-align: right; text-align: right;
} }
.action { .action {
// 清除左边距的自定义设置（恢复默认或按其他规则）
margin-left: unset; margin-left: unset;
// 设置最小宽度为 266px
min-width: 266px; min-width: 266px;
// 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
flex: 0 1 auto; flex: 0 1 auto;
// 设置文本对齐方式为左对齐
text-align: left; text-align: left;
// 设置底部外边距为 12px
margin-bottom: 12px; margin-bottom: 12px;
&:empty { &:empty {
// 如果该元素内部为空，则隐藏该元素
display: none; display: none;
} }
} }
} }
} }
} }
</style> </style>

7
frontend/src/components/PageHeader/index.js
Unescape View File

@ -1,2 +1,5 @@
import PageHeader from './PageHeader' // 从当前目录下的 PageHeader 文件（通常是.js、.vue等相关的模块文件，具体取决于项目配置）中导入 PageHeader 模块（可能是一个组件、函数或者类等，具体要看 PageHeader 文件中导出的内容是什么）
export default PageHeader import PageHeader from './PageHeader';
// 将导入的 PageHeader 模块原样导出，这样在其他模块中可以通过相应的导入语句引入这个 PageHeader，方便复用该模块所代表的功能或组件等内容
export default PageHeader;
Write Preview
Loading…
Cancel
Save