dengzhifeng/ufutx-pc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 20250624 添加完整数据，动画相关

Browse Source
This commit is contained in:
mac·ufutx 2025-06-24 18:49:07 +08:00
parent a4268e6f05
commit 83aa8152b2
15 changed files with 221 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components.d.ts vendored
View File

@ -9,15 +9,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
Footer: typeof import('./src/components/Footer.vue')['default']

12
src/components/Footer.vue
View File

@ -22,13 +22,18 @@
<!-- 底部信息 -->
<div class="footer-bottom">
<p>公司地址：深圳市南山区南山街道阳光科创中心B座33楼</p>
<p>版权所有©友福同享(深圳)智能科技有限公司 粤ICP备12008876号</p>
<p>
版权所有 <span @click="openReport('https://www.ufutx.com')">©友福同享(深圳)智能科技有限公司</span>
<span @click="openReport('https://beian.miit.gov.cn/')">粤ICP备12008876号</span>
</p>
</div>
</footer>
</template>
<script setup lang="ts">
// 二维码数据
import { openExternalLink } from '@/utils/navigation.ts'
const qrItems = [
{
src: 'https://images.health.ufutx.com/202506/12/cc651222ac2e5f63185dec1f31d176ae.png',
@ -46,6 +51,11 @@ const qrItems = [
title: '友福公众号'
}
]
// 外部链接跳转（新标签）
const openReport = (URL: string) => {
openExternalLink(URL, '_blank')
}
</script>
<style scoped lang="less">

4
src/router/index.ts
View File

@ -1,9 +1,9 @@
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes,
scrollBehavior(_to, _from, savedPosition) {
// 添加下划线标记未使用参数

6
src/views/About/sections/CompanyValues.vue
View File

@ -77,9 +77,9 @@ const valueTabs = [
const activeTab = ref(valueTabs[0].name) // 默认选中第一个标签
const currentTabIndex = ref(0) // 当前选中标签的下标
// 计算属性：当前选中的标签数据
const currentTab = computed(() => {
return valueTabs[currentTabIndex.value] || valueTabs[0]
})
// const currentTab = computed(() => {
// return valueTabs[currentTabIndex.value] || valueTabs[0]
// })
const handleTabClick = (tab: any, event: Event) => {
console.log(tab.props.name, event)
currentTabIndex.value = valueTabs.findIndex(item => item.name === tab.props.name)

2
src/views/About/sections/QualificationCarousel.vue
View File

@ -23,7 +23,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref } from 'vue'
const certificateImgs = [
'https://images.health.ufutx.com/202506/20/6972bf0f5da9af6ec4f2b8fba404d59e.png',

6
src/views/App/App.vue
View File

@ -24,12 +24,6 @@ import ApplicationScenes from './sections/ApplicationScenes.vue'
import DownloadSection from './sections/DownloadSection.vue'
import FeatureNav from '@/views/App/sections/FeatureNav.vue'
const healthBand = {
title: '健康手环',
desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
}
const bodyScale = {
title: '智能体脂秤',
desc: 'AI精准个性化健康方案服务<br/>智能穿戴设备数据监测，健康手环/你的专属健康管家，智能体脂秤、精准计算身体状态',

7
src/views/App/sections/ApplicationScenes.vue
View File

@ -35,10 +35,8 @@
<script setup lang="ts">
import { ref } from 'vue'
const tabs = ['友福健康生态', '幸福婚恋', '个人成长']
// 默认选中第一个场景
const currentTab = ref(0)
// const currentTab = ref(0)
// 结构化场景数据（单数据源管理）
const scenes = ref([
{
@ -80,9 +78,6 @@ const scenes = ref([
])
const activeTab = ref(scenes.value[0].name)
const resetPage = () => {
// currentPage.value = 1 // 切换标签时重置页码
}
</script>
<style scoped lang="less">

2
src/views/App/sections/FeatureNav.vue
View File

@ -16,7 +16,7 @@
<div class="health-device">
<div class="device-content">
<div class="device-img">
<img :src="navList[activeIndex].center.deviceImg" alt="设备界面" />
<img :src="navList[activeIndex].center.deviceImg" :alt="navList[activeIndex].center.title" />
</div>
<div class="device-info">
<h3 class="device-title">{{ navList[activeIndex].center.title }}</h3>

6
src/views/App/sections/HealthDevice.vue
View File

@ -5,9 +5,9 @@
<img :src="device.img" alt="设备界面" />
</div>
<div class="device-info">
<h3 class="device-title">{{ device.title }}</h3>
<h3 class="device-title">{{ props.device.title }}</h3>
<h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
<p class="device-desc" v-html="device.desc"></p>
<p class="device-desc" v-html="props.device.desc"></p>
<div class="download-btn" @click="openReport">立即下载</div>
</div>
</div>
@ -15,7 +15,7 @@
</template>
<script setup lang="ts">
import { ElButton } from 'element-plus'
// 18 import { ElButton } from 'element-plus'
import { openExternalLink } from '@/utils/navigation.ts'
// import FeatureNav from '@/views/App/sections/FeatureNav.vue'

2
src/views/Dating/sections/AiTags.vue
View File

@ -19,7 +19,7 @@
</template>
<script setup lang="ts">
import { ElButton } from 'element-plus'
// 18 import { ElButton } from 'element-plus'
// const tags = [
// {

2
src/views/Dating/sections/SuccessStories.vue
View File

@ -15,7 +15,7 @@
</template>
<script setup lang="ts">
// import { ElButton } from 'element-plus'
// // 18 import { ElButton } from 'element-plus'
// const stories = [
// { img: '@/assets/story-1.jpg' },

2
src/views/Ecosystem/sections/CooperationConsult.vue
View File

@ -21,7 +21,7 @@ const props = defineProps({
})
}
})
// import { ElButton } from 'element-plus'
// // 18 import { ElButton } from 'element-plus'
</script>
<style scoped lang="less">

141
src/views/Ecosystem/sections/HealthManagement.vue
View File

@ -1,6 +1,6 @@
<template>
<section class="health-management">
<!-- 2x2卡片布局 -->
<!-- 2x2卡片（样式完全保留） -->
<div class="health-grid">
<div
v-for="(item, index) in sections"
@ -9,66 +9,83 @@
@mouseenter="highlightSector(index)"
@mouseleave="resetHighlight"
>
<h3 class="item-title">{{ item.title }}</h3>
<p class="item-desc">{{ item.desc }}</p>
<div>
<h3 class="item-title">{{ item.title }}</h3>
<p class="item-desc">{{ item.desc }}</p>
</div>
</div>
</div>
<!-- 中间扇形（SVG实现） -->
<div class="sector-svg-container">
<svg class="sector-svg" viewBox="0 0 400 400">
<defs>
<linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1E6DD8" />
<stop offset="100%" stop-color="#4B89DC" />
</linearGradient>
</defs>
<!-- 圆心平移到(200,200) -->
<g transform="translate(200, 200)">
<!-- 左上扇形：精准个性化AI健康管理 -->
<path d="M0,0 L0,-100 A100,100 0 0,0 -100,0 Z" class="sector" :class="{ active: highlightedSector === 0 }" />
<!-- 右上扇形：智能健康监测 -->
<path d="M0,0 L100,0 A100,100 0 0,0 0,-100 Z" class="sector" :class="{ active: highlightedSector === 1 }" />
<!-- 左下扇形：医疗资源整合 -->
<path d="M0,0 L-100,0 A100,100 0 0,0 0,100 Z" class="sector" :class="{ active: highlightedSector === 2 }" />
<!-- 右下扇形：健康教育与促进 -->
<path d="M0,0 L0,100 A100,100 0 0,0 100,0 Z" class="sector" :class="{ active: highlightedSector === 3 }" />
</g>
</svg>
<!-- 中间扇形图片（1:1还原，不影响方块） -->
<div class="sector-img-container">
<img
v-for="(item, index) in sections"
:key="index"
:src="getSectorImage(index)"
class="sector-img"
:class="`sector-img--${index}`"
@mouseenter="highlightSector(index)"
@mouseleave="resetHighlight"
/>
</div>
</section>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted, computed } from 'vue'
// 数据：新增「默认/高亮图」，保持原有title/desc
const sections = [
{
title: '精准个性化AI健康管理',
desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。'
desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。',
defaultImg: 'https://images.health.ufutx.com/202506/24/67a0394f5bb3a8ac13ef46d894d578c3.png', // 左上默认
activeImg: 'https://images.health.ufutx.com/202506/24/e1e7d82816b2b86deeb4d17071b95aca.png' // 左上高亮
},
{
title: '智能健康监测',
desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。'
desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。',
defaultImg: 'https://images.health.ufutx.com/202506/24/eb79c8579db7312346b80ddd7a6c5822.png', // 右上默认
activeImg: 'https://images.health.ufutx.com/202506/24/5301fea3c74be8a7567eddde2ee0ead8.png' // 右上高亮
},
{
title: '医疗资源整合',
desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。'
title: '医疗资源整合', // 默认选中（索引2）
desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。',
defaultImg: 'https://images.health.ufutx.com/202506/24/0e9e555476da9d7efc74da331b648f12.png', // 左下默认
activeImg: 'https://images.health.ufutx.com/202506/24/39b8854b191383d3d57f25e5bf0e1d75.png' // 左下高亮
},
{
title: '健康教育与促进',
desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI+大健康领域新型人才，解决地区人才就业问题'
desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI＋大健康领域新型人才，解决地区人才就业问题',
defaultImg: 'https://images.health.ufutx.com/202506/24/94754978db12bfa48602d8165c148207.png', // 右下默认
activeImg: 'https://images.health.ufutx.com/202506/24/4ca742d3f217da81edd59043d384d7d1.png' // 右下高亮
}
]
const highlightedSector = ref(3)
const highlightedSector = ref(-1)
const isDefaultActive = ref(true)
// 初始化默认选中第三个扇形
onMounted(() => {
highlightedSector.value = 2
})
// 动态切换图片
const getSectorImage = computed(() => (index: number) => {
const isActive = highlightedSector.value === index || (isDefaultActive.value && index === 2)
return isActive ? sections[index].activeImg : sections[index].defaultImg
})
// 交互逻辑
const highlightSector = (index: number) => {
highlightedSector.value = index
isDefaultActive.value = false
}
const resetHighlight = () => {
highlightedSector.value = -1
isDefaultActive.value = true
}
</script>
@ -76,9 +93,9 @@ const resetHighlight = () => {
.health-management {
position: relative;
padding: 0px 192px;
//max-width: 1200px;
margin: 0 auto;
/* 卡片布局：完全保留原有样式 */
.health-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -87,7 +104,6 @@ const resetHighlight = () => {
z-index: 1;
.health-item {
//width: 762px;
padding: 100px 50px;
background: #f6f8fe;
text-align: left;
@ -100,17 +116,19 @@ const resetHighlight = () => {
}
&:nth-child(2) {
border-top-right-radius: 8px;
justify-items: end;
}
&:nth-child(3) {
border-bottom-left-radius: 8px;
}
&:nth-child(4) {
border-bottom-right-radius: 8px;
justify-items: end;
}
&:hover {
background: #e6ebf8;
transform: translateY(-5px);
transform: translateY(-5px) translateZ(0);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
@ -123,51 +141,64 @@ const resetHighlight = () => {
.item-desc {
font-size: 20px;
width: 500px;
color: @text-color-secondary;
line-height: 34px;
}
}
}
.sector-svg-container {
/* 扇形图片容器：仅替换渲染方式，保留定位逻辑 */
.sector-img-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 468px;
height: 468px;
z-index: 9;
width: 380px;
height: 380px;
z-index: 9; /* 与原SVG层级一致，不遮挡卡片 */
}
.sector-svg {
width: 100%;
height: 100%;
/* 扇形图片：四象限定位，尺寸适配 */
.sector-img {
position: absolute;
width: 185px;
height: 185px;
object-fit: contain; /* 保证设计图比例 */
transition: all 0.3s ease; /* 与卡片动画速度同步 */
}
.sector {
fill: #cde2ff;
stroke: none;
//stroke-width: 10;
transition: all 0.3s ease;
}
.sector.active {
fill: url(#sectorGradient);
transform: scale(1.05);
filter: drop-shadow(0 0 10px rgba(30, 109, 216, 0.5));
/* 左上（索引0） */
.sector-img--0 {
top: 0;
left: 0;
}
/* 右上（索引1） */
.sector-img--1 {
top: 0;
right: 0;
}
/* 左下（索引2，默认高亮） */
.sector-img--2 {
bottom: 0;
left: 0;
}
/* 右下（索引3） */
.sector-img--3 {
bottom: 0;
right: 0;
}
/* 响应式：完全继承原有规则 */
@media (max-width: 768px) {
.health-grid {
grid-template-columns: 1fr;
gap: 20px;
.health-item {
border-radius: 8px !important;
}
}
.sector-svg-container {
.sector-img-container {
display: none;
}
}

38
src/views/Network/sections/AppPromotion.vue
View File

@ -2,7 +2,7 @@
<section class="app-promotion">
<div class="section-bg">
<h2 class="section-title">提供专属健康服务和服务方案</h2>
<el-button type="primary" class="consult-btn" @click="openReport"> 领取您的AI健康解决方案 </el-button>
<el-button type="primary" class="btn-glow consult-btn" @click="openReport"> 领取您的AI健康解决方案 </el-button>
</div>
<div class="app-download">
<div class="app-item">
@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
import { ElButton } from 'element-plus'
// 18 import { ElButton } from 'element-plus'
import { openExternalLink } from '@/utils/navigation.ts' // 确保按需导入
// 外部链接跳转（新标签）
@ -34,6 +34,40 @@ const openReport = () => {
</script>
<style scoped lang="less">
.btn-glow {
padding: 12px 24px;
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
position: relative;
overflow: hidden;
transition:
transform 0.4s,
box-shadow 0.4s;
}
.btn-glow:hover {
transform: scale(1.05);
box-shadow: 0 0 20px #9dbbf5;
}
.btn-glow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: 0.5s;
}
.btn-glow:hover::before {
left: 100%;
}
.app-promotion {
text-align: center;
}

135
src/views/Network/sections/UseCases.vue
View File

@ -1,13 +1,18 @@
<template>
<section class="scene-section">
<!-- <h2 class="scene-title">一站式解决身心健康问题</h2>-->
<!-- <p class="scene-subtitle">以数据驱动，从根源改善，助力实现可持续的健康提升</p>-->
<div class="scene-list">
<div v-for="(item, index) in sceneList" :key="index" class="scene-item">
<div
v-for="(item, index) in sceneList"
:key="index"
class="scene-item"
:class="{ active: activeIndex === index }"
@mouseenter="handleMouseEnter(index)"
@mouseleave="handleMouseLeave()"
>
<div class="scene-inner">
<img :src="item.icon" alt="场景图标" class="scene-icon" />
<p class="scene-name" v-html="item.name"></p>
<p class="scene-desc">{{ item.desc }}</p>
<p v-if="activeIndex === index" class="scene-desc">{{ item.desc }}</p>
</div>
</div>
</div>
@ -15,26 +20,28 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const sceneList = [
{
name: '健康评估<br/>多维度健康评估',
desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png' // 替换为实际图标
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
},
{
name: '健康方案<br/>全方位的精准健康方案',
desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
},
{
name: '健康数据<br/>AI健康数据洞察',
desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
icon: 'https://images.health.ufutx.com/202506/24/29193b790b1c94ac0b83ea3ac72d10f9.png'
},
{
name: '健康服务团队<br/>双重认证教练团队',
desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
},
{
name: '健康监测<br/>实时动态健康监测',
@ -42,30 +49,29 @@ const sceneList = [
icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
}
]
const activeIndex = ref(2) // 默认为第三个场景（索引2）
const handleMouseEnter = (index: number) => {
activeIndex.value = index
}
const handleMouseLeave = () => {
activeIndex.value = 2 // 鼠标离开后回到第三个场景
}
onMounted(() => {
// 确保DOM加载后激活第三个场景
activeIndex.value = 2
})
</script>
<style scoped lang="less">
@import '@/styles/global.less';
.scene-section {
text-align: center;
background-color: #f5f7fe;
.py(130px);
.scene-title {
font-size: @font-size-xxl;
font-weight: @font-weight-bold;
color: @text-color;
.pb(20px);
.pt(40px);
}
.scene-subtitle {
font-size: @font-size-md;
color: @text-color-secondary;
max-width: 600px;
margin: 0 auto 80px;
}
.pt(80+42px);
.pb(80-42px);
.scene-list {
display: grid;
@ -80,35 +86,38 @@ const sceneList = [
perspective: 1000px;
cursor: pointer;
width: 100%;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 增加容器过渡
.scene-inner {
position: relative;
width: 100%;
height: 100%;
.pt(20px);
.pb(30px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffffff;
border-radius: @border-radius-lg;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
background: #fff;
border-radius: 10px;
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 延长动画时间
will-change: transform, box-shadow, opacity;
.scene-icon {
width: 291px;
height: 219px;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
height: 218px;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 图标动画
transform-origin: center;
opacity: 0.9; // 默认降低不透明度
}
.scene-name {
font-size: @font-size-lg;
font-weight: bold;
color: @text-color-secondary;
color: @text-color;
text-align: center;
//background: pink;
.mt(10px);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
line-height: 30px;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 文字动画
}
.scene-desc {
@ -119,48 +128,52 @@ const sceneList = [
max-height: 0;
opacity: 0;
.px(20px);
margin-top: 10px;
.mt(10px);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 描述动画
}
}
&:hover .scene-inner {
transform: translateY(-15px) scale(1.05);
box-shadow: 0 15px 35px rgba(50, 120, 255, 0.15);
//background: linear-gradient(180deg, #ffffff 0%, #e6f0ff 100%);
&.active .scene-inner {
transform: translateY(-42px);
border-radius: 10px;
background: #fff;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
//box-shadow: 0 20px 40px rgba(22, 93, 255, 0.15); // 增强阴影
//background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%); // 轻微渐变背景
}
&:hover .scene-icon {
//transform: scale(1.15);
//margin-bottom: 10px;
&.active .scene-icon {
opacity: 1; // 激活时恢复完全不透明
//transform: scale(1.05); // 轻微放大图标
}
&:hover .scene-name {
color: @primary-color;
&.active .scene-name {
//color: @primary-color; // 激活时文字变色
transform: translateY(-5px); // 文字轻微上移
}
&:hover .scene-desc {
&.active .scene-desc {
max-height: 120px;
opacity: 1;
transform: translateY(-5px); // 描述文字上移
}
}
}
@media (max-width: @tablet-breakpoint) {
.scene-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: @space-lg;
@media (max-width: @tablet-breakpoint) {
.scene-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: @space-lg;
}
.scene-item {
height: 280px;
}
}
.scene-item {
height: 280px;
}
}
@media (max-width: @mobile-breakpoint) {
.scene-list {
grid-template-columns: 1fr;
@media (max-width: @mobile-breakpoint) {
.scene-list {
grid-template-columns: 1fr;
}
}
}
</style>