From 25250daddb28bd8076af63176a26ada2fc85e83e 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:31:20 +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/Carousel.vue         | 140 +++++++++++++++++++++++++
 src/components/ConsumerBusiness.vue | 157 ++++++++++++++++++++++++++++
 src/components/Contact.vue          | 106 +++++++++++++++++++
 src/components/Content.vue          |  45 ++++++++
 src/components/CoreProduct.vue      | 110 +++++++++++++++++++
 5 files changed, 558 insertions(+)
 create mode 100644 src/components/Carousel.vue
 create mode 100644 src/components/ConsumerBusiness.vue
 create mode 100644 src/components/Contact.vue
 create mode 100644 src/components/Content.vue
 create mode 100644 src/components/CoreProduct.vue

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
new file mode 100644
index 0000000..1979f51
--- /dev/null
+++ b/src/components/Carousel.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/ConsumerBusiness.vue b/src/components/ConsumerBusiness.vue
new file mode 100644
index 0000000..631ea98
--- /dev/null
+++ b/src/components/ConsumerBusiness.vue
@@ -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>
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
new file mode 100644
index 0000000..a023a14
--- /dev/null
+++ b/src/components/Contact.vue
@@ -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>
diff --git a/src/components/Content.vue b/src/components/Content.vue
new file mode 100644
index 0000000..cf908de
--- /dev/null
+++ b/src/components/Content.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/CoreProduct.vue b/src/components/CoreProduct.vue
new file mode 100644
index 0000000..c666519
--- /dev/null
+++ b/src/components/CoreProduct.vue
@@ -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>