上传文件至 src/components

src/components/Guarantee.vue

@@ -0,0 +1,87 @@
+<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>