feat: mobile附件下载页

This commit is contained in:
2025-05-26 14:29:42 +08:00
parent 15d14fd089
commit 36bc2a4756
5 changed files with 182 additions and 6 deletions

View File

@@ -52,4 +52,10 @@ return [
// 返回文本
'send_success' => '信息已成功提交',
'send_fail' => '信息提交失败',
// 附件下载
'软件下载' => 'Software download',
'支持型号' => 'Supported Models',
'支持系统' => 'Supported Systems',
'全站搜索' => 'Search',
];

View File

@@ -0,0 +1,53 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/download.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
<!-- 内容-->
<div class="margin-45"></div>
<!--search-->
<div class="menu mobile-search margin-top-90">
<div class="search">
<form action="{:url('attachment/index')}" method="get">
<div class="search margin-bottom-30">
<button class="updown_search_btn" type="sumbit">
<span class="icon-search-svg"></span>
</button>
<input class="form-control" name="keyword" placeholder="{:lang('全站搜索')}" value="" type="text" />
</div>
</form>
</div>
</div>
<!--软件下载-->
<div class="download-title">{:lang('软件下载')}</div>
<!--循环产品列表-->
{notempty name="attachements"}
{volist name="attachements" id="att"}
<div class="download-bg clearfix">
<div class="download-left">
<img src="{$att.image}" alt="{$att.name}">
</div>
<div class="download-right">
<div class="font-48">{$att.name}</div>
<div class="down-gray">
<p>{:lang('支持型号')}: {$att.applicable_to}</p>
<p>{:lang('支持系统')}: {$att.support_platform}</p>
</div>
{notempty name="att.attach"}
{volist name="att.attach" id="ch"}
<div class="down-btn">
<a href="{$ch.file_path}" data-cod="dl" target="_blank">
<span class="l_button">{$ch.btn_name}</span>
</a>
</div>
{/volist}
{/notempty}
</div>
</div>
{/volist}
<!-- 分页-->
<div class="Pages">{$page|raw}</div>
{/notempty}
</div>
{/block}

View File

@@ -0,0 +1,7 @@
{extend name="public/base" /}
{block name="style"}
{/block}
{block name="main"}
{/block}

View File

@@ -3,9 +3,9 @@
<a><img src="__IMAGES__/logo.png" class="headerlogimg" /></a>
<div class="action-r">
<div class="right img-responsive cursor_p">
<span class="icon-category cursor_p"> <i class="icon-menu-svg"></i></span>
<span class="icon-keyword cursor_p"><i class="icon-search-svg"></i></span>
<span class="mask-up cursor_p "><i class="icon-lag-svg"></i></span>
<span class="icon-category cursor_p top-menu-toggle"><i class="icon-menu-svg"></i></span>
<span class="icon-keyword cursor_p top-search-toggle"><i class="icon-search-svg"></i></span>
<span class="mask-up cursor_p top-country-toggle"><i class="icon-lag-svg"></i></span>
</div>
</div>
</div>
@@ -81,7 +81,7 @@
<script type="text/javascript">
$(function() {
// 点击顶部菜单
$(".icon-menu-svg").click(function() {
$(".top-menu-toggle").click(function() {
$(".top-menu").slideToggle(800);
})
// 点击一级菜单显示二级菜单
@@ -92,14 +92,14 @@
$(this).find('.icon-arrow').addClass('rotate');
});
//点击搜索
$('.icon-search-svg').click(function() {
$('.top-search-toggle').click(function() {
$(".marsk-container").show();
})
$('.ac-close').click(function() {
$(".marsk-container").hide();
})
// 顶部国家选择
$('.icon-lag-svg').click(function(){
$('.top-country-toggle').click(function(){
$(".mask,.action-sheet").show();
})
$('.top-country .close-icon').click(function(){

View File

@@ -0,0 +1,110 @@
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.mobile-search {
background: #004bfa !important;
width: 100%;
padding: 1rem 0 0.5rem;
}
.download-title {
font-size: 28px;
text-align: center;
color: #333;
margin: 15px 0;
}
.download-bg {
background: #fff;
border-radius: 10px;
margin: 8px 25px;
box-shadow: 0px 2px 40px 0px #e6eaf4;
-moz-box-shadow: 0px 2px 40px 0px #e6eaf4;
-webkit-box-shadow: 0px 2px 40px 0px #e6eaf4;
padding: 1.333rem;
}
.Pages {
text-align: center;
color: #555;
clear: both;
margin-bottom: 0.8rem;
margin-top: 0.6rem;
}
.Pages .pagination li {
display: inline-block;
}
.Pages .pagination li a,
.Pages .pagination li span {
display: inline-block;
vertical-align: middle;
font-size: 0.875rem;
color: #666;
padding: 0.1rem 0.58rem;
}
.Pages .pagination li.active span{
background-color: #444444;
color: #fff;
}
@media screen and (max-width: 375px) {
.download-left {
width: 60%;
margin: auto;
}
.download-right {
width: 100%;
font-size: 0.8rem;
}
.down-btn {
border: 1px solid #009fdf;
text-align: center;
color: #009fdf;
font-size: 0.8rem;
margin: auto;
border-radius: 20px;
padding: 0.5rem 1rem;
}
}
.download-left img {
width: 100%;
}
@media screen and (min-width: 376px) {
.download-left {
width: 30%;
float: left;
}
.download-right {
width: 65%;
float: right;
font-size: 0.64rem;
}
}
.down-btn {
border: 1px solid #009fdf;
text-align: center;
color: #009fdf;
font-size: 0.8rem;
margin: 5px 0;
border-radius: 20px;
padding: 0.5rem 1rem;
}
.down-btn a {
color: #009fdf;
}
.down-gray {
color: #666;
margin: 5px 0;
}