diff --git a/.gitignore b/.gitignore index 8c9279ce..1ee66503 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,6 @@ public/.well-known /.settings /.buildpath /.project + +CLAUDE.md +/skills diff --git a/app/admin/controller/v1/Banner.php b/app/admin/controller/v1/Banner.php index a28a041f..52ac5edc 100644 --- a/app/admin/controller/v1/Banner.php +++ b/app/admin/controller/v1/Banner.php @@ -91,7 +91,6 @@ class Banner $banner = SysBannerModel::withoutField([ 'at_page', - 'unique_label', 'language_id', 'created_at', 'updated_at', @@ -142,10 +141,11 @@ class Banner 'name', 'desc', 'recommend', + 'unique_label', 'at_platform' => 'pc', 'status' => 1 ]); - + $validate = new SysBannerValidate; if (!$validate->scene('edit')->check(array_merge($put, ['id' => $id]))) { return error($validate->getError()); diff --git a/app/admin/controller/v1/NavigationItem.php b/app/admin/controller/v1/NavigationItem.php index 3875d7f7..fa63be15 100644 --- a/app/admin/controller/v1/NavigationItem.php +++ b/app/admin/controller/v1/NavigationItem.php @@ -67,6 +67,8 @@ class NavigationItem 'id', 'pid', 'name', + 'desc', + 'image', 'nav_id', 'sort', 'status', @@ -93,7 +95,9 @@ class NavigationItem 'pid', 'nav_id', 'name', + 'desc', 'icon', + 'image', 'link_to' => 'custom', 'link', 'sort', @@ -121,7 +125,9 @@ class NavigationItem 'pid', 'nav_id', 'name', + 'desc', 'icon', + 'image', 'link_to', 'link', 'sort', @@ -172,7 +178,7 @@ class NavigationItem if (empty($nav)) { return error('请确认要操作对象是否存在'); } - + if (!$nav->delete()) { return error('操作失败'); } diff --git a/app/admin/controller/v1/Product.php b/app/admin/controller/v1/Product.php index 3b635255..5914a8ed 100644 --- a/app/admin/controller/v1/Product.php +++ b/app/admin/controller/v1/Product.php @@ -24,7 +24,7 @@ class Product 'category_id', 'created_at', 'is_show', - 'page/d' => 1, + 'page/d' => 1, 'size/d' => 10 ]); @@ -83,7 +83,7 @@ class Product ]) ->bypk(request()->param('id')) ->find() - ->bindAttr('category', ['category_name']) + ?->bindAttr('category', ['category_name']) ->hidden(['category']); if (empty($product)) { return error('产品不存在'); @@ -108,7 +108,7 @@ class Product // 获取关联产品 $product->related = ProductRelatedModel::field([ - 'related_product_id', + 'related_product_id', 'sort' ]) ->with(['product' => function($query) { @@ -149,8 +149,8 @@ class Product 'seo_desc' ]); $put = array_merge( - $put, - ['skus' => json_decode($put['skus'], true)], + $put, + ['skus' => json_decode($put['skus'], true)], ['related' => json_decode($put['related'], true)], ); @@ -305,7 +305,7 @@ class Product return success('操作成功'); } - + // 导出 public function export() { @@ -444,7 +444,7 @@ class Product }); } } - + return $products->toArray(); } } diff --git a/app/admin/controller/v1/ProductCategoryRecommend.php b/app/admin/controller/v1/ProductCategoryRecommend.php new file mode 100644 index 00000000..3a1581de --- /dev/null +++ b/app/admin/controller/v1/ProductCategoryRecommend.php @@ -0,0 +1,203 @@ +get([ + 'keywords', + 'category_name', + 'page/d' => 1, + 'size/d' => 10 + ]); + + // 查询数据 + $data = ProductCategoryRecommendModel::withJoin(['category' => function($query) use ($param) { + if (!empty($param['category_name'])) { + $query->where('category.name', 'like', '%' . $param['category_name'] . '%'); + } + }]) + ->withSearch(['keywords'], ['keywords' => $param['keywords']??null]) + ->language(request()->lang_id) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->paginate([ + 'list_rows' => $param['size'], + 'page' => $param['page'], + ]) + ->bindAttr('category', ['category_name' => 'name']) + ->hidden(['category', 'language_id', 'updated_at', 'deleted_at']) + ?->each(function($item) { + // 列表页面图片输出缩略图 + if (!empty($item['image'])) { + $item['image'] = thumb($item['image']); + } + }); + + return success('获取成功', $data); + } + + /** + * 导出Excel + */ + public function export() + { + $schema = [ + 'id' => 'ID', + 'image' => '图片', + 'category_name' => '分类名称', + 'desc' => '产品介绍', + 'link' => '链接地址', + 'sort' => '排序', + 'disabled' => '状态', + 'created_at' => '添加时间' + ]; + + // 获取导出数据 + $data = $this->getProductCategoryRecommendData(); + + // 导出 + return xlsx_writer($data, $schema, '产品推荐列表' . date('YmdHis')); + } + // 获取要导出的推荐记录数据 + private function getProductCategoryRecommendData() + { + $server = request()->server(); + $image_host = $server['REQUEST_SCHEME'] . "://" . $server['SERVER_NAME'] . '/'; + $param = request()->get(['keywords']); + + // 查询数据 + return ProductCategoryRecommendModel::withJoin(['category' => function($query) use ($param) { + if (!empty($param['category_name'])) { + $query->where('category.name', 'like', '%' . $param['category_name'] . '%'); + } + }]) + ->withSearch(['keywords'], ['keywords' => $param['keywords']??null]) + ->language(request()->lang_id) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->select() + ->bindAttr('category', ['category_name' => 'name']) + ->hidden(['category', 'language_id', 'updated_at', 'deleted_at']) + ?->each(function($item) use($image_host) { + // 拼接完整图片URL + if (!empty($item['image'])) { + $item['image'] = url_join($image_host, $item['image']); + } + // 状态 + $item['disabled'] = $item['disabled'] == 1 ? '禁用' : '启用'; + }) + ->toArray(); + } + + /** + * 获取详细数据 + */ + public function read() + { + $id = request()->param('id/d'); + $record = ProductCategoryRecommendModel::bypk($id) + ->withoutField(['language_id', 'created_at', 'updated_at', 'deleted_at']) + ->find(); + if (empty($record)) { + return error('推荐数据不存在'); + } + + return success('success', $record); + } + + /** + * 新增数据 + */ + public function save() + { + $post = request()->post([ + 'category_id', + 'title', + 'image', + 'desc', + 'link', + 'sort', + 'disabled' + ]); + $data = array_merge($post, ['language_id' => request()->lang_id]); + + // 参数校验 + $validate = new ProductCategoryRecommendValidate(); + if (!$validate->scene('create')->check($data)) { + return error($validate->getError()); + } + + // 保存推荐数据 + $recommend = ProductCategoryRecommendModel::create($data); + if ($recommend->isEmpty()) { + return error('保存失败'); + } + return success('保存成功'); + } + + /** + * 更新数据 + */ + public function update() + { + $id = request()->param('id/d'); + $post = request()->post([ + 'category_id', + 'title', + 'image', + 'desc', + 'link', + 'sort', + 'disabled' + ]); + $data = array_merge($post, ['language_id' => request()->lang_id]); + + // 参数校验 + $validate = new ProductCategoryRecommendValidate(); + $check_data = array_merge($data, ['id' => $id]); + if (!$validate->scene('update')->check($check_data)) { + return error($validate->getError()); + } + + // 更新推荐数据 + $recommend = ProductCategoryRecommendModel::bypk($id)->find(); + if (empty($recommend)) { + return error('请确认操作对象是否存在'); + } + if (!$recommend->save($data)) { + return error('操作失败'); + } + + return success('操作成功'); + } + + /** + * 删除 + */ + public function delete() + { + $id = request()->param('id/d'); + + // 删除推荐记录数据 + $record = ProductCategoryRecommendModel::bypk($id)->find(); + if (empty($record)) { + return error('请确认操作对象是否正确'); + } + if (!$record->delete()) { + return error('操作失败'); + } + + return success('操作成功'); + } +} diff --git a/app/admin/controller/v1/SysMallStoreEntrance.php b/app/admin/controller/v1/SysMallStoreEntrance.php new file mode 100644 index 00000000..94f38910 --- /dev/null +++ b/app/admin/controller/v1/SysMallStoreEntrance.php @@ -0,0 +1,201 @@ +get([ + 'name', + 'page/d' => 1, + 'size/d' => 10 + ]); + + // 查询数据 + $data = SysMallStoreEntranceModel::withoutField([ + 'language_id', + 'hover_image', + 'updated_at', + 'deleted_at' + ]) + ->withSearch(['name'], ['name' => $param['name']??null]) + ->language(request()->lang_id) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->paginate([ + 'list_rows' => $param['size'], + 'page' => $param['page'], + ]) + ?->each(function($item) { + // 列表页面图片输出缩略图 + if (!empty($item['image'])) { + $item['image'] = thumb($item['image']); + } + }); + + return success('获取成功', $data); + } + + /** + * 获取详情 + */ + public function read() + { + $id = request()->param('id/d'); + $record = SysMallStoreEntranceModel::bypk($id) + ->withoutField(['language_id', 'created_at', 'updated_at', 'deleted_at']) + ->find(); + if (empty($record)) { + return error('商城店铺入口数据不存在'); + } + + return success('success', $record); + } + + /** + * 新增数据 + */ + public function save() + { + $post = request()->post([ + 'name', + 'image', + 'hover_image', + 'link', + 'sort', + 'disabled' + ]); + $data = array_merge($post, ['language_id' => request()->lang_id]); + + // 参数校验 + $validate = new SysMallStoreEntranceValidate(); + if (!$validate->scene('create')->check($data)) { + return error($validate->getError()); + } + + // 保存数据 + $entrance = SysMallStoreEntranceModel::create($data); + if ($entrance->isEmpty()) { + return error('保存失败'); + } + return success('保存成功'); + } + + /** + * 更新数据 + */ + public function update() + { + $id = request()->param('id/d'); + $post = request()->post([ + 'name', + 'image', + 'hover_image', + 'link', + 'sort', + 'disabled' + ]); + $data = array_merge($post, ['language_id' => request()->lang_id]); + + // 参数校验 + $validate = new SysMallStoreEntranceValidate(); + $check_data = array_merge($data, ['id' => $id]); + if (!$validate->scene('update')->check($check_data)) { + return error($validate->getError()); + } + + // 更新数据 + $entrance = SysMallStoreEntranceModel::bypk($id)->find(); + if (empty($entrance)) { + return error('请确认操作对象是否存在'); + } + if (!$entrance->save($data)) { + return error('操作失败'); + } + + return success('操作成功'); + } + + /** + * 删除 + */ + public function delete() + { + $id = request()->param('id/d'); + + // 删除数据 + $record = SysMallStoreEntranceModel::bypk($id)->find(); + if (empty($record)) { + return error('请确认操作对象是否正确'); + } + if (!$record->delete()) { + return error('操作失败'); + } + + return success('操作成功'); + } + + /** + * 导出Excel + */ + public function export() + { + $schema = [ + 'id' => 'ID', + 'image' => '图片', + 'hover_image' => '悬浮图', + 'name' => '名称', + 'link' => '链接地址', + 'sort' => '排序', + 'disabled' => '状态', + 'created_at' => '添加时间' + ]; + + // 获取导出数据 + $data = $this->getExportData(); + + // 导出 + return xlsx_writer($data, $schema, '系统商城店铺入口列表' . date('YmdHis')); + } + + // 获取要导出的数据 + private function getExportData() + { + $server = request()->server(); + $image_host = $server['REQUEST_SCHEME'] . "://" . $server['SERVER_NAME'] . '/'; + $param = request()->get(['name']); + + // 查询数据 + return SysMallStoreEntranceModel::withoutField([ + 'language_id', + 'updated_at', + 'deleted_at' + ]) + ->withSearch(['name'], ['name' => $param['name']??null]) + ->language(request()->lang_id) + ->order(['sort' => 'asc', 'id' => 'desc']) + ->select() + ?->each(function($item) use($image_host) { + // 拼接完整图片URL + if (!empty($item['image'])) { + $item['image'] = url_join($image_host, $item['image']); + } + if (!empty($item['hover_image'])) { + $item['hover_image'] = url_join($image_host, $item['hover_image']); + } + // 状态转换 + $item['disabled'] = $item['disabled'] == 1 ? '禁用' : '启用'; + }) + ->toArray(); + } +} diff --git a/app/admin/model/v1/ProductCategoryRecommendModel.php b/app/admin/model/v1/ProductCategoryRecommendModel.php new file mode 100644 index 00000000..317bb968 --- /dev/null +++ b/app/admin/model/v1/ProductCategoryRecommendModel.php @@ -0,0 +1,47 @@ +belongsTo(\app\index\model\LanguageModel::class, 'language_id', 'id'); + } + + // 关联产品分类 + public function category() + { + return $this->belongsTo(\app\index\model\ProductCategoryModel::class, 'category_id', 'id'); + } + + // 所属语言范围查询 + public function scopeLanguage($query, $language) + { + $query->where($this->getTable() . '.language_id', '=', $language); + } + + // 关键词搜索 + public function searchKeywordsAttr($query, string|null $keywords) + { + if (is_null($keywords)) { + return; + } + $query->where($this->getTable() . '.title', 'like', "%{$keywords}%") + ->whereOr($this->getTable() . '.desc', 'like', "%{$keywords}%"); + } +} diff --git a/app/admin/model/v1/SysMallStoreEntranceModel.php b/app/admin/model/v1/SysMallStoreEntranceModel.php new file mode 100644 index 00000000..f1cd1a81 --- /dev/null +++ b/app/admin/model/v1/SysMallStoreEntranceModel.php @@ -0,0 +1,61 @@ +belongsTo(\app\index\model\LanguageModel::class, 'language_id', 'id'); + } + + // 所属语言范围查询 + public function scopeLanguage($query, $language) + { + $query->where($this->getTable() . '.language_id', '=', $language); + } + + // 查询启用状态 + public function scopeEnabled($query) + { + $query->where('disabled', '=', 0); + } + + // 查询禁用状态 + public function scopeDisabled($query) + { + $query->where('disabled', '=', 1); + } + + // 按名称搜索 + public function searchNameAttr($query, $value, $data) + { + if (is_null($value)) { + return; + } + $query->where('name', 'like', "%{$value}%"); + } + + // 按链接地址搜索 + public function searchLinkAttr($query, $value, $data) + { + if (is_null($value)) { + return; + } + $query->where('link_url', 'like', "%{$value}%"); + } +} diff --git a/app/admin/route/v1.php b/app/admin/route/v1.php index e2aa35f2..b8e56853 100644 --- a/app/admin/route/v1.php +++ b/app/admin/route/v1.php @@ -87,7 +87,7 @@ Route::group('v1', function () { // 视频分类列表 Route::get('categorys', 'VideoCategory/list'); - + // 视频分类 Route::group('category', function () { // 视频分类分页数据 @@ -311,6 +311,27 @@ Route::group('v1', function () { // 分类删除 Route::delete('delete/:id', 'ProductCategory/delete'); + + // 产品分类推荐数据 + Route::group('recommend', function () { + // 推荐数据分页列表 + Route::get('index', 'ProductCategoryRecommend/index'); + + // 推荐数据导出 + Route::get('export', 'ProductCategoryRecommend/export'); + + // 推荐数据详情 + Route::get('read/:id', 'ProductCategoryRecommend/read'); + + // 推荐数据新增 + Route::post('save', 'ProductCategoryRecommend/save'); + + // 推荐数据更新 + Route::put('update/:id', 'ProductCategoryRecommend/update'); + + // 推荐数据删除 + Route::delete('delete/:id', 'ProductCategoryRecommend/delete'); + }); }); // 产品购买链接 @@ -483,7 +504,7 @@ Route::group('v1', function () { // 分页 Route::get('index', 'Navigation/index'); - + // 导航详情 Route::get('read/:id', 'Navigation/read'); @@ -574,6 +595,29 @@ Route::group('v1', function () { // 反馈管理 - 产品询盘列表 Route::get('product/inquiry/index', 'ProductInquiry/index'); + // 系统商城店铺入口 + Route::group('mall', function() { + Route::group('store', function() { + // 店铺入口列表分页 + Route::get('index', 'SysMallStoreEntrance/index'); + + // 店铺入口导出 + Route::get('export', 'SysMallStoreEntrance/export'); + + // 店铺入口详情 + Route::get('read/:id', 'SysMallStoreEntrance/read'); + + // 店铺入口新增 + Route::post('save', 'SysMallStoreEntrance/save'); + + // 店铺入口更新 + Route::put('update/:id', 'SysMallStoreEntrance/update'); + + // 店铺入口删除 + Route::delete('delete/:id', 'SysMallStoreEntrance/delete'); + }); + }); + // 配置项列表 Route::group('config', function() { // 配置分组 diff --git a/app/admin/validate/v1/NavigationItemValidate.php b/app/admin/validate/v1/NavigationItemValidate.php index ee3e7c7e..103f2fa3 100644 --- a/app/admin/validate/v1/NavigationItemValidate.php +++ b/app/admin/validate/v1/NavigationItemValidate.php @@ -20,7 +20,9 @@ class NavigationItemValidate extends Validate 'nav_id' => 'require|integer', 'pid' => 'integer|different:id|checkPidNotBeChildren', 'name' => 'require|max:64', + 'desc' => 'max:255', 'icon' => 'max:64', + 'image' => 'max:255', 'link_to' => 'require|max:64|in:article,article_category,product,product_category,system_page,custom', 'link' => 'max:255', 'sort' => 'integer', @@ -44,7 +46,9 @@ class NavigationItemValidate extends Validate 'pid.checkPidNotBeChildren' => '父级ID不能为自身的子导航', 'name.require' => '导航名称不能为空', 'name.max' => '导航名称最多不能超过64个字符', + 'desc.max' => '导航名称最多不能超过:rule个字符', 'icon.max' => '图标最多不能超过64个字符', + 'image.max' => '图标最多不能超过:rule个字符', 'link_to.require' => '链接类型不能为空', 'link_to.max' => '链接类型最多不能超过64个字符', 'link_to.in' => '链接类型必须是article,article_category,product_category,product,system_page,custom中之一', @@ -67,7 +71,7 @@ class NavigationItemValidate extends Validate if (env('DB_VERSION', '5') == '8') { $children = Db::query( preg_replace( - '/\s+/u', + '/\s+/u', ' ', "WITH RECURSIVE tree_by AS ( SELECT a.id, a.pid FROM $table_name a WHERE a.id = {$data['id']} @@ -80,13 +84,13 @@ class NavigationItemValidate extends Validate } else { $children = \think\facade\Db::query(" SELECT t2.id - FROM ( - SELECT + FROM ( + SELECT @r AS _id, (SELECT @r := GROUP_CONCAT(id) FROM $table_name WHERE FIND_IN_SET(pid, _id)) AS parent_id - FROM - (SELECT @r := {$data['id']}) vars, $table_name h - WHERE @r <> 0) t1 - JOIN $table_name t2 + FROM + (SELECT @r := {$data['id']}) vars, $table_name h + WHERE @r <> 0) t1 + JOIN $table_name t2 ON FIND_IN_SET(t2.pid, t1._id) ORDER BY t2.id; "); diff --git a/app/admin/validate/v1/ProductCategoryRecommendValidate.php b/app/admin/validate/v1/ProductCategoryRecommendValidate.php new file mode 100644 index 00000000..6c0a947b --- /dev/null +++ b/app/admin/validate/v1/ProductCategoryRecommendValidate.php @@ -0,0 +1,63 @@ + ['规则1','规则2'...] + * + * @var array + */ + protected $rule = [ + 'language_id' => 'require|integer', + 'category_id' => 'require|integer', + 'title' => 'require|max:255', + 'image' => 'require|max:255', + 'desc' => 'require|max:255', + 'link' => 'max:500', + 'sort' => 'require|integer', + 'disabled' => 'in:0,1' + ]; + + /** + * 定义错误信息 + * 格式:'字段名.规则名' => '错误信息' + * + * @var array + */ + protected $message = [ + 'id.require' => 'ID不能为空', + 'id.integer' => 'ID必须是整数', + 'language_id.require' => '语言ID不能为空', + 'language_id.integer' => '语言ID必须是整数', + 'category_id.require' => '分类ID不能为空', + 'category_id.integer' => '分类ID必须是整数', + 'title.require' => '标题不能为空', + 'title.max' => '标题长度不能超过:rule个字符', + 'image.require' => '图片不能为空', + 'image.max' => '图片长度不能超过:rule个字符', + 'desc.require' => '描述不能为空', + 'desc.max' => '描述长度不能超过:rule个字符', + 'link.max' => '链接长度不能超过:rule个字符', + 'sort.require' => '排序不能为空', + 'sort.integer' => '排序必须是整数', + 'disabled.in' => '禁用状态只能是0或1', + ]; + + // 新增场景 + protected function sceneCreate() + { + return $this->remove('id', 'require|integer'); + } + + // 更新场景 + protected function sceneUpdate() + { + return $this->append('id', 'require|integer'); + } +} diff --git a/app/admin/validate/v1/ProductValidate.php b/app/admin/validate/v1/ProductValidate.php index 1a1f2d30..0431ba9c 100644 --- a/app/admin/validate/v1/ProductValidate.php +++ b/app/admin/validate/v1/ProductValidate.php @@ -5,8 +5,6 @@ namespace app\admin\validate\v1; use think\Validate; -use function PHPSTORM_META\type; - class ProductValidate extends Validate { /** diff --git a/app/admin/validate/v1/SysBannerValidate.php b/app/admin/validate/v1/SysBannerValidate.php index 9af8c9a8..584134a4 100644 --- a/app/admin/validate/v1/SysBannerValidate.php +++ b/app/admin/validate/v1/SysBannerValidate.php @@ -43,7 +43,6 @@ class SysBannerValidate extends BaseValidate 'at_platform.in' => '显示端口只能是pc或mobile', 'at_page.max' => '页面位置最多255个字符', 'unique_label.max' => '唯一标识最多64个字符', - 'unique_label.mustOmit' => '更新时不能有unique_label字段', 'name.require' => '名称不能为空', 'name.max' => '名称最多64个字符', 'desc.max' => '描述最多255个字符', @@ -61,6 +60,6 @@ class SysBannerValidate extends BaseValidate // 编辑场景 public function sceneEdit() { - return $this->remove('language_id', 'require|integer')->append('unique_label', 'mustOmit'); + return $this->remove('language_id', 'require|integer'); } } diff --git a/app/admin/validate/v1/SysMallStoreEntranceValidate.php b/app/admin/validate/v1/SysMallStoreEntranceValidate.php new file mode 100644 index 00000000..0f2927a6 --- /dev/null +++ b/app/admin/validate/v1/SysMallStoreEntranceValidate.php @@ -0,0 +1,61 @@ + ['规则1','规则2'...] + * + * @var array + */ + protected $rule = [ + 'id' => 'require|integer', + 'language_id' => 'require|integer', + 'name' => 'require|max:255', + 'image' => 'require|max:255', + 'hover_image' => 'max:255', + 'link' => 'url|max:500', + 'sort' => 'require|integer', + 'disabled' => 'in:0,1', + ]; + + /** + * 定义错误信息 + * 格式:'字段名.规则名' => '错误信息' + * + * @var array + */ + protected $message = [ + 'id.require' => 'ID不能为空', + 'id.integer' => 'ID必须是整数', + 'language_id.require' => '语言ID不能为空', + 'language_id.integer' => '语言ID必须是整数', + 'name.require' => '商城名称不能为空', + 'name.max' => '商城名称长度不能超过:rule个字符', + 'image.require' => '图片不能为空', + 'image.max' => '图片长度不能超过:rule个字符', + 'hover_image.max' => '悬浮图长度不能超过:rule个字符', + 'link.url' => '链接地址必须是有效的URL', + 'link.max' => '链接地址长度不能超过:rule个字符', + 'sort.require' => '排序不能为空', + 'sort.integer' => '排序必须是整数', + 'disabled.in' => '禁用状态只能是0或1', + ]; + + // 新增场景 + protected function sceneCreate() + { + return $this->remove('id', 'require|integer'); + } + + // 更新场景 + protected function sceneUpdate() + { + return $this->append('id', 'require|integer'); + } +} diff --git a/app/common/model/ProductCategoryRecommendBaseModel.php b/app/common/model/ProductCategoryRecommendBaseModel.php new file mode 100644 index 00000000..13dff1ac --- /dev/null +++ b/app/common/model/ProductCategoryRecommendBaseModel.php @@ -0,0 +1,33 @@ + 'int', + 'language_id' => 'int', + 'category_id' => 'int', + 'title' => 'string', + 'image' => 'string', + 'desc' => 'string', + 'link' => 'string', + 'sort' => 'int', + 'disabled' => 'int', + 'created_at' => 'datetime', + 'updated_at' => 'datetime', + 'deleted_at' => 'datetime' + ]; +} diff --git a/app/common/model/SysMallStoreEntranceBaseModel.php b/app/common/model/SysMallStoreEntranceBaseModel.php new file mode 100644 index 00000000..7e4115c2 --- /dev/null +++ b/app/common/model/SysMallStoreEntranceBaseModel.php @@ -0,0 +1,32 @@ + 'int', + 'language_id' => 'int', + 'name' => 'string', + 'image' => 'string', + 'hover_image' => 'string', + 'link' => 'string', + 'sort' => 'int', + 'disabled' => 'int', + 'created_at' => 'datetime', + 'updated_at' => 'datetime', + 'deleted_at' => 'datetime', + ]; +} diff --git a/app/common/model/SysNavigationItemBaseModel.php b/app/common/model/SysNavigationItemBaseModel.php index db3e7597..824604c6 100644 --- a/app/common/model/SysNavigationItemBaseModel.php +++ b/app/common/model/SysNavigationItemBaseModel.php @@ -21,7 +21,9 @@ class SysNavigationItemBaseModel extends BaseModel 'nav_id' => 'int', 'pid' => 'int', 'name' => 'string', + 'desc' => 'string', 'icon' => 'string', + 'image' => 'string', 'link_to' => 'string', 'link' => 'string', 'sort' => 'int', diff --git a/app/index/controller/Common.php b/app/index/controller/Common.php index 703890c8..f5bab337 100644 --- a/app/index/controller/Common.php +++ b/app/index/controller/Common.php @@ -8,6 +8,7 @@ use app\index\model\LanguageModel; use app\index\model\ProductCategoryModel; use app\index\model\ProductModel; use app\index\model\SysConfigModel; +use app\index\model\SysMallStoreEntranceModel; use app\index\model\SysNavigationItemModel; use think\facade\Lang; use think\facade\View; @@ -38,7 +39,7 @@ abstract class Common extends BaseController } // 获取产品分类 - $categorys = $this->getProductCategory($this->lang_id); + $categorys = $this->getProductCategory($this->lang_id, true); // 输出产品分类 View::assign('header_categorys', $categorys); @@ -47,6 +48,9 @@ abstract class Common extends BaseController // 输出热销产品 View::assign('header_hot_products', $hot_products); + // 获取商品购买入口 + View::assign("header_mall_entrance", $this->getMallStoreEntrance($this->lang_id)); + // 输出顶部导航 View::assign('header_navigation', $this->getNavigation('NAV_67f3701f3e831', $this->lang_id)); @@ -78,7 +82,7 @@ abstract class Common extends BaseController } // 获取产品分类 - protected function getProductCategory($language = 1) + protected function getProductCategory($language = 1, $with_recommends = false) { $categorys = ProductCategoryModel::field([ 'id', @@ -87,15 +91,48 @@ abstract class Common extends BaseController 'icon', 'level' ]) + ->when($with_recommends, function($query) { + $query->with(['recommends' => function($query) { + $query->field(['id', 'category_id', 'title', 'image', 'desc', 'link'])->disabled(false) + ->order(['sort' => 'asc', 'id' => 'desc']); + }]); + }) ->language($language) ->displayed() ->order(['sort' => 'asc', 'id' => 'desc']) - ->select(); + ->select() + ->hidden(["recommends.category_id"]); if ($categorys->isEmpty()) { return []; } - return array_to_tree($categorys->toArray(), 0, 'pid', 1, false); + return $this->toTreeAndChunk($categorys->toArray(), 0, 1); + } + private function toTreeAndChunk(array $categorys, int $pid, int|bool $level): array + { + $ret = []; + foreach ($categorys as $item) { + if ($item['pid'] == $pid) { + $lv = $level; + if ($level !== false) { + $item['level'] = $level; + $lv = $level + 1; + } + $children = $this->toTreeAndChunk($categorys, $item['id'], $lv); + if (!empty($children)) { + if ($lv == 1) { + $item['children'] = array_chunk($children, 2); + } else if ($lv == 2) { + $item['children'] = array_chunk($children, 3); + } else { + $item['children'] = $children; + } + } + $ret[] = $item; + } + } + + return $ret; } // 获取顶部导航 @@ -164,6 +201,26 @@ abstract class Common extends BaseController return $languages; } + // 获取商品购买入口 + private function getMallStoreEntrance($language = 1) + { + return SysMallStoreEntranceModel::field([ + 'id', + 'name', + 'image', + 'hover_image', + 'link' + ]) + ->language($language) + ->enabled() + ->order(['sort' => 'asc', 'id' => 'desc']) + ->select() + ?->each(function($item) { + $item->image = thumb($item->image); + return $item; + }); + } + // 获取系统联系方式配置 protected function getSysConfig($language, $group = []) { diff --git a/app/index/controller/Product.php b/app/index/controller/Product.php index fd93d7c3..0d86ca6d 100644 --- a/app/index/controller/Product.php +++ b/app/index/controller/Product.php @@ -149,7 +149,7 @@ class Product extends Common } } View::assign('list', $list); - + return View::fetch('category'); } // 产品分类 - 查看子类 @@ -267,6 +267,59 @@ class Product extends Common return View::fetch('subcategory'); } + + /** + * 单纯分类页 + */ + public function classify() + { + $pid = request()->param('id/d', 0); + + // 获取当前选中的父分类 + $parent = ProductCategoryModel::field(['id', 'name'])->find($pid); + View::assign('parent', $parent); + + // 获取分类及产品信息 + $categorys = ProductCategoryModel::field(['id', 'pid', 'name', 'path', 'level']) + ->language($this->lang_id) + ->displayed(true) + ->children($pid) + ->order(['pid' => 'asc', 'sort' => 'asc', 'id' => 'desc']) + ->select() + ->toArray(); + + // 组装第三级分类所属产品数据 + $lv3_id_arr = array_column(array_filter($categorys, fn($item)=> $item['level'] === 3), 'id'); + $products = ProductModel::field([ + 'id', + 'category_id', + 'name', + 'short_name', + 'cover_image', + 'spu' + ]) + ->byCategory($lv3_id_arr) + ->language($this->lang_id) + ->enabled(true) + ->onSale(true) + ->onShelves(true) + ->select() + ->toArray(); + $product_groups = []; + foreach ($products as $product) { + $product_groups[$product['category_id']][] = $product; + } + foreach ($categorys as $key => $category) { + if ($category['level'] < 3) continue; + $categorys[$key]['products'] = $product_groups[$category['id']] ?? []; + } + + $tree = array_to_tree($categorys, $pid); + View::assign('categorys', $tree); + + return View::fetch('classify'); + } + /** * 产品搜索 */ @@ -329,7 +382,7 @@ class Product extends Common ->bypk($param['id']) ->find(); View::assign('product', $product); - + $product_categorys = []; $product_params = []; $product_skus = []; @@ -352,7 +405,7 @@ class Product extends Common ->order(['id' => 'asc']) ->select() ->toArray(); - + // 获取产品参数信息 $product_params = ProductParamsModel::field(['id', 'name', 'value']) ->byProductId($product['id']) @@ -375,7 +428,7 @@ class Product extends Common $attrs = ProductAttrModel::bypks(array_unique(Arr::pluck($sku_attrs, 'attr_id')))->column(['attr_name'], 'id'); foreach ($sku_attrs as $v) { if (empty($v['attr_value'])) continue; - + $v['attr_name'] = $attrs[$v['attr_id']]?? ''; // 按属性分组 $product_sku_attrs[$v['attr_id']]['attr_id'] = $v['attr_id']; @@ -422,8 +475,8 @@ class Product extends Common // 获取询盘可选国家 $config = $this->basic_config['optional_country_for_product_inquiry']; - View::assign('country_list', explode(',', preg_replace('/\r?\n/', ',', $config['value']?? ''))); - + View::assign('country_list', explode(',', preg_replace('/\r?\n/', ',', $config['value']?? ''))); + return View::fetch('detail'); } @@ -535,7 +588,7 @@ class Product extends Common if ($val['level'] != 2) { continue; } - + foreach ($pro_map as $k => $pro) { if (in_array($val['id'], explode(',', strval($k)))) { $newpros[] = [ @@ -549,7 +602,7 @@ class Product extends Common } } View::assign('newpros', $newpros); - + return View::fetch('newpro'); } } diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php index 4e0cde9b..977199f5 100644 --- a/app/index/lang/en-us/mobile.php +++ b/app/index/lang/en-us/mobile.php @@ -6,6 +6,9 @@ return [ '产品列表' => 'Products', '搜索' => 'Search', '搜索历史' => 'Search History', + '请输入搜索关键词' => 'Please enter a search keyword', + '搜索记录' => 'Search History', + '清空' => 'Clear', '请择地区' => 'SELECT A REGION', '产品' => 'Product', '联系方式' => 'Contact', diff --git a/app/index/lang/en-us/pc.php b/app/index/lang/en-us/pc.php index 4aa02b3f..73452f7a 100644 --- a/app/index/lang/en-us/pc.php +++ b/app/index/lang/en-us/pc.php @@ -5,10 +5,17 @@ return [ '产品列表' => 'Products', '店铺' => 'Store', '搜索记录' => 'Search History', - '热销产品' => 'Popular Products', '产品' => 'Product', '联系我们' => 'Contact', + // 新导航栏 - 2023-03-31 + '搜索' => 'Search', + '搜索产品、分类...' => 'Search products and categories...', + '最近搜索' => 'Recent Searches', + '清空' => 'Clear', + '热销产品' => 'Popular Products', + '购买' => 'Buy', + // 返回文本 '提交成功' => 'success', '提交失败' => 'fail', diff --git a/app/index/model/ProductCategoryModel.php b/app/index/model/ProductCategoryModel.php index a6ea7e5e..7846820a 100644 --- a/app/index/model/ProductCategoryModel.php +++ b/app/index/model/ProductCategoryModel.php @@ -17,6 +17,12 @@ class ProductCategoryModel extends ProductCategoryBaseModel // 软件删除时间字段 protected $deleteTime = 'deleted_at'; + // 关联产品推荐 + public function recommends() + { + return $this->hasMany(ProductCategoryRecommendModel::class, 'category_id', 'id'); + } + // 所属语言范围查询 public function scopeLanguage($query, $language) { diff --git a/app/index/model/ProductCategoryRecommendModel.php b/app/index/model/ProductCategoryRecommendModel.php new file mode 100644 index 00000000..b8267082 --- /dev/null +++ b/app/index/model/ProductCategoryRecommendModel.php @@ -0,0 +1,30 @@ +where($this->getTable() . '.language_id', '=', $language); + } + + public function scopeDisabled($query, $disabled = true) + { + $query->where($this->getTable() . '.disabled', '=', (int)$disabled); + } +} diff --git a/app/index/model/SysMallStoreEntranceModel.php b/app/index/model/SysMallStoreEntranceModel.php new file mode 100644 index 00000000..df07e042 --- /dev/null +++ b/app/index/model/SysMallStoreEntranceModel.php @@ -0,0 +1,43 @@ +belongsTo(\app\index\model\LanguageModel::class, 'language_id', 'id'); + } + + // 所属语言范围查询 + public function scopeLanguage($query, $language) + { + $query->where($this->getTable() . '.language_id', '=', $language); + } + + // 查询启用状态 + public function scopeEnabled($query) + { + $query->where('disabled', '=', 0); + } + + // 查询禁用状态 + public function scopeDisabled($query) + { + $query->where('disabled', '=', 1); + } +} diff --git a/app/index/route/route.php b/app/index/route/route.php index 68203058..af41b7c0 100644 --- a/app/index/route/route.php +++ b/app/index/route/route.php @@ -18,6 +18,8 @@ Route::group('product', function () { Route::get('category/:id', 'Product/category'); // 产品分类 - 查看子类 Route::get('subcategory/:id', 'Product/subcategory'); + // 单纯分类页 + Route::get('classify/:id', 'Product/classify'); // 产品详情页 Route::get('detail/:id', 'Product/detail'); // 产品询盘 diff --git a/app/index/view/mobile/index/index.html b/app/index/view/mobile/index/index.html index 4260f198..b704c5e9 100644 --- a/app/index/view/mobile/index/index.html +++ b/app/index/view/mobile/index/index.html @@ -9,7 +9,7 @@
{notempty name="focus_images"} -
+
{volist name="focus_images" id="fi"}
diff --git a/app/index/view/mobile/product/classify.html b/app/index/view/mobile/product/classify.html new file mode 100644 index 00000000..6bf3774b --- /dev/null +++ b/app/index/view/mobile/product/classify.html @@ -0,0 +1,225 @@ +{extend name="public/base" /} + +{block name="style"} + + + + + + + +{/block} + +{block name="main"} + +
+
+
+ +
+
{$parent.name|default=''}
+
+
+
+ + {if condition="!empty($categorys)"} + + + +
+ {volist name="categorys" id="category"} +
+ {if condition="!empty($category.children)"} + {volist name="$category.children" id="child"} +
+
+
{$child.name}
+ + + +
+ {if condition="!empty($child.products)"} +
+ {volist name="$child.products" id="pro"} + +
+ +
+
+
{$pro.name}
+
{$pro.spu}
+
+
+ {/volist} +
+ {/if} +
+ {/volist} + {/if} +
+ {/volist} +
+ {/if} +
+{/block} + +{block name="script"} + + +{/block} \ No newline at end of file diff --git a/app/index/view/mobile/public/header.html b/app/index/view/mobile/public/header.html index 24cbc285..1071bb48 100644 --- a/app/index/view/mobile/public/header.html +++ b/app/index/view/mobile/public/header.html @@ -1,161 +1,662 @@ -
-
- -
-
- - - -
+ +
+
+
+ + + + + +
+
+ + +
- -
- -
-
-
{:lang_i18n('产品列表')}
- {notempty name="header_categorys"} - {volist name="header_categorys" id="ca"} - - {/volist} - {/notempty} + +
- - return history_keywords; - } - \ No newline at end of file diff --git a/app/index/view/mobile/topic_laptop/index.html b/app/index/view/mobile/topic_laptop/index.html index dccd5729..4afe3077 100644 --- a/app/index/view/mobile/topic_laptop/index.html +++ b/app/index/view/mobile/topic_laptop/index.html @@ -48,7 +48,7 @@ {block name="main"} {notempty name="data.top_focus_images"} -
+
{volist name="data.top_focus_images" id="tfi"}
diff --git a/app/index/view/mobile/topic_power_prodline/index.html b/app/index/view/mobile/topic_power_prodline/index.html index 1ba6c5be..0dfafd95 100644 --- a/app/index/view/mobile/topic_power_prodline/index.html +++ b/app/index/view/mobile/topic_power_prodline/index.html @@ -31,15 +31,13 @@ {/block} -{block name="header"} - -{/block} + {block name="main"} - +
{notempty name="data.focus_image"} diff --git a/app/index/view/pc/index/index.html b/app/index/view/pc/index/index.html index b0bab1e6..47f28600 100644 --- a/app/index/view/pc/index/index.html +++ b/app/index/view/pc/index/index.html @@ -9,7 +9,7 @@
{notempty name="focus_images"} -
+
{volist name="focus_images" id="focus"}
diff --git a/app/index/view/pc/product/category.html b/app/index/view/pc/product/category.html index 024cd6d8..adb3e21a 100644 --- a/app/index/view/pc/product/category.html +++ b/app/index/view/pc/product/category.html @@ -6,7 +6,7 @@
{notempty name="focus_image"} -
+
{volist name="focus_image" id="fi"} diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html index b29fb394..d20f30fb 100644 --- a/app/index/view/pc/public/header.html +++ b/app/index/view/pc/public/header.html @@ -1,287 +1,889 @@ -
- + +
+ +
+ +
+
+ + orico + +
+
+ {if condition="!empty($header_categorys)"} +
+
{:lang_i18n('产品列表')}
+
+
+ {volist name="header_categorys" id="vo" key="idx"} + {$vo.name} + {/volist} +
+ {volist name="header_categorys" id="vo" key="idx"} +
+
+ {if condition="!empty($vo.children)"} + {volist name="vo.children" id="vc"} +
+ {volist name="vc" id="vcc"} +
+ +
    + {if condition="!empty($vcc.children)"} + {volist name="vcc.children" id="vccc" length="5"} +
  • + + {$vccc.name} + +
  • + {/volist} + {/if} +
