<template>
  <view class="mt-[30rpx] pb-[30rpx]">
    <RoundedBorder title="生活保障">
      <template>
        <view
          class="rounded-[40rpx] bg-white px-[36rpx] pt-[38rpx] pb-[20rpx] grid grid-cols-4 gap-x-[0rpx] gap-y-[28rpx] flex flex-col"
        >
          <view class="text-[#3D3D3D] text-[26rpx]">
            六人间公寓，空调、独立卫浴、24小时热水、公共区域配备洗衣机和吹风机。
            早晨6:15-晚10:40熄灯，每3-4周放假一次，班车接送(与公交公司合作)。
          </view>

          <view class="grid grid-cols-2 gap-x-[16rpx] gap-y-[10rpx]">
            <image
              :src="item"
              mode="scaleToFill"
              v-for="(item, index) in imageList"
              :key="index"
              class="w-full h-[170rpx]"
              @click="previewImg(imageList, index)"
            />
          </view>
        </view>
      </template>
    </RoundedBorder>
  </view>
</template>

<script lang="ts" setup>
import RoundedBorder from './RoundedBorder.vue'

const imageList = [
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/bz1.png',
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/bz2.png',
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/bz3.png',
  'https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/bz4.png',
]
const previewImg = (imgs: string[], index: number) => {
  uni.previewImage({
    urls: imgs,
    current: index,
  })
}
</script>

<style lang="scss" scoped></style>
