上传文件至 src/components
This commit is contained in:
21
src/components/Footer.vue
Normal file
21
src/components/Footer.vue
Normal 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
87
src/components/Guarantee.vue
Normal 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
55
src/components/Home.vue
Normal 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
227
src/components/NavContainer.vue
Normal 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
52
src/components/Preson.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user