jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: index - 首页及顶部导航处理

Browse Source
This commit is contained in:
jsasg
2025-04-07 18:10:50 +08:00
parent d75563f487
commit e8e77b6d48
101 changed files with 5823 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
app/index/controller/Common.php Normal file
View File

@@ -0,0 +1,210 @@
<?php
declare (strict_types = 1);
namespace app\index\controller;
use app\BaseController;
use app\index\model\LanguageModel;
use app\index\model\ProductCategoryModel;
use app\index\model\ProductModel;
use app\index\model\SysConfigModel;
use app\index\model\SysNavigationItemModel;
use think\facade\Lang;
use think\facade\View;
abstract class Common extends BaseController
{
// 当前语言id
protected $lang_id = 1;
/**
* 控制器初始化
* @access public
*/
public function initialize()
{
// 获取国家/语言列表
$languages = $this->getLanguages();
// 输出国家/语言列表
View::assign('header_languages', $languages);
// 获取当前语言
$current_language = $this->getCurrentLanguage($languages);
if (!empty($current_language)) {
$this->lang_id = $current_language['id'];
}
// 获取产品分类
$categorys = $this->getProductCategory($this->lang_id);
// 输出产品分类
View::assign('header_categorys', $categorys);
// 获取热销产品
$hot_products = $this->getHotProducts($this->lang_id);
// 输出热销产品
View::assign('header_hot_products', $hot_products);
// 输出顶部导航
View::assign('header_navigation', $this->getNavigation('NAV_67f3701f3e831', $this->lang_id));
// 获取系统配置
$configs = $this->getSysConfig($this->lang_id, ['basic', 'contact', 'media']);
// 输出系统配置
View::assign('basic_config', $configs['basic']);
View::assign('contact_config', $configs['contact']);
View::assign('media_config', $configs['media']);
// 获取底部导航
$footer_navigation = $this->getNavigation('NAV_67f60be43df8d', $this->lang_id);
// 输出底部导航
View::assign('footer_navigation', $footer_navigation);
}
// 获取当前语言
private function getCurrentLanguage($languages)
{
$current_code = Lang::getLangSet();
foreach ($languages as $item) {
if ($item['lang_code'] == $current_code) {
return $item;
}
}
return [];
}
// 获取产品分类
protected function getProductCategory($language = 1)
{
$categorys = ProductCategoryModel::field([
'id',
'pid',
'name',
'icon',
'level'
])
->language($language)
->displayed()
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if ($categorys->isEmpty()) {
return [];
}
return array_to_tree($categorys->toArray(), 0, 'pid', 1, false);
}
// 获取顶部导航
protected function getNavigation($unique_label, $language = 1)
{
$nav = SysNavigationItemModel::hasWhere('navigation', [
'unique_label' => $unique_label,
'language_id' => $language,
'status' => 1
])
->order(['sort' => 'asc', 'id' => 'asc'])
->select();
if ($nav->isEmpty()) {
return [];
}
return array_to_tree($nav->toArray(), 0, 'pid', 1, false);
}
// 获取热销产品
protected function getHotProducts($language = 1, $limit = 3)
{
$products = ProductModel::field([
'id',
'name',
'cover_image',
])
->language($language)
->onSale(true)
->onShelves(true)
->hot(true)
->limit($limit)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if ($products->isEmpty()) {
return [];
}
return $products->toArray();
}
// 获取国家/语言列表
protected function getLanguages()
{
$languages = LanguageModel::alias('l')
->field([
'l.id',
'l.name' => 'lang_name',
'l.en_name' => 'lang_en_name',
'l.code' => 'lang_code',
'l.icon' => 'lang_icon',
'l.url' => 'lang_url',
'c.id' => 'country_id',
'c.name' => 'country_zh_name',
'c.en_name' => 'country_en_name',
'c.code' => 'country_code',
])
->join('sys_country c', 'c.id = l.country_id')
->where('l.status', '=', 1)
->where('c.status', '=', 1)
->order(['l.sort' => 'asc', 'l.id' => 'asc'])
->select();
return $languages;
}
// 获取系统联系方式配置
protected function getSysConfig($language, $group = [])
{
$configs = SysConfigModel::alias('c')
->field([
'c.id',
'c.title',
'c.name',
'c.value',
'c.extra',
'c.type',
'g.unique_label'
])
->join('sys_config_group g', 'g.id = c.group_id')
->where('g.unique_label', 'in', $group)
->where('g.language_id', '=', $language)
->order(['c.sort' => 'asc', 'c.id' => 'desc'])
->select();
if ($configs->isEmpty()) {
return [];
}
$configs = $configs->toArray();
$data = [];
foreach ($configs as $cfg) {
$current = &$data;
if (!isset($current[$cfg['unique_label']])) {
$current[$cfg['unique_label']] = [];
}
$current = &$current[$cfg['unique_label']];
// 根据name中"."拆分为多维数组
$parts = explode('.', $cfg['name']);
foreach ($parts as $part) {
if (!isset($current[$part])) {
$current[$part] = [];
}
$current = &$current[$part];
}
$current = [
'title' => $cfg['title'],
'type' => $cfg['type'],
'value' => $cfg['value'],
'extra' => $cfg['extra'],
];
}
unset($current);
return $data;
}
}

