sl-sfy-safety/src/views/setting/account/account.vue

<template>
  <PageWrapper>
    <div class="background">
      <div class="left">
        <el-input
          v-model="searchKey"
          placeholder="请输入算法信息搜索"
          style="margin-top: 24px; height: 32px"
          :suffix-icon="Search"
        />
      </div>
      <div class="right">
        <div class="right_top"></div>
      </div>
      <!-- <video :src="address" controls autoplay muted style="width: 100%; height: 100%"> </video> -->
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref, onUnmounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import useAlgo from '@/api/dashboard/algoManagement/use-algoData';
  import { Search } from '@element-plus/icons-vue';

  //调用后端数据
  const algoDatas = useAlgo();
  const { algoList, getAlgoDatas, algoId, pushLinkPrompt, pushStatement, modifyAlgoDatas } =
    algoDatas;
  //将后端拉到的数据存到algoListUse数组中进行使用
  const algoListUse = ref<any[]>([]);
  //刷新时从后端拉一次算法数组
  onMounted(() => {
    getAlgoDatas().then(() => {
      console.log('algoList', algoList.value);
      algoListUse.value = algoList.value;
    });
  });

  const address = ref('https://www.w3schools.com/html/movie.mp4');

  const searchKey = ref('');
</script>
<style lang="scss" scoped>
  .background {
    position: relative;
    height: 888px;
    background-color: white;
    display: flex;
    flex-direction: row;
    .left {
      position: relative;
      height: 100%;
      width: 31%;
      padding-left: 1.66%;
      padding-right: 1.33%;
      // background-color: green;
      border-right: #dddddd 1px solid;
      display: flex;
      flex-direction: column;
      .content {
        position: relative;
        height: 100%;
        width: 100%;
        background-color: red;
      }
    }
    .right {
      position: relative;
      height: 100%;
      width: 69%;
      display: flex;
      flex-direction: column;
      // background-color: yellow;
      .right_top {
        position: relative;
        height: 364px;
        width: 100%;
        background-color: rebeccapurple;
      }
    }
  }
</style>