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 @@
</div>
<div class="flex flex-col gap-2 sm:gap-3">
<div v-show="currentTaskList.length">
<div v-for="item in currentTaskList" :key="item.id">
<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">
<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"
>
<el-tooltip :content="item.description" placement="top">
<div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
</div>
</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) }}
<transition name="fade-home" mode="out-in">
<div v-if="currentTaskList.length">
<div v-for="item in currentTaskList" :key="item.id">
<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">
<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"
>
<el-tooltip :content="item.description" placement="top">
<div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
</div>
</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>
<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="[
item.currentCount === item.limitCount
? 'bg-#FFC5A1 cursor-not-allowed'
: 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer',
]"
@click="handleTask(item)"
>
<span
class="text-black text-sm"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
>{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span
<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="[
item.currentCount === item.limitCount
? 'bg-#FFC5A1 cursor-not-allowed'
: 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer',
]"
@click="handleTask(item)"
>
</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>
<el-divider style="margin: 0" />
</div>
</div>
<div v-show="currentTaskList.length === 0">
<div class="flex items-center justify-center">
<div v-else class="flex items-center justify-center">
<el-empty :image-size="100" description="暂无任务" />
</div>
</div>
</transition>
</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