修改

components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     Footer: typeof import('./src/components/home/Footer.vue')['default']
     Header: typeof import('./src/components/home/header.vue')['default']
+    Liu: typeof import('./src/components/liu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/api/user.ts

@@ -21,3 +21,20 @@ export const loginOut = () => {
 export const getUserInfo = () => {
   return request.get({ url: "/admin-api/system/auth/get-permission-info" });
 };
+
+// 密码登陆
+
+type UserLoginVO = {
+  username: string;
+  password: string;
+  captchaVerification: string;
+  socialType?: string;
+  socialCode?: string;
+  socialState?: string;
+};
+export const login = (data: UserLoginVO) => {
+  return request.post({
+    url: "/admin-api/system/auth/login",
+    data,
+  });
+};

src/components/home/CardItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="h-[850px] w-full min-w-0">
+  <el-card class="h-[850px] w-full min-w-0 relative">
     <div
       class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
       :style="{ backgroundImage: `url(${bg})` }"
@@ -22,11 +22,24 @@
         :key="idx"
         :name="String(idx)"
         :title="i.label"
+        class="no-border-collapse-item"
       >
         <div class="text-[#606266]">{{ i.label }}</div>
+
+        <!-- 添加查看按钮 -->
+        <div class="mt-3">
+          <el-button
+            type="primary"
+            size="small"
+            @click="handleView(i)"
+            class="bg-[#02409b]! border-none! w-20! rounded-none!"
+          >
+            查看
+          </el-button>
+        </div>
         <template #title>
-          <div class="flex items-center min-w-0 flex-1">
-            <span class="truncate">{{ i.label }}</span>
+          <div class="flex items-center min-w-0 flex-1 collapse-title">
+            <span class="truncate text-sm font-bold">{{ i.label }}</span>
             <el-tag
               v-if="i.tag"
               size="small"
@@ -39,12 +52,18 @@
         </template>
       </el-collapse-item>
     </el-collapse>
+
+    <div
+      class="absolute bottom-0 left-0 w-full h-36 bg-contain bg-center no-repeat"
+      :style="{ backgroundImage: `url(${bg2[0]})` }"
+    ></div>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { motion } from "motion-v";
 
 const router = useRouter();
 
@@ -55,7 +74,7 @@ const props = defineProps<{
   desc: string;
   items: Item[];
   bg: string;
-
+  bg2: string[];
   id: string;
 }>();
 
@@ -70,6 +89,25 @@ const goDetail = () => {
     router.push({ path: "/chatbi" });
   }
 };
+
+// 处理查看按钮点击事件
+const handleView = (item: Item) => {
+  console.log("查看", item);
+  // 如果有自定义路径，则跳转到指定路径
+
+  if (item.label === "OA办公系统") {
+    window.open("https://yfoa.keruioil.com", "_blank");
+  }
+  if (item.label === "设备管理系统 (PMS)") {
+    window.open("https://aims.deepoil.cc", "_blank");
+  }
+  if (item.label === "中航北斗智慧管理系统") {
+    window.open("https://zhbdgps.cn", "_blank");
+  }
+  if (item.label === "客户管理(CRM)") {
+    window.open("https://www.xiaoshouyi.com/sfa", "_blank");
+  }
+};
 </script>
 
 <style scoped>
@@ -100,12 +138,22 @@ const goDetail = () => {
   width: 100%;
   min-width: 0;
   overflow: hidden;
+  border-bottom: none !important;
+}
+
+:deep(.el-collapse-item):last-child .el-collapse-item__header {
+  border-bottom: none !important;
 }
 
 :deep(.el-collapse-item) .el-collapse-item__wrap {
   padding: 0 12px 10px;
   width: 100%;
   min-width: 0;
+  border-bottom: none !important;
+}
+
+:deep(.el-collapse-item):last-child .el-collapse-item__wrap {
+  border-bottom: none !important;
 }
 
 :deep(.el-collapse-item__content) {
@@ -114,4 +162,15 @@ const goDetail = () => {
   overflow: hidden;
   word-wrap: break-word;
 }
+
+/* 折叠项标题样式 */
+.collapse-title {
+  position: relative;
+  overflow: hidden;
+}
+
+.collapse-title:hover {
+  color: #02409b;
+  transition: all 0.3s ease;
+}
 </style>

src/views/index.vue

@@ -2,7 +2,6 @@
   <div class="bg-white">
     <Header />
 
-   
     <section class="relative w-full h-[56vh] md:h-[70vh] overflow-hidden mt-15">
       <video
         class="absolute inset-0 w-full h-full object-cover"
@@ -13,10 +12,8 @@
         playsinline
       ></video>
       <div class="absolute inset-0 bg-black/40"></div>
-      <div
-        class="relative z-10 max-w-[1200px] mx-auto h-full px-4 flex items-center"
-      >
-        <div class="text-white max-w-3xl">
+      <div class="relative z-10 w-full mx-auto h-full px-20 flex items-center">
+        <div class="text-white max-w-4xl">
           <h1 class="text-2xl md:text-4xl font-bold leading-tight">
             山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
           </h1>
@@ -46,8 +43,8 @@
       <p class="text-2xl">提供多维度、更可靠的数智化服务</p>
     </section>
 
-    <section class="max-w-[1200px] mx-auto px-2 mb-8 mt-5">
-      <div class="grid gap-5 grid-cols-1 md:grid-cols-3 xl:grid-cols-3">
+    <section class="w-full mx-auto px-4 md:px-20 mb-8 mt-5">
+      <div class="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
         <CardItem
           v-for="card in cards"
           :title="card.title"
@@ -55,10 +52,11 @@
           :desc="card.desc"
           :items="card.items"
           :bg="card.bg"
+          :bg2="cardBgs"
         />
       </div>
     </section>
-    
+
     <Footer />
   </div>
 </template>
@@ -71,6 +69,8 @@ import img1 from "@/assets/images/1.jpg";
 import img2 from "@/assets/images/2.jpg";
 import img3 from "@/assets/images/3.jpg";
 import bgVideo from "@/assets/bg.mp4";
+import bg2 from "@/assets/images/e4.png";
+import g1 from "@/assets/images/g1.png";
 
 type Card = {
   name: string;
@@ -80,7 +80,7 @@ type Card = {
   items: Array<{ label: string; tag?: "新" | "热" }>;
   id: string;
 };
-
+const cardBgs = [bg2, g1, bg2];
 const cards: Card[] = [
   {
     name: "device",
@@ -89,6 +89,7 @@ const cards: Card[] = [
     id: "management",
     bg: img1,
     items: [
+      { label: "OA办公系统" },
       { label: "经营驾驶舱", tag: "新" },
       { label: "战略解码与执行" },
       { label: "财务管理(收入、成本、应收账款)" },
@@ -107,6 +108,7 @@ const cards: Card[] = [
     id: "command",
     bg: img2,
     items: [
+      { label: "中航北斗智慧管理系统" },
       { label: "智能钻井系统", tag: "热" },
       { label: "智能压裂系统" },
       { label: "智能注气系统" },

src/views/login.vue

@@ -84,8 +84,9 @@ import { nextTick, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import logo from "@/assets/images/logo.png";
 import bgImage from "@/assets/images/bg.png";
-import { socialLogin } from "@/api/user";
+import { login } from "@/api/user";
 import * as authUtil from "@/utils/auth";
+import { encrypt } from "@/utils/jsencrypt";
 
 type LoginForm = {
   username: string;
@@ -111,8 +112,22 @@ const onSubmit = async () => {
     if (!valid) return;
     loading.value = true;
     try {
-      // TODO: 调用登录接口
-      await new Promise((r) => setTimeout(r, 800));
+      const res = await login({
+        username: form.username,
+        password: form.password,
+        captchaVerification: "",
+      });
+
+      authUtil.setToken(res);
+
+      if (form.remember) {
+        authUtil.setLoginForm(form);
+      } else {
+        authUtil.removeLoginForm();
+      }
+
+      window.location.href = "/";
+
       ElMessage.success("登录成功");
     } finally {
       loading.value = false;