|
|
@@ -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>
|
zhangchuang
