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

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

Browse Source
This commit is contained in:
迷和油
2025-06-11 17:24:11 +08:00
parent 13bcfe2a67 0e9d1e39ac
commit e5da8e06c4
11 changed files with 994 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/admin/controller/v1/SiteConfig.php
View File

@@ -141,6 +141,44 @@ class SiteConfig
return $ret;
}
// 根据分组获取配置
public function getByGroupUniqueLabel($unique_label)
{
$configs = SysConfigModel::alias('c')
->field([
'c.id',
'c.title',
'c.name',
'c.value',
])
->join(SysConfigGroupModel::getTable(). ' g', 'g.id = c.group_id')
->where('g.language_id', '=', request()->lang_id)
->where('g.unique_label', '=', $unique_label)
->where('g.status', '=', 1)
->order(['c.sort' => 'asc', 'c.id' => 'desc'])
->select()
->each(function ($item) {
// 修改字段为null的输出为空字符串
$keys = array_keys($item->toArray());
foreach ($keys as $key) {
if (is_null($item[$key])) {
$item[$key] = '';
}
}
return $item;
})
->toArray();
if (!empty($configs)) {
$configs_map = [];
foreach ($configs as $cfg) {
$configs_map[$cfg['name']] = $cfg;
}
return $configs_map;
}
return [];
}
// 更新配置
public function update()
{

160
app/admin/controller/v1/System.php
View File

@@ -8,7 +8,6 @@ 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
{
@@ -147,7 +146,11 @@ class System
'name' => '产品分类',
'link_to' => 'product_category',
'data' => array_to_tree(array_map(function($item) {
$item['url'] = (string)url('/index/product/category/' . $item['id']);
if ($item['pid'] == 0) {
$item['url'] = (string)url('/index/product/category/'. $item['id']);
} else {
$item['url'] = (string)url('/index/product/subcategory/' . $item['id']);
}
return $item;
}, $product_category), 0, 'pid', false, false)
],
@@ -155,6 +158,11 @@ class System
'name' => '产品',
'link_to' => 'product',
'data' => array_to_tree($product_category, 0, 'pid', false, false)
],
[
'name' => '其他内页',
'link_to' => 'system_page',
'data' => self::getSystemOtherPages()
]
];
@@ -220,6 +228,124 @@ class System
return $data->toArray();
}
// 获取系统其他内页
static private function getSystemOtherPages()
{
return [
[
'id' => 1,
'name' => '首页',
'url' => (string)url('/index/index/index')
],
[
'id' => 2,
'name' => '新品上市',
'url' => (string)url('/index/product/newpro')
],
[
'id' => 3,
'name' => '附件下载',
'url' => (string)url('/index/attachment/index')
],
[
'id' => 4,
'name' => '问答中心',
'url' => (string)url('/index/faq/index')
],
[
'id' => 5,
'name' => '关于我们',
'url' => '',
'children' => [
[
'id' => 51,
'name' => '品牌介绍',
'url' => (string)url('/index/aboutus/introduction')
],
[
'id' => 52,
'name' => '品牌故事',
'url' => (string)url('/index/aboutus/story')
],
[
'id' => 53,
'name' => '品牌历程',
'url' => (string)url('/index/aboutus/mileage')
],
[
'id' => 54,
'name' => '文化介绍',
'url' => (string)url('/index/aboutus/culture')
],
[
'id' => 55,
'name' => '售后政策',
'url' => (string)url('/index/aboutus/policy')
]
]
],
[
'id' => 6,
'name' => '联系我们',
'url' => '',
'children' => [
[
'id' => 61,
'name' => '联系我们',
'url' => (string)url('/index/contactus/index')
],
[
'id' => 62,
'name' => '留言联系我们',
'url' => (string)url('/index/contactus/message')
],
[
'id' => 63,
'name' => '留言成为分销商',
'url' => (string)url('/index/contactus/distributor')
],
[
'id' => 64,
'name' => '留言批量购买',
'url' => (string)url('/index/contactus/bulkbuy')
]
]
],
[
'id' => 7,
'name' => 'NAS专题',
'url' => '',
'children' => [
[
'id' => 71,
'name' => '首页',
'url' => (string)url('/index/topic/nas/index')
],
[
'id' => 72,
'name' => '产品体验',
'url' => (string)url('/index/topic/nas/product')
],
[
'id' => 73,
'name' => '客户合作',
'url' => (string)url('/index/topic/nas/cooperation')
],
[
'id' => 74,
'name' => '帮助中心',
'url' => (string)url('/index/topic/nas/help')
],
[
'id' => 75,
'name' => '软件下载',
'url' => (string)url('/index/topic/nas/download')
]
]
]
];
}
// 根据系统页面url获取回显数据项
static public function getEchoDataBySystemPageUrl($link_to, $link)
{
@@ -235,21 +361,29 @@ class System
parse_str($url, $params);
}
if (empty($params['id'])) return [];
switch ($link_to) {
case 'article_category':
if (empty($params['id'])) return [];
$data = ArticleCategoryModel::field(['id', 'name'])->bypk($params['id'])->find();
break;
case 'article':
if (empty($params['id'])) return [];
$data = ArticleModel::field(['id', 'title' => 'name'])->bypk($params['id'])->find();
break;
case 'product_category':
if (empty($params['id'])) return [];
$data = ProductCategoryModel::field(['id', 'name'])->bypk($params['id'])->find();
break;
case 'product':
if (empty($params['id'])) return [];
$data = ProductModel::field(['id', 'name'])->bypk($params['id'])->find();
break;
case 'system_page':
$data = self::filterSystemOtherPage(self::getSystemOtherPages(), function($item) use ($params, $link) {
if (empty($params['id'])) return $item['url'] == $link;
return $item['id'] == $params['id'];
});
break;
default:
return [];
break;
@@ -262,4 +396,22 @@ class System
'link' => $link
];
}
// 根据条件过滤结果
static private function filterSystemOtherPage(array $data, callable $callback): array
{
foreach ($data as $it) {
if ($callback($it)) {
return $it;
}
if (isset($it['children'])) {
$child = self::filterSystemOtherPage($it['children'], $callback);
if (!empty($child)) {
return $child;
}
}
}
return [];
}
}

