Merge branch 'dev' of https://gitea.f2b211.com/jsasg/orico-official-website into dev

app/admin/controller/v1/BannerItem.php

@@ -70,7 +70,7 @@ class BannerItem
     {
         $id = request()->param('id');
 
-        $banner_item = SysBannerItemModel::with('prod_mapping.category')
+        $banner_item = SysBannerItemModel::with('prodMapping.category')
             ->withoutField([
                 'created_at',
                 'updated_at',

app/admin/controller/v1/System.php

@@ -8,6 +8,7 @@ use app\admin\model\v1\ArticleModel;
 use app\admin\model\v1\ProductCategoryModel;
 use app\admin\model\v1\ProductModel;
 use think\facade\Db;
+use think\facade\Route;
 
 class System
 {
@@ -224,15 +225,28 @@ class System
     {
         if ('custom' == $link_to) return [];
 
-        $data = [];
-        $url  = parse_url($link, PHP_URL_QUERY);
-        if (empty($url)) return [];
+        $data   = [];
+        $params = [];
+        $url    = parse_url($link, PHP_URL_QUERY);
+        if (empty($url)) {
+            $parts        = explode('/', trim($link, '/'));
+            $params['id'] = (int)str_replace('.html', '', end($parts));
+        } else {
+            parse_str($url, $params);
+        }
+
+        if (empty($params['id'])) return [];
 
-        parse_str($url, $params);
         switch ($link_to) {
+            case 'article_category':
+                $data = ArticleCategoryModel::field(['id', 'name'])->bypk($params['id'])->find();
+                break;
             case 'article':
                 $data = ArticleModel::field(['id', 'title' => 'name'])->bypk($params['id'])->find();
                 break;
+            case 'product_category':
+                $data = ProductCategoryModel::field(['id', 'name'])->bypk($params['id'])->find();
+                break;
             case 'product':
                 $data = ProductModel::field(['id', 'name'])->bypk($params['id'])->find();
                 break;

app/admin/model/v1/SysBannerItemModel.php

@@ -20,7 +20,7 @@ class SysBannerItemModel extends SysBannerItemBaseModel
     // 绑定产品分类关联模型中字段到父模型
     protected $append = ['rel_prod_cate_id', 'rel_prod_cate_name'];
     // 要隐藏的字段或关联模型数据字段
-    protected $hidden = ['prod_mapping'];
+    protected $hidden = ['prodMapping'];
 
     // 关联分类
     public function banner()

app/admin/validate/v1/ArticleValidate.php

@@ -16,10 +16,10 @@ class ArticleValidate extends Validate
     protected $rule = [
         'language_id'  => 'require|integer',
         'category_id'  => 'require|integer',
-        'title'        => 'require|max:64',
+        'title'        => 'require|max:128',
         'image'        => 'max:125',
         'link'         => 'max:255',
-        'desc'         => 'max:255',
+        'desc'         => 'max:512',
         'sort'         => 'integer',
         'recommend'    => 'require|in:0,1',
         'release_time' => 'dateFormat:Y-m-d H:i:s',

app/common/model/ProductSkuBaseModel.php

@@ -21,7 +21,7 @@ class ProductSkuBaseModel extends BaseModel
         'product_id'  => 'int',
         'sku'         => 'string',
         'main_image'  => 'string',
-        'photo_album' => 'string',
+        'photo_album' => 'json',
         'sort'        => 'int',
         'created_at'  => 'datetime',
         'updated_at'  => 'datetime'

app/common/model/SysBannerItemBaseModel.php

@@ -23,7 +23,7 @@ class SysBannerItemBaseModel extends BaseModel
         'title_txt_color' => 'string',
         'desc'            => 'string',
         'desc_txt_color'  => 'string',
-        'type'            => 'int',
+        'type'            => 'string',
         'image'           => 'string',
         'video'           => 'string',
         'link_to'         => 'string',

app/index/config/lang.php

@@ -0,0 +1,30 @@
+<?php
+// +----------------------------------------------------------------------
+// | 多语言设置
+// +----------------------------------------------------------------------
+
+return [
+    // 默认语言
+    'default_lang'    => env('DEFAULT_LANG', 'zh-cn'),
+    // 允许的语言列表
+    'allow_lang_list' => ['zh-cn', 'en-us'],
+    // 多语言自动侦测变量名
+    'detect_var'      => 'lang',
+    // 是否使用Cookie记录
+    'use_cookie'      => true,
+    // 多语言cookie变量
+    'cookie_var'      => 'think_lang',
+    // 多语言header变量
+    'header_var'      => 'think-lang',
+    // 扩展语言包
+    'extend_list'     => [
+        'en-us' => app()->getAppPath() . '/lang/en-us/' . (request()->isMobile() ? 'mobile' : 'pc') . '.php',
+        'zh-cn' => app()->getAppPath() . '/lang/zh-cn/' . (request()->isMobile() ? 'mobile' : 'pc') . '.php',
+    ],
+    // Accept-Language转义为对应语言包名称
+    'accept_language' => [
+        'zh-hans-cn' => 'zh-cn',
+    ],
+    // 是否支持语言分组
+    'allow_group'     => true,
+];

app/index/config/view.php

@@ -2,6 +2,10 @@
 // +----------------------------------------------------------------------
 // | 模板设置
 // +----------------------------------------------------------------------
+$view_deivce_name = 'pc';
+if (request()->isMobile()) {
+    $view_deivce_name = 'mobile';
+}
 
 return [
     // 模板引擎类型使用Think
@@ -9,7 +13,7 @@ return [
     // 默认模板渲染规则 1 解析为小写+下划线 2 全部转换小写 3 保持操作方法
     'auto_rule'     => 1,
     // 模板目录名
-    'view_dir_name' => 'view',
+    'view_dir_name' => "view/{$view_deivce_name}",
     // 模板后缀
     'view_suffix'   => 'html',
     // 模板文件名分隔符
@@ -24,8 +28,8 @@ return [
     'taglib_end'    => '}',
     // 模板输出替换
     'tpl_replace_string' =>  [
-        '__CSS__'    => '/static/index/css',
-        '__JS__'     => '/static/index/js',
-        '__IMAGES__' => '/static/index/images',
+        '__CSS__'    => "/static/index/{$view_deivce_name}/css",
+        '__JS__'     => "/static/index/{$view_deivce_name}/js",
+        '__IMAGES__' => "/static/index/{$view_deivce_name}/images",
     ]
 ];

app/index/lang/en-us/mobile.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+    '搜索' => 'Search',
+    '搜索历史' => 'Search History',
+    '请择地区' => 'SELECT A REGION',
+    '首页' => 'Home',
+    '产品列表' => 'Products',
+    '产品' => 'Product',
+    '联系方式' => 'Contact',
+    '查看所有' => 'View All',
+    '查看全部' => 'View All',
+    '明星产品/热点产品' => 'Featured Products',
+    '了解更多' => 'Learn More',
+    'Orico 技术' => 'ORICO Technology',
+    '强大功能、简单使用' => 'designed to be just as easy to learn as iPhone. chatting with friends.',
+    '常见问题' => 'FAQ',
+    '回答您最关心的问题' => 'What are you most concerned about',
+    '客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内' => 'Our customer support is available Monday to Friday: 9am-6:00pm. Average answer time: 24h',
+];

app/index/middleware.php

@@ -2,5 +2,5 @@
 // 这是系统自动生成的middleware定义文件
 return [
     // 启用多语言支持
-    'think\middleware\LoadLangPack',
+    think\middleware\LoadLangPack::class,
 ];

app/index/view/mobile/index/index.html

@@ -0,0 +1,315 @@
+{extend name="public/base"/}
+{block name="style"}
+<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <!--首页 -->
+    <div class="oricoEGapp-index">
+        <!-- banner-->
+        <div class="oidx-banner">
+            {notempty name="focus_images"}
+            <div class="swiper-container bannerswiper">
+                <div class="swiper-wrapper">
+                    {volist name="focus_images" id="fi"}
+                    <div class="swiper-slide">
+                        <a href="{$fi.link}"><img src="{$fi.image}" alt="{$fi.title}"></a>
+                    </div>
+                    {/volist}
+                </div>
+                <!-- 如果需要分页器 -->
+                <div class="swiper-pagination"></div>
+            </div>
+            {/notempty}
+        </div>
+        <!-- 四大分类 -->
+        {notempty name="product_categorys"}
+        <div class="oidx-cate">
+            {volist name="product_categorys" id="pct"}
+            <div class="cateit">
+                <a href="{$pct.link}">
+                    <img src="{$pct.image}" />
+                    <span {:style(['color'=>$pct['title_txt_color']])}>{$pct.title}</span>
+                </a>
+            </div>
+            {/volist}
+        </div>
+        {/notempty}
+        <!-- 特色专题及公司实力 -->
+        {notempty name="featured_topics"}
+        <div class="oidx-gg">
+            {volist name="featured_topics" id="ft"}
+            <div class="index-img">
+                <img src="{$ft.image}">
+                <div class="Innew-text wow animated bounceInLeft animated">
+                    <p class="title">{$ft.title}</p>
+                    <div class="more">
+                        <a href="{$ft.link}" target="_blank">
+                            {:lang('查看所有')} <i class="icon-right-svg"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {/volist}
+        </div>
+        {/notempty}
+        <!-- 明星产品/热点产品 -->
+        {notempty name="featured_products"}
+        <div class="oidx-FP">
+            <div class="Inpro-text">
+                <p class="title">{:lang('明星产品/热点产品')}</p>
+            </div>
+            <div class="m_Container">
+                <div class="swiper-container FPswiper">
+                    <div class="swiper-wrapper text_center">
+                        {volist name="featured_products" id="fp"}
+                        <div class="swiper-slide inproimg ">
+                            <a href="{:url('product/detail',['id'=>$fp.id])}"><img src="{$fp.cover_image}" alt="" /></a>
+                            <div class="inprotext">
+                                <p class="text_center title">{$fp.name}</p>
+                                <p class="t-f16"></p>
+                                <p class="timeblue">
+                                    <a href="{:url('product/detail',['id'=>$fp.id])}">
+                                        {:lang('了解更多')} <img src="__IMAGES__/more-r.png">
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
+                        {/volist}
+                    </div>
+                    <!-- 如果需要分页器 -->
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 专题图片展示 -->
+        <div class="oidx-ztpictureshow">
+            <!-- 视频 -->
+            {notempty name="video"}
+            <div class="vedio_in">
+                <img src="{$video.image}" />
+                <iframe class="margin-top-20" width="100%" style="z-index:9999;"
+                    src="{$video.video}" title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen="" id="videoElement"></iframe>
+            </div>
+            {/notempty}
+            {notempty name="scenes"}
+            {volist name="scenes" id="sc"}
+            <div class="indocking">
+                <a href="{$sc.link}"><img src="{$sc.image}" /></a>
+                <div class="position_a text_center wow animated bounceInLeft">
+                    <p class="f_weight_500 timetitle" {:style(['color'=>$sc['title_txt_color']])}>{$sc.title}</p>
+                    <p class=" margin-top-14 f_weight_100 timedesin" {:style(['color'=>$sc['desc_txt_color']])}>{$sc.desc}</p>
+                    <p class=" margin-top-20 f_weight_100">
+                        <a href="{$sc.link}" class="timeblue"> {:lang('了解更多')} <img src="__IMAGES__/more-r.png"></a>
+                    </p>
+                </div>
+            </div>
+            {/volist}
+            {/notempty}
+        </div>
+        <!-- orico技术 -->
+        <div class="oidx-tcly">
+            <div class="Tech-text">
+                <h3>{:lang('Orico 技术')}</h3>
+                <p>{:lang('强大功能、简单使用')}</p>
+            </div>
+            <div class="section  section-blends section-full">
+                <div class="section-stack section-stack--center ">
+                    <div class="section-stack__main">
+                        <div class="before-after shadow  text-custom ba-slider">
+                            <img src="__IMAGES__/back-img01.jpg">
+                            <div class="resize">
+                                <img src="__IMAGES__/back-img02.jpg" style="width: 390px;">
+                            </div>
+                            <span class="handle"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 品牌故事 -->
+        {notempty name="brand_story"}
+        <div class="oidx-times">
+            <section class="cd-horizontal-timeline loaded">
+                <div class="events-content">
+                    <ul>
+                        {volist name="brand_story" id="bs" key="k"}
+                        <li class="{eq name='k' value='1'}selected{/eq}">
+                            <img src="{$bs.image}">
+                            <div class="position_a text_center">
+                                <p class=" timetitle" {:style(['color'=>$bs['title_txt_color']])}>{$bs.title} </p>
+                                <p class=" margin-top-14 f_weight_100 timedesin" {:style(['color'=>$bs['desc_txt_color']])}>{$bs.desc}</p>
+                                <p class=" margin-top-20 f_weight_100">
+                                    <span class="  timeblue">
+                                        <a href="{$bs.link}">{:lang('了解更多')}<img src="__IMAGES__/more-r.png"></a>
+                                    </span>
+                                </p>
+                            </div>
+                        </li>
+                        {/volist}
+                    </ul>
+                </div>
+                <div class="timeline">
+                    <div class="events-wrapper">
+                        <div class="events">
+                            <ol>
+                                {volist name="brand_story" id="bs" key="k"}
+                                <li>
+                                    <a class="{eq name='k' value='1'}selected{/eq}">{$bs.year}</a>
+                                </li>
+                                {/volist}
+                            </ol>
+                            <span class="filling-line"></span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+        {/notempty}
+        <!-- 数据统计 -->
+        {notempty name="data_statistics"}
+        <div class="oidx-total">
+            <div class="num-bg clearfix">
+                <ul>
+                    {volist name="data_statistics" id="ds"}
+                    <li>
+                        <h3 {:style(['color'=>$ds['desc_txt_color']])}>{$ds.desc|raw}</h3>
+                        <p {:style(['color'=>$ds['title_txt_color']])}>{$ds.title}</p>
+                    </li>
+                    {/volist}
+                </ul>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 文章轮播 -->
+        {notempty name="recommend_articles"}
+        <div class="oidx-imgqh">
+            <div class="swiper-container imgqhswiper">
+                <div class="swiper-wrapper">
+                    {volist name="recommend_articles" id="ra"}
+                    <div class="swiper-slide">
+                        <a href="{:url('article/detail', ['id' => $ra.id])}">
+                            <div class="title pos-text">{$ra.title|raw}</div>
+                            <img src="{$ra.image}" alt="" />
+                        </a>
+                    </div>
+                    {/volist}
+                </div>
+                <!-- 如果需要分页器 -->
+                <div class="swiper-pagination"></div>
+            </div>
+        </div>
+        {/notempty}
+        <!-- 常见问题 -->
+        {notempty name="recommend_faq"}
+        <div class="oidx-fqa">
+            <div class="faq">
+                <div class="faq-title ">
+                    <h3>{:lang('常见问题')}</h3>
+                    <h5>{:lang('回答您最关心的问题')}</h5>
+                    <p>{:lang('客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内')}</p>
+                </div>
+                {volist name="recommend_faq" id="rq"}
+                <dl>
+                    <dt class="cursor_p">
+                        {$rq.question}<i class="rotate icon-add-svg"></i>
+                    </dt>
+                    <dd>{$rq.answer|raw}</dd>
+                </dl>
+                {/volist}
+            </div>
+        </div>
+        {/notempty}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script src="__JS__/before-after.min.js" type="text/javascript"></script>
+<script type="text/javascript">
+    //banner轮播
+    var bannerswiper = new Swiper('.bannerswiper', {
+        // 配置选项
+        loop: true,
+        autoplay: {
+            delay: 3000,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+        }
+    });
+    // 分类轮播
+    var FPswiper = new Swiper(".FPswiper", {
+        loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
+        slidesPerView: 2, // 设置显示一张
+        centeredSlides: true, //使当前图片居中显示
+        centeredSlidesBounds: true, //使左右两边的图片始终贴合边缘
+        autoplay: true, //可选选项，自动滑动
+        initialSlide: 0, //默认显示第二张图片索引从0开始
+        speed: 2000, //设置过度时间
+        autoplay: false,
+    });
+    // 图片切换
+    var imgqhswiper = new Swiper('.imgqhswiper', {
+        loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
+        effect: 'coverflow', //轮播效果，coverflow覆盖流效果
+        slidesPerView: 2,
+        centeredSlides: true,
+        slidesOffsetBefore: 0, //偏移，使第一张图片向右偏移150px */
+        autoplay: true, //可选选项，自动滑动
+        speed: 2000, //设置过度时间
+        autoplay: true,
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+            dynamicBullets: true,
+        },
+    });
+    $(function() {
+        //视频播放
+        var videos = $(".vedio_in");
+        videos.on("click", function() {
+            var elm = $(this),
+                conts = elm.contents(),
+                le = conts.length,
+                ifr = null;
+            for (var i = 0; i < le; i++) {
+                if (conts[i].nodeType == 8) ifr = conts[i].textContent;
+            }
+            elm.addClass("player").html(ifr);
+            elm.off("click");
+        });
+        // 图片覆盖左右移动
+        $('.before-after').beforeAfter();
+        // 为日期链接添加点击事件处理函数
+        $('.events a').on('click', function() {
+            // 移除所有日期链接的 selected 类
+            $('.events a').removeClass('selected');
+            // 移除所有内容列表项的 selected 类
+            $('.events-content li').removeClass('selected');
+            // 为当前点击的日期链接添加 selected 类
+            $(this).addClass('selected');
+            // 获取当前点击链接的索引
+            var index = $('.events a').index(this);
+            // 为对应的内容列表项添加 selected 类
+            $('.events-content li').eq(index).addClass('selected');
+        });
+        // fqa
+        // 为所有带有 cursor_p 类的 dt 元素添加点击事件处理函数
+        $('.cursor_p').on('click', function() {
+            // 切换对应的 dd 元素的显示和隐藏状态
+            $(this).next('dd').slideToggle(400);
+            // 获取当前 dt 元素内的图标元素
+            var icon = $(this).find('i');
+            // 切换图标类名
+            if (icon.hasClass('icon-add-svg')) {
+                icon.removeClass('icon-add-svg').addClass('icon-jian-svg');
+            } else {
+                icon.removeClass('icon-jian-svg').addClass('icon-add-svg');
+            }
+        });
+    });
+</script>
+{/block}

app/index/view/mobile/product/category.html

@@ -0,0 +1,93 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" type="text/css" href="__CSS__/product_category.css" />
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <!-- banner轮播图 -->
+    {notempty name="focus_image"}
+    <div>
+        {volist name="focus_image" id="fi"}
+		<a {notempty name="fi.link" }href="{$fi.link}"{/notempty}>
+			<img src="{$fi.image}" />
+		</a>
+		{/volist}
+    </div>
+    {/notempty}
+    <div class="oricoEGapp-catelists">
+        <!-- 二级分类导航 -->
+        <div class="first_list_category">
+            <div class="scroller">
+                <ul class="clearfix">
+                    {volist name="list" id="vo"}
+                    <li>
+                        <a href="{:url('product/subcategory', ['id' => $vo.id])}">
+                            <div class="category_list">
+                                <p>{$vo.name}</p>
+                            </div>
+                        </a>
+                    </li>
+                    {/volist}
+                </ul>
+            </div>
+        </div>
+        <!-- 二级分类几个产品展示 -->
+        {volist name="list" id="vo"}
+        <div class="m_Container">
+            <div class="product_list_title">
+                <div class="product_title">{$vo.name}</div>
+                <a href="{:url('product/subcategory', ['id' => $vo.id])}" class="view_all text_gray">
+                    {:lang('查看全部')}<span class="icon-Double-Arrow"></span>
+                </a>
+            </div>
+            <div class="product_list">
+                {notempty name="vo.products"}
+                <ul>
+                    {volist name="vo.products" id="pro" length="4"}
+                    <li class="img-responsive">
+                        <a href="{:url('product/detail', ['id' => $pro.id])}">
+                            <img src="{$pro.cover_image}">
+                            <span class="title">{$pro.name}</span>
+                            <span class="subtitle">{$pro.spu}</span>
+                        </a>
+                    </li>
+                    {/volist}
+                </ul>
+                {/notempty}
+            </div>
+        </div>
+        {/volist}
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    // 自定义 navbarscroll 方法
+    $(function() {
+        let startX = 0;
+        let isDragging = false;
+        let currentLi;
+        $('.scroller ul li').on('mousedown touchstart', function(e) {
+            startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
+            isDragging = true;
+            currentLi = $(this);
+        });
+        $(document).on('mousemove touchmove', function(e) {
+            if (isDragging) {
+                const currentX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
+                const diffX = currentX - startX;
+                if (diffX > 20) { // 设定一个最小滑动距离，这里设为20像素
+                    // 右滑操作
+                    $('.scroller ul li').removeClass('cur');
+                    currentLi.addClass('cur');
+                    // 这里可以添加更多右滑后要执行的操作，例如显示对应内容
+                    isDragging = false;
+                }
+            }
+        });
+        $(document).on('mouseup touchend', function() {
+            isDragging = false;
+        });
+    });
+</script>
+{/block}

app/index/view/mobile/product/subcategory.html

@@ -0,0 +1,74 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" type="text/css" href="__CSS__/product_subcategory.css" />
+{/block}
+{block name="main"}
+<div class="oricoEGapp">
+    <!-- banner轮播图 -->
+    {notempty name="focus_image"}
+    <div>
+        {volist name="focus_image" id="fi"}
+        <a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
+            <img src="{$fi.image}" alt="" style="width:100%;margin-top:3.5rem;" />
+        </a>
+        {/volist}
+    </div>
+    {/notempty}
+    <!-- 三级产品列表 -->
+    <div class="oricoEGapp-subcatelists">
+        <div class="m_Container">
+            {notempty name="categorys_data"}
+            <div class="product_list">
+                <ul>
+                    {assign name="products" value=":\think\helper\Arr::flatMap(fn($pro) => $pro['products'], $categorys_data)" /}
+                    {volist name="products" id="pr"}
+                    <li class="img-responsive product-img">
+                        {notempty name="pr.sku"}
+                        <a href="{:url('product/detail', ['id' => $pr.id])}">
+                            {volist name="pr.sku" id="ps" key="pk"}
+                            <img src="{:thumb($ps.main_image)}" class="img_p" {neq name="pk" value="1" }style="display:none;"{/neq}>
+                            {/volist}
+                        </a>
+                        {/notempty}
+                        <a href="{:url('product/detail', ['id' => $pr.id])}">
+                            <span class="title nowrap_ellipsis">{$pr.name}</span>
+                            <span class="subtitle">{$pr.spu}</span>
+                        </a>
+                        {notempty name="pr.colors"}
+                        <div class="hd Multi_color">
+                            <ul>
+                                {volist name="pr.colors" id="pc"}
+                                <li class="img-responsive S-small-img">
+                                    <div class="cricle">
+                                        {assign name="color_type" value=":rgb_or_image($pc.attr_value)" /}
+                                        {eq name="color_type" value="IMAGE"}
+                                        <img src="{$pc.attr_value}" alt="" class="S-Cricle-Bg">
+                                        {elseif condition="$color_type == 'RGB'" /}
+                                        <span class="rgb_hex" {:style(['background-color'=>$pc.attr_value])}></span>
+                                        {/eq}
+                                    </div>
+                                </li>
+                                {/volist}
+                            </ul>
+                        </div>
+                        {/notempty}
+                    </li>
+                    {/volist}
+                </ul>
+            </div>
+            {/notempty}
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(function() {
+        // 图片切换
+        $('.Multi_color').find('.S-small-img').click(function() {
+            var index = $(this).index();
+            $(this).parents('.product-img').find('.img_p').eq(index).show().siblings().hide();
+        });
+    })
+</script>
+{/block}

app/index/view/mobile/public/base.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+        {block name="title"}<title>{$basic_config['website_seo_title']['value']}</title>{/block}
+		{block name="seo"}
+		<meta name="keywords" content="{$basic_config['website_seo_keyword']['value']}" />
+		<meta name="description" content="{$basic_config['website_seo_description']['value']}" />
+		{/block}
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<link rel="stylesheet" type="text/css" href="__CSS__/public.css" />
+		<link rel="stylesheet" type="text/css" href="__CSS__/font.css" />
+		<link rel="stylesheet" type="text/css" href="__CSS__/style.css" />
+		<!-- <link rel="stylesheet" type="text/css" href="__CSS__/fonts.css" /> -->
+        <link rel="stylesheet" type="text/css" href="__CSS__/header.css" />
+		<link rel="stylesheet" type="text/css" href="__CSS__/footer.css" />
+        {block name="style"}{/block}
+		<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
+		<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
+		<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
+	</head>
+	<body>
+        {block name="header"}
+            {include file="public/header"/}
+        {/block}
+		{block name="main"}{/block}
+        {block name="footer"}
+            {include file="public/footer"/}
+        {/block}
+		{block name="script"}{/block}
+	</body>
+</html>

app/index/view/mobile/public/footer.html

@@ -0,0 +1,70 @@
+<footer class="oircoEgapp-foot">
+    <div class="footer">
+        <div class="logo-white"><img src="__IMAGES__/logo-white.png"></div>
+        <div class="foot-cate">
+            <ul class="clearfix">
+                {notempty name="header_categorys"}
+                <li>
+                    <h3>{:lang('产品')}</h3>
+                    {volist name="header_categorys" id="hc"}
+                    <p><a href="{:url('product/category', ['id' => $hc.id])}">{$hc.name}</a></p>
+                    {/volist}
+                </li>
+                {/notempty}
+                {notempty name="footer_navigation"}
+                {volist name="footer_navigation" id="fn"}
+                <li>
+                    <h3>{$fn.name}</h3>
+                    {notempty name="fn.children"}
+                    {volist name="fn.children" id="fnc"}
+                    <p>
+                        <a href="{$fnc.link}" target="_blank" class="inline-block link-faded break-all">{$fnc.name}</a>
+                    </p>
+                    {/volist}
+                    {/notempty}
+                </li>
+                {/volist}
+                {/notempty}
+                <li>
+                    <h3>{:lang('联系方式')}</h3>
+                    {notempty name="contact_config.website_email"}
+                    <p>{$contact_config.website_email.title}： {$contact_config.website_email.value}</p>
+                    {/notempty}
+                    {notempty name="contact_config.website_hotline_office_hours"}
+                    <p>{$contact_config.website_hotline_office_hours.title}： {$contact_config.website_hotline_office_hours.value}</p>
+                    {/notempty}
+                </li>
+            </ul>
+        </div>
+        <div class="foot-wei">
+            <div class="m_footer text_white m-in-top clearfix">
+                {notempty name="media_config"}
+                <div class="left">
+                    {volist name="media_config" id="mc"}
+                    <a href="{$mc.url.value}" target="_blank"><img src="{$mc.image.value}"></a>
+                    {/volist}
+                </div>
+                {/notempty}
+                {notempty name="header_languages"}
+                    {volist name="header_languages" id="hl"}
+                        {if condition="$hl.lang_code == cookie('think_lang')"}
+                        <div class="right mask-up img-responsive foot-con">
+                            <img class="right-country" src="{$hl.lang_icon}">
+                            <span>{$hl.lang_en_name}</span>
+                            <img src="__IMAGES__/downicon.png">
+                        </div>
+                        {/if}
+                    {/volist}
+                {/notempty}
+            </div>
+        </div>
+        {notempty name="basic_config.website_powerby.value"}
+        <div class="copy-text">
+            {$basic_config.website_powerby.value}
+            {notempty name="$basic_config.website_icp"}
+            <a href="https://beian.miit.gov.cn/" style="color:white;">（{$basic_config.website_icp.value}）</a>
+            {/notempty}
+        </div>
+        {/notempty}
+    </div>
+</footer>

app/index/view/mobile/public/header.html

@@ -0,0 +1,109 @@
+<header class="oircoEgapp-head">
+    <div class="headtop">
+        <a><img src="__IMAGES__/logo.png" class="headerlogimg" /></a>
+        <div class="action-r">
+            <div class="right img-responsive cursor_p">
+                <span class="icon-category cursor_p"> <i class="icon-menu-svg"></i></span>
+                <span class="icon-keyword cursor_p"><i class="icon-search-svg"></i></span>
+                <span class="mask-up cursor_p "><i class="icon-lag-svg"></i></span>
+            </div>
+        </div>
+    </div>
+    <!-- 顶部菜单-->
+    <div class="top-menu">
+        <div class="it-ct">
+            <div class="it-1"><a href="/">{:lang('首页')}</a></div>
+        </div>
+        <div class="it-ct">
+            <div class="it-1">
+                <div class="it-1-more">{:lang('产品列表')}<i class="icon-arrow"></i></div>
+                {notempty name="header_categorys"}
+                {volist name="header_categorys" id="ca"}
+                <div class="it-1-2"><a href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a></div>
+                {/volist}
+                {/notempty}
+            </div>
+        </div>
+        {notempty name="header_navigation"}
+        {volist name="header_navigation" id="nav"}
+        <div class="it-ct">
+            <div class="it-1">
+                {empty name="nav.children"}
+                <a href="{$nav.link}">{$nav.name}</a>
+                {else/}
+                <div class="it-1-more">{$nav.name}<i class="icon-arrow"></i></div>
+                {volist name="nav.children" id="ch"}
+                <div class="it-1-2"><a href="{$ch.link}">{$ch.name}</a></div>
+                {/volist}
+                {/empty}
+            </div>
+        </div>
+        {/volist}
+        {/notempty}
+    </div>
+    <!-- 顶部搜索-->
+    <div class="top-search">
+        <div class="marsk-container">
+            <div class="popup-quick">
+                <div class="ac-close float_r "><img src="__IMAGES__/close.png"></div>
+                <div class="search-in">
+                    <input type="text" placeholder="{:lang('产品')} USB 2.0...">
+                    <button id="search-btnput" class="search-button">{:lang('搜索')}</button>
+                    <div class="title-text">
+                        <p><a href="#">{:lang('搜索历史')}</a></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 顶部国家选择-->
+    <div class="top-country">
+        <div class="mask"></div>
+        <div class="action-sheet">
+            <div class="menu-title">
+                <div class="menu-name">{:lang('请择地区')}</div>
+                <div class="close-icon">
+                    <img src="__IMAGES__/close.png">
+                </div>
+            </div>
+            <ul>
+                {volist name="header_languages" id="la"}
+                <li>
+                    <a href="{$la.lang_url}" target="_blank">
+                        <img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
+                    </a>
+                </li>
+                {/volist}
+            </ul>
+        </div>
+    </div>
+</header>
+<script type="text/javascript">
+    $(function() {
+        // 点击顶部菜单
+        $(".icon-menu-svg").click(function() {
+            $(".top-menu").slideToggle(800);
+        })
+        // 点击一级菜单显示二级菜单
+        $(".it-1-more").on("click", function() {
+            $('.it-1-2').hide();
+            $('.icon-arrow').removeClass('rotate');
+            $(this).siblings('.it-1-2').slideToggle(800);
+            $(this).find('.icon-arrow').addClass('rotate');
+        });
+        //点击搜索
+        $('.icon-search-svg').click(function() {
+            $(".marsk-container").show();
+        })
+        $('.ac-close').click(function() {
+            $(".marsk-container").hide();
+        })
+        // 顶部国家选择
+        $('.icon-lag-svg').click(function(){
+            $(".mask,.action-sheet").show();
+        })
+        $('.top-country .close-icon').click(function(){
+            $(".mask,.action-sheet").hide();
+        })
+    })
+</script>

app/index/view/pc/index/index.html

@@ -29,7 +29,7 @@
     <div class="catMain">
       {volist name="product_categorys" id="cate"}
       <a class="catit" href="{$cate.link}">
-        <img src="{$cate.image}" src="catIcoImg" />
+        <img src="{$cate.image}" class="catIcoImg" />
         <span class="catName" {notempty name="cate.title_txt_color" }style="color:{$cate.title_txt_color};"
           {/notempty}>{$cate.title}</span>
       </a>
@@ -49,7 +49,7 @@
           <div class="ftItme_left">
             <p>{$topic.title}</p>
             <div class="subtitle">
-              <span>{:lang('index.view_all')} ></span>
+              <span>{:lang('index.view_all')}</span>
               <div class="tpicture"></div>
             </div>
           </div>
@@ -92,8 +92,8 @@
             <div class="slideshow-pag swiper-pagination"></div>
           </div>
           <div class="swiper-container swi1">
-            <img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
-            <img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
+            <img class="slideshow-btn swiper-button-next" src="__IMAGES__/rightcheck.png">
+            <img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
           </div>
         </div>
       </div>
@@ -137,10 +137,10 @@
       <span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
       <div class="beforeafter ba-slider">
         <!-- 对比前的图片 -->
-        <img src="static/index/images/indeximg1.jpg">
+        <img src="__IMAGES__/indeximg1.jpg">
         <div class="resize">
           <!-- 对比后的图片 -->
-          <img src="static/index/images/indeximg2.jpg">
+          <img src="__IMAGES__/indeximg2.jpg">
         </div>
         <!-- 可拖动的分隔条 -->
         <span class="handle"></span>
@@ -175,8 +175,8 @@
             {/volist}
           </div>
           <div class="swiper-container bs_bts">
-            <img class="slideshow-btn  swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
-            <img class="slideshow-btn  swiper-button-prev " src="static/index/temp_images/lefta.png" alt="" />
+            <img class="slideshow-btn  swiper-button-next" src="__IMAGES__/rightcheck.png" alt="" />
+            <img class="slideshow-btn  swiper-button-prev " src="__IMAGES__/lefta.png" alt="" />
           </div>
         </div>
       </div>
@@ -202,19 +202,19 @@
         <div class="swiper-wrapper">
           {volist name="recommend_articles" id="article"}
           <div class="swiper-slide  pubSwitem">
-            <a class="pubimgdiv" href="{:url('article/index', ['id' => $article.id])}">
+            <a class="pubimgdiv" href="{:url('article/detail', ['id' => $article.id])}">
               <img src="{$article.image}" class="pubimg" />
             </a>
             <a class="pubinfo">
-              <span>{$article.title}</span>
+              <span>{$article.title|raw}</span>
             </a>
           </div>
           {/volist}
         </div>
         <div class="swiperasd pubswiperasd">
           <div class="swiper-container">
-            <img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
-            <img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
+            <img class="slideshow-btn swiper-button-next" src="__IMAGES__/rightcheck.png">
+            <img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
           </div>
         </div>
       </div>

app/index/view/pc/product/category.html

@@ -22,7 +22,7 @@
 				<div class="catname">{$vo.name}</div>
 				<a class="catmore" href="{:url('product/subcategory', ['id' => $vo.id])}">
 					<span class="tmore">{:lang('product_newpro.view_all')}</span>
-					<img src="/static/index/images/more.png" class="catmoreImg" />
+					<img src="__IMAGES__/more.png" class="catmoreImg" />
 				</a>
 			</div>
 			{notempty name="vo.products"}

app/index/view/pc/public/base.html

@@ -10,14 +10,14 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" type="text/css" href="__CSS__/public.css" />
 		<link rel="stylesheet" type="text/css" href="__CSS__/fonts.css" />
-    <link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
-    <link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
+		<link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
+		<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
 		{block name="style"}{/block}
 		<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
 		<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
 		<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
-		<script type="text/javascript" src="/static/index/js/before-after.min.js"></script>
-		<script type="text/javascript" src="/static/index/js/large.js"></script>
+		<script type="text/javascript" src="__JS__/before-after.min.js"></script>
+		<script type="text/javascript" src="__JS__/large.js"></script>
 	</head>
 	<body>
         {block name="header"}

app/openapi/middleware/Auth.php

@@ -23,7 +23,12 @@ class Auth
             $token = $oauth->getBearerToken();
             $oauth->verifyAccessToken($token);
         } catch (OAuth2ServerException $e) {
-            return error('Unauthorized', $e->sendHttpResponse(), 401);
+            return json(json_decode($e->getHttpResponse()->getContent(), true), 401);
+        } catch (\Throwable $th) {
+            return json([
+                'error'             => 'invalid_token',
+                'error_description' => $th->getMessage()
+            ], 401);
         }
 
         return $next($request);

public/static/index/mobile/css/font.css

@@ -0,0 +1,128 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url('../fonts/icomoon/icomoon.eot?11cuay');
+  src: url('../fonts/icomoon/icomoon.eot?11cuay#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?11cuay') format('truetype'),
+    url('../fonts/icomoon/icomoon.woff?11cuay') format('woff'), url('../fonts/icomoon/icomoon.svg?11cuay#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change ../fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-search:before {
+  content: '\e900';
+}
+/* .icon-category:before {
+  content: "\e924";
+} */
+.icon-Under-line:before {
+  content: '\e91e';
+}
+.icon-On-line:before {
+  content: '\e902';
+}
+.icon-support:before {
+  content: '\e921';
+}
+.icon-media:before {
+  content: '\e922';
+}
+.icon-join:before {
+  content: '\e901';
+}
+.icon-arrow:before {
+  content: '\e907';
+}
+.icon-Double-Arrow:before {
+  content: '\e903';
+}
+
+@font-face {
+  font-family: 'colleciton';
+  src: url('../fonts/icomoon/colleciton/icomoon.eot?11cuay');
+  src: url('../fonts/icomoon/colleciton/icomoon.eot?11cuay#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon/colleciton/icomoon.ttf?11cuay') format('truetype'), url('../fonts/icomoon/colleciton/icomoon.woff?11cuay') format('woff'),
+    url('../fonts/icomoon/colleciton/icomoon.svg?11cuay#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^='ic-'],
+[class*=' ic-'] {
+  /* use !important to prevent issues with browser extensions that change ../fonts */
+  font-family: 'colleciton' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.ic-collect:before {
+  content: '\e907';
+}
+.ic-collected:before {
+  content: '\e900';
+}
+@font-face {
+  font-family: 'icomoon';
+  src: url('../fonts/icomoon/icomoona.eot?c46hgi');
+  src: url('../fonts/icomoon/icomoona.eot?c46hgi#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoona.ttf?c46hgi') format('truetype'),
+    url('../fonts/icomoon/icomoona.woff?c46hgi') format('woff'), url('../fonts/icomoon/icomoona.svg?c46hgi#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change ../fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-right-svg:before {
+  content: '\e904';
+}
+.icon-add-svg:before {
+  content: '\e900';
+  color: #575757;
+}
+.icon-jian-svg:before {
+  content: '\e901';
+  color: #575757;
+}
+.icon-lag-svg:before {
+  content: '\e902';
+}
+.icon-menu-svg:before {
+  content: '\e903';
+}
+.icon-search-svg:before {
+  content: '\e906';
+}

public/static/index/mobile/css/fonts.css

@@ -0,0 +1,220 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url('../fonts/icomoon/icomoon.eot?ujw7hy');
+  src: url('../fonts/icomoon/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?ujw7hy') format('truetype'),
+    url('../fonts/icomoon/icomoon.woff?ujw7hy') format('woff'), url('../fonts/icomoon/icomoon.svg?ujw7hy#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^='icon-'],
+[class*=' icon-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-Collection:before {
+  content: '\e900';
+}
+.icon-culture-P:before {
+  content: '\e901';
+}
+.icon-facebook:before {
+  content: '\e902';
+}
+.icon-in:before {
+  content: '\e903';
+}
+.icon-twitter:before {
+  content: '\e904';
+}
+.icon-youtobe:before {
+  content: '\e905';
+}
+.icon-country:before {
+  content: '\e90a';
+}
+.icon-menu:before {
+  content: '\e906';
+}
+.icon-arrow:before {
+  content: '\e907';
+}
+.icon-r-arrow:before {
+  content: '\e907';
+}
+.icon-close:before {
+  content: '\e909';
+}
+.icon-search:before {
+  content: '\e908';
+}
+.icon-B-arrow:before {
+  content: '\e90b';
+}
+
+.icon-qq1:before {
+  content: '\e90c';
+}
+.icon-wx1:before {
+  content: '\e90d';
+}
+.icon-ys1:before {
+  content: '\e90e';
+}
+.icon-kf1:before {
+  content: '\e90f';
+}
+.icon-top1:before {
+  content: '\e910';
+}
+.icon-QQ:before {
+  content: '\e911';
+  color: rgba(0, 0, 0, 0.3);
+  margin-right: 10px;
+}
+.icon-xl:before {
+  content: '\e919';
+}
+
+.icon-QQ1:before {
+  content: '\e91c';
+}
+.icon-PYQ:before {
+  content: '\e91d';
+}
+.icon-Under-line:before {
+  content: '\e91e';
+}
+.icon-On-line:before {
+  content: '\e91f';
+}
+.icon-contect:before {
+  content: '\e920';
+}
+.icon-support:before {
+  content: '\e921';
+}
+.icon-media:before {
+  content: '\e922';
+}
+.icon-join:before {
+  content: '\e923';
+}
+
+@font-face {
+  font-family: 'icomoon01';
+  src: url('fonts-20190124/icomoon.eot?ll2528');
+  src: url('fonts-20190124/icomoon.eot?ll2528#iefix') format('embedded-opentype'),
+    url('fonts-20190124/icomoon.ttf?ll2528') format('truetype'), url('fonts-20190124/icomoon.woff?ll2528') format('woff'),
+    url('fonts-20190124/icomoon.svg?ll2528#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^='icons-'],
+[class*=' icons-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon01' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icons-weixin:before {
+  content: '\e903';
+  color: #fff;
+}
+.icons-Forum:before {
+  content: '\e900';
+  color: #fff;
+}
+.icons-sina:before {
+  content: '\e901';
+  color: #fff;
+}
+.icons-toutiao:before {
+  content: '\e902';
+  color: #fff;
+}
+
+.icons-douyin:before {
+  content: '\e904';
+  color: #fff;
+}
+
+@font-face {
+  font-family: 'icomoon02';
+  src: url('fonts/other/icomoon.eot?ujw7hy');
+  src: url('fonts/other/icomoon.eot?ujw7hy#iefix') format('embedded-opentype'), url('fonts/other/icomoon.ttf?ujw7hy') format('truetype'),
+    url('fonts/other/icomoon.woff?ujw7hy') format('woff'), url('fonts/other/icomoon.svg?ujw7hy#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^='icona-'],
+[class*=' icona-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon02' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icona-zhihu:before {
+  content: '\e904';
+  color: #fff;
+}
+@font-face {
+  font-family: 'icomoon05';
+  src: url('fonts-20220322/icomoon.eot?cdcz43');
+  src: url('fonts-20220322/icomoon.eot?cdcz43#iefix') format('embedded-opentype'),
+    url('fonts-20220322/icomoon.ttf?cdcz43') format('truetype'), url('fonts-20220322/icomoon.woff?cdcz43') format('woff'),
+    url('fonts-20220322/icomoon.svg?cdcz43#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^='iconb-'],
+[class*='iconb-'] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon05' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconb-caret-down:before {
+  content: '\e900';
+}
+.iconb-caret-up:before {
+  content: '\e901';
+}

public/static/index/mobile/css/footer.css

@@ -0,0 +1,34 @@
+.oircoEgapp-foot .logo-white img {
+  margin: 0 auto;
+}
+.oircoEgapp-foot .m_footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.oircoEgapp-foot .m_footer .left,
+.oircoEgapp-foot .foot-con {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.oircoEgapp-foot .m_footer .right {
+  max-width: 55%;
+}
+.oircoEgapp-foot .m_footer .left {
+  max-width: 40%;
+  justify-content: end;
+  margin-right: 4%;
+}
+.oircoEgapp-foot .foot-con span {
+  width: auto;
+  padding: 0 0.625rem;
+}
+.oircoEgapp-foot .foot-cate .clearfix li h3 {
+  margin-bottom: 10px;
+}
+.oircoEgapp-foot .foot-cate .clearfix li p,
+.oircoEgapp-foot .foot-cate .clearfix li p a {
+  font-size: 12px;
+}

public/static/index/mobile/css/header.css

@@ -0,0 +1,60 @@
+.oircoEgapp-head {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  width: -webkit-fill-available;
+}
+.oircoEgapp-head .headtop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  height: 3.5rem;
+  background: #fff;
+}
+.oircoEgapp-head .headtop .headerlogimg {
+  width: 8.75rem;
+  height: 2.25rem;
+}
+.oircoEgapp-head .top-menu {
+  background-color: #fff;
+  overflow: hidden;
+  width: 100%;
+  color: #000;
+  display: none;
+}
+.oircoEgapp-head .top-menu .it-ct {
+  font-family: "Montserrat-SemiBold";
+  font-weight: bold;
+}
+.oircoEgapp-head .top-menu .it-ct .it-1 {
+  padding: 1rem 3.5% 0.65rem;
+  border-bottom: 1px solid #e5e5e5;
+  font-size: 12px;
+  position: relative;
+}
+.oircoEgapp-head .top-menu .it-ct .it-1-more {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 1.5%;
+}
+.oircoEgapp-head .top-menu .it-ct .it-1-more i {
+  font-weight: bold;
+}
+.oircoEgapp-head .top-menu .it-ct .it-1-2 {
+  padding-left: 1rem;
+  font-size: 12px;
+  line-height: 1.8rem;
+  font-weight: 100;
+  font-weight: bold;
+  display: none;
+}
+.oircoEgapp-head .top-menu .it-ct .it-1-2 a {
+  color: #666;
+}

public/static/index/mobile/css/index.css

@@ -0,0 +1,128 @@
+.oricoEGapp {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.oricoEGapp .oricoEGapp-index {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.oricoEGapp .oricoEGapp-index .oidx-banner {
+  margin-top: 3.5rem;
+  z-index: 9;
+}
+.oricoEGapp .oricoEGapp-index .oidx-banner .swiper-container {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.oricoEGapp .oricoEGapp-index .oidx-cate {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem 0;
+  margin: 0 5%;
+}
+.oricoEGapp .oricoEGapp-index .oidx-cate .cateit {
+  margin: 0 5%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.oricoEGapp .oricoEGapp-index .oidx-cate .cateit img {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+.oricoEGapp .oricoEGapp-index .oidx-cate .cateit span {
+  font-size: 0.8rem;
+}
+.oricoEGapp .oricoEGapp-index .oidx-gg {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.oricoEGapp .oricoEGapp-index .oidx-FP .timeblue a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.oricoEGapp .oricoEGapp-index .oidx-FP .timeblue a img {
+  margin-left: 0.625rem;
+}
+.oricoEGapp .oricoEGapp-index .oidx-ztpictureshow {
+  position: relative;
+  background: #fff;
+}
+.oricoEGapp .oricoEGapp-index .oidx-ztpictureshow .margin-top-20 {
+  display: flex;
+  justify-content: center;
+}
+.oricoEGapp .oricoEGapp-index .oidx-tcly {
+  display: flex;
+  flex-direction: column;
+}
+.oricoEGapp .oricoEGapp-index .oidx-times {
+  display: flex;
+  position: relative;
+}
+.oricoEGapp .oricoEGapp-index .oidx-times .timeblue {
+  display: flex;
+  justify-content: center;
+}
+.oricoEGapp .oricoEGapp-index .oidx-times .timeline .events-wrapper {
+  overflow: initial;
+}
+.oricoEGapp .oricoEGapp-index .oidx-times .cd-horizontal-timeline .events a {
+  width: 33.3%;
+  margin-left: 0;
+}
+.oricoEGapp .oricoEGapp-index .oidx-times .cd-horizontal-timeline .events a::after {
+  left: 50%;
+}
+.oricoEGapp .oricoEGapp-index .oidx-total {
+  position: relative;
+}
+.oricoEGapp .oricoEGapp-index .oidx-imgqh .swiper-container {
+  overflow: initial;
+}
+.oricoEGapp .oricoEGapp-index .oidx-imgqh .swiper-pagination {
+  bottom: -15px;
+}
+.oricoEGapp .oricoEGapp-index .oidx-fqa {
+  margin-top: 2rem;
+}
+.oricoEGapp .oricoEGapp-index .oidx-fqa .faq-title h3 {
+  margin: 2rem auto;
+}
+.oricoEGapp .timeblue {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+}
+.oricoEGapp .timeblue a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+}
+.oricoEGapp .timeblue img {
+  margin-left: 0.625rem;
+}
+.oricoEGapp .text_center {
+  text-align: center;
+}
+.oricoEGapp .inprotext {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

public/static/index/mobile/css/product_category.css

@@ -0,0 +1,25 @@
+.oricoEGapp-catelists {
+  display: flex;
+  flex-direction: column;
+}
+.oricoEGapp-catelists .first_list_category {
+  margin-top: 50px;
+  width: 100%;
+  overflow-x: auto;
+  height: 3.4rem;
+  background-color: transparent;
+}
+.oricoEGapp-catelists .scroller ul {
+  background-color: #fafafa;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.oricoEGapp-catelists .scroller ul li {
+  display: inline-block;
+  margin-right: 10px;
+  padding: 10px;
+  cursor: pointer;
+  padding-bottom: 15px;
+}

public/static/index/mobile/css/product_subcategory.css

@@ -0,0 +1,9 @@
+.oricoEGapp-subcatelists {
+  position: relative;
+}
+.oricoEGapp-subcatelists .product_list {
+  margin-top: 4.5rem;
+}
+.oricoEGapp-subcatelists .product_list .img_p {
+  margin: 0 auto;
+}

public/static/index/mobile/css/public.css

@@ -0,0 +1,88 @@
+@font-face {
+	font-family: "Montserrat";
+	src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Montserrat-Bold";
+	src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "Montserrat-Medium";
+	src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	/* font-family: 'Montserrat'; */
+	-ms-overflow-style: none;
+	/* IE 和 Edge */
+	scrollbar-width: none;
+	/* Firefox */
+}
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+*:hover {
+	transition: all 0.2s linear;
+	-webkit-transition: all 0.2s linear;
+}
+
+body {
+	font-size: 1.2em;
+	font-weight: 400;
+	color: #333;
+}
+
+select,
+input,
+textarea,
+button {
+	outline: none;
+	font-size: 0.875rem;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	color: #414446;
+	-moz-border-radius: 0;
+	-ms-border-radius: 0;
+	-o-border-radius: 0;
+}
+
+a {
+	color: #000;
+	cursor: pointer;
+	text-decoration: none;
+	transition: all 0.2s linear;
+	-webkit-transition: all 0.2s linear;
+	text-decoration: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+	display: block;
+}
+
+ul li {
+	/* padding: 2px 0; */
+	list-style-type: none;
+}
+
+ol,
+ul,
+a {
+	list-style: none;
+}
+
+body {
+	font-family: 'Montserrat-SemiBold';
+}

public/static/index/mobile/js/before-after.min.js

@@ -0,0 +1 @@
+!function(a){function b(b,c,d){b.on("mousedown.ba-events touchstart.ba-events",function(e){b.addClass("ba-draggable"),c.addClass("ba-resizable");var f=e.pageX?e.pageX:e.originalEvent.touches[0].pageX,g=b.outerWidth(),h=b.offset().left+g-f,i=d.offset().left,j=d.outerWidth();minLeft=i+10,maxLeft=i+j-g-10,b.parents().on("mousemove.ba-events touchmove.ba-events",function(b){var c=b.pageX?b.pageX:b.originalEvent.touches[0].pageX;leftValue=c+h-g,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+g/2-i)/j+"%",a(".ba-draggable").css("left",widthValue),a(".ba-resizable").css("width",widthValue)}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events",function(){b.removeClass("ba-draggable"),c.removeClass("ba-resizable"),a(this).off(".ba-events")}),e.preventDefault()})}a.fn.beforeAfter=function(){var c=this,d=c.width()+"px";c.find(".resize img").css("width",d),b(c.find(".handle"),c.find(".resize"),c),a(window).resize(function(){var a=c.width()+"px";c.find(".resize img").css("width",a)})}}(jQuery);

public/static/index/pc/css/achievement.css

@@ -130,7 +130,7 @@
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list {
   width: 98%;
-  background: url(/static/index/images/greyline.png) 50px 0 repeat-y;
+  background: url(/static/index/pc/images/greyline.png) 50px 0 repeat-y;
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div {
   overflow: hidden;
@@ -139,7 +139,7 @@
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div h3 {
   margin: 0 0 0 2.1875rem;
   padding-left: 2.5rem;
-  background: url(/static/index/images/greyyuandian.png) 3px 3px no-repeat;
+  background: url(/static/index/pc/images/greyyuandian.png) 3px 3px no-repeat;
   height: 2.375rem;
   font-size: 1.25rem;
   font-family: Montserrat-Bold, Montserrat;
@@ -148,7 +148,7 @@
   line-height: 1.875rem;
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div .backgroundimg {
-  background: url(/static/index/images/yaundian.png) 3px 3px no-repeat !important;
+  background: url(/static/index/pc/images/yaundian.png) 3px 3px no-repeat !important;
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li {
   display: inline-block;

public/static/index/pc/css/article_category.css

@@ -49,7 +49,7 @@
   position: absolute;
   left: 1.875rem;
   top: 0.9375rem;
-  background: url(/static/index/images/search.png);
+  background: url(/static/index/pc/images/search.png);
   z-index: 9;
 }
 .orico_Page_category .categoryMain .categorySearch .search {