141
app/index/controller/Index.php
View File

@@ -3,10 +3,147 @@ declare (strict_types = 1);
namespace app\index\controller;
class Index
use app\index\model\ArticleModel;
use app\index\model\FaqModel;
use app\index\model\ProductModel;
use app\index\model\SysBannerModel;
use think\facade\View;
/**
* 首页控制器
*/
class Index extends Common
{
public function index()
{
return '您好！这是一个[' . lang('home') . ']示例应用';
// 获取banner数据
$banner = $this->getBannerData();
View::assign('focus_images', $banner['focus_images']);
View::assign('product_categorys', $banner['product_categorys']);
View::assign('featured_topics', $banner['featured_topics']);
View::assign('video', array_shift($banner['video']));
View::assign('scenes', $banner['scenes']);
View::assign('brand_story', $banner['brand_story']);
View::assign('data_statistics', $banner['data_statistics']);
// 获取明星产品/热点产品
View::assign('featured_products', $this->getFeaturedProducts());
// 获取推荐文章
View::assign('recommend_articles', $this->getRecommendArticles());
// 获取常见问题
View::assign('recommend_faq', $this->getRecommendFAQ());
return View::fetch('index');
}
// 获取banner数据
private function getBannerData()
{
$banners = SysBannerModel::with(['items'])
->uniqueLabel([
'BANNER_67f61cd70e8e1',
'BANNER_67f633023a5b3',
'BANNER_67f63f8ab5029',
'BANNER_67f724ed81b1e',
'BANNER_67f7392b4d83a',
'BANNER_67f7410e244fb',
'BANNER_67f76a96545f9',
])
->language($this->lang_id)
->recommend(true)
->enabled(true)
->select();
$banner_map = [];
foreach ($banners as $v) {
$banner_map[$v->unique_label] = $v;
}
// 处理焦点轮播图和产品分类
$data['focus_images'] = []; // 焦点轮播图
$data['product_categorys'] = []; // 产品分类信息
$data['featured_topics'] = []; // 特色专题及公司实力
$data['video'] = []; // 视频
$data['scenes'] = []; // 场景介绍
$data['brand_story'] = []; // 品牌故事
$data['data_statistics'] = []; // 数据统计
if (!empty($banner_map)) {
$data['focus_images'] = $banner_map['BANNER_67f61cd70e8e1']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['product_categorys'] = $banner_map['BANNER_67f633023a5b3']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['product_categorys'] = $banner_map['BANNER_67f633023a5b3']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['featured_topics'] = $banner_map['BANNER_67f63f8ab5029']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['video'] = $banner_map['BANNER_67f724ed81b1e']->items->where('type', '=', 'video')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['scenes'] = $banner_map['BANNER_67f7392b4d83a']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['brand_story'] = $banner_map['BANNER_67f7410e244fb']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
$data['data_statistics'] = $banner_map['BANNER_67f76a96545f9']->items->where('type', '=', 'image')->where('status', '=', 1)->order('sort', 'asc')->toArray();
}
return $data;
}
// 获取明星/热点产品
private function getFeaturedProducts()
{
$products = ProductModel::field([
'id',
'name',
'short_name',
'cover_image',
])
->language($this->lang_id)
->enabled(true)
->onSale(true)
->onShelves(true)
->hot(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->select();
if ($products->isEmpty()) {
return [];
}
return $products->toArray();
}
// 获取推荐文章
private function getRecommendArticles()
{
$articles = ArticleModel::field([
'id',
'title',
'desc',
'image'
])
->language($this->lang_id)
->enabled(true)
->recommend(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->limit(6)
->select();
if ($articles->isEmpty()) {
return [];
}
return $articles->toArray();
}
// 获取推荐问题
private function getRecommendFAQ()
{
$faqs = FaqModel::field([
'id',
'question',
'image',
'answer'
])
->language($this->lang_id)
->recommend(true)
->order(['sort' => 'asc', 'id' => 'desc'])
->limit(6)
->select();
if ($faqs->isEmpty()) {
return [];
}
return $faqs->toArray();
}
}

22
app/index/lang/en-us.php
View File

@@ -1,5 +1,25 @@
<?php
return [
'home' => 'Home',
'header_navigation' => [
'product_categorys' => 'Products'
],
'header_search' => [
'history' => 'Search History',
'hot_product' => 'Popular Products',
],
'footer_navigation' => [
'product_categorys' => 'Product'
],
'footer_contact' => 'Contact',
'index' => [
'featured_products' => 'Featured Products',
'view_all' => 'View All',
'learn_more' => 'Learn More',
'orico_technology' => 'ORICO Technology',
'orico_technology_desc' => 'Designed to be just as easy to learn as iPhone.Chatting with friends.',
'faq' => 'FAQ',
'faq_short_desc' => 'What are you most concerned about',
'faq_desc' => 'Our customer support is available Manday to Friday 9am600pmAverage arswer time 24h',
]
];

22
app/index/lang/zh-cn.php
View File

@@ -1,5 +1,25 @@
<?php
return [
'home' => '首页',
'header_navigation' => [
'product_categorys' => '产品列表'
],
'header_search' => [
'hot_product' => '热销产品',
'history' => '搜索记录',
],
'footer_navigation' => [
'product_categorys' => '产品'
],
'footer_contact' => '联系我们',
'index' => [
'featured_products' => '明星产品/热点产品',
'view_all' => '查看所有',
'learn_more' => '了解更多',
'orico_technology' => 'ORICO 技术',
'orico_technology_desc' => '强大功能、简单使用',
'faq' => '常见问题',
'faq_short_desc' => '回答您最关心的问题',
'faq_desc' => '客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内',
]
];

19
app/index/model/ArticleCategoryModel.php Normal file
View File

@@ -0,0 +1,19 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\ArticleCategoryBaseModel;
use think\model\concern\SoftDelete;
/**
* 文章分类模型
* @mixin \think\Model
*/
class ArticleCategoryModel extends ArticleCategoryBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
}

19
app/index/model/ArticleLeaveMessageModel.php Normal file
View File

@@ -0,0 +1,19 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\ArticleLeaveMessageBaseModel;
use think\model\concern\SoftDelete;
/**
* 文章留言模型
* @mixin \think\Model
*/
class ArticleLeaveMessageModel extends ArticleLeaveMessageBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
}