157
app/admin/controller/v1/Upload.php
View File

@@ -7,6 +7,7 @@ use app\admin\model\v1\SysImageUploadRecordModel;
use app\admin\model\v1\SysVideoUploadRecordModel;
use app\admin\model\v1\SysAttachmentUploadRecordModel;
use Intervention\Image\ImageManager;
use Intervention\Image\Typography\FontFactory;
use think\facade\Filesystem;
/**
@@ -44,9 +45,75 @@ class Upload
$image_model = SysImageUploadRecordModel::md5($filemd5)->find();
if (is_null($image_model)) {
$filename = Filesystem::disk('image')->putFile($param['module'], $file);
// 生成缩略图
$image_manager = new ImageManager(new \Intervention\Image\Drivers\Imagick\Driver());
// 处理图片
$image_manager = ImageManager::imagick();
$image = $image_manager->read('.' . $storage . '/' . $filename);
// 水印
list(
'enabled' => $enabled,
'type' => $type,
'text_options' => $text_options,
'image_options' => $image_options
) = $this->getWatermarkOptions();
if ($enabled) {
// 图片水印
if ($type == 'IMAGE' && $image_options['image'] != '') {
// 读取水印图片
$watermark_image = $image_manager->read(public_path() . $image_options['image']);
// 缩放水印图片
$watermark_image->scale($image_options['width'], $image_options['height']);
// 绘制水印图片
$image->place(
$watermark_image,
$image_options['position'],
$image_options['offset_x'],
$image_options['offset_y'],
$image_options['opacity']
);
}
// 文字水印
else if ($type == 'TEXT' && $text_options['txt'] != '') {
// 原图宽度
$origin_width = $image->width();
// 原图高度
$origin_height = $image->height();
$font_factory = new FontFactory(function(FontFactory $font) use($text_options) {
// 设置字体
$font->filename(public_path() . $text_options['font']);
// 设置字体大小
$font->size($text_options['size']);
// 设置字体颜色及透明度
$opacity = $text_options['opacity'] > 0 ? dechex((int)ceil(255 * ($text_options['opacity'] / 100))) : '00';
$font->color($text_options['color'] . $opacity);
$font->align('left');
$font->valign('top');
});
// 文字尺寸
$font_rect = $image->driver()->fontProcessor()->boxSize($text_options['txt'], $font_factory());
// 计算偏移量
list($offset_x, $offset_y) = $this->scaleTxtOffsetXYByPosition(
$text_options['position'],
$text_options['offset_x'],
$text_options['offset_y'],
$origin_width,
$origin_height,
$font_rect->width(),
$font_rect->height()
);
// 绘制文字
$image->text(
$text_options['txt'],
$offset_x,
$offset_y,
$font_factory()
);
}
$image->save('.'. $storage. '/'. $filename);
}
// 缩略图
$image->scale(200, 200);
$idx = strrpos($filename, '.');
$thumb_filename = mb_substr($filename, 0, $idx) . '_thumb.' . mb_substr($filename, $idx + 1);
@@ -79,6 +146,90 @@ class Upload
return error('上传失败');
}
/**
* 获取水印配置
*
* @return array
*/
private function getWatermarkOptions(): array
{
$config_model = new \app\admin\controller\v1\SiteConfig;
$watermark_config = $config_model->getByGroupUniqueLabel('watermark');
$opacity = data_get($watermark_config, 'watermark_opacity.value', 100);
if ($opacity == '') {
$opacity = 100;
}
return [
'enabled' => data_get($watermark_config, 'watermark_enabled.value', 0) == 1,
'type' => data_get($watermark_config, 'watermark_type.value', ''),
'text_options' => [
'txt' => data_get($watermark_config, 'watermark_text_value.value', ''),
'font' => data_get($watermark_config, 'watermark_text_font.value', ''),
'size' => (float)data_get($watermark_config, 'watermark_text_size.value', 12)?:12,
'color' => data_get($watermark_config, 'watermark_text_color.value', '#000000')?:'#000000',
'position' => data_get($watermark_config, 'watermark_position.value', 'top-left')?:'top-left',
'offset_x' => (int)data_get($watermark_config, 'watermark_offset_x.value', 0),
'offset_y' => (int)data_get($watermark_config, 'watermark_offset_y.value', 0),
'opacity' => (int)$opacity,
],
'image_options' => [
'image' => data_get($watermark_config, 'watermark_image_value.value', ''),
'width' => (int)data_get($watermark_config, 'watermark_image_width.value')?:null,
'height' => (int)data_get($watermark_config, 'watermark_image_height.value')?:null,
'position' => data_get($watermark_config, 'watermark_position.value', 'top-left')?:'top-left',
'offset_x' => (int)data_get($watermark_config, 'watermark_offset_x.value', 0),
'offset_y' => (int)data_get($watermark_config, 'watermark_offset_y.value', 0),
'opacity' => (int)$opacity,
]
];
}
/**
* 计算文体水印偏移量
*
* @param string $position
* @param integer $offset_x
* @param integer $offset_y
* @param integer $image_width
* @param integer $image_height
* @param integer $txt_width
* @param integer $txt_height
* @return array
*/
private function scaleTxtOffsetXYByPosition(string $position, int $offset_x, int $offset_y, int $image_width, int $image_height, int $txt_width, int $txt_height)
{
switch ($position) {
case 'top-left':
// top-left:左上角
return [$offset_x, $offset_y];
case 'top-right':
// top-right:右上角
return [(int)($image_width-$txt_width-$offset_x), $offset_y];
case 'top':
// top:上 - 水平居中
return [(int)(($image_width-$txt_width+$offset_x)/2), $offset_y];
case 'left':
// left:左 - 垂直居中
return [$offset_x, (int)(($image_height-$txt_height)/2+$offset_y)];
case 'center':
// center:水平垂直居中
return [(int)(($image_width-$txt_width)/2+$offset_x), (int)(($image_height-$txt_height)/2+$offset_y)];
case 'right':
// right:右 - 垂直居中
return [(int)($image_width-$txt_width-$offset_x), (int)(($image_height-$txt_height)/2+$offset_y)];
case'bottom':
// bottom:下 - 水平居中
return [(int)(($image_width-$txt_width+$offset_x)/2), (int)($image_height-$txt_height-$offset_y)];
case'bottom-left':
// bottom-left:左下角
return [$offset_x, (int)($image_height-$txt_height-$offset_y)];
case'bottom-right':
// bottom-right:右下角
return [(int)($image_width-$txt_width-$offset_x), (int)($image_height-$txt_height-$offset_y)];
default:
throw new \InvalidArgumentException('Invalid position');
}
}
/**
* 上传视频
@@ -152,7 +303,7 @@ class Upload
try {
$max_size = strtobytes(env('ADMIN_API.MAX_ATTACHMENT_SIZE', '100mb'));
$validate = validate([
'attachment' => "fileSize:$max_size|fileExt:biz,bz,bz2,gz,tgz,zip,rar,7z,doc,docx,xls,xlsx,csv,ppt,pptx,pdf,txt,jpg,jpeg,png"
'attachment' => "fileSize:$max_size|fileExt:biz,bz,bz2,gz,tgz,zip,rar,7z,doc,docx,xls,xlsx,csv,ppt,pptx,pdf,txt,jpg,jpeg,png,ttf"
]);
if (!$validate->check(['attachment' => $file])) {
return error($validate->getError());

3
app/admin/controller/v1/Video.php
View File

@@ -50,7 +50,8 @@ class Video
'page' => $params['page'],
])
->bindAttr('category', ['category_name'])
->hidden(['category', 'category_id']);
->hidden(['category', 'category_id'])
?->each(fn($item) => $item->image = thumb($item->image));
return success('获取成功', $videos);
}

3
app/admin/controller/v1/VideoTrash.php
View File

@@ -47,7 +47,8 @@ class VideoTrash
'page' => $params['page'],
])
->bindAttr('category', ['category_name'])
->hidden(['category_id', 'category']);
->hidden(['category_id', 'category'])
?->each(fn($item) => $item->image = thumb($item->image));
return success('获取成功', $videos);
}

4
app/admin/validate/v1/NavigationItemValidate.php
View File

@@ -21,7 +21,7 @@ class NavigationItemValidate extends Validate
'pid' => 'integer|different:id|checkPidNotBeChildren',
'name' => 'require|max:64',
'icon' => 'max:64',
'link_to' => 'require|max:64|in:article,article_category,product,product_category,custom',
'link_to' => 'require|max:64|in:article,article_category,product,product_category,system_page,custom',
'link' => 'max:255',
'sort' => 'integer',
'blank' => 'in:0,1',
@@ -47,7 +47,7 @@ class NavigationItemValidate extends Validate
'icon.max' => '图标最多不能超过64个字符',
'link_to.require' => '链接类型不能为空',
'link_to.max' => '链接类型最多不能超过64个字符',
'link_to.in' => '链接类型必须是article,goods_category,goods,custom中之一',
'link_to.in' => '链接类型必须是article,article_category,product_category,product,system_page,custom中之一',
'link.max' => '链接最多不能超过255个字符',
'sort.integer' => '排序必须为整数',
'blank.in' => '是否新窗口打开只能是0或1',

4
app/admin/validate/v1/SysBannerItemValidate.php
View File

@@ -23,7 +23,7 @@ class SysBannerItemValidate extends Validate
'type' => 'in:image,video',
'image' => 'max:255',
'video' => 'max:255',
'link_to' => 'requireIf:type,image|max:64|in:article,article_category,product,product_category,custom',
'link_to' => 'requireIf:type,image|max:64|in:article,article_category,product,product_category,system_page,custom',
'link' => 'max:255',
'sort' => 'integer',
'status' => 'in:-1,1'
@@ -50,7 +50,7 @@ class SysBannerItemValidate extends Validate
'video.max' => '视频地址最多不能超过255个字符',
'link_to.requireIf' => '链接类型不能为空',
'link_to.max' => '链接类型最多不能超过64个字符',
'link_to.in' => '链接类型必须是article,article_category,product,product_category,custom中之一',
'link_to.in' => '链接类型必须是article,article_category,product,product_category,system_page,custom中之一',
'link.max' => '链接最多不能超过255个字符',
'sort.integer' => '排序值必须是整数',
'status.in' => '状态必须是-1或1'

42
app/index/controller/TopicNas.php
View File

@@ -111,7 +111,9 @@ class TopicNas extends Common
$trial_instructions = [];
// 获取banner数据
$banners = SysBannerModel::with(['items' => function($query) {
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])->enabled(true);
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
->order(['sort' => 'asc', 'id' => 'desc'])
->enabled(true);
}])
->atPlatform(request()->from)
->uniqueLabel([
@@ -150,7 +152,9 @@ class TopicNas extends Common
$cooperation_cotacts = [];
// 获取banner数据
$banners = SysBannerModel::with(['items' => function($query) {
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])->enabled(true);
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
->order(['sort' => 'asc', 'id' => 'desc'])
->enabled(true);
}])
->atPlatform(request()->from)
->uniqueLabel([
@@ -189,7 +193,9 @@ class TopicNas extends Common
// 获取文章分类及文章数据
$parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->language($this->lang_id)->value('id');
$article_categorys = ArticleCategoryModel::with(['article' => function($query) {
$query->field(['id', 'title', 'category_id'])->limit(3);
$query->field(['id', 'title', 'category_id'])
->order(['sort' => 'asc', 'id' => 'desc'])
->limit(3);
}])
->field([
'id',
@@ -205,7 +211,9 @@ class TopicNas extends Common
$contacts = [];
// 获取banner数据
$banners = SysBannerModel::with(['items' => function ($query) {
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])->enabled(true);
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
->order(['sort' => 'asc', 'id' => 'desc'])
->enabled(true);
}])
->atPlatform(request()->from)
->uniqueLabel(['BANNER_6819754be2dc6'])
@@ -238,7 +246,7 @@ class TopicNas extends Common
// 获取文章分类及文章数据
$parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')->language($this->lang_id)->value('id');
$article_categorys = ArticleCategoryModel::with(['article' => function ($query) {
$query->field(['id', 'title', 'category_id']);
$query->field(['id', 'title', 'category_id'])->order(['sort' => 'asc', 'id' => 'desc']);
}])
->field([
'id',
@@ -261,6 +269,25 @@ class TopicNas extends Common
{
$keywords = request()->post('keywords');
// 根据关键词查询文章
$parent = ArticleCategoryModel::uniqueLabel('CATEGORY_681182e0a4529')
->language($this->lang_id)
->value('id');
// 获取帮且中心分类子分类
$table_name = (new ArticleCategoryModel)->getTable();
$categorys = \think\facade\Db::query(preg_replace(
'/\s+/u',
' ',
"WITH RECURSIVE article_tree_by AS (
SELECT a.id, a.pid FROM $table_name a WHERE a.id = {$parent}
UNION ALL
SELECT k.id, k.pid FROM $table_name k INNER JOIN article_tree_by t ON t.id = k.pid
)
SELECT id FROM article_tree_by WHERE id <> {$parent}"
));
if (empty($categorys)) return success('success', []);
// 获取文章数据
$articles = ArticleModel::field([
'id',
'title'
@@ -269,6 +296,7 @@ class TopicNas extends Common
'title' => $keywords??null
])
->language($this->lang_id)
->where('category_id', 'IN', array_column($categorys, 'id'))
->select();
return success('success', $articles->toArray());
@@ -282,7 +310,9 @@ class TopicNas extends Common
$data = [];
// 获取banner数据
$banners = SysBannerModel::with(['items' => function($query) {
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])->enabled(true);
$query->withoutField(['sort', 'created_at', 'updated_at', 'deleted_at'])
->order(['sort' => 'asc', 'id' => 'desc'])
->enabled(true);
}])
->atPlatform(request()->from)
->uniqueLabel([

2
app/index/view/pc/contact_us/distributor.html
View File

@@ -61,7 +61,7 @@
</div>
<div class="theit">
<div class="bditem bditem1">
<label class="itlable">{:lang_i18n('c公司地址')}<span class="redtag">*</span></label>
<label class="itlable">{:lang_i18n('公司地址')}<span class="redtag">*</span></label>
<input class="form-control itinp" name="address" placeholder="{:lang_i18n('请输入地址')}" />
</div>
</div>

816
app/index/view/pc/index/index.html
View File

@@ -6,429 +6,419 @@
{/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}" class="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_i18n('查看所有')}</span>
<div class="tpicture"></div>
</div>
</div>
{else/}
<div class="ftItme_left">
<p>{$topic.title}</p>
<div class="subtitle">
<span>{:lang_i18n('查看所有')}</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_i18n('明星产品/热点产品')}</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_i18n('了解更多')} ></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="__IMAGES__/rightcheck.png">
<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
</div>
</div>
</div>
</div>
{/notempty}
<!-- 视频宣传 -->
{notempty name="video"}
<div class="hotProduct">
<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}" class="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_i18n('查看所有')}</span>
<div class="tpicture"></div>
</div>
</div>
{else/}
<div class="ftItme_left">
<p>{$topic.title}</p>
<div class="subtitle">
<span>{:lang_i18n('查看所有')}</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_i18n('明星产品/热点产品')}</p>
<div class="swiper fpSwiper">
<div class="swiper-wrapper">
{volist name="featured_products" id="product"}
<div class="swiper-slide picture">
<a class="primg" href="{:url('product/detail', ['id' => $product.id])}">
<img src="{$product.cover_image}" />
</a>
<div class="fpptitle">{$product.name}</div>
<div class="subtitle">{$product.short_name}</div>
<a class="more" href="{:url('product/detail', ['id' => $product.id])}">{:lang_i18n('了解更多')} ></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="__IMAGES__/rightcheck.png">
<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
</div>
</div>
</div>
</div>
{/notempty}
<!-- 视频宣传 -->
{notempty name="video"}
<div class="hotProduct">
<div class="hotvideo">
<video poster="{$video.image}"
src="{$video.video}"
style="max-height:50rem;z-index:9999;width: 100%;object-fit: cover;"
autoplay
loop
controls
id="oricoVideo"></video>
<video poster="{$video.image}" src="{$video.video}" style="max-height:50rem;z-index:9999;width: 100%;object-fit: cover;" autoplay loop controls id="oricoVideo"></video>
</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|raw}</p>
<a class="sceneMore" href="{$scene.link}">{:lang_i18n('了解更多')} ></a>
</div>
<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
</div>
{/volist}
</div>
{/notempty}
<!-- orico科技 -->
<div class="oricoTechnology">
<p class="ottitle">{:lang_i18n('ORICO 技术')}</p>
<span class="otsbtitle">{:lang_i18n('强大功能、简单使用')}</span>
<div class="beforeafter ba-slider">
<!-- 对比前的图片 -->
<img src="__IMAGES__/indeximg1.jpg">
<div class="resize">
<!-- 对比后的图片 -->
<img src="__IMAGES__/indeximg2.jpg">
</div>
<!-- 可拖动的分隔条 -->
<span class="handle"></span>
</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|raw}</div>
<a class="bsmore" href="{$story.link}">{:lang_i18n('了解更多')} ></a>
</div>
</div>
{/volist}
</div>
<div class="swiperasd bs_swiperasd" id="timeline">
<div class="bs_swcontainer">
<div class="swiper-pagination bs_pagination"></div>
<hr>
{volist name="brand_story" id="story" key="k"}
<span class="time">{$story.year}</span>
{/volist}
</div>
<div class="swiper-container bs_bts">
<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>
</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|raw}</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/detail', ['id' => $article.id])}">
<img src="{$article.image}" class="pubimg" />
</a>
<a class="pubinfo">
<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="__IMAGES__/rightcheck.png">
<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
</div>
</div>
</div>
</div>
{/notempty}
<!-- FAQ-->
{notempty name="recommend_faq"}
<div class="oricoFQA">
<div class="fqaleft">
<h1 class="title">{:lang_i18n('常见问题')}</h1>
<p class="dec">{:lang_i18n('回答您最关心的问题')}</p>
<p class="sudec">{:lang_i18n('客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内')}</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}
<!-- 底部固定提示 -->
{eq name="Request.cookie.think_lang" value="en-us"}
<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>
{/eq}
</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|raw}</p>
<a class="sceneMore" href="{$scene.link}">{:lang_i18n('了解更多')} ></a>
</div>
<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
</div>
{/volist}
</div>
{/notempty}
<!-- orico科技 -->
<div class="oricoTechnology">
<p class="ottitle">{:lang_i18n('ORICO 技术')}</p>
<span class="otsbtitle">{:lang_i18n('强大功能、简单使用')}</span>
<div class="beforeafter ba-slider">
<!-- 对比前的图片 -->
<img src="__IMAGES__/indeximg1.jpg">
<div class="resize">
<!-- 对比后的图片 -->
<img src="__IMAGES__/indeximg2.jpg">
</div>
<!-- 可拖动的分隔条 -->
<span class="handle"></span>
</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|raw}</div>
<a class="bsmore" href="{$story.link}">{:lang_i18n('了解更多')} ></a>
</div>
</div>
{/volist}
</div>
<div class="swiperasd bs_swiperasd" id="timeline">
<div class="bs_swcontainer">
<div class="swiper-pagination bs_pagination"></div>
<hr>
{volist name="brand_story" id="story" key="k"}
<span class="time">{$story.year}</span>
{/volist}
</div>
<div class="swiper-container bs_bts">
<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>
</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|raw}</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/detail', ['id' => $article.id])}">
<img src="{$article.image}" class="pubimg" />
</a>
<a class="pubinfo">
<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="__IMAGES__/rightcheck.png">
<img class="slideshow-btn swiper-button-prev" src="__IMAGES__/lefta.png">
</div>
</div>
</div>
</div>
{/notempty}
<!-- FAQ-->
{notempty name="recommend_faq"}
<div class="oricoFQA">
<div class="fqaleft">
<h1 class="title">{:lang_i18n('常见问题')}</h1>
<p class="dec">{:lang_i18n('回答您最关心的问题')}</p>
<p class="sudec">{:lang_i18n('客服团队的工作时间：周一到周五，早9点到晚6点 平均应答时间：24小时内')}</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}
<!-- 底部固定提示 -->
{eq name="Request.cookie.think_lang" value="en-us"}
<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>
{/eq}
</div>
</div>
{/block}
{block name="script"}
<script>
$(document).ready(function () {
// 图片左右移动显示全部
$('.ba-slider').beforeAfter({
startPercent: 50, // 初始分隔条位置为 50%
handle: '.handle', // 指定分隔条元素的选择器
resize: '.resize' // 指定可调整大小部分的选择器
});
$(document).ready(function () {
// 图片左右移动显示全部
$('.ba-slider').beforeAfter({
startPercent: 50, // 初始分隔条位置为 50%
handle: '.handle', // 指定分隔条元素的选择器
resize: '.resize' // 指定可调整大小部分的选择器
});
// 底部关闭
$(".oficlose").on("click", function () {
$(".oricofixd-info").hide();
});
// 视频
const video = $('#oricoVideo');
const videoContainer = $('.hotvideo');
const img = $('.hotImg');
// 监听视频加载完成事件
video.on('canplaythrough', function() {
// 显示视频容器，隐藏图片
videoContainer.css('display', 'block');
img.hide();
console.log('视频可以流畅播放');
// 底部关闭
$(".oficlose").on("click", function () {
$(".oricofixd-info").hide();
});
// 视频
const video = $('#oricoVideo');
const videoContainer = $('.hotvideo');
const img = $('.hotImg');
// 监听视频加载完成事件
video.on('canplaythrough', function () {
// 显示视频容器，隐藏图片
videoContainer.css('display', 'block');
img.hide();
console.log('视频可以流畅播放');
});
// 处理视频加载失败（可选）
video.on('error', function () {
// 可在此添加失败提示，如显示错误信息或保留图片
img.show();
videoContainer.css('display', 'none');
console.log('视频加载或播放出错');
});
});
$(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",
},
});
// 计算品牌故事轮播个数样式调整
function calculateDisplayValue(n) {
return 8 - n;
}
// 动态调整分页点和年份位置
function adjustTimeline() {
const slideCount = brandStoryswiper.slides.length; // 获取轮播项个数
if (slideCount === 0) return;
// 计算分页点间距
const bulletMargin = ((100 / slideCount) - 2) + "%";
$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet").css("margin-right", bulletMargin);
// 最后一个分页点的 margin-right 设为 0
$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet:last-child").css("margin-right", "0");
// 计算年份位置（固定间隔21%）
const timeSpans = $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time");
var tag = 0
var percent = 0
var basenum = calculateDisplayValue(slideCount)
timeSpans.each(function (index) {
if (index == 1) {
tag = ((100 / slideCount)) * index - (index > 0 ? basenum : 0)
percent = tag
}
if (index > 1) {
percent = tag * index
}
$(this).css("left", `${percent}%`);
});
// 处理视频加载失败（可选）
video.on('error', function() {
// 可在此添加失败提示，如显示错误信息或保留图片
img.show();
videoContainer.css('display', 'none');
console.log('视频加载或播放出错');
}
// 初始化时调用
adjustTimeline();
// 窗口Resize时重新计算（可选）
$(window).on("resize", adjustTimeline);
// 宣传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();
});
});
$(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",
},
});
// 计算品牌故事轮播个数样式调整
function calculateDisplayValue (n) {
return 8 - n;
}
// 动态调整分页点和年份位置
function adjustTimeline () {
const slideCount = brandStoryswiper.slides.length; // 获取轮播项个数
if (slideCount === 0) return;
// 计算分页点间距
const bulletMargin = ((100 / slideCount) - 2) + "%";
$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet").css("margin-right", bulletMargin);
// 最后一个分页点的 margin-right 设为 0
$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet:last-child").css("margin-right", "0");
// 计算年份位置（固定间隔21%）
const timeSpans = $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time");
var tag = 0
var percent = 0
var basenum = calculateDisplayValue(slideCount)
timeSpans.each(function (index) {
if (index == 1) {
tag = ((100 / slideCount)) * index - (index > 0 ? basenum : 0)
percent = tag
}
if (index > 1) {
percent = tag * index
}
$(this).css("left", `${percent}%`);
});
}
// 初始化时调用
adjustTimeline();
// 窗口Resize时重新计算（可选）
$(window).on("resize", adjustTimeline);
// 宣传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);
});
}, 1000);
// 监听视频的加载失败事件
setTimeout(function () {
$("#hotvideo").on("error", function () {
// 视频加载失败时，显示加载中的图片，隐藏视频元素
$("#hotImg").show();
$("#videoElement").hide();
});
}, 1500);
});
</script>
{/block}

392
app/index/view/pc/public/header.html
View File

@@ -1,203 +1,205 @@
<header class="header-PC">
<div id="header">
<!-- LOG -->
<div class="nav1">
<a href="/">
<img src="__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_i18n('产品列表')}</a>
<img src="__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="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
</li>
{/volist}
</ul>
<!-- 右边子菜单-->
{volist name="header_categorys" id="vo" key="idx"}
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
{volist name="vo.children" id="vc"}
<dl class="nav_cyrightit">
<dt>
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
</dt>
{volist name="vc.children" id="vcc"}
<dd>
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
</dd>
{/volist}
</dl>
{/volist}
</div>
{/volist}
</ol>
</li>
{/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="__IMAGES__/black-down.png" class="downimg" />
<!--下拉菜单 -->
<ol class="navItemConten1">
{volist name="vo.children" id="voc"}
<li>
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
</li>
{/volist}
</ol>
{/if}
</li>
{/volist}
</ul>
</nav>
</div>
<!-- 顶部搜索/国家选择/商店-->
<div class="nav3">
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
<div class="choesCountry">
<img src="__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>
{notempty name="basic_config['navigation_store_url']['value']"}
<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}">
<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
</a>
{/notempty}
</div>
</div>
<div id="header">
<!-- LOG -->
<div class="nav1">
<a href="/">
<img src="__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_i18n('产品列表')}</a>
<img src="__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="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
</li>
{/volist}
</ul>
<!-- 右边子菜单-->
{volist name="header_categorys" id="vo" key="idx"}
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
{volist name="vo.children" id="vc"}
<dl class="nav_cyrightit">
<dt>
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
</dt>
{volist name="vc.children" id="vcc"}
<dd>
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
</dd>
{/volist}
</dl>
{/volist}
</div>
{/volist}
</ol>
</li>
{/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="__IMAGES__/black-down.png" class="downimg" />
<!--下拉菜单 -->
<ol class="navItemConten1">
{volist name="vo.children" id="voc"}
<li>
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
</li>
{/volist}
</ol>
{/if}
</li>
{/volist}
</ul>
</nav>
</div>
<!-- 顶部搜索/国家选择/商店-->
<div class="nav3">
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
<div class="choesCountry">
<img src="__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>
{eq name=":cookie('think_lang')" value="en-us"}
{notempty name="basic_config['navigation_store_url']['value']"}
<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}">
<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
</a>
{/notempty}
{/eq}
</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_i18n('搜索记录')}</p>
<ul></ul>
</div>
<div class="popProduct">
<p class="h_title">{:lang_i18n('热销产品')}</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 class="produc-dec">{$vo.short_name}</div>
</div>
{/volist}
</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_i18n('搜索记录')}</p>
<ul></ul>
</div>
<div class="popProduct">
<p class="h_title">{:lang_i18n('热销产品')}</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 class="produc-dec">{$vo.short_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;
}
$(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>');
});
// 回显搜索历史记录
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(60);
}).mouseleave(function () {
$content.stop(true, true).slideUp(60);
});
}
// 处理第一个导航项
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);
return history;
}
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
function handleHover($element, $content) {
$element.mouseenter(function () {
$content.stop(true, true).slideDown(60);
}).mouseleave(function () {
$content.stop(true, true).slideUp(60);
});
}
// 处理第一个导航项
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();
});
});
// 跳转到搜索页面
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
}
});
// 点击选择国家
$('#countrycheck').click(function () {
$('#top-country').toggle();
});
$('.closecountrybt').click(function () {
$('#top-country').hide();
});
});
</script>