<template>
  <el-col :span="24" class="main">
    <el-row class="head">
      <el-col :span="8" class="left">
        <el-image :src="data.imgUrl" class="image"></el-image>
        <span>{{ webInfo.zhTitle }}-管理中心</span>
      </el-col>
      <el-col :span="16" class="right">
        <span>{{ data.user.name || '游客' }}</span>
        <el-button type="danger" @click="logout()">退出登录</el-button>
      </el-col>
    </el-row>
  </el-col>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { Ref } from 'vue';
import { studio_style_Info } from '@/layout/site';
// let webInfo = studio_style_Info.webInfo;
const data = reactive({
  name: '基础动态研究管理平台',
  user: { name: '王泓璎' },
  imgUrl: new URL('@/assets/image/logo.png', import.meta.url).href,
});
const logout = () => {};
console.log(studio_style_Info);
</script>

<style scoped>
.head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px 0 5px;
}
.left {
  line-height: 60px;
}
.left span {
  display: inline-block;
  margin: 0 10px;
  font-size: 24px;
  color: var(--vt-c-white);
  font-weight: bold;
  font-family: cursive;
}
.left .image {
  background: var(--vt-c-white);
  height: 32px;
  width: 32px;
  border-radius: 90px;
  top: 5px;
}
.right {
  text-align: right;
  /* line-height: 60px; */
  word-break: keep-all;
  white-space: nowrap;
}
.right i {
  position: relative;
  top: 5px;
  margin: 0px 15px;
  font-size: 30px;
  color: var(--vt-c-white);
}
.right span {
  color: var(--vt-c-white);
  font-size: 16px;
  padding: 0 15px 0 0px;
}
</style>
