📦 保护区大事记页面

src/common/scss/define/colors.scss

@@ -1,6 +1,5 @@
 $colors: (
   primary: #d9492e,
- 
   text: #333232,
   text-content: #3d2c08,
   text-content-second: #817b67, 
@@ -8,12 +7,9 @@ $colors: (
   primary-second-text: rgba(217, 73, 46, 0.6),
   title-text: #432A04,
   second-text: #e6927e,
-  
   light-blue: #0059ff,
   light-primary: #d9492e35,
   light-light-primary: #d9492e15,
-
-
   success: #09ad32,
   warning: #FFD666,
   error: #ec4545,
@@ -27,7 +23,7 @@ $colors: (
   dark-purple: #7117a5,
   brown: #5f1a00,
   black: #000,
-  white: #FFFFFF,
+  white: #fff,
   base: #f6f2e7,
   custom: #4A5061,
   link: #0273F1,
@@ -38,10 +34,10 @@ $colors: (
   third: #999696,
   forth: #CCC8C8,
   place: #ece7da,
+  pure: #fff,
   mask-white: rgba(255, 255, 255, 0.6),
   mask-black: rgba(0, 0, 0, 0.6),
   disabled: #CCC8C8,
- 
   none: transparent,
   transparent: transparent,
 );

src/common/scss/fonts.scss

@@ -11,7 +11,7 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/pages.json

@@ -19,6 +19,12 @@
       }
     },
     {
+      "path": "pages/home/history",
+      "style": {
+        "navigationBarTitleText": "保护区大事记"
+      }
+    },
+    {
       "path": "pages/introduction/character/list",
       "style": {
         "navigationBarTitleText": "历史人物列表",

src/pages/home/history.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="d-flex flex-col bg-base">
+    <SimplePageContentLoader :loader="recordData">
+      <view class="main-time-line">
+        <view 
+          v-for="(item, index) in recordData.content.value"
+          :key="index"
+          class="item"
+          :class="index % 2 === 0 ? 'top' : 'bottom'"
+        >
+          <view class="time">
+            <text>{{ DataDateUtils.formatDate(item.publishAt, 'YYYY-MM') }}</text>
+          </view>
+          <view class="time2"></view>
+          <view class="box">
+            <view class="title">{{ item.title }}</view>
+            <view class="content">{{ item.desc }}</view>
+          </view>
+        </view>
+      </view>
+      <view class="height-150"></view>
+    </SimplePageContentLoader>
+  </view>
+</template>
+
+<script setup lang="ts">
+import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import { DataDateUtils } from '@imengyu/js-request-transform';
+
+const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
+  return (await CommonContent.getContentList(new GetContentListParams()
+    .setSelfValues({
+      order: 'publish_at',
+    })
+   .setModelId(18)
+   .setMainBodyColumnId(316)
+  , 1, 50)).list
+});
+</script>
+
+<style lang="scss">
+@use "sass:math";
+@use "sass:map";
+@use "@/common/scss/define/colors.scss" as *;
+
+.main-time-line {
+
+  $color-primary: map.get($colors, "primary");
+  $color-text: map.get($colors, "text");
+  $box-color: map.get($colors, "pure");
+  $size: 750rpx;
+
+  position: relative;
+  width: $size;
+
+  &::after {
+    background-color: $color-primary;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    width: 1px;
+    z-index: 10;
+    content: '';
+  }
+
+  .item {    
+    position: relative;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    width: 50%;
+    flex-shrink: 0;
+
+    &.top {  
+      transform: translateX(25rpx);
+
+      .time {
+        transform: translateX(55%);
+
+        &::before {
+          content: '◀';
+        }
+      }
+    }
+    &.bottom {
+      transform: translateX(math.div($size, 2) - 25rpx);
+      flex-direction: row;
+
+      .time {
+        text-align: right;
+        flex-direction: row-reverse;
+        transform: translateX(-53%);
+
+        &::before {
+          content: '▶';
+        }
+      }
+    }
+
+    .time2 {
+      width: 2rem;
+      flex-shrink: 0;
+    }
+    .time {
+      position: absolute;
+      display: flex;
+      top: calc(50% - 1rem);
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      color: $color-primary;
+      font-size: 0.8rem;
+
+      &::before {
+        font-size: 2rem;
+        margin: 0 10rpx;
+      }
+    }
+    .box {
+      background-color: $box-color;
+      padding: 20rpx;
+      border-radius: 10rpx;
+
+      .title {
+        font-size: 1rem;
+        color: $color-text;
+        margin-bottom: 15rpx;
+      }
+      .content {
+        font-size: 0.8rem;
+        color: $color-text;
+      }
+    }
+  }
+}
+
+</style>

src/pages/home/introduction.vue

@@ -19,6 +19,15 @@
         <SimplePageContentLoader :loader="introdData">
           <u-parse :content="introdData.content.value" :tag-style="commonParserStyle"></u-parse>
         </SimplePageContentLoader>
+
+        <!--保护区大事记-->
+        <view 
+          class="mt-4 d-flex flex-row justify-center align-center p-25 radius-base border-all-primary color-primary"
+          @click="navTo('./history')"
+        >
+          <text class="iconfont icon-task-history-4 size-lll mr-2"></text>
+          <text>保护区大事记</text>
+        </view>
       </view>
 
       <view class="d-flex flex-col mt-3">