From 5fc2fd61b8cf1809bba0b24a90d12326b8bd6bd2 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 07 四月 2025 17:33:32 +0800
Subject: [PATCH] 学术成果checkbox
---
src/views/achievements/index.vue | 637 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 588 insertions(+), 49 deletions(-)
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
index 2873bb1..a2c0031 100644
--- a/src/views/achievements/index.vue
+++ b/src/views/achievements/index.vue
@@ -3,42 +3,374 @@
<div class="page-header">
<p>鐜嬫案鐐庨櫌澹鏈垚鏋�</p>
</div>
- <!-- 鎼滅储妗� -->
- <ul class="page-input">
- <li class="input-main">
- <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="input3" class="input-with-select" suffix="鎼滅储">
- <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨">
- <el-option label="椁愬巺鍚�" value="1"></el-option>
- <el-option label="璁㈠崟鍙�" value="2"></el-option>
- <el-option label="鐢ㄦ埛鐢佃瘽" value="3"></el-option>
- </el-select>
- <el-button slot="append" >鎼滅储</el-button>
- </el-input>
- </li>
- <li class="input-txt" @click="isDisplay = !isDisplay">
- 楂樼骇妫�绱�
- <img v-if="isDisplay" src="../../assets/images/achievements/top-Icon.png" alt="">
- <img v-else src="../../assets/images/achievements/bottom-Icon.png" alt="">
- </li>
- </ul>
- <!-- 楂樼骇鎼滅储 -->
- <div v-if="isDisplay">
- 123
- </div>
+ <div class="page-main">
+ <!-- 鎼滅储妗� -->
+ <ul class="page-input">
+ <li class="input-main">
+ <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="input3" class="input-with-select" suffix="鎼滅储">
+ <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨">
+ <el-option v-for="(item, index) in optionlist" :key="index" :label="item.lable"
+ :value="item.lable"></el-option>
+ </el-select>
+ <el-button slot="append">鎼滅储</el-button>
+ </el-input>
+ </li>
+ <li class="input-txt" @click="isDisplay = !isDisplay">
+ 楂樼骇妫�绱�
+ <img :src="[isDisplay ? topIcon : bottomIcon]" alt="">
+ </li>
+ </ul>
+ <!-- 楂樼骇鎼滅储 -->
+ <div v-if="isDisplay" class="page-search">
+ <MyForm class="myfrom" @submit="
+ (data) => {
+ CurrentPage = 1;
+ onSubmit(data);
+ }
+ " @reset="resetForm" :from="from" />
+ </div>
+ <!-- 鎼滅储缁撴灉 -->
+ <div class="page-content">
+ <div class="content-left">
+ <!-- 绫诲瀷 -->
+ <ul>
+ <li class="left-title">
+ <span>{{ category.title }}</span>
+ <p @click="category.isDisplay = !category.isDisplay">
+ <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="">
+ </p>
+ </li>
+ <li class="left-main" v-if="category.isDisplay">
+ <div class="category-main" v-for="(item, index) in category.list" :key="index">
+ <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox>
+ <span class="">{{ item.num }}</span>
+ </div>
+ </li>
+ </ul>
+ <!-- 骞村害 -->
+ <ul>
+ <li class="left-title">
+ <div>
+ <span>{{ annual.title }}</span>
+ <span>
+ 鏃堕棿
+ <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="">
+ </span>
+ <span>鏂囩尞閲�
+ <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="">
+ </span>
+ </div>
+ <p @click="annual.isDisplay = !annual.isDisplay">
+ <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="">
+ </p>
+ </li>
+ <li class="left-main" v-if="annual.isDisplay">
+ <div class="annual-main" v-for="(item, index) in annual.list" :key="index">
+ <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years }}</el-checkbox>
+ <span class="">{{ item.num }}</span>
+ </div>
+ <p class="annual-footer" v-if="annual.list && annual.list.length > 5">灞曞紑</p>
+ </li>
+ </ul>
+ <!-- 鏂囩尞鏉ユ簮 -->
+ <ul>
+ <li class="left-title">
+ <div>
+ <span>{{ sources.title }}</span>
+ <span>
+ 鏂囩尞閲�
+ <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="">
+ </span>
+ </div>
+ <p @click="sources.isDisplay = !sources.isDisplay">
+ <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="">
+ </p>
+ </li>
+ <li class="left-main" v-if="sources.isDisplay">
+ <div class="sources-main" v-for="(item, index) in sources.list" :key="index">
+ <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name }}</el-checkbox>
+ <span class="">{{ item.num }}</span>
+ </div>
+ <p class="sources-footer" v-if="sources.list && sources.list.length > 5">灞曞紑</p>
+ </li>
+ </ul>
+ <!-- 瀛︾ -->
+ <ul>
+ <li class="left-title">
+ <span>{{ subject.title }}</span>
+ <p @click="subject.isDisplay = !subject.isDisplay">
+ <img :src="[subject.isDisplay ? topIcon : bottomIcon]" alt="">
+ </p>
+ </li>
+ <li class="left-main" v-if="subject.isDisplay">
+ <div class="category-main" v-for="(item, index) in subject.list" :key="index">
+ <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name">{{ item.name }}</el-checkbox>
+ <span class="">{{ item.num }}</span>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="content-right">
+
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
+import MyForm from '@/components/form/form.vue'
+/* eslint-disable vue/no-unused-components */
export default {
+ name: 'achievements',
+ components: {
+ MyForm
+ },
data() {
return {
+ topIcon: require("@/assets/images/achievements/top-Icon.png"),
+ bottomIcon: require("@/assets/images/achievements/bottom-Icon.png"),
+ sortTop: require("@/assets/images/achievements/sort-top.png"),
+ sortBottom: require("@/assets/images/achievements/sort-bottom.png"),
isDisplay: false,
input3: '',
+ select: '',
+ checked: [],
+ optionlist: [
+ {
+ lable: "鏍囬"
+ },
+ {
+ lable: "浣滆��"
+ },
+ {
+ lable: "骞翠唤"
+ },
+ {
+ lable: "鍏抽敭璇�"
+ },
+ {
+ lable: "鎽樿"
+ },
+ {
+ lable: "鏉ユ簮"
+ },
+ ],
+ // 褰撳墠椤�
+ CurrentPage: 1,
+ // 楂樼骇鎼滅储
+ from: {
+ from: [
+ {
+ type: "input",
+ label: "鏍囥��棰�",
+ name: "title",
+ value: ""
+ },
+ {
+ type: "input",
+ label: "浣溿��鑰�",
+ name: "author",
+ value: ""
+ },
+ {
+ type: "input",
+ label: "骞淬��浠�",
+ name: "year",
+ value: ""
+ },
+ {
+ type: "input",
+ label: "鍏抽敭璇�",
+ name: "keyword",
+ value: ""
+ },
+ {
+ type: "input",
+ label: "鎽樸��瑕�",
+ name: "abstract",
+ value: ""
+ },
+ {
+ type: "input",
+ label: "鏉ャ��婧�",
+ name: "source",
+ value: ""
+ },
+ ]
+ },
+ // 绫诲瀷
+ category: {
+ title: "绫诲瀷",
+ isDisplay: true,
+ id: "",
+ index: "",
+ list: [
+ {
+ name: "鏈熷垔",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍥句功",
+ num: 190,
+ check: false
+ },
+ {
+ name: "瑙嗛",
+ num: 190,
+ check: false
+ },
+ {
+ name: "闊抽",
+ num: 190,
+ check: false
+ },
+ ]
+ },
+ // 骞村害
+ annual: {
+ title: "骞村害",
+ isDisplay: true,
+ id: "",
+ index: "",
+ list: [
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+ {
+ years: "2025",
+ num: 20,
+ check: false
+ },
+
+ ],
+
+ },
+ // 鏂囩尞鏉ユ簮
+ sources: {
+ title: "鏂囩尞鏉ユ簮",
+ isDisplay: true,
+ id: "",
+ index: "",
+ list: [
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖椾含涓尰鑽ぇ瀛﹀ぇ瀛﹀鎶�",
+ num: 190,
+ check: false
+ },
+ ]
+ },
+ // 瀛︾
+ subject: {
+ title: "瀛︾",
+ isDisplay: true,
+ id: "",
+ index: "",
+ list: [
+ {
+ name: "鍖诲",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖诲",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖诲",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖诲",
+ num: 190,
+ check: false
+ },
+ {
+ name: "鍖诲",
+ num: 190,
+ check: false
+ },
+ ]
+ },
+
+ // 鏌ヨ缁撴灉
+ resultList:[
+ {
+ name:"涓嵂闂告煖鐨勫巻鍙蹭紶鎵夸笌鏂版椂浠ｅ彂灞曟�濊��",
+ sources:"鍖椾含涓尰鑽ぇ瀛﹀鎶�",
+ time:"2025-02-24 09:21",
+ title:"鎽樿: 涓嵂闂告煖鏄紶缁熶腑鑽皟鍓傜殑楂樼骇绠＄悊浜哄憳锛屽湪'鍓嶅簵鍚庡巶寮�'涓嵂鎴垮彂鎸ラ噸瑕佷綔鐢ㄥ拰鍏抽敭鑱岃兘銆備紶鎵夸腑鑽椄鏌滅殑瀹濊吹瀛︽湳缁忛獙涓庝紭绉�鏂囧寲瀵瑰帢娓呬腑鑽瀛︾鍙戝睍鑴夌粶銆佽鑼冧腑鑽皟鍓傛妧鏈搷浣溿�佷績杩涜�佽嵂宸ユ妧鑹�'娲绘�佷紶鎵�'鍏锋湁閲嶈绉戝浠峰�煎拰鐜板疄鎰忎箟銆傞潰鍚戞柊鏃朵唬銆佸紑鍚柊鎬濈淮锛屾湰鏂囧鑰佸瓧鍙蜂腑鑽摵鐨勫叴璧峰拰涓嵂闂告煖杩涜鑰冭瘉锛屽垎鏋愪腑鑽椄鏌滅殑宀椾綅璐ｄ换銆佷紶鎵胯矾寰勫強鏈潵鍙戝睍锛屾彁鍑洪珮绱犺川涓嵂闂告煖浜烘墠鍩瑰吇绛栫暐锛屾棬鍦ㄥ煿鍏荤鍚堝綋浠ｇぞ浼氶渶姹傜殑涓嵂琛屼笟澶嶅悎鍨嬪垱鏂颁汉鎵嶃��",
+ keyword:""
+
+ }
+ ]
}
},
- methods: {
+ methods: {
+ async onSubmit(val) {
+
+ },
+ //閲嶇疆鎼滅储缁撴灉
+ resetForm() {
+ // this.onSearch("");
+ },
}
}
</script>
@@ -68,45 +400,252 @@
}
}
-.page-input {
+.page-main {
width: 1330px;
margin: 0 auto;
- display: flex;
- background-color: #fff;
}
-.input-main {
- padding: 15px 0;
- text-align: center;
- width: 90%;
- border-right: 2px solid #E4DACE;
- .input-with-select{
- width: 50%;
+.page-input {
+ width: 100%;
+ display: flex;
+ background-color: #fefbf5;
+ border: 1px solid #E4DACE;
+
+ .input-main {
+ padding: 15px 0;
+ text-align: center;
+ width: 90%;
+ border-right: 2px solid #E4DACE;
+
+ .input-with-select {
+ width: 50%;
+ }
+ }
+
+ .input-txt {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 10%;
+ padding: 15px 0;
+ font-family: Source Han Sans;
+ font-size: 14px;
+ font-weight: bold;
+ color: #6F5A3A;
+ cursor: pointer;
+
+ img {
+ width: 10px;
+ height: auto;
+ margin-left: 5px;
+ }
}
}
-
-.input-txt {
+.page-search {
+ width: 100%;
+ background-color: #fefbf5;
+ border-bottom: 1px solid #E4DACE;
+ border-left: 1px solid #E4DACE;
+ border-right: 1px solid #E4DACE;
+ padding: 13px 0px;
display: flex;
- align-items: center;
justify-content: center;
- width: 10%;
- padding: 15px 0;
- font-family: Source Han Sans;
- font-size: 14px;
- font-weight: bold;
- color: #6F5A3A;
- cursor: pointer;
- img {
- width: 10px;
- height: auto;
- margin-left: 5px;
+ .myfrom {
+ width: 80%;
+
+ ::v-deep .flex-center {
+ height: 80% !important;
+ }
+
+ ::v-deep .Formbtn {
+ width: 100% !important;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .el-button {
+ width: 68px !important;
+ height: 32px !important;
+ font-size: 14px;
+ background-color: transparent;
+ color: #937950;
+ border: 1px solid #6F5A3A;
+
+ &:hover {
+ background-color: #6F5A3A;
+ color: #FFFDF8;
+ }
+ }
+ }
}
+
+
+
}
+
+
+.page-content {
+ width: 100%;
+ margin-top: 20px;
+ background-color: #fefbf5;
+ border: 1px solid #E4DACE;
+ display: flex;
+
+
+ .content-left {
+ width: 19.5%;
+ border-right: 1px solid #E4DACE;
+ border-bottom: 1px solid #E4DACE;
+ }
+
+ .left-title {
+ padding: 7px 7px 9px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #E4DACE;
+
+ span {
+ margin-right: 20px;
+ font-family: Source Han Sans;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .sort-Icon {
+ cursor: pointer;
+ height: 12px;
+ width: auto;
+ }
+
+ img {
+ cursor: pointer;
+ height: 4px;
+ width: auto;
+ }
+ }
+
+ .left-main {
+ border-bottom: 1px solid #E4DACE;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
+ .category-main {
+ width: 50%;
+ margin-bottom: 10px;
+
+ span {
+ font-family: Source Han Sans;
+ font-size: 12px;
+ color: #8F7A5A;
+ }
+ }
+
+ .annual-main {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+ span {
+ font-family: Source Han Sans;
+ font-size: 12px;
+ color: #8F7A5A;
+ }
+ }
+
+ .annual-footer {
+ cursor: pointer;
+ width: 100%;
+ text-align: center;
+ font-family: Source Han Sans;
+ font-size: 12px;
+ font-weight: 350;
+ color: #937950;
+ }
+
+ .sources-main {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+ span {
+ font-family: Source Han Sans;
+ font-size: 12px;
+ color: #8F7A5A;
+ }
+ }
+
+ .el-checkbox {
+ width: 70%;
+ }
+
+ /* 璁剧疆榧犳爣缁忚繃瀵瑰嬀妗嗭紝瀵瑰嬀妗嗚竟妗嗙殑棰滆壊 */
+ ::v-deep .el-checkbox .el-checkbox__inner:hover {
+ border-color: #D1D1D1;
+ }
+
+ /* 璁剧疆checkbox鑾峰緱鐒︾偣鍚庯紝瀵瑰嬀妗嗙殑杈规棰滆壊 */
+ ::v-deep .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner {
+ border-color: #D1D1D1;
+ }
+
+ ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
+ color: #2C2C2C;
+ }
+
+ ::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
+ ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ border-color: #8F7A5A;
+ background-color: #8F7A5A;
+ }
+
+
+ ::v-deep .el-checkbox__label {
+ color: #2C2C2C;
+ width: 100%;
+ font-family: Source Han Sans;
+ font-size: 12px;
+ font-weight: bold;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */
+ vertical-align: middle;
+ }
+
+ .sources-footer {
+ cursor: pointer;
+ width: 100%;
+ text-align: center;
+ font-family: Source Han Sans;
+ font-size: 12px;
+ font-weight: 350;
+ color: #937950;
+ }
+
+
+ .content-right{
+ width: 80.5%;
+ padding: 14px 20px 20px 14px;
+ }
+
+}
+
+
+
+
el-input__suffix {
-right: 22px;
-color: #999;
+ right: 22px;
+ color: #999;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1