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

feat: mobile联系我们页

Browse Source
This commit is contained in:
jsasg
2025-05-27 11:13:03 +08:00
parent 01c14bb718
commit b30ec56bec
3 changed files with 326 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/index/controller/ContactUs.php
View File

@@ -51,7 +51,7 @@ class ContactUs extends Common
$item->title_short = $title[1];
}
return $item;
})->chunk(4)->toArray();
})->toArray();
}
View::assign('focus_image', $focus_image);
View::assign('info_datas', $info_datas);

71
app/index/view/mobile/contact_us/index.html Normal file
View File

@@ -0,0 +1,71 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/contact.css" />
{/block}
{block name="main"}
<div class="oricoEGapp">
<!-- 内容-->
<div class="oricoEGapp-Contact">
<!--banner-->
{notempty name="focus_image.image"}
<div class="banner img-responsives margin-top-90">
<img src="{$focus_image.image}" />
</div>
{/notempty}
<div class="narskfPage">
{notempty name="info_datas"}
<div class="narskf-content">
{assign name="chunks" value=":array_chunk($info_datas, 2)" /}
{assign name="sizeof_chunks" value=":count($chunks)" /}
{volist name="chunks" id="ch" key="k"}
{if condition="$k elt ($sizeof_chunks - 1)"}
<div class="narskf-ct-row">
{volist name="ch" id="item"}
<div class="narskfit" {notempty name="item.link"}onclick="location.href='{$item.link}'"{/notempty}>
<img src="{$item.image}" class="narskico-img" />
<span class="narskf-title">{$item.title}</span>
{notempty name="item.title_short"}
<span class="narskf-sm">{$item.title_short}</span>
{/notempty}
{notempty name="item.desc"}
{if condition="str_contains($item.desc, '<img')"}
<div class="narskfactive-ewm" style="display: none;">{$item.desc|raw}</div>
{/if}
{/notempty}
</div>
{/volist}
</div>
{else/}
{volist name="ch" id="item"}
<div class="narskf-ct-row">
<div class="narskfit narskfit2">
<img src="{$item.image}" class="narskico-img">
<div class="narskfit2-ct">
<span class="narskf-title">{$item.title}</span>
<span class="narskf-sm">{$item.desc|raw}</span>
</div>
</div>
</div>
{/volist}
{/if}
{/volist}
</div>
{/notempty}
</div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(document).ready(function() {
$('.narskfit').on('click', function() {
var $ewm = $(this).find('.narskfactive-ewm');
if ($ewm.css('display') === 'none') {
$ewm.css('display', 'flex');
} else {
$ewm.css('display', 'none');
}
});
});
</script>
{/block}

254
public/static/index/mobile/css/contact.css Executable file
View File

