Merge remote-tracking branch 'origin/dev-hjf'

pages/article/article-cate-list.vue

@@ -1,22 +1,14 @@
 <template>
   <view class="bg-gray-100 min-h-screen">
     <!-- Category Tabs -->
-    <scroll-view
+    <scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
-      scroll-x
+      :show-scrollbar="false">
-      class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
+      <view v-for="(tab, index) in tabs" :key="index"
-      :show-scrollbar="false"
+        class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors" :class="[
-    >
-      <view
-        v-for="(tab, index) in tabs"
-        :key="index"
-        class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors"
-        :class="[
           activeCateId === tab.value
             ? 'bg-orange-100 text-orange-500 border-orange-500'
             : 'bg-white text-gray-600 border-gray-200',
-        ]"
+        ]" @click="selectCate(tab.value)">
-        @click="selectCate(tab.value)"
-      >
         {{ tab.name }}
       </view>
     </scroll-view>
@@ -32,18 +24,9 @@
     </view>
 
     <view v-else class="p-15">
-      <view
+      <view v-for="(item, index) in list" :key="item._id" class="article-card flex"
-        v-for="(item, index) in list"
+        :class="{ 'mb-15': index < list.length - 1 }" @click="goToDetail(item)">
-        :key="item._id"
+        <image class="flex-shrink-0 cover" :src="item.cover || '/static/home/health-education.png'" mode="aspectFill" />
-        class="article-card flex"
-        :class="{ 'mb-15': index < list.length - 1 }"
-        @click="goToDetail(item)"
-      >
-        <image
-          class="flex-shrink-0 cover"
-          :src="item.cover || '/static/home/health-education.png'"
-          mode="aspectFill"
-        />
         <view class="w-0 flex-grow">
           <view class="article-title truncate mb-10">
             {{ item.title || "宣教文章" }}
