<template>
|
<div class="senior" style="mim-width:1366px">
|
<main>
|
<section class="left" style="background:#F6F8FA">
|
<div class="header">
|
<!-- <a-checkbox @change="onChange"> 全部专利</a-checkbox> -->
|
<!-- <ul class="level1">
|
<li><a-checkbox @change="onChange"> 申请</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 授权</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 实用新型</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 外观</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 其他</a-checkbox></li>
|
</ul>
|
<ul class="level2">
|
<li><a-checkbox @change="onChange"> 申请</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 申请</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 申请</a-checkbox></li>
|
<li><a-checkbox @change="onChange"> 申请</a-checkbox></li>
|
</ul> -->
|
<div :style="{ padding: '0 0 0 20px', margin: '3px 0 0 0' }">
|
<a-checkbox :indeterminate="(this.CountryCheck>0&&this.CountryCheck<this.CountryLength)||(elseCountry===true&&this.CountryCheck<this.CountryLength)||(elseCountry===false&&this.CountryCheck===this.CountryLength)?true:false" :checked="(this.CountryCheck === this.CountryLength&&elseCountry===true) ? true : false" @change="onCheckAllChange"
|
style="font-size:16px;font-weight:bold;color:#000">
|
全部国家和地区
|
</a-checkbox>
|
</div>
|
<br />
|
<div :style="{ padding: '0 0 0 30px',margin: '-15px 0 0 0' }">
|
<a-checkbox :indeterminate="(this.CountryCheck>0&&this.CountryCheck<this.CountryLength)?true:false" :checked="this.CountryCheck === this.CountryLength ? true : false" @change="onCheckAllChange1">
|
主要国家和地区
|
</a-checkbox>
|
</div>
|
<br />
|
<div :style="{ padding: '0 0 0 40px',margin: '-15px 0 0 0' }">
|
<ul>
|
<li v-for="(item, index) in CountryMain" :key="index">
|
<a-checkbox @change="onChange(index)" :checked="item.checked">
|
<img :src="require('../assets/nation_flags/' + item.Abbr + '.png')" alt="" style="width:20px;margin-right:10px" />
|
{{ item.NameCh }} ({{item.Abbr}})
|
</a-checkbox>
|
</li>
|
|
<!-- <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" style="width:100%">
|
</a-checkbox-group> -->
|
</ul>
|
</div>
|
<div :style="{ padding: '0 0 0 30px',margin: '5px 0 0 0' }">
|
<a-checkbox :checked="elseCountry" @change="onCheckAllChange2">
|
其它国家和地区
|
</a-checkbox>
|
</div>
|
</div>
|
</section>
|
<section class="right">
|
|
<!-- <div class="tem" ><span></span> <span>辅助工具</span></div> -->
|
<div class="top white" style="min-height:70vh;padding: 40px;box-shadow: 0 0 2px 0;">
|
<div class="title">高级搜索</div>
|
<ul>
|
<li>
|
<span>关键词</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.keyWords">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width: 200px" @change="item.text = ''">
|
<a-select-option v-for="(it) in options.keyWords" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-input style="width: 370px" v-model="item.text" placeholder="请输入" />
|
<a-button logic="primary"
|
style="background-color: #ef8201;border-color: #ef8201;color:#fff;position:absolute;left:800px;"
|
v-if="index == (form.keyWords.length - 1) && form.keyWords.length < 20" shape="circle" icon="plus"
|
@click="doFormItem('plus', 'keyWords', 'logic', index)" />
|
<a-button type="danger"
|
style="background-color: #ef8201;border-color: #ef8201;color:#fff;position:absolute;left:800px;"
|
v-else shape="circle" icon="minus" @click="doFormItem('minus', 'keyWords', 'logic', index)" />
|
</div>
|
</div>
|
</li>
|
<li>
|
<span>名称</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.name">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width: 200px" @change="item.text = ''">
|
<a-select-option v-for="(it) in options.name" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-input style="width: 370px" v-model="item.text" placeholder="请输入" />
|
<a-button type="primary" v-if="index == (form.name.length - 1) && form.name.length < 20"
|
style="width:32px;height:32px;position:absolute;left:800px;" shape="circle" icon="plus"
|
@click="doFormItem('plus', 'name', 'logic', index)" />
|
<a-button type="danger" v-else shape="circle" icon="minus"
|
style="width:32px;height:32px;position:absolute;left:800px;"
|
@click="doFormItem('minus', 'name', 'logic', index)" />
|
</div>
|
</div>
|
</li>
|
<li>
|
<span>地址</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.address">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width: 200px" @change="item.text = ''">
|
<a-select-option v-for="(it) in options.address" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-input style="width: 370px" v-model="item.text" placeholder="例如：北京" />
|
<a-button type="primary" v-if="index == (form.address.length - 1) && form.address.length < 20"
|
style="width:32px;height:32px;position:absolute;left:800px;" shape="circle" icon="plus"
|
@click="doFormItem('plus', 'address', 'logic', index)" />
|
<a-button type="danger" v-else shape="circle" icon="minus"
|
style="width:32px;height:32px;position:absolute;left:800px;"
|
@click="doFormItem('minus', 'address', 'logic', index)" />
|
</div>
|
</div>
|
</li>
|
<li style="position:relative">
|
<span>分类号</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.fenlei">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width: 200px" @change="item.text = ''; item.treeData = []">
|
<a-select-option v-for="(it) in options.fenlei" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-input style="width: 370px" v-model="item.text" placeholder="请输入" />
|
<a-button type="primary" style="width:32px;height:32px;position:absolute;left:760px;"
|
v-if="index == (form.fenlei.length - 1) && form.fenlei.length < 20" shape="circle" icon="plus"
|
@click="doFormItem('plus', 'fenlei', 'logic', index)" />
|
<a-button type="danger" style="width:32px;height:32px;position:absolute;left:760px;" v-else
|
shape="circle" icon="minus" @click="doFormItem('minus', 'fenlei', 'logic', index)" />
|
<a-button @click="openTool(item)" style="position:absolute;left:800px">查询工具</a-button>
|
</div>
|
</div>
|
</li>
|
<li>
|
<span>号码</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.haoma">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width: 200px" @change="item.text = ''">
|
<a-select-option v-for="(it) in options.haoma" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-input style="width: 370px" v-model="item.text" placeholder="请输入" />
|
</div>
|
</div>
|
</li>
|
<li>
|
<span>日期</span>
|
<div class="seclect">
|
<div v-for="(item, index) in form.date">
|
<a-select v-model="item.logic" style="width: 80px" @change="item.value = ''">
|
<a-select-option v-for="(it) in options.logic" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.select" style="width:200px" @change="item.text = ''; item.type = 'before'">
|
<a-select-option v-for="(it) in options.date" :key="it.code" :value="it.code">
|
{{ it.name }}
|
</a-select-option>
|
</a-select>
|
<a-select v-model="item.type" style="width: 100px"
|
@change="item.type == 'range' ? item.text = [] : item.text = ''">
|
<a-select-option :value="'before'">
|
某时间以前
|
</a-select-option>
|
<a-select-option :value="'after'">
|
某时间以后
|
</a-select-option>
|
<a-select-option :value="'range'">
|
某时间段
|
</a-select-option>
|
</a-select>
|
<a-range-picker style="width:140px" v-model="item.text" v-if="item.type === 'range'"
|
valueFormat="YYYY-MM-DD" />
|
<a-date-picker style="width:140px" v-model="item.text" valueFormat="YYYY-MM-DD" v-else />
|
</div>
|
</div>
|
</li>
|
</ul>
|
<div class="footer" style="margin-top:60px;text-align: right;padding-right: 20%;">
|
<a-button type="primary" @click="handleSearch"> 查询 </a-button>
|
</div>
|
</div>
|
</section>
|
</main>
|
|
<!-- 弹框部分 -->
|
<a-modal v-model="dialogVisible" title="辅助查询工具" width="1000px" okText="确定" cancelText="取消" @ok="modelConfirm">
|
<senior-tranfer ref="seniorTransfer" :currentItem="currentFenleiItem" v-if="dialogVisible" />
|
</a-modal>
|
</div>
|
</template>
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
import { GetCountryMain } from '../api/url_analyst.js'
|
import SeniorTranfer from '@/components/SeniorTranfer.vue';
|
const options = {
|
keyWords: [{ code: 'title0|abstract0|title1|abstract1', name: '标题/摘要' }, { code: 'title0|abstract0|title1|abstract1|claim0|claim1', name: '标题/摘要/权利要求' }, { code: 'title0|abstract0|description0|title1|abstract1|claim0|claim1', name: '标题/摘要/权利要求/说明书' }, { code: 'title0|title1', name: '标题' }, { code: 'abstract0|abstract1', name: '摘要' }, { code: 'claim0|claim1', name: '权利要求' }, { code: 'description0', name: '说明书' }],
|
name: [{ code: 'assigneeList', name: '申请人' }, { code: 'inventorList', name: "发明人" }],
|
address: [{ code: 'cnaddress', name: '申请人地址' }, { code: 'cnprovince', name: '中国申请人省份' }, { code: 'cncity', name: '中国申请人地市' }, { code: 'cncounty', name: '中国申请人区县' }, { code: 'assigneeCrossCountryCount', name: '申请人国别' }, { code: 'cncountry', name: '公开国别' }],
|
fenlei: [{ code: 'ipcCodeSort', name: 'IPC(国际分类)' }, { code: 'cpcCodeSort', name: 'CPC(合作专利分类)' }, { code: 'industrycode', name: '国民经济行业分类' }, { code: 'strategicIndustryCode', name: '战略性新兴产业分类' },{ code: 'locarnoCodeSort', name: '洛迦诺分类' }],
|
haoma: [{ code: 'publicationNumber', name: '公开号' }, { code: 'applicationNumber', name: '申请号' }, { code: 'pctNumber', name: 'PCT号' },],
|
// {code:'',name:'优先权号'}
|
date: [{ code: 'publicationDate', name: '公开日' }, { code: 'filingDate', name: '申请日' }, { code: 'grantDate', name: '授权日' }, { code: 'priorityDate', name: '优先权日' }],
|
logic: [{ code: 'AND', name: 'AND' }, { code: 'OR', name: 'OR' }, { code: 'NOT', name: 'NOT' },],
|
|
}
|
const plainOptions = [];
|
const defaultCheckedList = [];
|
|
export default {
|
//import引入的组件需要注入到components对象中才能使用
|
components: { SeniorTranfer },
|
data() {
|
//这里存放数据
|
return {
|
checkedList: defaultCheckedList,
|
indeterminate: false,
|
checkAll: false,
|
plainOptions,
|
ScrollHeight: document.documentElement.scrollTop,
|
options,
|
form: {
|
keyWords: [
|
{
|
select: 'title0|abstract0|title1|abstract1',
|
text: '',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
name: [
|
{
|
select: 'assigneeList',
|
text: '',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
address: [
|
{
|
select: 'cnaddress',
|
text: '',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
fenlei: [
|
{
|
select: 'ipcCodeSort',
|
text: '',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
haoma: [
|
{
|
select: 'publicationNumber',
|
text: '',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
date: [
|
{
|
select: 'publicationDate',
|
text: '',
|
type: 'before',
|
logic: 'AND',
|
value: ''
|
}
|
],
|
},
|
|
dialogVisible: false,
|
currentFenleiItem: {},
|
CountryMain: [],
|
CountryLength: 0,
|
CountryCheck: 0,
|
elseCountry:true
|
};
|
},
|
//计算属性 类似于data概念
|
//监控data中的数据变化
|
watch: {
|
ScrollHeight() { },
|
},
|
mounted() {
|
this.getCountryMain()
|
},
|
//方法集合
|
methods: {
|
// 获取国家列表
|
getCountryMain() {
|
GetCountryMain().then(res => {
|
// defaultCheckedLis = []
|
if (res.Check) {
|
for (let i = 0; i < res.Data.length; i++) {
|
res.Data[i].checked = true
|
this.CountryMain.push(res.Data[i])
|
}
|
this.CountryLength = res.Data.length
|
this.CountryCheck = res.Data.length
|
// this.CountryMain = res.Data
|
// console.log(this.CountryMain);
|
}
|
}).catch(err => {
|
})
|
},
|
onChange(e) {
|
// console.log(e);
|
this.CountryMain[e].checked=!this.CountryMain[e].checked
|
// console.log(e,e);
|
if (this.CountryMain[e].checked) {
|
|
this.CountryCheck++
|
} else {
|
// this.CountryMain[e].target.checked=!this.CountryMain[e].target.checked
|
this.CountryCheck--
|
}
|
// console.log(this.CountryCheck,this.CountryLength);
|
// this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
|
// this.checkAll = checkedList.length === plainOptions.length;
|
},
|
onCheckAllChange(e) {
|
// console.log(e);
|
if (e.target.checked) {
|
for (let i = 0; i < this.CountryMain.length; i++) {
|
this.CountryMain[i].checked = true
|
}
|
this.CountryCheck = this.CountryLength
|
this.elseCountry=true
|
} else {
|
for (let i = 0; i < this.CountryMain.length; i++) {
|
this.CountryMain[i].checked = false
|
}
|
this.CountryCheck = 0
|
this.elseCountry=false
|
}
|
},
|
onCheckAllChange1(e) {
|
// console.log(e);
|
if (e.target.checked) {
|
for (let i = 0; i < this.CountryMain.length; i++) {
|
this.CountryMain[i].checked = true
|
}
|
this.CountryCheck = this.CountryLength
|
} else {
|
for (let i = 0; i < this.CountryMain.length; i++) {
|
this.CountryMain[i].checked = false
|
}
|
this.CountryCheck = 0
|
}
|
},
|
onCheckAllChange2(e) {
|
this.elseCountry=!this.elseCountry
|
},
|
// onChange(e) {
|
// console.log(e);
|
// },
|
handleMenuClick(e) {
|
console.log("click", e);
|
},
|
getCurrentStyle(current, today) {
|
const style = {};
|
if (current.date() === 1) {
|
style.border = "1px solid #1890ff";
|
style.borderRadius = "50%";
|
}
|
return style;
|
},
|
onClearInput() { },
|
//顶部卷起高度
|
handleScroll() {
|
this.ScrollHeight = document.documentElement.scrollTop;
|
},
|
modelConfirm() {
|
let item = this.$refs.seniorTransfer.printData()
|
this.currentFenleiItem.text = item.targetKeys.join(',')
|
this.currentFenleiItem.select = item.activeKey
|
this.currentFenleiItem.treeData = item.treeData
|
this.dialogVisible = false
|
},
|
openTool(item) {
|
this.targetKeys = item.text.split(',')
|
this.dialogVisible = true
|
this.currentFenleiItem = item
|
},
|
handleSearch() {
|
let params = this.getParams()
|
|
if (params.length == 0) {
|
this.$message.error('请输入筛选条件')
|
return
|
}
|
localStorage.setItem('namiParams','')
|
this.$router.push({
|
path: "/smart",
|
query: {
|
from: 'senior',
|
params: JSON.stringify(params)
|
}
|
})
|
},
|
getParams() {
|
let params = []
|
let keyArry = Object.keys(this.form)
|
keyArry.map(key => {
|
|
let arry = this.form[key]
|
arry.map(item => {
|
// console.log(item);
|
if (item.text) {
|
let obj = {
|
field: item.select,
|
childFieldLevel: 0,
|
rule: key == "date" ? 'range' : item.select.indexOf('|') < 0 ? "or like" : 'or',
|
val:(item.select==='strategicIndustryCode'||item.select=== 'industrycode'||item.select=== 'cpcCodeSort')&&item.text.length>0?((','+item.text).replaceAll(',',',|')).substring(1):item.text,
|
// val:(item.select==='strategicIndustryCode'||item.select=== 'industrycode'||item.select==='cpcCodeSort')&&item.text.length>0?((','+item.text).replaceAll(',',',|')).substring(1):item.text,
|
}
|
if(obj.field==="locarnoCodeSort"){
|
obj.val=(','+obj.val).replaceAll(',',',|').substring(1)
|
}
|
console.log(obj);
|
if (key == 'date') {
|
obj.val = ''
|
obj.start = item.type == 'after' ? item.text : item.type == 'range' ? item.text[0] : ''
|
obj.end = item.type == 'before' ? item.text : item.type == 'range' ? item.text[1] : ''
|
}
|
params.push(obj)
|
}
|
})
|
})
|
if(!((this.CountryCheck===this.CountryLength&&this.elseCountry===true)||(this.CountryCheck===0&&this.elseCountry===false))){
|
if(this.CountryCheck>0){
|
let obj={childFieldLevel: 0,field:'countryCode',name:'国家',rule:'in',val:''}
|
let arr =[]
|
for(let i=0;i<this.CountryMain.length;i++){
|
if(this.CountryMain[i].checked===true){
|
arr.push(this.CountryMain[i].Abbr)
|
}
|
}
|
|
obj.val=arr.join(',')
|
params.push(obj)
|
}
|
if(this.elseCountry===true){
|
let obj={childFieldLevel: 0,field:'countryCode',name:'国家',rule:'not in',val:''}
|
let arr =[]
|
for(let i=0;i<this.CountryMain.length;i++){
|
if(this.CountryMain[i].checked===false){
|
arr.push(this.CountryMain[i].Abbr)
|
}
|
}
|
obj.val=arr.join(',')
|
params.push(obj)
|
}
|
}
|
|
|
return params
|
},
|
doFormItem(type, key, logic, index) {
|
if (type === 'plus') {
|
this.form[key].push({ select: this.options[key][0].code, text: '', logic: this.options[logic][0].code, value: '' })
|
} else {
|
this.form[key].splice(index, 1);
|
}
|
console.log(this.form);
|
},
|
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
main {
|
width: 100%;
|
border: 1px solid #c2c2c2;
|
display: flex;
|
|
.left {
|
min-width: 250px;
|
margin-left: 40px;
|
display: flex;
|
|
// padding-left: 20px;
|
|
.header {
|
width: 250px;
|
height: 90%;
|
text-align: left;
|
// margin: 10px 0;
|
margin: 40px auto 0;
|
padding: 5px;
|
// padding-top: 62px;
|
background: #fff;
|
box-shadow: 0 0 2px 0;
|
|
}
|
|
.level1 {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
li {
|
width: 31%;
|
text-align: left;
|
margin: 5px 0;
|
}
|
}
|
|
.level2 {
|
width: 100%;
|
|
li {
|
width: 30%;
|
text-align: left;
|
margin: 5px 0;
|
}
|
}
|
}
|
|
.right {
|
width: calc(100% - 330px);
|
// min-width: 1066px;
|
// border-left: 2px solid #c2c2c2;
|
// padding: 40px;
|
margin: 40px;
|
|
.title {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
font-size: 20px;
|
font-weight: 600;
|
position: relative;
|
top: -40px;
|
|
}
|
|
.top {
|
width: 100%;
|
position: relative;
|
|
.tem {
|
font-size: 20px;
|
position: absolute;
|
top: 20px;
|
right: 100px;
|
}
|
|
ul {
|
width: 100%;
|
|
li {
|
display: flex;
|
width: 100%;
|
align-items: flex-start;
|
|
>span {
|
display: inline-block;
|
width: 80px;
|
line-height: 32px;
|
}
|
|
.seclect {
|
width: 90%;
|
|
>div {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
|
>* {
|
margin-right: 10px;
|
}
|
|
textarea {
|
width: 100%;
|
height: 100px;
|
}
|
|
textarea:focus {
|
outline-color: #c2c2c2;
|
}
|
}
|
|
.topjiansuo {
|
padding: 20px 0;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
li:nth-child(1) {
|
width: 30%;
|
|
span {
|
padding: 0 10px;
|
color: #c2c2c2;
|
border: 1px solid #c2c2c2;
|
margin-right: 10px;
|
}
|
}
|
|
li:nth-child(2) {
|
width: 30%;
|
|
span:nth-child(2) {
|
width: 150px;
|
padding: 0 10px;
|
height: 50px;
|
line-height: 50px;
|
color: #c2c2c2;
|
border: 1px solid #c2c2c2;
|
margin-left: 10px;
|
}
|
|
span:nth-child(1) {
|
padding: 0 10px;
|
height: 50px;
|
line-height: 50px;
|
background: #ef8201;
|
color: #ffffff;
|
font-weight: 500;
|
border: 1px solid #c2c2c2;
|
margin-left: 10px;
|
}
|
}
|
}
|
}
|
|
.seclectDate {
|
width: 85%;
|
|
div {
|
display: flex;
|
|
.item {
|
margin-right: 1%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.bottom {
|
width: 100%;
|
|
.searchManner {
|
width: 100%;
|
padding-left: 100px;
|
display: flex;
|
margin: 20px 0;
|
|
span {
|
display: inline-block;
|
width: 100px;
|
height: 50px;
|
line-height: 50px;
|
}
|
}
|
|
.right_role {
|
// width: 800px;
|
display: flex;
|
justify-content: space-between;
|
margin-left: 100px;
|
|
ul {
|
width: 600px;
|
display: flex;
|
justify-content: space-between;
|
|
li {
|
text-align: center;
|
width: 50px;
|
height: 50px;
|
line-height: 50px;
|
color: #c2c2c2;
|
border: 1px solid #c2c2c2;
|
margin-right: 5xp;
|
}
|
}
|
|
.auxiliary {
|
padding: 0 10px;
|
height: 50px;
|
line-height: 50px;
|
color: #c2c2c2;
|
border: 1px solid #c2c2c2;
|
margin-left: 50px;
|
}
|
}
|
|
.right_dir {
|
textarea {
|
width: 700px;
|
height: 300px;
|
background: #f9f9f9;
|
margin-left: 100px;
|
padding: 5px;
|
}
|
|
textarea:focus {
|
outline-color: #c2c2c2;
|
}
|
|
ul {
|
display: flex;
|
margin: 20px 100px 0;
|
|
li {
|
padding: 0 20px;
|
line-height: 50px;
|
color: #c2c2c2;
|
border: 1px solid #c2c2c2;
|
margin-right: 10px;
|
}
|
|
li:nth-last-child(1) {
|
background: #ef8201;
|
color: #f9f9f9;
|
font-weight: 500;
|
margin-left: 100px;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
footer {
|
// position: absolute;
|
// bottom: 0;
|
width: 100%;
|
height: 80px;
|
background-color: rgba(102, 102, 102, 1);
|
color: #ffffff;
|
font-family: "微软雅黑";
|
font-weight: 400;
|
font-style: normal;
|
font-size: 14px;
|
text-align: center;
|
|
// @media (max-width: 1280px) {
|
// position: relative;
|
// top: var(--height);
|
// }
|
div {
|
width: 100%;
|
margin: 0 auto;
|
line-height: 80px;
|
justify-content: space-between;
|
|
@media (max-width: 1280px) {
|
width: 90%;
|
}
|
}
|
}
|
</style>
|
<style scoped>
|
/* .ant-select-selection {
|
width: 100%;
|
} */
|
|
.ant-transfer>div:first-child .ant-transfer-list-header-selected span {
|
color: #fff;
|
}
|
|
.ant-tree li .ant-tree-title {
|
display: inline-block;
|
max-width: 400px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
|
}
|
|
.ant-transfer-list-content-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.ant-transfer-list-content-item .ant-transfer-list-content-item-text {
|
display: inline-block;
|
max-width: 300px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.ant-checkbox-group-item {
|
width: 100%;
|
margin-bottom: 2px;
|
}
|
</style>
|
