feat: 品牌里程

app/index/controller/AboutUs.php

@@ -0,0 +1,73 @@
+<?php
+declare (strict_types = 1);
+
+namespace app\index\controller;
+
+use app\index\model\SysBannerItemModel;
+use app\index\model\SysBannerModel;
+use think\facade\View;
+
+/**
+ * 关于我们控制器
+ */
+class AboutUs extends Common
+{
+    /**
+     * 品牌故事
+     */
+    public function story()
+    {  
+        // 获取品牌故事banner
+        $banners = SysBannerItemModel::hasWhere('banner', [
+                'language_id'  => $this->lang_id,
+                'unique_label' => 'BANNER_67ff632a5f7aa'
+            ])
+            ->type('image')
+            ->enabled(true)
+            ->visible(['id', 'title', 'title_txt_color', 'image', 'desc', 'desc_txt_color', 'link'])
+            ->order(['sort' => 'asc', 'id' => 'desc'])
+            ->select();
+        View::assign('banners', $banners);
+
+        return View::fetch('story');
+    }
+
+    /**
+     * 品牌里程
+     */
+    public function mileage()
+    {
+        $achievement = [];
+        $events      = [];
+        $development = [];
+
+        // 获取品牌里程banner
+        $banner = SysBannerModel::with(['items'])
+            ->uniqueLabel([
+                'BANNER_67ff786dc9c8d',
+                'BANNER_67ff7ef1354cf',
+                'BANNER_67ff7f37a0b67',
+            ])
+            ->language($this->lang_id)
+            ->enabled(true)
+            ->select();
+        if (!$banner->isEmpty()) {
+            $banner_map = [];
+            foreach ($banner as $v) {
+                $banner_map[$v->unique_label] = $v;
+            }
+            $achievement = $banner_map['BANNER_67ff786dc9c8d']->items->where('status', '=', 1)->toArray();
+            $events      = $banner_map['BANNER_67ff7ef1354cf']->items->where('status', '=', 1)->toArray();
+            $development = $banner_map['BANNER_67ff7f37a0b67']->items->where('status', '=', 1)->toArray();
+            // 排序（避免关联方法使用order排序bug）
+            array_multisort(array_column($achievement, 'sort'), SORT_ASC, array_column($achievement, 'id'), SORT_DESC, $achievement);
+            array_multisort(array_column($events, 'sort'), SORT_ASC, array_column($events, 'id'), SORT_DESC, $events);
+            array_multisort(array_column($development, 'sort'), SORT_ASC, array_column($development, 'id'), SORT_DESC, $development);
+        }
+        View::assign('achievement', $achievement);
+        View::assign('events', $events);
+        View::assign('development', $development);
+
+        return View::fetch('mileage');
+    }
+}

app/index/controller/Brand.php

@@ -1,43 +0,0 @@
-<?php
-declare (strict_types = 1);
-
-namespace app\index\controller;
-
-use app\admin\controller\v1\BannerItem;
-use app\index\model\SysBannerItemModel;
-use think\facade\View;
-
-/**
- * 品牌故事控制器
- */
-class Brand extends Common
-{
-    /**
-     * 品牌故事
-     */
-    public function story()
-    {  
-        // 获取品牌故事banner
-        $banners = SysBannerItemModel::hasWhere('banner', [
-                'language_id'  => $this->lang_id,
-                'unique_label' => 'BANNER_67ff632a5f7aa'
-            ])
-            ->type('image')
-            ->enabled(true)
-            ->visible(['id', 'title', 'title_txt_color', 'image', 'desc', 'desc_txt_color', 'link'])
-            ->order(['sort' => 'asc', 'id' => 'desc'])
-            ->select();
-        View::assign('banners', $banners);
-
-        return View::fetch('story');
-    }
-
-    /**
-     * 品牌里程
-     */
-    public function mileage()
-    {
-
-        return View::fetch('mileage');
-    }
-}

app/index/lang/en-us.php

