<template>
  <view class="supervision">
    <view class="detail-des" v-html="detailDesHtml"> </view>
    <view class="btn-open">
      <wd-button class="open-btn" @click="openService">开启督学</wd-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';

const detailDesHtml = ref('');

onLoad(options => {
  console.log(options);
  // 向后端请求html字符串
  const id = options.id;
  // 假设后端返回的html字符串
  detailDesHtml.value = `<H1>html</H1>`;
});
const openService = () => {
  console.log('openService');
};
</script>
<style scoped lang="scss">
.supervision {
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
  .btn-open {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #fff;
    bottom: 0;
    padding-top: 10px;
    .open-btn {
      display: block;
      width: 220px;
      border-radius: 10px !important;
      margin: auto;
      margin-bottom: calc(20px + env(safe-area-inset-bottom));
    }
  }
}
::v-deep .wd-tabs__nav {
  height: 60px;
}
::v-deep .wd-tabs__nav-container {
  padding: 12px;
}
::v-deep .wd-tabs__container {
  padding: 0 12px;
}
::v-deep .wd-tabs {
  background-color: transparent;
}

::v-deep .wd-tabs__nav-item {
  box-sizing: border-box;
  margin: 0 3px;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  transition: none;
  background-color: #f9f9fb;
}
::v-deep .wd-tabs__line {
  display: none;
}

::v-deep .wd-tabs__nav-item.is-active {
  background-color: #615dff;
  color: #f1f1f1;
  position: relative;
  z-index: 1;
  &::after {
    display: block;
    content: ' ';
    width: 13px;
    height: 13px;
    background-color: #615dff;
    border-radius: 1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0) rotateZ(45deg);
    bottom: -3px;
    z-index: 2;
  }
}
</style>
