Skip to content

C
corporateCulture-qd
Commit 95f8be7a by lijiabin
Options

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

parent 99043537
Showing with 98 additions and 65 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 px-20 lg: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 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">
......@@ -238,19 +238,19 @@ const isDropdownHover = ref(false)
@media (min-width: 768px) {
.container {
max-width: 890px;
padding: 0 5px;
padding: 0 0px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
padding: 0 50px;
padding: 0 10px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
padding: 0 110px;
padding: 0 40px;
}
}
@media (min-width: 1536px) {
......
src/views/homePage/homeTab/components/videoList.vue
......@@ -27,7 +27,7 @@
<!-- 第一页的特殊布局 -->
<div v-show="searchParams.current === 1">
<!-- 前三个特殊布局 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<div class="grid grid-cols-1 lg:grid-cols-3 xl:gap-5 gap-4 xl:mb-6 mb-4">
<!-- 第一个视频 - 占据两列 -->
<div
v-show="list.length >= 1"
......@@ -38,7 +38,7 @@
<!-- 调整：增加图片高度到 h-[360px] 或 h-[400px] -->
<img
:src="list[0]?.faceUrl"
class="w-full h-[360px] object-cover group-hover:scale-105 transition-transform duration-700"
class="w-full aspect-16/10 object-cover group-hover:scale-105 transition-transform duration-700"
/>
<div
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
......@@ -85,15 +85,15 @@
<!-- 调整：减小内边距 p-6 改为 p-4 -->
<div class="p-4">
<h3
<div
class="font-bold text-lg mb-2 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ list[0]?.title }}
</h3>
</div>
<!-- 调整：减小内容文字大小和间距 -->
<h2 class="text-gray-600 mb-3 line-clamp-1 leading-relaxed text-base">
<div class="text-gray-600 mb-3 line-clamp-1 leading-relaxed text-base">
{{ list[0]?.content }}
</h2>
</div>
<div class="flex items-center justify-between text-gray-500 text-sm">
<div class="flex items-center gap-2">
<img
......@@ -111,7 +111,7 @@
</div>
<!-- 右侧两个视频 -->
<div class="flex flex-col gap-6">
<div class="flex flex-col xl:gap-5 gap-4">
<div
v-for="(item, index) in list.slice(1, 3)"
:key="index"
......@@ -122,7 +122,7 @@
<!-- 调整：增加图片高度到 h-[160px] 或 h-[180px] -->
<img
:src="item?.faceUrl"
class="w-full h-[160px] object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
......@@ -137,6 +137,7 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
{{ item?.videoDuration }}
......@@ -166,9 +167,9 @@
</div>
<!-- 调整：减小内边距和间距 -->
<div class="p-3">
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-sm mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
{{ item?.title }}
</h3>
......@@ -179,7 +180,12 @@
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs((item?.createTime ?? 0) * 1000).format('MM-DD HH:mm') }}</span>
<span v-if="!smallerThanXl">{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{
dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD')
}}</span>
</div>
</div>
</div>
......@@ -187,7 +193,10 @@
</div>
<!-- 剩余视频 - 标准网格 -->
<div v-show="list.length > 3" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-show="list.length > 3"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4"
>
<div
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
v-for="item in list.slice(3)"
......@@ -197,7 +206,7 @@
<div class="relative overflow-hidden">
<img
:src="item.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
......@@ -217,6 +226,7 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
{{ item.videoDuration }}
......@@ -261,7 +271,7 @@
</div> -->
</div>
<div class="p-4">
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
......@@ -274,7 +284,10 @@
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(item?.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
<span v-if="!smallerThanXl">{{
dayjs(item?.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(item?.createTime * 1000).format('YYYY-MM-DD') }}</span>
</div>
</div>
</div>
......@@ -283,7 +296,7 @@
<!-- 其他页面 - 标准3列网格 -->
<div v-show="searchParams.current !== 1">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4">
<div
@click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
v-for="item in list"
......@@ -293,7 +306,7 @@
<div class="relative overflow-hidden">
<img
:src="item.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
......@@ -313,6 +326,7 @@
<!-- 时长 -->
<div
v-if="!smallerThanXl"
class="absolute bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
>
{{ item?.videoDuration }}
......@@ -357,7 +371,7 @@
</div> -->
</div>
<div class="p-4">
<div class="p-3 xl:p-4">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
......@@ -370,7 +384,10 @@
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
<span v-if="!smallerThanXl">{{
dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD') }}</span>
</div>
</div>
</div>
......@@ -428,6 +445,10 @@ import { usePageSearch } from '@/hooks'
import { getArticleList } from '@/api'
import dayjs from 'dayjs'
import { useNavigation } from '@/hooks'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const tabsRef = inject(TABS_REF_KEY)
......
src/views/homePage/index.vue
......@@ -15,7 +15,7 @@
</div>
<div class="flex gap-3">
<div class="left basis-7/10 xl:basis-3/4 transition-all duration-500">
<div class="left basis-3/4 xl:basis-3/4 transition-all duration-500">
<div
id="tabsRef"
ref="tabsRef"
......@@ -57,7 +57,7 @@
</div>
</div>
<!-- 屏幕变小直接隐藏 -->
<div class="right flex-col gap-3 flex basis-3/10 xl:basis-1/4 min-w-0">
<div class="right flex-col gap-3 flex basis-1/4 xl:basis-1/4 min-w-0">
<!-- 等级等相关信息 -->
<div
ref="levelContainerRef"
......
src/views/homePage/yaTab/components/columnList.vue
......@@ -34,7 +34,7 @@
<div class="p-5">
<div
v-if="item.yaColumnVoList.length"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"
class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5"
>
<div
v-for="i in item.yaColumnVoList"
......@@ -63,14 +63,12 @@
</div>
<!-- 文字信息 -->
<div class="p-3">
<div
class="font-semibold text-gray-800 mb-2.5 line-clamp-1 text-base group-hover:text-indigo-600 transition-colors duration-200"
>
<div class="p-2">
<h3 class="font-medium text-gray-800 mb-2.5 line-clamp-1">
{{ i.title }}
</div>
</h3>
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<span class="flex items-center gap-0.5">
<el-icon><IEpView /></el-icon>
{{ i.viewCount }}
......@@ -84,11 +82,14 @@
{{ i.collectCount }}
</span>
</div>
<span class="text-gray-400">{{
smallerThanXl
? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
: dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}}</span>
<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')
}}
</div>
</div>
</div>
</div>
......@@ -147,9 +148,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'
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 router = useRouter()
const tabsRef = inject(TABS_REF_KEY)
......
src/views/homePage/yaTab/components/interviewList.vue
......@@ -23,7 +23,7 @@
<div class="p-5">
<div
v-if="item.yaColumnVoList.length"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"
class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5"
>
<div
v-for="i in item.yaColumnVoList"
......@@ -52,14 +52,12 @@
</div>
<!-- 文字信息 -->
<div class="p-3">
<div
class="font-semibold text-gray-800 mb-2.5 line-clamp-1 text-base group-hover:text-indigo-600 transition-colors duration-200"
>
<div class="p-2">
<h3 class="font-medium text-gray-800 mb-2.5 line-clamp-1">
{{ i.title }}
</div>
</h3>
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<span class="flex items-center gap-0.5">
<el-icon><IEpView /></el-icon>
{{ i.viewCount }}
......@@ -73,11 +71,14 @@
{{ i.collectCount }}
</span>
</div>
<span class="text-gray-400">{{
smallerThanXl
? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
: dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss')
}}</span>
<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')
}}
</div>
</div>
</div>
</div>
......@@ -135,9 +136,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/homePage/yaTab/components/videoList.vue
......@@ -39,7 +39,7 @@
<div class="relative overflow-hidden">
<img
:src="item.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full h-36 xl:h-42 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
......@@ -80,8 +80,7 @@
</div>
</div>
</div>
<div class="p-4">
<div class="p-2.5 xl:p-4 xl:pb-3">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
......@@ -91,10 +90,13 @@
<div class="flex items-center gap-2 max-w-55%">
<img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="item.showName" placement="top">
<span class="font-medium">{{ item.showName }}</span>
<span class="font-medium line-clamp-1">{{ item.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
<span v-if="smallerThanXl">{{
dayjs(item.createTime * 1000).format('YYYY-MM-DD')
}}</span>
<span v-else>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
</div>
</div>
......@@ -135,13 +137,13 @@
<div
v-for="i in item.yaColumnVoList"
:key="i.articleId"
class="group cursor-pointer rounded-lg overflow-hidden"
class="group cursor-pointer rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300"
@click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
>
<div class="relative overflow-hidden">
<img
:src="i.faceUrl"
class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-500"
class="w-full h-36 xl:h-44 object-cover group-hover:scale-105 transition-transform duration-500"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
......@@ -189,7 +191,7 @@
</div>
</div>
<div class="p-4">
<div class="p-4 pb-3">
<h3
class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
>
......@@ -199,10 +201,13 @@
<div class="flex items-center gap-2 max-w-55%">
<img :src="i.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
<el-tooltip :content="i.showName" placement="top">
<span class="font-medium">{{ i.showName }}</span>
<span class="font-medium line-clamp-1">{{ i.showName }}</span>
</el-tooltip>
</div>
<span>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
<span v-if="smallerThanXl">{{
dayjs(i.createTime * 1000).format(' MM-DD HH:mm')
}}</span>
<span v-else>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
</div>
</div>
<!-- <div class="relative mb-3 overflow-hidden rounded-lg">
......@@ -304,7 +309,11 @@ import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { useNavigation } from '@/hooks'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
// 判断是否是xl
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const router = useRouter()
const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
......
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