@@ -40,5 +40,10 @@ return [
         'search_placeholder' => 'Search model',
         'no_data'            => 'No Result！',
         'no_video'           => 'No Video！',
-    ]
+    ],
+    'mileage' => [
+        'achievement' => 'Our Achievement',
+        'events'      => 'Brand Events',
+        'development' => 'Tech Development',
+    ],
 ];

app/index/lang/zh-cn.php

@@ -40,5 +40,10 @@ return [
         'search_placeholder' => '搜索型号',
         'no_data'            => '查询无结果！',
         'no_video'           => '查询无此视频！',
-    ]
+    ],
+    'mileage' => [
+        'achievement' => 'ORICO荣耀',
+        'events'      => '品牌里程',
+        'development' => '品牌活动',
+    ],
 ];

app/index/route/route.php

@@ -48,12 +48,12 @@ Route::group('faq', function() {
     Route::get('index', 'Faq/index');
 });
 
-// 品牌
+// 关于我们
-Route::group('brand', function() {
+Route::group('aboutus', function() {
     // 品牌故事
-    Route::get('story', 'Brand/story');
+    Route::get('story', 'AboutUs/story');
     // 品牌里程
-    Route::get('mileage', 'Brand/mileage');
+    Route::get('mileage', 'AboutUs/mileage');
 });
 
 // 数据迁移

app/index/view/about_us/mileage.html

@@ -0,0 +1,96 @@
+{extend name="public/base" /}
+{block name="style"}
+<link rel="stylesheet" href="__CSS__/achievement.css" />
+{/block}
+{block name="main"}
+<div class="orico_Page_achievement">
+    <div class="achievementMain">
+        <img src="__IMAGES__/Achievement.png" class="acvImg" />
+        <div class="achInfo">
+            <div class="title">{:lang('mileage.achievement')}</div>
+            {notempty name="achievement"}
+            <div class="achNums">
+                {volist name="achievement" id="ac"}
+                <div class="achive_shuju">
+                    <div class="title1" {notempty name="ac.desc_txt_color"}style="color:{$ac.desc_txt_color};"{/notempty}>{$ac.desc|raw}</div>
+                    <div class="subtitle1" {notempty name="ac.title_txt_color"}style="color:{$ac.title_txt_color};"{/notempty}>{$ac.title}</div>
+                </div>
+                {/volist}
+            </div>
+            {/notempty}
+        </div>
+        <div class="achTimes">
+            {notempty name="events"}
+            <div class="timecontent">
+                <div class="title">{:lang('mileage.events')}</div>
+                <div class="timelist">
+                    <div class="timeline-time">
+                        <ul class="event_year">
+                            {volist name="events" id="ev" key="k"}
+                            <li {eq name="k" value="1"}class="current"{/eq}>
+                                <label for="{$ev.title}" {notempty name="ev.title_txt_color"}style="color:{$ev.title_txt_color};"{/notempty}>{$ev.title}</label>
+                            </li>
+                            {/volist}
+                        </ul>
+                    </div>
+                    <div class="timeline-con">
+                        <div class="con_event_list">
+                            <ul class="event_list">
+                                {volist name="events" id="ev" key="k"}
+                                <div style="overflow: hidden; color: black;">
+                                    <h3 
+                                        id="{$ev.title}" 
+                                        {eq name="k" value="1"}class="backgroundimg"{/eq} 
+                                        {notempty name="ev.title_txt_color"}style="color:{$ev.title_txt_color};"{/notempty}
+                                        >
+                                        {$ev.title}
+                                    </h3>
+                                    <li {notempty name="ev.desc_txt_color"}style="color:{$ev.desctxt_color};"{/notempty}>{$ev.desc|raw}</li>
+                                </div>
+                                {/volist}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/notempty}
+        </div>
+        <div class="tech">
+            {notempty name="development"}
+            <div class="techcontent">
+                <div class="title">{:lang('mileage.development')}</div>
+                {volist name="development" id="de"}
+                <div class="techcon ">
+                    <div class="text">
+                        <img src="__IMAGES__/lichengbei.png">
+                        <div class="year" {notempty name="de.title_txt_color"}style="color:{$de.title_txt_color};"{/notempty}>{$de.title}</div>
+                        <div class="context" {notempty name="de.desc_txt_color"}style="color:{$de.desctxt_color};"{/notempty}>{$de.desc|raw}</div>
+                    </div>
+                    <div class="tech-img">
+                        <img src="{$de.image}" />
+                    </div>
+                </div>
+                {/volist}
+            </div>
+            {/notempty}
+        </div>
+    </div>
+</div>
+{/block}
+{block name="script"}
+<script type="text/javascript">
+    $(function() {
+        $('label').click(function() {
+            $('.event_year>li').removeClass('current');
+            $(this).parent('li').addClass('current');
+            var year = $(this).attr('for');
+            $('#' + year).parent().prevAll('div').slideUp(800);
+            $('#' + year).parent().slideDown(800).nextAll('div').slideDown(800);
+            $('#' + year).parent().css('color', "red").nextAll('div').css('color', "black")
+            // 			
+            $("h3").removeClass('backgroundimg')
+            $('#' + year).addClass('backgroundimg')
+        });
+    });
+</script>
+{/block}

public/static/index/css/achievement.css

@@ -1,7 +1,7 @@
 .orico_Page_achievement {
   width: 100%;
   position: relative;
-  height: 100vh;
+  min-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
   background: #f2f2f2;
@@ -55,6 +55,9 @@
   font-weight: bold;
   color: #000000;
 }
+.orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .title1 p {
+  font-family: inherit;
+}
 .orico_Page_achievement .achievementMain .achInfo .achNums .achive_shuju .subtitle1 {
   margin-top: 1rem;
   font-size: 1.125rem;
@@ -126,7 +129,7 @@
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list {
   width: 98%;
-  background: url(../achievementimg/greyline.png) 50px 0 repeat-y;
+  background: url(/static/index/images/greyline.png) 50px 0 repeat-y;
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div {
   overflow: hidden;
@@ -135,7 +138,7 @@
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div h3 {
   margin: 0 0 0 2.1875rem;
   padding-left: 2.5rem;
-  background: url(../achievementimg/greyyuandian.png) 3px 3px no-repeat;
+  background: url(/static/index/images/greyyuandian.png) 3px 3px no-repeat;
   height: 2.375rem;
   font-size: 1.25rem;
   font-family: Montserrat-Bold, Montserrat;
@@ -144,31 +147,17 @@
   line-height: 1.875rem;
 }
 .orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div .backgroundimg {
-  background: url(../achievementimg/yaundian.png) 3px 3px no-repeat !important;
+  background: url(/static/index/images/yaundian.png) 3px 3px no-repeat !important;
 }
-.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li p {
+.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li {
-  width: 90%;
-  margin-left: 1.5rem;
   display: inline-block;
-  padding-left: 0.625rem;
+  width: 100%;
+  font-family: Montserrat-Medium, Montserrat;
   line-height: 1.5625rem;
   font-size: 1rem;
-  margin-bottom: 0.625rem;
-  font-family: Montserrat-Medium, Montserrat;
   font-weight: 500;
   color: #707070;
-  line-height: 1.25rem;
+  padding: 0 0 1.24rem 4.6875rem;
-}
-.orico_Page_achievement .achievementMain .achTimes .timecontent .timelist .timeline-con .con_event_list .event_list div li p span {
-  font-family: Montserrat-Medium, Montserrat;
-  width: 100%;
-  text-align: left;
-  padding: 0 0.9375rem 0.625rem 0.9375rem;
-  background: #fff;
-  margin: 0;
-  margin-left: 1.875rem;
-  display: block;
-  float: left;
 }
 .orico_Page_achievement .achievementMain .tech {
   background: #fff;