📦 首页与发现页搭建

src/App.vue

@@ -1,8 +1,3 @@
-<style lang="scss">
-  @import "@/uni_modules/uview-plus/index.scss";
-	@import "@/common/common.scss";
-	@import "@/common/scss/global/base.scss";
-</style>
 <script setup lang="ts">
 import { onLaunch } from '@dcloudio/uni-app'
 import { useAuthStore } from './store/auth'
@@ -11,10 +6,23 @@ const authStore = useAuthStore();
 
 onLaunch(() => {
   console.log('App Launch');
+
+  uni.loadFontFace({
+    global: true,
+    family: "SongtiSCBlack",
+    source: 'url("https://mn.wenlvti.net/assets/fonts/STSongti-SC-Black.woff")',
+  })
+
   authStore.loadLoginState();
 })
 </script>
 
-<style>
-	/*每个页面公共css */
+<style lang="scss">
+  @import "@/uni_modules/uview-plus/index.scss";
+	@import "@/common/scss/fonts.scss";
+	@import "@/common/scss/common.scss";
+	@import "@/common/scss/global/base.scss";
 </style>
+
+<style></style>
+

src/common/common.scss

@@ -1,963 +0,0 @@
-@use "font.scss" as *;
-@use "font_num.scss" as *;
-
-page {
-  background: #F8F8F8;
-  color: #111111;
-}
-
-view {
-  font-size: 14px;
-  line-height: inherit;
-}
-
-.main {
-  padding: 32rpx;
-  &.white{
-    background: #fff;
-  }
-}
-
-.search {
-  margin-bottom: 20rpx;
-
-  ::v-deep .uni-searchbar__box {
-    border: 1px solid #6e6e6e;
-  }
-
-  &.with-button {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0;
-
-    ::v-deep {
-      .uni-searchbar {
-        width: 500rpx;
-      }
-      .u-button {
-        border-radius: 40rpx;
-      }
-    }
-  }
-}
-.text-center{
-  text-align: center!important;
-}
-.category {
-  display: flex;
-  margin-top: 40rpx;
-  margin-bottom: 38rpx;
-  align-items: flex-end;
-  &.sm{
-    .name{
-      font-size: 32rpx;
-    }
-  }
-  .name {
-    flex: 1;
-    font-size: 36rpx;
-    color: #111111;
-    font-weight: 600;
-    display: flex;
-  }
-
-  .more {
-    font-size: 24rpx;
-    color: #666666;
-  }
-}
-
-.artifact-list {
-  padding-bottom: 50rpx;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  .item {
-    margin-bottom: 36rpx;
-    position: relative;
-    overflow: hidden;
-    width: calc(50% - 15rpx);
-
-    .image-wrap {
-      width: 330rpx;
-      height: 330rpx;
-      background-size: cover;
-      background-position: center;
-      border-radius: 20rpx;
-    }
-
-    .name {
-      font-weight: 800;
-      font-size: 30rpx;
-      color: #333333;
-      margin-top: 20rpx;
-      width: 100%;
-      text-align: center;
-      height: 40rpx;
-      overflow: hidden;
-    }
-  }
-}
-.mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .iconfont {
-    font-size: 80rpx;
-    color: #fff;
-    position: absolute;
-  }
-}
-.post-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-
-  .item {
-    padding: 0;
-    margin-bottom: 38rpx;
-    background: #fff;
-    border-radius: 20rpx 20rpx 0 0;
-    overflow: hidden;
-    width: calc(50% - 10rpx);
-
-    &:active, &.pressed {
-      background: #efefef;
-    }
-
-    .image-wrap {
-      position: relative;
-      width: 330rpx;
-      height: 440rpx;
-      background: #fff center;
-      background-size: cover;
-
-      .like {
-        position: absolute;
-        right: 24rpx;
-        bottom: 20rpx;
-        z-index: 99;
-        color: #fff;
-        font-size: 24rpx;
-        &.liked{
-          color: #FF8719;
-          .iconfont {
-            color: #FF8719;
-          }
-        }
-        .iconfont {
-          font-size: 26rpx;
-          color: #fff;
-          display: inline-block;
-          margin-right: 6rpx;
-        }
-
-      }
-    }
-
-    .desc {
-      margin: 20rpx 16rpx 30rpx;
-      text-align: justify;
-      font-size: 28rpx;
-      color: #666666;
-      line-height: 48rpx;
-    }
-  }
-}
-.banner {
-  margin-top: 10rpx;
-  .swiper {
-    overflow: hidden;
-    height: 246rpx;
-    border-radius: 28rpx;
-    .item {
-      height: 100%;
-      image {
-        height: 100%;
-        width: 100%;
-        border-radius: 28rpx;
-        display: block;
-      }
-    }
-  }
-}
-.tag{
-  top: 0;
-  left: 0;
-  background: #FF8719;
-  border-radius: 20rpx 0rpx 20rpx 0rpx;
-  padding:10rpx 20rpx;
-  position: absolute;
-  z-index: 99;
-  color: #fff;
-  &.blue{
-    background: #24515D;
-  }
-}
-.category-tag{
-  font-size: 24rpx;
-  color:#fff;
-  margin-left: 10rpx;
-  display: flex;
-  align-items: flex-end;
-  text{
-    display: inline-block;
-    background:#FF8719;
-    padding:6rpx 10rpx;
-  }
-  .triangle{
-    padding: 0;
-    background:#FF8719;
-    height:10rpx; // 增加高度
-    width:24rpx; // 调整为正方形
-    clip-path: polygon(0 100%, 100% 0, 100% 100%);
-  }
-}
-/** 图文列表 水平 */
-.complex-list-horizontal-1 {
-  &.lg{
-    .item{
-      image, .image-wrapper,.u-image{
-        width: 262rpx;
-        height: 286rpx;
-        overflow: hidden;
-      }
-      .info{
-        .name{
-          margin-bottom: 10rpx;
-        }
-        .desc{
-          line-height: 45rpx;
-        }
-      }
-    }
-  }
-  .item {
-    padding: 0;
-    margin-bottom: 30rpx;
-    background: #fff;
-    display: flex;
-    position: relative;
-    border-radius: 20rpx;
-    overflow: hidden;
-    image,.image-wrapper,.u-image {
-      display: block;
-      border-radius: 20rpx;
-      width: 170rpx;
-      height: 190rpx;
-      flex-shrink: 0;
-      margin-right: 30rpx;
-      overflow: hidden;
-      background-color: #efefef;
-    }
-
-    .info {
-      padding-right: 30rpx;
-      .name {
-        margin-top: 32rpx;
-        font-size: 30rpx;
-        color: #312520;
-        font-weight: 600;
-        margin-bottom: 16rpx;
-        line-height: 48rpx;
-      }
-      .desc {
-        text-align: justify;
-        font-size: 28rpx;
-        color: #666666;
-        line-height: 48rpx;
-      }
-    }
-  }
-}
-.complex-list-horizontal-2 {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  .item {
-    padding: 0;
-    margin-bottom: 30rpx;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    border-radius: 20rpx;
-    overflow: hidden;
-    width: calc(50% - 15rpx);
-
-    image,.image-wrapper,.u-image {
-      display: block;
-      border-radius: 20rpx;
-      width: 100%;
-      height: 300rpx;
-      flex-shrink: 0;
-      overflow: hidden;
-      background-color: #efefef;
-    }
-
-    .desc {
-      text-align: justify;
-      font-size: 28rpx;
-      color: #666666;
-      line-height: 48rpx;
-      padding: 10rpx 20rpx; 
-    }
-  }
-}
-.ellipsis-1 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ellipsis-2 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ellipsis-4 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.entrance{
-  background: #FFFFFF;
-  padding:24rpx 38rpx;
-  border-radius: 20rpx;
-  margin-bottom: 42rpx;
-  margin-top: 10rpx;
-  display: flex;
-  flex-wrap: nowrap;
-  .item{
-    text-align: center;
-    width: 25%;
-    image{
-      width: 95rpx;
-      height: 95rpx;
-    }
-    .title{
-      font-weight: 600;
-      font-size: 28rpx;
-      color: #111111;
-      margin-top: 12rpx;
-    }
-  }
-
-}
-.intro-block {
-  background: #FFFFFF;
-  border-radius: 10rpx;
-
-  .title {
-    font-weight: 600;
-    font-size: 36rpx;
-    color: #111111;
-    padding-top: 36rpx;
-    display: flex;
-    align-items: center;
-
-    .line {
-      background: #FF8719;
-      border-radius: 3rpx;
-      margin-right: 14rpx;
-      width: 6rpx;
-      height: 38rpx;
-    }
-  }
-
-  .desc {
-    font-size: 28rpx;
-    color: #000000;
-    line-height: 56rpx;
-    padding: 38rpx 20rpx 42rpx;
-    text-indent: 2em;
-    &.no-indent {
-      text-indent: 0;
-    }
-    view.entry{
-      display: flex;
-      margin-bottom: 30rpx;
-      view.label{
-        font-weight: 600;
-        font-size: 28rpx;
-        color: #000000;
-        margin-right: 10rpx;
-      }
-    }
-  }
-}
-::v-deep .swiper .wx-swiper-dot {
-  width: 16rpx;
-  height: 16rpx;
-  background: rgba(0,0,0,0.5);
-  border: 4rpx solid #fff;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-}
-
-::v-deep .swiper .wx-swiper-dot-active {
-  width: 44rpx;
-  height: 16rpx;
-  background: #FF8719;
-  border-radius: 20rpx;
-  border: 4rpx solid #FFFFFF;
-  opacity: 1;
-}
-::v-deep  .swiper.right-indicator .wx-swiper-dots {
-  left: inherit;
-  right: -20rpx;
-}
-.compound-list.scene-list {
-  .item {
-    flex-direction: column;
-    height: 370rpx;
-    image{
-      display: block;
-      width: 100%;
-      height:282rpx;
-    }
-    .info{
-      display: flex;
-      padding:20rpx;
-      justify-content: center;
-      .name{
-        flex:1;
-        margin-top: 6rpx;
-      }
-      .desc{
-        color:#24515D;
-        font-size: 24rpx;
-        text.iconfont{
-          font-size: 24rpx;
-          color:#999999;
-          display: inline-block;
-          margin-left: 6rpx;
-        }
-      }
-    }
-  }
-}
-/**
-  上图下标题
- */
-.complex-list-vertical-1 {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .item {
-    width: calc(50% - 15rpx);
-    margin-bottom: 53rpx;
-    position: relative;
-    .tag{
-
-    }
-    image {
-      width: 100%;
-      height: 360rpx;
-      display: block;
-    }
-
-    .info {
-      text-align: center;
-      padding-top: 20rpx;
-      font-weight: bold;
-      font-size: 30rpx;
-      color: #312520;
-    }
-  }
-}
-.complex-list-vertical-2{
-  .item{
-    margin-bottom: 35rpx;
-    image{
-      width: 687rpx;
-      height: 287rpx;
-      display: block;
-      border-radius: 10rpx;
-    }
-    .info{
-      background: #FFFFFF;
-      display: flex;
-      padding:24rpx 20rpx 29rpx;
-      font-size: 24rpx;
-      color: #24515D;
-      align-items: center;
-      .name{
-        flex:1;
-        font-weight: 600;
-        font-size: 30rpx;
-        color: #111111
-      }
-      text.iconfont{
-        color:#999999;
-      }
-    }
-  }
-}
-/**
-  图文横向滑动
-**/
-.complex-swiper {
-  /* 小一号的尺寸 首页用 */
-  &.sm{
-    .swiper{
-      height: 254rpx;
-
-    }
-    .item{
-      height:100%;
-      width: 425rpx;
-    }
-    .name{
-      right:28rpx;
-      bottom: 22rpx;
-    }
-  }
-  &.lg{
-    .swiper{
-      height: 360rpx;
-      .item{
-        width: 580rpx;
-        height: 360rpx;
-        transform: scale(0.8);
-        transition: transform 0.3s ease;
-        position: relative;
-        &.active {
-          transform: scale(1);
-        }
-      }
-    }
-  }
-  .swiper {
-    height: 300rpx;
-  }
-  .item {
-    width: 514rpx;
-    height: 300rpx;
-    position: relative;
-    border-radius: 20rpx;
-    overflow: hidden;
-    image {
-      width: 100%;
-      height: 100%;
-    }
-    .name {
-      position: absolute;
-      bottom: 34rpx;
-      right: 22rpx;
-      color: #fff;
-      font-weight: 600;
-      font-size: 28rpx;
-    }
-  }
-}
-.threeD {
-  width: 36rpx;
-  height: 36rpx;
-  background: rgba(0, 0, 0, 0.57);
-  border-radius: 50%;
-  position: absolute;
-  top: 15rpx;
-  left: 205rpx;
-  z-index: 99;
-  text-align: center;
-
-  text {
-    color: #fff;
-    font-size: 24rpx;
-  }
-}
-page > view{
-  padding-bottom: 120rpx;
-}
-.img-banner {
-  height: 246rpx;
-  width: 100%;
-  border-radius: 20rpx;
-  margin-bottom: 40rpx;
-  overflow: hidden;
-  image {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.level-info {
-  padding: 48rpx 36rpx 36rpx;
-  background: #FFF2E6;
-  border-radius: 20rpx;
-  position: relative;
-  margin-bottom: 40rpx;
-  > view:first-child {
-    margin-bottom: 44rpx;
-  }
-
-  .label {
-    font-size: 28rpx;
-    color: #111111;
-    display: inline-block;
-  }
-
-  .value {
-    font-weight: bold;
-    font-size: 28rpx;
-    display: inline-block;
-    color: #333333;
-
-    .em {
-      font-family: Rockwell;
-      font-weight: 600;
-      font-size: 30rpx;
-      color: #FF8719;
-      display: inline-block;
-      margin-left: 35rpx;
-    }
-  }
-
-  .btn {
-    position: absolute;
-    top: 30rpx;
-    right: 30rpx;
-    border-radius: 10rpx;
-    border: 1px solid #FF8719;
-    padding: 15rpx 20rpx;
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 28rpx;
-    color: #FF8719;
-
-    text.iconfont {
-      display: inline-block;
-      margin-right: 15rpx;
-      font-size: 40rpx;
-    }
-  }
-}
-.task-list{
-  .item{
-    display: flex;
-    align-items: center;
-    background: #fff;
-    margin-bottom: 36rpx;
-    padding:39rpx 27rpx 38rpx;
-    text.iconfont{
-      width: 91rpx;
-      height: 91rpx;
-      border-radius: 50%;
-      border: 1px solid #25515E;
-      text-align: center;
-      color: #25515E;
-      font-size: 60rpx;
-      line-height: 91rpx;
-      display: inline-block;
-      margin-right: 17rpx;
-    }
-    .btn{
-      background: #FF8719;
-      border-radius: 28rpx;
-      color:#fff;
-      font-size: 28rpx;
-      padding:14rpx 38rpx;
-      &.active{
-        background: #EFEFEF;
-        color:#999999;
-      }
-    }
-    .info{
-      flex:1;
-      .title{
-        font-weight: 600;
-        font-size: 30rpx;
-        color: #333333;
-        margin-bottom: 22rpx;
-      }
-      .desc{
-        font-weight: 400;
-        font-size: 24rpx;
-        color: #999999;
-      }
-    }
-  }
-}
-.people-list{
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .item{
-    width: 214rpx;
-    background: #fff;
-    text-align: center;
-    position: relative;
-    margin-bottom: 24rpx;
-    padding-top: 80rpx;
-    padding-bottom: 40rpx;
-    border-radius: 10rpx;
-    image.avatar{
-      width: 90rpx;
-      height: 90rpx;
-      border-radius: 50%;
-      margin-bottom: 38rpx;
-    }
-    .name{
-      font-weight: 800;
-      font-size: 30rpx;
-      color: #333333;
-      margin-bottom: 20rpx;
-    }
-    .days{
-      font-weight: 500;
-      font-size: 24rpx;
-      color: #999999;
-    }
-    .rank{
-      position: absolute;
-      top: 35rpx;
-      left: 17rpx;
-      font-size: 48rpx;
-      line-height: 35rpx;
-      color:#B6B6B6;
-      font-style: italic;
-      font-family: Rockwell;
-      &.top{
-        color: #FF8719;
-        font-size: 60rpx;
-      }
-      .num-shadow{
-        width: 45rpx;
-        height: 45rpx;
-        position: absolute;
-        left: 30rpx;
-        top: 0;
-      }
-    }
-  }
-
-}
-button[type="primary"] {
-  background: #FF8719;
-  border-radius: 16rpx;
-  font-size: 28rpx;
-  padding: 8rpx;
-  color: #FFFFFF;
-  font-weight: 600;
-}
-.form-title {
-  font-size: 32rpx;
-  color: #333;
-  margin-bottom: 28rpx;
-  margin-top: 30rpx;
-  display: flex;
-  align-items: center;
-  .line {
-    background: #FF8719;
-    border-radius: 3rpx;
-    margin-right: 22rpx;
-    width: 6rpx;
-    height: 34rpx;
-  }
-}
-.form-block {
-  margin-bottom: 32rpx;
-  padding: 24rpx 26rpx;
-  background: #fff;
-  border-radius: 10rpx;
-}
-
-::v-deep .uni-forms-item__label {
-  font-weight: 600;
-  font-size: 28rpx;
-  color: #23262D;
-  line-height: 36rpx;
-}
-
-::v-deep .uni-select {
-  border-radius: 10rpx;
-  //border: 1px solid #ececec;
-  padding: 16rpx 24rpx;
-  font-size: 28rpx;
-  background: #fff;
-}
-
-::v-deep .uni-date-x--border {
-  border-radius: 10rpx;
-  //border: 1px solid #BFBFBF;
-}
-
-::v-deep .uni-input-placeholder, ::v-deep .uni-textarea-placeholder, ::v-deep .uni-select__input-placeholder, ::v-deep .uni-date__x-input, ::v-deep .is-disabled .uni-easyinput__placeholder-class {
-  font-weight: 400;
-  font-size: 28rpx;
-  color: #999999;
-}
-
-::v-deep .uni-easyinput__content.is-disabled {
-  background-color: #fff;
-  cursor: pointer;
-}
-
-.address-select {
-  position: relative;
-  width: 100%; // 添加宽度
-  height: 100%;
-}
-
-.input-wrapper {
-  width: 100%;
-  height: 100%;
-  pointer-events: none; /* 禁用内部元素的点击事件 */
-}
-
-::v-deep .uni-easyinput__content.is-disabled {
-  background-color: #fff;
-  cursor: pointer;
-  width: 100%; // 确保输入框宽度占满
-}
-
-::v-deep .popup-content {
-  text-align: center;
-  background: #FFFFFF;
-  border-radius: 20rpx;
-  padding: 22rpx 44rpx 37rpx;
-
-  image {
-    width: 158rpx;
-    height: 186rpx;
-    display: block;
-    margin: 0 auto;
-    margin-bottom: 12rpx;
-  }
-
-  text {
-    font-weight: 500;
-    font-size: 24rpx;
-    color: #666666;
-  }
-}
-.uni-datetime-picker--btn{
-  background:#FF8719!important;
-}
-.bottom-actions {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  height: 75rpx;
-  background: #FFFFFF;
-
-  .action {
-    margin-left: 48rpx;
-    font-weight: 800;
-    font-size: 24rpx;
-    color: #191919;
-    display: flex;
-    align-items: center;
-
-    &:last-child {
-      margin-right: 70rpx;
-    }
-
-    .iconfont {
-      font-size: 30rpx;
-      margin-right: 14rpx;
-    }
-
-    .iconfont.icon-liked {
-      color: #FF8719;
-    }
-  }
-}
-
-.article {
-  .title {
-    font-weight: 800;
-    font-size: 36rpx;
-    color: #1E1E1E;
-    line-height: 60rpx;
-    margin-top: 10rpx;
-  }
-
-  .content {
-    padding-bottom: 100rpx;
-  }
-
-  .info {
-    display: flex;
-    align-items: center;
-    margin-top: 25rpx;
-    margin-bottom: 45rpx;
-
-    .author {
-      font-size: 24rpx;
-      color: #FF8719;
-      margin-right: 16rpx;
-    }
-
-    .time {
-      font-size: 24rpx;
-      color: #999999;
-    }
-  }
-}
-.main-img{
-  width: 100%;
-  height: 394rpx;
-  display: block;
-  image{
-    height: 100%;
-    width: 100%;
-  }
-}
-.article {
-  .title {
-    font-weight: 800;
-    font-size: 36rpx;
-    color: #1E1E1E;
-    line-height: 60rpx;
-    margin-top: 10rpx;
-  }
-
-  .content {
-    padding-bottom: 100rpx;
-  }
-
-  .info {
-    display: flex;
-    align-items: center;
-    margin-top: 25rpx;
-    margin-bottom: 45rpx;
-
-    .author {
-      font-size: 24rpx;
-      color: #FF8719;
-      margin-right: 16rpx;
-    }
-
-    .time {
-      font-size: 24rpx;
-      color: #999999;
-    }
-  }
-}

src/common/scss/common.scss

@@ -0,0 +1,32 @@
+.home-title {
+  font-size: 35rpx;
+  margin: 40rpx 0 20rpx 0;
+  color: #432A04;
+  font-family: "SongtiSCBlack";
+
+  .more {
+    font-size: 30rpx;
+  }
+  text {
+    font-family: "SongtiSCBlack";
+  }
+
+  &.has-more {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+}
+.home-container {
+  padding-bottom: 200rpx;
+
+  > .title {
+    left: 40rpx;
+    top: calc(var(--status-bar-height) + 50rpx);
+  }
+  > .content {
+    margin-top: 30vh;
+    z-index: 1;
+  }
+}

src/common/scss/define/colors.scss

@@ -1,8 +1,11 @@
 $colors: (
   primary: #d9492e,
   primary-text: #D9492E,
+  primary-second-text: rgba(217, 73, 46, 0.6),
   second-text: #e6927e,
   light-blue: #0059ff,
+  light-primary: #d9492e35,
+  light-light-primary: #d9492e15,
   success: #09ad32,
   warning: #FFD666,
   error: #ec4545,
@@ -30,6 +33,8 @@ $colors: (
   third: #999696,
   forth: #CCC8C8,
   place: #CCC8C8,
+  mask-white: rgba(255, 255, 255, 0.6),
+  mask-black: rgba(0, 0, 0, 0.6),
   page: #FAFAFA,
   disabled: #CCC8C8,
   none: transparent,

src/common/scss/global/base.scss

@@ -67,3 +67,18 @@
 		/* #endif */
 	}
 }
+
+.overflow {
+	&-hidden {
+		overflow: hidden;
+	}
+	&-scroll {
+		overflow: scroll;
+	}
+	&-auto {
+		overflow: auto;
+	}
+	&-visible {
+		overflow: visible;
+	}
+}

src/common/scss/global/shadow.scss

@@ -2,10 +2,18 @@
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }
 
+.shadow-s {
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075) !important;
+}
+
 .shadow {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
 
+.shadow-l {
+  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.175) !important;
+}
+
 .shadow-lg {
   box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
 }

src/common/scss/global/size.scss

@@ -15,6 +15,9 @@ $full-width: 750rpx;
 	}
 }
 .width {
+	&-auto {
+		width: auto;
+	}
 	&-full {
 		width: $full-width;
 	}

src/pages/discover.vue

@@ -1,11 +1,221 @@
 <template>
-  <view class="d-flex flex-col">
-  </view>
+  <view class="home-container page-discover d-flex flex-col bg-base">
+    <image 
+      class="position-absolute title"
+      src="/static/images/discover/Title.png"
+      mode="widthFix"
+    />
+    <view class="content d-flex flex-col wing-l">
+      
+      <!-- 文化百科 -->
+      <view class="home-title">
+        <text>文化百科</text>
+      </view>
+      <view class="d-flex flex-row justify-between">
+        <view 
+          v-for="(item, i) in categories" 
+          :key="i"
+          class="d-flex flex-col align-center"
+        >
+          <image :src="item.icon" class="width-100 height-100" />
+          <text class="width-130 text-align-center mt-2 color-primary size-s">{{ item.name }}</text>
+        </view>
+      </view>
+
+      <!-- 闽南语猜猜猜 -->
+      <view class="home-title">
+        <text>闽南语猜猜猜</text>
+      </view>
+      <view class="d-flex w-100 flex-row align-center bg-light-light-primary radius-base mt-3 mb-3 p-2">
+        <image class="width-100 height-100 radius-base" src="/static/images/discover/PlayButtonLarge.png" mode="aspectFill" />
+        <view class="d-flex flex-col ml-3 flex-one">
+          <text class="color-primary">听语音猜词语</text>
+          <text class="color-primary-second-text">每日更新，赢取积分</text>
+        </view>
+        <text class="iconfont icon-arrow-right color-primary" />
+      </view>
+
+      <!-- 文化挑战 -->
+      <view class="home-title">
+        <text>文化挑战</text>
+      </view>
+      <view class="d-flex w-100 flex-row align-center justify-between bg-light-light-primary radius-base mt-1 p-2 pt-3 pb-3">
+        <view class="d-flex flex-col ml-3 flex-one">
+          <text class="color-primary">方言配音大赛</text>
+          <text class="color-primary-second-text">参与人数：1,234</text>
+        </view>
+        <image class="width-60 height-60 radius-base" src="/static/images/discover/IconCup.png" mode="aspectFill" />
+      </view>
+      <view class="d-flex w-100 flex-row align-center justify-between bg-light-light-primary radius-base mt-3 p-2 pt-3 pb-3">
+        <view class="d-flex flex-col ml-3 flex-one">
+          <text class="color-primary">闽南知识问答</text>
+          <text class="color-primary-second-text">可获积分：500</text>
+        </view>
+        <view class="width-1-5">
+          <u-button shape="circle" type="primary">立即报名</u-button>
+        </view>
+      </view>
+
+      <!-- 文化社区 -->
+      <view class="home-title">
+        <text>文化社区</text>
+      </view>
+      
+      <view class="d-flex w-100 flex-row flex-wrap align-center justify-between">
+        <view 
+          v-for="(item, i) in communityData"
+          :key="i"
+          class="grid4-item shadow radius-l bg-base p-2 mb-2"
+        >
+          <image class="w-100 radius-base" :src="item.image" mode="widthFix" />
+          <view class="d-flex flex-row align-center mt-2">
+            <image class="width-60 mr-2" :src="item.userHead" mode="widthFix" />
+            <text class="size-s">{{ item.userName }}</text>
+          </view>
+          <text class="color-primary">{{ item.userInfo }}</text>
+          <view class="d-flex flex-row mt-2">
+            <image class="width-40 mr-2" :src="IconHeart" mode="widthFix" />
+            <text class="size-s mr-3">{{ item.likes }}</text>
+            <image class="width-40 mr-2" :src="IconChat" mode="widthFix" />
+            <text class="size-s">{{ item.comment }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 老照片 -->
+      <view class="home-title has-more">
+        <text>老照片</text>
+        <text class="more">
+          查看全部
+          <text class="iconfont icon-arrow-right ml-2" />
+        </text>
+      </view>
+      <scroll-view scroll-x>
+        <view class="d-flex flex-row">
+          <view v-for="(item, i) in imagesData" :key="i" class="mr-2">
+            <image class="width-300 radius-base" :src="item.image" mode="widthFix" />
+          </view>
+        </view>
+      </scroll-view>
+
+      <!-- 热门话题 -->
+      <view class="home-title">
+        <text>热门话题</text>
+      </view>
+      <view class="d-flex flex-col">
+        <view 
+          v-for="(item, i) in topicsData" 
+          :key="i" 
+          class="d-flex flex-row justify-between shadow-s radius-base mt-3 p-2 pt-3 pb-3">
+          <view class="d-flex flex-col ml-3 flex-one">
+            <text class="color-primary">{{ item.title }}</text>
+            <text class="color-second mt-2">{{ item.desc }}</text>
+          </view>
+          <text class="color-primary-second-text size-ss">{{ item.right }}</text>
+        </view>
+      </view>
+
+    </view>
+  </view> 
   <tabbar :current="1"></tabbar>
 </template>
 
 <script setup lang="ts">
 import Tabbar from '@/common/components/tabs/tabbar.vue';
+import CategoryIcon1 from '/static/images/discover/CategoryIcon1.png';
+import CategoryIcon2 from '/static/images/discover/CategoryIcon2.png';
+import CategoryIcon3 from '/static/images/discover/CategoryIcon3.png';
+import CategoryIcon4 from '/static/images/discover/CategoryIcon4.png';
+import CategoryIcon5 from '/static/images/discover/CategoryIcon5.png';
+import ImageTest2 from '/static/images/home/ImageTest2.png';
+import ImageTest3 from '/static/images/home/ImageTest3.png';
+import ImageTest4 from '/static/images/home/ImageTest4.png';
+import ImageTest5 from '/static/images/home/ImageTest5.png';
+import IconHeart from '/static/images/discover/IconHeart.png';
+import IconChat from '/static/images/discover/IconChat.png';
+import UserHead from '/static/images/home/UserHead.png';
+
+const categories = [
+  { name: '民俗文化', icon: CategoryIcon1 },
+  { name: '建筑遗产', icon: CategoryIcon2 },
+  { name: '戏曲艺术', icon: CategoryIcon3 },
+  { name: '闽南美食', icon: CategoryIcon4 },
+  { name: '宗教信仰', icon: CategoryIcon5 },
+]
+const communityData = [
+  { 
+    title: '茶艺传承作坊', 
+    image: ImageTest4,
+    likes: 123,
+    comment: 66,
+    userHead: UserHead,
+    userName: 'Regular',
+  },
+  { 
+    title: '茶艺传承作坊', 
+    image: ImageTest2,
+    likes: 123,
+    comment: 66,
+    userHead: UserHead,
+    userName: 'Regular',
+  },
+  { 
+    title: '茶艺传承作坊', 
+    image: ImageTest3,
+    likes: 123,
+    comment: 66,
+    userHead: UserHead,
+    userName: 'Regular',
+  },
+  { 
+    title: '茶艺传承作坊', 
+    image: ImageTest5,
+    likes: 123,
+    comment: 66,
+    userHead: UserHead,
+    userName: 'Regular',
+  },
+]
+const imagesData = [
+  {
+    image: ImageTest2,
+  },
+  {
+    image: ImageTest3, 
+  },
+  {
+    image: ImageTest4,
+  },
+  {
+    image: ImageTest5,  
+  }
+]
+const topicsData = [
+  {
+    title: '宗族文化探讨',
+    desc: '关于闽南宗教的传承与发展',
+    right: '234 人参与讨论', 
+  },
+  {
+    title: '宗族文化探讨',
+    desc: '关于闽南宗教的传承与发展',
+    right: '234 人参与讨论', 
+  },
+]
+
+</script>
 
+<style lang="scss">
+.page-discover {
+  > .content {
+    margin-top: 10vh;
+  }
+  > .title {
+    width: 100rpx;
+  }
 
-</script>
+  .grid4-item {
+    width: 300rpx;
+  }
+}
+</style>

src/pages/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="home d-flex flex-col bg-base">
+  <view class="home-container page-home d-flex flex-col bg-base">
     <image 
       class="w-100 position-absolute"
       src="/static/images/home/BackgroundBanner.png"
@@ -11,6 +11,8 @@
       mode="widthFix"
     />
     <view class="content d-flex flex-col wing-l">
+
+      <!-- 分栏 -->
       <view class="shadow-lg radius-l bg-base p-3">
         <image 
           class="w-100"
@@ -19,7 +21,25 @@
         />
         <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
           <view  
-            v-for="(tab, k) in subTabs" 
+            v-for="(tab, k) in subTabs1" 
+            :key="k"
+            class="d-flex flex-column align-center width-1-5 mt-2"
+          >
+            <image class="width-100" :src="tab.icon" mode="widthFix" />
+            <text class="color-second-text mt-2">{{ tab.name }}</text>
+          </view>
+
+          <view class="d-flex w-100 flex-row align-center bg-light-light-primary radius-base mt-3 mb-3 p-3">
+            <image class="width-150 height-150 radius-base" src="/static/images/home/ImageTest.png" mode="aspectFill" />
+            <view class="d-flex flex-col ml-3 flex-one">
+              <text class="color-second-text">里厚吖：你好呀</text>
+              <image class="width-50 height-50 mt-3" src="/static/images/home/PlayButtonSmall.png" />
+            </view>
+            <text class="iconfont icon-arrow-right color-primary" />
+          </view>
+
+          <view  
+            v-for="(tab, k) in subTabs2" 
             :key="k"
             class="d-flex flex-column align-center width-1-5 mt-2"
           >
@@ -28,6 +48,87 @@
           </view>
         </view>
       </view>
+
+      <!-- 文化地图 -->
+      <view class="home-title">
+        <text class="font-SongtiSCBlack">文化地图</text>
+      </view>
+      <view class="position-relative radius-l overflow-hidden">
+        <map 
+          class="w-100 height-400"
+        />
+        <view class="position-absolute map-tags d-flex flex-row">
+          <view class="active">
+            <text class="iconfont icon-read" />
+            文物
+          </view>
+          <view>
+            <text class="iconfont icon-task-trip" />
+            非遗
+          </view>
+          <view>
+            <text class="iconfont icon-tougao-01" />
+            传习所
+          </view>
+        </view>
+      </view>
+
+      <!-- 近期活动 -->
+      <view class="home-title">
+        <text>近期活动</text>
+      </view>
+
+      <view class="d-flex flex-col shadow-lg radius-l bg-base p-3">
+        <image 
+          class="w-100 radius-base"
+          src="/static/images/home/ImageTest.png"
+          mode="widthFix"
+        />
+        <view class="d-flex flex-row justify-between mt-3">
+          <text class="color-primary size-l">茶艺传承工坊</text>
+          <text class="color-primary">剩余名额：8</text>
+        </view>
+        <view class="d-flex flex-row justify-between align-center mt-3">
+          <view class="d-flex flex-one flex-col">
+            <text class="color-second size-l">
+              <text class="iconfont icon-read mr-2" />
+              湖里创新园
+            </text>
+            <text class="color-second">
+              <text class="iconfont icon-time mr-2" />
+              2025年06月16日 12:00
+            </text>
+          </view>
+          <view class="width-1-5">
+            <u-button shape="circle" type="primary">立即报名</u-button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 精彩推荐 -->
+      <view class="home-title">
+        <text>精彩推荐</text>
+      </view>
+
+      <view class="d-flex flex-row justify-between flex-wrap">
+        <view 
+          v-for="(tab, k) in recommend"
+          :key="k"
+          class="grid4-item position-relative mb-3"
+        >
+          <text 
+            class="tag bg-mask-white color-primary radius-l p-2 position-absolute size-s"
+          >
+            {{ tab.name }}
+          </text> 
+          <image
+            class="w-100 radius-base"
+            :src="tab.icon"
+            mode="widthFix"
+          />
+        </view>
+      </view>
+
     </view>
   </view>
   <tabbar :current="0"></tabbar>
@@ -43,28 +144,58 @@ import MainBoxIcon5 from '/static/images/home/MainBoxIcon5.png';
 import MainBoxIcon6 from '/static/images/home/MainBoxIcon6.png';
 import MainBoxIcon7 from '/static/images/home/MainBoxIcon7.png';
 import MainBoxIcon8 from '/static/images/home/MainBoxIcon8.png';
+import ImageTest2 from '/static/images/home/ImageTest2.png';
+import ImageTest3 from '/static/images/home/ImageTest3.png';
+import ImageTest4 from '/static/images/home/ImageTest4.png';
+import ImageTest5 from '/static/images/home/ImageTest5.png';
 
-const subTabs = [
+const subTabs1 = [
   { name: '闽南语', icon: MainBoxIcon1 },
   { name: '古早味', icon: MainBoxIcon2 },
   { name: '先贤列传', icon: MainBoxIcon3 },
   { name: '民俗活动', icon: MainBoxIcon4 },
+]
+const subTabs2 = [
   { name: '红砖厝韵', icon: MainBoxIcon5 },
   { name: '薪传匠艺', icon: MainBoxIcon6 },
   { name: '工夫茶道', icon: MainBoxIcon7 },
   { name: '闽南魂', icon: MainBoxIcon8 },
 ]
+const recommend = [
+  { name: '非遗', icon: ImageTest2 },
+  { name: '文物', icon: ImageTest3 },
+  { name: '民俗', icon: ImageTest4 }, 
+  { name: '文物', icon: ImageTest5 },
+]
 </script>
 
 <style lang="scss">
-.home {
-  .title {
-    left: 40rpx;
-    top: calc(var(--status-bar-height) + 50rpx);
+.page-home {
+  .map-tags {
+    left: 0;
+    top: 0;
+    padding: 20rpx;
+
+    view {
+      border-radius: 40rpx;
+      padding: 10rpx 20rpx;
+      background-color: #f7f3e8;
+      color: #d9492e;
+      margin-right: 10rpx;
+
+      &.active {
+        background-color: #d9492e;
+        color: #f7f3e8;
+      }
+    }
   }
-  .content {
-    margin-top: 30vh;
-    z-index: 1;
+  .grid4-item {
+    width: 320rpx;
+
+    .tag {
+      top: 2rpx; 
+      right: 2rpx;
+    }
   }
 }
 </style>

src/pages/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="main" style="padding-bottom:50rpx;">
+  <view class="main p-3" style="padding-bottom:50rpx;">
     <view v-if="userInfo" class="user-info">
       <image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
       <view class="info">

src/uni_modules/uview-plus/theme.scss

@@ -10,10 +10,10 @@ $u-border-color: #dadbde;
 $u-bg-color: #f3f4f6;
 $u-disabled-color: #c8c9cc;
 
-$u-primary: #ff8719;
-$u-primary-dark: #b15500;
-$u-primary-disabled: #db9d64;
-$u-primary-light: #ffd0a4;
+$u-primary: #d9492e;
+$u-primary-dark: #ac3722;
+$u-primary-disabled: #ec7f6c;
+$u-primary-light: #ff6f56;
 
 $u-warning: #f9ae3d;
 $u-warning-dark: #f1a532;