37
app/index/model/ArticleModel.php Normal file
View File

@@ -0,0 +1,37 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\ArticleBaseModel;
use think\model\concern\SoftDelete;
/**
* 文章模型
* @mixin \think\Model
*/
class ArticleModel extends ArticleBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 语言范围查询
public function scopeLanguage($query, $language)
{
return $query->where('language_id', '=', $language);
}
// 首页推荐状态范围查询
public function scopeRecommend($query, bool $stat = true)
{
return $query->where('recommend', '=', (int)$stat);
}
// 启用状态范围查询
public function scopeEnabled($query, bool $stat = true)
{
return $query->where('enabled', '=', (int)$stat);
}
}

15
app/index/model/CountryModel.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\CountryBaseModel;
/**
* 国家模型
* @mixin \think\Model
*/
class CountryModel extends CountryBaseModel
{
//
}

31
app/index/model/FaqModel.php Normal file
View File

@@ -0,0 +1,31 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\FaqBaseModel;
use think\model\concern\SoftDelete;
/**
* FAQ模型
* @mixin \think\Model
*/
class FaqModel extends FaqBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 语言范围查询
public function scopeLanguage($query, $language)
{
return $query->where('language_id', '=', $language);
}
// 推荐状态范围查询
public function scopeRecommend($query, bool $stat)
{
return $query->where('recommend', '=', (int)$stat);
}
}

15
app/index/model/LanguageModel.php Normal file
View File

@@ -0,0 +1,15 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\LanguageBaseModel;
/**
* 语言模型
* @mixin \think\Model
*/
class LanguageModel extends LanguageBaseModel
{
//
}

31
app/index/model/ProductCategoryModel.php Normal file
View File

@@ -0,0 +1,31 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\ProductCategoryBaseModel;
use think\model\concern\SoftDelete;
/**
* 产品分类模型
* @mixin \think\Model
*/
class ProductCategoryModel extends ProductCategoryBaseModel
{
// 启用软件删除
use SoftDelete;
// 软件删除时间字段
protected $deleteTime = 'deleted_at';
// 所属语言范围查询
public function scopeLanguage($query, $language)
{
$query->where('language_id', '=', $language);
}
// 显示的分类范围查询
public function scopeDisplayed($query)
{
$query->where('is_show', '=', 1);
}
}

