liuhanhua/leasepal-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传文件至 src/components

Browse Source
This commit is contained in:
刘汉华
2025-09-26 17:31:20 +08:00
parent fb53c256cb
commit 25250daddb
5 changed files with 558 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/Carousel.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<!-- html -->
<div>
<div class="carousel-box">
<el-carousel height="auto" trigger="click">
<el-carousel-item class="boxCarousel" v-for="(item, index) in list" :key="index">
<div class="relative" style="height: 100%">
<el-image :src="item.url" style="height: 100%"></el-image>
<div class="absolute absolutetxt">
<div class="f-35 carousel-name">{{$t(item.name)}}</div>
<div class="f-16 carousel-title">{{$t(item.title)}}</div>
<div class="f-20 header-btn" @click="itemClick(item)">{{$t(`carousel.text`+index)}}</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<div class="scanWin">
<div class="flex-display flex-space-around">
<div class="flex-display flex-column">
<img style="width: 100px;height: 100px;" src="../assets/images/thDownload.png" />
<div class="item-content">{{$t("app.download")}}</div>
</div>
<div class="flex-display flex-column" style="margin-left: 30px;">
<img style="width: 100px;height: 100px;" src="../assets/images/follow.png" />
<div class="item-content">{{$t("follow.us")}}</div>
</div>
</div>
<div class="flex-display" style="border-top: 1px solid #ababab;margin-top: 10px;padding-top: 10px;">
<div style="margin: 10px;">
<img style="width: 35px;height: 35px;" src="../assets/images/phone.png" />
</div>
<div style="color: #666;font-size: 14px;">
<div>
<span>{{$t("customer.service")}}：</span>
<span>+66 888000282</span>
</div>
<div>
<span>{{$t("labour")}}：</span>
<span>9:30—18:00</span>
</div>
</div>
</div>
</div>
</div>
<el-dialog width="500px" v-model="dialogVisible">
<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
<div class="f-30" style="font-weight: 600;padding: 20px 0;">{{$t("octopContact")}}</div>
<div>
<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
</div>
<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
</div>
</el-dialog>
</div>
</template>
<script lang="ts" setup name="Carousel">
import Contact from './Contact.vue'
import { ref } from 'vue'
const list = ref([
{
name: "carousel.name0",
title: 'carousel.title0',
url: new URL(`@/assets/images/1.png`, import.meta.url).href,
link: '',
btn_text: 'carousel.text0',
},
{
name: "carousel.name1",
title: 'carousel.title1',
url: new URL(`@/assets/images/2.png`, import.meta.url).href,
link: '',
btn_text: 'carousel.text1',
},
{
name: "carousel.name2",
title: 'carousel.title2',
url: new URL(`@/assets/images/3.png`, import.meta.url).href,
link: '',
btn_text: 'carousel.text2',
}
])
const dialogVisible = ref(false)
const itemClick = (item : object) => {
dialogVisible.value = true
console.log(item)
}
</script>
<style scoped lang="scss">
.carousel-box {
width: 1440px;
margin: 0 auto;
position: relative;
.boxCarousel {
height: 423px;
.absolutetxt {
left: 160px;
bottom: 130px;
.carousel-name {
font-weight: 500;
color: #333;
line-height: 49px;
}
.carousel-title {
max-width: 700px;
font-weight: 400;
color: #666;
line-height: 22px;
}
.header-btn {
font-weight: 400;
color: #fff;
line-height: 30px;
padding: 10px 60px;
background-color: #ed0000;
border-radius: 6px;
display: inline-block;
margin-top: 24px;
cursor: pointer;
}
}
}
.scanWin{
position: absolute;
right: -100px;
top: 30px;
z-index: 10;
background-color: #fff;
padding:10px 30px;
.item-content{
font-size: 14px;
color: #ed0000;
}
}
}
</style>