@@ -0,0 +1,254 @@
@charset "UTF-8";
.oricoEGapp-Contact {
/*新增*/
}
.oricoEGapp-Contact .banner {
position: relative;
margin-top: 3.3rem;
}
.oricoEGapp-Contact .banner_title {
font-family: "Montserrat-Bold";
font-size: 1.5rem;
position: absolute;
top: 50%;
margin-top: -0.75rem;
color: #fff;
z-index: 9;
text-align: center;
width: 100%;
}
.oricoEGapp-Contact .content {
background-color: #fff;
margin-top: 0.75rem;
padding: 2rem 1.25rem;
color: #000;
}
.oricoEGapp-Contact .title {
font-family: "Montserrat-Bold";
font-size: 1rem;
}
.oricoEGapp-Contact .info {
padding-top: 2.125rem;
padding-bottom: 2rem;
display: flex;
justify-content: flex-start;
}
.oricoEGapp-Contact .info .left {
width: 3rem;
height: 3rem;
margin-right: 1rem;
}
.oricoEGapp-Contact .info .left img {
width: 3rem;
height: 3rem;
}
.oricoEGapp-Contact .info .right .des {
font-family: "Montserrat-Regular";
font-size: 0.875rem;
line-height: 1.25rem;
}
.oricoEGapp-Contact .info_title {
font-family: "Montserrat-Bold";
font-size: 0.875rem;
line-height: 1.25rem;
margin-bottom: 0.22rem;
}
.oricoEGapp-Contact .m-t-20 {
margin-top: 1.11rem;
}
.oricoEGapp-Contact .question {
margin-top: 1.11rem;
}
.oricoEGapp-Contact .question .title {
margin-top: 0.5rem;
font-family: "Montserrat-Bold";
font-size: 0.875rem;
line-height: 1.25rem;
}
.oricoEGapp-Contact .question .des {
margin-top: 0.5rem;
}
.oricoEGapp-Contact .question .des input {
background-color: #f2f2f2;
border-radius: 0.5rem;
padding: 1rem;
width: calc(100% - 2rem);
width: -webkit-calc(100% - 2rem);
width: -moz-calc(100% - 2rem);
}
.oricoEGapp-Contact .question .des textarea {
background-color: #f2f2f2;
border-radius: 0.5rem;
padding: 1rem;
width: calc(100% - 2rem);
border: 1px solid transparent;
}
.oricoEGapp-Contact .send {
display: inline-block;
background-color: #004bfa;
font-family: "Montserrat-Bold";
font-size: 0.875rem;
padding: 0.75rem 1.5rem;
color: #fff;
border-radius: 1.25rem;
}
.oricoEGapp-Contact .red {
color: #ee2f53;
}
.oricoEGapp-Contact .contact_b {
font-family: "Montserrat-SemiBold";
font-size: 1rem;
padding-top: 1.125rem;
padding-bottom: 1.125rem;
color: #004bfa;
width: 100%;
text-align: center;
background-color: #fff;
margin-top: 0.67rem;
}
.oricoEGapp-Contact .contact_b a {
color: #004bfa;
}
.oricoEGapp-Contact .line {
width: 100%;
height: 1px;
background-color: #f1f1f1;
}
.oricoEGapp-Contact input::-webkit-input-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact input:-moz-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact input::-moz-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact input:-ms-input-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact textarea::-webkit-input-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact textarea:-moz-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact textarea::-moz-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact textarea:-ms-input-placeholder {
color: #9e9e9f;
font-size: 0.875rem;
font-family: "Montserrat-Regular";
}
.oricoEGapp-Contact .narskfPage {
width: 100%;
height: 100%;
background: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.oricoEGapp-Contact .narskfPage .narskf-content {
width: calc(100% - 20px);
display: flex;
flex-direction: column;
margin: 0 0.625rem;
padding-top: 0.625rem;
padding-bottom: 11.25rem;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit {
width: 50%;
height: 12rem;
border-radius: 0.125rem;
margin-right: 0.625rem;
margin-bottom: 0.625rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
cursor: pointer;
position: relative;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskf-title {
color: #262626;
font-size: 1rem;
text-align: center;
padding-top: 1rem;
padding-bottom: 0.5625rem;
font-weight: bold;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskf-sm {
color: #9a9a9a;
font-size: 0.75rem;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskf-font-26 {
color: #262626 !important;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskico-img {
width: 2.5rem;
height: 2.5rem;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskfactive-ewm {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 1;
display: none;
align-items: center;
justify-content: center;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit .narskfactive-ewm .narskfactiveimg {
width: 9.5rem;
width: 9.5rem;
position: absolute;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit2 {
width: 37rem;
height: 10rem;
flex-direction: row;
justify-content: flex-start;
padding-left: 53px;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit2 .narskico-img {
margin-right: 1.5rem;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit2 .narskfit2-ct {
display: flex;
flex-direction: column;
text-align: left;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit2 .narskfit2-ct .narskf-title {
padding-top: 0;
font-size: 1rem;
padding-bottom: 0.375rem;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit2 .narskfit2-ct .narskf-sm {
font-size: 0.75rem;
color: #9a9a9a;
}
.oricoEGapp-Contact .narskfPage .narskf-content .narskf-ct-row .narskfit:last-child {
margin-right: 0rem;
}