<template>
  <view class="tool-wrap">
    <video class="tool-video" src="" />

    <view class="tool-footer">
      <view class="uni-font-16 font-bold u-m-b-16">百人中使用药物结果分布情况</view>
      <view class="flex justify-between">
        <view v-for="(item, index) in list" :key="index" class="tool-footer-item">
          <image class="image-icon" :src="item.image" mode="scaleToFill" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const list = [
  { image: '/static/images/car.png', text: '改善' },
  { image: '/static/images/car.png', text: '正常或接近正常' },
  { image: '/static/images/car.png', text: '严重残疾或死亡' },
  { image: '/static/images/car.png', text: '无明显变化' },
  { image: '/static/images/car.png', text: '脑出血后早期加重' },
  { image: '/static/images/car.png', text: '加重' },
]
</script>


<style lang="scss" scoped>
.tool-wrap {
  padding: 24px;

  .tool-video {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    height: 400px;
  }

  .tool-footer {
    .tool-footer-item {
      display: flex;
      align-items: center;
      color: #666
    }

    .image-icon {
      width: 24px;
      height: 24px;
      margin-right: 3px;
    }
  }
}
</style>
