span底部显示border一半

1、html
<div>
<span class="status-all status-active status-normal">全部</span>
<span class="status-other status-normal">待确认</span>
<span class="status-other status-normal">已成功</span>
</div>

2、css
.status-all.status-active:after {
content: '';
position: absolute;
width: 16px;
height: 2px;
left: 25%;
bottom: 0;
background-color: #4572ED;
}


.status-other.status-active:after {
content: '';
position: absolute;
left: 25%;
bottom: 0;
height: 2px;
width: 24px;
background-color: #4572ED;
}

效果如下图:




<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高三勇者大冒险:终极备考RPG指南</title> <style> /* 游戏风格基础设置 */ :root { --quest-blue: #4e73df; --epic-purple: #6f42c1; --rare-green: #1cc88a; --common-gray: #858796; --legendary-orange: #f6c23e; --health-red: #e74a3b; --mana-blue: #36b9cc; --stamina-yellow: #f6c23e; --dark-bg: #2a3042; --light-text: #f8f9fc; } @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+SC:wght@400;700&display=swap'); body { background-color: var(--dark-bg); color: var(--light-text); font-family: 'Noto Sans SC', sans-serif; line-height: 1.6; background-image: url('https://img.freepik.com/free-vector/pixel-art-game-background-nature-landscape_107791-740.jpg'); background-size: cover; background-attachment: fixed; padding: 0; margin: 0; } .rpg-container { max-width: 1000px; margin: 0 auto; background-color: rgba(42, 48, 66, 0.9); border: 4px solid var(--epic-purple); border-radius: 10px; box-shadow: 0 0 30px rgba(110, 66, 193, 0.5); overflow: hidden; } /* 游戏标题样式 */ .rpg-header { background: linear-gradient(135deg, var(--quest-blue), var(--epic-purple)); padding: 30px; text-align: center; position: relative; border-bottom: 5px solid var(--legendary-orange); } .rpg-title { font-family: 'Press Start 2P', cursive; font-size: 2.2rem; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; margin-bottom: 15px; letter-spacing: 2px; } .rpg-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.8); font-weight: bold; } /* 角色状态栏 */ .character-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 15px; background-color: rgba(0,0,0,0.3); border-bottom: 2px solid var(--quest-blue); } .status-bar { display: flex; flex-direction: column; align-items: center; } .status-label { font-size: 0.8rem; color: var(--light-text); margin-bottom: 5px; } .status-value { font-weight: bold; font-size: 1.2rem; } .health { color: var(--health-red); } .mana { color: var(--mana-blue); } .stamina { color: var(--stamina-yellow); } .level { color: var(--rare-green); } /* 任务日志区域 */ .quest-log { padding: 20px; } .chapter-title { font-family: 'Press Start 2P', cursive; font-size: 1.2rem; color: var(--legendary-orange); margin: 30px 0 20px; padding-bottom: 10px; border-bottom: 2px dashed var(--epic-purple); text-shadow: 2px 2px 0 #000; } /* 任务卡片样式 */ .quest-card { background: linear-gradient(135deg, rgba(46, 52, 78, 0.8), rgba(32, 38, 58, 0.8)); border: 2px solid var(--quest-blue); border-radius: 8px; padding: 15px; margin-bottom: 20px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.3s; } .quest-card:hover { transform: translateY(-5px); border-color: var(--rare-green); } .quest-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .quest-name { font-weight: bold; font-size: 1.1rem; color: white; display: flex; align-items: center; } .quest-type { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-left: 10px; } .main-quest { background-color: var(--epic-purple); } .daily-quest { background-color: var(--quest-blue); } .skill-quest { background-color: var(--rare-green); } .event-quest { background-color: var(--legendary-orange); color: #000; } .quest-rewards { display: flex; } .reward { margin-left: 10px; font-size: 0.8rem; background-color: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--common-gray); } .quest-description { margin: 10px 0; line-height: 1.5; } .quest-objectives { margin-top: 15px; } .objective { display: flex; align-items: center; margin-bottom: 8px; padding-left: 25px; position: relative; } .objective:before { content: "◻"; position: absolute; left: 5px; color: var(--common-gray); } .objective.completed:before { content: "✓"; color: var(--rare-green); } /* 技能树样式 */ .skill-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .skill-card { background-color: rgba(32, 38, 58, 0.8); border: 2px solid var(--common-gray); border-radius: 8px; padding: 15px; transition: all 0.3s; } .skill-card:hover { border-color: var(--rare-green); box-shadow: 0 0 15px rgba(28, 200, 138, 0.3); } .skill-name { font-weight: bold; color: white; margin-bottom: 5px; display: flex; justify-content: space-between; } .skill-level { color: var(--legendary-orange); } .skill-description { font-size: 0.9rem; color: rgba(255,255,255,0.7); } .cooldown { margin-top: 10px; font-size: 0.8rem; color: var(--mana-blue); } /* 游戏底部区域 */ .rpg-footer { text-align: center; padding: 20px; background-color: rgba(0,0,0,0.5); border-top: 2px solid var(--epic-purple); } .save-button { background: linear-gradient(135deg, var(--rare-green), #17a673); color: white; border: none; padding: 12px 25px; font-size: 1.1rem; font-weight: bold; border-radius: 50px; cursor: pointer; box-shadow: 0 5px 15px rgba(28, 200, 138, 0.4); transition: all 0.3s; } .save-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(28, 200, 138, 0.6); } /* 响应式设计 */ @media (max-width: 768px) { .character-status { grid-template-columns: repeat(2, 1fr); } .rpg-title { font-size: 1.5rem; } .skill-tree { grid-template-columns: 1fr; } } </style> </head> <body> <div class="rpg-container"> <div class="rpg-header"> <h1 class="rpg-title">高三勇者大冒险</h1> <p class="rpg-subtitle">终极备考RPG指南 · 2025届黄金版</p> </div> <div class="character-status"> <div class="status-bar"> <span class="status-label">生命值</span> <span class="status-value health">❤️ 85/100</span> </div> <div class="status-bar"> <span class="status-label">专注力</span> <span class="status-value mana">🔵 70/100</span> </div> <div class="status-bar"> <span class="status-label">耐力</span> <span class="status-value stamina">🟡 90/100</span> </div> <div class="status-bar"> <span class="status-label">等级</span> <span class="status-value level">⭐ Lv.5</span> </div> </div> <div class="quest-log"> <h2 class="chapter-title">第一章: 新手村准备</h2> <div class="quest-card"> <div class="quest-header"> <span class="quest-name">装备你的武器库 <span class="quest-type main-quest">主线任务</span> </span> <div class="quest-rewards"> <span class="reward">EXP +200</span> <span class="reward">金币 +500</span> </div> </div> <div class="quest-description"> 收集并整理你的学习装备:五科笔记本、错题本、历年真题集、彩色标记笔。记得定期维护你的装备! </div> <div class="quest-objectives"> <div class="objective completed">购买各科笔记本</div> <div class="objective completed">准备错题本系统</div> <div class="objective">收集近5年真题</div> <div class="objective">建立文具补给包</div> </div> </div> <h2 class="chapter-title">第二章: 每日修行</h2> <div class="quest-card"> <div class="quest-header"> <span class="quest-name">晨读的智慧 <span class="quest-type daily-quest">每日任务</span> </span> <div class="quest继续完成代码
05-31
<template> <div style=" display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: #fff; "> <el-dialog :title="dialogMode === 'create' ? '新建' : dialogMode === 'edit' ? '修改' : '查看'" :visible.sync="dialogVisible" :modal-append-to-body="true" append-to-body :close-on-click-modal="false" class="fixed-dialog" width="60%"> <el-form label-width="80px" ref="formRef" :model="currentForm"> <div class="formBorder"> <el-row :gutter="10"> <el-col :span="6"> <el-form-item size="mini" label="项目名称"> <el-input v-model="currentForm.projectName" clearable style="width:100%" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item size="mini" label="项目编号"> <el-input v-model="currentForm.projectCode" clearable style="width:100%" size="mini"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item size="mini" label="项目周期"> <el-date-picker v-model="projectDate" range-separator="→" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期" type="daterange" size="mini" style="width: 100%;" unlink-panels value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="负责人" size="mini" style="width: fit-content;"> <el-input v-model="currentForm.projectUser" clearable style="width:100%" size="mini"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="项目概述"> <el-input v-model="currentForm.remark" :rows="2"></el-input> </el-form-item> </el-col> </el-row> </div> <div class="formBorder2"> <el-container style="height: 100%;"> <el-header> <el-row :gutter="10" type="flex"> <el-col :span="5"><el-select v-model="MaintenanceUnit" placeholder="请选择管养单位" size="mini" clearable> <el-option v-for="item in MaintenanceUnitoptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-col> <el-col :span="5"><el-select v-model="routeCode" placeholder="请选择路线编号" size="mini" clearable> <el-option v-for="item in routeCodeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-col> <el-col :span="5"><el-input v-model="formSearch" placeholder="请输入边坡编号或名称" size="mini" clearable> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input></el-col> <el-col :span="5"><el-select v-model="evaluateLevel" placeholder="请选择技术状态等级" size="mini" clearable> <el-option v-for="item in evaluateLeveloptions" :key="item.value" :label="item.label" :value="item.value" filterable></el-option></el-select></el-col> <el-col :span="2" :offset="2"><el-button type="primary" size="mini" style="width:100%" icon="el-icon-search" @click="searchForm">搜索</el-button></el-col> </el-row> </el-header> <el-main> <el-table style="width: 100%; overflow-y: auto;" border :data='formTabledata' :header-row-style="{ height: '40px' }" :header-cell-style="{ padding: '0', height: '40px', lineHeight: '40px', textAlign: 'center' }" class="scrollable-table" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange" :model="sideSlopeDetailList"> <el-table-column type="selection"></el-table-column> <el-table-column label="管养单位" prop="maintenanceCompanyName" width="290"></el-table-column> <el-table-column label="路线编号" prop="routeCode" width="100"></el-table-column> <el-table-column label="边坡编号" prop="sideSlopeCode" width="240"></el-table-column> <el-table-column label="边坡名称" prop="sideSlopeName" width="267"></el-table-column> <el-table-column label="技术状态等级" width="110"> <template slot-scope="scope"> {{ mapEvaluateLevel(scope.row.evaluateLevel) }} </template></el-table-column> </el-table> </el-main> <el-footer> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next" :current-page="pageParams.pageNo" :total="total"> </el-pagination> </el-footer> </el-container> </div> </el-form> <!-- 弹窗底部按钮 --> <div slot="footer" class="dialog-footer" v-if="dialogMode === 'create' || dialogMode === 'edit'"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </div> </el-dialog> <el-container style="height: 100%;"> <el-header> <el-row :gutter="10" type="flex"> <el-col :span="11"> <el-col :span="6"><el-input v-model="Ceshibianhao" placeholder="项目名称" size="mini"></el-input></el-col> <el-col :span="6"><el-select v-model="selectStatus" placeholder="项目状态" size="mini" clearable> <el-option v-for="item in StatusOptions" :key="item.value" :label="item.label" :value="item.value" filterable></el-option> </el-select></el-col> <el-col :span="11"><el-date-picker v-model="searchProjectDate" range-separator="→" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期" type="daterange" size="mini" style="width: 100%;"> </el-date-picker> </el-col> <el-col :span="1"><el-button type="primary" size="mini">查询</el-button></el-col> </el-col> <el-col :span="1" :offset="1"><el-button type="success" size="mini" style="width:100%" @click="openCreateDialog">新建</el-button></el-col> </el-row> </el-header> <el-main> <el-table :data="tableData" border style="width: 100%;" :main-height="400" :header-row-style="() => { return 'line-height:15px'; }" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"> <el-table-column label="序号" type="index" width="120"></el-table-column> <el-table-column label="项目名称" width="250"></el-table-column> <el-table-column label="项目编号" width="150"></el-table-column> <el-table-column label="项目周期" width="250"></el-table-column> <el-table-column label="项目状态" width="200"></el-table-column> <el-table-column label="边坡总数" width="150"></el-table-column> <el-table-column label="已完成边坡数" width="194"></el-table-column> <el-table-column label="完成率" width="150"></el-table-column> <el-table-column label="操作" width="200"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> <el-button type="text" size="small">删除</el-button> </template> </el-table-column> </el-table> </el-main> <el-footer> <!-- 分页 --> <div class="pagination" style="margin-top:20px;text-align:center;"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total,prev, sizes, pager, next,jumper" :current-page.sync="pageParams.pageNo" :page-size="pageParams.pageSize" :page-sizes="[10, 40, 60, 100]" :total="pageParams.total"> </el-pagination> </div> </el-footer> </el-container> </div> </template> <script> import { mapCfg } from "@/utils"; import { getPeriodicInspectionPageList, addPeriodicInspection, modifyPeriodicInspection, deletePeriodicInspection, getPeriodicInspectionSideSlopePageList, completePeriodicInspection } from '../../api/testProject'; export default { name: "_Blank", maxins: [], data() { return { Ceshibianhao: '', xiangmuzhuangtai: '', total: 0, pageParams: { pageNo: 1, pageSize: 10, }, dialogpageParams: { pageNo: 1, pageSize: 20 }, tableSelection: [], StatusOptions: [], selectStatus: [], tableData: [], MaintenanceUnitoptions: [], routeCodeOptions: [], checkList: {}, // 页面查询条件专用 searchProjectDate: [], // 弹窗表单专用 dialogProjectDate: [], dialogMode: "create", dialogVisible: false, projectName: '',//项目名称 projectCode: '',//项目编码 projectManager: '',//项目负责人 projectDescription: '',//项目概述 formLevellist: '', formTabledata: [], orgId: '', routeCode: '',//路线 evaluateLeveloptions: [],//技术等级状态 evaluateLevel: '', formSearch: '',////搜索数据 filterForm: { MaintenanceUnit: '', routeCode: '' }, MaintenanceUnit: '',//管养单位 //表单数据 currentForm: { projectCode: '', projectName: '', projectStartDate: '', projectEndDate: '', projectUser: '', remark: '', sideSlopeDetailList: [], }, sideSlopeDetailList: [], } }, computed: { projectDate: { get() { return this.dialogProjectDate; }, set(value) { this.dialogProjectDate = value; if (value && value.length === 2) { this.currentForm.projectStartDate = value[0]; this.currentForm.projectEndDate = value[1]; } } } }, async created() { await this.getEvaluateLevel(); await this.loadAllOptions(); // 先加载所有选项 this.LoadListData(); // 再加载表格数据 this.getStatus(); this.loadTableData(); }, methods: { async loadAllOptions() { // 请求所有管养单位和路线编号(分页) const params = { orgId: '', routeCode: this.filterForm.routeCode, evaluateLevel: '', SearchKey: '', sideSlopeName: '', pageSize: 2500, pageNo: this.pageParams.pageNo, maintenanceCompanyName: this.filterForm.maintenanceCompanyName }; const res = await getPeriodicInspectionSideSlopePageList(params); // 处理管养单位选项(去重) const maintenanceCompanies = res.entities.map(item => ({ value: item.maintenanceCompanyId, label: item.maintenanceCompanyName })); this.MaintenanceUnitoptions = maintenanceCompanies.reduce((acc, current) => { const exists = acc.some(item => item.value === current.value); if (!exists) acc.push(current); return acc; }, []); // 处理路线编号选项(去重) const routeCodes = res.entities.map(item => item.routeCode); this.routeCodeOptions = [...new Set(routeCodes)].map(code => ({ value: code, label: code })); }, handleSelectionChange(val) { this.tableSelection = val; console.log(this.tableSelection); }, searchForm() { this.filterForm = { maintenanceCompanyName: this.MaintenanceUnit, routeCode: this.routeCode, searchKey: this.sideSlopeCode, }; this.pageParams.pageNo = 1; this.LoadListData(); }, // 映射技术状态等级 mapEvaluateLevel(level) { const option = this.evaluateLeveloptions.find(item => item.value === level); return option ? option.label : level; }, async LoadListData() { const params = { orgId: '', routeCode: this.filterForm.routeCode, evaluateLevel: '', SearchKey: '', sideSlopeName: '', pageSize: this.pageParams.pageSize, pageNo: this.pageParams.pageNo, maintenanceCompanyName: this.filterForm.maintenanceCompanyName } const res = await getPeriodicInspectionSideSlopePageList(params); this.formTabledata = res.entities.map(item => { return { ...item, } }); this.formTabledata = res.entities; this.total = res.entityCount; }, /**分页 */ handleSizeChange(val) { this.pageParams.pageNo = 1; this.pageParams.pageSize = val; this.LoadListData() }, handleCurrentChange(val) { this.pageParams.pageNo = val; this.LoadListData() }, //评定等级 async getEvaluateLevel() { const levelList = await mapCfg('Inspection.Regular.RegularEvaluateLevel')(); this.evaluateLeveloptions = levelList.map(item => ({ value: item.key, label: item.value, })) }, //项目状态字典 async getStatus() { try { const dictList = await mapCfg("Inspection.Periodic.PeriodicInspectionStatus")(); this.StatusOptions = dictList.map(item => ({ value: item.key, label: item.value })); } catch (error) { console.error('获取失败', error); } }, openCreateDialog() { this.dialogMode = 'create'; this.dialogVisible = true; }, async loadTableData() { // const periodicId = '' // const res = await getPeriodicInspectionPageList({ periodicId }); // console.log(res) }, async submitForm() { this.$refs.formRef.validate(async (valid) => { if (valid) { this.submitting = true; try { // 检查边坡选择 if (this.tableSelection.length === 0) { this.$message.warning('请至少选择一个边坡'); return; } // 准备参数 const params = { projectCode: this.currentForm.projectCode, projectName: this.currentForm.projectName, projectStartDate: this.currentForm.projectStartDate, projectEndDate: this.currentForm.projectEndDate, projectUser: this.currentForm.projectUser, remark: this.currentForm.remark, sideSlopeDetailList: this.tableSelection.map(item => ({ sideSlopeUniqueCode: item.sideSlopeCode, // 使用边坡编号作为唯一标识 last_evaluate_level: item.evaluateLevel })) }; console.log(params) // 调用接口 let res; if (this.dialogMode === 'create') { res = await addPeriodicInspection(params); } else if (this.dialogMode === 'edit') { res = await modifyPeriodicInspection(params); } // 处理响应 if (res && res.success) { this.$message.success('操作成功'); this.dialogVisible = false; this.loadTableData(); // 刷新列表 } else { this.$message.error(res.message || '操作失败'); } } catch (error) { console.error('提交失败', error); this.$message.error('提交失败'); } finally { this.submitting = false; } } }); }, } } </script> <style lang="scss" scoped> .el-header { color: #333; text-align: center; line-height: 60px; } .el-main { color: #333; text-align: center; line-height: 100%; padding-left: 5px; padding-top: 0px; } .formBorder { position: relative; /* 添加相对定位 */ border: thin dotted black; padding: 10px; /* 添加上边框文字效果 */ &::before { content: "项目信息"; /* 要显示的文字 */ position: absolute; top: -10px; /* 向上移动一半高度 */ left: 40px; /* 距离左边距 */ background-color: #fff; /* 背景色与页面一致 */ padding: 0 10px; font-size: 14px; color: #606266; } } .formBorder2 { margin-top: 15px; position: relative; /* 添加相对定位 */ border: thin dotted black; padding: 10px; /* 添加上边框文字效果 */ &::before { content: "待检边坡"; /* 要显示的文字 */ position: absolute; top: -10px; /* 向上移动一半高度 */ left: 40px; /* 距离左边距 */ background-color: #fff; /* 背景色与页面一致 */ padding: 0 10px; font-size: 14px; color: #606266; } .el-main { display: flex; } } .dialog-footer { padding: 10px 20px; border-top: 1px solid #ebeef5; text-align: center; } .formBorder2::v-deep .el-main { display: flex; overflow-y: auto; height: 100% !important; } </style> 封装dialog组件 命名为sideSlopeDialog 并给我两个文件的所有代码
最新发布
08-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值