@@ -161,9 +144,11 @@ onReachBottom(() => {
 .min-h-screen {
   min-height: 100vh;
 }
+
 .bg-gray-100 {
   background-color: #f7f8fa;
 }
+
 .bg-white {
   background-color: #ffffff;
 }
@@ -171,18 +156,22 @@ onReachBottom(() => {
 .p-15 {
   padding: 30rpx;
 }
+
 .px-15 {
   padding-left: 30rpx;
   padding-right: 30rpx;
 }
+
 .py-10 {
   padding-top: 20rpx;
   padding-bottom: 20rpx;
 }
+
 .py-5 {
   padding-top: 10rpx;
   padding-bottom: 10rpx;
 }
+
 .px-5 {
   padding-left: 10rpx;
   padding-right: 10rpx;
@@ -191,21 +180,27 @@ onReachBottom(() => {
 .mr-10 {
   margin-right: 20rpx;
 }
+
 .mr-5 {
   margin-right: 10rpx;
 }
+
 .ml-2 {
   margin-left: 10rpx;
 }
+
 .mr-2 {
   margin-right: 10rpx;
 }
+
 .mb-15 {
   margin-bottom: 20rpx;
 }
+
 .mb-10 {
   margin-bottom: 20rpx;
 }
+
 .mt-1 {
   margin-top: 6rpx;
 }
@@ -213,27 +208,35 @@ onReachBottom(() => {
 .flex {
   display: flex;
 }
+
 .items-start {
   align-items: flex-start;
 }
+
 .items-center {
   align-items: center;
 }
+
 .justify-between {
   justify-content: space-between;
 }
+
 .flex-1 {
   flex: 1;
 }
+
 .flex-grow {
   flex-grow: 1;
 }
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+
 .w-0 {
   width: 0;
 }
+
 .relative {
   position: relative;
 }
@@ -242,12 +245,15 @@ onReachBottom(() => {
   border-width: 1px;
   border-style: solid;
 }
+
 .rounded-full {
   border-radius: 9999px;
 }
+
 .rounded {
   border-radius: 8rpx;
 }
+
 .rounded-lg {
   border-radius: 12rpx;
 }
@@ -259,15 +265,19 @@ onReachBottom(() => {
 .text-xs {
   font-size: 22rpx;
 }
+
 .text-sm {
   font-size: 28rpx;
 }
+
 .text-base {
   font-size: 32rpx;
 }
+
 .font-bold {
   font-weight: 600;
 }
+
 .leading-normal {
   line-height: 1.4;
 }
@@ -275,9 +285,11 @@ onReachBottom(() => {
 .text-orange-500 {
   color: #f29e38;
 }
+
 .bg-orange-100 {
   background-color: #fff8eb;
 }
+
 .border-orange-500 {
   border-color: #f29e38;
 }
@@ -285,12 +297,15 @@ onReachBottom(() => {
 .text-gray-600 {
   color: #333333;
 }
+
 .text-gray-400 {
   color: #999999;
 }
+
 .text-gray-800 {
   color: #1a1a1a;
 }
+
 .border-gray-200 {
   border-color: #e5e5e5;
 }
@@ -298,6 +313,7 @@ onReachBottom(() => {
 .text-green-600 {
   color: #4b8d5f;
 }
+
 .border-green-600 {
   border-color: #4b8d5f;
 }
@@ -305,18 +321,23 @@ onReachBottom(() => {
 .sticky {
   position: sticky;
 }
+
 .top-0 {
   top: 0;
 }
+
 .z-10 {
   z-index: 10;
 }
+
 .w-full {
   width: 100%;
 }
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
+
 .inline-block {
   display: inline-block;
 }
@@ -339,7 +360,7 @@ onReachBottom(() => {
   transition: all 0.3s;
   min-height: 188rpx;
   padding: 20rpx;
-  align-items: flex-start;
+  align-items: center;
   width: 100%;
   box-sizing: border-box;
 }
@@ -350,8 +371,8 @@ onReachBottom(() => {
 }
 
 .cover {
-  width: 272rpx;
+  width: 200rpx;
-  height: 151rpx;
+  height: 112rpx;
   border-radius: 12rpx;
   margin-right: 20rpx;
   object-fit: cover;

pages/home/article-list.vue

@@ -9,18 +9,10 @@
     </view>
 
     <view class="mt-10">
-      <view
+      <view v-for="(article, index) in articles" :key="article._id" class="article-card flex"
-        v-for="(article, index) in articles"
+        :class="{ 'mb-15': index < articles.length - 1 }" @click="goToDetail(article)">
-        :key="article._id"
+        <image class="flex-shrink-0 cover" :src="article.cover || '/static/home/health-education.png'"
-        class="article-card flex"
+          mode="aspectFill" />
-        :class="{ 'mb-15': index < articles.length - 1 }"
-        @click="goToDetail(article)"
-      >
-        <image
-          class="flex-shrink-0 cover"
-          :src="article.cover || '/static/home/health-education.png'"
-          mode="aspectFill"
-        />
         <view class="w-0 flex-grow">
           <view class="article-title truncate mb-10">
             {{ article.title }}
@@ -134,7 +126,7 @@ watch(
   transition: all 0.3s;
   min-height: 188rpx;
   padding: 20rpx;
-  align-items: flex-start;
+  align-items: center;
   width: 100%;
   box-sizing: border-box;
 }
@@ -145,8 +137,8 @@ watch(
 }
 
 .cover {
-  width: 272rpx;
+  width: 200rpx;
-  height: 151rpx;
+  height: 112rpx;
   border-radius: 12rpx;
   margin-right: 20rpx;
   object-fit: cover;

pages/home/team-head.vue

@@ -54,6 +54,8 @@
     </view>
     <view v-if="qrcode && qrcode.guide" class="team-introduce-wrapper">
       <view class="team-introduce flex items-center">
+        <!-- 边框层 -->
+        <view class="team-introduce-border"></view>
         <!-- 顶部小三角形 -->
         <view class="triangle-wrapper">
           <view class="team-triangle"></view>
@@ -190,11 +192,32 @@ onMounted(() => {
   overflow: visible;
 }
 
+.team-introduce-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid #fff;
+  border-radius: 16rpx;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
+    linear-gradient(#000, #000);
+  mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
+    linear-gradient(#000, #000);
+  -webkit-mask-size: 100% 1px, 100% 100%;
+  mask-size: 100% 1px, 100% 100%;
+  -webkit-mask-position: 0 0, 0 1px;
+  mask-position: 0 0, 0 1px;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
 .triangle-wrapper {
   position: absolute;
   top: -12rpx;
   left: 60rpx;
-  width: 24rpx;
+  width: 32rpx;
   height: 12rpx;
   overflow: hidden;
   z-index: 10;
@@ -204,13 +227,16 @@ onMounted(() => {
 .team-triangle {
   position: absolute;
   left: 50%;
-  bottom: -10rpx;
+  bottom: -9rpx;
   width: 16rpx;
   height: 16rpx;
   background: linear-gradient(186deg,
       rgba(255, 255, 255, 0.4) 13.34%,
       rgba(255, 255, 255, 0.6) 99.17%);
   transform: translateX(-50%) rotate(45deg);
+  border-top: 1px solid #fff;
+  border-left: 1px solid #fff;
+  box-sizing: border-box;
 }
 
 .introduce-text {