49
app/index/model/ProductModel.php Normal file
View File

@@ -0,0 +1,49 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\ProductBaseModel;
use think\model\concern\SoftDelete;
/**
* 产品模型
* @mixin \think\Model
*/
class ProductModel extends ProductBaseModel
{
// 启用软件删除
use SoftDelete;
// 软件删除时间字段
protected $deleteTime = 'deleted_at';
// 所属语言范围查询
public function scopeLanguage($query, $language)
{
$query->where('language_id', '=', $language);
}
// 启用状态范围查询
public function scopeEnabled($query)
{
$query->where('status', '=', 1);
}
// 在售状态范围查询
public function scopeOnSale($query, bool $stat = true)
{
$query->where('is_sale', '=', (int)$stat);
}
// 上架状态范围查询
public function scopeOnShelves($query, bool $stat = true)
{
$query->where('is_show', '=', (int)$stat);
}
// 热销状态范围查询
public function scopeHot($query, bool $stat = true)
{
$query->where('is_hot', '=', (int)$stat);
}
}

25
app/index/model/SysBannerItemModel.php Normal file
View File

@@ -0,0 +1,25 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysBannerItemBaseModel;
use think\model\concern\SoftDelete;
/**
* 横幅模型
* @mixin \think\Model
*/
class SysBannerItemModel extends SysBannerItemBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 启用状态范围查询
public function scopeEnabled($query)
{
$query->where('status', '=', 1);
}
}

53
app/index/model/SysBannerModel.php Normal file
View File

@@ -0,0 +1,53 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysBannerBaseModel;
use think\model\concern\SoftDelete;
/**
* 横幅（分类）模型
* @mixin \think\Model
*/
class SysBannerModel extends SysBannerBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 关联横幅数据项
public function items()
{
return $this->hasMany(SysBannerItemModel::class, 'banner_id', 'id');
}
// 唯一标识范围查询
public function scopeUniqueLabel($query, string|array $unique_label)
{
if (is_array($unique_label)) {
$query->whereIn('unique_label', $unique_label);
return;
}
$query->where('unique_label', '=', $unique_label);
}
// 所属语言范围查询
public function scopeLanguage($query, $language)
{
$query->where('language_id', '=', $language);
}
// 首页推荐状态范围查询
public function scopeRecommend($query, bool $recommend = true)
{
$query->where('recommend', '=', (int)$recommend);
}
// 启用状态范围查询
public function scopeEnabled($query, bool $enabled = true)
{
$query->where('status', '=', (int)$enabled);
}
}

19
app/index/model/SysConfigGroupModel.php Normal file
View File

@@ -0,0 +1,19 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysConfigGroupBaseModel;
use think\model\concern\SoftDelete;
/**
* 系统配置分组模型
* @mixin \think\Model
*/
class SysConfigGroupModel extends SysConfigGroupBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
}

25
app/index/model/SysConfigModel.php Normal file
View File

@@ -0,0 +1,25 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysConfigBaseModel;
use think\model\concern\SoftDelete;
/**
* 系统配置模型
* @mixin \think\Model
*/
class SysConfigModel extends SysConfigBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 关联分组
public function group()
{
return $this->belongsTo(SysConfigGroupModel::class, 'group_id', 'id');
}
}

20
app/index/model/SysNavigationItemModel.php Normal file
View File

@@ -0,0 +1,20 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysNavigationItemBaseModel;
/**
* 导航项模型
* @mixin \think\Model
*/
class SysNavigationItemModel extends SysNavigationItemBaseModel
{
// 关联导航
public function navigation()
{
return $this->hasOne(SysNavigationModel::class, 'id', 'nav_id');
}
}

25
app/index/model/SysNavigationModel.php Normal file
View File

@@ -0,0 +1,25 @@
<?php
declare (strict_types = 1);
namespace app\index\model;
use app\common\model\SysNavigationBaseModel;
use think\model\concern\SoftDelete;
/**
* 导航模型
* @mixin \think\Model
*/
class SysNavigationModel extends SysNavigationBaseModel
{
// 启用软删除
use SoftDelete;
// 软删除字段
protected $deleteTime = 'deleted_at';
// 根据unique_label获取
public function scopeUniqueLabel($query, string $unique_label)
{
$query->where('unique_label', '=', $unique_label);
}
}

12
app/index/route/v1.php → app/index/route/route.php
View File

