From 08244919a96da64a9ed7dcc93bb66b58080cce30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B1=89=E5=8D=8E?= <zuozhea@163.com>
Date: Fri, 26 Sep 2025 17:32:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20src/components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.vue       |  21 +++
 src/components/Guarantee.vue    |  87 ++++++++++++
 src/components/Home.vue         |  55 ++++++++
 src/components/NavContainer.vue | 227 ++++++++++++++++++++++++++++++++
 src/components/Preson.vue       |  52 ++++++++
 5 files changed, 442 insertions(+)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Guarantee.vue
 create mode 100644 src/components/Home.vue
 create mode 100644 src/components/NavContainer.vue
 create mode 100644 src/components/Preson.vue

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..6235a9d
--- /dev/null
+++ b/src/components/Footer.vue
@@ -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>
diff --git a/src/components/Guarantee.vue b/src/components/Guarantee.vue
new file mode 100644
index 0000000..b616640
--- /dev/null
+++ b/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>
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..b0dcfd4
--- /dev/null
+++ b/src/components/Home.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/NavContainer.vue b/src/components/NavContainer.vue
new file mode 100644
index 0000000..5e91488
--- /dev/null
+++ b/src/components/NavContainer.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/Preson.vue b/src/components/Preson.vue
new file mode 100644
index 0000000..b316d4a
--- /dev/null
+++ b/src/components/Preson.vue
@@ -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>
\ No newline at end of file