<template>
  <div style="height:700px; background-color: #fff;margin-top: 90px;padding-bottom: 90px;" class="flex-display flex-column">
    <div style="margin: 50px 0 30px;" class="flex-display flex-column">
      <div class="text-center f-30 bold">{{$t("guarantee.title")}}</div>
      <hr style="background-color: #ef983b;width: 60px;margin: 10px;">
      <div style="color: #666;" class="f-18">{{$t("guarantee.txt")}}</div>
    </div>
    <div>
      <div class="flex-display" style="background-color: #fff;align-items: start;">
        <div style="width: 249px;background-color: #f9f8f8;margin: 10px;border-radius: 10px;" v-for="(item, index) in list" :key="index">
          <div class="text-start">
            <img style="width: 249px;height: 179px;" v-if="index == 0" src="../assets/images/aa.png" />
            <img style="width: 249px;height: 179px;" v-if="index == 1" src="../assets/images/bb.png" />
            <img style="width: 249px;height: 179px;" v-if="index == 2" src="../assets/images/cc.png" />
            <img style="width: 249px;height: 179px;" v-if="index == 3" src="../assets/images/dd.png" />
            <div style="padding: 20px;">
              <div class="title" v-if="item.title">{{ $t(item.title) }}</div>
              <div class="content" :class="showcont && showindex == index?'':'content2' " @mouseover="mouseover(index)" @mouseleave="mouseleave" v-if="item.content">{{ $t(item.content) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup name="Guarantee">
import { ref } from 'vue'
const showcont = ref(false)
const showindex = ref(0)
const list = ref([
  {
    title: "guarantee.arr.title0",
    content: 'guarantee.arr.content0'
  },
  {
    title: "guarantee.arr.title1",
    content: 'guarantee.arr.content1'
  },
  {
    title: "guarantee.arr.title2",
    content: 'guarantee.arr.content2'
  },
  {
    title: "guarantee.arr.title3",
    content: 'guarantee.arr.content3'
  }
]
)
const mouseover = (index:number) => {
		showindex.value = index
		showcont.value = true
}
const mouseleave = () => {
		showcont.value = false
}

</script>
<style lang="scss" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: #333;
	height: 50px;
}

.content {
  font-weight: 400;
  font-size: 12px;
  color: #999;
  line-height: 22px;
  min-height: 130px;
}
.content2{
	display: -webkit-box;
	-webkit-line-clamp: 6; /* 限制为两行 */  
	-webkit-box-orient: vertical;  
	overflow: hidden; /* 隐藏超出部分 */  
	text-overflow: ellipsis; /* 超出部分用省略号表示 */  
	white-space: normal; /* 允许换行 */  
}
.text-start{
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
</style>
