tyyx_chart/src/pages/txwx.detail.vue

<script setup lang="ts">
import bar from './txwx/bar2.vue'
import under from '~/assets/img/home/under.webp'

const formInline = $ref({
  a: '',
  b: '',
  c: '',
  d: '',
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
]

const router = useRouter()
function back() {
  router.back()
}
</script>

<template>
  <div class="border border-hex-0A337E bg-block p-3 w-full h-full">
    <div class="flex justify-between">
      <div>
        <div>用户登录趋势</div>
        <div class="mt-2 mb-4">
          <img class="h-7px" :src="under">
        </div>
      </div>
      <el-button color="transparent" @click="back">
        返回
      </el-button>
    </div>

    <el-form :inline="true" :model="formInline" class="vars">
      <el-form-item label="学科筛选：">
        <el-select v-model="formInline.a" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="年级筛选：">
        <el-select v-model="formInline.a" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="机构筛选：">
        <el-select v-model="formInline.a" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="资源筛选：">
        <el-select v-model="formInline.a" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>

    <div>
      <span class="text-18px">总资源数：</span>
      <span class="text-30px">25.6w</span>
    </div>
    <div class="w-full h-760px">
      <bar />
    </div>
  </div>
</template>

<style>
.vars {
  --el-fill-color-blank: #0A41BF37;

}

body{
  --el-bg-color-overlay: #0A41BF37;
  --el-fill-color-light: #02133a97;
}
</style>