<template>
  <view style="position: relative">
    <u-image
      width="100%"
      height="824rpx"
      :src="baseUrl + '/' + Teachs[0].Url"
    />
    <view class="teach-name">
      {{ Teachs[0].teachName }}
    </view>
    <view class="see-more-container">
      <view class="menu-title">
        <view class="half-circle"></view>
        <view class="title">讲师简介</view>
      </view>
      <view class="detail">
        {{ Teachs[0].teachMsg }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useCourseStore } from "@/store/modules/courseStore";
import { baseUrl } from "@/utils/request";

const courseStore = useCourseStore();

const Teachs = computed(() => courseStore.getTeachs);
</script>

<style lang="scss" scoped>
.see-more-container {
  padding: 52rpx 32rpx 0;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 830rpx;
  background: #fbfcff;
  border-radius: 90rpx 90rpx 0rpx 0rpx;
  border-radius: 90rpx;

  .menu-title {
    width: 100%;
    display: flex;
    margin-bottom: 30rpx;

    .title {
      font-size: 34rpx;
      font-weight: 600;
      color: #222222;
      line-height: 40rpx;
    }
  }

  .detail {
    text-indent: 2em;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.8);
    height: 630rpx;
    overflow-y: auto;
  }
}
.teach-name {
  position: absolute;
  top: 594rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 184rpx;
  height: 68rpx;
  background: rgba(4, 167, 255, 0.3);
  border-radius: 16rpx;
  line-height: 68rpx;
  font-size: 34rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}
</style>