157
src/components/ConsumerBusiness.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div style="background-color: #fff;padding-bottom: 70px;" class="flex-display flex-column">
<div style="margin: 50px 0 30px;" class="flex-display flex-column">
<div class="font-medium f-30 bold">{{$t("business.title")}}</div>
<hr style="background-color: #ef983b;width: 60px;margin: 10px;">
<div style="color: #666;" class="f-18">{{$t("business.text")}}</div>
</div>
<div style="width: 1050px;" class="flex-display flex-column">
<div class="flex-display flex-center">
<div style="margin: 10px;" v-for="(item, index) in list" :key="index">
<div class="backgroundSize" :style="{width:item.children?'287px':'173px',height: '340px','background-image': !item.children ? 'url('+getImageUrl(index+1)+')' : 'none',}">
<div style="padding: 30px 0 10px;" class="consumption-item-title" v-if="item.name">{{$t(item.name)}}</div>
<div class="consumption-item-btn" v-if="item.btn_text">{{$t(item.btn_text)}}</div>
<div v-if="item?.children" style="height: 100%;" class="flex-display flex-column flex-space-between">
<div style="width: 100%;overflow: hidden;" v-for="(el, i) in item.children" :key="i">
<div style="height: 160px;" class="backgroundSize" :style="{ 'background-image': 'url('+getImageUrl2(index,i)+')' }">
<div style="margin-right: 130px;">
<div style="padding: 30px 0 10px;" class="consumption-item-title">{{ $t(el.name) }}</div>
<div class="consumption-item-btn">{{$t(el.btn_text)}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
{{$t("business.footer.title")}}
</div>
<div class="footer-info">
{{$t("business.footer.txt")}}
</div>
</div>
</div>
</template>
<script lang="ts" setup name="ConsumerBusiness">
import { ref } from 'vue'
const list = ref([
{
name: "business.arr.name0",
btn_text:"business.arr.btn"
},
{
name: "",
btn_text: '',
children: [
{
name: "business.arr2.name0",
btn_text: 'business.arr.btn',
},
{
name: "business.arr2.name1",
btn_text: 'business.arr.btn',
}
]
},
{
name: "business.arr.name1",
btn_text: 'business.arr.btn',
},
{
name: "business.arr.name2",
btn_text: 'business.arr.btn',
},
{
name: "business.arr.name3",
btn_text: 'business.arr.btn',
}
]
)
function getImageUrl(name:number) {
return new URL(`../assets/images/0${name}.png`, import.meta.url).href
}
function getImageUrl2(name:number,i:number) {
return new URL(`../assets/images/${name}_${i + 1}.png`, import.meta.url).href
}
</script>
<style lang="scss" scoped>
.backgroundSize{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
}
.consumption-item-title {
font-weight: 500;
font-size: 18px;
color: #333;
display: inline-block;
max-height: 80px;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制为两行 */
-webkit-box-orient: vertical;
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分用省略号表示 */
white-space: normal;
}
.consumption-item-btn {
padding: 7px 0;
border-radius: 19px;
border: 1px solid #333;
cursor: pointer;
box-sizing: border-box;
font-size: 12px;
width: 110px;
color: #333;
margin: 0 auto;
text-align: center;
}
.footer {
font-weight: 500;
font-size: 18px;
color: #666;
line-height: 25px;
margin-top: 33px;
position: relative;
display: inline-block;
&::before {
display: inline-flex;
content: "";
height: 1px;
width: 106px;
background: #979797;
vertical-align: middle;
margin-right: 80px;
}
&::after {
display: inline-flex;
content: "";
height: 1px;
width: 106px;
background: #979797;
vertical-align: middle;
margin-left: 80px;
}
}
.footer-info {
font-weight: 400;
font-size: 14px;
color: #666;
line-height: 19px;
margin-top: 10px;
}
</style>

106
src/components/Contact.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<div>
<div class="relative w-[100%] h-[410px] mx-auto my-0 mt-[57px] rounded-[8px] bg-[url('@/assets/images/contact.png')] bg-[length:100%_100%]">
<div class="absolute w-[164px] top-[65px] left-[350px] text-start">
<div class="font-medium text-[18px] leading-[24px] text-[#111]">提交步骤</div>
<div class="font-normal text-[16px] leading-[22px] text-[#393939]">拨打咨询电话，立即 领取开店大礼包</div>
</div>
<div class="absolute left-[100px] bottom-[20px]" style="display: flex;align-items: center;">
<div
class="inline-block w-[20px] h-[20px] mr-[8px] bg-[url('@/assets/images/mobile.png')] bg-[length:100%_100%]"></div>
<div>
<div class="font-normal text-[16px] text-[#000]">
Thalland +66 0931113038
</div>
<div class="font-normal text-[16px] text-[#000]">
Chinea +86 18957129897
</div>
</div>
<div class="font-normal text-[16px] text-[#000] leading-[28px] mx-[8px]">9:30 - 18:00</div>
</div>
<div class="w-[255px] mr-[147px] float-right">
<div class="my-[30px] text-[21px] font-medium leading-[30px] text-[#232323] text-start">立即预约</div>
<el-form ref="form" :model="form" label-width="0px">
<el-form-item>
<el-input placeholder="请输入您的姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入企业名称" v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入手机号" v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入意向类目，如：手机" v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button class="submit" type="primary" @click="onSubmit">提交信息</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script lang="ts" setup name="Contact">
import { ref } from 'vue'
const form = ref({
name:''
})
const list = ref([
{
title: "免押风控",
content: '接入支付宝信用支付体系，为用户减免押金的同时解决商户的发货信任问题。结合章鱼自研红盾风控，提供超1000条风控信息及AI人工建议，快速甄别用户资质，把控风险，稳健经营。'
},
{
title: "司法仲裁",
content: '与仲裁委系统级对接，案件证据一键提交审理，从提交至判决低至一个月时间内;同时可采用法院强制执行，失信人等多维司法途径保障资产安全。'
},
{
title: "区块链及保险",
content: '永久存证，不可篡改；可购买人保，财产损失后保险赔偿。'
},
{
title: "锁机",
content: '章鱼推出的苹果锁机服务，贴合商家痛点，针对性地解决手机租赁逾期坏账问题。'
}
]
)
const onSubmit = () => {
}
</script>
<style lang="scss" scoped>
.title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333;
line-height: 25px;
}
.content {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #999;
line-height: 21px;
margin-top: 14px;
height: 105px;
}
:deep(.el-button.submit) {
background-color: #ed0000;
border-color: #ed0000;
line-height: 27px;
padding: 12px 24px;
font-size: 18px;
font-weight: 400;
}
:deep(.el-input__inner) {
border-color: #2c1717;
}
</style>

