Skip to content

C
corporateCulture-qd
Commit 69c46b0d by lijiabin
Options

【需求 20331】 styles: 继续优化样式等

parent 3b790f14
Showing with 56 additions and 39 deletions
src/layoutCulture/index.vue
<template>
<div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]">
<div
class="header flex lg:px-20 xl:px-40 2xl:px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-2001 w-100vw"
class="header flex px-10 lg:px-20 xl:px-40 2xl:px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-2001 w-100vw"
>
<!-- Logo区域 -->
<div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer">
......
src/views/auction/index.vue
......@@ -200,7 +200,7 @@ const onBid = async (item: AuctionItemDto) => {
<template>
<div class="relative">
<BackButton />
<div class="flex gap-6">
<div class="flex gap-3">
<div class="flex-3/4 min-w-0">
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60">
<div class="flex items-center gap-3 mb-6">
......
src/views/homePage/index.vue
......@@ -56,7 +56,6 @@
</div>
</div>
</div>
<!-- 屏幕变小直接隐藏 -->
<div class="right flex-col gap-3 flex basis-1/4 xl:basis-1/4 min-w-0">
<!-- 等级等相关信息 -->
<div
......@@ -65,10 +64,12 @@
class="level-container common-box flex flex-col justify-center items-center gap-4 rounded-lg bg-#E4F5FE"
>
<div class="top flex items-center justify-center gap-3">
<img class="h-20" :src="currentLevelData?.iconUrl" alt="" />
<img class="lg:h-20 h-16" :src="currentLevelData?.iconUrl" alt="" />
<div class="text-base flex-3/4 flex flex-col gap-1">
<div class="flex items-center gap-1 justify-start">
<div class="font-semibold">等级：{{ currentLevelData?.label }}</div>
<div class="font-semibold lg:text-base text-sm">
等级：{{ currentLevelData?.label }}
</div>
<el-tooltip
:content="`当前经验：${userAccountData.expTotal}/${currentLevelData.expScope[1]} (${currentLevelData.percentage}%)`"
placement="top"
......@@ -90,7 +91,7 @@
</div>
</el-tooltip>
</div>
<div class="text-amber-600 font-medium">
<div class="text-amber-600 font-medium lg:text-base text-sm">
YA币：{{ userAccountData.ayabiAvailable }}
</div>
</div>
......@@ -115,7 +116,7 @@
</div>
</div>
<el-button
class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-116px"
class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-112px lg:w-116px"
type="primary"
@click="router.push('/pointsStore')"
>
......@@ -136,7 +137,7 @@
</p>
<div class="flex justify-center items-center">
<el-button
class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-112px lg:w-116px"
type="primary"
@click="router.push('/publishCase')"
>
......@@ -149,14 +150,14 @@
<div class="submit-container common-box rounded-lg bg-#EDEAFE">
<div class="grid grid-cols-3 mb-4 gap-0 2xl:gap-2">
<div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 lg:p-2 rounded-lg hover:bg-white/10"
@click="publishTopic"
>
<svg-icon name="topic_release" size="80" />
<div class="text-xs xl:text-sm">话题发布</div>
</div>
<div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 lg:p-2 rounded-lg hover:bg-white/10"
@click="router.push('/userPage/selfAnswer')"
>
<el-badge :value="userQestionNum" :offset="[-5, 20]" :hidden="!userQestionNum">
......@@ -168,7 +169,7 @@
<div
@click="router.push('/publishVideo')"
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 lg:p-2 rounded-lg hover:bg-white/10"
>
<svg-icon name="video_release" size="80" />
<div class="text-xs xl:text-sm">视频发布</div>
......@@ -177,7 +178,7 @@
<div class="flex justify-center items-center">
<el-button
@click="router.push(`/userPage/selfComment?type=${ArticleTypeEnum.QUESTION}`)"
class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-112px lg:w-116px"
type="primary"
>
<svg-icon name="my_answer" size="20" class="mr-2" />
......@@ -208,7 +209,7 @@
</span>
</div>
<span class="text-#999 cursor-pointer" @click="router.push(`/userPage/selfTask`)">
查看更多
{{ isSmallerThanXl ? '' : '查看' }}更多
</span>
</div>
</div>
......@@ -223,13 +224,15 @@
>
<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" />
<svg-icon :name="item.svgName" :size="isSmallerThanXl ? '36' : '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">
<div
class="lg:text-sm text-xs truncate w-full font-medium mb-1 cursor-pointer"
>
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
</div>
</el-tooltip>
......@@ -254,7 +257,7 @@
@click="handleTask(item)"
>
<span
class="text-black text-sm"
class="text-black lg:text-sm text-xs"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
......@@ -372,8 +375,11 @@ import { useQuestionStore } from '@/stores/question'
import { useActivityStore } from '@/stores/activity'
import { storeToRefs } from 'pinia'
import { push } from 'notivue'
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
// import LuckyWheel from '@/components/common/LuckyWheel/index.vue'
const breakpoints = useBreakpoints(breakpointsTailwind)
const isSmallerThanXl = breakpoints.smaller('xl')
const route = useRoute()
const router = useRouter()
const open = ref(false)
......
src/views/homePage/yaTab/components/columnList.vue
......@@ -84,10 +84,9 @@
</div>
<div class="text-gray-500">
{{
// smallerThanXl
// ? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
// : dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm')
smallerThanXl
? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
: dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}
</div>
</div>
......@@ -148,10 +147,10 @@ import { TABS_REF_KEY } from '@/constants'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { useNavigation } from '@/hooks'
// import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
// const breakpoints = useBreakpoints(breakpointsTailwind)
// const smallerThanXl = breakpoints.smaller('xl')
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const router = useRouter()
const tabsRef = inject(TABS_REF_KEY)
......
src/views/homePage/yaTab/components/interviewList.vue
......@@ -73,10 +73,9 @@
</div>
<div class="text-gray-500">
{{
// smallerThanXl
// ? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
// : dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm')
smallerThanXl
? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
: dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}
</div>
</div>
......@@ -136,9 +135,9 @@ import { getInterviewList } from '@/api'
import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
import { TABS_REF_KEY } from '@/constants'
import dayjs from 'dayjs'
// import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
// const breakpoints = useBreakpoints(breakpointsTailwind)
// const smallerThanXl = breakpoints.smaller('xl')
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
......
src/views/pointsStore/index.vue
<template>
<div class="relative">
<BackButton />
<div class="flex gap-6">
<div class="flex gap-3">
<!-- 左侧：商品列表区域 -->
<div class="flex-3/4 min-w-0">
<!-- 虚拟装饰区域 -->
<div class="bg-white/90 rounded-2xl p-6 shadow-lg mb-6 border border-white/60">
<div class="bg-white/90 rounded-2xl p-6 shadow-lg mb-3 border border-white/60">
<div class="flex items-center gap-3 mb-6">
<div
class="w-1.5 h-7 bg-gradient-to-b from-[#8b5cf6] to-[#6366f1] rounded-full shadow-sm"
......@@ -158,7 +158,7 @@
<!-- 右侧：信息面板 -->
<div class="flex-1/4 flex-shrink-0 space-y-6">
<!-- YA币信息卡片 -->
<div class="bg-white/90 rounded-2xl p-6 shadow-lg border border-white/60 sticky top-[52px]">
<div class="bg-white/90 rounded-2xl p-3 shadow-lg border border-white/60 sticky top-[52px]">
<div class="text-center mb-6">
<div class="text-gray-500 text-sm mb-2">当前YA币</div>
<div
......
src/views/publishLongArticle/index.vue
<template>
<div class="min-h-screen bg-gradient-to-br pb-10">
<div class="min-h-screen bg-gradient-to-br pb-10 relative">
<BackButton />
<!-- 主编辑区域 -->
<div class="bg-white rounded-lg shadow-lg border border-gray-100/50 overflow-hidden">
<div class="px-10 py-5">
......@@ -268,6 +269,7 @@ import { useUserStore } from '@/stores/user'
import { selectDepOrUser } from '@/utils'
import type { FormItemRule } from 'element-plus'
import { push } from 'notivue'
import BackButton from '@/components/common/BackButton/index.vue'
const columnStore = useColumnStore()
const { columnList } = storeToRefs(columnStore)
const interviewStore = useInterviewStore()
......
src/views/userPage/components/selfComment.vue
......@@ -53,7 +53,7 @@
<div class="text-gray-900 font-medium text-base line-clamp-1">
{{ item.title }}
</div>
<div class="text-gray-600 text-sm line-clamp-2">评论内容：{{ item.content }}</div>
<div class="text-gray-600 text-sm line-clamp-2" v-html="parseEmoji(item.content)"></div>
<div class="text-gray-400 text-xs">
{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
</div>
......@@ -102,14 +102,18 @@ import {
articleTypeListOptionsForNotReal,
} from '@/constants/options'
import dayjs from 'dayjs'
import { CommentTypeEnum, ArticleTypeEnum } from '@/constants/enums'
import { CommentTypeEnum, ArticleTypeEnum, BooleanFlag } from '@/constants/enums'
import type { TabPaneName } from 'element-plus'
import { IS_REAL_KEY } from '@/constants/symbolKey'
import { useNavigation } from '@/hooks'
import { push } from 'notivue'
import { useMessageBox } from '@/hooks'
import { parseEmoji } from '@/utils/emoji'
const { confirm } = useMessageBox()
const emit = defineEmits<{
toggleReal: [BooleanFlag]
}>()
const route = useRoute()
const isReal = inject(IS_REAL_KEY)
......@@ -150,6 +154,7 @@ const handleDelete = async (id: number) => {
onActivated(() => {
if (route.query.type) {
searchParams.value.type = route.query.type as ArticleTypeEnum
emit('toggleReal', BooleanFlag.YES)
} else {
searchParams.value.type = filterArticleType.value[0]!.value
}
......
src/views/userPage/index.vue
......@@ -144,7 +144,12 @@
<router-view v-slot="{ Component, route }">
<transition name="fade-user" mode="out-in">
<keep-alive>
<component :is="Component" :key="getThirdLevelKey(route)" ref="componentRef" />
<component
:is="Component"
:key="getThirdLevelKey(route)"
ref="componentRef"
@toggleReal="(flag: BooleanFlag) => (isReal = flag)"
/>
</keep-alive>
</transition>
</router-view>
......@@ -168,6 +173,7 @@ import { IS_REAL_KEY } from '@/constants/symbolKey'
import { useOnlineTimeStore, useUserStore } from '@/stores'
import BackButton from '@/components/common/BackButton/index.vue'
import { push } from 'notivue'
import { BooleanFlag } from '@/constants/enums'
const { showOnlineTime } = storeToRefs(useOnlineTimeStore())
const router = useRouter()
......@@ -267,7 +273,7 @@ const menuOfficialItems = [
},
]
const isReal = ref(0)
const isReal = ref<BooleanFlag>(BooleanFlag.NO)
provide(IS_REAL_KEY, isReal)
......
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