专利维权等

src/router/modules/ip.route.ts

@@ -12,6 +12,7 @@ const importPath = {
   invalidPage: () => import("@/views/ip/invalid.vue"),
   reviewPage: () => import("@/views/ip/review.vue"),
   enforcementPage: () => import("@/views/ip/enforcement.vue"),
+  enforcementCreate: () => import("@/views/ip/enforcement_create.vue"),
   operationsPage: () => import("@/views/ip/operations.vue"),
 };
 
@@ -96,6 +97,14 @@ const ipRoutes: Array<RouteRecordRaw> = [
       title: "专利维权",
     },
   },
+  {
+    path: "/enforcement/create",
+    name: "enforcementCreate",
+    component: importPath["enforcementCreate"],
+    meta: {
+      title: "专利维权信息填写",
+    },
+  },
   {
     path: "/operations",
     name: "operations",

src/views/ShareInnovate/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="container">
+    <el-tabs tab-position="right" v-model="activeName" class="container-tabs">
+      <el-tab-pane label="共享实验室" name="共享实验室"> </el-tab-pane>
+      <el-tab-pane label="共享仪器设备" name="共享仪器设备"></el-tab-pane>
+      <el-tab-pane label="检测服务" name="检测服务"></el-tab-pane>
+      <el-tab-pane label="科研平台" name="科研平台"></el-tab-pane>
+    </el-tabs>
     <!-- 实验室 -->
-    <div class="laboratory">
+    <div class="laboratory" v-if="activeName === '共享实验室'">
       <div class="title">共享实验室</div>
       <div class="slogan">开放创新空间，共享实验室资源</div>
       <div class="content">
@@ -23,15 +29,38 @@
       </div>
     </div>
     <!-- 仪器 -->
-    <div class="instrument"></div>
+    <div class="instrument" v-if="activeName === '共享仪器设备'">
+      <div class="title">共享仪器设备</div>
+      <div class="slogan">探索无限可能，共享设备助力科研创新</div>
+      <div class="content">
+        在科研和技术开发的道路上，高质量的实验设备是不可或缺的。我们提供广泛的共享设备资源，旨在降低研究门槛，促进学术界和工业界的创新合作。
+      </div>
+      <div class="info">
+        <div class="item">
+          <img class="item-icon" src="@/assets/icon/si/phone.png" alt="#" />
+          <div class="item-label">400-123-4567</div>
+        </div>
+        <div class="item">
+          <img class="item-icon" src="@/assets/icon/si/email.png" alt="#" />
+          <div class="item-label">service@shareddevices.com</div>
+        </div>
+        <div class="item">
+          <img class="item-icon" src="@/assets/icon/si/address.png" alt="#" />
+          <div class="item-label">北京市海淀区科技园区创新路88号</div>
+        </div>
+      </div>
+    </div>
     <!-- 检测服务 -->
-    <div class="overall"></div>
+    <div class="overall" v-if="activeName === '检测服务'"></div>
     <!-- 达人 -->
-    <div class="expert"></div>
+    <div class="expert" v-if="activeName === '科研平台'"></div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import { ref } from "vue";
+const activeName = ref("共享实验室");
+</script>
 
 <style lang="scss" scoped>
 .container {
@@ -39,10 +68,16 @@
   flex-direction: column;
   align-items: center;
   width: 100vw;
+  position: relative;
+  .container-tabs {
+    position: absolute;
+    right: 3rem;
+    top: 20rem;
+  }
   .laboratory {
     width: 100vw;
-    height: 45.6rem;
-    background-image: url("@/assets/pic/innovate/bg_01.png");
+    min-height: calc(100vh - 4rem);
+    background-image: url("@/assets/innovate/1.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -90,21 +125,77 @@
   }
   .instrument {
     width: 100vw;
-    height: 45.6rem;
-    background-image: url("@/assets/pic/innovate/bg_02.png");
+    min-height: calc(100vh - 4rem);
+    background-image: url("@/assets/innovate/2.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
+    box-sizing: border-box;
+    padding-top: 30rem;
+    padding-left: 6.25rem;
+    color: #fff;
+    .title {
+      font-size: 2.5rem;
+      font-weight: 400;
+      line-height: 3.75rem;
+      margin-bottom: 1rem;
+    }
+    .slogan {
+      font-size: 1.5625rem;
+      font-weight: 700;
+      line-height: 2.8rem;
+      margin-bottom: 0.5rem;
+    }
+    .content {
+      width: 52rem;
+      font-size: 1.25rem;
+      font-weight: 500;
+      line-height: 1.875rem;
+      color: rgba(255, 255, 255, 0.65);
+    }
+    .info {
+      display: flex;
+      gap: 1rem;
+      margin-top: 1rem;
+      .item {
+        display: flex;
+        color: rgba(255, 255, 255, 0.65);
+        .item-icon {
+          width: 1.25rem;
+          height: 1.25rem;
+          margin-right: 0.3rem;
+        }
+        .info-label {
+          font-size: 1.25rem;
+          font-weight: 500;
+        }
+      }
+    }
   }
   .overall {
     width: 100vw;
-    height: 130rem;
-    background-color: #999;
+    height: 131rem;
+    min-height: calc(100vh - 4rem);
+    background-image: url("@/assets/innovate/3.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    box-sizing: border-box;
+    padding-top: 30rem;
+    padding-left: 6.25rem;
+    color: #fff;
   }
   .expert {
     width: 100vw;
-    height: 105rem;
-    background-color: #929292;
+    min-height: calc(100vh - 4rem);
+    background-image: url("@/assets/innovate/4.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    box-sizing: border-box;
+    padding-top: 30rem;
+    padding-left: 6.25rem;
+    color: #fff;
   }
 }
 </style>

src/views/ip/enforcement.vue

@@ -1,187 +1,50 @@
 <template>
   <div class="page">
-    <el-breadcrumb>
-      <el-breadcrumb-item>知识产权</el-breadcrumb-item>
-      <el-breadcrumb-item>专利维权</el-breadcrumb-item>
-    </el-breadcrumb>
-    <el-card shadow="never" style="margin-top: 1rem; padding: 1rem;">
-      <h1>维权信息填写</h1>
-      <el-form
-        :model="trademarkForm"
-        class="rights-form"
-        label-width="120px"
-        label-position="left"
-      >
-        <el-form-item class="form-item" label="用户名称">
-          <el-input
-            class="custom-input"
-            v-model="trademarkForm.userName"
-            placeholder="请输入用户名称"
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item class="form-item" label="联系方式">
-          <el-input
-            class="custom-input"
-            v-model="trademarkForm.contactDetails"
-            placeholder="请输入联系方式"
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item class="form-item" label="专利号">
-          <el-input
-            class="custom-input"
-            v-model="trademarkForm.patentNumber"
-            placeholder="请输入专利号"
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item class="form-item" label="问题描述">
-          <el-input
-            type="textarea"
-            class="custom-input"
-            v-model="trademarkForm.description"
-            placeholder="请输入问题描述"
-          ></el-input>
-        </el-form-item>
-
-        <div class="button-container">
-          <el-button type="primary" @click="submitApplication">提交信息</el-button>
-        </div>
-      </el-form>
-    </el-card>
+    <div class="page-button-1" @click="selectMenuItem">点击填写信息，提交维权需求</div>
+    <div class="page-button-2" @click="selectMenuItem">点击填写信息，提交维权需求</div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-import { ElMessage } from "element-plus";
-import { postPatentEnforcement } from "@/api";
-
-interface RightsForm {
-  userName: string; // 用户名称
-  contactDetails: string; // 联系方式
-  patentNumber: string; // 专利号
-  description: string; // 问题描述
-}
-
-const trademarkForm = ref<RightsForm>({
-  userName: "",
-  contactDetails: "",
-  patentNumber: "",
-  description: ""
-});
-
-const submitApplication = async () => {
-  const res = (await postPatentEnforcement(
-    trademarkForm.value
-  )) as unknown as any;
-  if (res.code === 200) {
-    ElMessage({
-      type: "success",
-      message: "创建成功",
-    });
-  }
+import { useRouter } from "vue-router";
+const router = useRouter();
+const selectMenuItem = () => {
+  router.push("/enforcement/create"); 
+  return;
 };
 </script>
 
 <style lang="scss" scoped>
 .page {
-  height: calc(100vh - 4rem);
+  width: 100vw;
+  height: 164rem;
+  background-image: url("@/assets/enforcement/1.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
   box-sizing: border-box;
-  padding: 2rem 18rem;
-  color: #333;
-  background-image: url("@/assets/pic/bg.png"); /* 设置背景图片 */
-  background-repeat: repeat; /* 上下重复 */
-  background-size: cover; /* 左右满铺 */
-  background-position: center; /* 居中对齐 */
-  .form-item {
-    margin-right: 20px; // 根据需要设置间距
-    .logo {
-      width: 178px;
-      height: 178px;
-    }
-    .logo-uploader {
-      width: 178px;
-      height: 178px;
-      border: 1px dashed var(--el-border-color);
-      border-radius: 6px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-      transition: var(--el-transition-duration-fast);
-    }
-    .logo-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      width: 178px;
-      height: 178px;
-      text-align: center;
-    }
-  }
-  .custom-input {
-    max-width: 20rem;
-    width: 100%; // 可选
-  }
-  .button-container {
-    display: flex;
-    justify-content: flex-end; /* 使按钮靠右对齐 */
-    width: 100%;
-  }
-  .page-title {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    font-family: "源黑体 CN", sans-serif;
-    font-weight: 500;
-    font-size: 1.25rem;
-    line-height: 2rem;
-    text-align: left;
-  }
-
-  .trademark-form {
-    margin-bottom: 2rem;
-  }
-
-  .section-title {
-    font-size: 1.2rem;
-    margin: 1.5rem 0 0.5rem;
-    font-weight: 500;
-  }
-}
-
-.trademark {
   display: flex;
-  width: 100%;
-  height: 500px;
-  border: 1px solid #c1c1c1;
-  .trademark-aside {
-    width: 300px;
-    border-right: 1px solid #c1c1c1;
-    .trademark-aside-search {
-      width: 100%;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      padding-left: 10px;
-    }
-  }
-  .trademark-main {
-    flex: 1;
-    .trademark-main-header {
-      width: 100%;
-      height: 50px;
-      border-bottom: 1px solid #c1c1c1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
-      padding: 0 20px;
-    }
-    .trademark-main-content {
-      box-sizing: border-box;
-      padding: 20px;
-    }
+  flex-direction: column;
+  align-items: center;
+  .page-button-1 {
+    font-size: 1.56rem;
+    font-weight: 400;
+    color: rgb(58, 125, 254);
+    margin-top: 15rem;
+    cursor: pointer;
+  }
+  .page-button-2 {
+    width: 23rem;
+    height: 4rem;
+    text-align: center;
+    line-height: 4rem;
+    border-radius: 4rem;
+    font-size: 1.56rem;
+    font-weight: 400;
+    color: rgb(58, 125, 254);
+    border: 3px solid rgb(58, 125, 254);
+    margin-top: 135rem;
+    cursor: pointer;
   }
 }
 </style>

src/views/ip/enforcement_create.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="page">
+    <el-breadcrumb>
+      <el-breadcrumb-item>知识产权</el-breadcrumb-item>
+      <el-breadcrumb-item>专利维权</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card shadow="never" style="margin-top: 1rem; padding: 1rem;">
+      <h1>维权信息填写</h1>
+      <el-form
+        :model="trademarkForm"
+        class="rights-form"
+        label-width="120px"
+        label-position="left"
+      >
+        <el-form-item class="form-item" label="用户名称">
+          <el-input
+            class="custom-input"
+            v-model="trademarkForm.userName"
+            placeholder="请输入用户名称"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item class="form-item" label="联系方式">
+          <el-input
+            class="custom-input"
+            v-model="trademarkForm.contactDetails"
+            placeholder="请输入联系方式"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item class="form-item" label="专利号">
+          <el-input
+            class="custom-input"
+            v-model="trademarkForm.patentNumber"
+            placeholder="请输入专利号"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item class="form-item" label="问题描述">
+          <el-input
+            type="textarea"
+            class="custom-input"
+            v-model="trademarkForm.description"
+            placeholder="请输入问题描述"
+          ></el-input>
+        </el-form-item>
+
+        <div class="button-container">
+          <el-button type="primary" @click="submitApplication">提交信息</el-button>
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+import { postPatentEnforcement } from "@/api";
+
+interface RightsForm {
+  userName: string; // 用户名称
+  contactDetails: string; // 联系方式
+  patentNumber: string; // 专利号
+  description: string; // 问题描述
+}
+
+const trademarkForm = ref<RightsForm>({
+  userName: "",
+  contactDetails: "",
+  patentNumber: "",
+  description: ""
+});
+
+const submitApplication = async () => {
+  const res = (await postPatentEnforcement(
+    trademarkForm.value
+  )) as unknown as any;
+  if (res.code === 200) {
+    ElMessage({
+      type: "success",
+      message: "创建成功",
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: calc(100vh - 4rem);
+  box-sizing: border-box;
+  padding: 2rem 18rem;
+  color: #333;
+  background-image: url("@/assets/pic/bg.png"); /* 设置背景图片 */
+  background-repeat: repeat; /* 上下重复 */
+  background-size: cover; /* 左右满铺 */
+  background-position: center; /* 居中对齐 */
+  .form-item {
+    margin-right: 20px; // 根据需要设置间距
+    .logo {
+      width: 178px;
+      height: 178px;
+    }
+    .logo-uploader {
+      width: 178px;
+      height: 178px;
+      border: 1px dashed var(--el-border-color);
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: var(--el-transition-duration-fast);
+    }
+    .logo-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      text-align: center;
+    }
+  }
+  .custom-input {
+    max-width: 20rem;
+    width: 100%; // 可选
+  }
+  .button-container {
+    display: flex;
+    justify-content: flex-end; /* 使按钮靠右对齐 */
+    width: 100%;
+  }
+  .page-title {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-family: "源黑体 CN", sans-serif;
+    font-weight: 500;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    text-align: left;
+  }
+
+  .trademark-form {
+    margin-bottom: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.2rem;
+    margin: 1.5rem 0 0.5rem;
+    font-weight: 500;
+  }
+}
+
+.trademark {
+  display: flex;
+  width: 100%;
+  height: 500px;
+  border: 1px solid #c1c1c1;
+  .trademark-aside {
+    width: 300px;
+    border-right: 1px solid #c1c1c1;
+    .trademark-aside-search {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding-left: 10px;
+    }
+  }
+  .trademark-main {
+    flex: 1;
+    .trademark-main-header {
+      width: 100%;
+      height: 50px;
+      border-bottom: 1px solid #c1c1c1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 20px;
+    }
+    .trademark-main-content {
+      box-sizing: border-box;
+      padding: 20px;
+    }
+  }
+}
+</style>