From d20a81da3054015a02e9f2f6b433c7c0abd4b105 Mon Sep 17 00:00:00 2001
From: fanshuai <fanshui@huiqing-cd.com>
Date: Fri, 21 Mar 2025 15:38:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E9=A1=B5=E5=B8=83=E5=B1=80=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/footView.vue | 105 +++++++++++++++++
 src/router/index.js         |   4 +-
 src/views/home/homeView.vue | 219 +++++++++++++++++++++++++++++++++++-
 3 files changed, 325 insertions(+), 3 deletions(-)
 create mode 100644 src/components/footView.vue

diff --git a/src/components/footView.vue b/src/components/footView.vue
new file mode 100644
index 0000000..40a0619
--- /dev/null
+++ b/src/components/footView.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="foot">
+    <div class="foot-box">
+      <div class="foot-1">
+        <div>
+          <img class="img" :src="imagePath.s1" alt="tb1" />
+          <span class="img-logo">logo</span>
+        </div>
+
+        <div>致力于为企业提供专业的数字化转型解决方案，助力企业实现智能化升级。</div>
+      </div>
+      <div class="foot-2">
+        <span>解决方案</span>
+        <span> <a href="#">智慧办公</a></span>
+        <span><a href="#">智能制造</a> </span>
+        <span><a href="#">数据智能</a></span>
+        <span><a href="#">云服务</a></span>
+      </div>
+      <div class="foot-2">
+        <span>关于我们</span>
+        <span><a href="#">公司简介</a></span>
+        <span><a href="#">发展历程</a></span>
+        <span><a href="#">企业文化</a></span>
+        <span><a href="#">联系我们</a></span>
+      </div>
+      <div class="foot-2">
+        <span>联系我们</span>
+        <span>电话:400-888-8888</span>
+        <span>邮箱:huiqing@huiqing-cd.com</span>
+        <span>地址：四川成都</span>
+      </div>
+    </div>
+    <hr />
+    <div class="foot-w">@2024 Company All rights reserved</div>
+  </div>
+</template>
+<script>
+import s1 from '@/assets/images/lbt1.jpeg'
+export default {
+  data() {
+    return {
+      imagePath: {
+        s1: s1,
+      },
+    }
+  },
+}
+</script>
+
+<style scoped>
+hr {
+  border: 0;
+  height: 2px;
+  background-color: #333;
+  margin-bottom: 20px;
+}
+.foot-w {
+  color: #858484;
+  text-align: center;
+}
+.foot {
+  height: 400px;
+  background-color: #2e2e2e;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+.img {
+  width: 70px;
+  height: 50px;
+}
+.img-logo {
+  font-size: 20px;
+  color: #fff;
+}
+.foot-box {
+  width: 100%;
+  min-height: 200px;
+  background-color: #2e2e2e;
+  display: flex;
+  justify-content: space-around;
+  padding: 70px 0;
+}
+.foot-1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.foot-1 div:nth-child(2) {
+  color: #858484;
+  width: 300px;
+}
+.foot-2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  color: #858484;
+}
+.foot-2 span:nth-child(1) {
+  font-size: 20px;
+
+  color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 695d3f0..896f75a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/home/homeView.vue'
 
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -8,7 +9,8 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView,
-    }
+    },
+    
   ],
 })
 
diff --git a/src/views/home/homeView.vue b/src/views/home/homeView.vue
index 73b412c..9c2940b 100644
--- a/src/views/home/homeView.vue
+++ b/src/views/home/homeView.vue
@@ -5,8 +5,12 @@ import s2 from '../../assets/images/lbt2.jpeg'
 import s3 from '../../assets/images/lbt3.jpeg'
 import tb1 from '../../assets/images/tb1.png'
 import { ref, onMounted } from 'vue'
