<template>
<div>
<el-menu
:default-active="currentPath"
router
mode="horizontal"
background-color="#fff"
text-color="#222"
active-text-color="red"
style="min-width: 1300px">
<!-- <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name" style="z-index: 1; background: rgba(red, green, blue, 0.1);" >
{{ item.navItem }}
</el-menu-item> -->
<a href="/index" class="indexCss">主页</a>
<a href="/library" class="libraryCss">场景库</a>
<a href="/test" class="testCss">仿真测试</a>
<a href="/accidentAnalysis" class="accidentAnalysisCss">事故分析</a>
<span class="mainTileCss">自动驾驶安全测试平台</span>
</el-menu>
</div>
</template>
<script>
export default {
name: 'NavMenu',
data () {
return {
navList: [
{name: '/index', navItem: '主页'},
{name: '/library', navItem: '场景库'},
{name: '/test', navItem: '仿真测试'},
{name: '/accidentAnalysis', navItem: '事故分析'}
],
keywords: ''
}
},
computed: {
hoverBackground () {
return '#ffd04b'
},
currentPath () {
var x = this.$route.path.indexOf('/', 1)
if (x !== -1) {
return this.$route.path.substring(0, x)
} else {
return this.$route.path
}
}
},
mounted () {
document.getElementsByClassName('indexCss').style.textColor = 'rgba(255, 141, 26, 1)'
}
}
</script>
<style scoped>
a{
text-decoration: none;
}
span {
pointer-events: none;
}
.indexCss{
position: absolute;
z-index: 1;
left: 1194px;
top: 73px;
width: 90px;
height: 44px;
opacity: 1;
/** 文本1 */
font-size: 36px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
}
.indexCss:hover{
color: rgba(255, 141, 26, 1);
}
.libraryCss{
position: absolute;
z-index: 1;
left: 1455px;
top: 73px;
width: 150px;
height: 44px;
opacity: 1;
/** 文本1 */
font-size: 36px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
}
.libraryCss:hover{
color: rgba(255, 141, 26, 1);
}
.testCss{
position: absolute;
z-index: 1;
left: 1742px;
top: 73px;
width: 200px;
height: 44px;
opacity: 1;
/** 文本1 */
font-size: 36px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
}
.testCss:hover{
color: rgba(255, 141, 26, 1);
}
.accidentAnalysisCss{
position: absolute;
z-index: 1;
left: 2035px;
top: 73px;
width: 200px;
height: 44px;
opacity: 1;
/** 文本1 */
font-size: 36px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
}
.accidentAnalysisCss:hover{
color: rgba(255, 141, 26, 1);
}
.mainTileCss{
position: absolute;
z-index: 1;
left: 132px;
top: 73px;
width: 524px;
height: 71px;
opacity: 1;
/** 文本1 */
font-size: 40px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
}
</style>
<template>
<div class="mainDiv">
<div class="topDiv" >
<img src="/svl_web/second_try_wj/Autonomous-driving-safety-test-demonstration-platform/wj-vue/src/components/photos/libray_1.png" alt="">
</div>
<div class="chosePage">
<div class="ScenarioFilter abc">
<el-card class="elCardStyle">
<div style="width: 1052px; height: 404px;left: 394px;top: 150px;margin: 150px auto auto 394px;">
<h1 class="title"><b>筛选条件</b></h1>
<div style="height: 94px;"></div>
<div class="optionStyle">
<span style="text-align: left;height: 38px;width: 173px;font-size: 36px;font-family:HarmonyOS Sans SC;">
车道类型:
</span>
<span style="margin-left: 180px;margin-right: 20px;">
<input type="checkbox" id="100" value="100" v-model="drivewayTypes"/>
<label style="width: 119px;height: 38px; margin-left: 15px;" for="单车道">单车道</label>
</span>
<span style="margin-left: 60px;margin-right: 20px;">
<input type="checkbox" id="010" value="10" v-model="drivewayTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="多车道">多车道</label>
</span>
<span style="margin-left: 60px;margin-right: 20px;">
<input type="checkbox" id="001" value="1" v-model="drivewayTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="交叉路口">交叉路口</label>
</span>
</div>
<div class="optionStyle">
<span style="text-align: left;height: 38px;width: 173px;font-size: 36px;font-family:HarmonyOS Sans SC;">
规划任务:
</span>
<span style="margin-left: 180px;margin-right: 20px;">
<input type="checkbox" id="100" value="100" v-model="taskPlannings" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="直行">直行</label>
</span>
<span style="margin-left: 74px;margin-right: 20px;">
<input type="checkbox" id="010" value="10" v-model="taskPlannings" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="转弯">转弯</label>
</span>
<span style="margin-left: 77px;margin-right: 20px;">
<input type="checkbox" id="001" value="1" v-model="taskPlannings" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="变道">变道</label>
</span>
</div>
<div class="optionStyle">
<span style="text-align: left;height: 38px;width: 173px;font-size: 36px;font-family:HarmonyOS Sans SC;">
障碍物类型:
</span>
<span style="margin-left: 145px;margin-right: 20px;">
<input type="checkbox" id="1000" value="1000" v-model="obstacleTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="行人">行人</label>
</span>
<span style="margin-left: 71px;margin-right: 20px;">
<input type="checkbox" id="0100" value="100" v-model="obstacleTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="路障">路障</label>
</span>
<span style="margin-left: 77px;margin-right: 20px;">
<input type="checkbox" id="0010" value="10" v-model="obstacleTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="变道">变道</label>
</span>
<span style="margin-left: 60px;margin-right: 20px;">
<input type="checkbox" id="0001" value="1" v-model="obstacleTypes" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="卡车">卡车</label>
</span>
</div>
<div class="optionStyle">
<span style="text-align: left;height: 38px;width: 173px;font-size: 36px;font-family:HarmonyOS Sans SC;">
障碍物数量:
</span>
<span style="margin-left: 145px;margin-right: 20px;">
<input type="checkbox" id="1000" value="1000" v-model="obstacleNumbers" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="<10"><10</label>
</span>
<span style="margin-left: 74px;margin-right: 20px;">
<input type="checkbox" id="0100" value="100" v-model="obstacleNumbers" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="[10, 20)">[10, 20)</label>
</span>
<span style="margin-left: 56px;margin-right: 20px;">
<input type="checkbox" id="0010" value="10" v-model="obstacleNumbers" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for="[20, 30)">[20, 30)</label>
</span>
<span style="margin-left: 37px;margin-right: 20px;">
<input type="checkbox" id="0001" value="1" v-model="obstacleNumbers" />
<label style="width: 119px;height: 38px; margin-left: 15px;" for=">=30">>=30</label>
</span>
</div>
</div>
<button @click="handleSelect" class="handleSelectCss" >确认</button>
</el-card>
<div class="crossRoad2"></div>
<div class="crossRoad1"></div>
</div>
</div>
<div class="img3Css"></div>
<!-- <img src="https://user-images.githubusercontent.com/107924376/220279312-2080eb75-a856-42c3-8437-bd3af3b030ab.png" alt="" class="img3Css"> -->
<div class="bottomCss">
<div class="bottomdiv"><a href="#" class="removebig">了解产品</a><a href="#" class="removebig">支持与服务</a><a href="#" class="removebig">关于我们</a><a href="#" class="removebig">资讯动态</a><a href="#" class="removebig">战略伙伴</a><a href="#" class="removebig">媒体</a></div>
<br><br>
<div class="bottomdiv"><a href="#" class="remove">金融设备</a><a href="#" class="remove">支持</a><a href="#" class="remove">关于我们</a><a href="#" class="remove">我们的活动</a><a href="#" class="remove">可买技术</a><a href="#" class="remove">genshionimapct</a></div>
<div class="bottomdiv"><a href="#" class="remove">金融设备</a><a href="#" class="remove">品牌资料包</a><a href="#" class="remove">联系我们</a><a href="#" class="remove">我们的论坛</a><a href="#" class="remove">哗啦啦</a><a href="#" class="remove">鹅鹅鹅</a></div>
<div class="bottomdiv"><a href="#" class="remove">桌面设备</a><a href="#" class="remove">SDK&文档</a><a href="#" class="remove">代理商加盟</a><a href="#" class="remove"></a><a href="#" class="remove">罗德岛</a><a href="#" class="remove">中国互联网</a></div>
<div class="bottomdiv"><a href="#" class="remove">零售</a><a href="#" class="remove">服务网点</a><a href="#" class="remove"></a><a href="#" class="remove"></a><a href="#" class="remove">夹带私货</a><a href="#" class="remove">中国工商协会</a></div>
<div class="bottomdiv"><a href="#" class="remove">配件</a><a href="#" class="remove">售后查询</a><a href="#" class="remove"></a><a href="#" class="remove"></a><a href="#" class="remove">原神</a><a href="#" class="remove">扫码支付</a></div>
<div style="text-align: left; margin-left: 400px;">
<span style="left: 10px; font-size: 20px;">联系方式：咨询 </span>
<a href="#" style="color: orange; margin: 10px auto; text-decoration: none; font-size: 20px;">在线客服</a>
<span style="font-size: 20px;">或致电</span>
<a href="#" style="color: orange; margin: 10px auto; text-decoration: none; font-size: 20px;">400-400-4000</a>
<span style=" margin-left: 5px;text-decoration: none; font-size: 20px;">（周一至周日 9:00-21:00）</span>
</div>
<hr>
<div style="text-align: left; margin-left: 400px;">
<span style="left: 10px; font-size: 20px;">2023 copyright@ 版权所有 </span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ScenarioFilter',
data () {
return {
drivewayTypes: [],
taskPlannings: [],
obstacleTypes: [],
obstacleNumbers: []
}
},
methods: {
handleSelect () {
var s1 = 0
var s2 = 0
var s3 = 0
var s4 = 0
for (var i = 0; i < this.drivewayTypes.length; i++) {
s1 += Number(this.drivewayTypes[i])
}
this.did = s1
for (var j = 0; j < this.taskPlannings.length; j++) {
s2 += Number(this.taskPlannings[j])
}
this.tid = s2
for (var k = 0; k < this.obstacleTypes.length; k++) {
s3 += Number(this.obstacleTypes[k])
}
this.oid = s3
for (var m = 0; m < this.obstacleNumbers.length; m++) {
s4 += Number(this.obstacleNumbers[m])
}
this.nid = s4
this.$emit('indexSelect')
}
}
}
</script>
<style scoped>
.mainDiv{
/* width: 2560px;
height: 25060px;
margin: 1100px auto; */
background-color: white;
}
.topDiv{
position: absolute;
z-index: 0;
left: 0px;
top: 0px;
width: 2560px;
height: 880px;
opacity: 1;
background-image: url(https://user-images.githubusercontent.com/107924376/220128832-02b7ae11-f35e-4c86-b642-51f534e2569c.png);
background-size: 2560px auto;
/* margin: 35px auto 0 auto; */
}
.elCardStyle{
text-align: center;
width: 2560px;
height:704px;
margin: 293px 0px 594px 0px;
background: rgba(237, 237, 240, 1);
display: inline-block;
border: 1px solid rgba(229, 229, 229, 1);
}
.crossRoad1{
position: absolute;
left: 1867px;
top: 88px;
width: 597px;
height: 782px;
opacity: 1;
/* display: inline-block; */
background: url(https://images.unsplash.com/photo-1517586979036-b7d1e86b3345?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjAzNTV8MHwxfHNlYXJjaHwxNHx8c3RyZWV0fGVufDB8fHx8MTY3NTIzNDAwOQ&ixlib=rb-4.0.3&q=80&w=1080);
}
.crossRoad2{
position: absolute;
left: 1467px;
top: 400px;
width: 597px;
height: 782px;
opacity: 1;
/* display: inline-block; */
background: url(https://images.unsplash.com/photo-1513171920216-2640b288471b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjAzNTV8MHwxfHNlYXJjaHw0MHx8c3RyZWV0fGVufDB8fHx8MTY3NTIzNDA4NA&ixlib=rb-4.0.3&q=80&w=1080);
}
.ScenarioFilter {
position: absolute;
left: 0px;
top: 880px;
width: 2560px;
height: 1591px;
opacity: 1;
}
.title{
font-size: 60px;
font-weight: 400;
font-family: 金山云技术体;
letter-spacing: 0px;
line-height: 0px;
color: rgba(38, 39, 41, 1);
text-align: left;
vertical-align: top;
}
.optionStyle{
width: 1015px;
height: 74px;
text-align: left;
}
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 12px;
width: 18px;
height: 18px;
position: relative;
}
input[type=checkbox]:after {
/* position: absolute; */
width: 22px;
height: 20px;
top: 0;
content: " ";
background-color: white;
color: rgba(255, 141, 26, 1);
display: inline-block;
visibility: visible;
padding: 1px 1px;
border-radius: 0px;
}
input[type=checkbox]:checked:after {
content: "▀";
text-align: left;
font-size: 32px;
}
.handleSelectCss{
/* display: inline-block; */
position: absolute;
left: 743px;
top: 449px;
width: 131px;
height: 56px;
/* opacity: 1; */
/* border-radius: 2px; */
border-color: white;
margin: 0px 0px 0px 0px;
padding: auto;
background: rgba(255, 141, 26, 1);
}
.img3Css{
position: absolute;
text-align: center;
top:2400px;
left: 0px;
width: 2560px;
height: 2000px;
background: url(https://user-images.githubusercontent.com/107924376/220279312-2080eb75-a856-42c3-8437-bd3af3b030ab.png);
}
.bottomCss{
position: absolute;
top: 5600px;
width: 2560px;
height: 430px;
text-align: center;
background-color: rgba(242, 242, 242, 1);
}
.bottomdiv{
width: 2560px;
height: 50px;
}
.removebig{
text-decoration: none;
display: inline-block;
width: 250px;
margin-left: 90px;
color: black;
font-weight: 600;
font-size: 30px;
}
.remove{
text-decoration: none;
display: inline-block;
width: 250px;
margin-left: 90px;
color: black;
font-size: 20px;
}
</style>
<template>
<div style="margin-top: 40px">
<div class="scenarios-area">
<el-row>
<el-col
v-for="scenario in scenarios"
:key="scenario.id"
:span="6"
>
<el-card :span="8" :body-style="{ padding: '0px' }" class="box-card" shadow="hover">
<video controls width="393px" :src="scenario.video" type="video/mp4"></video>
<div class = "head">
<router-link class="scenario-link" :to="{path:'library/scenarios',query:{id: scenario.id}}"> <span><span style="font-size: 48px"><strong>场景{{scenario.id}}</strong></span></span></router-link>
</div>
</el-card>
<br />
</el-col>
</el-row>
</div>
<div class="paginationClass">
<el-pagination
background="orange"
layout="total, prev, pager, next, jumper"
@current-change="handleCurrentChange"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'Scenarios',
data () {
return {
scenarios: [],
pageSize: 12,
total: 0
}
},
mounted: function () {
this.loadScenarios()
},
methods: {
loadScenarios () {
var _this = this
this.$axios.get('/scenarios/' + this.pageSize + '/1').then(resp => {
if (resp && resp.data.code === 200) {
_this.scenarios = resp.data.result.content
_this.total = resp.data.result.totalElements
}
})
},
handleCurrentChange (page) {
var _this = this
this.$axios.get('/scenarios/' + this.pageSize + '/' + page).then(resp => {
if (resp && resp.data.code === 200) {
_this.scenarios = resp.data.result.content
_this.total = resp.data.result.totalElements
}
})
}
}
}
</script>
<style scoped>
.scenarios-area {
position: absolute;
width: 1904px;
height: 1px;
top: 1260px;
left: 198px;
margin-left: auto;
margin-right: auto;
}
.scenario-link {
text-decoration: none;
color: rgba(255, 141, 26, 1);
}
.scenario-link:hover {
color: #409EFF;
}
.head{
height: 50px;
}
.box-card {
width: 393px;
height: 300px;
margin-bottom: 379px;
}
.button-style {
margin-top: 24px;
}
.paginationClass {
position: absolute;
left: 1009px;
top: 3600px;
width: 447px;
height: 1px;
text-align: center;
}
.paginationClass:hover{
color: rgba(255, 141, 26, 1);
}
.el-pagination{
color: orange;
}
</style>
//2023/2/27/
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import NavMenu from '@/components/common/NavMenu'
export default {
name: 'App',
components: {NavMenu}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
background-image: url(https://img-blog.csdnimg.cn/cd7246bdf7d24c5e94f309afad1fab4b.jpeg);
background-repeat: no-repeat;
background-size: 100% 100%;
/*margin-top: 10px;*/
}
*{
margin:0;
padding:0;
border:0;
box-sizing: border-box;
}
body{
margin: 0 auto !important;
}
</style>
<template>
<div>
<nav-menu class="nav-menu"></nav-menu>
<router-view/>
</div>
</template>
<script>
import NavMenu from '@/components/common/NavMenu'
export default {
components: {NavMenu}
}
</script>
<style>
.nav-menu {
/*margin-bottom: 40px;*/
box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
}
*{
margin:0;
padding:0;
border:0;
box-sizing: border-box;
}
body{
margin: 0 auto !important;
}
</style>
<template>
<!-- <div>
<el-menu
:default-active="currentPath"
router
mode="horizontal"
background-color="#fff"
text-color="#222"
active-text-color="red"
style="min-width: 1300px">
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
{{ item.navItem }}
</el-menu-item>
<span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">自动驾驶安全测试平台</span>
</el-menu>
</div> -->
<div class="index wrapper">
<h2>自动驾驶安全平台</h2>
</div>
</template>
<script>
export default {
name: 'NavMenu',
data () {
return {
navList: [
{name: '/index', navItem: '主页'},
{name: '/library', navItem: '场景库'},
{name: '/test', navItem: '仿真测试'},
{name: '/accidentAnalysis', navItem: '事故分析'}
],
keywords: ''
}
},
computed: {
hoverBackground () {
return '#ffd04b'
},
currentPath () {
var x = this.$route.path.indexOf('/', 1)
if (x !== -1) {
return this.$route.path.substring(0, x)
} else {
return this.$route.path
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
list-style: none;
}
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.wrapper{
width: auto;
margin: 0 auto !important;
}
body{
margin: 0 auto 0px !important;
}
.home{
margin: 0 auto !important;
padding: 0;
}
.index{
height: 67px;
/* background-color: pink; */
}
.index h2{
line-height: 67px;
font-style: italic;
background-image: linear-gradient(-135deg, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0);
background-image: -ms-linear-gradient(-135deg, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0);
-webkit-text-fill-color: rgba(0,0,0,0);
-webkit-background-clip: text;
background-size: 10% 10%;
animation: masked-animation 3s infinite linear;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: masked-animation;
}
</style>
<template>
<!-- <div class="footer">
<div style="border-top:1px #FFDAB9 solid;">
<p class="alt" style="color:#000; line-height:0"> 版权所有：FDU
</p>
</div>
</div> -->
<div>
<div class="indexpage">
<div class="left">
这是左边
</div>
<div class="right">
<div class="introduction">
<h2>
项目介绍
</h2>
<p>自动驾驶是一个研究领域，里面蕴含着复杂的单学科甚至跨学科技术。当自动驾驶被运用在汽车等交通载体，就会产生许多安全问题，这也是安全的伴生性体现。自动驾驶安全，同样作为一个研究领域，主要涉及Safety和Security两个方面。近年来，受到广泛关注，包括安全顶会NDSS2022的Automotive and Autonomous Vehicle Security (AutoSec) Workshop</p>
</div>
<a href="/library" class="card">
<img src="https://img1.baidu.com/it/u=4198926913,1017907452&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576" alt="Card Image" width="250px" height="200px">
<div class="card-info">
<h2>场景库</h2>
<p>Card description goes here.</p>
</div>
</a>
<a href="/test" class="card">
<img src="https://img1.baidu.com/it/u=1564904049,4029887644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Card Image" width="300px" height="200px">
<div class="card-info">
<h2>仿真测试</h2>
<p>Card description goes here.</p>
</div>
</a>
<a href="/accidentAnalysis" class="card">
<img src="https://img0.baidu.com/it/u=1983969966,970150&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="Card Image" width="300px" height="200px">
<div class="card-info">
<h2>事故分析</h2>
<p >Card description goes here.</p>
</div>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Footer'
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
font-family: '微软雅黑', Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
font-size: 12px;
width: 1200px;
}
div {
font-size: 12px;
}
span {
font-size: 12px;
}
.indexpage{
margin: 0 auto;
/* background-color: greenyellow; */
/* background-image: url(https://img0.baidu.com/it/u=2075265399,2772318687&fm=253&fmt=auto&app=120&f=JPEG?w=700&h=438); */
/* width: 1200px; */
}
.indexpage .left{
float: left;
width: 172px;
height: 527px;
background-image: url(https://www.mihoyo.com/_nuxt/img/line.a3e37b6.png);
}
.indexpage .right{
float: left;
overflow: hidden;
}
.right a{
display: block;
float: left;
width: 250px;
height: 200px;
box-shadow: inset;
}
.introduction{
padding: 50px 30px;
height: 320px;
font-size: 20px;
background-image: url(https://img1.baidu.com/it/u=3909727114,516689982&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500);
color: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.indexpage h2{
font-size: 24px;
color: white;
}
.indexpage p{
width: 690px;
text-align: left;
text-indent: 2em;
}
.card {
position: relative;
width: 600px;
height: 200px;
overflow: hidden;
}
.card:hover img {
transform: scale(1.2);
}
.card img {
transition: transform 0.5s ease;
}
.card .card-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
opacity: 0;
transition: opacity 0.5s ease;
}
.card:hover .card-info {
opacity: 1;
}
.card .card-info h2 {
margin: 0;
font-size: 24px;
}
.card .card-info p {
margin: 10px 0 0;
}
.card-info h2:hover{
color: orange;
}
.card {
/* background-color: white; */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
border-radius: 10px;
/* padding: 20px; */
/* position: relative; */
}
/* .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: -1;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
} */
</style>
2023/2/28
<template>
<!-- <div>
<el-menu
:default-active="currentPath"
router
mode="horizontal"
background-color="#fff"
text-color="#222"
active-text-color="red"
style="min-width: 1300px">
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
{{ item.navItem }}
</el-menu-item>
<span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">自动驾驶安全测试平台</span>
</el-menu>
</div> -->
<div class="index wrapper">
<div>
<h2>自动驾驶安全平台</h2>
<li><a href="/accidentAnalysis">事故分析</a></li>
<li><a href="/test">仿真测试</a></li>
<li><a href="/library">场景库</a></li>
<li><a href="/index">主页</a></li>
</div>
</div>
</template>
<script>
export default {
name: 'NavMenu',
data () {
return {
navList: [
{name: '/index', navItem: '主页'},
{name: '/library', navItem: '场景库'},
{name: '/test', navItem: '仿真测试'},
{name: '/accidentAnalysis', navItem: '事故分析'}
],
keywords: ''
}
},
computed: {
hoverBackground () {
return '#ffd04b'
},
currentPath () {
var x = this.$route.path.indexOf('/', 1)
if (x !== -1) {
return this.$route.path.substring(0, x)
} else {
return this.$route.path
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
list-style: none;
}
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.wrapper{
width: auto;
margin: 0 auto !important;
}
body{
margin: 0 auto 0px !important;
}
.home{
margin: 0 auto !important;
padding: 0;
}
.index{
height: 67px;
/* background-color: pink; */
}
.index div{
line-height: 67px;
margin: 0 auto;
font-style: italic;
background-image: linear-gradient(-135deg, #20ea5c,#23f4f4,#418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0);
/* background-image: -ms-linear-gradient(-135deg, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0); */
/* -webkit-text-fill-color: rgba(0,0,0,0); */
/* -webkit-background-clip: text; */
text-align: left;
background-size: 200% 200%;
box-shadow: 0 0 5px rgb(66 68 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite !important;
animation-duration: 10s !important;
animation-timing-function: ease !important;
animation-delay: 0s !important;
animation-iteration-count: infinite !important;
animation-direction: normal !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
animation-name: Gradient !important;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.index h2{
width: 500px;
display: inline-block;
margin-left: 10%;
}
.index li{
float: right;
display: inline-block;
margin: 0 60px;
font-size: 20px;
font-style: normal;
text-align: center;
}
.index li a{
color: #23ec5f;
font-weight: 600;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.index li a:hover{
color: rgb(41, 115, 225);
}
</style>
<template>
<el-container>
<el-header class="elheader">
<scenarioFilter @indexSelect="listByFilter" ref="scenarioFilter"></scenarioFilter>
</el-header>
<el-main>
<scenarios class="scenarios-area" ref="scenariosArea"></scenarios>
</el-main>
</el-container>
</template>
<script>
import ScenarioFilter from './ScenarioFilter'
import Scenarios from './Scenarios'
export default {
name: 'ScenarioIndex',
components: {ScenarioFilter, Scenarios},
methods: {
listByFilter () {
var _this = this
var did = this.$refs.scenarioFilter.did
var tid = this.$refs.scenarioFilter.tid
var oid = this.$refs.scenarioFilter.oid
var nid = this.$refs.scenarioFilter.nid
var size = this.$refs.scenariosArea.pageSize
var url = 'filter/' + did + '/' + tid + '/' + oid + '/' + nid + '/' + size + '/1' + '/scenarios'
this.$axios.get(url).then(resp => {
if (resp && resp.data.code === 200) {
_this.$refs.scenariosArea.scenarios = resp.data.result.content
_this.$refs.scenariosArea.total = resp.data.result.totalElements
_this.$refs.scenariosArea.did = did
_this.$refs.scenariosArea.tid = tid
_this.$refs.scenariosArea.oid = oid
_this.$refs.scenariosArea.nid = nid
_this.$refs.scenariosArea.r = 1
}
})
}
}
};
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.elheader{
height: auto !important;
/*background-color: greenyellow;*/
/* background-image: url(https://img0.baidu.com/it/u=2112674673,278331356&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=500); */
margin: 0 auto;
}
.scenarios-area {
/* width: 2000px; */
margin: 0 auto;
padding: 20px;
/* background-color: black; */
}
</style>
<template>
<div>
<el-card style="text-align: left;width: 990px;margin: 35px auto 0 auto">
<div>
<span style="font-size: 30px"><strong>{{scenario.name}}详细信息</strong></span>
<el-divider></el-divider>
<p><span style="font-size: 20px">{{scenario.intro}}</span></p>
<div><span style="font-size: 20px">车道类型:{{scenario.drivewayType.type}}</span> </div>
<div><span style="font-size: 20px">无人车规划任务:{{scenario.taskPlanning.task}}</span></div>
<div><span style="font-size: 20px">障碍物类型:{{scenario.obstacleType.type}}</span></div>
<div><span style="font-size: 20px">障碍物数量:{{scenario.num}}</span></div>
<video controls width="900" :src="scenario.video" type="video/mp4"></video>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'ScenarioIntro',
data () {
return {
scenario: ''
}
},
mounted () {
this.loadScenario()
},
methods: {
loadScenario () {
var _this = this
this.$axios.get('/scenarios/' + this.$route.query.id).then(resp => {
if (resp && resp.data.code === 200) {
_this.scenario = resp.data.result
// console.log(_this.scenario)
}
})
}
}
}
</script>
<style scoped>
@import "../../styles/markdown.css";
</style>
<template>
<div style="margin-top: 40px">
<div class="scenarios-area">
<el-row>
<el-col
v-for="scenario in scenarios"
:key="scenario.id"
:span="6"
>
<el-card :span="8" :body-style="{ padding: '0px' }" class="box-card" shadow="hover">
<video controls width="210" :src="scenario.video" type="video/mp4" class="cardvideo" ></video>
<div class = "head">
<router-link class="scenario-link" :to="{path:'library/scenarios',query:{id: scenario.id}}">
<li><span style="font-size: 20px; "><strong>场景{{scenario.id}}</strong></span></li>
</router-link>
</div>
</el-card>
</el-col>
</el-row>
</div>
<el-pagination
:background="isBackground"
layout="total, prev, pager, next, jumper"
@current-change="handleCurrentChange"
:page-size="pageSize"
:total="total" >
</el-pagination>
</div>
</template>
<script>
export default {
name: 'Scenarios',
data () {
return {
scenarios: [],
pageSize: 12,
total: 0,
r: 0, // 用于判断是否是筛选后的分页
did: 0,
tid: 0,
oid: 0,
nid: 0
}
},
mounted: function () {
this.loadScenarios()
},
methods: {
loadScenarios () {
var _this = this
this.$axios.get('/scenarios/' + this.pageSize + '/1').then(resp => {
if (resp && resp.data.code === 200) {
_this.scenarios = resp.data.result.content
_this.total = resp.data.result.totalElements
}
})
},
handleCurrentChange (page) {
var _this = this
if (_this.r === 0) {
this.$axios.get('/scenarios/' + this.pageSize + '/' + page).then(resp => {
if (resp && resp.data.code === 200) {
_this.scenarios = resp.data.result.content
_this.total = resp.data.result.totalElements
}
})
} else {
var url = 'filter/' + this.did + '/' + this.tid + '/' + this.oid + '/' + this.nid + '/' + this.pageSize + '/' + page + '/scenarios'
this.$axios.get(url).then(resp => {
if (resp && resp.data.code === 200) {
_this.scenarios = resp.data.result.content
_this.total = resp.data.result.totalElements
}
})
}
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
font-family: '微软雅黑', Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
div {
font-size: 12px;
}
span {
font-size: 12px;
}
.scenarios-area {
width: 1500px;/*修改下面那个盒子的大小 */
height: auto;
margin-left: auto;
margin-right: auto;
}
.box-card {
display: inline-block;
width: 240px;
height: 180px;
/* margin-top: 60px;
margin-left: 20px; */
margin: 60px 10px;
/* line-height: 67px; */
border-radius: 15px;
font-style: italic;
background-image: linear-gradient(-135deg, #20ea5c,#23f4f4,#4ac918, #d1b330, #14d3e0, #1d7cc5, #23d165, #1ebb33, #df119e, #d66e3d, #db2f69);
background-color: #fff;
-webkit-text-fill-color: rgba(0,0,0,0);
-webkit-background-clip: text;
box-shadow: 0 0 5px rgb(66 68 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite !important;
animation-duration: 10s !important;
animation-timing-function: ease !important;
animation-delay: 0s !important;
animation-iteration-count: infinite !important;
animation-direction: normal !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
animation-name: Gradient !important;
}
.head{
height: 20px;
margin: 0;
}
.scenario-link{
display: inline-block;
margin: 0;
}
.head li{
margin: 0;
height: 50px;
}
.button-style {
margin-top: 24px;
}
.cardvideo{
height: 150px;
}
</style>
<template>
<body>
<div class="home">
<el-container>
<el-main>
<about class="about" ref="about"></about>
</el-main>
</el-container>
</div>
</body>
</template>
<script>
import About from '@/components/common/About'
export default {
name: 'AppIndex',
components: {About}
}
</script>
<style scoped>
/* @import url(../../css/AppIndex.css); */
.starter {
width: 990px;
height: 2000px;
margin-left: auto;
margin-right: auto;
}
.home {
width: 990px;
/* height: 2000px; */
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background-color: blue;
}
</style>
<template>
<!-- <div>
<el-menu
:default-active="currentPath"
router
mode="horizontal"
background-color="#fff"
text-color="#222"
active-text-color="red"
style="min-width: 1300px">
<el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
{{ item.navItem }}
</el-menu-item>
<span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">自动驾驶安全测试平台</span>
</el-menu>
</div> -->
<div class="index wrapper">
<div>
<h2>自动驾驶安全平台</h2>
<li><a href="/accidentAnalysis">事故分析</a></li>
<li><a href="/test">仿真测试</a></li>
<li><a href="/library">场景库</a></li>
<li><a href="/index">主页</a></li>
</div>
</div>
</template>
<script>
export default {
name: 'NavMenu',
data () {
return {
navList: [
{name: '/index', navItem: '主页'},
{name: '/library', navItem: '场景库'},
{name: '/test', navItem: '仿真测试'},
{name: '/accidentAnalysis', navItem: '事故分析'}
],
keywords: ''
}
},
computed: {
hoverBackground () {
return '#ffd04b'
},
currentPath () {
var x = this.$route.path.indexOf('/', 1)
if (x !== -1) {
return this.$route.path.substring(0, x)
} else {
return this.$route.path
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
list-style: none;
}
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.wrapper{
width: auto;
margin: 0 auto !important;
}
body{
margin: 0 auto 0px !important;
}
.home{
margin: 0 auto !important;
padding: 0;
}
.index{
height: 67px;
/* background-color: pink; */
}
.index div{
line-height: 67px;
margin: 0 auto;
font-style: italic;
background-image: linear-gradient(-135deg, #20ea5c,#23f4f4,#418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0);
/* background-image: -ms-linear-gradient(-135deg, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0, #56a0d8, #dc8bc3, #56a0d8, #418ae0); */
/* -webkit-text-fill-color: rgba(0,0,0,0); */
/* -webkit-background-clip: text; */
text-align: left;
background-size: 200% 200%;
box-shadow: 0 0 5px rgb(66 68 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite !important;
animation-duration: 10s !important;
animation-timing-function: ease !important;
animation-delay: 0s !important;
animation-iteration-count: infinite !important;
animation-direction: normal !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
animation-name: Gradient !important;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.index h2{
width: 500px;
display: inline-block;
margin-left: 10%;
}
.index li{
float: right;
display: inline-block;
margin: 0 60px;
font-size: 20px;
font-style: normal;
text-align: center;
}
.index li a{
color: #23ec5f;
font-weight: 600;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.index li a:hover{
color: rgb(41, 115, 225);
}
</style>
<template>
<div>
<nav-menu class="nav-menu"></nav-menu>
<router-view/>
</div>
</template>
<script>
import NavMenu from '@/components/common/NavMenu'
export default {
components: {NavMenu}
}
</script>
<style>
.nav-menu {
/*margin-bottom: 40px;*/
box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
}
*{
margin:0;
padding:0;
border:0;
box-sizing: border-box;
}
body{
margin: 0 auto !important;
}
</style>
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
import NavMenu from '@/components/common/NavMenu'
export default {
name: 'App',
components: {NavMenu}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
background-image: url(https://user-images.githubusercontent.com/107924376/221787434-9c641c0d-1567-46c7-a40c-cd43c5b941b3.PNG);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
/* height: 100%; */
/*margin-top: 10px;*/
}
*{
margin:0;
padding:0;
border:0;
box-sizing: border-box;
}
body{
margin: 0 auto !important;
}
</style>
<template>
<div class="ScenarioFilter">
<el-card class="elcard">
<h1 ><b>筛选条件 <button @click="handleSelect">确认</button> </b></h1>
<div class="upperbox">
<tr>
<td class="">
车道类型:
</td>
<td>
<input type="radio" id="100" value="100" v-model="drivewayTypes" />
<label for="单车道">单车道</label>
</td>
<td>
<input type="radio" id="010" value="10" v-model="drivewayTypes" />
<label for="多车道">多车道</label>
</td>
<td>
<input type="radio" id="001" value="1" v-model="drivewayTypes" />
<label for="交叉路口">交叉路口</label>
</td>
</tr>
<tr>
<td class="">
规划任务:
</td>
<td>
<input type="radio" id="100" value="100" v-model="taskPlannings" />
<label for="直行">直行</label>
</td>
<td>
<input type="radio" id="010" value="10" v-model="taskPlannings" />
<label for="转弯">转弯</label>
</td>
<td>
<input type="radio" id="001" value="1" v-model="taskPlannings" />
<label for="变道">变道</label>
</td>
</tr>
<tr>
<td class="">
障碍物类型:
</td>
<td>
<input type="radio" id="1000" value="1000" v-model="obstacleTypes" />
<label for="行人">行人</label>
</td>
<td>
<input type="radio" id="0100" value="100" v-model="obstacleTypes" />
<label for="路障">路障</label>
</td>
<td>
<input type="radio" id="0010" value="10" v-model="obstacleTypes" />
<label for="变道">变道</label>
</td>
<td>
<input type="radio" id="0001" value="1" v-model="obstacleTypes" />
<label for="卡车">卡车</label>
</td>
</tr>
<tr>
<td class="">
障碍物数量:
</td>
<td>
<input type="radio" id="1000" value="1000" v-model="obstacleNumbers" />
<label for="<10"><10</label>
</td>
<td>
<input type="radio" id="0100" value="100" v-model="obstacleNumbers" />
<label for="[10, 20)">[10, 20)</label>
</td>
<td>
<input type="radio" id="0010" value="10" v-model="obstacleNumbers" />
<label for="[20, 30)">[20, 30)</label>
</td>
<td>
<input type="radio" id="0001" value="1" v-model="obstacleNumbers" />
<label for=">=30">>=30</label>
</td>
</tr>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'ScenarioFilter',
data () {
return {
drivewayTypes: [],
taskPlannings: [],
obstacleTypes: [],
obstacleNumbers: []
}
},
methods: {
handleSelect () {
var s1 = 0
var s2 = 0
var s3 = 0
var s4 = 0
for (var i = 0; i < this.drivewayTypes.length; i++) {
s1 += Number(this.drivewayTypes[i])
}
this.did = s1
for (var j = 0; j < this.taskPlannings.length; j++) {
s2 += Number(this.taskPlannings[j])
}
this.tid = s2
for (var k = 0; k < this.obstacleTypes.length; k++) {
s3 += Number(this.obstacleTypes[k])
}
this.oid = s3
for (var m = 0; m < this.obstacleNumbers.length; m++) {
s4 += Number(this.obstacleNumbers[m])
}
this.nid = s4
this.$emit('indexSelect')
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
font-family: '微软雅黑', Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
font-size: 12px;
width: 1200px;
}
div {
font-size: 12px;
}
span {
font-size: 12px;
}
.ScenarioFilter{
margin: 0 auto;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
input[type=checkbox],
input[type=radio] {
--active: #275EFE;
--active-inner: #fff;
--focus: 2px rgba(39, 94, 254, .3);
--border: #BBC1E1;
--border-hover: #275EFE;
--background: #fff;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
input[type=checkbox]:after,
input[type=radio]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
--b: var(--active);
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border);
}
input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
cursor: not-allowed;
}
input[type=checkbox]:hover:not(:checked):not(:disabled),
input[type=radio]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
input[type=checkbox]:focus,
input[type=radio]:focus {
box-shadow: 0 0 0 var(--focus);
}
input[type=checkbox],
input[type=radio] {
width: 21px;
}
input[type=checkbox]:after,
input[type=radio]:after {
opacity: var(--o, 0);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
--o: 1;
}
input[type=checkbox] + label,
input[type=radio] + label {
font-size: 14px;
line-height: 21px;
display: inline-block;
vertical-align: top;
cursor: pointer;
margin-left: 4px;
}
input[type=checkbox] {
border-radius: 7px;
}
input[type=checkbox]:after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
input[type=checkbox]:checked {
--r: 43deg;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:after {
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--active-inner);
opacity: 0;
transform: scale(var(--s, 0.7));
}
input[type=radio]:checked {
--s: .5;
}
}
ul {
margin: 12px;
padding: 0;
list-style: none;
width: 100%;
max-width: 320px;
}
ul li {
margin: 16px 0;
position: relative;
}
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
font-family: "Inter", Arial, sans-serif;
color: #8A91B4;
display: flex;
justify-content: center;
align-items: center;
background: #F6F8FF;
}
@media (max-width: 800px) {
body {
flex-direction: column;
}
}
.upperbox{
text-align: left;
/* background-color: pink; */
}
.upperbox div{
margin-right: 50px;
}
.upperbox tr td{
padding-left: 50px;
font-size: 15px;
font-weight: 600;
color: rgb(91, 131, 147);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h1{
text-align: left;
margin-bottom: 30px;
margin-left: 50px;
/* text-shadow: pink; */
color: rgb(69, 102, 115);
}
.elcard{
text-align: center;
width: 1135px;
height:250px;
margin: 30px auto;
background-color: pink;
border-radius: 20px;
--trans-light: rgba(255, 255, 255, 0.75);
--trans-dark: rgba(25, 25, 25, 0.75);
--border-style: 1px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
background: linear-gradient( -45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea );
box-shadow: 0 0 5px rgb(66 68 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite !important;
animation-duration: 10s !important;
animation-timing-function: ease !important;
animation-delay: 0s !important;
animation-iteration-count: infinite !important;
animation-direction: normal !important;
animation-fill-mode: none !important;
animation-play-state: running !important;
animation-name: Gradient !important;
/* background-color: rgba(red, green, blue, 0.6); */
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.ScenarioFilter button{
background-color: skyblue;
float: right;
font-size: 25px;
font-family: '微软雅黑';
border-radius: 5px;
color: #6c718e;
width: 60px;
height: 40px;
margin-right: 20%;
}
</style>
2023/3/18
<template>
<div class="biggest-div">
<div class="TestStarter">
<div class="new-test-button-container">
<div class="new-test-button-container-topdiv">
<el-button class="new-test-button new-test" @click="dialogFormVisible = true" ref="testStarter">新建</el-button>
<el-button class="new-test-button manager" @click="deleteManage" ref="deleteStarter">{{manageState}}</el-button>
<!-- <el-button style="float:right" class="new-test-button delete-button" @click="deleteSelected()">批量删除</el-button> -->
<button v-show="deleteFormVisible" class="tooltip" @click="deleteSelected()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" height="25" width="25">
<path fill="#6361D9" d="M8.78842 5.03866C8.86656 4.96052 8.97254 4.91663 9.08305 4.91663H11.4164C11.5269 4.91663 11.6329 4.96052 11.711 5.03866C11.7892 5.11681 11.833 5.22279 11.833 5.33329V5.74939H8.66638V5.33329C8.66638 5.22279 8.71028 5.11681 8.78842 5.03866ZM7.16638 5.74939V5.33329C7.16638 4.82496 7.36832 4.33745 7.72776 3.978C8.08721 3.61856 8.57472 3.41663 9.08305 3.41663H11.4164C11.9247 3.41663 12.4122 3.61856 12.7717 3.978C13.1311 4.33745 13.333 4.82496 13.333 5.33329V5.74939H15.5C15.9142 5.74939 16.25 6.08518 16.25 6.49939C16.25 6.9136 15.9142 7.24939 15.5 7.24939H15.0105L14.2492 14.7095C14.2382 15.2023 14.0377 15.6726 13.6883 16.0219C13.3289 16.3814 12.8414 16.5833 12.333 16.5833H8.16638C7.65805 16.5833 7.17054 16.3814 6.81109 16.0219C6.46176 15.6726 6.2612 15.2023 6.25019 14.7095L5.48896 7.24939H5C4.58579 7.24939 4.25 6.9136 4.25 6.49939C4.25 6.08518 4.58579 5.74939 5 5.74939H6.16667H7.16638ZM7.91638 7.24996H12.583H13.5026L12.7536 14.5905C12.751 14.6158 12.7497 14.6412 12.7497 14.6666C12.7497 14.7771 12.7058 14.8831 12.6277 14.9613C12.5495 15.0394 12.4436 15.0833 12.333 15.0833H8.16638C8.05588 15.0833 7.94989 15.0394 7.87175 14.9613C7.79361 14.8831 7.74972 14.7771 7.74972 14.6666C7.74972 14.6412 7.74842 14.6158 7.74584 14.5905L6.99681 7.24996H7.91638Z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
<!-- <span class="tooltiptext"> </span> -->
</button>
</div>
</div >
<!-- 避免遮罩层在弹出框之上-->
<!-- :append-to-body="true"-->
<!-- :modal-append-to-body="false"-->
<!-- 点击遮罩层不关闭弹窗-->
<!-- :close-on-click-modal ="false"-->
<div class="dialog-wrapper">
<el-dialog
title="请设置您需要的测试信息"
@close="beforeCloseHandler"
:visible.sync="dialogFormVisible"
:append-to-body="true"
:modal-append-to-body="false"
:close-on-click-modal ="false"
fullscreen>
<div class="dialog-container">
<!-- 左侧内容 -->
<div class="dialog-left">
<div class="left-content">
<div class="dialog-system-container" style="text-align:left">
<div class="dialog-options-title">目标系统:</div>
<div class="checkbox-parent-container-nowrap">
<div class="check_container">
<input id="Apollo" class="hidden" type="radio" value="1"
v-model="form.system.id" @click="form.system.id = !form.system.id">
<label class="checkbox" for="Apollo"></label>
<span class="label-text">Apollo</span>
</div>
<div class="check_container">
<input id="Autoware" class="hidden" type="radio" value="2"
v-model="form.system.id" @click="form.system.id = !form.system.id">
<label class="checkbox" for="Autoware"></label>
<span class="label-text">Autoware</span>
</div>
</div>
</div>
<div class="dialog-initial-scenario-container" style="text-align:left; margin-top: 20px; margin-bottom: 20px;">
<div class="dialog-options-title">初始场景选取:</div>
<div class="dialog-nowrap-container">
<div class="checkbox-parent-container-nowrap">
<div class="check_container">
<input id="initial-scenario-select-from-library" class="hidden" type="radio" value="1"
v-model="form.initialScenario.id" @change="handleScenarioSelect(form.initialScenario.id)"
@click="form.initialScenario.id = !form.initialScenario.id">
<label class="checkbox" for="initial-scenario-select-from-library"></label>
<span class="label-text">从场景库选取</span>
</div>
<div class="check_container">
<input id="initial-scenario-upload" class="hidden" type="radio" value="2"
v-model="form.initialScenario.id" @change="handleScenarioSelect(form.initialScenario.id)"
@click="form.initialScenario.id = !form.initialScenario.id">
<label class="checkbox" for="initial-scenario-upload"></label>
<span class="label-text">本地上传</span>
</div>
</div>
<div style="padding-left: 0; margin: 10px 0 0 10px;">
<p>已选择的场景文件：{{initialScenarioFileName}}<i class="el-icon-close" v-show="initialScenarioFileName" style="margin-left: 5px;" @click="handleScenarioDelete"></i></p>
</div>
</div>
<scenario-search v-show="scenario_select_visible" @selectScenario="selectScenario" @resetScenarioSelect="resetScenarioSelect" ref="scenarioSearch"></scenario-search>
<scenario-upload v-show="!scenario_select_visible" @uploadScenario="uploadScenario" @resetScenarioSelect="resetScenarioSelect" ref="scenarioUpload"></scenario-upload>
</div>
<div class="dialog-initial-duration-container" style="text-align:left; margin-top: 20px; margin-bottom: 20px;">
<div>
<div class="dialog-options-title">场景测试时长:</div>
<div class="input-show-container">
<input class="input-show" v-model="form.duration" placeholder="请输入数字"/><p class="input-show-text">小时</p>
</div>
</div>
</div>
<div class="dialog-aevaluation-strategies-container" style="text-align:left; margin-top: 20px; margin-bottom: 20px;">
<div class="dialog-options-title">场景评估策略:</div>
<div class="checkbox-parent-container-wrap">
<div class="check_container">
<input class="hidden" type="checkbox" id="f100" value="100" v-model="Aevaluation_strategies">
<label class="checkbox" for="f100"></label>
<span class="label-text">场景多样性</span>
</div>
<div class="check_container">
<input class="hidden" type="checkbox" id="f010" value="10" v-model="Aevaluation_strategies">
<label class="checkbox" for="f010"></label>
<span class="label-text">与周围车辆的安全距离</span>
</div>
<div class="check_container">
<input class="hidden" type="checkbox" id="f001" value="1" v-model="Aevaluation_strategies">
<label class="checkbox" for="f001"></label>
<span class="label-text">规划路径的偏移</span>
</div>
</div>
</div>
<div class="dialog-atarget-accidents-container" style="text-align:left; margin-top: 20px; margin-bottom: 20px;">
<div class="dialog-options-title">目标事故类型:</div>
<div class="checkbox-parent-container-wrap">
<div class="check_container">
<input class="hidden" type="checkbox" id="e10" value="10" v-model="Atarget_accidents">
<label class="checkbox" for="e10"></label>
<span class="label-text">碰撞</span>
</div>
<div class="check_container">
<input class="hidden" type="checkbox" id="e01" value="1" v-model="Atarget_accidents">
<label class="checkbox" for="e01"></label>
<span class="label-text">驶出道路</span>
</div>
</div>
</div>
</div>
</div>
<div class="dialog-right">
<!-- 右侧上部分内容:场景变异对象 -->
<div class="dialog-right-top">
<div style="text-align:left">
<div class="dialog-options-title">场景变异对象:</div>
<div class="dialog-environment-container" style="margin-top: 10px; margin-bottom: 10px;">
<div class="checkbox-parent-container-nowrap" style="text-align:left">
<span style="margin-right: 10px"><strong>环境要素</strong></span>
<div class="check_container">
<input id="environment-change" class="hidden" type="radio" value="1"
v-model="environment_select" @change="showEnvironments(environment_select)"
@click="resetEnvironmentDetailForm">
<label class="checkbox" for="environment-change"></label>
<span class="label-text">变异</span>
</div>
<div class="check_container">
<input id="environment-no-change" class="hidden" type="radio" value="2"
v-model="environment_select" @change="showEnvironments(environment_select)"
@click="environment_select = !environment_select">
<label class="checkbox" for="environment-no-change"></label>
<span class="label-text">不变异</span>
</div>
</div>
<div class="dialog-environment-detail-container" v-show="environment_visible">
<input type="checkbox" id="a100" value="100" v-model="Aenvironments" />
<label for="天气" style="margin-right: 20px;">天气</label>
<input type="checkbox" id="a010" value="10" v-model="Aenvironments" />
<label for="时间" style="margin-right: 20px;">时间</label>
<input type="checkbox" id="a001" value="1" v-model="Aenvironments" />
<label for="道路表面">道路表面</label>
</div>
</div>
<div class="dialog-static-obstacle-container" style="margin-top: 10px; margin-bottom: 10px;">
<div class="checkbox-parent-container-nowrap" style="text-align:left">
<span style="margin-right: 10px"><strong>静态障碍物</strong></span>
<div class="check_container">
<input id="static-obstacle-change" class="hidden" type="radio" value="1"
v-model="static_obstacle_select" @change="showStaticObstacles(static_obstacle_select)"
@click="resetStaticObstacleDetailForm">
<label class="checkbox" for="static-obstacle-change"></label>
<span class="label-text">变异</span>
</div>
<div class="check_container">
<input id="static-obstacle-no-change" class="hidden" type="radio" value="2"
v-model="static_obstacle_select" @change="showStaticObstacles(static_obstacle_select)"
@click="static_obstacle_select = !static_obstacle_select">
<label class="checkbox" for="static-obstacle-no-change"></label>
<span class="label-text">不变异</span>
</div>
</div>
<div class="dialog-obstacle-detail-container" v-show="static_obstacle_visible">
<div class="dialog-obstacle-detail-left">
<span>行人:</span>
<br />
<input type="checkbox" value="0100" v-model="Apedestrian" />
<label for="行人类型">行人类型</label>
<br />
<input type="checkbox" value="0010" v-model="Apedestrian" />
<label for="行人速度">行人速度</label>
<br />
<input type="checkbox" value="0001" v-model="Apedestrian" />
<label for="是否允许横穿马路">允许横穿马路</label>
<br />
<input type="checkbox" value="1000" v-model="Apedestrian" @click="handleShowNum(1)">
<label for="增减行人数量">增减行人数量</label>
<div v-show="pedestrian_number_visible">
<div class="dialog-nowrap-container">
<span> 最大数量：</span>
<input type="number" v-model="form.maxPedestrian" min="0" style="width: 60px"/>
<br />
<span> 最小数量：</span>
<input type="number" v-model="form.minPedestrian" min="0" style="width: 60px"/>
</div>
</div>
</div>
<div class="dialog-obstacle-detail-right">
<span>路障:</span>
<br />
<input type="checkbox" value="1" v-model="Aroadblock" @click="handleShowNum(2)"/>
<label for="增减路障数量">增减路障数量</label>
<div v-show="roadblock_number_visible">
<div class="dialog-nowrap-container">
<span> 最大数量: </span><input type="number" v-model="form.maxRoadblock" min="0" style="width: 60px"/>
<br />
<span> 最小数量: </span><input type="number" v-model="form.minRoadblock" min="0" style="width: 60px"/>
</div>
</div>
</div>
</div>
</div>
<div class="dialog-dynamic-obstacle-container" style="margin-top: 10px; margin-bottom: 10px;">
<div class="checkbox-parent-container-nowrap" style="text-align:left">
<span style="margin-right: 10px"><strong>动态障碍物</strong></span>
<div class="check_container">
<input id="dynamic-obstacle-change" class="hidden" type="radio" value="1"
v-model="dynamic_obstacle_select" @change="showDynamicObstacles(dynamic_obstacle_select)"
@click="resetDynamicObstacleDetailForm">
<label class="checkbox" for="dynamic-obstacle-change"></label>
<span class="label-text">变异</span>
</div>
<div class="check_container">
<input id="dynamic-obstacle-no-change" class="hidden" type="radio" value="2"
v-model="dynamic_obstacle_select" @change="showDynamicObstacles(dynamic_obstacle_select)"
@click="dynamic_obstacle_select = !dynamic_obstacle_select">
<label class="checkbox" for="dynamic-obstacle-no-change"></label>
<span class="label-text">不变异</span>
</div>
</div>
<div class="dialog-obstacle-detail-container" v-show="dynamic_obstacle_visible">
<div class="dialog-obstacle-detail-left">
<span>机动车:</span>
<br />
<input type="checkbox" value="010" v-model="Amotor_vehicles" />
<label for="机动车类型及颜色">机动车类型及颜色</label>
<br />
<input type="checkbox" value="001" v-model="Amotor_vehicles" />
<label for="机动车速度">机动车速度</label>
<br />
<input type="checkbox" value="100" v-model="Amotor_vehicles" @click="handleShowNum(3)"/>
<label for="增减机动车数量">增减机动车数量</label>
<div v-show="motor_vehicles_number_visible">
<div class="dialog-nowrap-container">
<span> 最大数量：</span><input type="number" v-model="form.maxMotorVehicles" min="0" style="width: 60px"/>
<br />
<span> 最小数量：</span><input type="number" v-model="form.minMotorVehicles" min="0" style="width: 60px"/>
</div>
</div>
</div>
<div class="dialog-obstacle-detail-right">
<span>自行车:</span>
<br />
<input type="checkbox" value="01" v-model="Abicycles" />
<label for="自行车速度">自行车速度</label>
<br />
<input type="checkbox" value="10" v-model="Abicycles" @click="handleShowNum(4)"/>
<label for="增减自行车数量">增减自行车数量</label>
<div v-show="bicycles_number_visible">
<div class="dialog-nowrap-container">
<span> 最大数量：</span><input type="number" v-model="form.maxBicycles" min="0" style="width: 60px"/>
<br />
<span> 最小数量：</span><input type="number" v-model="form.minBicycles" min="0" style="width: 60px"/>
</div>
</div>
</div>
</div>
</div>
<div class="dialog-ego-container" style="margin-top: 10px; margin-bottom: 10px;">
<span><strong>EGO</strong></span>
<div class="checkbox-parent-container-nowrap" style="text-align:left">
<span style="margin-right: 10px">是否改变EGO目的地</span>
<div class="check_container">
<input id="ego-change" class="hidden" type="radio" value="1" v-model="form.ego.id"
@click="form.ego.id = !form.ego.id">
<label class="checkbox" for="ego-change"></label>
<span class="label-text">改变</span>
</div>
<div class="check_container">
<input id="ego-no-change" class="hidden" type="radio" value="2" v-model="form.ego.id"
@click="form.ego.id = !form.ego.id">
<label class="checkbox" for="ego-no-change"></label>
<span class="label-text">不改变</span>
</div>
</div>
</div>
<div class="dialog-traffic-facilities-container" style="margin-top: 10px; margin-bottom: 10px;">
<span><strong>交通设施</strong></span>
<div class="checkbox-parent-container-nowrap" style="text-align:left">
<span style="margin-right: 10px">是否改变交通信号灯时长</span>
<div class="check_container">
<input class="hidden" type="radio" id="d1" value="1" v-model="form.trafficFacilities.id"
@click="form.trafficFacilities.id = !form.trafficFacilities.id">
<label class="checkbox" for="d1"></label>
<span class="label-text">改变</span>
</div>
<div class="check_container">
<input class="hidden" type="radio" id="d2" value="2" v-model="form.trafficFacilities.id"
@click="form.trafficFacilities.id = !form.trafficFacilities.id">
<label class="checkbox" for="d2"></label>
<span class="label-text">不改变</span>
</div>
</div>
</div>
</div>
</div>
<div class="dialog-right-bottom">
<!-- 右侧下部分内容 -->
<div slot="footer" class="dialog-footer">
<el-button @click="beforeCloseHandler">清空配置</el-button>
<el-button :disabled="isSubmitting" type="primary" @click="onSubmit">添加测试</el-button>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</div>
<!-- 场景测试页 -->
<div v-show="!deleteFormVisible" class="tests-area" >
<div class="tests-running" >
<h1 class="tests-area-h1">当前运行</h1>
<el-row>
<el-col v-for="test in tests1" :key="test.id" :span="1.8">
<router-link class="detail-link" :to="{path:'test/testDetails',query:{id: test.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看详情
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.环境要素 :{{test.system.type}}</p>
<p class="text-img">.静态障碍物 : {{test.system.state}}</p>
<p class="text-img">.动态 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
<p class="text-body">测试对象 : {{test.system.type}}</p>
<p class="text-body">测试时长 : {{test.system.state}}</p>
<p class="text-body">测试场景 : </p>
<p class="text-body">场景评估策略：</p>
<p class="text-body">目标事故处理：</p>
</div>
</div>
</router-link>
</el-col>
</el-row>
</div>
<div class="tests-waiting">
<h1 class="tests-area-h1"> 等待运行 </h1>
<el-row>
<el-col v-for="test in tests0" :key="test.id" :span="1.8">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<el-button id="start-test-button" @click="startTest(test.id)">
<span>启动测试</span><i></i>
</el-button>
</div>
<div class="card-description">
</div>
</div>
<!--
<el-card class="card" id="test-waiting">
<div class="card-header">
<span style="font-size: 26px"><strong> ID:{{test.id}} </strong></span>
</div>
<div class="card-body">
<span> Target:{{test.system.type}} </span>
<span> {{test.date}} </span>
</div>
<br />
<el-button id="start-test-button" @click="startTest(test.id)">
<span>启动测试</span><i></i>
</el-button>
</el-card> -->
</el-col>
</el-row>
</div>
<div class="tests-finished">
<h1 class="tests-area-h1"> 运行结束 </h1>
<el-row>
<el-col v-for="test in tests2" :key="test.id" :span="1.8">
<router-link class="detail-link" :to="{path:'test/testResult',query:{id: test.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看事故场景
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.测试场景总数:{{test.system.type}}</p>
<p class="text-img">.平均场 : {{test.system.state}}</p>
<p class="text-img">.碰撞:驶出道路 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
</div>
</div>
</router-link>
</el-col>
</el-row>
</div>
</div>
<div v-show="deleteFormVisible" class="tests-area" >
<div class="tests-running" >
<h1 class="tests-area-h1">当前运行</h1>
<el-row>
<el-col v-for="test in tests1" :key="test.id" :span="1.8">
<div ><input class="box-div" type="checkbox" style="zoom:180%;" name="car" value="test.id" @click="handleSelectionChangeDepartment(test.id)"></div>
<router-link class="detail-link" :to="{path:'test/testDetails',query:{id: test.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看详情
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.环境要素 :{{test.system.type}}</p>
<p class="text-img">.静态障碍物 : {{test.system.state}}</p>
<p class="text-img">.动态 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
<p class="text-body">测试对象 : {{test.system.type}}</p>
<p class="text-body">测试时长 : {{test.system.state}}</p>
<p class="text-body">测试场景 : </p>
<p class="text-body">场景评估策略：</p>
<p class="text-body">目标事故处理：</p>
</div>
</div>
</router-link>
</el-col>
</el-row>
</div>
<div class="tests-waiting">
<h1 class="tests-area-h1"> 等待运行 </h1>
<el-row>
<el-col v-for="test in tests0" :key="test.id" :span="1.8">
<div><input class="box-div" type="checkbox" style="zoom:180%;" name="car" value="test.id" @click="handleSelectionChangeDepartment(test.id)"></div>
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<el-button id="start-test-button" @click="startTest(test.id)">
<span>启动测试</span><i></i>
</el-button>
</div>
<div class="card-description">
</div>
</div>
</el-col>
</el-row>
</div>
<div class="tests-finished">
<h1 class="tests-area-h1"> 运行结束 </h1>
<el-row>
<el-col v-for="test in tests2" :key="test.id" :span="1.8">
<div><input class="box-div" type="checkbox" style="zoom:180%;" name="car" value="test.id" @click="handleSelectionChangeDepartment(test.id)"></div>
<router-link class="detail-link" :to="{path:'test/testResult',query:{id: test.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{test.id}}</strong></span>
<span style="font-size: 15px"><strong> {{test.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看事故场景
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.测试场景总数:{{test.system.type}}</p>
<p class="text-img">.平均场 : {{test.system.state}}</p>
<p class="text-img">.碰撞:驶出道路 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
</div>
</div>
</router-link>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import ScenarioUpload from './ScenarioUpload.vue'
import ScenarioSearch from './ScenarioSearch.vue'
export default {
name: 'Tests',
components: {ScenarioSearch, ScenarioUpload},
data () {
return {
tests1: [], // 当前运行
tests0: [], // 等待运行
tests2: [], // 结束运行
manageState: '管理',
multipleSelectionDepartment: [],
dialogFormVisible: false, // 控制TestStarter的显示与隐藏
deleteFormVisible: false,
isSubmitting: false,
scenario_file_visible: false,
scenario_select_visible: false, // 控制scenario-upload和scenario-search组件的显示和隐藏
initialScenarioFileName: '',
pedestrian_number_visible: false, // 控制行人数量增减的显示与隐藏
motor_vehicles_number_visible: false, // 控制机动车数量增减的显示与隐藏
bicycles_number_visible: false, // 控制自行车数量增减的显示与隐藏
roadblock_number_visible: false, // 控制路障数量增减的显示与隐藏
environment_visible: false, // 控制环境要素的显示与隐藏
static_obstacle_visible: false, // 控制静态障碍物的显示与隐藏
dynamic_obstacle_visible: false, // 控制动态障碍物的显示与隐藏
environment_select: '',
static_obstacle_select: '',
dynamic_obstacle_select: '',
Aenvironments: [],
Apedestrian: [],
Amotor_vehicles: [],
Atarget_accidents: [],
Aevaluation_strategies: [],
Abicycles: [],
Aroadblock: '',
form: {
duration: '',
ego: {
id: '',
type: ''
},
state: {
id: '',
type: ''
},
system: {
id: '',
type: ''
},
initialScenario: {
id: '',
type: ''
},
initial_scenario_path: '', // 初始场景路径，如果是用户上传的，那么为场景文件在服务器中的路径；如果是用户从场景库中选取的，那么为场景的id，根据场景id可以找到场景路径（注意需要把id从String转为int）
environments: {
id: '',
type: ''
},
pedestrian: {
id: '',
type: ''
},
roadblock: {
id: '',
type: ''
},
motorVehicles: {
id: '',
type: ''
},
bicycles: {
id: '',
type: ''
},
trafficFacilities: {
id: '',
type: ''
},
targetAccidents: {
id: '',
type: ''
},
evaluationStrategies: {
id: '',
type: ''
},
maxPedestrian: 0,
minPedestrian: 0,
maxRoadblock: 0,
minRoadblock: 0,
maxMotorVehicles: 0,
minMotorVehicles: 0,
maxBicycles: 0,
minBicycles: 0
},
hasSubmitted: false // 是否提交测试实例
}
},
mounted () {
this.loadTestcases2()
this.loadTestcases1()
this.loadTestcases0()
},
methods: {
loadTestcases1 () { // 当前运行
var _this = this
this.$axios.get('/testcases/state' + '/2').then(resp => {
if (resp && resp.data.code === 200) {
_this.tests1 = resp.data.result
}
})
},
loadTestcases0 () { // 等待运行
var _this = this
this.$axios.get('/testcases/state' + '/1').then(resp => {
if (resp && resp.data.code === 200) {
_this.tests0 = resp.data.result
}
})
},
loadTestcases2 () { // 结束运行
var _this = this
this.$axios.get('/testcases/state' + '/3').then(resp => {
if (resp && resp.data.code === 200) {
_this.tests2 = resp.data.result
}
})
},
deleteManage () {
if (this.deleteFormVisible === false) {
this.manageState = '结束管理'
this.$message({
type: 'info',
message: '已进入管理模式，可选定删除测试'
})
} else {
this.manageState = '管理'
this.$message({
type: 'info',
message: '已退出管理模式'
})
}
this.deleteFormVisible = !this.deleteFormVisible
},
showEnvironments (select) {
if (select === '1') {
this.environment_visible = true
} else {
this.environment_visible = false
}
},
showStaticObstacles (select) {
if (select === '1') {
this.static_obstacle_visible = true
} else {
this.static_obstacle_visible = false
}
},
showDynamicObstacles (select) {
if (select === '1') {
this.dynamic_obstacle_visible = true
} else {
this.dynamic_obstacle_visible = false
}
},
handleShowNum (type) {
if (type === 1) {
this.pedestrian_number_visible = !this.pedestrian_number_visible
} else if (type === 3) {
this.motor_vehicles_number_visible = !this.motor_vehicles_number_visible
} else if (type === 4) {
this.bicycles_number_visible = !this.bicycles_number_visible
} else if (type === 2) {
this.roadblock_number_visible = !this.roadblock_number_visible
}
},
handleScenarioSelect (value) {
// eslint-disable-next-line eqeqeq
if (value == 1) {
this.scenario_select_visible = true
this.$refs.scenarioUpload.deleteUploadedFile()
this.$refs.scenarioSearch.show()
}
// eslint-disable-next-line eqeqeq
if (value == 2) {
this.scenario_select_visible = false
this.$refs.scenarioSearch.clear()
this.$refs.scenarioUpload.show()
}
this.scenario_file_visible = true
this.initialScenarioFileName = ''
},
resetScenarioSelect () {
this.form.initialScenario.id = !this.form.initialScenario.id
},
handleScenarioDelete () {
let value = this.form.initialScenario.id
if (value === '2') {
this.scenario_select_visible = true
this.$refs.scenarioUpload.deleteUploadedFile()
}
if (value === '1') {
this.scenario_select_visible = false
this.$refs.scenarioSearch.clear()
}
this.form.initialScenario.id = ''
this.initialScenarioFileName = ''
this.form.initial_scenario_path = ''
},
uploadScenario () {
this.form.initial_scenario_path = this.$refs.scenarioUpload.filePath
this.initialScenarioFileName = this.$refs.scenarioUpload.uploadFileName
console.log('upload ' + this.$refs.scenarioUpload.uploadFileName)
},
selectScenario () {
this.form.initial_scenario_path = this.$refs.scenarioSearch.selectedScenarioPath
this.initialScenarioFileName = this.$refs.scenarioSearch.selectedScenarioFileName
console.log('search ' + this.$refs.scenarioSearch.selectedScenarioFileName)
},
resetEnvironmentDetailForm () {
this.environment_select = !this.environment_select
this.Aenvironments = []
this.environment_visible = false
this.environment_visible = false
},
resetStaticObstacleDetailForm () {
this.static_obstacle_select = !this.static_obstacle_select
this.Apedestrian = []
this.form.maxPedestrian = 0
this.form.minPedestrian = 0
this.Aroadblock = []
this.form.minRoadblock = 0
this.form.maxRoadblock = 0
this.pedestrian_number_visible = false
this.roadblock_number_visible = false
this.static_obstacle_visible = false
},
resetDynamicObstacleDetailForm () {
this.dynamic_obstacle_select = !this.dynamic_obstacle_select
this.Amotor_vehicles = []
this.form.maxMotorVehicles = 0
this.form.minMotorVehicles = 0
this.Abicycles = []
this.form.maxBicycles = 0
this.form.minBicycles = 0
this.motor_vehicles_number_visible = false
this.bicycles_number_visible = false
this.dynamic_obstacle_visible = false
},
clearForm () { // 清空测试配置表单
this.dialogVisible = false
this.scenario_select_visible = false
this.scenario_file_visible = false
this.initialScenarioFileName = ''
this.pedestrian_number_visible = false
this.motor_vehicles_number_visible = false
this.bicycles_number_visible = false
this.roadblock_number_visible = false
this.environment_visible = false
this.static_obstacle_visible = false
this.dynamic_obstacle_visible = false
this.Aenvironments = []
this.Apedestrian = []
this.Amotor_vehicles = []
this.Abicycles = []
this.Atarget_accidents = []
this.Aevaluation_strategies = []
this.Aroadblock = ''
this.scenario_name = ''
this.environment_select = ''
this.static_obstacle_select = ''
this.dynamic_obstacle_select = ''
this.form = {
duration: '',
ego: {
id: '',
type: ''
},
state: {
id: '',
type: ''
},
system: {
id: '',
type: ''
},
initialScenario: {
id: '',
type: ''
},
initial_scenario_path: '', // 初始场景路径，如果是用户上传的，那么为场景文件在服务器中的路径；如果是用户从场景库中选取的，那么为场景的id，根据场景id可以找到场景路径（注意需要把id从String转为int）
environments: {
id: '',
type: ''
},
pedestrian: {
id: '',
type: ''
},
roadblock: {
id: '',
type: ''
},
motorVehicles: {
id: '',
type: ''
},
bicycles: {
id: '',
type: ''
},
trafficFacilities: {
id: '',
type: ''
},
targetAccidents: {
id: '',
type: ''
},
evaluationStrategies: {
id: '',
type: ''
},
maxPedestrian: 0,
minPedestrian: 0,
maxRoadblock: 0,
minRoadblock: 0,
maxMotorVehicles: 0,
minMotorVehicles: 0,
maxBicycles: 0,
minBicycles: 0
}
this.isSubmitting = false
this.$refs.scenarioSearch.clear()
},
beforeCloseHandler () {
// 如果用户选择上传场景文件，需要判断是否需要删除上传的场景文件
if (this.hasSubmitted === false && this.form.initial_scenario_path !== '') { // 如果没有提交测试实例配置，则删除用户上传的场景文件
this.$refs.scenarioUpload.deleteUploadedFile()
} else {
this.$refs.scenarioUpload.clear()
this.hasSubmitted = false
}
this.clearForm()
},
onSubmit () {
if (this.form.initial_scenario_path === '') {
if (this.form.initialScenario.id === '1') {
this.$alert('请选择初始场景！您可能没有从检索结果中选择场景或者没有点击确定！', '提示', {
confirmButtonText: '确定'
})
} else {
this.$alert('请选择初始场景！您可能没有点击上传按钮或者上传的场景文件无效！', '提示', {
confirmButtonText: '确定'
})
}
} else if (!/^[0-9]+$/.test(this.form.duration) || parseInt(this.form.duration) === 0) {
this.$alert('请输入正确的场景测试时长！如果您输入的不是正整数，请重新输入！', '提示', {
confirmButtonText: '确定'
})
} else if (parseInt(this.form.maxPedestrian) < 0 || parseInt(this.form.minPedestrian) < 0 || parseInt(this.form.maxRoadblock) < 0 || parseInt(this.form.minRoadblock) || parseInt(this.form.maxBicycles) < 0 || parseInt(this.form.minBicycles) < 0 || parseInt(this.form.maxMotorVehicles) < 0 || parseInt(this.form.minMotorVehicles) < 0) {
this.$alert('请输入正确的障碍物数量！如果您输入的不是正整数，请重新输入！', '提示', {
confirmButtonText: '确定'
})
} else if (this.form.maxPedestrian < this.form.minPedestrian || this.form.maxRoadblock < this.form.minRoadblock || this.form.maxBicycles < this.form.minBicycles || this.form.maxMotorVehicles < this.form.minMotorVehicles) {
this.$alert('请输入合适的障碍物数量！如果您输入的障碍物数最大值小于最小值，请重新输入！', '提示', {
confirmButtonText: '确定'
})
} else if (this.Atarget_accidents.length === 0) {
this.$alert('请选择目标事故类型！需要至少选择其中一项！', '提示', {
confirmButtonText: '确定'
})
} else if (this.Aevaluation_strategies.length === 0) {
this.$alert('请选择场景评估策略！需要至少选择其中一项！', '提示', {
confirmButtonText: '确定'
})
} else {
this.isSubmitting = true
var date = new Date()
var date1 = date.toLocaleDateString()
var s1 = 0
var s2 = 0
var s3 = 0
var s4 = 0
var s5 = 0
var s6 = 0
var s7 = 0
if (this.environment_visible === true) {
for (var i = 0; i < this.Aenvironments.length; i++) {
s1 += Number(this.Aenvironments[i])
}
} else {
s1 = 2
}
if (this.static_obstacle_visible === false || this.Apedestrian.length === 0) {
s2 = 2
} else {
for (var j = 0; j < this.Apedestrian.length; j++) {
s2 += Number(this.Apedestrian[j])
}
}
if (this.dynamic_obstacle_visible === false || this.Amotor_vehicles.length === 0) {
s3 = 2
} else {
for (var k = 0; k < this.Amotor_vehicles.length; k++) {
s3 += Number(this.Amotor_vehicles[k])
}
}
if (this.dynamic_obstacle_visible === false || this.Abicycles.length === 0) {
s6 = 2
} else {
for (var m = 0; m < this.Abicycles.length; m++) {
s6 += Number(this.Abicycles[m])
}
}
for (var n = 0; n < this.Atarget_accidents.length; n++) {
s4 += Number(this.Atarget_accidents[n])
}
for (var g = 0; g < this.Aevaluation_strategies.length; g++) {
s5 += Number(this.Aevaluation_strategies[g])
}
if (this.static_obstacle_visible === false || this.Aroadblock !== '1') {
s7 = 2
}
this.form.environments.id = s1
this.form.pedestrian.id = s2
this.form.motorVehicles.id = s3
this.form.targetAccidents.id = s4
this.form.evaluationStrategies.id = s5
this.form.bicycles.id = s6
this.form.roadblock.id = s7
this.form.state.id = '1'
this.$axios
.post('/edit/testcases', {
date: date1,
duration: this.form.duration,
ego: this.form.ego,
state: this.form.state,
system: this.form.system,
initialScenario: this.form.initialScenario,
initialScenarioPath: this.form.initial_scenario_path,
environments: this.form.environments,
pedestrian: this.form.pedestrian,
roadblock: this.form.roadblock,
motorVehicles: this.form.motorVehicles,
bicycles: this.form.bicycles,
trafficFacilities: this.form.trafficFacilities,
targetAccidents: this.form.targetAccidents,
evaluationStrategies: this.form.evaluationStrategies,
maxPedestrian: this.form.maxPedestrian,
minPedestrian: this.form.minPedestrian,
maxRoadblock: this.form.maxRoadblock,
minRoadblock: this.form.minRoadblock,
maxMotorVehicles: this.form.maxMotorVehicles,
minMotorVehicles: this.form.minMotorVehicles,
maxBicycles: this.form.maxBicycles,
minBicycles: this.form.minBicycles
})
.then(resp => {
if (resp && resp.data.code === 200) {
this.hasSubmitted = true
this.loadTestcases0() // 更新 等待运行 的测试实例
this.$alert('新增测试实例成功，id为' + resp.data.result + '，您可以尝试启动等待运行的测试实例', '提示', {
confirmButtonText: '确定'
})
this.dialogFormVisible = false
} else {
this.hasSubmitted = false
this.$alert(resp.data.message, '提示', {
confirmButtonText: '确定'
})
this.dialogFormVisible = false
}
})
.catch(error => {
console.log(error)
this.$alert('提交失败，请重试！', '提示', {
confirmButtonText: '确定'
})
})
.finally(() => {
this.isSubmitting = false
})
}
},
deleteTest (testCaseId) {
this.$confirm('此操作将永久删除该测试, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$axios.post('/edit/testcases/delete', {id: testCaseId
})
.then(resp => {
console.log(resp.data.message)
if (resp && resp.status === 200) {
this.loadTestcases1()
this.loadTestcases2()
this.loadTestcases0()
}
})
}
).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
startTest (testCaseId) {
console.log('调用脚本中...')
this.$axios.post('/callscript/starttest', {id: testCaseId})
.then(resp => {
if (resp.data.code === 200) {
this.$alert(resp.data.message, '提示', {
confirmButtonText: '确定调用成功'
})
// 延时刷新页面
setTimeout(() => {
this.loadTestcases0() // 更新等待运行
this.loadTestcases1() // 更新当前运行
}, 3000)
} else {
this.$alert(resp.data.message, '提示', {
confirmButtonText: '确定调用失败'
})
}
})
.catch(function (error) {
console.log(error)
})
},
handleSelectionChangeDepartment(val) {
var str = this.multipleSelectionDepartment
if (str.indexOf(val) === -1) {
this.multipleSelectionDepartment = val + ',' + this.multipleSelectionDepartment
} else {
this.multipleSelectionDepartment = this.multipleSelectionDepartment.replaceAll(val + ',', '')
}
console.log(this.multipleSelectionDepartment)
},
deleteSelected() {
this.$confirm('此操作将永久删除选中测试,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let val = this.multipleSelectionDepartment
if (val) {
var strs = this.multipleSelectionDepartment.split(',')
for (var i = 0; i < strs.length - 1; i++) {
this.$axios.post('/edit/testcases/delete', {id: strs[i]
})
.then(resp => {
console.log(resp.data.message)
if (resp && resp.status === 200) {
this.loadTestcases1()
this.loadTestcases2()
this.loadTestcases0()
}
})
}
this.multipleSelectionDepartment = []
this.$message.success('删除成功')
} else {
this.$message({
type: 'info',
message: '请至少选择一个测试'
})
}
}
).catch(() => {
this.multipleSelectionDepartment = []
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Slab', serif;
}
.biggest-div{
margin-top: 0;
height: 2000px;
background: url("../../assets/img/bg/背景2.png");
}
.el-dialog {
width: 100% !important;
min-height: 100vh !important;
background: url("../../assets/img/bg/bg4.png") center center no-repeat !important;
background-size: 100% 100%;
/*width: 100% !important;*/
/*height: 100% !important;*/
/*margin: 0 !important;*/
/*padding: 0 !important;*/
/*background-image: url("../../assets/img/bg/bg4.png") !important;*/
/*background-size: cover !important;*/
/*background-repeat: no-repeat !important;*/
}
.el-dialog__header {
display: flex !important;
align-items: center !important;
background-color: #1f3f8f !important;
font-size: 25px !important;
}
.el-dialog__title {
color: #fff !important;
font-family: 'Roboto Slab', sans-serif !important;
font-size: 30px !important;
}
.el-dialog__close {
font-size: 30px !important;
}
</style>
<style scoped>
/*新建测试实例的按钮样式和动画*/
.new-test-button-container-topdiv{
/* width: 300px;
height: 50px; */
border-radius: 0 0 20px 20px;
/* background-color: pink; */
}
.new-test-button-container {
display: flex;
justify-content: center;
align-items: center;
}
.new-test{
border-radius: 0 0 0 20px;
float: left;
background: #1f3f8f;
color: #fff;
}
.manager{
border-radius: 0 0 20px 0;
margin-left: 0;
float: left;
background: #fff;
color: #1f3f8f;
}
/* 删除键css */
.tooltip{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
border: 0px solid transparent;
background-color: rgba(38, 95, 239, 0.745);
border-radius: 1.25em;
transition: all 0.2s linear;
}
.tooltip:hover {
box-shadow: 3.4px 2.5px 4.9px rgba(65, 81, 174, 0.025),
8.6px 6.3px 12.4px rgba(65, 81, 174,0.035),
17.5px 12.8px 25.3px rgba(65, 81, 174,0.045),
36.1px 26.3px 52.2px rgba(65, 81, 174,0.055),
99px 72px 143px rgba(65, 81, 174, 0.08);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 4em;
background-color: rgb(3, 45, 233);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 25%;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(50, 94, 204, 0.253) transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* 删除键css 👆*/
.new-test-button {
width: 12vw;
height: 4vw;
/* border-radius: 0.5vw; */
border: none;
font-size: 30px;
font-weight: 700;
position: relative;
z-index: 1;
overflow: visible;
transition: ease 0.5s;
}
.new-test-button:hover::before {
width: 100%;
height: 100%;
/* border-radius: 0.5vw; */
top: 0;
left: 0;
transform: translateY(-0.5vh);
}
.new-test-button:hover {
transform: translateY(0.5vh);
}
.new-test-button:active::before {
transform: translate(0, 5%);
}
/*测试配置页面样式*/
.dialog-container {
display: flex; /* 使用flex布局 */
font-size: 25px;
font-family: 'Roboto Slab', sans-serif;
color: #1f3f8f; /*设置字体颜色*/
}
.dialog-options-title {
font-size: 30px;
font-weight: bold; /*设置字体粗细*/
line-height: 1.5; /*设置行高，即每一行文字的垂直间距*/
}
.dialog-left {
width: 30vw;
height: calc(100vh-68px);
margin-left: 15vw; /* 距离左边的宽度 */
/*margin-right: 5vw;*/
}
.dialog-right {
width: 50vw;
height: calc(100vh-68px);
display: flex; /* 右侧容器也使用flex布局 */
flex-direction: column; /* 上下排列 */
/*margin-left: 70px;*/
}
.dialog-right-top {
flex: 1;
margin: auto; /* 上部分居中 */
}
.dialog-right-bottom {
display: flex;
justify-content: flex-end;
height: 100px;
margin-top: 20px;
}
.dialog-nowrap-container {
white-space: nowrap;
}
.dialog-nowrap-container > * {
display: inline-block; /*设置容器内的元素为水平方向排列*/
}
.input-show-container{
margin: 10px 0px 0px 10px;
width:400px;
height: 32px;
line-height: 30px;
overflow: hidden;
}
.input-show{
/*浮动*/
float: left;
height: 30px;
width: 120px;
font-size: 20px;
/*消除默认样式*/
outline: none;
padding: 0;
border:0;
margin-right: 10px;
margin-top: 2px;
}
.input-show:hover{
border: 1px solid black;
}
.dialog-environment-detail-container {
background-color: #fff; /* 设置背景颜色为白色 */
border-radius: 5px; /* 设置圆角半径为5px */
border: 1px solid #fff; /* 设置边框 */
padding-left: 20px;
padding-right: 20px;
margin-top: 10px;
font-size: 15px;
width: 380px;
}
.dialog-obstacle-detail-container {
font-size: 15px;
display: inline-block; /* 让容器自适应内部元素的宽度 */
justify-content: space-between; /* 左右两个子容器平分父容器 */
background-color: #fff; /* 设置背景颜色为白色 */
border-radius: 5px; /* 设置圆角半径为5px */
border: 1px solid #fff; /* 设置边框 */
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
overflow: hidden; /*防止溢出*/
}
.dialog-obstacle-detail-container .dialog-obstacle-detail-left {
float: left;
width: 170px;
}
.dialog-obstacle-detail-container .dialog-obstacle-detail-right {
float: right;
width: 170px;
}
.dialog-obstacle-detail-container:hover{
border: 1px solid #4876FFFF;
}
/*测试配置页左侧checkbox样式*/
.checkbox-parent-container-nowrap {
display: flex;
margin-top: 10px;
/*justify-content: center;*/
/*justify-content: flex-end;*/
/*position: relative;*/
}
.checkbox-parent-container-wrap {
display: flex;
flex-direction: column;
margin-top: 10px;
}
.checkbox-parent-container-wrap > *{
margin-top: 5px;
}
.check_container {
display: flex;
align-items: center;
/*justify-content: flex-start;*/
position: relative;
margin-right: 20px;
}
.checkbox {
position: relative;
top: 1px;
width: 25px;
height: 25px;
border: 2px solid #212fab;
background: #FFFFFF;
border-radius: 50px;
cursor: pointer;
display: block;
transition: all 0.3s linear;
}
.checkbox::after {
content: "";
position: absolute;
top: 25%;
left: 20%;
width: 4px;
height: 8px;
opacity: 0;
transform: rotate(45deg) scale(0) translate(-50%, -50%);
border-right: 4px solid #ffffff;
border-bottom: 4px solid #ffffff;
transition: all 0.3s linear;
}
.hidden:checked ~ .checkbox::after {
opacity: 1 !important;
transform: rotate(50deg) scale(1) translate(20%, -25%) !important;
}
.hidden:checked ~ .checkbox {
background: #212fab;
border: none;
}
.hidden {
display: none !important;
}
.label-text {
margin-left: 10px;
}
/*测试配置页右侧单选框*/
/*.right-checkbox-parent-container-nowrap {*/
/* display: flex;*/
/* margin-top: 10px;*/
/* !*justify-content: center;*!*/
/* !*justify-content: flex-end;*!*/
/* !*position: relative;*!*/
/*}*/
/*.right-checkbox-parent-container-wrap {*/
/* display: flex;*/
/* flex-wrap: wrap;*/
/* margin-top: 10px;*/
/*}*/
/*.right-checkbox-parent-container-wrap > *{*/
/* margin-top: 5px;*/
/*}*/
/*.right-check_container {*/
/* display: flex;*/
/* align-items: center;*/
/* !*justify-content: flex-start;*!*/
/* position: relative;*/
/* margin-right: 20px;*/
/*}*/
/*.right-checkbox {*/
/* position: relative;*/
/* top: 1px;*/
/* width: 25px;*/
/* height: 25px;*/
/* border: 2px solid #212fab;*/
/* border-radius: 50px;*/
/* cursor: pointer;*/
/* display: block;*/
/* transition: all 0.3s linear;*/
/*}*/
/*.right-checkbox::after {*/
/* content: "";*/
/* position: absolute;*/
/* top: 25%;*/
/* left: 20%;*/
/* width: 4px;*/
/* height: 8px;*/
/* opacity: 0;*/
/* transform: rotate(45deg) scale(0) translate(-50%, -50%);*/
/* border-right: 4px solid #ffffff;*/
/* border-bottom: 4px solid #ffffff;*/
/* transition: all 0.3s linear;*/
/*}*/
/*.right-hidden:checked ~ .checkbox::after {*/
/* opacity: 1 !important;*/
/* transform: rotate(50deg) scale(1) translate(20%, -25%) !important;*/
/*}*/
/*.right-hidden:checked ~ .checkbox {*/
/* background: #212fab;*/
/* border: none;*/
/*}*/
/*.right-hidden {*/
/* display: none !important;*/
/*}*/
/*.right-label-text {*/
/* margin-left: 10px;*/
/*}*/
/*测试信息样式和动画*/
.tests-area {
width: 1400px;
height: 750px;
margin-left: auto;
margin-right: auto;
}
.detail-link {
color: #409EFF;
width: 250px;
height: 200px;
/* margin-right: 100px; */
text-decoration: none;
}
.detail-link:hover {
color: #4876FFFF;
}
h1 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
/*测试启动按钮的样式与动画*/
#start-test-button {
padding: 10px 30px;
transition: 0.5s;
margin: 0;
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 20px;
font-weight: 600;
border: none;
color: #409EFF;
}
#start-test-button:hover {
letter-spacing: 0.25em;
color: #4876FFFF;
box-shadow: 0 0 45px #27408B;
}
#start-test-button::before {
content: '';
position: absolute;
inset: 2px;
background: #ffffff;
}
#start-test-button span {
position: relative;
z-index: 1;
}
#start-test-button i {
position: absolute;
inset: 0;
display: block;
}
#start-test-button i::before {
content: '';
position: absolute;
border: 1px solid #409EFF;
width: 7px;
height: 4px;
top: -3.5px;
left: 80%;
background: #409EFF;
transform: translateX(-50%);
transition: 0.5s;
}
#start-test-button:hover i::before {
width: 70px;
left: 30%;
}
#start-test-button i::after {
content: '';
position: absolute;
border: 1px solid #409EFF;
width: 7px;
height: 4px;
bottom: -3.5px;
left: 20%;
background: #409EFF;
transform: translateX(-50%);
transition: 0.5s;
}
#start-test-button:hover i::after {
width: 70px;
left: 70%;
}
.card2 {
padding: 10px;
width: 300px;
height: 180px;
margin-bottom: 20px;
margin:auto;
border-radius: 20px;
background-color: #FFF;
border: none;
-webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}
/* 贴过来的👇 */
.card {
height: 250px;
width: 200px;
margin-right: 80px;
position: relative;
border-radius: 25px;
transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
/* border-radius: 1em; */
margin-bottom: 40px;
box-shadow: 0 0 20px 8px #a6bbe8;
}
/*Image*/
.card-image {
height: 100%;
width: 100%;
border-radius: 25px;
position: absolute;
color: #fff;
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
background: #0a3394;
background: linear-gradient(to top, #0a3394, #4286f4);
}
.card-image .span1{
display: inline-block;
font-size: 26px;
margin-left: 10%;
margin-right: 10%
}
/*Description */
.card-description {
display: flex;
position: absolute;
gap: 1em;
flex-direction: column;
background-color: #f5f5f5;
height: 70%;
width: 200px;
bottom: 0;
border-radius: 25px;
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 1rem;
}
/*Text*/
.text-title {
font-size: 1.4em;
font-weight: 700;
}
.text-body {
font-size: 1em;
font-weight: 700;
/* line-height: 100%; */
color: #1f3f8f;
}
.card-image h2{
font-weight: 700;
margin-left: 10%;
}
.text-img {
font-size: 16px;
font-weight: 700;
margin-left: 8%;
margin-top: 2%;
/* padding-left: 20px; */
color: #fff;
}
.card:hover .card-description {
transform: translateY(100%);
}
/* 贴过来的👆 */
.box-shadow {
-webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
}
/* 查看详情css */
.cssbuttons-io-button {
background: #e1ebfb;
color: #273f8a;
font-family: inherit;
padding: 0.35em;
padding-left: 1.2em;
font-size: 17px;
font-weight: 500;
border-radius: 0.9em;
border: none;
letter-spacing: 0.05em;
display: flex;
align-items: center;
box-shadow: inset 0 0 1.6em -0.6em #e1ebfb;
overflow: hidden;
position: relative;
height: 2.4em;
padding-right: 3.3em;
margin: 0.1em auto;
cursor: pointer;
}
.cssbuttons-io-button .icon {
background: rgb(61, 102, 237);
margin: 0 auto;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 2.2em;
width: 2.2em;
border-radius: 0.7em;
box-shadow: 0.1em 0.1em 0.6em 0.2em #e1ebfb;
right: 0.3em;
transition: all 0.3s;
}
.cssbuttons-io-button:hover .icon {
width: calc(100% - 0.6em);
}
.cssbuttons-io-button .icon svg {
width: 1.1em;
transition: transform 0.3s;
color: #97c2ff;
}
.cssbuttons-io-button:hover .icon svg {
transform: translateX(0.1em);
}
.cssbuttons-io-button:active .icon {
transform: scale(0.95);
}
.tests-area-h1{
color: #1f3f8f;
font-size: 40px;
}
/* 非核心样式 */
.card-header {
text-align: center;
}
.card-body{
text-align: center;
font-size: 14px;
}
.card-footer {
text-align: center;
}
.card2-header {
text-align: center;
}
.card2-body{
text-align: center;
font-size: 14px;
}
.card2-footer {
text-align: center;
}
/* check-box */
.box-div{
position: absolute;
left: -15px;
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
input[type=checkbox],
input[type=radio] {
--active: #28e269;
--active-inner: #fff;
--focus: 2px rgba(39, 94, 254, .3);
--border: #BBC1E1;
--border-hover: #275EFE;
--background: #fff;
--disabled: #F6F8FF;
--disabled-inner: #E1E6F9;
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border));
background: var(--b, var(--background));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
input[type=checkbox]:after,
input[type=radio]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
--b: var(--active);
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border);
}
input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
cursor: not-allowed;
}
input[type=checkbox]:hover:not(:checked):not(:disabled),
input[type=radio]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
input[type=checkbox]:focus,
input[type=radio]:focus {
box-shadow: 0 0 0 var(--focus);
}
input[type=checkbox],
input[type=radio] {
width: 21px;
}
input[type=checkbox]:after,
input[type=radio]:after {
opacity: var(--o, 0);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
--o: 1;
}
input[type=checkbox] + label,
input[type=radio] + label {
font-size: 24px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-left: 4px;
}
input[type=checkbox] {
border-radius: 7px;
}
/*设置里面的勾勾大小 */
input[type=checkbox]:after {
width: 6px;
height: 12px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 6px;
top: 2px;
transform: rotate(var(--r, 8deg));
}
input[type=checkbox]:checked {
--r: 43deg;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:after {
width: 10px;
height: 18px;
border: 3px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 11px;
top: 4px;
transform: rotate(var(--r, 8deg));
}
input[type=radio]:checked {
--r: 43deg;
}
}
</style>
----------哈哈--------
<template>
<div class="biggest-div">
<div class="AnalysisStarter">
<div class="button-container">
<el-button class="button new-analysis" @click="dialogFormVisible = true" ref="analysisStarter">新建事故分析</el-button>
</div>
<el-dialog
title="请设置您需要的分析信息"
:visible.sync="dialogFormVisible"
:before-close="beforeCloseHandler">
<div style="text-align:left">分析场景:
<input type="radio" value="1" v-model="form.analyzedScenario.id" @change="handleScenarioSelect(form.analyzedScenario.id)"/>
<label for="从事故列表选取">从事故列表选取</label>
<input type="radio" value="2" v-model="form.analyzedScenario.id" @change="handleScenarioSelect(form.analyzedScenario.id)"/>
<label for="点击上传">点击上传</label>
<scenario-upload v-show="scenario_upload_visible" @onUpload="uploadScenario" ref="scenarioUpload"></scenario-upload>
<div class="scenario-select" v-show="scenario_select_visible">
请输入事故场景ID： <el-input v-model="accident_id"></el-input>
<el-button @click="handleScenarioSelectFromLibrary">检索事故场景</el-button>
</div>
</div>
<div style="text-align:left">启用功能:
<input type="checkbox" value="10" v-model="Afunction" />
<label for="无关场景元素分析">无关场景元素分析</label>
<input type="checkbox" value="1" v-model="Afunction" />
<label for="问题模块定位">问题模块定位</label>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit">添加事故分析</el-button>
</div>
</el-dialog>
</div>
<div class="analysis-area">
<h1 class="analysis-area-h1"> 当前运行 </h1>
<el-row>
<el-col v-for="analysis in analysis1" :key="analysis.id" :span="1.8">
<router-link class="detail-link" :to="{path:'/analysis/details', query:{id: analysis.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{analysis.id}}</strong></span>
<span style="font-size: 15px"><strong> {{analysis.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看详情
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.环境要素 :</p>
<p class="text-img">.静态障碍物 : </p>
<p class="text-img">.动态 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
<p class="text-body">测试对象 : </p>
<p class="text-body">测试时长 : </p>
<p class="text-body">测试场景 : </p>
<p class="text-body">场景评估策略：</p>
<p class="text-body">目标事故处理：</p>
</div>
</div>
</router-link>
</el-col>
</el-row>
<h1 class="analysis-area-h1"> 等待运行 </h1>
<el-row>
<el-col v-for="analysis in analysis0" :key="analysis.id" :span="1.8">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{analysis.id}}</strong></span>
<span style="font-size: 15px">
<strong> {{analysis.date}}</strong>
</span>
<el-button id="start-test-button" @click="startAnalysis(analysis.id)">
<span>启动分析</span><i></i>
</el-button>
</div>
<div class="card-description">
</div>
</div>
</el-col>
</el-row>
<!-- <div>
<el-row>
<el-col
v-for="analysis in analysis0"
:key="analysis.id"
:span="8"
>
<el-card style="text-align: left;width:94%;height:70%">
<div style="float:left;width:85%;height: 100px;display: flex;flex-direction: row">
<div>
<div><span style="font-size: 20px"><strong> ID:{{analysis.id}} </strong></span></div>
<div><span> {{analysis.date}} </span></div>
</div>
<el-button style="margin-left: 40px; width: 100px; height: 50px;" @click="startAnalysis(analysis.id)">启动分析</el-button>
</div>
</el-card>
</el-col>
</el-row>
</div> -->
<h1 class="analysis-area-h1"> 运行结束 </h1>
<el-row>
<el-col v-for="analysis in analysis2" :key="analysis.id" :span="1.8">
<router-link class="detail-link" :to="{path:'/analysis/details', query:{id: analysis.id}}">
<div class="card">
<div class="card-image">
<span class="span1"><strong> ID:{{analysis.id}}</strong></span>
<span style="font-size: 15px"><strong> {{analysis.date}}</strong></span>
<button class="cssbuttons-io-button"> 查看详情
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="currentColor" d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg>
</div>
</button>
<h2>变异策略：</h2>
<p class="text-img">.环境要素 :</p>
<p class="text-img">.静态障碍物 : </p>
<p class="text-img">.动态 : </p>
<p class="text-img">.EGO:</p>
<p class="text-img">.交通设施：</p>
</div>
<div class="card-description">
<p class="text-body">测试对象 : </p>
<p class="text-body">测试时长 : </p>
<p class="text-body">测试场景 : </p>
<p class="text-body">场景评估策略：</p>
<p class="text-body">目标事故处理：</p>
</div>
</div>
</router-link>
</el-col>
</el-row>
<!-- <div>
<el-row>
<el-col
v-for="analysis in analysis2"
:key="analysis.id"
:span="8"
>
<el-card style="text-align: left;width:94%;height:70%">
<div style="float:left;width:85%;height: 100px;">
<span style="font-size: 20px"><strong>ID:{{analysis.id}}</strong></span>
<div><span> {{analysis.date}} </span></div>
</div>
</el-card>
</el-col>
</el-row>
</div> -->
</div>
</div>
</template>
<script>
import ScenarioUpload from '../test/ScenarioUpload.vue'
export default {
name: 'Analysis',
components: {ScenarioUpload},
data () {
return {
analysis1: [],
analysis0: [],
analysis2: [],
scenario_upload_visible: false, // 控制scenario-upload组件的显示和隐藏
scenario_select_visible: false,
dialogFormVisible: false, // 控制TestStarter的显示与隐藏
accident_id: '', // 事故场景列表中场景的id，由用户输入
Afunction: [],
form: {
state: {
id: '1',
type: ''
},
function: {
id: '',
type: ''
},
analyzedScenario: {
id: '',
type: ''
},
accidentFilePath: ''
},
hasSubmitted: false // 是否提交事故分析表单
}
},
mounted () {
this.loadAnalysisCases1()
this.loadAnalysisCases0()
this.loadAnalysisCases2()
this.showDialog()
},
methods: {
showDialog () {
if (this.$route.query.showDialog === 'true') {
this.dialogFormVisible = true
} else {
this.dialogFormVisible = false
}
},
loadAnalysisCases1 () {
var _this = this
this.$axios.get('/analyzedcases/state' + '/2').then(resp => {
if (resp && resp.data.code === 200) {
_this.analysis1 = resp.data.result
}
})
},
loadAnalysisCases0 () {
var _this = this
this.$axios.get('/analyzedcases/state' + '/1').then(resp => {
if (resp && resp.data.code === 200) {
_this.analysis0 = resp.data.result
}
})
},
loadAnalysisCases2 () {
var _this = this
this.$axios.get('/analyzedcases/state' + '/3').then(resp => {
if (resp && resp.data.code === 200) {
_this.analysis2 = resp.data.result
}
})
},
handleScenarioSelect (value) {
// eslint-disable-next-line eqeqeq
if (value == 1) {
this.scenario_select_visible = true
this.scenario_upload_visible = false
}
// eslint-disable-next-line eqeqeq
if (value == 2) {
this.scenario_select_visible = false
this.scenario_upload_visible = true
}
},
handleScenarioSelectFromLibrary () {
console.log('test')
console.log(this.accident_id)
var _this = this
if (this.accident_id === '') {
this.$alert('请输入事故列表中具体事故场景的id', '提示', {
confirmButtonText: '确定'
})
} else {
this.$axios.get('/accidents/searchbyid/' + this.accident_id).then(resp => {
if (resp && resp.data.code === 200) {
_this.form.accidentFilePath = resp.data.result
this.$alert('已找到该事故场景，请继续选择其他配置', '提示', {
confirmButtonText: '确定'
})
} else {
_this.form.accidentFilePath = ''
this.$alert(resp.data.result, '提示', {
confirmButtonText: '确定'
})
}
})
}
},
uploadScenario () {
this.form.accidentFilePath = this.$refs.scenarioUpload.filePath
},
clearForm () {
this.$refs.scenarioUpload.deleteUploadedFile()
this.scenario_select_visible = false
this.scenario_upload_visible = false
this.dialogFormVisible = false
this.Afunction = []
this.accident_id = ''
this.form = {
state: {
id: '1',
type: ''
},
function: {
id: '',
type: ''
},
analyzedScenario: {
id: '',
type: ''
},
accidentFilePath: ''
}
},
beforeCloseHandler (done) {
if (this.hasSubmitted === false && this.$refs.scenarioUpload.filePath !== '') { // 如果没有提交而关闭表单，则删除用户上传的场景文件
this.$refs.scenarioUpload.deleteUploadedFile()
} else {
this.hasSubmitted = false
this.clearForm()
}
done() // 关闭表单
},
onSubmit () {
if (this.form.accidentFilePath === '') {
this.$alert('请先选择事故场景！如果您选择事故场景列表中的场景，您可能没有进行检索！如果您选择从本地上传事故场景，您可能没有点击上传按钮！', '提示', {
confirmButtonText: '确定'
})
} else {
var date = new Date()
var date1 = date.toLocaleDateString()
var s = 0
for (var i = 0; i < this.Afunction.length; i++) {
s += Number(this.Afunction[i])
}
this.form.function.id = s
this.$axios
.post('/edit/analyzedcases', {
date: date1,
state: this.form.state,
function: this.form.function,
analyzedScenario: this.form.analyzedScenario,
accidentFilePath: this.form.accidentFilePath
}).then(resp => {
if (resp && resp.data.code === 200) {
this.dialogFormVisible = false
this.hasSubmitted = true
this.$router.go(0)
}
})
}
},
startAnalysis (testCaseID) {
console.log(testCaseID + ' 分析启动中')
this.$axios.post('/callscript/startanalysis', {id: testCaseID})
.then(resp => {
if (resp.data.code === 200) {
this.$alert(resp.data.message, '提示', {
confirmButtonText: '确定调用成功'
})
// 延时刷新页面
setTimeout(() => {
this.$router.go(0)
}, 3000)
} else {
this.$alert(resp.data.message, '提示', {
confirmButtonText: '确定调用失败'
})
}
})
.catch(function (error) {
console.log(error)
})
}
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Slab', serif;
}
.biggest-div{
margin-top: 0;
}
.new-analysis{
border-radius: 0 0 20px 20px;
/* float: left; */
width: 250px;
height: 80px;
font-size: larger;
background: #1f3f8f;
color: #fff;
}
.analysis-area-h1{
color: #1f3f8f;
font-size: 40px;
margin-bottom: 20px;
}
.analysis-area {
width: 1400px;
height: 750px;
margin-left: auto;
margin-right: auto;
}
.detail-link {
text-decoration: none;
color: #606266;
}
.detail-link:hover {
color: #409EFF;
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.button {
margin: 0 10px;
}
.card {
height: 250px;
width: 200px;
margin-right: 80px;
position: relative;
border-radius: 25px;
transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
/* border-radius: 1em; */
margin-bottom: 40px;
box-shadow: 0 0 20px 8px #a6bbe8;
}
/*Image*/
.card-image {
height: 100%;
width: 100%;
border-radius: 25px;
position: absolute;
color: #fff;
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
background: #0a3394;
background: linear-gradient(to top, #0a3394, #4286f4);
}
.card-image .span1{
display: inline-block;
font-size: 26px;
margin-left: 10%;
margin-right: 10%
}
/*Description */
.card-description {
display: flex;
position: absolute;
gap: 1em;
flex-direction: column;
background-color: #f5f5f5;
height: 70%;
width: 200px;
bottom: 0;
border-radius: 25px;
transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 1rem;
}
/*Text*/
.text-title {
font-size: 1.4em;
font-weight: 700;
}
.text-body {
font-size: 1em;
font-weight: 700;
/* line-height: 100%; */
color: #1f3f8f;
}
.card-image h2{
font-weight: 700;
margin-left: 10%;
}
.text-img {
font-size: 16px;
font-weight: 700;
margin-left: 8%;
margin-top: 2%;
/* padding-left: 20px; */
color: #fff;
}
.card:hover .card-description {
transform: translateY(100%);
}
/* 查看详情css */
.cssbuttons-io-button {
background: #e1ebfb;
color: #273f8a;
font-family: inherit;
padding: 0.35em;
padding-left: 1.2em;
font-size: 17px;
font-weight: 500;
border-radius: 0.9em;
border: none;
letter-spacing: 0.05em;
display: flex;
align-items: center;
box-shadow: inset 0 0 1.6em -0.6em #e1ebfb;
overflow: hidden;
position: relative;
height: 2.4em;
padding-right: 3.3em;
margin: 0.1em auto;
cursor: pointer;
}
.cssbuttons-io-button .icon {
background: rgb(61, 102, 237);
margin: 0 auto;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 2.2em;
width: 2.2em;
border-radius: 0.7em;
box-shadow: 0.1em 0.1em 0.6em 0.2em #e1ebfb;
right: 0.3em;
transition: all 0.3s;
}
.cssbuttons-io-button:hover .icon {
width: calc(100% - 0.6em);
}
.cssbuttons-io-button .icon svg {
width: 1.1em;
transition: transform 0.3s;
color: #97c2ff;
}
.cssbuttons-io-button:hover .icon svg {
transform: translateX(0.1em);
}
.cssbuttons-io-button:active .icon {
transform: scale(0.95);
}
/*测试启动按钮的样式与动画*/
#start-test-button {
padding: 10px 30px;
transition: 0.5s;
margin: 0;
position: relative;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 20px;
font-weight: 600;
border: none;
color: #409EFF;
}
#start-test-button:hover {
letter-spacing: 0.25em;
color: #4876FFFF;
box-shadow: 0 0 45px #27408B;
}
#start-test-button::before {
content: '';
position: absolute;
inset: 2px;
background: #ffffff;
}
#start-test-button span {
position: relative;
z-index: 1;
}
#start-test-button i {
position: absolute;
inset: 0;
display: block;
}
#start-test-button i::before {
content: '';
position: absolute;
border: 1px solid #409EFF;
width: 7px;
height: 4px;
top: -3.5px;
left: 80%;
background: #409EFF;
transform: translateX(-50%);
transition: 0.5s;
}
#start-test-button:hover i::before {
width: 70px;
left: 30%;
}
#start-test-button i::after {
content: '';
position: absolute;
border: 1px solid #409EFF;
width: 7px;
height: 4px;
bottom: -3.5px;
left: 20%;
background: #409EFF;
transform: translateX(-50%);
transition: 0.5s;
}
#start-test-button:hover i::after {
width: 70px;
left: 70%;
}
.el-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url("../../assets/img/bg/bg4.png");
background-size: cover;
background-repeat: no-repeat;
}
.el-dialog__header {
display: flex;
align-items: center;
background-color: #1f3f8f;
font-size: 25px;
}
.el-dialog__title {
color: #fff;
font-family: 'Roboto Slab', serif;
font-size: 23px;
}
.el-dialog__close {
font-size: 30px;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
