feat: mobile联系我们页

app/index/controller/ContactUs.php

@@ -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);

app/index/view/mobile/contact_us/index.html

@@ -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}

public/static/index/mobile/css/contact.css

@@ -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;
+}