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:32:14 +08:00
parent 247536cea5
commit 08244919a9
5 changed files with 442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="footer-box">
<div style="color: #fff;">{{$t("footer.title")}}</div>
</div>
</template>
<script lang="ts" setup name="Footer">
</script>
<style scoped lang="scss">
.footer-box {
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
display: flex;
justify-content: center;
}
</style>

87
src/components/Guarantee.vue Normal file
View File

@@ -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>

55
src/components/Home.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<!-- html -->
<div>
<Carousel></Carousel>
<ConsumerBusiness></ConsumerBusiness>
<CoreProduct></CoreProduct>
<Guarantee></Guarantee>
</div>
</template>
<script lang="ts" setup name="Home">
import Carousel from './Carousel.vue'
import ConsumerBusiness from './ConsumerBusiness.vue'
import CoreProduct from './CoreProduct.vue'
import Guarantee from './Guarantee.vue'
</script>
<style scoped lang="scss">
.carousel-box {
width: 1440px;
margin: 0 auto;
}
.boxCarousel {
height: 423px;
border: 1px solid red;
.absolutetxt {
left: 160px;
bottom: 130px;
.carousel-name {
font-weight: 500;
color: #333;
line-height: 49px;
}
.carousel-title {
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;
}
}
}
</style>

227
src/components/NavContainer.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div class="navCont" v-if="isMenuVisible">
<el-row class="flex-display flex-space-between">
<el-col :span="10">
<div class="flex-display">
<div style="height: 3.75rem;">
<img class="logo" src="@/static/logotitle.png" />
</div>
<!-- <span class="f-24 bold">{{$t("logoTitle")}}</span> -->
<span class="f-12 fonsColor">{{$t("home.title.txt")}}</span>
</div>
</el-col>
<el-col :span="14">
<div class="flex-display flex-space-around">
<div class="f-12" v-for="item in navList" :key="item.name">
<span v-if="item.name == 'contact'" @click="itemClick()" class="nav-font">{{
$t("home."+item.name) }}</span>
<router-link v-else :to="item.type" class="nav-font">{{$t("home."+item.name) }}</router-link>
</div>
<el-dropdown @command="changeLanguage">
<span class="el-dropdown-link f-12">
{{$t("Language")}}
<el-icon class="el-icon--right">
<ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="item.value" v-for="(item, index) in languagesList" :key="index">
<div class="flex-display f-12">
<img class="imgClass" :src="item.icon" />
<span>{{ item.name }}</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-col>
</el-row>
</div>
<div style="width: 100%;min-width: 21.875rem;" v-else>
<el-row class="flex-display flex-space-between">
<el-col :span="23">
<div class="flex-display">
<div style="height: 3.75rem;">
<img class="logo" src="@/static/logotitle.png" />
</div>
<!-- <span class="f-24 bold">{{$t("logoTitle")}}</span> -->
<span class="f-12 fonsColor">{{$t("home.title.txt")}}</span>
</div>
</el-col>
<el-col :span="1">
<el-icon>
<Expand @click="drawer = true" />
</el-icon>
</el-col>
</el-row>
</div>
<el-drawer v-model="drawer" :show-close="false" :with-header="false">
<div style="margin-bottom: 0.625rem;" class="f-20 bold">{{$t("home.navigation")}}</div>
<div style="margin-bottom: 0.625rem;" class="f-14" v-for="item in navList" :key="item.name">
<router-link :to="item.type" class="nav-font">{{$t("home."+item.name) }}</router-link>
</div>
<div style="margin-bottom: 0.625rem;" class="f-20 bold">{{$t("home.language.switching")}}</div>
<el-dropdown @command="changeLanguage">
<span class="el-dropdown-link f-14">
{{$t("Language")}}
<el-icon class="el-icon--right">
<ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :command="item.value" v-for="(item, index) in languagesList" :key="index">
<div class="flex-display f-12">
<img class="imgClass" :src="item.icon" />
<span>{{ item.name }}</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-drawer>
<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>
</template>
<script lang="ts" setup name="NavContainer">
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
// 媒体查询控制菜单显示隐藏
const isMenuVisible = ref(true)
const toggleMenu = () => {
isMenuVisible.value = !isMenuVisible.value;
}
const handleResize = () => {
if (window.innerWidth < 768) { //当屏幕宽度小于768px时
isMenuVisible.value = false
} else {
isMenuVisible.value = true
drawer.value = false
}
}
// 国际化语言
const navList = ref([
{
name: "page",
type: '/'
},
{
name: "service",
type: '/'
},
{
name: "contact",
type: '/'
},
{
name: "problem",
type: '/'
},
]
)
const { locale } = useI18n();
const languagesList = ref([
{
"name": "中文",
"icon": "https://static.octoprental.com/20250414/0bf5f222-54f1-4fff-b1d8-d55d4ebeac51",
"value": "zh"
},
{
"name": "English",
"icon": "https://static.octoprental.com/20250415/12306c20-15eb-49d6-bb93-e8e5d58339f0",
"value": "en"
},
{
"name": "ภาษาไทย",
"icon": "https://static.octoprental.com/20250415/3ff4eb04-a1a0-47e9-9411-38849167fcf2",
"value": "th"
}
])
const changeLanguage = (command : string) => {
locale.value = command
// 赋予浏览器标识语言种类，其实并无卵用
document.documentElement.lang = command
localStorage.setItem('lang', command)// 缓存语言
}
// meun菜单
const drawer = ref(false)
const dialogVisible = ref(false)
const itemClick = () => {
dialogVisible.value = true
}
onMounted(() => {
window.addEventListener('resize', handleResize);
handleResize(); // 初始调用一次以设置正确状态
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
</script>
<style scoped lang="scss">
@media (min-width: 768px) {
.navCont {
width: 100%;
}
}
@media (min-width: 992px) {
.navCont {
width: 80%;
}
}
@media (min-width: 1200px) {
.navCont {
width: 60%;
}
}
.fonsColor {
color: $title-text-color;
margin-left: 0.625rem;
}
.nav-font {
color: $title-text-color;
cursor: pointer;
&:hover {
color: $active-hover;
}
}
.el-dropdown-link {
cursor: pointer;
color: $title-text-color;
display: flex;
align-items: center;
}
.logo {
height: 100%;
// width: 2.1875rem;
// height: 2.1875rem;
margin-right: 0.375rem;
border-radius: 0.5rem;
}
.imgClass {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.375rem;
}
</style>

52
src/components/Preson.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<!-- html -->
<div class="Person">
<h2>汽车信息：一辆{{car.brand}}车，价值{{car.price}}万</h2>
<button @click="changePrice">修改价格</button>
<br>
<h2>游戏列表</h2>
<ul>
<li v-for="item in games" :key="item.id">{{item.name}}</li>
</ul>
<button @click="changeFirstName">修改第一个游戏的名字</button>
<hr>
<h2>当前求和为：{{sum}}</h2>
<button @click="changeSum">点我sum加1</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 引入响应式条件
import {ref,reactive} from 'vue'
// 数据
let car = ref({brand:'奔驰',price:100})
let games =reactive([
{id:'111',name:'王者荣耀'},
{id:'222',name:'元神'},
{id:'333',name:'三国志'}
])
let sum = ref(0)
// 方法
function changePrice(){
car.value.price += 10
}
function changeFirstName(){
games[0].name = '流星蝴蝶剑'
}
function changeSum(){
sum.value +=1
}
</script>
<style scoped>
/* 样式 */
.Person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
li{
font-size: 20px
}
</style>