@@ -11,3 +11,15 @@
use think\facade\Route;
Route::get('/', 'Index/index');
Route::group('product', function() {
// 产品列表页
Route::get('index/:id', 'Product/index')->name('product_index');
// 产品详情页
Route::get('detail/:id', 'Product/detail')->name('product_detail');
// 产品搜索页
Route::get('search', 'Product/search')->name('product_search');
});
// 数据迁移
Route::get('/data/migration', 'DataMigration/index');

382
app/index/view/index/index.html Normal file
View File

@@ -0,0 +1,382 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="static/index/css/index.css" />
{/block}
{block name="main"}
<div class="orico_Page_index">
<div class="pageMain">
<!-- banner -->
{notempty name="focus_images"}
<div class="swiper-container bannerswiper">
<div class="swiper-wrapper">
{volist name="focus_images" id="focus"}
<div class="swiper-slide">
<a href="{$focus.link}" target="_blank"><img src="{$focus.image}" alt="{$focus.title}"></a>
</div>
{/volist}
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
{/notempty}
<!-- 产品分类信息 -->
{notempty name="product_categorys"}
<div class="catMain">
{volist name="product_categorys" id="cate"}
<a class="catit" href="{$cate.link}">
<img src="{$cate.image}" src="catIcoImg" />
<span class="catName" {notempty name="cate.title_txt_color"}style="color:{$cate.title_txt_color};"{/notempty}>{$cate.title}</span>
</a>
{/volist}
</div>
{/notempty}
<!-- 特色专题及公司实力 -->
{notempty name="featured_topics"}
<div class="featuredtopicsMain">
<div class="ftcontent">
{volist name="featured_topics" id="topic" mod="2"}
<a class="ftItme" href="{$topic.link}">
{if condition="$mod == '1'"}
<div class="ftItme_right">
<img src="{$topic.image}" />
</div>
<div class="ftItme_left">
<p>{$topic.title}</p>
<div class="subtitle">
<span>{:lang('index.view_all')} ></span>
<div class="tpicture"></div>
</div>
</div>
{else/}
<div class="ftItme_left">
<p>{$topic.title}</p>
<div class="subtitle">
<span>{:lang('index.view_all')}</span>
<div class="tpicture"></div>
</div>
</div>
<div class="ftItme_right">
<img src="{$topic.image}" />
</div>
{/if}
</a>
{/volist}
</div>
</div>
{/notempty}
<!-- 明星产品/热点产品 -->
{notempty name="featured_products"}
<div class="featuredProducts">
<p class="biaoti">{:lang('index.featured_products')}</p>
<div class="swiper fpSwiper">
<div class="swiper-wrapper">
{volist name="featured_products" id="product"}
<div class="swiper-slide picture">
<a class="primg">
<img src="{$product.cover_image}" />
</a>
<div class="fpptitle">{$product.name}</div>
<div class="subtitle">{$product.short_name}</div>
<a class="more">{:lang('index.learn_more')} ></a>
</div>
{/volist}
</div>
<div class="swiperasd">
<div class="swiper-container1">
<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">
</div>
</div>
</div>
</div>
{/notempty}
<!-- 视频宣传 -->
{notempty name="video"}
<div class="hotProduct">
<div class="hotvideo">
<iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen id="videoElement"></iframe>
</div>
<img src="{$video.image}" class="hotImg" />
</div>
{/notempty}
<!-- 场景介绍 -->
{notempty name="scenes"}
<div class="sceneIntroduction">
{volist name="scenes" id="scene"}
<div class="sceneitem">
<div class="sceneInfo">
<p class="scenetitle" {notempty name="scene.title_txt_color"}style="color:{$scene.title_txt_color};"{/notempty}>{$scene.title}</p>
<p class="subtitle" {notempty name="scene.desc_txt_color"}style="color:{$scene.desc_txt_color};"{/notempty}>{$scene.desc}</p>
<a class="sceneMore" href="{$scene.link}">{:lang('index.learn_more')} ></a>
</div>
<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
</div>
{/volist}
</div>
{/notempty}
<!-- orico科技 -->
<div class="oricoTechnology">
<p class="ottitle">{:lang('index.orico_technology')}</p>
<span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
<div class="beforeafter">
<div id="after"></div>
<div id="before"></div>
<div class="drag-circle"></div>
</div>
</div>
<!-- 品牌故事 -->
{notempty name="brand_story"}
<div class="brandStory">
<div class="swiper brandStoryswiper">
<div class="swiper-wrapper">
{volist name="brand_story" id="story"}
<div class="swiper-slide bsitem">
<div class="itmImg">
<img src="{$story.image}" class="bsImg" />
</div>
<div class="bsinf">
<div class="bstitle" {notempty name="story.title_txt_color"}style="color:{$story.title_txt_color};"{/notempty}>{$story.title}</div>
<div class="bssubtitle" {notempty name="story.desc_txt_color"}style="color:{$story.desc_txt_color};"{/notempty}>{$story.desc}</div>
<a class="bsmore" href="{$story.link}">{:lang('index.learn_more')} ></a>
</div>
</div>
{/volist}
</div>
<div class="swiperasd bs_swiperasd" id="timeline">
<div class="bs_swcontainer">
<div class="swiper-pagination bs_pagination"></div>
<hr>
<!-- <span class="time1">2021</span> -->
<!-- <span class="time2">2022</span> -->
<!-- <span class="time3">2023</span> -->
</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="" />
</div>
</div>
</div>
</div>
{/notempty}
<!-- 数据统计-->
{notempty name="data_statistics"}
<div class="oricoDataStatistics">
<div class="odsmain">
{volist name="data_statistics" id="ods"}
<div class="odsItem">
<h1 {notempty name="ods.desc_txt_color"}style="color:{$ods.desc_txt_color};"{/notempty}>{$ods.desc}</h1>
<h3 {notempty name="ods.title_txt_color"}style="color:{$ods.title_txt_color};"{/notempty}>{$ods.title}</h3>
</div>
{/volist}
</div>
</div>
{/notempty}
<!-- 文章轮播 -->
{notempty name="recommend_articles"}
<div class="oricoPub">
<div class="swiper pubswiper">
<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])}">
<img src="{$article.image}" class="pubimg" />
</a>
<a class="pubinfo">
<span>{$article.title}</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">
</div>
</div>
</div>
</div>
{/notempty}
<!-- FAQ-->
{notempty name="recommend_faq"}
<div class="oricoFQA">
<div class="fqaleft">
<h1 class="title">{:lang('index.faq')}</h1>
<p class="dec">{:lang('index.faq_short_desc')}</p>
<p class="sudec">{:lang('index.faq_desc')}</p>
</div>
<div class="fqaright">
<ul class="accordion">
{volist name="recommend_faq" id="faq"}
<li class="fqali">
<div class="fqa-question">
<h3>{$faq.question} </h3>
<span class="xiala">+</span>
</div>
<div class="fqa-answer">
<p>{$faq.answer|raw}</p>
</div>
</li>
{/volist}
</ul>
</div>
</div>
{/notempty}
<!-- 底部固定提示 -->
<div class="oricofixd-info">
<div class="ofiinfo">We use cookies to ensure you get the best experience on our website. By
continuing to browse, you agree to our use of cookies.</div>
<div class="ofibt"><button>OK,got it!</button></div>
<div class="oficlose"><span class="close-btn">×</span></div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script>
$(document).ready(function() {
let isDragging = false;
let startX;
let initialLeft;
$('.drag-circle').mousedown(function(e) {
isDragging = true;
startX = e.pageX;
initialLeft = $('.drag-circle').position().left;
});
$(document).mousemove(function(e) {
if (isDragging) {
const currentX = e.pageX;
const diffX = currentX - startX;
let newLeft = initialLeft + diffX;
const containerWidth = $('.beforeafter').width();
newLeft = Math.max(20, Math.min(containerWidth - 20, newLeft));
$('.drag-circle').css('left', newLeft);
$('#before').width(newLeft);
}
});
$(document).mouseup(function() {
isDragging = false;
});
// 底部关闭
$(".oficlose").on("click", function() {
$(".oricofixd-info").hide();
});
});
$(function() {
// banner轮播
var mySwiper = new Swiper('.bannerswiper', {
// 配置选项
loop: true,
autoplay: {
delay: 3000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var fpSwiper = new Swiper(".fpSwiper", {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 1,
loop: true,
autoplay: {
delay: 5000,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
slidesPerView: "auto",
centeredSlides: true,
loopFillGroupWithBlank: true,
loopAdditionalSlides: 3,
pagination: {
el: ".swiper-pagination",
type: "progressbar",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
//品牌故事轮播
var brandStoryswiper = new Swiper(".brandStoryswiper", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// 宣传banner
var pubswiper = new Swiper(".pubswiper", {
loop: true,
autoplay: {
delay: 5000,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
//slidesPerView: 1,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 32,
pagination: {
el: ".swiper-pagination",
click: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// FAQ问答展开收起
$(".fqali").on('click', function() {
if ($(this).children("div.fqa-answer").is(':visible')) {
$(".fqali").removeClass('active');
$(".fqa-answer").hide();
$(".text-name").addClass('text-hidden');
$(".xiala").text('+');
} else {
$(".fqali").removeClass('active');
$(".fqa-answer").hide();
$(".text-name").addClass('text-hidden')
$(".xiala").text('+');
$(this).addClass('active');
$(this).children('div.fqa-answer').show();
$(this).children('div.fqa-question').find('span').text('-');
$(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
}
})
// 首先隐藏视频元素和加载中的图片 要放开注释
$("#hotvideo").hide();
// 监听视频的加载事件
setTimeout(function() {
$("#hotvideo").on("load", function() {
// 视频加载完成时，显示视频元素，隐藏加载中的图片
$("#hotvideo").show();
$("#hotImg").hide();
});
}, 1000);
// 监听视频的加载失败事件
setTimeout(function() {
$("#hotvideo").on("error", function() {
// 视频加载失败时，显示加载中的图片，隐藏视频元素
$("#hotImg").show();
$("#videoElement").hide();
});
}, 1500);
});
</script>
{/block}

31
app/index/view/public/base.html Normal file
View File

@@ -0,0 +1,31 @@
<!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">
<link rel="stylesheet" type="text/css" href="static/index/css/public.css" />
<link rel="stylesheet" type="text/css" href="static/index/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="static/index/css/orico_header.css" />
<link rel="stylesheet" type="text/css" href="static/index/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>
</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>
</html>

74
app/index/view/public/footer.html Normal file
View File

@@ -0,0 +1,74 @@
<footer class="orico_footer">
<div class="fotter">
<!--中间信息-->
<div class="footerMain">
<!-- 上面-->
<div class="foottxttop">
<!--ico -->
<a href="/">
<img src="static/index/images/bottomlogo.png" class="footerico" />
</a>
<div class="foootCt">
<p class="ftitle">{:lang('footer_navigation.product_categorys')}</p>
<ul>
{volist name="header_categorys" id="vo"}
<li><a href="{:url('product_index', ['id' => $vo.id])}" class="fline">{$vo.name}</a></li>
{/volist}
</ul>
</div>
{if condition="!empty($footer_navigation)"}
{volist name="footer_navigation" id="vo"}
<div class="foootCt">
<p class="ftitle">{$vo.name}</p>
{if condition="!empty($vo.children)"}
<ul>
{volist name="vo.children" id="vc"}
<li><a href="{$vo.link}" class="fline">{$vc.name}</a></li>
{/volist}
</ul>
{/if}
</div>
{/volist}
{/if}
<div class="foootCt">
<p class="ftitle">{:lang('footer_contact')}</p>
{if condition="!empty($contact_config)"}
<ul>
{volist name="contact_config" id="vo"}
<li>
<a href="javascript:void(0);" class="fline">
{if condition="$vo.type == 'image'"}
<img src="{$vo.value}" {if condition="!empty($vo.extra)"}style="{$vo.extra}"{/if} />
{else/}
{$vo.value}
{/if}
</a>
</li>
{/volist}
</ul>
{/if}
</div>
</div>
<div class="foottxtbottom">
{if condition="!empty($media_config)"}
<div class="ftopicos">
<ul>
{volist name="media_config" id="vo"}
<a href="{$vo.url.value}"><img src="{$vo.image.value}" {if condition="!empty($vo.image.extra)"}style="{$vo.image.extra}"{/if} /></a>
{/volist}
</ul>
</div>
{/if}
{if condition="!empty($basic_config.website_powerby)"}
<div class="ftcopyright">
<span>{$basic_config.website_powerby.value}</span>
{if condition="!empty($basic_config.website_icp)"}
<a href="https://beian.miit.gov.cn/">（{$basic_config.website_icp.value}）</a>
{/if}
</div>
{/if}
<!-- <div class="batext">粤公网安备 44030702002297号</div> -->
</div>
</div>
</div>
</footer>

200
app/index/view/public/header.html Normal file
View File

@@ -0,0 +1,200 @@
<header class="header-PC">
<div id="header">
<!-- LOG -->
<div class="nav1">
<a>
<img src="static/index/images/logo.png" />
</a>
</div>
<!--顶部导航栏 -->
<div class="nav2">
<nav id="booNavigation" class="booNavigation">
<ul>
{if condition="!empty($header_categorys)"}
<li class="navItem">
<a href="javascript:void(0);">{:lang('header_navigation.product_categorys')}</a>
<img src="static/index/images/black-down.png" class="downimg" />
<ol class="navItemConten">
<!-- 左边子菜单-->
<ul class="navItem_cyleft">
{volist name="header_categorys" id="vo"}
<li class="{$key == 0 ? 'it_active' : ''}">
<a href="javascript:void(0);">{$vo.name}</a>
</li>
{/volist}
</ul>
<!-- 右边子菜单-->
{volist name="header_categorys" id="vo"}
{if condition="$key == 0"}
<div class="navItem_cyright" style="display: block;">
{else/}
<div class="navItem_cyright" style="display: none;">
{/if}
{volist name="vo.children" id="vc"}
<dl class="nav_cyrightit">
<dt>
<a href="{:url('product_index', ['id' => $vc.id])}">{$vc.name}</a>
</dt>
{volist name="vc.children" id="vcc"}
<dd>
<a href="{:url('product_index', ['id' => $vcc.id])}">{$vcc.name}</a>
</dd>
{/volist}
<dl>
{/volist}
</div>
{/volist}
</ol>
{/if}
{volist name="header_navigation" id="vo"}
<li class="navItem">
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
{if condition="!empty($vo.children)"}
<img src="static/index/images/black-down.png" class="downimg" />
<!--下拉菜单 -->
<ol class="navItemConten1">
{volist name="vo.children" id="voc"}
<li>
<a href="{$vo.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
</li>
{/volist}
</ol>
{/if}
</li>
{/volist}
</ul>
</nav>
</div>
<!-- 顶部搜索/国家选择/商店-->
<div class="nav3">
<img src="static/index/images/icon-search.png" id="openModalBtn" class="searchimg" />
<div class="choesCountry">
<img src="static/index/images/icon-language.png" id="countrycheck" class="checkimg" />
<!--国家选择 -->
<div class="topCountry" id="top-country">
<ul>
<li class="closec">
<span class="closecountrybt">×</span>
</li>
{volist name="header_languages" id="vo"}
<a href="{$vo.lang_url}">
<li>
<div class="cico">
<img src="{$vo.lang_icon}" class="countryimg" />
</div>
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
</li>
</a>
{/volist}
</ul>
</div>
</div>
</div>
</div>
<!-- 搜索弹框-->
<div class="searchmodalMian" id="scmodal">
<div class="searchmodalct">
<span class="close-btn">×</span>
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
<!-- 历史记录 -->
<div class="searchhistory">
<p class="h_title">{:lang('header_search.history')}</p>
<ul></ul>
</div>
<div class="popProduct">
<p class="h_title">{:lang('header_search.hot_product')}</p>
<div class="popmain">
{volist name="header_hot_products" id="vo"}
<div class="popitem">
<a href="{:url('product_detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
<div class="productName">{$vo.name}</div>
</div>
{/volist}
</div>
</div>
</div>
</div>
</header>
<script>
$(document).ready(function() {
// 搜索历史记录处理
function history(keywords) {
var history = localStorage.getItem('header_search_keywords');
if (!history) {
history = [];
} else {
history = JSON.parse(history);
}
// 记录搜索关键词
if (keywords) {
if (history.includes(keywords)) {
history.splice(history.indexOf(keywords), 1);
}
history.unshift(keywords);
if (history.length > 3) {
history.pop();
}
localStorage.setItem('header_search_keywords', JSON.stringify(history));
return history;
}
// 回显搜索历史记录
history.forEach(function(item) {
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
});
return history;
}
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
function handleHover($element, $content) {
$element.mouseenter(function() {
$content.stop(true, true).slideDown(400);
}).mouseleave(function() {
$content.stop(true, true).slideUp(400);
});
}
// 处理第一个导航项
handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
$('.navItem_cyleft li').mouseenter(function() {
$(this).addClass('it_active').siblings().removeClass('it_active');
$('.navItem_cyright').hide();
$('.navItem_cyright').eq($(this).index()).show();
});
// 处理第5 - 8个导航项
for (let i = 4; i < 8; i++) {
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
}
// 点击搜索
$('#openModalBtn').click(function() {
$('#scmodal').toggle();
});
$('.close-btn').click(function() {
$('#scmodal').hide();
});
// 搜索历史记录回显
history();
// 执行搜索
$('#serrchinput').keydown(function(event) {
if (event.originalEvent.keyCode == 13) {
var keywords = $(this).val();
if (keywords == '') {
return false;
}
// 记录搜索关键词
history(keywords);
// 跳转到搜索页面
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
}
});
// 点击选择国家
$('#countrycheck').click(function() {
$('#top-country').toggle();
});
$('.closecountrybt').click(function() {
$('#top-country').hide();
});
});
</script>