1 Star 0 Fork 0

N0ts / IceCreamSearch

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
index.html 13.34 KB
Copy Edit Web IDE Raw Blame History
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<title>IceCream | 简约且有个性的导航</title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 主体框架 -->
<div id="Search">
<!-- Bing今日壁纸 -->
<div class="bingBg">
<!-- 网站列表打开 -->
<div :class="{openAppList: true, openAppListShow: openApp}" @click="openAppList">
<i class="el-icon-arrow-up"></i>
</div>
<!-- 网站列表 -->
<div :class="{appList: true, appListShow: openApp}">
<!-- 毛玻璃背景 -->
<div class="appListBg"></div>
<!-- 关闭按钮 -->
<div class="closeAppList" @click="openAppList">
<i class="el-icon-arrow-down"></i>
</div>
<!-- 分类菜单 -->
<div class="appListMenu">
<div v-for="(item, index) in LinkList" :key="index" @click="scrollMenu(index)">{{item.navName}}
</div>
</div>
<!-- 分类框架 -->
<div class="appListBox" @scroll="shadow">
<!-- 各种分类 -->
<div class="appListClass" v-for="(item, index) in LinkList" :key="index">
<!-- 分类标题 -->
<p class="appListClassTitle">{{item.navName}}</p>
<!-- 分类列表 -->
<div class="appListClassBox">
<div class="appListClassList" v-for="(item2, index2) in item.links" :key="index2">
<a :href="item2.href" target="_blank">
<el-tooltip class="item" effect="dark" :content="item2.content" placement="bottom">
<div>
<img :src="item2.img">
<p>{{item2.name}}</p>
<p>{{item2.content}}</p>
</div>
</el-tooltip>
</a>
</div>
</div>
</div>
<!-- 撑开底部 -->
<div class="Boom">没有更多内容啦!</div>
</div>
</div>
<!-- 页脚版权信息 -->
<div :class="{footer: true, footerNone: openApp}" v-if="saveData.footerText">
<div v-if="bingData.images">
<p>{{bingData.images[bingIndex].copyright}}</p>
</div>
<div>
<p>© 2020 YYTL | THEME MADE BY <a href="https://n0ts.cn">N0ts</a></p>
<p><a href="http://beian.miit.gov.cn">湘ICP备xxxxxx号</a></p>
</div>
</div>
</div>
<!-- 初始化询问 -->
<el-dialog title="提示" :visible.sync="initDialog" width="40%">
<span>是否允许我们将您的设置文件存入到 localStorage(本地缓存),这将获得完美的体验</span>
<span slot="footer" class="dialog-footer">
<el-button @click="initDialogClose(false)">取 消</el-button>
<el-button type="primary" @click="initDialogClose(true)">确 定</el-button>
</span>
</el-dialog>
<!-- 搜索框 -->
<div id="soBox" :class="{soBoxtop: openApp}">
<!-- 主体框框 -->
<div class="soBoxtext">
<!-- 右侧搜索图标 -->
<i class="el-icon-search rightIcon" @click="goBaidu"></i>
<!-- 左侧搜索引擎图标 -->
<div class="soImg" @click="selectLink">
<img :src="saveData.so[saveData.soIndex].icon">
</div>
<!-- 搜索框本框 -->
<input type="text" id="soBoxtext" v-model="soBoxtext" placeholder="搜点什么..." @focus="SoFocus(true)"
@blur="SoFocus(false)" @keyup="SoChange($event)">
</div>
<!-- 搜索结果 -->
<div class="soBoxlist">
<div id="soBoxlist"></div>
</div>
<!-- 搜索引擎切换 -->
<div :class="{soSelectList: true, soSelectListShow: soSelect}">
<div class="soSelect" v-for="(item, index) in saveData.so">
<div :class="{active: index == saveData.soIndex}" @click="soSelect1(index)" @contextmenu.prevent="">
<img :src="item.icon">
<p>{{item.name}}</p>
</div>
</div>
<div class="soSelect soSelectAdd" @click="soSelectAdd = true">
<i class="el-icon-plus"></i>
</div>
<div class="soSelect soSelectClose" @click="selectLink">
<i class="el-icon-close"></i>
</div>
</div>
<!-- 一言 -->
<p id="hitokoto">:D 获取中...</p>
<!-- <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tv&skin=pitaya" frameborder="0" width="255" height="25" allowtransparency="true"></iframe> -->
</div>
<!-- 搜索引擎添加 -->
<el-dialog title="新增一个搜索引擎" :visible.sync="soSelectAdd">
<el-form label-width="80px" label-position="top">
<el-form-item>
<p>搜索引擎名称</p>
<p>例如:百度</p>
<el-input v-model="soAdd.name" placeholder="搜索引擎名称"></el-input>
</el-form-item>
<el-form-item>
<p>搜索引擎图标</p>
<p>例如:https://www.baidu.com/favicon.ico</p>
<el-input v-model="soAdd.icon" placeholder="搜索引擎图标"></el-input>
</el-form-item>
<el-form-item>
<p>搜索引擎链接</p>
<p>例如:https://www.baidu.com/s?wd=</p>
<el-input v-model="soAdd.linkHead" placeholder="搜索引擎链接"></el-input>
</el-form-item>
<el-button type="primary" @click="soSelectAddFc" style="width: 100%;">添加</el-button>
</el-form>
</el-dialog>
<!-- 设置按钮 -->
<div :class="{optionIcon: true, optionIconNone: openApp}" @click="leftBar = true">
<i class="el-icon-setting"></i>
</div>
<!-- 侧边菜单 -->
<el-drawer :visible.sync="leftBar" :with-header="false" direction="ltr">
<!-- 关闭按钮 -->
<i class="closeTab el-icon-close" @click="leftBar = false"></i>
<el-tabs v-model="tabsActive">
<el-tab-pane label="基本设置" name="option">
<div class="tabBox">
<p class="h1">本地存储</p>
<div class="text">
<p>将设置存储在本地</p>
</div>
<div class="tools">
<el-switch style="display: block" v-model="saveData.updateStorage" active-color="#13ce66"
@change="StorageStatus">
</el-switch>
</div>
</div>
<div class="tabBox">
<p class="h1">搜索框</p>
<div class="text">
<p>搜索结果显示的数量(1 - 10)</p>
</div>
<div class="tools">
<el-input-number v-model="saveData.soBoxlistShowNum" controls-position="right"
@change="soBoxlistUpdate($event)" :min="0" :max="10"></el-input-number>
</div>
</div>
<div class="tabBox">
<p class="h1">背景图片</p>
<div class="text">
<p>背景图片外链:</p>
<p>允许上传网络图片,网络地址需为图片真实地址</p>
</div>
<div class="tools">
<el-input v-model="saveData.bgLink" placeholder="请输入图片链接" @change="setBgImg"></el-input>
<el-button type="primary" icon="el-icon-upload" @click="selectBgImg(1)">上传图片获取链接</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="selectBgImg(2)">随机一张
</el-button>
</div>
</div>
<div class="tabBox">
<p class="h1">底部文字显示</p>
<div class="text">
<p>是否显示底部文字</p>
</div>
<div class="tools">
<el-switch style="display: block" v-model="saveData.footerText" active-color="#13ce66"
@change="footerTextStatus">
</el-switch>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="关于" name="about">
<div class="tabBox">
<p class="h1">IceCream</p>
<div class="text">
<p>基于 Vue 与 ElementUI实现的导航,自带搜索功能以及各种实用网站导航,目前暂未完工,尽请期待...</p>
</div>
</div>
<div class="tabBox updataInfo">
<p class="h1">更新日志</p>
<div class="text">
<div>
<p>2021-1-19</p>
<ul>
<li>自适应完成</li>
<li>菜单新增关闭按钮</li>
<li>版权与图片信息文字位置更改</li>
<li>版权与图片信息文字可开关</li>
<li>数据结构代码优化</li>
</ul>
</div>
<div>
<p>2020-12-27</p>
<ul>
<li>随机切换壁纸保存</li>
</ul>
</div>
<div>
<p>2020-12-22</p>
<ul>
<li>搜索功能已完善</li>
<li>搜索框右侧新增图标</li>
<li>搜索框聚焦效果增加</li>
<li>搜索结果动画增加</li>
<li>背景切换修复</li>
<li>背景接口失效会启用备用壁纸</li>
<li>背景外链链接存储</li>
<li>点击搜索功能</li>
</ul>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="待添加" name="load">待添加</el-tab-pane>
</el-tabs>
</el-drawer>
</div>
<!-- js引用 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
<script src="./js/wdnmd.js" type="module"></script>
<script>
// 百度搜索框回调
function callback(data) {
// li 高度
let listHeight = 40;
// 结果高度
let resultHeight = 0;
for (let i = 0; i < data.s.length; i++) {
let ice = JSON.parse(window.sessionStorage.getItem("IceCream"));
// 超过预定数量跳出
if (i == ice.soBoxlistShowNum) {
break;
}
let so = ice.so[ice.soIndex].linkHead;
// 结果 li 添加
let oLi = document.createElement("li");
oLi.innerHTML = "<a target='_blank' href=\"" + so + "" + data.s[i] + "\">" + data.s[
i] + "</a>";
soBoxlist.appendChild(oLi);
// 结果高度计算
resultHeight += listHeight;
}
// 结果高度设置
document.querySelector(".soBoxlist").style.height = resultHeight + "px";
}
</script>
</body>
</html>

Comment ( 1 )

Sign in for post a comment

1
https://gitee.com/n0ts/IceCreamSearch.git
git@gitee.com:n0ts/IceCreamSearch.git
n0ts
IceCreamSearch
IceCreamSearch
master

Search