45
src/components/Content.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="common-layout">
<el-container>
<el-header class="headerCss">
<NavContainer></NavContainer>
</el-header>
<el-main style="padding: 0;" :style="{ zoom: scaleva }">
<RouterView></RouterView>
</el-main>
<el-footer style="padding: 0;">
<Footer></Footer>
</el-footer>
</el-container>
</div>
</template>
<script lang="ts" setup name="Content">
import NavContainer from './NavContainer.vue'
import Footer from './Footer.vue'
import { RouterView } from 'vue-router'
import { ref, onMounted } from 'vue';
const scaleva = ref()
const bodyScale = () => {
const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
const scale = devicewidth / 1920 // 分母——设计稿的尺寸
scaleva.value = scale
}
onMounted(() => {
bodyScale()
window.onresize = () => {
return (() => {
bodyScale()
})()
}
})
</script>
<style lang="scss" scoped>
.headerCss {
background-color: $title-background-color;
display: flex;
justify-content: center;
align-items: center;
}
</style>

110
src/components/CoreProduct.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="flex-display flex-column">
<div style="margin: 50px;" class="text-center f-30 bold">{{$t("coreProduct.title")}}</div>
<div :style="{
width: '1050px',
height: '335px',
backgroundColor: '#fff',
padding: '30px',
backgroundImage:'url('+getImageUrl()+')',
backgroundRepeat:'no-repeat',
backgroundPosition: 'right 250px center'
}">
<ul class="product-contents">
<li>
<div class="orangeCircle"></div> {{$t("coreProduct.li1")}}
</li>
<li>
<div class="orangeCircle"></div> {{$t("coreProduct.li2")}}
</li>
<li>
<div class="orangeCircle"></div> {{$t("coreProduct.li3")}}
</li>
<li>
<div class="orangeCircle"></div> {{$t("coreProduct.li4")}}
</li>
</ul>
<div style="margin-top: 28px;">
<el-button class="submit" type="primary" @click="itemClick()">{{$t("coreProduct.but")}}</el-button>
</div>
</div>
<el-dialog width="500px" v-model="dialogVisible">
<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
<div class="f-30" style="font-weight: 600;padding: 20px 0 0;">{{$t("octopContact")}}</div>
<div>
<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
</div>
<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
</div>
</el-dialog>
</div>
</template>
<script lang="ts" setup name="CoreProduct">
import { ref } from 'vue'
import store from '../assets/images/store.png'
const dialogVisible = ref(false)
const form = ref({
})
function getImageUrl() {
return new URL(`../assets/images/store.png`, import.meta.url).href
}
const itemClick = () => {
dialogVisible.value = true
}
</script>
<style lang="scss" scoped>
.title {
font-weight: 500;
font-size: 18px;
color: #333;
line-height: 25px;
}
.content {
font-weight: 400;
font-size: 12px;
color: #999;
line-height: 21px;
margin-top: 14px;
height: 105px;
}
.product-contents {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin-top: 8px;
font-size: 14px;
color: #999;
line-height: 20px;
display: flex;
align-items: center;
grid-column-gap: 8px;
-webkit-column-gap: 8px;
column-gap: 8px;
.orangeCircle {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: red;
}
}
}
.submit {
background-color: #ed0000;
border-color: #ed0000;
display: inline-block;
font-weight: 400;
height: 40px;
width: 100px;
}
</style>