WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改搜索中心细节问题

Browse Source
This commit is contained in:
qq787203167
2022-03-09 14:16:16 +08:00
parent 7b34b29eba
commit 5ef9bef349
6 changed files with 742 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/documentTools/searchCenter/components/whole.vue
+181
View File
@@ -0,0 +1,181 @@
<template>
<div class="box">
<div class="search-text-title">
<span>检索范围：</span>
<span>纯电动</span>
<!-- <div class="search-header-right" v-if="showList">-->
<!-- &lt;!&ndash; <a-icon type="appstore" />&ndash;&gt;-->
<!-- <a-icon :type="item.type" v-for="item in listOption" class="header-list"-->
<!-- :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"-->
<!-- @click="selectListModel(item.value)"-->
<!-- ></a-icon>-->
<!-- </div>-->
</div>
<a-checkbox-group v-model="checkboxText">
<li v-for="item in conList" :key="item.id">
<div style="margin-bottom: 10px;position: relative">
<a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
<div class="text-text-right"
@click="checkedClick(item)"
:class="{ 'null-input':item.checked }">
<div class="text-header">
<span>{{item.type}}</span>
<span>{{item.number}}</span>
<span>{{item.title}}</span>
</div>
<div class="text-content">
{{item.content}}
</div>
</div>
</div>
</li>
</a-checkbox-group>
<div class="page">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
@change="pageOnChange"
@showSizeChange="SizeChange"
/>
</div>
</div>
</template>
<script>
export default {
name: 'whole',
data() {
return {
checkboxText: [],
conList: [
{
id: 1,
type: '文档库',
number: 'GB20999-2019',
title: '内饰件阻燃特性',
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
},
{
id: 2,
type: '文档库',
number: 'GB20999-2019',
title: '内饰件阻燃特性',
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
},
{
id: 3,
type: '文档库',
number: 'GB20999-2019',
title: '内饰件阻燃特性',
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
},
{
id: 4,
type: '文档库',
number: 'GB20999-2019',
title: '内饰件阻燃特性',
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
},
{
id: 5,
type: '文档库',
number: 'GB20999-2019',
title: '内饰件阻燃特性',
content: '区域:东亚 国家/地区:中国 标准性质:-- 标准状态:现行 内容摘要: 标准文: 标准类别:-- 标准号: 1229导入-中国市场11-中国市场11 标准名称:1229导入-中国市场11 标准英文名称:Englist 发布日期:2021-12-26 实施日期:2021-12-30 新定型车实施日期:2021-12-26 新生产车实施日期:-- 注册登记车实施日期:-- 在产车实施日期:-- 适用认证:公告, 发布部门: 代替标准号:1229导入 被代替标准号:1229导入-中国市场11 采用国际标准号: 采标程度:-- 适用车型:M1,M2,M3, 能源种类:汽油,纯电, 起草单位: 起草人: 关键词: 备注:-- 责任部门:-- 所属专业领域:-- '
}
],
total: 0,
pageSize: 10,
pageNo: 1
}
},
watch: {
checkboxText: function(value) {
this.conList.forEach(val => {
val.checked = false
})
if (value.length > 0) {
this.conList.forEach(val => {
value.forEach(res => {
if (res === val.id) {
val.checked = true
}
})
})
}
this.conList = [...this.conList]
}
},
methods: {
checkedClick(item) {
if (item.checked) {
this.checkboxText = this.checkboxText.filter(res => {
return res !== item.id
})
} else {
this.checkboxText.push(item.id)
}
},
pageOnChange(page, pageSize) {
this.pageNo = page
},
SizeChange(page, pageSize) {
this.pageSize = pageSize
}
}
}
</script>
<style scoped lang="less">
.box {
padding: 0 0 0 18px;
box-sizing: border-box;
}
.checkbox-left {
float: left;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.text-text-right {
padding: 19px 28px;
box-sizing: border-box;
margin-left: 38px;
}
.null-input {
background-color: #F2F4F8;
}
.search-text-title {
margin-bottom: 22px;
}
.text-header {
margin-bottom: 11px;
span {
margin-right: 52px;
font-size: 16px;
font-weight: bold;
color: #040B29;
}
}
.text-content {
font-size: 14px;
font-weight: 400;
color: #040B29;
opacity: 0.7;
}
.page {
text-align: right;
margin-top: 20px;
}
</style>