88 lines
2.7 KiB
Vue
88 lines
2.7 KiB
Vue
<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>
|