<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '治疗方案' },
}
</route>

<template>
  <view class="text-center">
    <view>
      <!-- 卡片 -->
      <view class="mx-2 rpx-2 left card">
        <view>
          方案名称:
          <text class="not">治疗感冒</text>
        </view>
        <view>
          方案类型:
          <text class="not">治疗感冒</text>
        </view>
        <view>处方详情</view>
        <view>
          <view>
            药品种类:
            <text class="not">治疗感冒</text>
          </view>
          <view>
            药品名称:
            <text class="not">治疗感冒</text>
          </view>
          <view>
            单次用量:
            <text class="not">1袋/1次</text>
          </view>
          <view>
            用药方法:
            <text class="not">口服</text>
          </view>
          <view>
            用药天数:
            <text class="not">3天</text>
          </view>
          <view>
            用药频率:
            <text class="not">1天2次</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'Notice',
})
</script>

<style lang="scss" scoped>
//
.card {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  margin: 20rpx;
  text-align: left;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
  transform: translateY(-5rpx);
}

.not {
  padding-left: 6rpx;
  font-size: 26rpx;
  color: #333;
}
.card-title {
  margin-bottom: 10rpx;
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
}
.card-selected {
  background-color: #e8f5e9;
  border: 2rpx solid #4caf50;
}

.card-unselected {
  background-color: #f9f9f9;
  border: 2rpx solid #ddd;
}
</style>
