Skip to content

C
corporateCulture-qd
Commit 99043537 by lijiabin
Options

【需求 20331】 styles: 加入过度效果

parent dd652a61
Showing with 45 additions and 45 deletions
src/views/homePage/index.vue
...@@ -215,60 +215,60 @@ ...@@ -215,60 +215,60 @@
</div> </div>
<div class="flex flex-col gap-2 sm:gap-3"> <div class="flex flex-col gap-2 sm:gap-3">
<div v-show="currentTaskList.length"> <transition name="fade-home" mode="out-in">
<div v-for="item in currentTaskList" :key="item.id"> <div v-if="currentTaskList.length">
<div <div v-for="item in currentTaskList" :key="item.id">
class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group" <div
> class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group"
<div class="flex items-center min-w-0 flex-1"> >
<div class="h-16 xl:h-19 flex items-center justify-center"> <div class="flex items-center min-w-0 flex-1">
<svg-icon :name="item.svgName" size="46" /> <div class="h-16 xl:h-19 flex items-center justify-center">
</div> <svg-icon :name="item.svgName" size="46" />
<div </div>
class="flex flex-col items-start justify-center mx-2 sm:ml-3 min-w-0 flex-1" <div
> class="flex flex-col items-start justify-center mx-2 sm:ml-3 min-w-0 flex-1"
<el-tooltip :content="item.description" placement="top"> >
<div class="text-14px truncate w-full font-medium mb-1 cursor-pointer"> <el-tooltip :content="item.description" placement="top">
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }}) <div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
</div> {{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
</el-tooltip>
<div class="color-#333 text-xs w-full flex items-center flex-nowrap">
<svg-icon name="small_coin" size="16" class="mr-1" />
<el-tooltip :content="getTaskRewardDescription(item)" placement="bottom">
<div class="truncate w-130px">
{{ getTaskRewardDescription(item) }}
</div> </div>
</el-tooltip> </el-tooltip>
<div class="color-#333 text-xs w-full flex items-center flex-nowrap">
<svg-icon name="small_coin" size="16" class="mr-1" />
<el-tooltip :content="getTaskRewardDescription(item)" placement="bottom">
<div class="truncate w-130px">
{{ getTaskRewardDescription(item) }}
</div>
</el-tooltip>
</div>
</div> </div>
</div> </div>
</div> <button
<button class="w-16 h-8 xl:w-18 xl:h-9 shadow-[0_1px_8px_0_rgba(255,141,54,0.25)] border-none text-xs sm:text-sm rounded-full"
class="w-16 h-8 xl:w-18 xl:h-9 shadow-[0_1px_8px_0_rgba(255,141,54,0.25)] border-none text-xs sm:text-sm rounded-full" :class="[
:class="[ item.currentCount === item.limitCount
item.currentCount === item.limitCount ? 'bg-#FFC5A1 cursor-not-allowed'
? 'bg-#FFC5A1 cursor-not-allowed' : 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer',
: 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer', ]"
]" @click="handleTask(item)"
@click="handleTask(item)"
>
<span
class="text-black text-sm"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
>{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span
> >
</button> <span
class="text-black text-sm"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
>{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span
>
</button>
</div>
<el-divider style="margin: 0" />
</div> </div>
<el-divider style="margin: 0" />
</div> </div>
</div> <div v-else class="flex items-center justify-center">
<div v-show="currentTaskList.length === 0">
<div class="flex items-center justify-center">
<el-empty :image-size="100" description="暂无任务" /> <el-empty :image-size="100" description="暂无任务" />
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
<!-- 每日抽奖 --> <!-- 每日抽奖 -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment