diff --git a/app/index/controller/AboutUs.php b/app/index/controller/AboutUs.php index 12789f06..0a567d7d 100644 --- a/app/index/controller/AboutUs.php +++ b/app/index/controller/AboutUs.php @@ -88,6 +88,7 @@ class AboutUs extends Common $banner = SysBannerModel::with(['items' => function($query) { $query->where('status', '=', 1)->order(['sort' => 'asc', 'id' => 'desc']); }]) + ->atPlatform(request()->from) ->uniqueLabel([ 'BANNER_67ff786dc9c8d', 'BANNER_67ff7ef1354cf', diff --git a/app/index/lang/en-us/mobile.php b/app/index/lang/en-us/mobile.php index 4301e618..3ad65a6f 100644 --- a/app/index/lang/en-us/mobile.php +++ b/app/index/lang/en-us/mobile.php @@ -129,4 +129,16 @@ return [ '为您提供专属定制服务' => 'How We Can Help with Customization', '对于不同的情况' => 'For Different Situation', ], + + // 关于我们 - 文化介绍 + 'aboutus/culture' => [ + '文化介绍' => 'Culture Introduction', + ], + + // 关于我们 - 品牌历程 + 'aboutus/mileage' => [ + 'ORICO荣耀' => 'Our Achievement', + '品牌里程' => 'Brand Events', + '品牌活动' => 'Tech Development', + ], ]; \ No newline at end of file diff --git a/app/index/view/mobile/about_us/mileage.html b/app/index/view/mobile/about_us/mileage.html new file mode 100644 index 00000000..06c58a3e --- /dev/null +++ b/app/index/view/mobile/about_us/mileage.html @@ -0,0 +1,106 @@ +{extend name="public/base"/} +{block name="style"} + +{/block} +{block name="main"} +
+ +
+
+
+
+ +
+
{:lang_i18n('ORICO荣耀')}
+
+ {notempty name="achievement"} +
    + {volist name="achievement" id="ac"} +
  • +

    $ac['desc_txt_color']])}>{$ac.desc|raw}

    +

    $ac['title_txt_color']])}>{$ac.title}

    +
    • + {/volist} +
+ {/notempty} +
+
+ {notempty name="events"} +
+
{:lang_i18n('品牌里程')}
+
+
+ +
+
+
+ {volist name="events" id="ev"} +
$ev['title_txt_color']])}>{$ev.title}
+ {/volist} +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ {volist name="events" id="ev" key="k"} +
+
$ev['title_txt_color']])}>{$ev.title}
+

$ev['desc_txt_color']])}>{$ev.desc|raw}

+
+ {/volist} +
+ +
+
+ {/notempty} + {notempty name="development"} +
+
+
{:lang_i18n('品牌活动')}
+
+ {volist name="development" id="de"} +
+
+ +
+
+ {$de.title} +
+
{$de.desc|raw}
+
+ {/volist} +
+ {/notempty} +
+
+{/block} +{block name="script"} + +{/block} \ No newline at end of file diff --git a/public/static/index/mobile/css/aboutus_mileage.css b/public/static/index/mobile/css/aboutus_mileage.css new file mode 100644 index 00000000..4ff5c5a6 --- /dev/null +++ b/public/static/index/mobile/css/aboutus_mileage.css @@ -0,0 +1,709 @@ +.oricoCnLc .swiper-container { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + z-index: 1; +} + +.oricoCnLc .swiper-wrapper { + position: relative; + width: 90%; + z-index: 1; + display: flex; + transition-property: transform; + box-sizing: content-box; +} + +.oricoCnLc .swiper-container-android .swiper-slide, +.oricoCnLc .swiper-wrapper { + transform: translate3d(0px, 0, 0); +} + +.oricoCnLc .swiper-container-multirow>.swiper-wrapper { + flex-wrap: wrap; +} + +.oricoCnLc .swiper-container-multirow-column>.swiper-wrapper { + flex-wrap: wrap; + flex-direction: column; +} + +.oricoCnLc .swiper-container-free-mode>.swiper-wrapper { + transition-timing-function: ease-out; + margin: 0 auto; +} + +.oricoCnLc .swiper-container-pointer-events { + touch-action: pan-y; +} + +.oricoCnLc .swiper-container-pointer-events.swiper-container-vertical { + touch-action: pan-x; +} + +.oricoCnLc .swiper-slide { + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; + transition-property: transform; +} + +.oricoCnLc .swiper-slide-invisible-blank { + visibility: hidden; +} + +.oricoCnLc .swiper-container-autoheight, +.oricoCnLc .swiper-container-autoheight .swiper-slide { + height: auto; +} + +.oricoCnLc .swiper-container-autoheight .swiper-wrapper { + align-items: flex-start; + transition-property: transform, height; +} + +.oricoCnLc .swiper-container-3d { + perspective: 1200px; +} + +.oricoCnLc .swiper-container-3d .swiper-cube-shadow, +.oricoCnLc .swiper-container-3d .swiper-slide, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-bottom, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-left, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-right, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-top, +.oricoCnLc .swiper-container-3d .swiper-wrapper { + transform-style: preserve-3d; +} + +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-bottom, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-left, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-right, +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-top { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; +} + +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-left { + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); +} + +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-right { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); +} + +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-top { + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); +} + +.oricoCnLc .swiper-container-3d .swiper-slide-shadow-bottom { + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); +} + +.oricoCnLc .swiper-container-css-mode>.swiper-wrapper { + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.oricoCnLc .swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar { + display: none; +} + +.oricoCnLc .swiper-container-css-mode>.swiper-wrapper>.swiper-slide { + scroll-snap-align: start start; +} + +.oricoCnLc .swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper { + scroll-snap-type: x mandatory; +} + +.oricoCnLc .swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper { + scroll-snap-type: y mandatory; +} + +.oricoCnLc :root { + --swiper-navigation-size: 44px; +} + +.oricoCnLc .swiper-button-next, +.oricoCnLc .swiper-button-prev { + position: absolute; + top: 55%; + width: calc(var(--swiper-navigation-size) / 44 * 27); + height: var(--swiper-navigation-size); + margin-top: calc(0px - var(--swiper-navigation-size) / 2); + z-index: 10; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--swiper-navigation-color, var(--swiper-theme-color)); +} + +.oricoCnLc .swiper-button-next.swiper-button-disabled, +.oricoCnLc .swiper-button-prev.swiper-button-disabled { + opacity: 0.35; + cursor: auto; + pointer-events: none; +} + +.oricoCnLc .swiper-button-next:after, +.oricoCnLc .swiper-button-prev:after { + font-family: swiper-icons; + font-size: var(--swiper-navigation-size); + text-transform: none !important; + letter-spacing: 0; + text-transform: none; + font-variant: initial; + line-height: 1; + display: none; +} + +.oricoCnLc .swiper-button-prev, +.oricoCnLc .swiper-container-rtl .swiper-button-next { + left: 0; + right: auto; +} + +.oricoCnLc .swiper-button-next, +.oricoCnLc .swiper-container-rtl .swiper-button-prev { + right: -5px; + left: auto; +} + +.oricoCnLc .swiper-button-next.swiper-button-white, +.oricoCnLc .swiper-button-prev.swiper-button-white { + --swiper-navigation-color: #ffffff; +} + +.oricoCnLc .swiper-button-next.swiper-button-black, +.oricoCnLc .swiper-button-prev.swiper-button-black { + --swiper-navigation-color: #000000; +} + +.oricoCnLc .swiper-button-lock { + display: none; +} + +.oricoCnLc .swiper-pagination { + position: absolute; + text-align: center; + transition: 0.3s opacity; + transform: translate3d(0, 0, 0); + z-index: 10; +} + +.oricoCnLc .swiper-pagination.swiper-pagination-hidden { + opacity: 0; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-bullets, +.oricoCnLc .swiper-pagination-custom, +.oricoCnLc .swiper-pagination-fraction { + bottom: 10px; + left: 0; + width: 100%; +} + +.oricoCnLc .swiper-pagination-bullets-dynamic { + overflow: hidden; + font-size: 0; +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + transform: scale(0.33); + position: relative; +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { + transform: scale(1); +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { + transform: scale(1); +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { + transform: scale(0.66); +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { + transform: scale(0.33); +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { + transform: scale(0.66); +} + +.oricoCnLc .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { + transform: scale(0.33); +} + +.oricoCnLc .swiper-pagination-bullet { + width: 8px; + height: 8px; + display: inline-block; + border-radius: 50%; + background: #000; + opacity: 0.2; +} + +.oricoCnLc button.swiper-pagination-bullet { + border: none; + margin: 0; + padding: 0; + box-shadow: none; + -webkit-appearance: none; + appearance: none; +} + +.oricoCnLc .swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; +} + +.oricoCnLc .swiper-pagination-bullet-active { + opacity: 1; + background: var(--swiper-pagination-color, var(--swiper-theme-color)); +} + +.oricoCnLc .swiper-container-vertical>.swiper-pagination-bullets { + right: 10px; + top: 50%; + transform: translate3d(0px, -50%, 0); +} + +.oricoCnLc .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { + margin: 6px 0; + display: block; +} + +.oricoCnLc .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { + top: 50%; + transform: translateY(-50%); + width: 8px; +} + +.oricoCnLc .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + display: inline-block; + transition: 0.2s transform, 0.2s top; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { + margin: 0 4px; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { + left: 50%; + transform: translateX(-50%); + white-space: nowrap; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + transition: 0.2s transform, 0.2s left; +} + +.oricoCnLc .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { + transition: 0.2s transform, 0.2s right; +} + +.oricoCnLc .swiper-pagination-progressbar { + background: rgba(0, 0, 0, 0.25); + position: absolute; +} + +.oricoCnLc .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + background: var(--swiper-pagination-color, var(--swiper-theme-color)); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + transform: scale(0); + transform-origin: left top; +} + +.oricoCnLc .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + transform-origin: right top; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-progressbar, +.oricoCnLc .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { + width: 100%; + height: 4px; + left: 0; + top: 0; +} + +.oricoCnLc .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, +.oricoCnLc .swiper-container-vertical>.swiper-pagination-progressbar { + width: 4px; + height: 100%; + left: 0; + top: 0; +} + +.oricoCnLc .swiper-pagination-white { + --swiper-pagination-color: #ffffff; +} + +.oricoCnLc .swiper-pagination-black { + --swiper-pagination-color: #000000; +} + +.oricoCnLc .swiper-pagination-lock { + display: none; +} + +.oricoCnLc .swiper-scrollbar { + border-radius: 10px; + position: relative; + -ms-touch-action: none; + background: rgba(0, 0, 0, 0.1); +} + +.oricoCnLc .swiper-container-horizontal>.swiper-scrollbar { + position: absolute; + left: 1%; + bottom: 3px; + z-index: 50; + height: 5px; + width: 98%; +} + +.oricoCnLc .swiper-container-vertical>.swiper-scrollbar { + position: absolute; + right: 3px; + top: 1%; + z-index: 50; + width: 5px; + height: 98%; +} + +.oricoCnLc .swiper-scrollbar-drag { + height: 100%; + width: 100%; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; + left: 0; + top: 0; +} + +.oricoCnLc .swiper-scrollbar-cursor-drag { + cursor: move; +} + +.oricoCnLc .swiper-scrollbar-lock { + display: none; +} + +.oricoCnLc .swiper-zoom-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.oricoCnLc .swiper-zoom-container>canvas, +.oricoCnLc .swiper-zoom-container>img, +.oricoCnLc .swiper-zoom-container>svg { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.oricoCnLc .swiper-slide-zoomed { + cursor: move; +} + +.oricoCnLc .swiper-lazy-preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; + transform-origin: 50%; + animation: swiper-preloader-spin 1s infinite linear; + box-sizing: border-box; + border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); + border-radius: 50%; + border-top-color: transparent; +} + +.oricoCnLc .swiper-lazy-preloader-white { + --swiper-preloader-color: #fff; +} + +.oricoCnLc .swiper-lazy-preloader-black { + --swiper-preloader-color: #000; +} + +@keyframes swiper-preloader-spin { + 100% { + transform: rotate(360deg); + } +} + +.oricoCnLc .swiper-container .swiper-notification { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + opacity: 0; + z-index: -1000; +} + +.oricoCnLc .swiper-container-fade.swiper-container-free-mode .swiper-slide { + transition-timing-function: ease-out; +} + +.oricoCnLc .swiper-container-fade .swiper-slide { + pointer-events: none; + transition-property: opacity; +} + +.oricoCnLc .swiper-container-fade .swiper-slide .swiper-slide { + pointer-events: none; +} + +.oricoCnLc .swiper-container-fade .swiper-slide-active, +.oricoCnLc .swiper-container-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.oricoCnLc .swiper-container-cube { + overflow: visible; +} + +.oricoCnLc .swiper-container-cube .swiper-slide { + pointer-events: none; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 1; + visibility: hidden; + transform-origin: 0 0; + width: 100%; + height: 100%; +} + +.oricoCnLc .swiper-container-cube .swiper-slide .swiper-slide { + pointer-events: none; +} + +.oricoCnLc .swiper-container-cube.swiper-container-rtl .swiper-slide { + transform-origin: 100% 0; +} + +.oricoCnLc .swiper-container-cube .swiper-slide-active, +.oricoCnLc .swiper-container-cube .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.oricoCnLc .swiper-container-cube .swiper-slide-active, +.oricoCnLc .swiper-container-cube .swiper-slide-next, +.oricoCnLc .swiper-container-cube .swiper-slide-next+.swiper-slide, +.oricoCnLc .swiper-container-cube .swiper-slide-prev { + pointer-events: auto; + visibility: visible; +} + +.oricoCnLc .swiper-container-cube .swiper-slide-shadow-bottom, +.oricoCnLc .swiper-container-cube .swiper-slide-shadow-left, +.oricoCnLc .swiper-container-cube .swiper-slide-shadow-right, +.oricoCnLc .swiper-container-cube .swiper-slide-shadow-top { + z-index: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.oricoCnLc .swiper-container-cube .swiper-cube-shadow { + position: absolute; + left: 0; + bottom: 0px; + width: 100%; + height: 100%; + opacity: 0.6; + z-index: 0; +} + +.oricoCnLc .swiper-container-cube .swiper-cube-shadow:before { + content: ""; + background: #000; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + filter: blur(50px); +} + +.oricoCnLc .swiper-container-flip { + overflow: visible; +} + +.oricoCnLc .swiper-container-flip .swiper-slide { + pointer-events: none; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 1; +} + +.oricoCnLc .swiper-container-flip .swiper-slide .swiper-slide { + pointer-events: none; +} + +.oricoCnLc .swiper-container-flip .swiper-slide-active, +.oricoCnLc .swiper-container-flip .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} + +.oricoCnLc .swiper-container-flip .swiper-slide-shadow-bottom, +.oricoCnLc .swiper-container-flip .swiper-slide-shadow-left, +.oricoCnLc .swiper-container-flip .swiper-slide-shadow-right, +.oricoCnLc .swiper-container-flip .swiper-slide-shadow-top { + z-index: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.oricoCnLc .gallery-thumbs { + text-align: center; + line-height: 50px; + box-sizing: border-box; + width: 90%; + border-bottom: 1px solid #d4d4d4; + margin-bottom: 1.5rem; +} + +.oricoCnLc .gallery-thumbs .swiper-slide { + width: 4.2rem !important; + height: 90%; + margin-right: 0 !important; + text-align: center; + margin: auto; + font-size: 1rem; + color: #707070; + font-family: "Montserrat-Medium"; +} + +.oricoCnLc .gallery-thumbs .swiper-slide-thumb-active { + border-bottom: 3px solid #004bfa; + border-radius: 0px 0px 0px 0px; + opacity: 1; + color: #004bfa; +} + +.oricoCnLc .nav { + width: 96%; + margin: 0 auto; + position: relative; +} + +.oricoCnLc .gallery-top { + width: 84%; + background: #fff; + border-radius: 1rem; + -webkit-border-radius: 1rem; + -moz-border-radius: 1rem; + -ms-border-radius: 1rem; + -o-border-radius: 1rem; +} + +.oricoCnLc .info { + text-align: left; + font-size: 1rem; +} + +.oricoCnLc .info h5 { + font-size: #000; + font-size: 1rem; + font-family: "Montserrat-Bold"; + padding: 2rem 2rem 0 1rem; + margin: 0; +} + +.oricoCnLc .info p { + color: #707070; + font-family: "Montserrat-Regular"; + padding: 1rem; +} + +.oricoCnLc .m_ach-b { + width: 100%; + margin: auto; + text-align: center; +} + +.oricoCnLc .m_ach-b .title { + font-size: 1.125rem; + font-family: "Montserrat-Bold"; + width: 98%; + margin: auto; + position: relative; + padding: 2rem 0 1.5rem; +} + +.oricoCnLc .m_ach-b .chtitle { + font-size: 1.125rem; + font-family: "Montserrat-Bold"; + width: 98%; + margin: auto; + position: relative; + padding: 1rem 0 1.5rem; +} + +.oricoCnLc .m_ch { + width: 90%; + margin: 1.5rem auto 0; + text-align: center; + background: #fff; + padding: 2rem 1rem; +} + +.oricoCnLc .m_ch-title { + font-size: 1rem; + font-family: "Montserrat-Bold"; + width: 98%; + margin: 1rem auto 0; + padding: 1rem 0 0; + display: flex; + flex-direction: row; + align-items: center; +} + +.oricoCnLc .m_ch-con { + font-size: 0.875; + line-height: 1.5rem; + color: #707070; + font-family: "Montserrat-Regular"; + width: 98%; + margin: 1rem auto; + padding: 0; +} + +.oricoCnLc .ach-bg { + background: #f8f8f8; + width: 80%; + margin: 0 auto 1rem; + padding: 2rem; + border-radius: 1rem; + -webkit-border-radius: 1rem; + -moz-border-radius: 1rem; + -ms-border-radius: 1rem; + -o-border-radius: 1rem; +} \ No newline at end of file diff --git a/public/static/index/mobile/images/ach-icon.png b/public/static/index/mobile/images/ach-icon.png new file mode 100644 index 00000000..564bd815 Binary files /dev/null and b/public/static/index/mobile/images/ach-icon.png differ diff --git a/public/static/index/mobile/images/ach-left.webp b/public/static/index/mobile/images/ach-left.webp new file mode 100644 index 00000000..3473e1b8 Binary files /dev/null and b/public/static/index/mobile/images/ach-left.webp differ diff --git a/public/static/index/mobile/images/ach-right.webp b/public/static/index/mobile/images/ach-right.webp new file mode 100644 index 00000000..43111b08 Binary files /dev/null and b/public/static/index/mobile/images/ach-right.webp differ diff --git a/public/static/index/mobile/images/achievement.jpg b/public/static/index/mobile/images/achievement.jpg new file mode 100644 index 00000000..e3403eae Binary files /dev/null and b/public/static/index/mobile/images/achievement.jpg differ