vue前端展示【1】

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">发现</el-menu-item>
    <el-menu-item index="3">音乐库</el-menu-item>
  </el-menu>
  <div id="singer">
    <div id="singer_info">
      <img id="singer_pic" src="../../public/demo.png" alt="a">
      <div id="singer_content">
        <p id="singer_name" style="font-size: 30px; font-weight: 600;">{{ singer_name }}</p>
        <p id="singer_introduction" style="font-size: 15px; font-weight: 200;">{{ singer_introduction }}</p>
        <div id="player_button" style="display: flex; position: absolute; bottom: 5px; left: 0px;">
          <el-button id="play" type="primary" :icon="play_icon_map[play_icon_name]" @click="click_play">{{ play_icon_name }}</el-button>
          <el-button id="like" :type="like_type" :icon="Star" @click="click_like"></el-button>
          <el-button id="more" type="default" :icon="MoreFilled" disabled></el-button>
        </div>
      </div>
    </div>
    <div id="singer_list" style="margin-top: 50px;"> 
      <el-table 
      ref="multipleTableRef"
      :data="tableData" 
      tableLayout="fixed" 
      style="width: 80%"
      @row-dblclick="(row, column, event)=>console.log(row)"
      >
      <el-table-column prop="id" label="id" width=50px align="left"/>
      <el-table-column prop="singer" label="singer" align="left"/>
      <el-table-column prop="song" label="song" align="right"/>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { VideoPlay, VideoPause, Star, MoreFilled } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  const play_icon_map = {
    '播放':VideoPlay,
    '暂停':VideoPause,
  }
  const play_icon_name = ref('播放')
  function click_play(){
    if (play_icon_name.value == '播放'){
      play_icon_name.value = '暂停'
    }else{
      play_icon_name.value = '播放'
    }
  }
  const like_type = ref('info')
  function click_like(){
    if (like_type.value == 'info'){
      like_type.value = 'danger'
    }else{
      like_type.value = 'info'
    }
  }
  const tableData = [
    {
      id: 1,
      singer: 'Tom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 2,
      singer: 'Aom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 3,
      singer: 'Rom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 4,
      singer: 'Wom',
      song: 'No. 189, Grove St, Los Angeles',
    },
  ]
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const singer_name = ref('一颗狼星')
  const singer_introduction = ref('简介：许篮心（一颗狼星），生于 2001年2月16日，中国内地女歌手，国风音乐人，独立制作人。代表作：《无人区玫瑰》《月落的声音》《海市蜃楼》《红马（女版）》《紫》等。毕业于上海戏剧学院戏曲音乐专业，6岁学习钢琴，11岁考入中国戏曲学院附中京剧音乐系学习月琴等乐器，14岁自学作曲、编曲等课程。擅长编曲、作曲、作词、乐器。其演唱非常有个人特色，演唱歌曲在短视频平台传播广泛，是各个短视频平台国风BGM引用度极高的歌手。2020年在短视频平台上发布翻唱视频，因独特的编曲风格和个人嗓音特色，走进观众视野。2021年发布单曲《红马（女版）》；同年发布单曲《紫》；2022年1月发布单曲《海市蜃楼（女版）》； 2022年发布歌曲《月落的声音》及同名作品傈僳语版；2023年1月翻唱《精卫》；同年2月发布单曲《白云喝了人间酒》；同月发布原创单曲《无人区玫瑰》；6月发布单曲《她与蝶》；11月发布原创单曲《宋词之外》。')
  singer_introduction.value = singer_introduction.value.length > 380 ? (singer_introduction.value.slice(0, 380) + '...') : (singer_introduction.value)
</script>
<style>
  .el-menu {  
    justify-content: center;  
  }
  div#singer_info {
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    display: flex;
    margin-bottom: 20px;
  }
  div#singer_content{
    position: relative;  
    margin-left: 100px;
  }
  img#singer_pic {
    margin-top: 15px;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    box-shadow: 10px 10px 5px 0px rgba(195, 190, 190, 0.75);
  }
  div#singer_list {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  el-table {
    display: flex;  
    justify-content: center;
    align-items: center;
  }
</style>