Merge remote-tracking branch 'origin/dev-hjf'
This commit is contained in:
huxuejian
commit
4079f52ed6
@ -1,22 +1,14 @@
|
||||
<template>
|
||||
<view class="bg-gray-100 min-h-screen">
|
||||
<!-- Category Tabs -->
|
||||
<scroll-view
|
||||
scroll-x
|
||||
class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<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="[
|
||||
<scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
|
||||
:show-scrollbar="false">
|
||||
<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
|
||||
v-for="(item, index) in list"
|
||||
:key="item._id"
|
||||
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 v-for="(item, index) in list" :key="item._id" 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;
|
||||
height: 151rpx;
|
||||
width: 200rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 20rpx;
|
||||
object-fit: cover;
|
||||
|
||||
@ -9,18 +9,10 @@
|
||||
</view>
|
||||
|
||||
<view class="mt-10">
|
||||
<view
|
||||
v-for="(article, index) in articles"
|
||||
:key="article._id"
|
||||
class="article-card flex"
|
||||
: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 v-for="(article, index) in articles" :key="article._id" class="article-card flex"
|
||||
: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;
|
||||
height: 151rpx;
|
||||
width: 200rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 20rpx;
|
||||
object-fit: cover;
|
||||
|
||||
@ -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>
|
||||
@ -103,8 +105,8 @@ function select(team) {
|
||||
|
||||
function toTeamDetail() {
|
||||
if (props.team && props.team.teamId) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/team/team-detail?teamId=${props.team.teamId}&corpId=${props.team.corpId}&corpName=${encodeURIComponent(props.team.corpName || '')}`
|
||||
uni.navigateTo({
|
||||
url: `/pages/team/team-detail?teamId=${props.team.teamId}&corpId=${props.team.corpId}&corpName=${encodeURIComponent(props.team.corpName || '')}`
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user