+
+ {/volist} +
+ {/volist} + {/if} +
+
+ {if condition="!empty($vo.recommends)"} + {volist name="vo.recommends" id="recommend"} + + {/volist} + {/if} +
+
+ {/volist} +
+
+ {/if} + {if condition="!empty($header_navigation)"} + {volist name="header_navigation" id="nav"} +
+ {if condition="empty($nav.children)"} + + {else /} +
{$nav.name}
+
+
+ {volist name="nav.children" id="child"} + + {/volist} +
+
+ {/if} +
+ {/volist} + {/if} +
- -
-
- × - - -
-

{:lang_i18n('搜索记录')}

-
    -
    -
    -

    {:lang_i18n('热销产品')}

    -
    - {volist name="header_hot_products" id="vo"} -
    - -
    {$vo.name}
    -
    {$vo.short_name}
    -
    - {/volist} -
    -
    -
    -
    -
    - - diff --git a/app/index/view/pc/topic_laptop/index.html b/app/index/view/pc/topic_laptop/index.html index 07b27ada..cd5f3e8f 100644 --- a/app/index/view/pc/topic_laptop/index.html +++ b/app/index/view/pc/topic_laptop/index.html @@ -52,7 +52,7 @@ {/block} {block name="main"} {notempty name="data.top_focus_images"} -
    +
    {volist name="data.top_focus_images" id="tfi"}
    diff --git a/app/index/view/pc/topic_power_prodline/index.html b/app/index/view/pc/topic_power_prodline/index.html index 477879ae..77f53171 100644 --- a/app/index/view/pc/topic_power_prodline/index.html +++ b/app/index/view/pc/topic_power_prodline/index.html @@ -12,7 +12,7 @@ {/block} {block name="main"} -
    +
    {notempty name="data.focus_image"}
    {volist name="data.focus_image" id="fo"} diff --git a/database/migrations/20241230093811_create_sys_navigation_item.php b/database/migrations/20241230093811_create_sys_navigation_item.php index 81c193f3..00a8124c 100644 --- a/database/migrations/20241230093811_create_sys_navigation_item.php +++ b/database/migrations/20241230093811_create_sys_navigation_item.php @@ -31,7 +31,9 @@ class CreateSysNavigationItem extends Migrator $table->addColumn('nav_id', 'string', ['limit' => 64, 'null' => false, 'comment' => '所属导航ID']) ->addColumn('pid', 'integer', ['null' => false, 'default' => 0, 'comment' => '父级ID']) ->addColumn('name', 'string', ['limit' => 64, 'null' => false, 'comment' => '名称']) + ->addColumn('desc', 'string', ['limit' => 255, 'null' => true, 'default' => null, 'comment' => '描述']) ->addColumn('icon', 'string', ['limit' => 64, 'null' => true, 'default' => null, 'comment' => '图标']) + ->addColumn('image', 'string', ['limit' => 255, 'null' => true, 'default' => null, 'comment' => '图片']) ->addColumn('link_to', 'string', ['limit' => 64, 'null' => true, 'default' => null, 'comment' => '链接到(类型): article:文章, article_category:文章分类, product:产品, product_category:产品分类, custom:自定义链接']) ->addColumn('link', 'string', ['limit' => 255, 'null' => true, 'default' => null, 'comment' => '链接']) ->addColumn('sort', 'integer', ['limit' => 11, 'null' => false, 'default' => 0, 'comment' => '排序']) diff --git a/database/migrations/20260326073640_create_product_category_recommend.php b/database/migrations/20260326073640_create_product_category_recommend.php new file mode 100644 index 00000000..a93bb986 --- /dev/null +++ b/database/migrations/20260326073640_create_product_category_recommend.php @@ -0,0 +1,50 @@ +table('product_category_recommend', [ + 'engine' => 'MyISAM', + 'collation' => 'utf8mb4_general_ci', + 'comment' => '产品分类推荐表' + ]); + + $table->addColumn('language_id', 'integer', ['signed' => false, 'null' => false, 'comment' => '语言ID']) + ->addColumn('category_id', 'integer', ['signed' => false, 'null' => false, 'comment' => '分类ID']) + ->addColumn('title', 'string', ['limit' => 255, 'comment' => '标题']) + ->addColumn('image', 'string', ['limit' => 255, 'default' => '', 'comment' => '图片']) + ->addColumn('desc', 'string', ['limit' => 255, 'comment' => '描述']) + ->addColumn('link', 'string', ['limit' => 500, 'default' => '', 'comment' => '外链地址']) + ->addColumn('sort', 'integer', ['default' => 0, 'comment' => '排序']) + ->addColumn('disabled', 'boolean', ['default' => 0, 'comment' => '是否禁用 0:启用 1:禁用']) + ->addColumn('created_at', 'timestamp', ["null" => false,'default' => 'CURRENT_TIMESTAMP', 'comment' => '创建时间']) + ->addColumn('updated_at', 'timestamp', ["null" => false,'default' => 'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP', 'comment' => '更新时间']) + ->addColumn('deleted_at', 'timestamp', ['null' => true, 'comment' => '删除时间']) + ->create(); + } +} diff --git a/database/migrations/20260328021117_sys_mall_store_entrance.php b/database/migrations/20260328021117_sys_mall_store_entrance.php new file mode 100644 index 00000000..4180738c --- /dev/null +++ b/database/migrations/20260328021117_sys_mall_store_entrance.php @@ -0,0 +1,50 @@ +table('sys_mall_store_entrance', [ + 'engine' => 'MyISAM', + 'collation' => 'utf8mb4_general_ci', + 'comment' => '系统商城店铺入口表' + ]); + + $table->addColumn('language_id', 'integer', ['signed' => false, 'null' => false, 'comment' => '语言ID']) + ->addColumn('name', 'string', ['limit' => 255, 'null' => false, 'comment' => '商城名称']) + ->addColumn('image', 'string', ['limit' => 255, 'default' => '', 'comment' => '图片']) + ->addColumn('hover_image', 'string', ['limit' => 255, 'default' => '', 'comment' => '悬浮图']) + ->addColumn('link', 'string', ['limit' => 500, 'default' => '', 'comment' => '链接地址']) + ->addColumn('sort', 'integer', ['default' => 0, 'comment' => '排序']) + ->addColumn('disabled', 'boolean', ['default' => 0, 'comment' => '是否禁用 0:启用 1:禁用']) + ->addColumn('created_at', 'timestamp', ['null' => false, 'default' => 'CURRENT_TIMESTAMP', 'comment' => '创建时间']) + ->addColumn('updated_at', 'timestamp', ['null' => false, 'default' => 'CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP', 'comment' => '更新时间']) + ->addColumn('deleted_at', 'timestamp', ['null' => true, 'comment' => '删除时间']) + ->addIndex(['language_id'], ['name' => 'idx_language_id']) + ->create(); + } +} diff --git a/public/static/index/mobile/css/aboutus_introduction.css b/public/static/index/mobile/css/aboutus_introduction.css index 79a70684..588ed44e 100755 --- a/public/static/index/mobile/css/aboutus_introduction.css +++ b/public/static/index/mobile/css/aboutus_introduction.css @@ -6,7 +6,7 @@ align-items: center; position: relative; overflow: auto; - padding-top: 50px; + padding-top: 46px; } .iotb_bgw { diff --git a/public/static/index/mobile/css/category.css b/public/static/index/mobile/css/category.css new file mode 100644 index 00000000..6ae4979e --- /dev/null +++ b/public/static/index/mobile/css/category.css @@ -0,0 +1,246 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + font-size: inherit !important; + /* font-size:100% !important; */ +} + +body { + background: #f5f5f5; + font-size: inherit !important; + /* font-size:100% !important; */ + height: 100vh; + overflow: hidden; + max-width: 100vw !important; + +} + +.top-box { + width: 100%; + box-sizing: border-box; + padding: 20px 22px; + background: #fff; + margin-top: 46px; + /* border-bottom: 1px solid #f0f0f0; */ + box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2); +} + +.top-bar { + display: flex; + align-items: center; + height: 0.82rem; + background: #F1F2F5; + justify-content: space-between; + border-radius: 0.2rem; + padding: 0 16px; +} + +.back { + width: 0.28rem; + height: 0.28rem; + color: #333; + cursor: pointer; + display: flex; + align-items: center; +} +.back img { + width: 0.28rem; + height: 0.28rem; +} +.title { + font-size: 0.32rem !important; + font-weight: 500; +} + +/* 主体布局 */ +.main { + display: flex; + height: calc(100% - 46px); + margin-top:0.018rem; +} + +/* 左侧菜单 #FAFAFA;*/ +.sidebar { + width: 114px; + background:#fafafa; + overflow-y: auto; + box-sizing: border-box; +} + +.sidebar li { + list-style: none; + padding: 24px 16px; + text-align: center; + font-size: 0.28rem !important; + color:#686A70; /* #686A70;*/ + cursor: pointer; + background:#fff; + /* 分别控制上下圆角的过渡 */ + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transition: border-radius 1s cubic-bezier(0.4, 0, 0.2, 1); +} +.sidebar li.active { + color: #004BFA; + background: #fafafa; +} + + +.sidebar li.active-prev { + border-bottom-right-radius: 0.17rem !important; +} + +.sidebar li.active-next { + border-top-right-radius: 0.17rem !important; +} +/* 右侧内容 */ +.right-content { + flex: 1; + overflow-y: auto; + padding-left: 12px; + background: #fafafa; + /* padding-bottom: 100px; */ + +} + +.right-content { + flex: 1; + overflow-y: auto; + padding-left: 12px; + background: #fafafa; + position: relative; +} + +/* 在底部添加占位元素 */ +.right-content::after { + content: ''; + display: block; + height: 80px; /* 根据需要调整 */ + width: 100%; + flex-shrink: 0; +} + +/* 最后一个元素底部留白 */ +.sec-box:last-child { + margin-bottom: 80px; +} + + + +.sec-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 24px; + padding-right: 17px; + padding-bottom: 12px; + +} + +.sec-title { + font-size: 0.28rem !important; + color: #686A70; + font-weight: 500 +} + +.sec-arrow { + width: 0.28rem; + height: 0.28rem; + display: flex; + align-items: center; + justify-content: center; + color: #666; + font-size: 20px; + cursor: pointer; +} +.sec-arrow img { + width: 0.28rem; + height: 0.28rem; +} +/* 横向滚动容器 */ +.scroll-box { + display: flex; + gap: 10px; + overflow-x: auto; + scroll-behavior: smooth; + + scrollbar-width: none; +} + +.scroll-box::-webkit-scrollbar { + display: none +} + +.right-card { + flex-shrink: 0; + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, .05); + display: flex; + flex-direction: column; + align-items: center; + padding-top: 8px; +} +.card { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 12px; + padding-left: 19px; + padding-right: 19px; + +} +.card-img { + width: 1.52rem; + background: #f1f1f1; + display: flex; + align-items: center; + justify-content: center; + color: #999; + margin-top: 8px; +} + +.card-img img { + width: 100%; + +} + +.card-info { + + text-align: center; + padding-top: 8px; + padding-bottom: 10px; +} + +.card-name { + font-size: 0.2rem !important; + width: 1.52rem; + height: auto; + color: #1D1D1F; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.card-model { + font-size: 0.16rem !important; + color: #686A70; + margin-top: 4px +} + +/* 内容区块默认隐藏 */ +.tab-pane { + display: none +} + +/* 激活时显示 */ +.tab-pane.active { + display: block; + +} diff --git a/public/static/index/mobile/css/contactus_bulkbuy.css b/public/static/index/mobile/css/contactus_bulkbuy.css index 66f299c5..c754a733 100755 --- a/public/static/index/mobile/css/contactus_bulkbuy.css +++ b/public/static/index/mobile/css/contactus_bulkbuy.css @@ -156,7 +156,7 @@ align-items: center; position: relative; overflow: auto; - padding-top: 50px; + padding-top: 46px; } .iotb_bgw { diff --git a/public/static/index/mobile/css/contactus_distributor.css b/public/static/index/mobile/css/contactus_distributor.css index d52a8c5d..2cc4d9c9 100755 --- a/public/static/index/mobile/css/contactus_distributor.css +++ b/public/static/index/mobile/css/contactus_distributor.css @@ -156,7 +156,7 @@ align-items: center; position: relative; overflow: auto; - padding-top: 50px; + padding-top: 46px; } .iotb_bgw { diff --git a/public/static/index/mobile/css/index.css b/public/static/index/mobile/css/index.css index 78aacb22..f09568e7 100755 --- a/public/static/index/mobile/css/index.css +++ b/public/static/index/mobile/css/index.css @@ -13,7 +13,7 @@ overflow-x: hidden; } .oricoEGapp .oricoEGapp-index .oidx-banner { - margin-top: 3.5rem; + margin-top: 46px; z-index: 9; } .oricoEGapp .oricoEGapp-index .oidx-banner .swiper-container { diff --git a/public/static/index/mobile/css/new_header.css b/public/static/index/mobile/css/new_header.css new file mode 100644 index 00000000..229adb66 --- /dev/null +++ b/public/static/index/mobile/css/new_header.css @@ -0,0 +1,457 @@ + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + + } + + a { + text-decoration: none; + } + + .mobile-header-box { + display: flex; + justify-content: space-between; + align-items: center; + height: 46px; + padding: 0 17px; + background: #fff; + /* position: relative; */ + position: fixed; + top:0; + left:0; + z-index: 100; + width: 100%; + } + + .mobile-header-left { + display: flex; + align-items: center; + } + + .nav-img, + .nav-search, + .nav-lang, + .nav-img1, + .nav-card { + width: 18px; + height: 18px; + cursor: pointer; + } + + .nav-log { + width: 90px; + height: 22px; + margin-left: 14px; + cursor: pointer; + } + + .nav-lang { + margin: 0 18px; + cursor: pointer; + } + + /* 下拉菜单 */ + .nav-dropdown-menu { + width: 100%; + background: #fff; + border-top: 1px solid #eee; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: none; + position: fixed; + top: 46px; + left: 0; + z-index: 99; + } + + .nav-dropdown-menu.show { + display: block; + } + + /* 所有菜单项统一用 div */ + .menu-item { + margin: 0 22px; + font-size: 15px !important; + color: #333; + border-bottom: 1px solid #f5f5f5; + cursor: pointer; + position: relative; + } + + .menu-item-box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 0; + } + + .menu-item-img { + width: 14px; + height: 14px; + display: block; + } + + /* 有子菜单才显示箭头 */ + .has-child .menu-item-img { + display: block; + } + + /* 无子菜单隐藏箭头 */ + .no-child .menu-item-img { + display: none; + } + + /* 箭头旋转 */ + .has-child.open .menu-item-img { + transform: rotate(180deg); + transition: transform 0.3s ease; + } + + .nav-img1 { + display: none; + } + + /* .sub-menu { + display: none; + } */ + .sub-menu { + display: none; + /* height: 100vh; */ + /* overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; */ + } + + /* .sub-menu-overflow { + max-height: calc(100vh - 180px); + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } */ + + + + + + .sub-menu.show { + display: block; + } + + .sub-item { + padding: 0 16px; + font-size: 14px !important; + margin: 16px 0; + } + + .sub-item:nth-child(1) { + margin-top: 0; + } + + .sub-item a { + color: #686A70; + display: block; + } + + .sub-item:last-child { + padding-bottom: 0; + } + + .sub-item-card-img { + width: 100%; + height: auto; + aspect-ratio: 358 / 192; + } + + .sub-item-card-title { + font-size: 16px !important; + color: #1D1D1F; + margin-top: 10px; + } + + .sub-item-card-name { + font-size: 14px !important; + color: #686A70; + margin-top: 4px; + margin-bottom: 24px; + } + + .no-padding { + padding: 0; + } + + /* ====================== 弹窗样式(不遮盖头部) ====================== */ + .modal-overlay { + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: calc(100% - 46px); + background: rgba(0, 0, 0, 0.5); + display: none; + justify-content: center; + align-items: flex-start; + z-index: 98; + } + + .modal-overlay.show { + display: flex; + } + + .modal-content { + width: 90%; + background: #fff; + border-radius: 12px; + padding: 66px 24px 8px 24px; + margin-top: 20px; + position: relative; + text-align: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .modal-close { + position: absolute; + top: 24px; + right: 24px; + width: 18px; + height: 18px; + cursor: pointer; + } + + /* 写法2:使用 flex 布局实现一行2个 */ + .modal-items-list { + display: flex; + flex-wrap: wrap; + + + justify-content: space-between; + } + + .modal-item { + width: calc(50% - 16px); + + font-size: 16px !important; + color: #1D1D1F; + cursor: pointer; + text-align: center; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 32px; + } + + .modal-item-img { + width: clamp(48px, 17vw, 128px); + height: auto; + aspect-ratio: 64 / 64; + object-fit: contain; + display: block; + + } + + .modal-item-title { + margin-top: 10px; + font-size: 16px !important; + color: #1D1D1F; + } + + .modal-item:hover { + /* background-color: #f5f5f5; */ + border-radius: 8px; + } + + /* 语言弹窗样式 - 列表布局 */ + .lang-modal-content { + width: 90%; + background: #fff; + border-radius: 12px; + padding: 68px 24px; + margin-top: 20px; + position: relative; + text-align: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .lang-items-list { + display: flex; + flex-direction: column; + } + + .lang-item { + font-size: 16px !important; + color: #1D1D1F; + cursor: pointer; + display: flex; + align-items: center; + } + + .lang-item img { + width: 29px; + height: 20px; + margin-right: 16px; + display: block; + } + + .lang-item:last-child { + border-bottom: none; + margin-top: 24px; + } + + .lang-item:hover { + background-color: #f5f5f5; + border-radius: 8px; + } + + /* 搜索弹窗样式 */ + .search-modal-content { + width: 90%; + background: #fff; + border-radius: 12px; + padding: 68px 24px; + margin-top: 20px; + position: relative; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .search-input-box { + display: flex; + align-items: center; + border: 1px solid #e0e0e0; + border-radius: 30px; + padding-left: 24px; + /* padding-right: 13px; */ + background: #f8f8f8; + } + + .search-input-box input { + + border: none; + outline: none; + background: transparent; + font-size: 14px !important; + padding: 10px 0; + flex:1; + } + + .search-input-box input::placeholder { + color: #aaa; + } + + .search-input-box .search-clear-btn { + width: 14px; + height: 14px; + cursor: pointer; + opacity: 0.6; + + } + .search-clear-box { + padding-right: 10px; + padding-left: 10px; + } + /* .search-clear-btn { + border-right: 1px solid #eee; + } */ + .search-input-box .search-clear-btn:hover { + opacity: 1; + } + + .search-input-box .search-submit-icon { + width: 18px; + height: 18px; + cursor: pointer; + box-sizing: border-box; + } + .search-submit-box { + border-left: 1px solid #d9d9d9; + padding-left:10px; + padding-right: 13px; + max-height: 18px; + } + .search-history { + margin-top: 20px; + } + + .search-history-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + } + + .search-history-title { + font-size: 14px !important; + color: #888; + } + + .search-history-clear { + font-size: 12px !important; + color: #999; + cursor: pointer; + } + + .search-history-clear:hover { + color: #666; + } + + .search-history-list { + display: flex; + flex-direction: column; + } + + .search-history-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid #f0f0f0; + cursor: pointer; + } + + .search-history-item:hover { + background-color: #f5f5f5; + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-left: -8px; + margin-right: -8px; + } + + .search-history-item span { + font-size: 14px !important; + color: #333; + } + + .search-history-item .delete-icon { + width: 14px; + height: 14px; + cursor: pointer; + opacity: 0.5; + } + + .search-history-item .delete-icon:hover { + opacity: 1; + } + + .empty-history { + text-align: center; + padding: 40px 0; + font-size: 14px !important; + color: #aaa; + } + .mobile-header-right { + display: flex; + align-items: center; + } +/* 产品列表的子菜单不需要滚动 */ +.menu-item:first-child .sub-menu { + max-height: none !important; + overflow-y: visible !important; +} + +/* 其他导航的子菜单使用JS动态设置高度 +.has-child:not(:first-child) .sub-menu { + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} */ \ No newline at end of file diff --git a/public/static/index/mobile/css/product_newpro.css b/public/static/index/mobile/css/product_newpro.css index 793eec60..fa0a8f48 100755 --- a/public/static/index/mobile/css/product_newpro.css +++ b/public/static/index/mobile/css/product_newpro.css @@ -2,7 +2,7 @@ position: relative; display: flex; flex-direction: column; - margin-top: 3.4rem; + margin-top:46px; } .oricoEGapp-newarrival .ona-topimg { max-width: 100%; diff --git a/public/static/index/mobile/css/topic_power_prodline/swiper.css b/public/static/index/mobile/css/topic_power_prodline/swiper.css index 31b85405..73c56255 100644 --- a/public/static/index/mobile/css/topic_power_prodline/swiper.css +++ b/public/static/index/mobile/css/topic_power_prodline/swiper.css @@ -9,7 +9,7 @@ /* max-height: 900px; */ min-height: 300px; position: relative; - margin-top:60px; + margin-top:46px; } /* 轮播项 - 填充容器高度 */ diff --git a/public/static/index/mobile/images/header/b.png b/public/static/index/mobile/images/header/b.png new file mode 100644 index 00000000..11413b32 Binary files /dev/null and b/public/static/index/mobile/images/header/b.png differ diff --git a/public/static/index/mobile/images/header/card.png b/public/static/index/mobile/images/header/card.png new file mode 100644 index 00000000..6742abd2 Binary files /dev/null and b/public/static/index/mobile/images/header/card.png differ diff --git a/public/static/index/mobile/images/header/lang.png b/public/static/index/mobile/images/header/lang.png new file mode 100644 index 00000000..2bb08fb2 Binary files /dev/null and b/public/static/index/mobile/images/header/lang.png differ diff --git a/public/static/index/mobile/images/header/left.png b/public/static/index/mobile/images/header/left.png new file mode 100644 index 00000000..367d0f46 Binary files /dev/null and b/public/static/index/mobile/images/header/left.png differ diff --git a/public/static/index/mobile/images/header/nav.png b/public/static/index/mobile/images/header/nav.png new file mode 100644 index 00000000..d1b450f9 Binary files /dev/null and b/public/static/index/mobile/images/header/nav.png differ diff --git a/public/static/index/mobile/images/header/s.png b/public/static/index/mobile/images/header/s.png new file mode 100644 index 00000000..6226f23a Binary files /dev/null and b/public/static/index/mobile/images/header/s.png differ diff --git a/public/static/index/mobile/images/header/search.png b/public/static/index/mobile/images/header/search.png new file mode 100644 index 00000000..cd8a985d Binary files /dev/null and b/public/static/index/mobile/images/header/search.png differ diff --git a/public/static/index/mobile/images/header/u.png b/public/static/index/mobile/images/header/u.png new file mode 100644 index 00000000..907f1189 Binary files /dev/null and b/public/static/index/mobile/images/header/u.png differ diff --git a/public/static/index/mobile/images/header/x.png b/public/static/index/mobile/images/header/x.png new file mode 100644 index 00000000..81152aeb Binary files /dev/null and b/public/static/index/mobile/images/header/x.png differ diff --git a/public/static/index/mobile/images/header/z.png b/public/static/index/mobile/images/header/z.png new file mode 100644 index 00000000..a546c590 Binary files /dev/null and b/public/static/index/mobile/images/header/z.png differ diff --git a/public/static/index/mobile/images/left.png b/public/static/index/mobile/images/left.png new file mode 100644 index 00000000..367d0f46 Binary files /dev/null and b/public/static/index/mobile/images/left.png differ diff --git a/public/static/index/mobile/images/y.png b/public/static/index/mobile/images/y.png new file mode 100644 index 00000000..dc78fd07 Binary files /dev/null and b/public/static/index/mobile/images/y.png differ diff --git a/public/static/index/pc/css/header.css b/public/static/index/pc/css/header.css new file mode 100644 index 00000000..3e5de00f --- /dev/null +++ b/public/static/index/pc/css/header.css @@ -0,0 +1,1033 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: '微软雅黑', sans-serif; +} + +body { + overflow-x: hidden; + +} + +a { + text-decoration: none; +} +.header { + position: fixed; + top:0; + z-index: 999; + max-width: 1920px; + width: 100%; + background: #fff; + font-size: 16px; + box-sizing: border-box; + height: 64px; +} +/* 导航外容器:1920px宽,居中 */ +.header-nav-outer { + max-width: 1920px; + position: relative; + padding: 0 12.5em; + overflow: visible; + height: 64px; + background: #fff; + display: flex; + align-items: center; + /* margin: 0 auto; */ +} + +/* 顶部导航栏:内容区带左右边距,外框1920px */ +.header-nav-bar { + width: 100%; + max-width: 1520px; + height: 4em; + display: flex; + align-items: center; + flex-wrap: nowrap; + justify-content: space-between; +} + +.header-log { + width: 6.9375em; + height: 1.75em; + margin-right: 9.125em; + flex-shrink: 0; +} + +.header-nav-items { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + flex-wrap: nowrap; + flex: 1; + min-width: 0; + margin-right: 5.125em; +} + +.header-nav-item { + height: 100%; + display: flex; + align-items: center; + cursor: pointer; + color: #1d1d1f; + flex-shrink: 1; + min-width: 0; +} + +.header-nav-title { + position: relative; + height: 100%; + font-size: 1em; + display: flex; + align-items: center; + flex-wrap: nowrap; + white-space: nowrap; + padding: 0 0.3em; +} + +/* 导航项下划线 */ +.header-nav-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0.125em; + background-color: #004bfa; + transform: scaleX(0); + transition: transform 0.2s ease; +} + +.header-nav-title:hover::after, +.header-nav-title.active::after { + transform: scaleX(1); +} + +.header-nav-title.active { + color: #004bfa; +} + +/* 右侧功能按钮 */ +.header-nav-actions { + margin-left: auto; + display: flex; + align-items: center; + gap: 2em; + position: relative; + flex-shrink: 0; +} + +/* 搜索按钮容器 */ +.header-search-wrapper { + position: relative; + display: inline-block; +} + +/* 语言按钮容器 */ +.header-lang-wrapper { + position: relative; + display: inline-block; +} + +/* 购买按钮容器 */ +.header-buy-wrapper { + position: relative; + display: inline-block; +} + +.header-nav-btn { + cursor: pointer; + display: flex; + align-items: center; + transition: color 0.2s; +} + +/* .header-nav-btn img { + width: 1.5em; + max-width: 17px; + max-height: 17px; + height: 1.5em; +} */ + +.header-nav-btn:hover { + color: #004bfa; +} + +.header-buy-btn { + background-color:#004bfa; + color: #fff; + padding: 5px 12px; + border-radius: 1.25em; + border: none; + cursor: pointer; + font-size: 0.875em; + white-space: nowrap; + display: flex; + align-items: center; +} + +/* ========== 响应式设计 - 整体缩放,保持比例 ========== */ + +/* 1920px 及以上 - 100% */ +@media screen and (min-width: 1920px) { + .header { + font-size: 16px; + } +} + +/* 1680px - 1919px - 缩放至 93.75% */ +@media screen and (max-width: 1919px) and (min-width: 1680px) { + .header { + font-size: 15px; + } +} + +/* 1600px - 1679px - 缩放至 90.625% */ +@media screen and (max-width: 1679px) and (min-width: 1600px) { + .header { + font-size: 14.5px; + } +} + +/* 1520px - 1599px - 缩放至 87.5% */ +@media screen and (max-width: 1599px) and (min-width: 1520px) { + .header { + font-size: 14px; + } +} + +/* 1440px - 1519px - 缩放至 84.375% */ +@media screen and (max-width: 1519px) and (min-width: 1440px) { + .header { + font-size: 13.5px; + } +} + +/* 1360px - 1439px - 缩放至 81.25% */ +@media screen and (max-width: 1439px) and (min-width: 1360px) { + .header { + font-size: 13px; + } +} + +/* 1280px - 1359px - 缩放至 78.125% */ +@media screen and (max-width: 1359px) and (min-width: 1280px) { + .header { + font-size: 12.5px; + } +} + +/* 1200px - 1279px - 缩放至 75% */ +@media screen and (max-width: 1279px) and (min-width: 1200px) { + .header { + font-size: 12px; + } +} + +/* 1140px - 1199px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1199px) and (min-width: 1140px) { + .header { + font-size: 12px; + } +} + +/* 1080px - 1139px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1139px) and (min-width: 1080px) { + .header { + font-size: 12px; + } +} + +/* 992px - 1079px - 缩放至 75% (保持最小12px) */ +@media screen and (max-width: 1079px) and (min-width: 992px) { + .header { + font-size: 12px; + } +} + +/* 小于992px - 保持最小12px */ +@media screen and (max-width: 991px) { + .header { + font-size: 12px; + } +} + +/* ========== 以下为原有样式,保持不变 ========== */ + +/* 原有的下拉框样式 */ +.header-dropdown { + box-sizing: border-box; + max-width: 1920px; + width: 100%; + position: absolute; + top: 4em; + left: 0; + right: 0; + background-color: #fff; + z-index: 199; + border-top: none; + overflow: hidden; + padding-bottom: 2.375em; + display: none; +} + +.header-nav-item:hover .header-dropdown { + display: block; +} + +/* Tabs切换栏:居中,宽度100%(基于下拉框内容区) */ +.header-dropdown-tabs { + display: flex; + justify-content: center; + margin: 0 auto; + padding-bottom: 1.75em; + padding-top: 1.75em; + width: calc(100% - 2.5em); +} + +.header-tab-item:last-child { + margin-right: 0; +} + +.header-tab-item { + font-size: 1em; + color: #1d1d1f; + cursor: pointer; + position: relative; + margin-right: 9.375em; +} + +.header-tab-item.active::after { + content: ''; + position: absolute; + bottom: -0.5075em; + left: 0; + width: 100%; + height: 0.125em; + background-color: #004bfa; +} + +/* 下拉框内容容器:宽度100%,左右留20px边距 */ +.header-dropdown-content { + width: 100%; + min-width: 1080px; + padding: 0 12.5em; + display: flex; + justify-content: space-between; + box-sizing: border-box; + align-items: flex-start; +} + +/* 左侧6个分类区块 */ +.header-dropdown-category { + display: flex; + flex: 1; + justify-content: space-between; + max-width: 48%; + +} + +.header-category-box { + display: flex; + flex-direction: column; + flex:1; + max-width: 362px; + margin-right:1.5em; + gap: 1.7em 0; + /* width: 20%; */ + +} + +/* 单个分类区块 */ +.header-category-block { + /* flex: 1; */ +} + + +.header-category-title { + font-size: 1em; + color: #1d1d1f; + margin-bottom: 0.75em; + font-weight: 900; + line-height: 1; +} + +.header-category-list { + list-style: none; +} + +.header-category-item { + font-size: 0.875em; + color: #686a70; + margin-bottom: 0.71em; + cursor: pointer; +} + +.header-category-item a { + color: #686a70; +} + +.header-category-item:last-child { + margin: 0; +} + +.header-category-item a:hover { + color: #0066ff; +} + + + +.header-dropdown-products { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex: 1; + min-width: 0; + +} + + + +.header-product-card { + text-align: center; + width: calc(50% - 0.75em); + max-width: 22.625em; + flex-shrink: 1; + min-width: 260px; + transition: transform 0.2s ease; +} + + +.header-product-card-1 { + text-align: center; + width: 100%; + max-width: 22.625em; + +} + +.header-product-card:hover { + transform: translateY(-2px) +} + +.header-product-card-1:hover { + transform: translateY(-2px) +} + +.header-product-card:nth-child(1) { + margin-right: 1.5em; +} + +.header-product-card:nth-child(3) { + margin-right: 1.5em; + margin-top: 1.5em; +} + +.header-product-card:nth-child(4) { + margin-top: 1.5em; +} + +/*.header-product-img {*/ +/* width: 22.625em;*/ +/* height: 12.25em;*/ +/* background-color: #f5f5f5;*/ +/* display: flex;*/ +/* align-items: center;*/ +/* justify-content: center;*/ +/* color: #999;*/ +/*}*/ + +/*.header-product-img img {*/ +/* width: 22.625em;*/ +/* height: 12.25em;*/ +/*}*/ +.header-product-img { + width: 100%; + aspect-ratio: 22.625 / 12.25; + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + color: #999; + overflow: hidden; + /* border-radius: 0.5em; */ +} + +.header-product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.header-product-name { + font-size: 1em; + color: #1d1d1f; + line-height: 2; +} + +/* 修改 .dropdown-content1 的样式 - 卡片居中对齐 */ +.header-dropdown-content1 { + width: 100%; + min-width: 1080px; + padding: 3.4em 12.5em; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 3.4em 1.875em; + box-sizing: border-box; +} + +/* 修改 .product-card-1 的样式 - 设置宽度,确保一行最多4个 */ +.header-product-card-1 { + width: calc(25% - 1.40625em); + /* background: #fff; */ + border-radius: 0.5em; + max-width: 362px; + flex-shrink: 0; + +} + +/* 如果需要更好的兼容性,用 padding 技巧替代 aspect-ratio */ +.header-product-img-1 { + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + color: #999; + width: 100%; + position: relative; + padding-bottom: 53%; + height: 0; + overflow: hidden; + font-size: 16px; +} + +/* 图片样式 - 确保图片正确显示 */ +.header-product-img-1 img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +/* 内容区域自适应 */ +.header-product-title-1 { + font-weight: 900; + font-size: 1em; + color: #1d1d1f; + text-align: left; + margin-top: 1em; + padding: 0 0.5em; + line-height: 1.5; + word-break: break-word; +} + +.header-product-name-1 { + font-size: 0.875em; + color: #686a70; + text-align: left; + margin-top: 0.25em; + margin-bottom: 1.0625em; + padding: 0 0.5em; + line-height: 1.5; + word-break: break-word; +} + +/* 隐藏非当前选中的Tabs内容 */ +.header-tab-content { + display: none; +} + +.header-tab-content.active { + display: flex; +} + +/* ========== 搜索下拉框样式 ========== */ +.header-search-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.75em; + background: #ffffff; + border-radius: 0.75em; + box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12); + width: 26em; + padding: 1.5em; + z-index: 1000; + display: none; + animation: fadeIn 0.2s ease; +} + +.header-search-dropdown.show { + display: block; +} + +.header-search-input-wrapper { + display: flex; + gap: 0.625em; + border: 1px solid #e5e7eb; + border-radius: 2em; + padding: 0.5em 1em; + background: #f9fafb; + margin-bottom: 1em; +} + +.header-search-input { + flex: 1; + border: none; + outline: none; + background: transparent; + font-size: 0.875em; + color: #1d1d1f; +} + +.header-search-input::placeholder { + color: #9ca3af; +} + +.header-search-submit { + background: #004bfa; + color: white; + border: none; + padding: 0.375em 1em; + border-radius: 1.5em; + cursor: pointer; + font-size: 0.8125em; + transition: background 0.2s; +} + +.header-search-submit:hover { + background: #0039cc; +} + +/* 搜索记录区域 */ +.header-search-history { + margin-bottom: 1.25em; +} + +.header-history-title { + font-size: 1em; + color: #9ca3af; + margin-bottom: 0.625em; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-clear-history { + color: #004bfa; + cursor: pointer; + font-size: 14px; + padding: 0.2em 0.5em; + border-radius: 0.25em; + transition: background 0.2s; +} + +.header-clear-history:hover { + background: #f0f7ff; +} + +.header-history-list { + display: flex; + flex-wrap: wrap; + gap: 0.5em; +} + +.header-history-item { + font-size: 0.8125em; + color: #1d1d1f; + cursor: pointer; + padding: 0.25em 0.625em; + background: #f3f4f6; + border-radius: 1em; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 0.25em; +} + +.header-history-item:hover { + background: #004bfa; + color: white; +} + +.header-history-item .header-delete-icon { + font-size: 0.875em; + opacity: 0; + transition: opacity 0.2s; +} + +.header-history-item:hover .header-delete-icon { + opacity: 1; +} + +/* 热销产品区域 - 使用flex-wrap,一行最多3个,超过自动换行 */ +.header-hot-products { + border-top: 1px solid #f0f0f0; + padding-top: 0.75em; +} + +.header-hot-title { + font-size: 1em; + color: #9ca3af; + margin-bottom: 0.75em; +} + +.header-hot-product-list { + display: flex; + flex-wrap: wrap; + gap: 1.5em; + margin: 0; + padding: 0; +} + +.header-hot-product-item { + flex: 0 0 calc(33.333% - 1em); + min-width: 0; + cursor: pointer; + text-align: center; + transition: transform 0.2s; + box-sizing: border-box; +} + +.header-hot-product-item:hover { + transform: translateY(-2px); +} + +.header-hot-product-img { + width: 7.1875em; + height: 7.1875em; + max-width: 115px; + max-height: 115px; + background: linear-gradient(135deg, #f5f7fc 0%, #eef2f8 100%); + border-radius: 0.5em; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 0.5em auto; + overflow: hidden; +} + +.header-hot-product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.header-hot-product-img .emoji { + font-size: 2.5em; +} + +.header-hot-product-name { + font-size: 0.8125em; + color: #1d1d1f; + font-weight: 500; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 语言下拉框样式 */ +.header-lang-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 0.75em; + background: #ffffff; + border-radius: 0.75em; + box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12); + min-width: 12em; + padding: 1.5em 0; + z-index: 1000; + display: none; + animation: fadeIn 0.2s ease; +} + +.header-lang-dropdown.show { + display: block; +} + +.header-lang-item { + display: block; + padding: 0.75em 1.25em; + cursor: pointer; + transition: background 0.2s; + width: 100%; + font-size: 0.875em; + color: #1d1d1f; + text-decoration: none; + display: flex; + align-items: center; + gap: 0.625em; +} + +.header-lang-item:hover { + background: #f3f4f6; + color: #004bfa; +} + +.header-lang-item.active { + color: #004bfa; + background: #f0f7ff; +} + +.header-lang-code { + font-weight: 500; + min-width: 2.5em; + white-space:nowrap; +} + +.header-lang-name { + flex: 1; +} +.header-lang-name-en { + flex: 1; + min-width: 126px; +} +.header-lang-dropdown-delete-icon, +.header-search-dropdown-delete-icon { + font-size: 12px; + position: absolute; + top: 10px; + right: 14px; + cursor: pointer; + +} + +/* ========== 购买下拉框样式 ========== */ +.header-buy-dropdown { + box-sizing: border-box; + max-width: 1920px; + width: 100%; + position: absolute; + top: 3.75em; + left: 0; + right: 0; + background-color: #fff; + z-index: 999; + border-top: none; + overflow: visible; + display: none; + padding: 3.5em 12.5em; +} + +.header-buy-dropdown.show { + display: block; +} + +/* 购买下拉框内容容器 - 居中显示,固定一行7个卡片 */ +.header-buy-dropdown-content { + width: 100%; + max-width: 1520px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + box-sizing: border-box; + row-gap: 121px; +} + +/* 购买产品卡片:宽度96px,右边距动态计算 */ +.header-buy-product-card { + width: 96px; + text-align: center; + cursor: pointer; + margin-right: calc((100% - (96px * 7)) / 4); + +} + + +/* 每行第7个卡片(一行最后一个)清除右边距 */ +.header-buy-product-card:last-of-type { + margin-right: 0; +} + + +.header-buy-product-card:hover { + transform: translateY(-2px) +} + + + +.header-buy-product-card a { + text-decoration: none; + display: block; +} + +/* 图片容器:宽度100%,高度自适应,保持正方形比例 */ +.header-buy-product-img { + width: 100%; + aspect-ratio: 1 / 1; + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 0.5em; + position: relative; +} + +/* 图片样式:实现悬浮切换效果,完全填充容器 */ +.header-buy-product-img img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: opacity 0.2s ease; +} + +/* 默认显示普通图,隐藏悬浮图 */ +.header-buy-product-img .header-default-img { + opacity: 1; +} + +.header-buy-product-img .header-hover-img { + opacity: 0; +} + +/* 鼠标悬停时:显示悬浮图,隐藏普通图 */ +/* .header-buy-product-card:hover .header-buy-product-img .header-default-img { + opacity: 0; +} + +.header-buy-product-card:hover .header-buy-product-img .header-hover-img { + opacity: 1; +} */ + +/* 产品标题样式:不加粗,字体大小16px,超出一行显示省略号 */ +.header-buy-product-title { + font-weight: normal; + font-size: 1em; + color: #1d1d1f; + text-align: center; + margin-top: 0.75em; + word-break: break-word; + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + white-space: normal; +} + +/* 动画 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-0.5em); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 1280px及以下屏幕,渐进式调整间距 */ +@media screen and (max-width: 1280px) { + .header-log { + margin-right: 2em; + } + + .header-nav-items { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 12em; + } + + .header-dropdown-content { + padding: 0 12em; + } + + .header-dropdown-content1 { + padding: 0 12em; + } + + .header-buy-dropdown { + padding: 3.5em 12em; + } + + .header-buy-dropdown-content { + max-width: 1200px; + row-gap: 100px; + } +} + +/* 1152px及以下,进一步缩小 */ +@media screen and (max-width: 1152px) { + .header-log { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 10em; + } + + .header-dropdown-content { + padding: 0 10em; + } + + .header-dropdown-content1 { + padding: 0 10em; + } + + .header-buy-dropdown { + padding: 3.5em 10em; + } + + .buy-dropdown-content { + max-width: 1080px; + row-gap: 80px; + } +} + +/* 1080px及以下,最小间距 */ +@media screen and (max-width: 1080px) { + .header-log { + margin-right: 1em; + } + + .header-nav-outer { + padding: 0 8em; + } + + .header-dropdown-content { + padding: 0 8em; + } + + .header-dropdown-content1 { + padding: 0 8em; + } + + .header-buy-dropdown { + padding: 3.5em 8em; + } + + .header-buy-dropdown-content { + max-width: 1000px; + row-gap: 60px; + } +} +#mhk { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + backdrop-filter: blur(5px); + background-color: rgba(0, 0, 0, 0.5); + z-index: 88; + display: none; +} diff --git a/public/static/index/pc/css/index.css b/public/static/index/pc/css/index.css index e8aeeb76..58b23cd5 100755 --- a/public/static/index/pc/css/index.css +++ b/public/static/index/pc/css/index.css @@ -17,7 +17,6 @@ width: 100%; height: auto; position: relative; - margin-top: 3.75rem; } .orico_Page_index .pageMain .bannerswiper .swiper-slide img { diff --git a/public/static/index/pc/css/product_detail.css b/public/static/index/pc/css/product_detail.css index 7108415e..1a23c1d6 100755 --- a/public/static/index/pc/css/product_detail.css +++ b/public/static/index/pc/css/product_detail.css @@ -36,7 +36,7 @@ flex-direction: column; padding: 2.5rem 0 1.375rem 0; position: relative; - margin-top: 3%; + /* margin-top: 3%; */ } .orico_Page_prdetail .oriprdetail .product_address { width: 70%; diff --git a/public/static/index/pc/css/product_subcategory.css b/public/static/index/pc/css/product_subcategory.css index f4648fb4..c33688e5 100644 --- a/public/static/index/pc/css/product_subcategory.css +++ b/public/static/index/pc/css/product_subcategory.css @@ -27,7 +27,7 @@ } .orico_Page_subcategory .pageMain { width: 85%; - padding: 7.5rem 0 10px; + padding: 54px 0 10px; margin: 0 auto; display: flex; flex-direction: column; diff --git a/public/static/index/pc/css/topic_laptop/header.css b/public/static/index/pc/css/topic_laptop/header.css index a74d0248..ce225a5b 100644 --- a/public/static/index/pc/css/topic_laptop/header.css +++ b/public/static/index/pc/css/topic_laptop/header.css @@ -1,406 +1,13 @@ -@charset "UTF-8"; -/* 全局文字最小尺寸兜底 */ -.header-PC { - width: 100%; - - height: 60px; - background: #fff; - display: flex; - justify-content: center; - position: fixed; - top: 0; - z-index: 100; +.header { + max-width: 100% !important; + width: 100% !important; + display: flex; + justify-content: center; + } -.header-PC * { - min-font-size: 16px !important; /* 强制最小16px */ - box-sizing: border-box; +.header-nav-outer { + max-width: 1920px; + width: 100%; + margin:auto 0 !important; } -.header-PC #header { - margin: 0 auto; - height: 60px; /* 0.6rem*100=60px */ - max-width: var(--max-width); - /* position: fixed; - top: 0; */ - display: flex; - flex-direction: row; - align-items: center; - z-index: 999; - background: white; - color: black; - width: 100%; - font-size: 16px; /* 基础字号16px */ -} -.header-PC #header .nav1 { - position: relative; - width: 20%; -} -.header-PC #header .nav1 img { - width: 45%; - margin-left: 40%; -} -.header-PC #header .nav2 { - position: relative; - width: 60%; -} -.header-PC #header .nav2 .navItem { - font-size: 16px; /* 强制16px */ - position: relative; - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - justify-content: center; - width: 12.5%; - height: 60px; /* 0.6rem*100=60px */ - text-align: center; - float: left; - text-decoration: none; - transition: all 0.3s ease; - -webkit-transition: all 0.5s ease; -} -.header-PC #header .nav2 .navItem a { - padding-right: 5px; /* 0.05rem*100=5px */ - padding-left: 20px; /* 0.2rem*100=20px */ - text-decoration: none; - word-break: keep-all; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - word-wrap: break-word; - text-wrap: nowrap; - font-size: 16px; /* 确保16px */ -} -.header-PC #header .nav2 .navItem .downimg { - height: 12px; /* 0.12rem*100=12px */ -} -.header-PC #header .nav2 .navItem .navItemConten { - width: 100%; - z-index: 999; - background-color: #f2f2f2; - max-height: 660px; /* 6.6rem*100=660px */ - box-shadow: 3px 5px 60px -20px #88909a; /* 0.03/0.05/0.6/-0.2rem 转px */ - position: fixed; - border: 1px solid lightgray; - top: 60px; /* 0.6rem*100=60px */ - transition: max-height 0.5s ease-out, opacity 0.5s ease-out; - left: 0; - display: none; - font-size: 16px; /* 基础字号16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft { - float: left; - text-align: center; - width: 20%; - max-height: 660px; /* 6.6rem*100=660px */ - font-size: 16px; /* 强制16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li { - cursor: pointer; - zoom: 1; - clear: both; - border: 1px solid transparent; -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a { - line-height: 44px; /* 0.44rem*100=44px */ - color: #656a6d; - font-size: 16px; /* 确保16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li a:hover { - color: #004bfa; -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyleft li.it_active { - border-color: #dddddd; - background-color: #ffffff; -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright { - max-height: 660px; /* 6.6rem*100=660px */ - min-height: 460px; /* 4.6rem*100=460px */ - overflow-y: auto; - border-left: 1px solid #dddddd; - font-weight: normal; - background-color: #fff; - margin: 0 auto; - box-shadow: -3px 0 0px #f3f3f3; /* -0.03rem*100=-3px */ - text-align: left; -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt { - font-size: 16px; /* 原0.14rem=14px → 提升至16px */ - line-height: 16px; /* 0.16rem*100=16px */ - margin-inline-start: 20px; /* 0.2rem*100=20px */ - font-weight: 600; - border-bottom: 1px solid rgba(225, 225, 225, 0.5); - padding-bottom: 13px; /* 0.13rem*100=13px */ - padding-top: 16px; /* 0.16rem*100=16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt img { - height: 16px; /* 0.16rem*100=16px */ - max-width: 100%; -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dt a { - color: #333; - text-decoration: none; - word-break: keep-all; - overflow: hidden; - text-overflow: ellipsis; - word-wrap: break-word; - text-wrap: nowrap; - font-size: 16px; /* 确保16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd { - font-size: 16px; /* 原0.14rem=14px → 提升至16px */ - line-height: 40px; /* 0.4rem*100=40px */ - padding-top: 0vw; - font-weight: 100; - display: inline-block; - margin-right: 3%; - margin-inline-start: 40px; /* 0.4rem*100=40px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd a { - font-size: 16px; /* 确保16px */ -} -.header-PC #header .nav2 .navItem .navItemConten .navItem_cyright .nav_cyrightit dd a:hover { - color: #004bf9; - font-weight: 600; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transition: all 0.2s linear; -} -.header-PC #header .nav2 .navItem .navItemConten.active { - max-height: 660px; /* 6.6rem*100=660px */ - opacity: 1; -} -.header-PC #header .nav2 .navItem .navItemConten1 { - background-color: #fff; - color: black; - position: absolute; - top: 60px; /* 0.6rem*100=60px */ - left: 20px; /* 0.2rem*100=20px */ - width: auto; - height: auto; - z-index: 9999; - border-radius: 5px; /* 0.05rem*100=5px */ - box-shadow: 0 0 1px 0 #88909a; /* 0.01rem*100=1px */ - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 8px 0; /* 0.08rem*100=8px */ - font-size: 16px; /* 基础字号16px */ -} -.header-PC #header .nav2 .navItem .navItemConten1 li { - color: #fff; - float: left; - text-align: center; - line-height: 24px; /* 0.24rem*100=24px */ - padding: 8px 32px; /* 0.08/0.32rem*100=8/32px */ - display: list-item; -} -.header-PC #header .nav2 .navItem .navItemConten1 li a { - cursor: pointer; - padding-left: 0; - white-space: nowrap; - font-size: 16px; /* 确保16px */ -} -.header-PC #header .nav2 .navItem > a.active, -.header-PC #header .nav2 .navItem .navItemConten1 li a:hover { - color: #004bfa; -} -.header-PC #header .nav3 { - position: relative; - width: 20%; - background-color: transparent; - display: flex; - align-items: center; - cursor: pointer; - font-size: 16px; /* 基础字号16px */ -} -.header-PC #header .nav3 .searchimg { - margin-left: 10%; -} -.header-PC #header .nav3 .storetopbt { - background: #004cfa; - color: #fff; - padding: 0 15px; /* 0.15rem*100=15px */ - border-radius: 20px; /* 0.2rem*100=20px */ - height: 38px; /* 0.38rem*100=38px */ - line-height: 40px; /* 0.4rem*100=40px */ - margin-left: 15%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - font-size: 16px; /* 强制16px */ -} -.header-PC #header .nav3 .storetopbt .storeImgico { - width: 20px; /* 0.2rem*100=20px */ - margin-right: 8px; /* 0.08rem*100=8px */ -} -.header-PC #header .nav3 .choesCountry { - position: relative; - margin-left: 15%; - display: flex; -} -.header-PC #header .nav3 .choesCountry .topCountry { - display: none; - width: 340px; /* 3.4rem*100=340px */ - background-color: white; - /* position: fixed; */ - position: absolute; - right: -150px; - top: 50px; /* 0.8rem*100=80px */ - border-radius: 15px; /* 0.15rem*100=15px */ - box-shadow: 2px 2px 10px 1px #88909a; /* 0.02/0.02/0.1/0.01rem 转px */ - font-size: 16px; /* 基础字号16px */ -} -.header-PC #header .nav3 .choesCountry .topCountry li { - width: 100%; - height: 50px; /* 0.5rem*100=50px */ - line-height: 50px; /* 0.5rem*100=50px */ - text-align: center; - display: flex; -} -.header-PC #header .nav3 .choesCountry .topCountry li .countryName { - width: 70%; - text-align: left; - margin-left: 10px; /* 0.1rem*100=10px */ - font-size: 16px; /* 强制16px */ -} -.header-PC #header .nav3 .choesCountry .topCountry li .cico { - width: 18%; - margin-left: 0; -} -.header-PC #header .nav3 .choesCountry .topCountry li .cico .countryimg { - margin-left: 0; - margin-left: 20px; /* 0.2rem*100=20px */ - margin-top: 15px; /* 0.15rem*100=15px */ - vertical-align: top; -} -.header-PC #header .nav3 .choesCountry .topCountry li.closec { - display: flex; - flex-direction: row; - justify-content: end; - height: 30px; /* 0.3rem*100=30px */ -} -.header-PC #header .nav3 .choesCountry .topCountry .closecountrybt { - color: #aaa; - margin-top: -5px; /* 0.05rem*100=5px */ - cursor: pointer; - height: 20px; /* 0.2rem*100=20px */ - width: 20px; /* 0.2rem*100=20px */ - margin-right: 10px; /* 0.1rem*100=10px */ - font-size: 16px; /* 确保关闭按钮文字16px */ -} -.header-PC .searchmodalMian { - position: fixed; - z-index: 999; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - z-index: 998; - display: none; -} -.header-PC .searchmodalMian .searchmodalct { - background-color: #fff; - padding: 20px; /* 0.2rem*100=20px */ - border-radius: 20px; /* 0.2rem*100=20px */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 0.04/0.08rem 转px */ - border: 1px solid rgba(0, 0, 0, 0.2); - position: fixed; - right: 2%; - width: 33%; - top: 80px; /* 0.8rem*100=80px */ - height: 80%; - overflow-y: auto; - z-index: 998; - font-size: 16px; /* 基础字号16px */ -} -.header-PC .searchmodalMian .searchmodalct .close-btn { - color: #aaa; - float: right; - font-size: 24px; /* 0.24rem*100=24px */ - cursor: pointer; -} -.header-PC .searchmodalMian .searchmodalct #serrchinput { - margin-left: 10%; - margin-top: 5%; - width: 80%; - height: 44px; /* 0.44rem*100=44px */ - border: 1px solid grey; - border-radius: 22px; /* 0.22rem*100=22px */ - background-position: 95% 50%; - padding-left: 5%; - font-size: 16px; /* 输入框文字16px */ -} -.header-PC .searchmodalMian .searchmodalct .searchhistory, -.header-PC .searchmodalMian .searchmodalct .popProduct { - margin-top: 5%; - margin-left: 10%; - width: 80%; - display: flex; - position: relative; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory .h_title, -.header-PC .searchmodalMian .searchmodalct .popProduct .h_title { - position: absolute; - left: 0; - top: 1%; - font-size: 16px; /* 保持16px */ - color: #989898; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory ul, -.header-PC .searchmodalMian .searchmodalct .popProduct ul { - margin-top: 10%; - margin-left: 1%; -} -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain{ - width: 100%; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain, -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem, -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem { - text-align: center; - margin-top: 7%; - margin-left: 1%; - display: flex; - flex-direction: column; - justify-content: center; - width: 30%; - align-items: center; - overflow: hidden; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .popimg, -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .popimg { - width: 115px; /* 1.15rem*100=115px */ - height: 115px; /* 1.15rem*100=115px */ - margin: 0 auto; -} -.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .productName, -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName { - font-weight: 600; - display: -webkit-box; - -webkit-line-clamp: 1; - text-overflow: ellipsis; - font-size: 16px; /* 原0.128rem=12.8px → 提升至16px */ - margin-top: 10%; -} -.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName - { - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - font-size: 16px; /* 原14px → 提升至16px */ - } - .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{ - font-size: 16px; /* 原10px → 提升至16px */ - color: #000000; - margin-top: 1%; - } \ No newline at end of file diff --git a/public/static/index/pc/css/topic_laptop/index.css b/public/static/index/pc/css/topic_laptop/index.css index cd66744a..d7cda29a 100644 --- a/public/static/index/pc/css/topic_laptop/index.css +++ b/public/static/index/pc/css/topic_laptop/index.css @@ -9,13 +9,6 @@ body { overflow-x: hidden; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; - /* padding: 0 !important; - margin:0 !important; */ - /* max-width:100% !important; - width: 100vw !important; - margin:0 auto; */ - /* max-width:100vw !important */ - /* margin:0 auto !important; */ } /* 当视口宽度大于1920px时生效 */ @media screen and (min-width: 1920px) { @@ -39,7 +32,3 @@ body { transform 1.2s ease-in-out, visibility 1.2s ease-in-out; } - /* 18-19号防卡顿:延迟19号动画 */ - /* [data-order="19"] { - transition: all 0.3s ease-out 0.2s !important; - } */ diff --git a/public/static/index/pc/css/topic_power_prodline/index.css b/public/static/index/pc/css/topic_power_prodline/index.css index 529bcdb3..0cc1f016 100644 --- a/public/static/index/pc/css/topic_power_prodline/index.css +++ b/public/static/index/pc/css/topic_power_prodline/index.css @@ -63,12 +63,12 @@ a { width: 100%; height: clamp(2.5rem, 5vw, 15rem); } -.header { +/* .header { width: 100%; background: #fff; height: 60px; -} -.header-img { +} */ +/* .header-img { margin: 0 auto; width: 90%; display: flex; @@ -76,4 +76,4 @@ a { padding-top: 0.5rem; padding-bottom: 0.5rem; -} +} */ diff --git a/public/static/index/pc/images/g1.png b/public/static/index/pc/images/g1.png new file mode 100644 index 00000000..2dc12da9 Binary files /dev/null and b/public/static/index/pc/images/g1.png differ diff --git a/public/static/index/pc/images/gm.png b/public/static/index/pc/images/gm.png new file mode 100644 index 00000000..1a021721 Binary files /dev/null and b/public/static/index/pc/images/gm.png differ diff --git a/public/static/index/pc/images/l1.png b/public/static/index/pc/images/l1.png new file mode 100644 index 00000000..e7edc47b Binary files /dev/null and b/public/static/index/pc/images/l1.png differ diff --git a/public/static/index/pc/images/s1.png b/public/static/index/pc/images/s1.png new file mode 100644 index 00000000..4a0e9fdb Binary files /dev/null and b/public/static/index/pc/images/s1.png differ