自动驾驶前端

<template>
  <div>
    <el-menu
      :default-active="currentPath"
      router
      mode="horizontal"
      background-color="#fff"
      text-color="#222"
      active-text-color="red"
      style="min-width: 1300px">
        
      <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"><10label>
            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">>=30label>
            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>
    
    <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">genshionimapcta>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-4000a>
        <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 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>
    <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) Workshopp>
          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 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 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"><10label>
        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">>=30label>
        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

----------哈哈--------