+import FootView from '../../components/footView.vue'
 
 export default {
+  components: {
+    FootView,
+  },
   data() {
     return {
       imagePath: {
@@ -68,7 +72,7 @@ export default {
             </div>
           </div>
         </el-header>
-        <el-main style="padding: 0 20px">
+        <el-main class="main" style="padding: 0 20px">
           <div class="carousel">
             <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
               <div class="slide" v-for="(slide, index) in slides" :key="index">
@@ -250,12 +254,222 @@ export default {
               </div>
             </div>
           </div>
+          <!--  -->
+          <div class="fan-mk">
+            <div class="fan-bt">解决方案</div>
+            <div class="fan-nr">
+              <div class="fan-left">
+                <div class="fan-wb1">金融解决方案</div>
+                <div class="fan-wb2">
+                  为金融机构提供智能风控、数据分析、客户画像等全方位解决方案，助力数字化转型
+                </div>
+                <div>
+                  <div class="fan-wb3">
+                    <el-icon class="tb"><CircleCheckFilled /></el-icon>智能风控系统
+                  </div>
+                  <div class="fan-wb3">
+                    <el-icon class="tb"><CircleCheckFilled /></el-icon>数据分析平台
+                  </div>
+                  <div class="fan-wb3">
+                    <el-icon class="tb"><CircleCheckFilled /></el-icon>客户画像系统
+                  </div>
+                </div>
+              </div>
+              <div class="fan-right"><img class="img-7" :src="imagePath.s1" alt="tb1" /></div>
+            </div>
+          </div>
+          <!--  -->
+          <div class="lx-mk">
+            <div class="lx-left">
+              <div class="lx-wb">联系我们</div>
+              <div>
+                <div class="lx-wb-1">姓名</div>
+                <div>
+                  <el-input v-model="input" style="width: 600px" placeholder="请输入您的姓名" />
+                </div>
+              </div>
+              <div>
+                <div class="lx-wb-1">邮箱</div>
+                <div>
+                  <el-input v-model="input" style="width: 600px" placeholder="请输入您的邮箱" />
+                </div>
+              </div>
+              <div>
+                <div class="lx-wb-1">需求描述</div>
+                <div>
+                  <el-input
+                    v-model="textarea"
+                    style="width: 600px"
+                    :rows="6"
+                    type="textarea"
+                    placeholder="请输入您的需求描述"
+                  />
+                </div>
+                <div class="lx-an-tj">
+                  <el-button class="lx-an-tj-1" type="primary">提交</el-button>
+                </div>
+              </div>
+            </div>
+            <div class="lx-right">
+              <div class="lx-right-haed">
+                <div class="lx-wb-2">联系方式</div>
+                <div class="lx-wb-3">
+                  <el-icon class="lx-tb-1"><PhoneFilled /></el-icon>
+                  <div>
+                    <div>电话</div>
+                    <div class="lx-dh">400-888-8888</div>
+                  </div>
+                </div>
+                <div class="lx-wb-3">
+                  <el-icon class="lx-tb-1"><Message /></el-icon>
+                  <div>
+                    <div>邮箱</div>
+                    <div class="lx-dh">huiqing@huiqing-cd.com</div>
+                  </div>
+                </div>
+                <div class="lx-wb-3">
+                  <el-icon class="lx-tb-1"><LocationInformation /></el-icon>
+                  <div>
+                    <div>地址</div>
+                    <div class="lx-dh">四川成都</div>
+                  </div>
+                </div>
+              </div>
+              <div class="lx-right-foot">
+                <div class="fan-right"><img class="img-8" :src="imagePath.s1" alt="tb1" /></div>
+              </div>
+            </div>
+          </div>
         </el-main>
+        <FootView></FootView>
       </el-container>
     </div>
   </div>
 </template>
 <style scoped>
+.lx-an-tj-1 {
+  width: 600px;
+}
+.lx-an-tj {
+  text-align: center;
+  margin-top: 30px;
+}
+.lx-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 700px;
+  margin-left: 150px;
+}
+.img-8 {
+  width: 600px;
+  height: 300px;
+  border-radius: 10px;
+}
+.lx-tb-1 {
+  font-size: 25px;
+  color: #2d3fdd;
+
+  margin-right: 5px;
+}
+.lx-wb-3 {
+  margin-left: 20px;
+  display: flex;
+}
+.lx-dh {
+  font-weight: bold;
+}
+.lx-wb-2 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 20px;
+}
+.lx-right-haed {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 250px;
+  margin-right: 300px;
+  background-color: #fff;
+  width: 600px;
+  margin-top: 50px;
+  border-radius: 15px;
+}
+.lx-wb-1 {
+  margin-bottom: 10px;
+}
+.lx-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-right: 300px;
+  height: 500px;
+  margin-top: 50px;
+  margin-left: 100px;
+}
+
+.lx-wb {
+  font-size: 25px;
+  font-weight: bold;
+}
+.lx-mk {
+  display: flex;
+
+  margin-top: 180px;
+  height: 700px;
+  background-color: #f7f6f6;
+}
+.tb {
+  color: #2d3fdd;
+  margin-right: 15px;
+}
+.fan-bt {
+  text-align: center;
+  font-weight: bold;
+  font-size: 30px;
+}
+.img-7 {
+  width: 600px;
+  height: 400px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+.fan-nr {
+  display: flex;
+  justify-content: space-around;
+}
+.fan-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 300px;
+  margin-right: 300px;
+}
+.fan-wb1 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.fan-wb2 {
+  margin-top: 10px;
+  font-weight: 100;
+  line-height: 1.5;
+  letter-spacing: 1px;
+  width: 600px;
+}
+.fan-wb3 {
+  margin-top: 10px;
+  font-weight: bold;
+  line-height: 1.5;
+  letter-spacing: 2px;
+}
+.fan-mk {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-top: 80px;
+  height: 500px;
+}
 .dt-box {
   display: flex;
   justify-content: space-around;
@@ -312,6 +526,7 @@ export default {
   margin-top: 20px;
   width: 480px;
   height: 250px;
+  border-radius: 10px;
 }
 .an-nu-1 {
   width: 200px;
@@ -378,7 +593,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  width: 550px;
+  width: 450px;
   height: 250px;
   margin-top: 60px;
   border-radius: 8px;