<script setup>
  import { getArticleDetail } from '@/api'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const formData = ref({})
  const getData = async () => {
    const res = await getArticleDetail('company_info')
    formData.value = res.data
  }

  onLoad(() => {
    getData()
  })
</script>

<template>
  <view class="company">
    <view class="top-log">
      <image
        :src="formData.articleImg"
        mode="aspectFill"
        class="img"
      ></image>
      <text>{{ formData.articleTitle }}</text>
    </view>

    <view class="consten">
      <view class="item">
        <mp-html :content="formData.articleDetails"></mp-html>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f9f9f9;
  }

  .top-log {
    margin: 114rpx 0 96rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .img {
      width: 192rpx;
      height: 192rpx;
    }
    text {
      margin-top: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .consten {
    padding: 0 24rpx;
    .item {
      background: #ffffff;
      padding: 48rpx 32rpx;
      border-radius: 16rpx;
    }
  }
</style>
