diff --git a/main.js b/main.js index 621e50b..4940156 100644 --- a/main.js +++ b/main.js @@ -1,3 +1,5 @@ + require('./src/styles/reset.scss') require('./src/styles/style.scss') -require('./src/index') \ No newline at end of file +require('./src/index') + diff --git a/mobileMain.js b/mobileMain.js new file mode 100644 index 0000000..7b21ca8 --- /dev/null +++ b/mobileMain.js @@ -0,0 +1,3 @@ +require('./src/styles/reset.scss') +require('./src/styles/style_mobile.scss') +require('./src/mobile') \ No newline at end of file diff --git a/public/index.html b/public/index.html index c13b839..6eb80be 100644 --- a/public/index.html +++ b/public/index.html @@ -68,7 +68,7 @@ - + diff --git a/public/mobile.html b/public/mobile.html new file mode 100644 index 0000000..57da505 --- /dev/null +++ b/public/mobile.html @@ -0,0 +1,53 @@ + + + + + + + 懒盘搜索聚合官网 - lzpan.com + + + + + + + +
+
+ + 懒盘聚合搜索 + 懒盘搜索 + +
+
+ +
+
+
+
+ + + + + +
+
加载错误，请刷新或者更换其他网站
+ +
+ + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 06a3d70..e9c846b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,15 @@ import { selector, getCategories, matchDomain, getSiteByAlias } from './js/func' import { FAVICON_API_URL } from './core/constants' import * as data from './data/data.json' +import { isMobile } from './js/func' +let jump = isMobile(); + +if (jump) { + window.location.href = 'mobile.html' +} + // doms const yearDom = selector('#year') diff --git a/src/js/func.js b/src/js/func.js index e6b0329..d146e33 100644 --- a/src/js/func.js +++ b/src/js/func.js @@ -36,3 +36,9 @@ export const getSiteByAlias = (data, alias) => { } return {}; } + +export const isMobile = () => { + const sUserAgent = navigator.userAgent.toLowerCase(); + return /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent); + +} \ No newline at end of file diff --git a/src/mobile.js b/src/mobile.js new file mode 100644 index 0000000..4642dcc --- /dev/null +++ b/src/mobile.js @@ -0,0 +1,103 @@ +import { isMobile } from './js/func' +import { selector, getCategories, matchDomain, getSiteByAlias } from './js/func' +import { FAVICON_API_URL } from './core/constants' +import * as data from './data/data.json' + +if (!isMobile()) { + window.location.href = 'index.html' +} + +// doms +const yearDom = selector('#year') + +const oIframe = $('iframe[name="search"]') +const oSelect = $('#select') +const oLoading = $('#loading') +const err = $('#err') + + +// fun 生成select +function _denSelect() { + let _data = data.default; + oSelect.empty(); + + let domArr = [] + let isDefault = false; + let isDisabled = false; + for (const key in _data) { + if (_data.hasOwnProperty(key)) { + const element = _data[key]; + const { alias, title, sites } = element + // 第一层，分类循环 + let oOption = $(``) + // oOption.attr('disabled', true) + oOption.text('======' + title + '======') + // oSelect.append(oOption) + let tmpArr = [] + tmpArr.push(oOption) + + sites.forEach((item, index) => { + + const { link, title } = item; + let oOption = $(``) + oOption.attr('value', link) + oOption.text(title) + + + tmpArr.push(oOption) + }) + domArr.push(tmpArr) + + } + } + domArr.forEach((item) => { + item.forEach((item2, index) => { + // disabled + if (index === 0 && !isDisabled) { + isDisabled = true + item2.attr('disabled', true) + } + // 默认选择 + if (index === 1 && !isDefault) { + isDefault = true + item2.attr('selected', true) + oLoading.css({ display: 'block' }) + oIframe.attr('src', item2.val()) + } + oSelect.append(item2) + }) + }) +} + +// 选择 + +oSelect.on('change', () => { + + oLoading.css({ display: 'block' }) + oIframe.attr('src', oSelect.val()) + +}) + + +// 处理加载中事件 +oIframe.on('load', () => { + oLoading.css({ display: 'none' }) + oIframe.css({ display: 'block' }) +}) +oIframe.on('error', () => { + err.css({ display: 'block' }) +}) + + + + +_denSelect() + + + + + + +// 底部 + +yearDom.innerText = new Date().getFullYear() diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index cf3817f..495273f 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -5,3 +5,6 @@ $header-height: 40px; $footer-height: 30px; $left-site-width: 200px; + +$mobile-header-height: 40px; +$mobile-select-height: 30px; diff --git a/src/styles/style_mobile.scss b/src/styles/style_mobile.scss new file mode 100644 index 0000000..874cd7e --- /dev/null +++ b/src/styles/style_mobile.scss @@ -0,0 +1,123 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +@import './variables'; +@import './mixins'; + +html, +body { + position: relative; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 15px; + line-height: 1.5; + word-spacing: 1px; + letter-spacing: 1px; + color: #333; + height: 100%; + width: 100%; +} + +header { + height: $mobile-header-height; + line-height: $mobile-header-height; + background-color: $primary-color; + .brand { + height: 40px; + line-height: 40px; + margin-left: 0.3rem; + a { + @include a-default; + img { + width: 30px; + height: 30px; + vertical-align: middle; + } + .title { + vertical-align: middle; + font-weight: bold; + font-size: 1.1rem; + } + } + } + .categories { + height: $mobile-select-height; + select { + background-color: #fff; + color: #000000; + border: 1px solid #999999; + width: 100%; + max-width: 100%; + height: 30px; + } + } +} +main { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + width: 100%; + margin: calc(#{#{$header-height} + #{$mobile-select-height} + 10px}) 0 + $footer-height; + display: flex; + + .loading { + display: none; + + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 999; + background-color: rbga(0, 0, 0, 0.5); + @include loading; + } + .err { + display: none; + font-weight: bold; + font-size: 1.3rem; + color: red; + text-align: center; + margin-top: 3rem; + } + iframe { + display: none; + // visibility: hidden; + border: none; + outline: none; + width: 100%; + height: 100%; + overflow-y: auto; + } +} +footer { + position: absolute; + right: 0; + left: 0; + bottom: 0; + background-color: $primary-color; + height: $footer-height; + line-height: $footer-height; + text-align: center; + color: #ffffff; + a { + color: #ffffff; + text-decoration: none; + + &:hover { + color: #e67e22; + } + } + span { + margin: 0 0.5rem; + } +} diff --git a/webpack.config.js b/webpack.config.js index bc5e9a4..08b4c5b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,10 +7,13 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const appTitle = '懒盘搜索聚合官网 - lzpan.com' module.exports = { mode: "development", - entry: path.resolve(__dirname, 'main.js'), + entry: { + index: path.resolve(__dirname, 'main.js'), + mobile: path.resolve(__dirname, 'mobileMain.js') + }, output: { path: path.resolve(__dirname, 'dist'), - filename: "script.js", + filename: "[name].js", chunkFilename: "[name].chunk.js" }, module: { @@ -35,9 +38,16 @@ module.exports = { new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: appTitle, + chunks: ['index'], filename: 'index.html', template: path.resolve(__dirname, 'public/index.html') }), + new HtmlWebpackPlugin({ + title: appTitle, + chunks: ['mobile'], + filename: 'mobile.html', + template: path.resolve(__dirname, 'public/mobile.html') + }), new CopyWebpackPlugin({ patterns: [ {