增加手机端页面支持

Xwudao · Aug 11, 2020 · d273457 · d273457
1 parent a4cf787
commit d273457
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 4 deletions.
diff --git a/main.js b/main.js
@@ -1,3 +1,5 @@
+
 require('./src/styles/reset.scss')
 require('./src/styles/style.scss')
-require('./src/index')
+require('./src/index')
+
diff --git a/mobileMain.js b/mobileMain.js
@@ -0,0 +1,3 @@
+require('./src/styles/reset.scss')
+require('./src/styles/style_mobile.scss')
+require('./src/mobile')
diff --git a/public/index.html b/public/index.html
@@ -68,7 +68,7 @@
         <iframe src="https://ghbtns.com/github-btn.html?user=Xwudao&repo=lzpan_search&type=star&count=true"
             frameborder="0" scrolling="0"
             style="height: 20px;max-width: 108px;padding-left:5px;box-sizing: border-box;margin-bottom: -5px;display:unset !important;"></iframe>
-    </footer target="_blank">
+    </footer>
 </body>
 <script type="text/javascript" src="https://js.users.51.la/20403707.js"></script>
 

diff --git a/public/mobile.html b/public/mobile.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh_CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>懒盘搜索聚合官网 - lzpan.com</title>
+    <meta name="keywords"
+        content="优聚集,ujuji.com,ujuji,优聚集搜索,优聚集集合搜索,懒盘优聚集,迷思爱,懒盘,懒盘搜索,蓝奏云搜索,蓝奏搜索,lzpan,懒盘聚合搜索,音乐聚合搜索,盘搜搜,百度云搜索,百度云资源,网盘文件搜索,百度网盘资源,蓝奏网盘资源,网盘搜索神器,网盘搜索引擎,蓝奏网盘搜索引擎,百度网盘搜索引擎">
+    <meta name="description"
+        content="迷思爱聚合搜索,优聚集综合搜索导航，包括：懒盘搜索，蓝奏云搜索，百度网盘聚合搜索，磁力搜索聚合，音乐聚合收听，电影聚合收看，学术网站聚合搜索，一切尽在迷思爱聚合导航。">
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <header>
+        <div class="brand">
+            <a href="#">
+                <img src="https://wimg.misiyu.cn/images/2020/8/2020-08-10_49a0d834c52e8582e77ebfc5bec584e0.png?x-oss-process=style/common"
+                    alt="懒盘聚合搜索">
+                <span class="title">懒盘搜索</span>
+            </a>
+        </div>
+        <div class="categories">
+            <select id="select">
+                <option value="https://12312">懒盘</option>
+            </select>
+        </div>
+    </header>
+    <main>
+        <div class="loading" id="loading">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="err" id="err">加载错误，请刷新或者更换其他网站</div>
+        <iframe name="search" src="https://misiyu.cn" frameborder="0" allowfullscreen
+            allowpaymentrequest="true"></iframe>
+    </main>
+    <footer>
+        <span class="span">&copy;2019-<em id="year"></em></span>
+        <!-- <span><a target="_blank" href="https://lzpan.com">懒盘</a></span> -->
+        <span><a target="_blank" href="https://ihothub.com">爱热榜</a></span>
+        <span><a target="_blank" href="https://ujuji.com">优聚集</a></span>
+        <span><a target="_blank" href="https://mall.misiai.com">优惠券</a></span>
+    </footer>
+</body>
+<script type="text/javascript" src="https://js.users.51.la/20403707.js"></script>
+
+</html>
diff --git 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
@@ -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);
+
+}
diff --git a/src/mobile.js 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 = $(`<option value="https://12312">懒盘</option>`)
+            // 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 = $(`<option value="https://12312">懒盘</option>`)
+                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
@@ -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
@@ -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
@@ -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: [
                 {