942 lines
21 KiB
Vue
942 lines
21 KiB
Vue
<template>
|
||
<el-container class="home">
|
||
|
||
<!-- 侧边栏 -->
|
||
<el-aside class="home-aside shadow-1">
|
||
<el-menu
|
||
class="side-nav"
|
||
default-active="search"
|
||
:collapse="config.sideMenuCollapse"
|
||
:collapse-transition="false"
|
||
@select="changeCategory"
|
||
>
|
||
|
||
<!-- 搜索引擎 -->
|
||
<el-menu-item index="search">
|
||
<i class="el-icon-search"></i>
|
||
<span slot="title">搜索</span>
|
||
</el-menu-item>
|
||
|
||
<!-- 全部链接 -->
|
||
<el-menu-item index="all">
|
||
<i class="el-icon-menu"></i>
|
||
<span slot="title">全部链接</span>
|
||
</el-menu-item>
|
||
|
||
<!-- 分类 -->
|
||
<el-menu-item
|
||
v-for="(item, itemIndex) in navLinks.list"
|
||
:key="'list-' + itemIndex"
|
||
:index="itemIndex.toString()"
|
||
>
|
||
<i :class="item.icon || 'el-icon-link'"></i>
|
||
<span slot="title">{{ item.title }}</span>
|
||
</el-menu-item>
|
||
|
||
</el-menu>
|
||
</el-aside>
|
||
|
||
<!-- 内容 -->
|
||
<el-main class="home-content">
|
||
<div class="wrapper">
|
||
|
||
<!-- 搜索引擎 -->
|
||
<div v-show="show.searchEngine" class="search-engine">
|
||
|
||
<!-- 搜索栏 -->
|
||
<div :class="['search-bar', 'shadow-3', { suggest: showSES }]">
|
||
|
||
<!-- 输入 -->
|
||
<input
|
||
v-model="searchEngine.keyword"
|
||
class="input"
|
||
type="text"
|
||
@blur="searchEngine.isFocus = false"
|
||
@focus="searchEngine.isFocus = true"
|
||
@keydown.enter.exact="searchEngineSubmit()"
|
||
/>
|
||
|
||
<!-- 清除 -->
|
||
<div
|
||
v-show="searchEngine.keyword.length > 0"
|
||
class="btn btn-clear"
|
||
@click="searchEngine.keyword = ''"
|
||
>
|
||
<i class="el-icon-close"></i>
|
||
</div>
|
||
|
||
<!-- 搜索 -->
|
||
<div class="btn btn-search" @click="searchEngineSubmit()">
|
||
<i class="el-icon-search"></i>
|
||
</div>
|
||
|
||
<!-- 关键词建议 -->
|
||
<div class="suggestion shadow-3">
|
||
<ul>
|
||
<li
|
||
v-for="item in searchEngine.suggest.list"
|
||
:key="item.id"
|
||
@click="searchEngine.keyword = item.label"
|
||
>
|
||
<!-- 文本 -->
|
||
<span class="label">{{ item.label }}</span>
|
||
<!-- 来源 -->
|
||
<el-tag
|
||
class="tag"
|
||
effect="plain"
|
||
size="mini"
|
||
type="success"
|
||
>{{ searchEngine.suggest.name }}</el-tag>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 选择搜索引擎 -->
|
||
<el-radio-group
|
||
v-model="config.searchEngine"
|
||
size="small"
|
||
:class="['search-type', { fade: searchEngine.isFocus }]"
|
||
>
|
||
<!-- 分类 -->
|
||
<div
|
||
v-for="(category, cIndex) in searchEngine.list"
|
||
:key="cIndex"
|
||
class="category"
|
||
>
|
||
|
||
<!-- 标题 -->
|
||
<div class="title">{{ category.title }}</div>
|
||
|
||
<!-- 项 -->
|
||
<el-radio
|
||
v-for="item in category.list"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
class="shadow-2"
|
||
>
|
||
<IconElement :path="item.icon || 'website/default.svg'" size="1.2em" />
|
||
<i class="name">{{ item.name }}</i>
|
||
<i class="desc limit-line-1">{{ item.desc }}</i>
|
||
</el-radio>
|
||
|
||
</div>
|
||
</el-radio-group>
|
||
|
||
</div>
|
||
|
||
<!-- 链接搜索框 -->
|
||
<el-input
|
||
v-show="show.searchLink"
|
||
v-model="searchLink.keyword"
|
||
class="link-search shadow-2"
|
||
placeholder="搜索链接"
|
||
clearable
|
||
>
|
||
<el-select slot="prepend" v-model="searchLink.type" placeholder="类型">
|
||
<el-option label="全部" value="all"></el-option>
|
||
<el-option label="标题" value="title"></el-option>
|
||
<el-option label="链接" value="link"></el-option>
|
||
<el-option label="简介" value="desc"></el-option>
|
||
</el-select>
|
||
</el-input>
|
||
|
||
<!-- 链接列表树 -->
|
||
<el-tree
|
||
v-show="show.linkTree"
|
||
ref="linkTree"
|
||
class="link-tree shadow-2"
|
||
:data="currentLinks"
|
||
node-key="id"
|
||
empty-text="没有查找到内容"
|
||
:props="{ label: 'title', children: 'items' }"
|
||
:filter-node-method="searchLinkSubmit"
|
||
:default-expand-all="false"
|
||
:expand-on-click-node="true"
|
||
>
|
||
<div
|
||
slot-scope="{ node, data }"
|
||
class="link-item"
|
||
:title="data.update"
|
||
@click="openLink(data.link, data.showOnly)"
|
||
@contextmenu.prevent="openDetail(data)"
|
||
>
|
||
<div class="row title">
|
||
<span>{{ node.label }}</span>
|
||
<span v-if="data.desc"> - {{ data.desc }}</span>
|
||
</div>
|
||
<div class="row link">
|
||
<span>{{ data.link }}</span>
|
||
</div>
|
||
</div>
|
||
</el-tree>
|
||
|
||
</div>
|
||
</el-main>
|
||
|
||
<!-- 链接详情 -->
|
||
<el-dialog
|
||
:append-to-body="true"
|
||
custom-class="link-detail"
|
||
title="详情"
|
||
:visible="linkDetail.show"
|
||
@close="linkDetail.show = false"
|
||
>
|
||
<div class="content">
|
||
<div class="row">
|
||
<div class="label">ID：</div>
|
||
<div class="text">{{ linkDetail.id }}</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="label">标题：</div>
|
||
<div class="text">{{ linkDetail.title }}</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="label">链接：</div>
|
||
<div class="text">
|
||
<el-link
|
||
v-show="!linkDetail.linkCopy"
|
||
type="primary"
|
||
:href="linkDetail.link"
|
||
target="_blank"
|
||
>{{ linkDetail.link }}</el-link>
|
||
<input
|
||
v-show="linkDetail.linkCopy"
|
||
type="text"
|
||
:value="linkDetail.link"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-show="linkDetail.desc != ''" class="row">
|
||
<div class="label">简介：</div>
|
||
<div class="text">{{ linkDetail.desc }}</div>
|
||
</div>
|
||
<div v-show="linkDetail.update != ''" class="row">
|
||
<div class="label">更新：</div>
|
||
<div class="text">{{ linkDetail.update }}</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @typedef {object} NavLinkItem
|
||
* @property {string} title
|
||
* @property {string} desc
|
||
* @property {string} link
|
||
*/
|
||
|
||
import IconElement from '@/components/IconElement.vue';
|
||
|
||
export default {
|
||
name: 'HomeView',
|
||
components: {
|
||
IconElement
|
||
},
|
||
beforeRouteEnter(to, from, next) {
|
||
next(vm => {
|
||
vm.utils.changeTitle();
|
||
});
|
||
},
|
||
data() {
|
||
return {
|
||
config: this.$root.config.storage,
|
||
utils: this.$root.utils,
|
||
// 显示的内容
|
||
show: {
|
||
searchEngine: true,
|
||
searchLink: false,
|
||
linkTree: false,
|
||
},
|
||
// 搜索引擎
|
||
searchEngine: {
|
||
isFocus: false,
|
||
keyword: '',
|
||
list: this.$root.config.searchEngines,
|
||
url: '',
|
||
debounce: null,
|
||
suggest: {
|
||
list: [],
|
||
name: '',
|
||
},
|
||
},
|
||
// 导航链接
|
||
navLinks: this.$root.navLinks,
|
||
// 当前显示的链接
|
||
currentLinks: [],
|
||
// 搜索链接
|
||
searchLink: {
|
||
debounce: null,
|
||
keyword: '',
|
||
type: 'all'
|
||
},
|
||
// 链接详情
|
||
linkDetail: {
|
||
show: false,
|
||
id: '',
|
||
title: '',
|
||
link: '',
|
||
linkCopy: false,
|
||
desc: '',
|
||
update: '',
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
|
||
/**
|
||
* 显示搜索引擎关键词建议
|
||
*/
|
||
showSES() {
|
||
var se = this.searchEngine;
|
||
var isShow = (
|
||
(se.isFocus) &&
|
||
(se.keyword !== '') &&
|
||
(se.suggest.list.length > 0)
|
||
);
|
||
|
||
return isShow;
|
||
},
|
||
|
||
},
|
||
watch: {
|
||
'searchEngine.keyword': {
|
||
handler(value) {
|
||
if (!this.config.searchSuggestion) {
|
||
return;
|
||
}
|
||
clearInterval(this.searchEngine.debounce);
|
||
this.searchEngine.debounce = setTimeout(() => {
|
||
value = window.encodeURIComponent(value);
|
||
this.searchEngineGS(value);
|
||
}, 500);
|
||
}
|
||
},
|
||
'searchLink.keyword': {
|
||
handler(value) {
|
||
clearTimeout(this.searchLink.debounce);
|
||
this.searchLink.debounce = setTimeout(() => {
|
||
this.$refs.linkTree.filter(value);
|
||
}, 500);
|
||
}
|
||
},
|
||
'searchLink.type': {
|
||
handler() {
|
||
// 更改搜索类型时自动重新搜索
|
||
this.$refs.linkTree.filter(this.searchLink.keyword);
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
|
||
/** 更改当前显示的分类 */
|
||
changeCategory(index) {
|
||
const { navLinks, searchLink, show } = this;
|
||
|
||
if (index === 'search') {
|
||
this.currentLinks = [];
|
||
show.searchEngine = true;
|
||
show.searchLink = false;
|
||
show.linkTree = false;
|
||
} else if (index === 'all') {
|
||
this.currentLinks = navLinks.list;
|
||
show.searchEngine = false;
|
||
show.searchLink = true;
|
||
show.linkTree = true;
|
||
} else {
|
||
this.currentLinks = navLinks.list[Number(index)].items;
|
||
show.searchEngine = false;
|
||
show.searchLink = true;
|
||
show.linkTree = true;
|
||
}
|
||
|
||
searchLink.keyword = '';
|
||
},
|
||
|
||
/**
|
||
* @description 查看详情
|
||
* @param {object} datas 当前链接的数据
|
||
*/
|
||
openDetail(datas) {
|
||
// 非链接 / 仅显示
|
||
if (datas.link === undefined) {
|
||
return;
|
||
}
|
||
|
||
var detail = this.linkDetail;
|
||
|
||
detail.id = datas.id;
|
||
detail.title = datas.title;
|
||
detail.link = datas.link;
|
||
detail.linkCopy = datas.showOnly || false;
|
||
detail.desc = datas.desc || '';
|
||
detail.update = datas.update || '';
|
||
detail.show = true;
|
||
},
|
||
|
||
/**
|
||
* @description 打开链接
|
||
* @param {string} link 需要打开的链接
|
||
* @param {boolean} showOnly 是否仅显示链接
|
||
*/
|
||
openLink(link, showOnly) {
|
||
if (link === undefined) {
|
||
return false;
|
||
}
|
||
|
||
if (showOnly) {
|
||
this.$message({
|
||
duration: 5000,
|
||
message: '请在链接详情中复制后手动打开',
|
||
type: 'warning'
|
||
});
|
||
} else {
|
||
window.open(link, '_blank');
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @typedef MDNSearchIndexDatas
|
||
* @type {{ title: string, url: string }[]}
|
||
*/
|
||
|
||
/**
|
||
* @description 解析 MDN 搜索关键词
|
||
* @param {MDNSearchIndexDatas} datas 关键词数据
|
||
* @param {string} keyword 输入的关键词
|
||
* @param {number} [max] 最多返回的结果数量，默认为 10
|
||
* @returns {MDNSearchIndexDatas} 匹配到的关键词
|
||
*/
|
||
parseMDNSearchWords(datas = [], keyword = '', max = 10) {
|
||
/** @type {MDNSearchIndexDatas} */
|
||
const result = [];
|
||
const word = String(keyword).toLowerCase();
|
||
|
||
let count = 0;
|
||
|
||
for (const item of datas) {
|
||
if (item.title.toLowerCase().indexOf(word) > -1) {
|
||
result.push(item);
|
||
if ((count += 1) >= max) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
return result;
|
||
},
|
||
|
||
/**
|
||
* @description 搜索引擎（获取关键词建议）
|
||
* @param {string} keyword 当前输入的关键词
|
||
*/
|
||
searchEngineGS(keyword) {
|
||
var suggest = this.searchEngine.suggest;
|
||
// 设置的搜索引擎名称
|
||
var configSE = this.config.searchEngine;
|
||
// 关键词建议来源信息（默认使用百度）
|
||
var reqURLs = [
|
||
{
|
||
name: '百度',
|
||
url: `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`
|
||
},
|
||
{
|
||
name: 'bilibili',
|
||
url: `https://s.search.bilibili.com/main/suggest?func=suggest&main_ver=v1&term=${keyword}&jsonp=jsonp&callback=cbSES`
|
||
},
|
||
];
|
||
var reqURL = reqURLs[0].url;
|
||
|
||
suggest.list = [];
|
||
suggest.name = reqURLs[0].name;
|
||
|
||
if (keyword === '') {
|
||
return;
|
||
}
|
||
|
||
// 根据当前搜索引擎选择请求地址
|
||
for (let i = 0; i < reqURLs.length; i++) {
|
||
let item = reqURLs[i];
|
||
if (item.name === configSE) {
|
||
reqURL = item.url;
|
||
suggest.name = item.name;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 处理数据
|
||
var cbFunc = (data) => {
|
||
|
||
var id = 0; // 结果 ID
|
||
var reqName = suggest.name; // 来源名称
|
||
|
||
if (reqName === '百度') {
|
||
// [百度]
|
||
let result = (data.g || []);
|
||
|
||
if (result.length === 0) {
|
||
return;
|
||
}
|
||
|
||
result.forEach((item) => {
|
||
id += 1;
|
||
suggest.list.push({
|
||
id,
|
||
label: item.q,
|
||
highlight: keyword
|
||
});
|
||
});
|
||
} else if (reqName === 'bilibili') {
|
||
// [bilibili]
|
||
let result = (data.result ? (data.result.tag || []) : []);
|
||
|
||
if (result.length === 0) {
|
||
return;
|
||
}
|
||
|
||
result.forEach((item) => {
|
||
id += 1;
|
||
suggest.list.push({
|
||
id,
|
||
label: item['value'],
|
||
highlight: keyword
|
||
});
|
||
});
|
||
}
|
||
|
||
};
|
||
|
||
// 使用 JSONP 获取
|
||
this.utils.jsonp({
|
||
url: reqURL,
|
||
cbName: 'cbSES',
|
||
cbFunc
|
||
});
|
||
},
|
||
|
||
/** 搜索引擎（搜索） */
|
||
searchEngineSubmit() {
|
||
var vm = this;
|
||
var se = this.searchEngine;
|
||
var selectedSE = this.config.searchEngine;
|
||
var keyword = se.keyword;
|
||
var url = '';
|
||
|
||
if (keyword) {
|
||
keyword = window.encodeURIComponent(keyword);
|
||
} else {
|
||
return false;
|
||
}
|
||
|
||
for (let category in se.list) {
|
||
let list = se.list[category].list;
|
||
|
||
for (let index in list) {
|
||
if (list[index].name === selectedSE) {
|
||
url = list[index].url.replace(/%keyword%/, keyword);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
vm.openLink(url);
|
||
},
|
||
|
||
/**
|
||
* @description 搜索链接（搜索）
|
||
* @param {string} keyword 关键词
|
||
* @param {NavLinkItem} data 每一项链接的信息
|
||
*/
|
||
searchLinkSubmit(keyword, data) {
|
||
|
||
// 关键词为空，显示全部
|
||
if (keyword === '') {
|
||
return true;
|
||
}
|
||
|
||
// 转为小写
|
||
keyword = keyword.toLowerCase();
|
||
|
||
const type = this.searchLink.type;
|
||
const title = (data.title || '').toLowerCase();
|
||
const link = (data.link || '').toLowerCase();
|
||
const desc = (data.desc || '').toLowerCase();
|
||
|
||
switch (type) {
|
||
// 全部
|
||
case 'all':
|
||
return (
|
||
title.includes(keyword) ||
|
||
link.includes(keyword) ||
|
||
desc.includes(keyword)
|
||
);
|
||
// 标题
|
||
case 'title':
|
||
return title.includes(keyword);
|
||
// 链接
|
||
case 'link':
|
||
return link.includes(keyword);
|
||
// 简介
|
||
case 'desc':
|
||
return desc.includes(keyword);
|
||
// 未知
|
||
default:
|
||
return false;
|
||
}
|
||
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.home-aside {
|
||
position: relative;
|
||
z-index: 110;
|
||
width: auto !important;
|
||
overflow-x: hidden;
|
||
|
||
.side-nav {
|
||
min-height: 100%;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.home-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
padding: 2rem;
|
||
background-color: @colorWhite;
|
||
overflow-x: hidden;
|
||
overflow-y: scroll;
|
||
|
||
.wrapper {
|
||
width: 100%;
|
||
min-width: 16rem;
|
||
max-width: 64rem;
|
||
}
|
||
}
|
||
|
||
.search-engine {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-bar {
|
||
@barHeight: 2.8rem;
|
||
@barRadius: 0.3rem;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
position: sticky;
|
||
top: 2.5rem;
|
||
z-index: 100;
|
||
width: 100%;
|
||
max-width: 40rem;
|
||
height: @barHeight;
|
||
border-radius: @barRadius;
|
||
background-color: #FFF;
|
||
|
||
&.suggest {
|
||
border-radius: @barRadius @barRadius 0 0;
|
||
}
|
||
|
||
.input {
|
||
flex-grow: 1;
|
||
padding-left: 1rem;
|
||
width: 0;
|
||
height: 100%;
|
||
outline: none;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
width: 2.8rem;
|
||
height: 2.8rem;
|
||
background-color: transparent;
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-clear {
|
||
width: 2rem;
|
||
opacity: 0.5;
|
||
transition: opacity @transitionTime;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.btn-search {
|
||
border-radius: 0 @barRadius @barRadius 0;
|
||
color: @colorPrimary;
|
||
transition: background @transitionTime, color @transitionTime;
|
||
|
||
&:hover {
|
||
background-color: @colorPrimary;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
&.suggest .btn-search {
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
.suggestion {
|
||
display: block;
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: @barHeight;
|
||
width: 100%;
|
||
border-top: 0.1rem solid #EEE;
|
||
border-radius: 0 0 @barRadius @barRadius;
|
||
background-color: #FFF;
|
||
overflow: hidden;
|
||
// 延迟隐藏
|
||
transition: visibility 0.2s;
|
||
|
||
ul {
|
||
padding: 0.5rem 0;
|
||
list-style: none;
|
||
line-height: 1.5rem;
|
||
font-size: 0.9rem;
|
||
color: #000;
|
||
}
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.5rem 1rem;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background-color: @colorWhite;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
flex-grow: 1;
|
||
padding-right: 0.5em;
|
||
}
|
||
|
||
.tag {
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
&.suggest .suggestion {
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
.search-type {
|
||
display: block;
|
||
margin: 4.5rem 0;
|
||
font-size: 1rem;
|
||
transition: opacity calc(@transitionTime * 4);
|
||
|
||
&.fade {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/deep/ .category {
|
||
padding: 0.5rem 0;
|
||
|
||
.title {
|
||
margin: 0.5rem 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.el-radio {
|
||
margin: 0.5rem;
|
||
padding: 0.8rem 1rem;
|
||
width: 15rem;
|
||
border-radius: 0.25rem;
|
||
border-left: solid 0.2rem transparent;
|
||
background-color: #FFF;
|
||
text-align: left;
|
||
font-weight: normal;
|
||
transition: border @transitionTime;
|
||
|
||
&:hover {
|
||
border-left-color: @colorSecondary;
|
||
color: @colorSecondary;
|
||
}
|
||
|
||
&.is-checked {
|
||
border-left-color: @colorPrimary;
|
||
color: @colorPrimary;
|
||
}
|
||
}
|
||
|
||
.el-radio__input {
|
||
display: none;
|
||
}
|
||
|
||
.el-radio__label {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0;
|
||
transition: color @transitionTime;
|
||
|
||
i {
|
||
display: inline-block;
|
||
padding: 0.125rem 0;
|
||
font-style: normal;
|
||
}
|
||
|
||
.fn-icon {
|
||
flex-shrink: 0;
|
||
margin-right: 0.4rem;
|
||
}
|
||
|
||
.name {
|
||
flex-shrink: 0;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.desc {
|
||
flex-grow: 1;
|
||
margin-left: 0.5rem;
|
||
font-size: 0.8rem;
|
||
color: #CCC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .link-search {
|
||
@height: 2.8rem;
|
||
|
||
position: sticky;
|
||
z-index: 100;
|
||
top: 0;
|
||
margin-bottom: 1rem;
|
||
border-radius: 0.25rem;
|
||
line-height: @height;
|
||
overflow: hidden;
|
||
|
||
> div,
|
||
> input {
|
||
border: none;
|
||
}
|
||
|
||
.el-input-group__prepend {
|
||
background-color: #FFF;
|
||
|
||
.el-select .el-input {
|
||
width: 4.5rem;
|
||
|
||
input {
|
||
padding: 0 0.75rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-input__inner {
|
||
height: @height;
|
||
line-height: @height;
|
||
}
|
||
}
|
||
|
||
.link-tree {
|
||
padding: 0.5rem;
|
||
border-radius: 0.25rem;
|
||
font-size: 14px;
|
||
|
||
/deep/ .el-tree-node__content {
|
||
height: 3.6em;
|
||
}
|
||
|
||
.link-item {
|
||
flex-grow: 1;
|
||
width: 0;
|
||
|
||
> div {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.title {
|
||
opacity: 1;
|
||
}
|
||
|
||
.link {
|
||
margin-top: 0.2rem;
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .link-detail {
|
||
width: 80%;
|
||
max-width: 32rem;
|
||
|
||
.row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
.label {
|
||
flex-shrink: 0;
|
||
width: 3.5em;
|
||
text-align: right;
|
||
}
|
||
|
||
.text {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
input[type="text"] {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
border: none;
|
||
border-radius: 0;
|
||
line-height: 1em;
|
||
font-size: inherit;
|
||
color: @colorSecondary;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="less" scoped>
|
||
@media screen and (max-width: 400px) {
|
||
.home-content {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.search-engine {
|
||
.search-bar {
|
||
top: 1rem;
|
||
}
|
||
|
||
.search-type {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.category {
|
||
text-align: center;
|
||
|
||
.el-radio {
|
||
width: 90% !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|